@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    .dw {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* Hero */
    .dw .hero-card {
        border-radius: 20px;
        background: #312e81;
        border: none;
        overflow: hidden;
    }
    .dw .clock-pill {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: rgba(0,0,0,0.25);
        border: 1px solid rgba(255,255,255,0.1);
        padding: 10px 18px;
        border-radius: 12px;
    }
    .dw .clock-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.45);
        margin-bottom: 3px;
    }
    .dw #realtime-clock {
        font-family: 'Courier New', monospace;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #fbbf24;
    }
    .dw .clock-date {
        font-size: 13px;
        color: rgba(255,255,255,0.6);
    }

    /* Stat cards */
    .dw .stat-card {
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        background: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .dw .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
    }
    .dw .stat-card .stat-icon {
        font-size: 22px;
        margin-bottom: 10px;
        display: block;
    }
    .dw .stat-card .stat-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #94a3b8;
        margin-bottom: 6px;
    }
    .dw .stat-card .stat-value {
        font-size: 30px;
        font-weight: 700;
        line-height: 1;
        color: #0f172a;
    }
    .dw .stat-card.success { border-left: 3px solid #16a34a; }
    .dw .stat-card.danger  { border-left: 3px solid #dc2626; }
    .dw .stat-card.success .stat-label { color: #15803d; }
    .dw .stat-card.success .stat-value { color: #15803d; }
    .dw .stat-card.danger  .stat-label { color: #b91c1c; }
    .dw .stat-card.danger  .stat-value { color: #b91c1c; }

    /* Tabel */
    .dw .table-card {
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        background: #fff;
        overflow: hidden;
    }
    .dw .table-card .card-header {
        background: #fff;
        border-bottom: 1px solid #f1f5f9;
        padding: 18px 24px;
    }
    .dw .table th {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #94a3b8;
        padding: 12px 20px;
        border-bottom: 1px solid #f1f5f9;
    }
    .dw .table td {
        padding: 14px 20px;
        border-bottom: 1px solid #f8fafc;
        vertical-align: middle;
        font-size: 13px;
        color: #1e293b;
    }
    .dw .table tbody tr:last-child td { border-bottom: none; }

    /* Avatar */
    .dw .avatar {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        flex-shrink: 0;
        background: #eef2ff;
        color: #4338ca;
    }

    /* Badge */
    .dw .badge-guru  { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
    .dw .badge-siswa { background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }

    /* Waktu scan */
    .dw .scan-time {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        color: #4338ca;
        font-weight: 600;
    }

    /* Status Kehadiran Dinamis */
    .dw .status-badge {
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .dw .status-hadir { color: #16a34a; }
    .dw .status-sakit { color: #ca8a04; }
    .dw .status-izin  { color: #0284c7; }
    .dw .status-alfa  { color: #dc2626; }

    /* Sidebar navigasi */
    .dw .sidebar-card {
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        background: #fff;
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .dw .sidebar-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #94a3b8;
        margin-bottom: 14px;
    }
    .dw .nav-item-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 10px;
        text-decoration: none;
        color: #1e293b;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #f1f5f9;
        margin-bottom: 8px;
        transition: all 0.15s;
    }
    .dw .nav-item-btn:hover {
        background: #4338ca;
        color: #fff;
        border-color: #4338ca;
    }
    .dw .nav-item-btn:hover i { color: #fff !important; }
    .dw .nav-item-btn i { font-size: 17px; }

    /* Responsive tabel - mobile */
    @media (max-width: 768px) {
        .dw .table-responsive-stack thead { display: none; }
        .dw .table-responsive-stack tr {
            display: block;
            border: 1px solid #f1f5f9;
            border-radius: 12px;
            margin-bottom: 10px;
            padding: 8px;
            background: #fff;
        }
        .dw .table-responsive-stack td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 6px !important;
            border: none !important;
        }
        .dw .table-responsive-stack td::before {
            content: attr(data-label);
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            text-transform: uppercase;
        }
    }
</style>

<div class="container-fluid py-4 px-3 px-lg-4 dw">

    {{-- ===== HERO ===== --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="hero-card p-4 p-md-5">
                <div class="row align-items-center">
                    <div class="col-md-7 text-white">
                        <h1 style="font-size:26px;font-weight:700;margin-bottom:6px;">Halo, Admin 👋</h1>
                        <p style="font-size:14px;color:rgba(255,255,255,0.55);margin-bottom:22px;">
                            Monitor absensi MTs Zumratul Muttaqin dalam genggaman Anda.
                        </p>
                        <div class="clock-pill">
                            <div>
                                <div class="clock-label">Waktu saat ini</div>
                                <div id="realtime-clock">00:00:00</div>
                            </div>
                            <div class="clock-date">{{ date('d M Y') }}</div>
                        </div>
                    </div>
                    <div class="col-md-5 text-md-end mt-4 mt-md-0">
                        <a href="{{ route('admin.scan') }}"
                           style="background:#fbbf24;color:#1c1917;border:none;border-radius:10px;padding:12px 22px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;">
                            <i class="bi bi-qr-code-scan"></i> Mulai Scan
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== STAT CARDS ===== --}}
    <div class="row g-3 mb-4">
        <div class="col-6 col-xl-3">
            <div class="stat-card shadow-sm h-100 p-3">
                <i class="bi bi-person-badge stat-icon text-primary"></i>
                <div class="stat-label">Total Guru</div>
                <div class="stat-value">{{ $totalGuru ?? 0 }}</div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="stat-card shadow-sm h-100 p-3">
                <i class="bi bi-people stat-icon text-info"></i>
                <div class="stat-label">Total Siswa</div>
                <div class="stat-value">{{ $totalSiswa ?? 0 }}</div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="stat-card success shadow-sm h-100 p-3">
                <i class="bi bi-patch-check stat-icon text-success"></i>
                <div class="stat-label">Sudah Input Absen</div>
                <div class="stat-value">{{ $absenHariIni ?? 0 }}</div>
            </div>
        </div>
        <div class="col-6 col-xl-3">
            <div class="stat-card danger shadow-sm h-100 p-3">
                <i class="bi bi-exclamation-circle stat-icon text-danger"></i>
                <div class="stat-label">Belum Absen</div>
                <div class="stat-value">{{ max(0, ($totalHarusHadir ?? 0) - ($absenHariIni ?? 0)) }}</div>
            </div>
        </div>
    </div>

    {{-- ===== MAIN CONTENT ===== --}}
    <div class="row g-4">

        {{-- Tabel Aktivitas --}}
        <div class="col-lg-8">
            <div class="table-card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <div style="font-size:15px;font-weight:600;color:#0f172a;">Aktivitas Terbaru</div>
                        <div style="font-size:12px;color:#94a3b8;margin-top:2px;">
                            Data tanggal <strong style="color:#64748b;">{{ date('d F Y') }}</strong>
                        </div>
                    </div>
                    <button onclick="location.reload()"
                            style="background:transparent;border:1px solid #e2e8f0;border-radius:8px;padding:6px 12px;font-size:12px;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:5px;">
                        <i class="bi bi-arrow-clockwise"></i> Refresh
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-responsive-stack mb-0">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th class="text-center">Peran / Kelas</th>
                                <th class="text-center">Waktu Scan/Input</th>
                                <th class="text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentActivities ?? [] as $act)
                            <tr>
                                <td data-label="Nama">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="avatar">
                                            {{ substr($act->guru->nama ?? $act->siswa->nama ?? '?', 0, 1) }}
                                        </div>
                                        <div>
                                            <div style="font-weight:600;font-size:13px;">{{ $act->guru->nama ?? $act->siswa->nama }}</div>
                                            <div style="font-size:11px;color:#94a3b8;">{{ $act->guru->nomor_identitas ?? $act->siswa->nisn }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td data-label="Peran/Kelas" class="text-center">
                                    @if($act->guru)
                                        <span class="badge-guru">Guru</span>
                                    @else
                                        <span class="badge-siswa">Siswa · {{ $act->siswa->kelas }}</span>
                                    @endif
                                </td>
                                <td data-label="Waktu" class="text-center">
                                    <span class="scan-time">{{ $act->created_at->format('H:i:s') }}</span>
                                </td>
                                <td data-label="Status" class="text-end">
                                    @php
    // Mencari nama kolom yang benar: bisa 'status_kehadiran', 'status', atau 'keterangan'
    $status = $act->status_kehadiran ?? $act->status ?? $act->keterangan ?? 'Hadir'; 
@endphp
                                    @if($status === 'Hadir')
                                        <span class="status-badge status-hadir"><i class="bi bi-check-circle-fill"></i> Hadir</span>
                                    @elseif($status === 'Sakit')
                                        <span class="status-badge status-sakit"><i class="bi bi-exclamation-triangle-fill"></i> Sakit</span>
                                    @elseif($status === 'Izin')
                                        <span class="status-badge status-izin"><i class="bi bi-info-circle-fill"></i> Izin</span>
                                    @elseif($status === 'Alfa')
                                        <span class="status-badge status-alfa"><i class="bi bi-x-circle-fill"></i> Alfa</span>
                                    @else
                                        <span class="status-badge" style="color:#64748b;"><i class="bi bi-question-circle-fill"></i> {{ $status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <i class="bi bi-inbox" style="font-size:36px;color:#cbd5e1;display:block;margin-bottom:10px;"></i>
                                    <p style="font-size:13px;color:#94a3b8;margin:0;">Belum ada aktivitas absensi untuk hari ini.</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Sidebar Navigasi --}}
        <div class="col-lg-4">
            <div class="sidebar-card">
                <div class="sidebar-label">Navigasi Cepat</div>

                <a href="{{ route('admin.siswa.index') }}" class="nav-item-btn">
                    <i class="bi bi-people-fill text-primary"></i> Data Siswa
                </a>
                <a href="{{ route('admin.guru.index') }}" class="nav-item-btn">
                    <i class="bi bi-mortarboard-fill" style="color:#b45309;"></i> Data Guru
                </a>
                <a href="{{ route('admin.laporan.bulanan') }}" class="nav-item-btn">
                    <i class="bi bi-file-earmark-spreadsheet-fill text-success"></i> Laporan Bulanan
                </a>

                <div class="mt-auto pt-3" style="border-top:1px solid #f1f5f9;">
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit"
                                style="width:100%;background:transparent;border:1px solid #fca5a5;border-radius:10px;padding:10px;font-size:13px;font-weight:600;color:#dc2626;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.15s;"
                                onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background='transparent'">
                            <i class="bi bi-box-arrow-right"></i> Keluar Sistem
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    function updateClock() {
        const now = new Date();
        const pad = n => String(n).padStart(2, '0');
        const el = document.getElementById('realtime-clock');
        if (el) el.textContent = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    }
    setInterval(updateClock, 1000);
    updateClock();
</script>
@endsection