@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6 sm:space-y-8 animate-fade-in">

    <!-- 1. EXECUTIVE HERO BANNER -->
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 text-white p-6 sm:p-8 border border-slate-700/60 shadow-xl shadow-slate-950/20">
        <!-- Dekorasi Cahaya Latar Belakang -->
        <div class="absolute -top-24 -right-24 w-80 h-80 bg-primary-500/20 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute -bottom-24 -left-24 w-80 h-80 bg-blue-500/15 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute top-1/2 right-1/4 w-40 h-40 bg-amber-400/10 rounded-full blur-2xl pointer-events-none"></div>

        <div class="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-6">
            <!-- Informasi Sapaan & Waktu Real-Time -->
            <div class="space-y-3 max-w-2xl">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/15 text-xs font-semibold text-slate-200">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span id="heroLiveClock" class="font-mono text-emerald-300">--:--:-- WIB</span>
                    <span class="text-white/30">•</span>
                    <span>{{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}</span>
                </div>

                <div>
                    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-tight text-white">
                        <span id="heroGreeting">Selamat Datang</span>, {{ auth()->user()->name ?? 'Administrator' }}!
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-300/80 mt-1.5 leading-relaxed font-normal">
                        Pantau operasional presensi berbasis Geofencing GPS, kehadiran staf, verifikasi selfie, dan pengajuan izin secara terpusat hari ini.
                    </p>
                </div>

                <!-- Status Pill Bar -->
                <div class="flex flex-wrap items-center gap-3 pt-1 text-[11px] text-slate-300">
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/80">
                        <i data-lucide="map-pin" class="w-3.5 h-3.5 text-primary-400"></i>
                        <span>{{ $totalLokasiKantor }} Titik Lokasi Kantor</span>
                    </span>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/80">
                        <i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-400"></i>
                        <span>Device Binding GPS Aktif</span>
                    </span>
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-800/80 border border-slate-700/80">
                        <i data-lucide="users" class="w-3.5 h-3.5 text-sky-400"></i>
                        <span>{{ $totalPegawai }} Staf Terdaftar</span>
                    </span>
                </div>
            </div>

            <!-- Ringkasan Rasio Kehadiran (Radial Progress Card) -->
            <div class="flex items-center gap-4 p-4 sm:p-5 rounded-2xl bg-white/10 backdrop-blur-xl border border-white/15 shrink-0 shadow-lg">
                <div class="relative w-20 h-20 sm:w-24 sm:h-24 flex items-center justify-center shrink-0">
                    <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
                        <!-- Lingkaran Dasar -->
                        <path class="text-slate-700/80" stroke-width="3.5" stroke="currentColor" fill="none"
                              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <!-- Lingkaran Progress -->
                        <path class="text-primary-500 transition-all duration-1000 ease-out" stroke-dasharray="{{ $persentaseKehadiran }}, 100" stroke-width="3.5" stroke-linecap="round" stroke="currentColor" fill="none"
                              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                    </svg>
                    <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
                        <span class="text-lg sm:text-xl font-extrabold text-white">{{ $persentaseKehadiran }}%</span>
                        <span class="text-[9px] uppercase tracking-wider font-semibold text-slate-300">Hadir</span>
                    </div>
                </div>

                <div class="space-y-1">
                    <p class="text-xs font-bold text-white">Status Kehadiran Hari Ini</p>
                    <p class="text-[11px] text-slate-300">
                        <span class="font-bold text-emerald-400">{{ $totalHadir }}</span> dari {{ $totalPegawai }} Pegawai
                    </p>
                    <div class="flex items-center gap-2 pt-1 text-[10px]">
                        <span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold">
                            {{ $totalTepatWaktu }} Tepat
                        </span>
                        <span class="px-2 py-0.5 rounded bg-amber-500/20 text-amber-300 border border-amber-500/30 font-semibold">
                            {{ $totalTerlambat }} Telat
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 2. KARTU METRIK STATISTIK UTAMA (6 KARTU VARIATIF) -->
    <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-3 sm:gap-4">
        <!-- Kartu 1: Total Pegawai Aktif -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Pegawai</span>
                <div class="w-8 h-8 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="users" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <h3 class="text-2xl font-black text-slate-900 tracking-tight">{{ $totalPegawai }}</h3>
                <span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 mt-1">
                    <i data-lucide="check-circle-2" class="w-3 h-3"></i> 100% Aktif Bekerja
                </span>
            </div>
        </div>

        <!-- Kartu 2: Hadir Hari Ini -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Hadir Hari Ini</span>
                <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="user-check" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <h3 class="text-2xl font-black text-slate-900 tracking-tight">{{ $totalHadir }}</h3>
                <span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 mt-1">
                    <i data-lucide="trending-up" class="w-3 h-3"></i> {{ $totalTepatWaktu }} Tepat Waktu
                </span>
            </div>
        </div>

        <!-- Kartu 3: Terlambat & Denda -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Terlambat</span>
                <div class="w-8 h-8 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="clock-alert" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <div class="flex items-baseline gap-1.5">
                    <h3 class="text-2xl font-black text-amber-600 tracking-tight">{{ $totalTerlambat }}</h3>
                    <span class="text-[10px] font-black text-rose-600">Rp {{ number_format($totalDendaHariIni, 0, ',', '.') }}</span>
                </div>
                <span class="text-[10px] text-slate-400 block mt-1">Akumulasi Denda Hari Ini</span>
            </div>
        </div>

        <!-- Kartu 4: Izin & Dinas Hari Ini -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Izin & Dinas</span>
                <div class="w-8 h-8 rounded-xl bg-sky-50 text-sky-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="plane-takeoff" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <h3 class="text-2xl font-black text-slate-900 tracking-tight">{{ $totalIzinHariIni + $totalDinasHariIni }}</h3>
                <span class="text-[10px] font-medium text-slate-500 mt-1 block">
                    {{ $totalIzinHariIni }} Izin/Cuti • {{ $totalDinasHariIni }} Dinas Luar
                </span>
            </div>
        </div>

        <!-- Kartu 5: Menunggu Persetujuan (Approval) -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Butuh Approval</span>
                <div class="w-8 h-8 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="bell" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <h3 class="text-2xl font-black text-primary-600 tracking-tight">{{ $totalPendingApproval }}</h3>
                <span class="text-[10px] font-medium text-slate-500 mt-1 block truncate">
                    {{ $totalIzinPending }} Izin, {{ $totalLemburPending }} Lembur
                </span>
            </div>
        </div>

        <!-- Kartu 6: Kendala Absensi (Helpdesk) -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all group flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Tiket Kendala</span>
                <div class="w-8 h-8 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform">
                    <i data-lucide="help-circle" class="w-4 h-4"></i>
                </div>
            </div>
            <div class="mt-2">
                <h3 class="text-2xl font-black {{ $totalMasalahPending > 0 ? 'text-purple-600' : 'text-slate-900' }} tracking-tight">
                    {{ $totalMasalahPending }}
                </h3>
                <span class="text-[10px] font-medium text-slate-500 mt-1 block">
                    {{ $totalMasalahPending > 0 ? 'Menunggu Penanganan' : 'Tidak Ada Masalah' }}
                </span>
            </div>
        </div>
    </div>

    <!-- 3. GRAFIK ANALITIK INTERAKTIF (2 KOLOM: TREN 7 HARI + DONUT KOMPOSISI) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- GRAFIK 1: TREN KEHADIRAN 7 HARI (2/3 KOLOM) -->
        <div class="lg:col-span-2 p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                    <div class="flex items-center gap-2">
                        <div class="w-2.5 h-2.5 rounded-full bg-primary-500"></div>
                        <h2 class="text-base font-bold text-slate-900 tracking-tight">Tren Disiplin & Presensi 7 Hari Terakhir</h2>
                    </div>
                    <p class="text-xs text-slate-400 mt-0.5">Grafik dinamika kehadiran pegawai, ketepatan waktu, dan fluktuasi keterlambatan</p>
                </div>
                <div class="flex items-center gap-3 text-xs font-semibold">
                    <span class="inline-flex items-center gap-1.5 text-emerald-600">
                        <span class="w-3 h-3 rounded-full bg-emerald-500"></span>
                        <span>Tepat Waktu</span>
                    </span>
                    <span class="inline-flex items-center gap-1.5 text-rose-500">
                        <span class="w-3 h-3 rounded-full bg-rose-500"></span>
                        <span>Terlambat</span>
                    </span>
                </div>
            </div>

            <!-- Kontainer Canvas Chart.js -->
            <div class="relative h-64 sm:h-72 w-full">
                <canvas id="attendanceTrendChart"></canvas>
            </div>

            <!-- Catatan Metrik Tren -->
            <div class="pt-3 border-t border-slate-100 grid grid-cols-3 gap-2 text-center text-xs">
                <div class="p-2 rounded-xl bg-slate-50">
                    <span class="text-[10px] font-bold text-slate-400 uppercase block">Rata-rata Hadir</span>
                    <span class="text-sm font-extrabold text-slate-800">{{ round(array_sum($trendHadir) / max(1, count(array_filter($trendHadir)))) }} Pegawai/Hari</span>
                </div>
                <div class="p-2 rounded-xl bg-slate-50">
                    <span class="text-[10px] font-bold text-slate-400 uppercase block">Total Kehadiran Minggu Ini</span>
                    <span class="text-sm font-extrabold text-emerald-600">{{ array_sum($trendHadir) }} Presensi</span>
                </div>
                <div class="p-2 rounded-xl bg-slate-50">
                    <span class="text-[10px] font-bold text-slate-400 uppercase block">Total Terlambat</span>
                    <span class="text-sm font-extrabold text-rose-600">{{ array_sum($trendTerlambat) }} Kasus</span>
                </div>
            </div>
        </div>

        <!-- GRAFIK 2: DOUGHNUT STATUS KEHADIRAN HARI INI (1/3 KOLOM) -->
        <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm flex flex-col justify-between space-y-4">
            <div>
                <div class="flex items-center gap-2">
                    <div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
                    <h2 class="text-base font-bold text-slate-900 tracking-tight">Komposisi Presensi</h2>
                </div>
                <p class="text-xs text-slate-400 mt-0.5">Proporsi status pegawai aktif hari ini</p>
            </div>

            <!-- Canvas Doughnut -->
            <div class="relative h-48 sm:h-52 w-full flex items-center justify-center my-auto">
                <canvas id="todayDonutChart"></canvas>
                <!-- Indikator Tengah Doughnut -->
                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none text-center">
                    <span class="text-2xl font-black text-slate-900 leading-none">{{ $totalHadir }}</span>
                    <span class="text-[10px] font-bold text-slate-400 uppercase mt-0.5">Hadir Aktif</span>
                </div>
            </div>

            <!-- Custom Legend List -->
            <div class="space-y-1.5 pt-2 border-t border-slate-100 text-xs">
                <div class="flex items-center justify-between text-slate-600">
                    <span class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                        <span>Tepat Waktu</span>
                    </span>
                    <span class="font-bold font-mono text-slate-800">{{ $totalTepatWaktu }}</span>
                </div>
                <div class="flex items-center justify-between text-slate-600">
                    <span class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
                        <span>Terlambat</span>
                    </span>
                    <span class="font-bold font-mono text-slate-800">{{ $totalTerlambat }}</span>
                </div>
                <div class="flex items-center justify-between text-slate-600">
                    <span class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-sky-500"></span>
                        <span>Izin & Cuti</span>
                    </span>
                    <span class="font-bold font-mono text-slate-800">{{ $totalIzinHariIni }}</span>
                </div>
                <div class="flex items-center justify-between text-slate-600">
                    <span class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-indigo-500"></span>
                        <span>Dinas Luar</span>
                    </span>
                    <span class="font-bold font-mono text-slate-800">{{ $totalDinasHariIni }}</span>
                </div>
                <div class="flex items-center justify-between text-slate-600">
                    <span class="flex items-center gap-1.5">
                        <span class="w-2.5 h-2.5 rounded-full bg-slate-300"></span>
                        <span>Belum Absen</span>
                    </span>
                    <span class="font-bold font-mono text-slate-800">{{ $totalBelumHadir }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 4. LIVE FEED MONITORING PRESENSI & TINGKAT KEHADIRAN DEPARTEMEN -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- KIRI: LIVE FEED MONITORING ABSENSI HARI INI (2 KOLOM) -->
        <div class="lg:col-span-2 p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2.5">
                    <div class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div>
                    <div>
                        <h2 class="text-base font-bold text-slate-900 tracking-tight">Presensi Masuk Terkini (Live Feed)</h2>
                        <p class="text-xs text-slate-400">Verifikasi selfie dan geofencing GPS pegawai hari ini</p>
                    </div>
                </div>
                <a href="{{ route('admin.laporan.monitoring') }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold transition-colors">
                    <span>Semua Log</span>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>

            @if($recentAbsensi->isEmpty())
            <div class="text-center py-12 border-2 border-dashed border-slate-100 rounded-2xl">
                <div class="w-12 h-12 rounded-2xl bg-slate-100 text-slate-400 mx-auto flex items-center justify-center mb-3">
                    <i data-lucide="calendar-x-2" class="w-6 h-6"></i>
                </div>
                <p class="text-xs font-bold text-slate-600">Belum Ada Presensi Masuk</p>
                <p class="text-[11px] text-slate-400 mt-0.5">Aktivitas absensi karyawan hari ini akan muncul secara otomatis di sini</p>
            </div>
            @else
            <div class="divide-y divide-slate-100">
                @foreach($recentAbsensi as $absen)
                <div class="py-3.5 flex items-center justify-between gap-4 hover:bg-slate-50/60 px-2 rounded-xl transition-colors">
                    <div class="flex items-center gap-3.5 min-w-0">
                        <!-- Foto Selfie atau Avatar Inisial -->
                        <div class="relative shrink-0">
                            @if($absen->foto_masuk)
                                <img src="{{ asset('storage/' . $absen->foto_masuk) }}" alt="{{ $absen->pegawai->nama_lengkap ?? 'Foto' }}" class="w-11 h-11 rounded-2xl object-cover border border-slate-200 shadow-xs">
                            @elseif($absen->pegawai && $absen->pegawai->foto_pegawai)
                                <img src="{{ asset('storage/' . $absen->pegawai->foto_pegawai) }}" alt="{{ $absen->pegawai->nama_lengkap }}" class="w-11 h-11 rounded-2xl object-cover border border-slate-200 shadow-xs">
                            @else
                                <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-primary-500 to-amber-600 text-white font-bold flex items-center justify-center text-sm shadow-xs">
                                    {{ $absen->pegawai->inisial ?? 'P' }}
                                </div>
                            @endif

                            <span class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center text-[9px] text-white {{ $absen->status_masuk == 'tepat_waktu' ? 'bg-emerald-500' : 'bg-amber-500' }} shadow-xs">
                                <i data-lucide="{{ $absen->status_masuk == 'tepat_waktu' ? 'check' : 'clock' }}" class="w-2.5 h-2.5"></i>
                            </span>
                        </div>

                        <!-- Data Pegawai -->
                        <div class="min-w-0 truncate">
                            <p class="text-sm font-bold text-slate-900 truncate">{{ $absen->pegawai->nama_lengkap ?? 'Pegawai' }}</p>
                            <div class="flex items-center gap-1.5 text-xs text-slate-500 mt-0.5 truncate">
                                <span class="truncate">{{ $absen->pegawai->jabatan->nama_jabatan ?? '-' }}</span>
                                <span class="text-slate-300">•</span>
                                <span class="inline-flex items-center gap-1 text-[11px] text-slate-400">
                                    <i data-lucide="map-pin" class="w-3 h-3 text-primary-500"></i>
                                    <span>{{ $absen->lokasiAbsensi->nama_lokasi ?? 'Kantor' }} ({{ $absen->jarak_masuk_meter ?? 0 }}m)</span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Waktu & Badge Status -->
                    <div class="flex items-center gap-3 shrink-0">
                        <div class="text-right">
                            <p class="text-sm font-bold font-mono text-slate-900">{{ $absen->jam_masuk ?? '--:--' }}</p>
                            @if($absen->status_masuk == 'terlambat')
                                <span class="text-[10px] font-bold text-rose-600 block">Telat {{ $absen->menit_terlambat }} mnt</span>
                            @else
                                <span class="text-[10px] font-semibold text-emerald-600 block">Tepat Waktu</span>
                            @endif
                        </div>
                        <span class="px-2.5 py-1 rounded-xl text-xs font-bold {{ $absen->status_masuk == 'tepat_waktu' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-amber-50 text-amber-700 border border-amber-200' }}">
                            {{ $absen->status_masuk == 'tepat_waktu' ? 'On Time' : 'Terlambat' }}
                        </span>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <!-- KANAN: KEHADIRAN DEPARTEMEN & WIDGET INTERAKTIF (1 KOLOM) -->
        <div class="space-y-6">
            <!-- WIDGET 1: DISTRIBUSI KEHADIRAN PER DEPARTEMEN -->
            <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-base font-bold text-slate-900 tracking-tight">Presensi per Departemen</h2>
                        <p class="text-xs text-slate-400">Tingkat kehadiran pegawai hari ini</p>
                    </div>
                    <span class="text-xs font-bold text-primary-600">{{ count($deptStats) }} Divisi</span>
                </div>

                <div class="space-y-3 pt-1">
                    @forelse($deptStats as $dept)
                    <div class="space-y-1">
                        <div class="flex items-center justify-between text-xs">
                            <span class="font-bold text-slate-800 truncate">{{ $dept['nama'] }}</span>
                            <span class="font-mono text-slate-500 font-semibold text-[11px]">
                                {{ $dept['hadir'] }}/{{ $dept['total'] }} ({{ $dept['persentase'] }}%)
                            </span>
                        </div>
                        <div class="w-full h-2 rounded-full bg-slate-100 overflow-hidden">
                            <div class="h-full rounded-full transition-all duration-700 {{ $dept['persentase'] >= 75 ? 'bg-emerald-500' : ($dept['persentase'] >= 40 ? 'bg-amber-500' : 'bg-primary-500') }}"
                                 style="width: {{ $dept['persentase'] }}%;"></div>
                        </div>
                    </div>
                    @empty
                    <p class="text-xs text-slate-400 text-center py-4">Belum ada data departemen</p>
                    @endforelse
                </div>
            </div>

            <!-- WIDGET 2: TIKET KENDALA ABSENSI TERBARU (HELPDESK) -->
            <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i data-lucide="help-circle" class="w-4 h-4 text-purple-600"></i>
                        <h2 class="text-base font-bold text-slate-900 tracking-tight">Tiket Kendala</h2>
                    </div>
                    <a href="{{ route('admin.pengajuan-masalah.index') }}" class="text-xs font-bold text-primary-600 hover:underline">
                        Lihat Semua
                    </a>
                </div>

                @if($recentMasalah->isEmpty())
                <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-100 text-center">
                    <p class="text-xs font-medium text-slate-500">Tidak ada tiket kendala yang menunggu tindakan</p>
                </div>
                @else
                <div class="space-y-2.5">
                    @foreach($recentMasalah as $m)
                    <div class="p-3 rounded-2xl bg-purple-50/50 border border-purple-100/80 flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <p class="text-xs font-bold text-slate-900 truncate">{{ $m->pegawai->nama_lengkap ?? 'Staf' }}</p>
                            <p class="text-[11px] text-purple-700 truncate font-medium">{{ $m->kategori ?? 'Kendala Presensi' }}</p>
                        </div>
                        <a href="{{ route('admin.pengajuan-masalah.show', $m->id) }}" class="px-2.5 py-1 rounded-xl bg-purple-600 hover:bg-purple-700 text-white text-[11px] font-bold shrink-0 transition-colors">
                            Proses
                        </a>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- 5. WIDGET BAWAH: AGENDA HARI LIBUR, KENAIKAN PANGKAT & AKSES INFRASTRUKTUR -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Kenaikan Pangkat yang Sedang Berjalan -->
        <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-3.5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i data-lucide="trending-up" class="w-4 h-4 text-primary-600"></i>
                    <h3 class="text-sm font-bold text-slate-900">Usulan Promosi Jabatan</h3>
                </div>
                <a href="{{ route('admin.kenaikan-pangkat.index') }}" class="text-xs font-semibold text-primary-600 hover:underline">Kelola</a>
            </div>

            @if($promosiAktif->isEmpty())
            <p class="text-xs text-slate-400 py-6 text-center border border-dashed border-slate-100 rounded-2xl">
                Belum ada usulan pangkat aktif
            </p>
            @else
            <div class="space-y-2.5">
                @foreach($promosiAktif as $item)
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex flex-col gap-1">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-slate-900">{{ $item->pegawai->nama_lengkap ?? '-' }}</span>
                        <span class="text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider {{ $item->status == 'disetujui' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                            {{ $item->status }}
                        </span>
                    </div>
                    <div class="flex items-center gap-2 text-xs text-slate-500">
                        <span class="truncate">{{ $item->jabatanLama->nama_jabatan ?? '-' }}</span>
                        <i data-lucide="arrow-right" class="w-3 h-3 text-primary-600 shrink-0"></i>
                        <span class="font-bold text-primary-700 truncate">{{ $item->jabatanBaru->nama_jabatan ?? '-' }}</span>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <!-- Hari Libur Nasional & Cuti Bersama Terdekat -->
        <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-3.5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i data-lucide="coffee" class="w-4 h-4 text-amber-500"></i>
                    <h3 class="text-sm font-bold text-slate-900">Hari Libur Mendatang</h3>
                </div>
                <a href="{{ route('admin.pengaturan-absensi.hari-libur') }}" class="text-xs font-semibold text-primary-600 hover:underline">Semua</a>
            </div>

            @if($liburMendatang->isEmpty())
            <p class="text-xs text-slate-400 py-6 text-center border border-dashed border-slate-100 rounded-2xl">
                Belum ada jadwal libur mendatang
            </p>
            @else
            <div class="space-y-2.5">
                @foreach($liburMendatang as $libur)
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-800 flex flex-col items-center justify-center shrink-0">
                        <span class="text-[9px] font-bold uppercase leading-none">{{ \Carbon\Carbon::parse($libur->tanggal_libur)->format('M') }}</span>
                        <span class="text-sm font-black leading-none mt-0.5">{{ \Carbon\Carbon::parse($libur->tanggal_libur)->format('d') }}</span>
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs font-bold text-slate-900 truncate">{{ $libur->nama_libur }}</p>
                        <span class="text-[10px] text-slate-400 block">{{ $libur->cuti_bersama ? 'Cuti Bersama' : 'Libur Nasional' }}</span>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <!-- Infrastruktur & Pengawasan Keamanan -->
        <div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-3.5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i data-lucide="shield-check" class="w-4 h-4 text-emerald-600"></i>
                    <h3 class="text-sm font-bold text-slate-900">Keamanan & Perangkat</h3>
                </div>
                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
            </div>

            <div class="space-y-2.5">
                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                    <div class="flex items-center gap-2.5">
                        <i data-lucide="map-pinned" class="w-4 h-4 text-primary-600"></i>
                        <div>
                            <p class="text-xs font-bold text-slate-900">Titik Geofencing</p>
                            <p class="text-[10px] text-slate-400">Radius Kantor Valid</p>
                        </div>
                    </div>
                    <span class="text-xs font-black font-mono text-slate-800">{{ $totalLokasiKantor }} Lokasi</span>
                </div>

                <div class="p-3 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-between">
                    <div class="flex items-center gap-2.5">
                        <i data-lucide="smartphone" class="w-4 h-4 text-sky-600"></i>
                        <div>
                            <p class="text-xs font-bold text-slate-900">Device Binding</p>
                            <p class="text-[10px] text-slate-400">Kunci IMEI Aktif</p>
                        </div>
                    </div>
                    <span class="text-xs font-black font-mono text-slate-800">{{ $totalPerangkatTerikat }} Device</span>
                </div>

                <a href="{{ route('admin.pengaturan-absensi.sesi-login') }}" class="w-full mt-1 py-2 px-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-bold flex items-center justify-center gap-1.5 transition-colors">
                    <i data-lucide="key-round" class="w-3.5 h-3.5"></i>
                    <span>Kelola Sesi Perangkat</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 6. PINTASAN AKSI CEPAT ADMIN (QUICK SHORTCUTS GRID) -->
    <div class="space-y-3">
        <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aksi Operasional Cepat</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            <a href="{{ route('admin.pegawai.create') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="user-plus" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Tambah Pegawai</span>
            </a>

            <a href="{{ route('admin.pengaturan-absensi.penjadwalan-kerja') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="calendar-range" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Roster Shift</span>
            </a>

            <a href="{{ route('admin.pengaturan-absensi.lokasi') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="map-pin" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Radius Kantor</span>
            </a>

            <a href="{{ route('admin.penggajian.master.index') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-primary-50 text-primary-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="receipt" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Master Payroll</span>
            </a>

            <a href="{{ route('admin.laporan.rekap') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="file-spreadsheet" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Rekap Laporan</span>
            </a>

            <a href="{{ route('admin.roles.index') }}" class="p-4 rounded-2xl bg-white border border-slate-200/80 hover:border-primary-400 hover:shadow-md transition-all group flex flex-col items-center text-center">
                <div class="w-10 h-10 rounded-2xl bg-purple-50 text-purple-600 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                    <i data-lucide="shield" class="w-5 h-5"></i>
                </div>
                <span class="text-xs font-bold text-slate-800">Wewenang Role</span>
            </a>
        </div>
    </div>
</div>

<!-- SCRIPT CHART.JS & SINKRONISASI JAM LIVE -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    // 1. Live Clock & Sapaan Waktu Hero
    function updateHeroClock() {
        const now = new Date();
        const hours = now.getHours();
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        const clockEl = document.getElementById('heroLiveClock');
        if (clockEl) {
            clockEl.innerText = `${String(hours).padStart(2, '0')}:${minutes}:${seconds} WIB`;
        }

        const greetingEl = document.getElementById('heroGreeting');
        if (greetingEl) {
            let greeting = 'Selamat Malam';
            if (hours >= 5 && hours < 11) greeting = 'Selamat Pagi';
            else if (hours >= 11 && hours < 16) greeting = 'Selamat Siang';
            else if (hours >= 16 && hours < 19) greeting = 'Selamat Sore';
            greetingEl.innerText = greeting;
        }
    }
    updateHeroClock();
    setInterval(updateHeroClock, 1000);

    // 2. Inisialisasi Grafik Chart.js
    document.addEventListener('DOMContentLoaded', function () {
        // DATA DARI BACKEND
        const trendLabels = @json($trendLabels);
        const trendHadir = @json($trendHadir);
        const trendTepatWaktu = @json($trendTepatWaktu);
        const trendTerlambat = @json($trendTerlambat);
        const donutLabels = @json($donutLabels);
        const donutData = @json($donutData);

        // GRAFIK 1: TREN KEHADIRAN 7 HARI (Line / Area Chart)
        const ctxTrend = document.getElementById('attendanceTrendChart');
        if (ctxTrend) {
            const gradientHadir = ctxTrend.getContext('2d').createLinearGradient(0, 0, 0, 280);
            gradientHadir.addColorStop(0, 'rgba(16, 185, 129, 0.28)');
            gradientHadir.addColorStop(1, 'rgba(16, 185, 129, 0.0)');

            const gradientTelat = ctxTrend.getContext('2d').createLinearGradient(0, 0, 0, 280);
            gradientTelat.addColorStop(0, 'rgba(244, 63, 94, 0.25)');
            gradientTelat.addColorStop(1, 'rgba(244, 63, 94, 0.0)');

            new Chart(ctxTrend, {
                type: 'line',
                data: {
                    labels: trendLabels,
                    datasets: [
                        {
                            label: 'Tepat Waktu',
                            data: trendTepatWaktu,
                            borderColor: '#10b981',
                            backgroundColor: gradientHadir,
                            borderWidth: 2.5,
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#10b981',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 4,
                            pointHoverRadius: 6,
                        },
                        {
                            label: 'Terlambat',
                            data: trendTerlambat,
                            borderColor: '#f43f5e',
                            backgroundColor: gradientTelat,
                            borderWidth: 2,
                            borderDash: [4, 4],
                            tension: 0.4,
                            fill: true,
                            pointBackgroundColor: '#f43f5e',
                            pointBorderColor: '#ffffff',
                            pointBorderWidth: 2,
                            pointRadius: 3.5,
                            pointHoverRadius: 6,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#0f172a',
                            titleFont: { size: 12, weight: 'bold' },
                            bodyFont: { size: 12 },
                            padding: 10,
                            cornerRadius: 12,
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 11, weight: '600' }, color: '#64748b' }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { color: '#f1f5f9' },
                            ticks: {
                                stepSize: 1,
                                font: { size: 11 },
                                color: '#64748b'
                            }
                        }
                    }
                }
            });
        }

        // GRAFIK 2: DOUGHNUT STATUS KEHADIRAN
        const ctxDonut = document.getElementById('todayDonutChart');
        if (ctxDonut) {
            new Chart(ctxDonut, {
                type: 'doughnut',
                data: {
                    labels: donutLabels,
                    datasets: [{
                        data: donutData,
                        backgroundColor: [
                            '#10b981', // Tepat Waktu (Emerald)
                            '#f59e0b', // Terlambat (Amber)
                            '#0ea5e9', // Izin/Cuti (Sky)
                            '#6366f1', // Dinas Luar (Indigo)
                            '#cbd5e1'  // Belum Absen (Slate)
                        ],
                        borderWidth: 3,
                        borderColor: '#ffffff',
                        hoverOffset: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '72%',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#0f172a',
                            padding: 10,
                            cornerRadius: 12,
                            callbacks: {
                                label: function (context) {
                                    return ` ${context.label}: ${context.raw} Pegawai`;
                                }
                            }
                        }
                    }
                }
            });
        }
    });
</script>
@endsection