@extends('layouts.petugas')

@section('petugas-content')

@php
    \Carbon\Carbon::setLocale('id');
    $now            = \Carbon\Carbon::now()->timezone('Asia/Jakarta');
    $namaHari       = $now->isoFormat('dddd');
    $tanggalHariIni = $now->translatedFormat('d F Y');

    $warnaSesi = fn($s) => match(strtolower($s)) {
        'duha'    => '#f59e0b',
        'dzuhur'  => '#10b981',
        'tadarus' => '#6366f1',
        'upacara' => '#64748b',
        'masuk'   => '#16a34a',
        'pulang'  => '#dc2626',
        default   => '#4f46e5',
    };
@endphp

<style>
    :root {
        --primary:     #4f46e5;
        --bg-soft:     #f8fafc;
        --border:      #e2e8f0;
        --text-dark:   #1e293b;
        --text-muted:  #64748b;
    }

    /* ── Layout ── */
    .dp-wrap {
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--text-dark);
        background: var(--bg-soft);
        min-height: 100vh;
    }

    /* ── Hero ── */
    .dp-hero {
        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
        border-radius: 24px;
        padding: 2.5rem;
        position: relative;
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .dp-hero::after {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 180px;
        height: 180px;
        background: rgba(255,255,255,.12);
        border-radius: 50%;
        pointer-events: none;
    }

    .dp-clock {
        background: rgba(255,255,255,.15);
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 18px;
        padding: 1rem 2rem;
        display: inline-block;
    }

    .dp-clock h2 {
        font-size: 2.4rem;
        font-weight: 700;
        margin: 0;
        font-variant-numeric: tabular-nums;
        letter-spacing: .02em;
    }

    /* ── Stat Cards ── */
    .stat-card {
        background: #fff;
        border-radius: 20px;
        border: 1px solid var(--border);
        padding: 1.25rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
        transition: transform .25s, box-shadow .25s;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,.07);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        flex-shrink: 0;
    }

    .stat-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        margin: 0;
    }

    /* ── History Card ── */
    .history-card {
        background: #fff;
        border-radius: 20px;
        border: 1px solid var(--border);
        box-shadow: 0 1px 4px rgba(0,0,0,.04);
        overflow: hidden;
    }

    .history-card .card-header {
        background: #fff;
        border-bottom: 1px solid var(--border);
        padding: 20px 24px;
    }

    /* ── Tabs ── */
    .tab-toggle {
        display: inline-flex;
        background: var(--bg-soft);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 4px;
        gap: 2px;
    }

    .tab-toggle .nav-link {
        border: none;
        border-radius: 9px;
        padding: 7px 20px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-muted);
        transition: background .15s, color .15s, box-shadow .15s;
    }

    .tab-toggle .nav-link:hover:not(.active) { color: var(--primary); }

    .tab-toggle .nav-link.active {
        background: #fff;
        color: var(--primary);
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
    }

    /* ── Table ── */
    .table thead th {
        background: var(--bg-soft);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
        padding: 13px 18px;
        border-bottom: 1px solid var(--border);
        border-top: none;
    }

    .table tbody td {
        padding: 14px 18px;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }

    .table tbody tr:last-child td { border-bottom: none; }
    .table tbody tr:hover { background: var(--bg-soft); }

    /* ── Avatar ── */
    .av {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 15px;
        flex-shrink: 0;
    }

    /* ── Badge Sesi & Status ── */
    .badge-sesi {
        display: inline-block;
        padding: 5px 11px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #fff;
    }
    
    .status-badge {
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        border-radius: 8px;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .status-hadir { background: #dcfce7; color: #16a34a; }
    .status-sakit { background: #fef08a; color: #ca8a04; }
    .status-izin  { background: #e0f2fe; color: #0284c7; }
    .status-alfa  { background: #fee2e2; color: #dc2626; }

    /* ── Responsive Tabel Mobile (No Horizontal Scroll) ── */
    @media (max-width: 768px) {
        .dp-hero {
            padding: 1.75rem 1.25rem;
            text-align: center;
        }
        .dp-clock { width: 100%; margin-top: 1.25rem; text-align: center; }
        .stat-card { flex-direction: column; text-align: center; gap: 12px; padding: 1.5rem 1rem; }

        .table-responsive-stack thead { display: none; }
        .table-responsive-stack tr {
            display: block;
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 12px;
            padding: 10px 6px;
            background: #fff;
        }
        .table-responsive-stack td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px !important;
            border-bottom: 1px dashed #f1f5f9 !important;
            text-align: right;
        }
        .table-responsive-stack td:last-child {
            border-bottom: none !important;
        }
        .table-responsive-stack td::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: .05em;
            text-align: left;
            margin-right: 15px;
        }
        /* Memastikan konten di dalam sel rata kanan pada mobile */
        .table-responsive-stack td .d-flex {
            justify-content: flex-end;
            text-align: right;
        }
        /* Menghilangkan padding khusus desktop pada mobile */
        .ps-4 { padding-left: 12px !important; }
        .pe-4 { padding-right: 12px !important; }
    }
</style>

<div class="dp-wrap container-fluid py-4 px-md-5">

    {{-- Hero --}}
    <div class="dp-hero text-white">
        <div class="row align-items-center">
            <div class="col-md-7">
                <span class="badge bg-black bg-opacity-20 rounded-pill px-3 py-2 mb-3" style="font-size: 12px;">
                    <i class="bi bi-shield-check me-1"></i> Sistem Presensi Aktif
                </span>
                <h2 class="fw-bold mb-2" style="font-size: 2rem;">Halo, Petugas!</h2>
                <p class="mb-0 text-white text-opacity-75">
                    <i class="bi bi-calendar3 me-2"></i>{{ $namaHari }}, {{ $tanggalHariIni }}
                </p>
            </div>
            <div class="col-md-5 text-md-end mt-3 mt-md-0">
                <div class="dp-clock">
                    <h2 id="jamRealtime">00:00:00</h2>
                    <div class="d-flex align-items-center justify-content-center gap-2 mt-1">
                        <span class="spinner-grow spinner-grow-sm text-white opacity-75" role="status" aria-hidden="true"></span>
                        <small class="text-white text-opacity-60 fw-semibold" style="font-size: 10px; letter-spacing: .08em;">
                            LIVE TRACKING
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                    <i class="bi bi-people-fill"></i>
                </div>
                <div>
                    <p class="stat-label">Total Siswa Absen</p>
                    <h3 class="stat-value">{{ $stats['siswa_count'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="stat-card">
                <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                    <i class="bi bi-person-badge-fill"></i>
                </div>
                <div>
                    <p class="stat-label">Total Guru Absen</p>
                    <h3 class="stat-value">{{ $stats['guru_count'] ?? 0 }}</h3>
                </div>
            </div>
        </div>
    </div>

    {{-- Riwayat Presensi --}}
    <div class="history-card">
        <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="bi bi-clock-history text-primary me-2"></i>Riwayat Presensi
                </h5>
                <p class="text-muted small mb-0">Aktivitas terbaru hari ini</p>
            </div>
            <div class="tab-toggle nav" id="pills-tab" role="tablist">
                <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-siswa" type="button">Siswa</button>
                <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-guru" type="button">Guru</button>
            </div>
        </div>

        <div class="tab-content">

            {{-- Tab Siswa --}}
            <div class="tab-pane fade show active" id="tab-siswa" role="tabpanel">
                <div class="table-responsive">
                    {{-- Tambahkan class table-responsive-stack di sini --}}
                    <table class="table align-middle mb-0 table-responsive-stack">
                        <thead>
                            <tr>
                                <th class="ps-4">Profil Siswa</th>
                                <th class="text-center">Kelas</th>
                                <th>Waktu Scan</th>
                                <th class="text-center">Sesi</th>
                                <th class="pe-4 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($stats['terakhir']->whereNotNull('siswa_id') as $row)
                            <tr>
                                {{-- Sisipkan atribut data-label di setiap <td> --}}
                                <td data-label="Profil Siswa" class="ps-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="av bg-primary bg-opacity-10 text-primary">
                                            {{ strtoupper(substr($row->siswa->nama, 0, 1)) }}
                                        </div>
                                        <div class="text-start">
                                            <div class="fw-semibold" style="font-size: 14px;">{{ $row->siswa->nama }}</div>
                                            <div class="text-primary" style="font-size: 11px;">NISN: {{ $row->siswa->nisn ?? '-' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td data-label="Kelas" class="text-center">
                                    <span class="badge bg-light text-secondary border px-3 py-2 rounded-pill" style="font-size: 12px;">
                                        {{ $row->siswa->kelas }}
                                    </span>
                                </td>
                                <td data-label="Waktu Scan">
                                    <span class="text-muted" style="font-size: 13px;">
                                        <i class="bi bi-alarm me-1"></i>{{ $row->jam_scan }}
                                    </span>
                                </td>
                                <td data-label="Sesi" class="text-center">
                                    <span class="badge-sesi" style="background: {{ $warnaSesi($row->kategori) }};">
                                        {{ strtoupper($row->kategori) }}
                                    </span>
                                </td>
                                <td data-label="Status" class="pe-4 text-center">
                                    @php
                                        // Pengecekan kolom status secara dinamis
                                        $status = $row->status_kehadiran ?? $row->status ?? $row->keterangan ?? 'Hadir'; 
                                    @endphp
                                    
                                    @if(strtolower($status) == 'sakit')
                                        <span class="status-badge status-sakit"><i class="bi bi-bandaid-fill"></i> Sakit</span>
                                    @elseif(strtolower($status) == 'izin')
                                        <span class="status-badge status-izin"><i class="bi bi-envelope-paper-fill"></i> Izin</span>
                                    @elseif(strtolower($status) == 'alfa')
                                        <span class="status-badge status-alfa"><i class="bi bi-x-circle-fill"></i> Alfa</span>
                                    @else
                                        <span class="status-badge status-hadir"><i class="bi bi-check-circle-fill"></i> Hadir</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                                    <p class="mb-0 fw-semibold" style="font-size: 13px;">Belum ada aktivitas siswa hari ini.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Tab Guru --}}
            <div class="tab-pane fade" id="tab-guru" role="tabpanel">
                <div class="table-responsive">
                    {{-- Tambahkan class table-responsive-stack di sini --}}
                    <table class="table align-middle mb-0 table-responsive-stack">
                        <thead>
                            <tr>
                                <th class="ps-4">Profil Guru</th>
                                <th>Waktu Scan</th>
                                <th class="text-center">Sesi</th>
                                <th class="pe-4 text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($stats['terakhir']->whereNotNull('guru_id') as $row)
                            <tr>
                                {{-- Sisipkan atribut data-label di setiap <td> --}}
                                <td data-label="Profil Guru" class="ps-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="av bg-danger bg-opacity-10 text-danger">
                                            {{ strtoupper(substr($row->guru->nama, 0, 1)) }}
                                        </div>
                                        <div class="text-start">
                                            <div class="fw-semibold" style="font-size: 14px;">{{ $row->guru->nama }}</div>
                                            <div class="text-danger" style="font-size: 11px;">
                                                {{ $row->guru->jenis_identitas }}: {{ $row->guru->nomor_identitas }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td data-label="Waktu Scan">
                                    <span class="text-muted" style="font-size: 13px;">
                                        <i class="bi bi-alarm me-1"></i>{{ $row->jam_scan }}
                                    </span>
                                </td>
                                <td data-label="Sesi" class="text-center">
                                    <span class="badge-sesi" style="background: {{ $warnaSesi($row->kategori) }};">
                                        {{ strtoupper($row->kategori) }}
                                    </span>
                                </td>
                                <td data-label="Status" class="pe-4 text-center">
                                    @php
                                        // Pengecekan kolom status secara dinamis
                                        $status = $row->status_kehadiran ?? $row->status ?? $row->keterangan ?? 'Hadir'; 
                                    @endphp
                                    
                                    @if(strtolower($status) == 'sakit')
                                        <span class="status-badge status-sakit"><i class="bi bi-bandaid-fill"></i> Sakit</span>
                                    @elseif(strtolower($status) == 'izin')
                                        <span class="status-badge status-izin"><i class="bi bi-envelope-paper-fill"></i> Izin</span>
                                    @elseif(strtolower($status) == 'alfa')
                                        <span class="status-badge status-alfa"><i class="bi bi-x-circle-fill"></i> Alfa</span>
                                    @else
                                        <span class="status-badge status-hadir"><i class="bi bi-check-circle-fill"></i> Hadir</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 d-block mb-3 opacity-25"></i>
                                    <p class="mb-0 fw-semibold" style="font-size: 13px;">Belum ada aktivitas guru hari ini.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</div>

<script>
    function updateJam() {
        document.getElementById('jamRealtime').textContent =
            new Date().toLocaleTimeString('id-ID', {
                hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
            }).replace(/\./g, ':');
    }
    setInterval(updateJam, 1000);
    updateJam();
</script>

@endsection