@extends('layouts.admin')

@section('title', 'Dashboard Admin')
@section('page_title', 'Dashboard Admin')

@push('styles')
    <style>
        .dashboard-greeting {
            margin-bottom: 24px;
        }

        .dashboard-greeting h3 {
            color: #1e293b;
            font-size: 22px;
            margin-bottom: 6px;
        }

        .dashboard-greeting p {
            color: #64748b;
            line-height: 1.6;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 18px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 14px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
        }

        .stat-icon {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: grid;
            place-items: center;
            background: #eff6ff;
            color: #2563eb;
            font-size: 18px;
        }

        .stat-card strong {
            display: block;
            color: #0f172a;
            font-size: 26px;
            line-height: 1;
            margin-bottom: 6px;
        }

        .stat-card span {
            color: #64748b;
            font-size: 13px;
        }

        .quick-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
        }

        .quick-link {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            color: #1e293b;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 82px;
            padding: 18px;
            text-decoration: none;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        .quick-link:hover {
            border-color: #2563eb;
            transform: translateY(-2px);
        }

        .quick-link.disabled {
            color: #94a3b8;
            cursor: not-allowed;
        }

        .quick-link.disabled:hover {
            border-color: #e2e8f0;
            transform: none;
        }

        .quick-link small {
            display: block;
            color: #64748b;
            margin-top: 5px;
        }
    </style>
@endpush

@section('content')
    <section class="dashboard-greeting">
        <h3>Halo, {{ auth()->user()->name }}.</h3>
        <p>Ini ringkasan awal pusat admin SIPENA. Untuk tahap ini dashboard hanya menampilkan statistik dasar dan pintasan menu.</p>
    </section>

    <section class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-users"></i></div>
            <div>
                <strong>{{ $totalUsers }}</strong>
                <span>Total User</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-user-shield"></i></div>
            <div>
                <strong>{{ $totalAdmins }}</strong>
                <span>Total Admin</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-chalkboard-user"></i></div>
            <div>
                <strong>{{ $totalGuru }}</strong>
                <span>Total Guru</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
            <div>
                <strong>{{ $totalSiswa }}</strong>
                <span>Total Siswa</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-book"></i></div>
            <div>
                <strong>{{ $totalKelas }}</strong>
                <span>Total Kelas</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-book"></i></div>
            <div>
                <strong>{{ $totalMataPelajaran }}</strong>
                <span>Total Mata Pelajaran</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-calendar-days"></i></div>
            <div>
                <strong>{{ $totalJadwal }}</strong>
                <span>Total Jadwal Pelajaran</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon"><i class="fa-solid fa-gamepad"></i></div>
            <div>
                <strong>{{ $totalGame }}</strong>
                <span>Total Game Edukasi</span>
            </div>
        </div>
    </section>

    <section class="content-header">
        <div>
            <h3 style="color: #1e293b; font-size: 18px;">Menu Cepat</h3>
            <p style="color: #64748b; font-size: 14px; margin-top: 4px;">Akses bagian admin yang sudah tersedia atau sedang disiapkan.</p>
        </div>
    </section>

    <section class="quick-grid">
        <a class="quick-link" href="{{ route('admin.users.index') }}">
            <span>
                <strong>Kelola User</strong>
                <small>Admin, guru, dan siswa</small>
            </span>
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <a class="quick-link" href="{{ route('admin.jadwal.index') }}">
            <span>
                <strong>Kelola Jadwal</strong>
                <small>Mapel, guru, hari, jam, kelas</small>
            </span>
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <a class="quick-link" href="{{ route('admin.kelas.index') }}">
            <span>
                <strong>Data Kelas</strong>
                <small>Pilihan kelas 5A, 5B, 5C</small>
            </span>
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <a class="quick-link" href="{{ route('admin.mata-pelajaran.index') }}">
            <span>
                <strong>Mata Pelajaran</strong>
                <small>Data pilihan untuk jadwal</small>
            </span>
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <a class="quick-link" href="{{ route('admin.game.index') }}">
            <span>
                <strong>Game Edukasi</strong>
                <small>Kelola link game HTML5</small>
            </span>
            <i class="fa-solid fa-arrow-right"></i>
        </a>
    </section>
@endsection
