{{-- Pastikan Bootstrap Icons sudah di-include di layout:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
--}}

@php
    $cards = [
        [
            'label' => 'Total Pengguna',
            'value' => $totalUsers,
            'icon'  => 'bi-people-fill',
            'color' => 'from-orange-500 to-rose-500',
            'href'  => route('admin.pengguna.list'),
        ],
        [
            'label' => 'Admin',
            'value' => $counts['admin'],
            'icon'  => 'bi-shield-lock-fill',
            'color' => 'from-indigo-500 to-violet-500',
            'href'  => route('admin.pengguna.list', ['role' => 'admin']),
        ],
        [
            'label' => 'Guru BK',
            'value' => $counts['guru_bk'],
            'icon'  => 'bi-chat-dots-fill',
            'color' => 'from-emerald-500 to-teal-500',
            'href'  => route('admin.pengguna.list', ['role' => 'guru_bk']),
        ],
        [
            'label' => 'Guru Piket',
            'value' => $counts['guru_piket'],
            'icon'  => 'bi-calendar2-week',
            'color' => 'from-sky-500 to-cyan-500',
            'href'  => route('admin.pengguna.list', ['role' => 'guru_piket']),
        ],
        [
            'label' => 'Kesiswaan',
            'value' => $counts['kesiswaan'],
            'icon'  => 'bi-diagram-3-fill',
            'color' => 'from-fuchsia-500 to-pink-500',
            'href'  => route('admin.pengguna.list', ['role' => 'kesiswaan']),
        ],
        [
            'label' => 'Kepala Sekolah',
            'value' => $counts['kepala_sekolah'],
            'icon'  => 'bi-mortarboard-fill',
            'color' => 'from-amber-500 to-yellow-500',
            'href'  => route('admin.pengguna.list', ['role' => 'kepala_sekolah']),
        ],
        [
            'label' => 'Siswa',
            'value' => $counts['siswa'],
            'icon'  => 'bi-person-badge-fill',
            'color' => 'from-lime-500 to-green-500',
            'href'  => route('admin.pengguna.list', ['role' => 'siswa']),
        ],
    ];
@endphp

<div class="space-y-6">
    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold">Dashboard Admin</h1>
            <p class="text-xs text-slate-500">Ringkasan data pengguna & aktivitas terbaru</p>
        </div>
        @if (\Illuminate\Support\Facades\Route::has('admin.pengguna.create'))
            <a href="{{ route('admin.pengguna.create') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-orange-600 text-white px-3 py-2 text-sm hover:bg-orange-700 transition">
                <i class="bi bi-plus-circle"></i> Tambah Pengguna
            </a>
        @endif
    </div>

    {{-- ➕ Periode Terakhir / Aktif --}}
    <div class="relative overflow-hidden rounded-2xl ring-1 ring-slate-200 bg-white">
        <div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-gradient-to-br from-indigo-500 to-violet-500 opacity-10"></div>
        <div class="p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="flex items-start gap-3">
                <div class="h-11 w-11 rounded-xl grid place-items-center text-white bg-gradient-to-br from-indigo-500 to-violet-500">
                    <i class="bi bi-calendar3-event"></i>
                </div>
                <div>
                    <p class="text-xs uppercase tracking-wide text-slate-500">Periode Terakhir</p>
                    @if($latestPeriode)
                        <p class="mt-0.5 text-lg font-semibold text-slate-900">{{ $latestPeriode->nama }}</p>
                        <p class="text-xs text-slate-500">Dibuat: {{ $latestPeriode->created_at?->format('d M Y H:i') }}</p>
                    @else
                        <p class="mt-0.5 text-sm text-slate-600">Belum ada periode. Tambahkan periode pertama Anda.</p>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="hidden sm:inline-block text-xs text-slate-500">
                    Total Periode: <b>{{ $periodeCount }}</b>
                </span>
                @if (\Illuminate\Support\Facades\Route::has('admin.periode'))
                    <a href="{{ route('admin.periode') }}"
                       class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 text-white px-3 py-2 text-sm hover:bg-indigo-700 transition">
                        <i class="bi bi-gear"></i> Kelola Periode
                    </a>
                @endif
            </div>
        </div>
    </div>

    {{-- Cards --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7">
        @foreach ($cards as $c)
            <a href="{{ $c['href'] }}"
               class="group relative overflow-hidden rounded-2xl p-4 ring-1 ring-slate-200 bg-white shadow hover:shadow-md transition">
                <div class="absolute -right-8 -top-8 h-28 w-28 rounded-full opacity-20 bg-gradient-to-br {{ $c['color'] }}"></div>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs uppercase tracking-wide text-slate-500">{{ $c['label'] }}</p>
                        <p class="mt-1 text-2xl font-semibold">{{ number_format($c['value']) }}</p>
                    </div>
                    <div class="h-10 w-10 rounded-xl grid place-items-center text-white bg-gradient-to-br {{ $c['color'] }}">
                        <i class="bi {{ $c['icon'] }}"></i>
                    </div>
                </div>
                <div class="mt-2 text-[11px] text-slate-400 group-hover:text-slate-600 transition">
                    Lihat detail
                    <i class="bi bi-arrow-right-short align-[-2px]"></i>
                </div>
            </a>
        @endforeach
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        {{-- Admin terbaru --}}
        <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
                <div class="flex items-center gap-2">
                    <i class="bi bi-shield-lock-fill text-indigo-600"></i>
                    <h2 class="font-medium">Admin Terbaru</h2>
                </div>
                <a href="{{ route('admin.pengguna.list', ['role' => 'admin']) }}"
                   class="text-xs text-orange-600 hover:text-orange-700">Lihat semua</a>
            </div>

            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-left text-slate-500">
                            <tr>
                                <th class="py-2 pr-3">Nama</th>
                                <th class="py-2 pr-3">Username</th>
                                <th class="py-2 pr-3">Kontak</th>
                                <th class="py-2">Dibuat</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($admins as $adm)
                                <tr class="hover:bg-slate-50">
                                    <td class="py-2 pr-3">
                                        {{ $adm->pengguna->nama ?? '—' }}
                                    </td>
                                    <td class="py-2 pr-3">
                                        <span class="font-medium">{{ $adm->username }}</span>
                                    </td>
                                    <td class="py-2 pr-3">
                                        {{ $adm->pengguna->nomor_hp ?? '—' }}
                                    </td>
                                    <td class="py-2">
                                        {{ $adm->created_at?->format('d M Y') }}
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="py-6 text-center text-slate-500">Belum ada admin.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Registrasi terbaru --}}
        <div class="bg-white rounded-2xl shadow ring-1 ring-slate-200 overflow-hidden">
            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-200">
                <div class="flex items-center gap-2">
                    <i class="bi bi-clock-history text-emerald-600"></i>
                    <h2 class="font-medium">Registrasi Terbaru</h2>
                </div>
                <a href="{{ route('admin.pengguna.list') }}"
                   class="text-xs text-orange-600 hover:text-orange-700">Lihat semua</a>
            </div>

            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-left text-slate-500">
                            <tr>
                                <th class="py-2 pr-3">Nama</th>
                                <th class="py-2 pr-3">Username</th>
                                <th class="py-2 pr-3">Role</th>
                                <th class="py-2 pr-3">Kelas</th>
                                <th class="py-2">Dibuat</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse ($recentUsers as $u)
                                <tr class="hover:bg-slate-50">
                                    <td class="py-2 pr-3">{{ $u->pengguna->nama ?? '—' }}</td>
                                    <td class="py-2 pr-3 font-medium">{{ $u->username }}</td>
                                    <td class="py-2 pr-3">
                                        <span class="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-[11px] font-semibold text-orange-700">
                                            {{ \Illuminate\Support\Str::headline(str_replace('_',' ', $u->role)) }}
                                        </span>
                                    </td>
                                    <td class="py-2 pr-3">{{ $u->pengguna->kelas->nama ?? '—' }}</td>
                                    <td class="py-2">{{ $u->created_at?->format('d M Y') }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="py-6 text-center text-slate-500">Belum ada data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>