<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl sm:text-2xl font-bold tracking-tight text-white">
                    Dashboard Admin
                </h2>
                <p class="mt-0.5 text-sm text-teal-100">
                    Sistem Monitoring Kesehatan · AI-Powered
                </p>
            </div>
            <div class="hidden sm:flex items-center gap-2">
                <span id="live-clock" class="text-sm font-mono text-teal-100"></span>
                <span class="inline-flex items-center gap-1.5 bg-white/20 text-white text-xs font-semibold px-3 py-1.5 rounded-full border border-white/30">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse"></span>
                    Sistem Online
                </span>
            </div>
        </div>
    </x-slot>

    {{-- ── External Assets ────────────────────────────────────── --}}
    @push('styles')
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    @endpush

    {{-- ═══ SHARED DASHBOARD STYLE SYSTEM ═══ --}}
    <style>
        /* ── CSS Variables — Light Mode ─── */
        :root {
            --card-bg           : #ffffff;
            --card-border       : #e2e8f0;
            --card-shadow       : 0 1px 4px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.03);
            --card-shadow-hover : 0 8px 24px rgba(15,23,42,.10), 0 0 0 1px rgba(20,184,166,.15);
            --accent-grad       : linear-gradient(90deg, #0d9488, #06b6d4);
            --accent-primary    : #0d9488;
            --accent-light      : #ccfbf1;
            --text-heading      : #0f172a;
            --text-body         : #334155;
            --text-muted        : #64748b;
        }
        .dark {
            --card-bg           : #1e293b;
            --card-border       : #334155;
            --card-shadow       : 0 1px 4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.15);
            --card-shadow-hover : 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(20,184,166,.2);
            --accent-primary    : #2dd4bf;
            --accent-light      : rgba(20,184,166,.15);
            --text-heading      : #f8fafc;
            --text-body         : #cbd5e1;
            --text-muted        : #94a3b8;
        }

        * { font-family: 'Plus Jakarta Sans', sans-serif; }
        .mono { font-family: 'JetBrains Mono', monospace; }

        .dashboard-card {
            background   : var(--card-bg);
            border       : 1px solid var(--card-border);
            box-shadow   : var(--card-shadow);
            border-radius: 14px;
            padding      : 1.25rem;
            transition   : box-shadow .2s, border-color .2s;
        }
        .dashboard-card:hover { box-shadow: var(--card-shadow-hover); }

        .stat-card { position: relative; overflow: hidden; }
        .stat-card::before {
            content:''; position:absolute; top:0; left:0; right:0;
            height:3px; background:var(--accent-grad);
            border-radius:14px 14px 0 0;
        }
        .stat-num {
            font-size:2rem; font-weight:800; line-height:1;
            letter-spacing:-.03em; color:var(--text-heading);
        }

        .icon-wrap {
            width:44px; height:44px; min-width:44px;
            border-radius:12px; display:flex;
            align-items:center; justify-content:center; flex-shrink:0;
            background:var(--accent-light);
        }
        .icon-wrap svg { color:var(--accent-primary); }
        .icon-wrap.danger  { background:#fef2f2; }
        .dark .icon-wrap.danger  { background:rgba(239,68,68,.15); }
        .icon-wrap.danger svg  { color:#ef4444; }
        .icon-wrap.warning { background:#fffbeb; }
        .dark .icon-wrap.warning { background:rgba(245,158,11,.15); }
        .icon-wrap.warning svg { color:#f59e0b; }

        .kpi-bar-track { height:5px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
        .dark .kpi-bar-track { background:#334155; }
        .kpi-bar-fill { height:100%; background:var(--accent-grad); border-radius:999px; transition:width 1.2s cubic-bezier(.4,0,.2,1); }

        .action-card {
            display:flex; align-items:center; gap:1rem;
            text-decoration:none; transition:transform .15s, box-shadow .15s;
        }
        .action-card:hover { transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
        .action-card:hover .action-icon { transform:scale(1.08); }
        .action-icon {
            flex-shrink:0; width:44px; height:44px; min-width:44px;
            border-radius:12px; display:flex; align-items:center; justify-content:center;
            background:var(--accent-light); transition:transform .2s;
        }
        .action-icon svg { width:20px; height:20px; color:var(--accent-primary); }
        .action-icon.warning { background:#fffbeb; }
        .dark .action-icon.warning { background:rgba(245,158,11,.15); }
        .action-icon.warning svg { color:#f59e0b; }

        .table-row {
            display:flex; align-items:center; gap:.75rem;
            padding:.75rem 1.25rem; border-bottom:1px solid var(--card-border);
            transition:background .15s;
        }
        .table-row:last-child { border-bottom:none; }
        .table-row:hover { background:#f8fafc; }
        .dark .table-row:hover { background:rgba(255,255,255,.03); }

        .badge {
            display:inline-flex; align-items:center;
            padding:.2rem .55rem; border-radius:999px;
            font-size:.7rem; font-weight:700; letter-spacing:.02em;
        }
        .sec-title {
            font-size:.7rem; font-weight:700; letter-spacing:.08em;
            text-transform:uppercase; color:var(--text-muted);
        }
        .doughnut-legend-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
        .count-up { display:inline-block; }
        .grad-text {
            background:var(--accent-grad); -webkit-background-clip:text;
            -webkit-text-fill-color:transparent; background-clip:text;
        }

        @keyframes slideUp {
            from { opacity:0; transform:translateY(16px); }
            to   { opacity:1; transform:translateY(0); }
        }
        .anim-up { animation:slideUp .4s ease both; }
        .anim-up:nth-child(2) { animation-delay:.06s; }
        .anim-up:nth-child(3) { animation-delay:.12s; }
        .anim-up:nth-child(4) { animation-delay:.18s; }
        .anim-up:nth-child(5) { animation-delay:.24s; }
        .anim-up:nth-child(6) { animation-delay:.30s; }
    </style>

    <div class="py-6 sm:py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-5">

        {{-- ── BANNER ─── --}}
        <div class="dashboard-card relative overflow-hidden !border-none anim-up"
             style="background:linear-gradient(135deg,#0d9488 0%,#0891b2 100%);">
            <div style="position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none;"></div>
            <div style="position:absolute;bottom:-60px;right:80px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;"></div>
            <div class="relative z-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <p class="text-teal-100 text-xs font-bold tracking-widest uppercase mb-1">Ringkasan Hari Ini</p>
                    <h3 class="text-white text-xl sm:text-2xl font-extrabold leading-tight">
                        Selamat datang, Admin 👋
                    </h3>
                    <p class="text-teal-50 text-sm mt-1">
                        <span class="mono text-teal-200 font-semibold">{{ $stats['pemeriksaan_hari_ini'] }}</span>
                        pemeriksaan ·
                        <span class="mono text-red-300 font-semibold">{{ $stats['demam_hari_ini'] }}</span>
                        demam ·
                        <span class="mono text-amber-300 font-semibold">{{ $stats['perlu_review'] }}</span>
                        perlu ditinjau
                    </p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <a href="{{ route('admin.dokter.index') }}"
                       class="inline-flex items-center gap-2 bg-white text-teal-700 hover:bg-teal-50 text-sm font-semibold px-4 py-2 rounded-xl transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        Kelola Dokter
                    </a>
                    <a href="{{ route('admin.users.index') }}"
                       class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white text-sm font-semibold px-4 py-2 rounded-xl transition-colors border border-white/20">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197"/>
                        </svg>
                        Kelola Users
                    </a>
                </div>
            </div>
        </div>

        {{-- ── STAT CARDS ─── --}}
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">

            <div class="dashboard-card stat-card anim-up">
                <div class="flex items-start justify-between mb-3">
                    <div class="icon-wrap">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                </div>
                <p class="stat-num count-up" data-target="{{ $stats['total_pasien'] }}">0</p>
                <p class="text-sm font-medium mt-1" style="color:var(--text-muted)">Total Pasien</p>
                <div class="mt-3">
                    @php $ratio = $stats['total_pasien'] > 0 ? round($stats['wajah_terdaftar']/$stats['total_pasien']*100) : 0; @endphp
                    <div class="kpi-bar-track"><div class="kpi-bar-fill" style="width:{{ $ratio }}%"></div></div>
                    <p class="text-xs mt-1.5" style="color:var(--text-muted)">
                        <span class="font-semibold" style="color:var(--accent-primary)">{{ $stats['wajah_terdaftar'] }}</span>
                        wajah ({{ $ratio }}%)
                    </p>
                </div>
            </div>

            <div class="dashboard-card stat-card anim-up">
                <div class="flex items-start justify-between mb-3">
                    <div class="icon-wrap">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
                <p class="stat-num count-up" data-target="{{ $stats['total_dokter'] }}">0</p>
                <p class="text-sm font-medium mt-1" style="color:var(--text-muted)">Total Dokter</p>
                <div class="mt-3">
                    @php $aktifRatio = $stats['total_dokter'] > 0 ? round($stats['dokter_aktif']/$stats['total_dokter']*100) : 0; @endphp
                    <div class="kpi-bar-track"><div class="kpi-bar-fill" style="width:{{ $aktifRatio }}%"></div></div>
                    <p class="text-xs mt-1.5" style="color:var(--text-muted)">
                        <span class="font-semibold" style="color:var(--accent-primary)">{{ $stats['dokter_aktif'] }}</span>
                        aktif ({{ $aktifRatio }}%)
                    </p>
                </div>
            </div>

            <div class="dashboard-card stat-card anim-up">
                <div class="flex items-start justify-between mb-3">
                    <div class="icon-wrap">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                        </svg>
                    </div>
                </div>
                <p class="stat-num count-up" data-target="{{ $stats['pemeriksaan_hari_ini'] }}">0</p>
                <p class="text-sm font-medium mt-1" style="color:var(--text-muted)">Pemeriksaan</p>
                <div class="mt-3 flex items-center gap-2">
                    @if($stats['demam_hari_ini'] > 0)
                        <span class="badge bg-red-100 text-red-600 dark:bg-red-900/40 dark:text-red-400">
                            🌡 {{ $stats['demam_hari_ini'] }} demam
                        </span>
                    @else
                        <span class="badge bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400">✓ Aman</span>
                    @endif
                </div>
            </div>

            <div class="dashboard-card stat-card anim-up">
                <div class="flex items-start justify-between mb-3">
                    <div class="icon-wrap warning">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                        </svg>
                    </div>
                </div>
                <p class="stat-num count-up" data-target="{{ $stats['perlu_review'] }}">0</p>
                <p class="text-sm font-medium mt-1" style="color:var(--text-muted)">Perlu Review AI</p>
                <div class="mt-3 flex items-center gap-2">
                    @if($stats['perlu_review'] > 0)
                        <span class="badge bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400">⚠ Butuh perhatian</span>
                    @else
                        <span class="badge bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400">✓ Semua ditinjau</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- ── CHARTS ROW ─── --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <div class="dashboard-card lg:col-span-2 anim-up">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <p class="sec-title">Grafik</p>
                        <h3 class="font-bold text-lg" style="color:var(--text-heading)">Statistik Sistem</h3>
                    </div>
                    <span class="badge bg-slate-100 text-slate-500 dark:bg-slate-700 dark:text-slate-300">Hari Ini</span>
                </div>
                <div style="height:220px;position:relative;">
                    <canvas id="barStatsChart"></canvas>
                </div>
            </div>

            <div class="dashboard-card anim-up">
                <div class="mb-4">
                    <p class="sec-title">Komposisi</p>
                    <h3 class="font-bold text-lg" style="color:var(--text-heading)">Status Dokter</h3>
                </div>
                <div style="height:150px;position:relative;margin:0 auto;max-width:190px;">
                    <canvas id="dokterDoughnutChart"></canvas>
                </div>
                <div class="mt-4 space-y-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="doughnut-legend-dot" style="background:#14b8a6;"></div>
                            <span class="text-sm" style="color:var(--text-body)">Dokter Aktif</span>
                        </div>
                        <span class="mono text-sm font-bold" style="color:var(--text-heading)">{{ $stats['dokter_aktif'] }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="doughnut-legend-dot bg-slate-200 dark:bg-slate-600"></div>
                            <span class="text-sm" style="color:var(--text-body)">Non-Aktif</span>
                        </div>
                        <span class="mono text-sm font-bold" style="color:var(--text-heading)">{{ $stats['total_dokter'] - $stats['dokter_aktif'] }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="doughnut-legend-dot" style="background:#06b6d4;"></div>
                            <span class="text-sm" style="color:var(--text-body)">Total Users</span>
                        </div>
                        <span class="mono text-sm font-bold" style="color:var(--text-heading)">{{ $stats['total_users'] }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── QUICK ACTIONS ─── --}}
        <div>
            <p class="sec-title mb-3">Akses Cepat</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                @php
                    $actions = [
                        ['href' => route('admin.users.index'),      'label' => 'Kelola Users',  'sub' => 'Manajemen akun pengguna',    'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197', 'type' => ''],
                        ['href' => route('admin.dokter.index'),     'label' => 'Kelola Dokter', 'sub' => 'Data & jadwal dokter',       'icon' => 'M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z', 'type' => ''],
                        ['href' => route('admin.laporan.index'),    'label' => 'Laporan',       'sub' => 'Harian, bulanan & ekspor',   'icon' => 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z', 'type' => ''],
                        ['href' => route('admin.pengaturan.index'), 'label' => 'Pengaturan',    'sub' => 'Konfigurasi sistem',         'icon' => 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4', 'type' => 'warning'],
                    ];
                @endphp
                @foreach($actions as $a)
                <a href="{{ $a['href'] }}" class="dashboard-card action-card anim-up">
                    <div class="action-icon {{ $a['type'] }}">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $a['icon'] }}"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-bold text-sm" style="color:var(--text-heading)">{{ $a['label'] }}</p>
                        <p class="text-xs truncate" style="color:var(--text-muted)">{{ $a['sub'] }}</p>
                    </div>
                    <svg class="w-4 h-4 shrink-0" style="color:var(--card-border)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
                @endforeach
            </div>
        </div>

        {{-- ── BOTTOM ROW ─── --}}
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-4">

            {{-- Pemeriksaan Terbaru --}}
            <div class="dashboard-card !p-0 overflow-hidden lg:col-span-3 anim-up">
                <div class="flex items-center justify-between px-5 py-4 border-b" style="border-color:var(--card-border)">
                    <div>
                        <p class="sec-title">Aktivitas</p>
                        <h3 class="font-bold" style="color:var(--text-heading)">Pemeriksaan Terbaru</h3>
                    </div>
                    <a href="{{ route('petugas.pemeriksaan.index') }}" class="text-xs font-semibold transition-colors" style="color:var(--accent-primary)">
                        Lihat semua →
                    </a>
                </div>
                <div class="flex items-center gap-3 px-5 py-2 text-xs font-semibold uppercase tracking-wider bg-slate-50 dark:bg-slate-800/50" style="color:var(--text-muted)">
                    <span class="flex-1">Pasien</span>
                    <span class="text-center w-20 sm:w-28">Suhu</span>
                    <span class="text-right w-20 sm:w-24">Waktu</span>
                </div>
                @forelse($pemeriksaan_terbaru as $p)
                <div class="table-row">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-sm
                            @if($p->kategori_suhu == 'NORMAL') bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-400
                            @elseif($p->kategori_suhu == 'DEMAM_TINGGI') bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-400
                            @else bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 @endif">
                            {{ strtoupper(substr($p->pasien->nama_lengkap ?? '?', 0, 1)) }}
                        </div>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold truncate" style="color:var(--text-heading)">{{ $p->pasien->nama_lengkap ?? '-' }}</p>
                            <p class="text-xs truncate mono" style="color:var(--text-muted)">{{ $p->pasien->no_rekam_medis ?? '-' }}</p>
                        </div>
                    </div>
                    <div class="text-center w-20 sm:w-28 shrink-0">
                        @php
                            $sc = match($p->kategori_suhu) {
                                'NORMAL'       => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400',
                                'DEMAM_TINGGI' => 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
                                default        => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
                            };
                        @endphp
                        <span class="badge {{ $sc }}">{{ number_format($p->suhu_tubuh,1) }}°C</span>
                    </div>
                    <div class="text-right w-20 sm:w-24 shrink-0">
                        <p class="text-xs" style="color:var(--text-muted)">{{ $p->waktu_pemeriksaan->diffForHumans() }}</p>
                    </div>
                </div>
                @empty
                <div class="flex flex-col items-center justify-center py-12" style="color:var(--text-muted)">
                    <svg class="w-10 h-10 mb-3 opacity-40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <p class="text-sm font-medium">Belum ada pemeriksaan hari ini</p>
                </div>
                @endforelse
            </div>

            {{-- Ringkasan Sistem --}}
            <div class="flex flex-col gap-4 lg:col-span-2">
                {{-- Health Score --}}
                <div class="dashboard-card anim-up !border-none"
                     style="background:linear-gradient(135deg,#0f766e,#0891b2);">
                    <p class="text-teal-200 text-xs font-bold tracking-widest uppercase mb-1">Indeks Kesehatan</p>
                    <div class="flex items-end gap-3 mt-2">
                        @php
                            $total = max($distribusiSuhu['total'] ?? $stats['pemeriksaan_hari_ini'], 1);
                            $sehat = $distribusiSuhu['normal'] ?? ($total - $stats['demam_hari_ini']);
                            $score = round($sehat / $total * 100);
                        @endphp
                        <span class="text-5xl font-black text-white mono">{{ $score }}<span class="text-2xl text-teal-200">%</span></span>
                        <div class="mb-1">
                            <p class="text-white font-semibold text-sm">Pasien Sehat</p>
                            <p class="text-teal-200 text-xs">dari {{ $distribusiSuhu['total'] ?? $stats['pemeriksaan_hari_ini'] }} pemeriksaan</p>
                        </div>
                    </div>
                    <div class="mt-4 bg-white/20 rounded-full h-2">
                        <div class="h-2 rounded-full bg-white transition-all duration-1000" style="width:{{ $score }}%"></div>
                    </div>
                </div>

                {{-- Ringkasan Stats --}}
                <div class="dashboard-card !p-0 overflow-hidden anim-up">
                    <div class="px-5 py-3 border-b" style="border-color:var(--card-border)">
                        <h3 class="font-bold text-sm" style="color:var(--text-heading)">Ringkasan Sistem</h3>
                    </div>
                    <div class="divide-y" style="border-color:var(--card-border)">
                        @foreach([
                            ['label'=>'Total Pasien',     'val'=>$stats['total_pasien']],
                            ['label'=>'Wajah Terdaftar',  'val'=>$stats['wajah_terdaftar']],
                            ['label'=>'Dokter Aktif',     'val'=>$stats['dokter_aktif']],
                            ['label'=>'Total Users',      'val'=>$stats['total_users']],
                            ['label'=>'Pending Review',   'val'=>$stats['perlu_review']],
                        ] as $row)
                        <div class="flex items-center justify-between px-5 py-2.5">
                            <span class="text-sm" style="color:var(--text-body)">{{ $row['label'] }}</span>
                            <span class="mono font-bold text-sm" style="color:var(--accent-primary)">{{ $row['val'] }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

    </div>{{-- /max-w --}}

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Live clock
        function tick() {
            const el = document.getElementById('live-clock');
            if (el) el.textContent = new Date().toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
        }
        tick(); setInterval(tick, 1000);

        // Count-up
        document.querySelectorAll('.count-up').forEach(el => {
            const target = parseInt(el.dataset.target) || 0;
            if (!target) { el.textContent = '0'; return; }
            let cur = 0;
            const step = Math.max(1, Math.floor(target/60));
            const iv = setInterval(() => {
                cur = Math.min(cur + step, target);
                el.textContent = cur.toLocaleString('id-ID');
                if (cur >= target) clearInterval(iv);
            }, 18);
        });

        const isDark    = () => document.documentElement.classList.contains('dark');
        const textColor = () => isDark() ? '#94a3b8' : '#64748b';
        const gridColor = () => isDark() ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.05)';
        const tooltipBg = () => isDark() ? '#1e293b' : '#ffffff';
        const tooltipBd = () => isDark() ? '#334155' : '#e2e8f0';
        const tooltipTx = () => isDark() ? '#e2e8f0' : '#0f172a';
        const tip = () => ({ backgroundColor:tooltipBg(), borderColor:tooltipBd(), borderWidth:1, titleColor:tooltipTx(), bodyColor:tooltipTx(), padding:12, cornerRadius:10 });

        const tealPalette = ['rgba(13,148,136,.80)','rgba(20,184,166,.80)','rgba(45,212,191,.80)','rgba(6,182,212,.80)','rgba(8,145,178,.80)','rgba(14,116,144,.80)','rgba(100,116,139,.75)'];
        const tealBorder  = ['#0d9488','#14b8a6','#2dd4bf','#06b6d4','#0891b2','#0e7490','#64748b'];

        const barCtx = document.getElementById('barStatsChart');
        if (barCtx) {
            new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: ['Total Pasien','Wajah','Pemeriksaan','Demam','Review','Dokter','Users'],
                    datasets: [{ label:'Jumlah', data:[{{ $stats['total_pasien'] }},{{ $stats['wajah_terdaftar'] }},{{ $stats['pemeriksaan_hari_ini'] }},{{ $stats['demam_hari_ini'] }},{{ $stats['perlu_review'] }},{{ $stats['total_dokter'] }},{{ $stats['total_users'] }}], backgroundColor:tealPalette, borderColor:tealBorder, borderWidth:2, borderRadius:8, borderSkipped:false }]
                },
                options: {
                    responsive:true, maintainAspectRatio:false,
                    animation:{ duration:900, easing:'easeOutQuart' },
                    plugins:{ legend:{display:false}, tooltip:tip() },
                    scales: {
                        x:{ ticks:{color:textColor(),font:{size:10,family:'Plus Jakarta Sans'},maxRotation:30}, grid:{color:gridColor()} },
                        y:{ ticks:{color:textColor(),font:{size:11},stepSize:1}, grid:{color:gridColor()}, beginAtZero:true }
                    }
                }
            });
        }

        const doughCtx = document.getElementById('dokterDoughnutChart');
        if (doughCtx) {
            new Chart(doughCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Aktif','Non-Aktif'],
                    datasets: [{ data:[{{ $stats['dokter_aktif'] }},{{ $stats['total_dokter']-$stats['dokter_aktif'] }}], backgroundColor:['#14b8a6', isDark()?'#334155':'#e2e8f0'], borderColor:isDark()?'#1e293b':'#ffffff', borderWidth:3, hoverOffset:6 }]
                },
                options: { responsive:true, maintainAspectRatio:false, cutout:'72%', animation:{animateRotate:true,duration:900}, plugins:{legend:{display:false},tooltip:tip()} }
            });
        }
    });
    </script>
    @endpush

</x-app-layout>