<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Dashboard Admin') - PilahPintar</title>
    
    <!-- Bootstrap 5 CSS & FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        body {
            background: radial-gradient(circle at 100% 0%, #ecfdf5 0%, #f8fafc 50%, #f1f5f9 100%);
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #0f172a;
            min-height: 100vh;
        }
        
        .font-heading {
            font-family: 'Fredoka', cursive, sans-serif;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(16, 185, 129, 0.2);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(16, 185, 129, 0.4);
        }

        /* Sidebar Styling */
        .admin-sidebar {
            min-height: 100vh;
            background: linear-gradient(180deg, #022c22 0%, #0f172a 100%); /* Deep Dark Emerald to Deep Slate */
            color: #a7f3d0;
            box-shadow: 4px 0 25px rgba(0, 0, 0, 0.08);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }
        .admin-sidebar .nav-link {
            color: #94a3b8;
            padding: 0.85rem 1.25rem;
            border-radius: 0.75rem;
            font-weight: 600;
            margin-bottom: 0.45rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            position: relative;
        }
        .admin-sidebar .nav-link i {
            font-size: 1.1rem;
        }
        .admin-sidebar .nav-link:hover {
            color: #10b981;
            background: rgba(16, 185, 129, 0.08);
            transform: translateX(4px);
        }
        .admin-sidebar .nav-link.active {
            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
        }
        .admin-sidebar .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            height: 60%;
            width: 4px;
            background-color: white;
            border-radius: 0 4px 4px 0;
        }

        /* Metrics Card Gradients with Colored Glows & Dynamic Hover Zoom */
        .card-metric-green, .card-metric-blue, .card-metric-orange, .card-metric-red, .card-metric-purple {
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        .card-metric-green::before, .card-metric-blue::before, .card-metric-orange::before, .card-metric-red::before, .card-metric-purple::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
            z-index: -1;
        }
        .card-metric-green:hover, .card-metric-blue:hover, .card-metric-orange:hover, .card-metric-red:hover, .card-metric-purple:hover {
            transform: translateY(-5px) scale(1.03);
        }

        .card-metric-green {
            background: linear-gradient(135deg, #059669 0%, #064e3b 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(5, 150, 105, 0.25) !important;
        }
        .card-metric-blue {
            background: linear-gradient(135deg, #0284c7 0%, #1e3a8a 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(2, 132, 199, 0.25) !important;
        }
        .card-metric-orange {
            background: linear-gradient(135deg, #ea580c 0%, #7c2d12 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(234, 88, 12, 0.25) !important;
        }
        .card-metric-red {
            background: linear-gradient(135deg, #e11d48 0%, #4c0519 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(225, 29, 72, 0.25) !important;
        }
        .card-metric-purple {
            background: linear-gradient(135deg, #7c3aed 0%, #3b0764 100%);
            color: white;
            box-shadow: 0 10px 25px rgba(124, 58, 237, 0.25) !important;
        }

        /* Card Customization */
        .card {
            border: 1px solid rgba(226, 232, 240, 0.8) !important;
            border-radius: 1.25rem !important;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
            background-color: #ffffff;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08) !important;
        }

        /* Card top accent lines */
        .card-accent-green { border-top: 5px solid #10b981 !important; }
        .card-accent-blue { border-top: 5px solid #3b82f6 !important; }
        .card-accent-orange { border-top: 5px solid #f97316 !important; }
        .card-accent-red { border-top: 5px solid #ef4444 !important; }
        .card-accent-purple { border-top: 5px solid #8b5cf6 !important; }

        /* Tables & Soft Pastel Badges */
        .table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .table thead th {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 700;
            color: #64748b;
            border-bottom: 2px solid #e2e8f0;
            padding: 1rem;
            background-color: #f8fafc;
        }
        .table tbody td {
            padding: 1rem;
            background-color: #ffffff;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
        }
        .table-hover tbody tr:hover td {
            background-color: #f0fdf4 !important;
        }

        .badge {
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.45em 0.85em;
            border-radius: 0.5rem;
            letter-spacing: 0.025em;
        }
        .bg-success {
            background-color: rgba(16, 185, 129, 0.1) !important;
            color: #065f46 !important;
            border: 1px solid rgba(16, 185, 129, 0.2) !important;
        }
        .bg-info {
            background-color: rgba(14, 165, 233, 0.1) !important;
            color: #0369a1 !important;
            border: 1px solid rgba(14, 165, 233, 0.2) !important;
        }
        .bg-warning {
            background-color: rgba(245, 158, 11, 0.1) !important;
            color: #b45309 !important;
            border: 1px solid rgba(245, 158, 11, 0.2) !important;
        }
        .bg-danger {
            background-color: rgba(239, 68, 68, 0.1) !important;
            color: #991b1b !important;
            border: 1px solid rgba(239, 68, 68, 0.2) !important;
        }
        .bg-primary {
            background-color: rgba(59, 130, 246, 0.1) !important;
            color: #1e40af !important;
            border: 1px solid rgba(59, 130, 246, 0.2) !important;
        }
        .bg-secondary {
            background-color: rgba(107, 114, 128, 0.1) !important;
            color: #374151 !important;
            border: 1px solid rgba(107, 114, 128, 0.2) !important;
        }

        /* Hover animation for list items in widgets */
        .bg-hover-soft {
            transition: all 0.2s ease-in-out;
            border-radius: 0.75rem;
        }
        .bg-hover-soft:hover {
            background-color: rgba(16, 185, 129, 0.05) !important;
            transform: translateX(4px);
        }

        /* Responsive adjustments for sidebar on mobile */
        @media (max-width: 767.98px) {
            .admin-sidebar {
                width: 280px !important;
                background: linear-gradient(180deg, #022c22 0%, #0f172a 100%) !important;
            }
        }
    </style>
    @yield('styles')
</head>
<body>

    <!-- MOBILE NAVBAR -->
    <header class="navbar navbar-dark sticky-top d-md-none p-3 shadow-sm" style="background-color: #064e3b; border-bottom: 2px solid #10b981;">
        <div class="container-fluid px-0">
            <div class="d-flex align-items-center gap-2 text-white">
                <span class="fs-4">♻️</span>
                <span class="fw-bold font-heading">Admin PilahPintar</span>
            </div>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-label="Toggle navigation">
                <i class="fa-solid fa-bars fs-4 text-white"></i>
            </button>
        </div>
    </header>

    <div class="container-fluid">
        <div class="row">
            <!-- SIDEBAR -->
            <nav class="col-md-3 col-lg-2 offcanvas-md offcanvas-start admin-sidebar p-3" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
                <!-- Offcanvas Header for Mobile -->
                <div class="offcanvas-header d-md-none text-white pb-3 border-bottom border-secondary mb-3">
                    <h5 class="offcanvas-title font-heading d-flex align-items-center gap-2" id="sidebarMenuLabel">
                        <span>♻️</span> Admin PilahPintar
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>
                </div>

                <!-- Desktop Sidebar Logo -->
                <div class="d-none d-md-flex align-items-center gap-2 mb-4 px-2 text-white">
                    <span class="fs-3">♻️</span>
                    <div>
                        <h6 class="fw-bold mb-0">Admin PilahPintar</h6>
                        <small class="text-white-50" style="font-size: 0.75rem;">Panel Pengelola Konten</small>
                    </div>
                </div>
                
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">
                            <i class="fa-solid fa-chart-line me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.articles.*') ? 'active' : '' }}" href="{{ route('admin.articles.index') }}">
                            <i class="fa-solid fa-newspaper me-2"></i> Kelola Artikel
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.posters.*') ? 'active' : '' }}" href="{{ route('admin.posters.index') }}">
                            <i class="fa-solid fa-file-image me-2"></i> Kelola Poster
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.videos.*') ? 'active' : '' }}" href="{{ route('admin.videos.index') }}">
                            <i class="fa-solid fa-video me-2"></i> Kelola Video
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.quiz.*') ? 'active' : '' }}" href="{{ route('admin.quiz.index') }}">
                            <i class="fa-solid fa-circle-question me-2"></i> Kelola Soal Kuis
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ request()->routeIs('admin.student-scores.*') ? 'active' : '' }}" href="{{ route('admin.student-scores.index') }}">
                            <i class="fa-solid fa-trophy me-2"></i> Skor Kuis Siswa
                        </a>
                    </li>
                </ul>

                <hr class="text-secondary my-4">

                <div class="px-2">
                    <a href="{{ route('home') }}" class="btn btn-outline-light btn-sm w-100 mb-2" target="_blank">
                        <i class="fa-solid fa-globe me-1"></i> Lihat Website Siswa
                    </a>
                    <form action="{{ route('admin.logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm w-100">
                            <i class="fa-solid fa-right-from-bracket me-1"></i> Logout
                        </button>
                    </form>
                </div>
            </nav>

            <!-- MAIN CONTENT -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="fw-bold text-dark">@yield('title', 'Dashboard Admin')</h4>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-success p-2"><i class="fa-solid fa-user-shield me-1"></i> {{ Auth::user()->name ?? 'Admin' }}</span>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                        <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                        <i class="fa-solid fa-triangle-exclamation me-2"></i> {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
                        <h6 class="fw-bold mb-2"><i class="fa-solid fa-triangle-exclamation me-2"></i> Terjadi kesalahan pengisian data:</h6>
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @yield('content')
            </main>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    @yield('scripts')
</body>
</html>
