@extends('layouts.app_siswa')

@section('title', 'Riwayat Absensi | Smart Cendekia Enterprise')

@section('css')
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
    :root {
        --app-primary: #2563EB;   
        --app-secondary: #3B82F6; 
        --app-bg: #F8FAFC;
        --color-success: #10B981;
        --color-warning: #F59E0B;
        --color-danger: #EF4444;
        --radius-premium: 24px;
        --shadow-elegant: 0 10px 40px -10px rgba(0,0,0,0.05);
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        background-color: var(--app-bg);
        color: #1E293B;
    }

    /* --- Responsive Logic --- */
    @media (max-width: 991.98px) {
        .main-header, .main-sidebar, .content-header { display: none !important; }
        .content-wrapper, .content, .container-fluid { 
            margin: 0 !important; padding: 0 !important; background: var(--app-bg) !important;
        }
        .absensi-wrapper { padding: 15px 15px 110px 15px !important; }
    }

    @media (min-width: 992px) {
        .mobile-header { display: none !important; }
        .content-wrapper { padding: 40px !important; }
        .absensi-wrapper { max-width: 1000px; margin: 0 auto; }
    }

    /* --- Hero Header --- */
    .hero-absensi {
        background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-secondary) 100%);
        border-radius: var(--radius-premium);
        padding: 35px 25px;
        color: white;
        margin-bottom: 25px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 30px rgba(37, 99, 235, 0.2);
    }
    .hero-absensi::after {
        content: ""; position: absolute; top: -20px; right: -20px; width: 150px; height: 150px;
        background: rgba(255,255,255,0.1); border-radius: 50%;
    }

    /* --- Attendance Card --- */
    .absensi-card {
        background: white;
        border-radius: 20px;
        padding: 18px;
        margin-bottom: 12px;
        border: 1px solid #F1F5F9;
        display: flex;
        align-items: center;
        box-shadow: var(--shadow-elegant);
        transition: transform 0.2s;
    }
    .absensi-card:active { transform: scale(0.97); }

    .date-box {
        width: 55px; height: 55px;
        background: #F0F7FF;
        border-radius: 15px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        margin-right: 15px; flex-shrink: 0;
    }
    .date-day { font-size: 1.1rem; font-weight: 900; color: var(--app-primary); line-height: 1; }
    .date-month { font-size: 0.6rem; font-weight: 800; color: #64748B; text-transform: uppercase; }

    .info-main { flex: 1; min-width: 0; }
    .info-time { font-size: 0.85rem; font-weight: 700; color: #1E293B; }
    .info-status { font-size: 0.7rem; font-weight: 600; color: #94A3B8; margin-top: 2px; }

    /* Status Badges */
    .badge-absensi {
        padding: 6px 12px; border-radius: 50px; font-size: 0.65rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.5px;
    }
    .status-hadir { background: #D1FAE5; color: #065F46; }
    .status-terlambat { background: #FEF3C7; color: #92400E; }
    .status-izin { background: #DBEAFE; color: #1E40AF; }
    .status-alpa { background: #FEE2E2; color: #991B1B; }

    /* Desktop View Correction */
    .desktop-table { background: white; border-radius: 20px; overflow: hidden; border: 1px solid #F1F5F9; }
    .table-modern th { background: #F8FAFC; padding: 15px 25px; font-size: 0.75rem; color: #94A3B8; font-weight: 800; text-transform: uppercase; }
    .table-modern td { padding: 18px 25px; vertical-align: middle; border-bottom: 1px solid #F1F5F9; font-weight: 600; }
</style>
@endsection

@section('content')

@include('partials.header_mobile')

<div class="absensi-wrapper animate__animated animate__fadeIn">
    
    <div class="hero-absensi">
        <h1 class="font-weight-900 mb-1" style="font-size: 1.8rem; letter-spacing: -1px;">Riwayat Kehadiran</h1>
        <p class="mb-0 text-white-50 small font-weight-bold">Pantau kedisiplinan dan waktu kehadiranmu.</p>
    </div>

    {{-- List Absensi (Mobile & Desktop) --}}
    <div class="mt-2">
        @forelse($absensis as $absen)
            @php
                $status = strtolower($absen->status_kehadiran);
                $badgeClass = match($status) {
                    'hadir', 'tepat waktu' => 'status-hadir',
                    'terlambat' => 'status-terlambat',
                    'sakit', 'izin' => 'status-izin',
                    default => 'status-alpa'
                };
                $waktu = $absen->waktu_masuk ? \Carbon\Carbon::parse($absen->waktu_masuk)->format('H:i') : '--:--';
                $tanggal = \Carbon\Carbon::parse($absen->created_at);
            @endphp

            <div class="absensi-card animate__animated animate__fadeInUp">
                <div class="date-box">
                    <span class="date-day">{{ $tanggal->format('d') }}</span>
                    <span class="date-month">{{ $tanggal->translatedFormat('M') }}</span>
                </div>
                <div class="info-main">
                    <div class="info-time">Jam Masuk: {{ $waktu }}</div>
                    <div class="info-status">{{ $tanggal->translatedFormat('l, d F Y') }}</div>
                </div>
                <div class="ml-2">
                    <span class="badge-absensi {{ $badgeClass }}">
                        {{ $absen->status_kehadiran }}
                    </span>
                </div>
            </div>
        @empty
            <div class="text-center py-5">
                <img src="https://illustrations.popsy.co/blue/searching.svg" width="150" class="mb-3 opacity-50">
                <h6 class="text-muted font-weight-bold">Belum ada riwayat absensi.</h6>
            </div>
        @endforelse
    </div>

    <div class="mt-4 d-flex justify-content-center">
        {{ $absensis->links() }}
    </div>

</div>

@include('partials.mobile-nav')

@endsection

@section('js')
<script>
    $(document).ready(function() {
        if ($(window).width() < 992) {
            $('body').addClass('sidebar-collapse');
        }
    });
</script>
@endsection