<div class="space-y-6">
    <div class="flex items-center justify-between bg-slate-900 border border-slate-800 p-6 rounded-2xl mb-8">
        <div>
            <h2 class="text-lg font-bold text-white">Status Konektor Agent</h2>
            <p class="text-xs text-sky-100">Menampilkan status koneksi real-time mesin biometrik ke sistem cloud</p>
        </div>
        <div class="flex items-center gap-2 bg-black/20 px-4 py-2 rounded-full border border-white/10">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span class="text-xs font-bold text-white">Agent Online</span>
        </div>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-4 mb-8">
        <!-- Total Guru -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Guru</p>
            <h3 class="text-2xl font-extrabold text-white mt-1">{{ $totalGuru }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Guru Aktif</p>
        </div>

        <!-- Total Siswa -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Siswa</p>
            <h3 class="text-2xl font-extrabold text-white mt-1">{{ $totalSiswa }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Siswa Terdaftar</p>
        </div>

        <!-- Total Mesin -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Mesin</p>
            <h3 class="text-2xl font-extrabold text-sky-400 mt-1">{{ $totalMesin }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Unit Biometrik</p>
        </div>

        <!-- Mesin Online -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Mesin Online</p>
            <h3 class="text-2xl font-extrabold text-emerald-400 mt-1">{{ $mesinOnline }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Connector Agent Aktif</p>
        </div>

        <!-- Mesin Stale -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Mesin Stale</p>
            <h3 class="text-2xl font-extrabold text-amber-400 mt-1">{{ $mesinStale }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Heartbeat &gt; 2 Menit</p>
        </div>

        <!-- Mesin Offline -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Mesin Offline</p>
            <h3 class="text-2xl font-extrabold text-rose-400 mt-1">{{ $mesinOffline }}</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Heartbeat &gt; 10 Menit</p>
        </div>

        <!-- Sinkronisasi Hari Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Sync Hari Ini</p>
            <h3 class="text-2xl font-extrabold text-indigo-400 mt-1">{{ $syncHariIni }}x</h3>
            <p class="text-[10px] text-slate-500 mt-0.5">Eksekusi Penarikan</p>
        </div>
    </div>

    <!-- 2. Row Metrics: Real-Time Attendance Breakdown Hari Ini -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
        <!-- Kehadiran Hari Ini (Percent & Count) -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden border-l-4 border-l-emerald-500">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Kehadiran Hari Ini</p>
            <div class="flex items-baseline gap-2 mt-1">
                <h3 class="text-3xl font-extrabold text-emerald-400">{{ $kehadiranHariIniCount }}</h3>
                <span class="text-xs font-bold text-emerald-500">({{ $kehadiranHariIniPersen }}%)</span>
            </div>
            <p class="text-[10px] text-slate-500 mt-1">Hadir & Terlambat</p>
        </div>

        <!-- Guru Terlambat Hari Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden border-l-4 border-l-amber-500">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Guru Terlambat</p>
            <h3 class="text-3xl font-extrabold text-amber-400 mt-1">{{ $guruTerlambat }}</h3>
            <p class="text-[10px] text-slate-500 mt-1">Terlambat > 07:00</p>
        </div>

        <!-- Siswa Terlambat Hari Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden border-l-4 border-l-amber-500">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Siswa Terlambat</p>
            <h3 class="text-3xl font-extrabold text-amber-400 mt-1">{{ $siswaTerlambat }}</h3>
            <p class="text-[10px] text-slate-500 mt-1">Terlambat > 07:00</p>
        </div>

        <!-- Sakit & Izin Hari Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden border-l-4 border-l-sky-500">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Izin / Sakit</p>
            <h3 class="text-3xl font-extrabold text-sky-400 mt-1">{{ $totalIzin + $totalSakit }}</h3>
            <p class="text-[10px] text-slate-500 mt-1">Disetujui</p>
        </div>

        <!-- Alpha Hari Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 shadow-sm relative overflow-hidden border-l-4 border-l-rose-500">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Alpha</p>
            <h3 class="text-3xl font-extrabold text-rose-400 mt-1">{{ $totalAlpha }}</h3>
            <p class="text-[10px] text-slate-500 mt-1">Tanpa Keterangan</p>
        </div>
    </div>

    <!-- 3. Section Analytics Charts: Grafik Mingguan, Grafik Bulanan & Trend -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Grafik Mingguan (7 Hari) -->
        <div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
            <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
                <div>
                    <h3 class="text-sm font-bold text-white">Grafik Mingguan Kehadiran (7 Hari Terakhir)</h3>
                    <p class="text-[10px] text-slate-400">Visualisasi Trend Kehadiran Personil</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20">7-Day Line Chart</span>
            </div>

            <!-- SVG Custom Visual Chart -->
            <div class="space-y-3 pt-2">
                @foreach($grafikMingguan as $g)
                    <div>
                        <div class="flex items-center justify-between text-xs mb-1">
                            <span class="text-slate-300 font-mono text-[11px]">{{ $g['day'] }}</span>
                            <span class="text-slate-400 text-[10px]">Hadir: <strong class="text-emerald-400">{{ $g['hadir'] }}</strong> | Alpha: <strong class="text-rose-400">{{ $g['alpha'] }}</strong></span>
                        </div>
                        <div class="w-full h-3 bg-slate-950 rounded-full overflow-hidden flex">
                            <div style="width: {{ $g['hadir'] + $g['alpha'] > 0 ? ($g['hadir'] / max(1, $g['hadir'] + $g['alpha'])) * 100 : 0 }}%" class="bg-emerald-500 h-full transition-all"></div>
                            <div style="width: {{ $g['hadir'] + $g['alpha'] > 0 ? ($g['alpha'] / max(1, $g['hadir'] + $g['alpha'])) * 100 : 0 }}%" class="bg-rose-500 h-full transition-all"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Trend Kehadiran Minggu Ini vs Minggu Lalu -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
                    <h3 class="text-sm font-bold text-white">Trend Kehadiran</h3>
                    <span class="text-[10px] text-slate-400 font-mono">Vs. Minggu Lalu</span>
                </div>

                <div class="py-4 text-center">
                    <p class="text-xs text-slate-400 uppercase tracking-wider mb-1">Perbandingan Minggu Ini</p>
                    <h2 class="text-4xl font-extrabold {{ $trendPersen >= 0 ? 'text-emerald-400' : 'text-rose-400' }}">
                        {{ $trendPersen >= 0 ? '+' : '' }}{{ $trendPersen }}%
                    </h2>
                    <p class="text-xs text-slate-400 mt-2">
                        Minggu Ini: <strong class="text-white">{{ $thisWeekCount }}</strong> | Minggu Lalu: <strong class="text-slate-400">{{ $lastWeekCount }}</strong>
                    </p>
                </div>
            </div>

            <!-- Mini Summary Box -->
            <div class="p-3 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-400">
                <p class="font-semibold text-slate-200 mb-1">Catatan Tren:</p>
                <p class="text-[11px] leading-relaxed">
                    @if($trendPersen >= 0)
                        Tingkat kehadiran minggu ini mengalami <strong class="text-emerald-400">peningkatan positif</strong> dibanding minggu sebelumnya.
                    @else
                        Tingkat kehadiran minggu ini <strong class="text-rose-400">menurun {{ abs($trendPersen) }}%</strong> dibanding minggu lalu.
                    @endif
                </p>
            </div>
        </div>
    </div>

    <!-- 4. Heatmap Kehadiran 30 Hari Terakhir Grid -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm mb-8">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <div>
                <h3 class="text-sm font-bold text-white">Heatmap Kehadiran (30 Hari Terakhir)</h3>
                <p class="text-[10px] text-slate-400">Grid Intensitas Kehadiran Harian Sekolah</p>
            </div>
            <div class="flex items-center gap-1 text-[10px] text-slate-400">
                <span>Sepi</span>
                <span class="w-3 h-3 rounded bg-slate-950 border border-slate-800"></span>
                <span class="w-3 h-3 rounded bg-emerald-950 border border-emerald-800"></span>
                <span class="w-3 h-3 rounded bg-emerald-800"></span>
                <span class="w-3 h-3 rounded bg-emerald-600"></span>
                <span class="w-3 h-3 rounded bg-emerald-400"></span>
                <span>Ramai</span>
            </div>
        </div>

        <div class="grid grid-cols-6 sm:grid-cols-10 md:grid-cols-15 gap-2 pt-2">
            @foreach($heatmapKehadiran as $h)
                <div title="{{ $h['date'] }}: {{ $h['count'] }} Kehadiran" 
                    class="p-2 rounded-xl text-center border transition-all hover:scale-105 cursor-pointer
                    {{ $h['level'] == 0 ? 'bg-slate-950 border-slate-800 text-slate-600' : '' }}
                    {{ $h['level'] == 1 ? 'bg-emerald-950/60 border-emerald-800/40 text-emerald-400' : '' }}
                    {{ $h['level'] == 2 ? 'bg-emerald-900/60 border-emerald-700/50 text-emerald-300 font-semibold' : '' }}
                    {{ $h['level'] == 3 ? 'bg-emerald-700 border-emerald-600 text-white font-bold' : '' }}
                    {{ $h['level'] == 4 ? 'bg-emerald-500 border-emerald-400 text-slate-950 font-extrabold shadow-lg shadow-emerald-500/20' : '' }}">
                    <span class="text-[10px] font-mono block leading-none">{{ $h['day_num'] }}</span>
                    <span class="text-[9px] block mt-1 leading-none">{{ $h['count'] }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- 5. Top 5 Terlambat & Top 5 Alpha Bulan Ini -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Top 5 Terlambat Bulan Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
            <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Top 5 Sering Terlambat (Bulan Ini)
                </h3>
            </div>
            <div class="space-y-2">
                @forelse($topTerlambat as $item)
                    <div class="p-2.5 rounded-xl bg-slate-950 border border-slate-800 flex items-center justify-between">
                        <div>
                            <p class="text-xs font-bold text-white">{{ $item->user?->name ?? 'User #' . $item->user_id }}</p>
                            <p class="text-[10px] text-slate-400 font-mono">{{ $item->user?->nip_nis }} ({{ $item->user?->role?->label }})</p>
                        </div>
                        <span class="px-2.5 py-1 rounded-full text-xs font-extrabold bg-amber-500/10 text-amber-400 border border-amber-500/20">
                            {{ $item->total }}x Terlambat
                        </span>
                    </div>
                @empty
                    <p class="text-xs text-slate-500 text-center py-4">Belum ada rekord keterlambatan bulan ini.</p>
                @endforelse
            </div>
        </div>

        <!-- Top 5 Alpha Bulan Ini -->
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
            <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                    Top 5 Alpha (Bulan Ini)
                </h3>
            </div>
            <div class="space-y-2">
                @forelse($topAlpha as $item)
                    <div class="p-2.5 rounded-xl bg-slate-950 border border-slate-800 flex items-center justify-between">
                        <div>
                            <p class="text-xs font-bold text-white">{{ $item->user?->name ?? 'User #' . $item->user_id }}</p>
                            <p class="text-[10px] text-slate-400 font-mono">{{ $item->user?->nip_nis }} ({{ $item->user?->role?->label }})</p>
                        </div>
                        <span class="px-2.5 py-1 rounded-full text-xs font-extrabold bg-rose-500/10 text-rose-400 border border-rose-500/20">
                            {{ $item->total }}x Alpha
                        </span>
                    </div>
                @empty
                    <p class="text-xs text-slate-500 text-center py-4">Tidak ada rekord Alpha bulan ini.</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- 6. Aktivitas Sinkronisasi Terkini (PRD Section 3 Requirement) -->
    <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm mb-8">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-slate-800">
            <div>
                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                    <svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
                    Aktivitas Sinkronisasi Terkini
                </h3>
                <p class="text-[10px] text-slate-400">Riwayat Penarikan Log Biometrik Mesin Fingerprint (Real-time)</p>
            </div>
            <a href="{{ route('system-monitoring.index') }}" class="text-xs text-sky-400 hover:underline font-semibold">Live Monitor &rarr;</a>
        </div>
        <div class="space-y-2">
            @forelse($latestSyncLogs as $aLog)
                <div class="p-3 rounded-xl bg-slate-950 border border-slate-800 flex items-center justify-between">
                    <div>
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            <p class="text-xs font-bold text-white">{{ $aLog->machine?->name ?? 'Mesin' }}</p>
                            <span class="text-[10px] text-slate-400 font-mono">({{ $aLog->created_at->diffForHumans() }})</span>
                        </div>
                        <p class="text-[11px] text-slate-400 mt-1">Data masuk PIN: {{ $aLog->raw_user_id }} pada {{ $aLog->timestamp?->format('H:i:s') ?? '-' }}</p>
                    </div>
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider {{ $aLog->is_processed ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-amber-500/10 text-amber-400 border border-amber-500/20' }}">
                        {{ $aLog->is_processed ? 'Processed' : 'Raw' }}
                    </span>
                </div>
            @empty
                <p class="text-xs text-slate-500 text-center py-4">Belum ada aktivitas sinkronisasi hari ini.</p>
            @endforelse
        </div>
    </div>

    <!-- 7. Machine Status Grid -->
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-white">Status Monitor {{ $totalMesin }} Mesin Fingerprint</h2>
            <span class="text-xs text-slate-400 font-mono">Status Heartbeat Connector Agent</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($machines as $machine)
                @php $cStatus = $machine->calculatedStatus(); @endphp
                <div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 flex items-center justify-between shadow-sm">
                    <div>
                        <div class="flex items-center gap-2">
                            <span class="w-2.5 h-2.5 rounded-full {{ $cStatus === 'online' ? 'bg-emerald-500 animate-pulse' : ($cStatus === 'stale' ? 'bg-amber-500 animate-pulse' : ($cStatus === 'never_connected' ? 'bg-slate-500' : 'bg-rose-500')) }}"></span>
                            <h4 class="text-sm font-bold text-white">{{ $machine->name }}</h4>
                        </div>
                        <p class="text-xs font-mono text-slate-400 mt-1"
                           title="SN: {{ $machine->cloud_id ?? 'N/A' }}">
                            SN: {{ $machine->cloud_id ?? 'N/A' }}
                        </p>
                        <p class="text-[10px] text-slate-500 mt-1">
                            Heartbeat: <strong class="text-slate-300">{{ $machine->last_seen_at ? $machine->last_seen_at->diffForHumans() : 'Belum pernah terhubung' }}</strong>
                        </p>
                    </div>
                    <div>
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider
                            {{ $cStatus === 'online' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' :
                               ($cStatus === 'stale' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' :
                               ($cStatus === 'never_connected' ? 'bg-slate-700/60 text-slate-400 border border-slate-600/40' :
                               'bg-rose-500/10 text-rose-400 border border-rose-500/20')) }}">
                            {{ match($cStatus) {
                                'online' => 'ONLINE',
                                'stale' => 'STALE',
                                'never_connected' => 'BELUM TERHUBUNG',
                                default => 'OFFLINE'
                            } }}
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
