<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin Dashboard') - Kabupaten Sukabumi</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary: #4a3728;
            --secondary: #d4a017;
            --danger: #e74c3c;
            --success: #27ae60;
            --warning: #f39c12;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #e8e4d9;
        }

        /* Standardized Page Hero */
        .page-hero {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem 1.5rem;
            margin-bottom: 1rem;
            background: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 8px;
        }

        .page-hero h3,
        .page-hero h5 {
            margin: 0 0 0.25rem;
            color: var(--primary);
            font-size: 1.25rem;
            font-weight: 750;
        }

        .page-hero p {
            margin: 0;
            color: #6c757d;
        }

        @media (max-width: 575.98px) {
            .page-hero {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        .admin-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 260px;
            background: #fcfaf6;
            color: var(--primary);
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 1040;
            transition: transform 0.3s ease-in-out;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1030;
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .sidebar-overlay.active {
            display: block;
            opacity: 1;
        }

        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            text-align: center;
        }

        .sidebar-header h5 {
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .sidebar-menu li {
            margin: 0;
        }

        .sidebar-section {
            display: flex;
            align-items: center;
            margin: 1.5rem 0 0.5rem 0.5rem;
        }

        .sidebar-section span {
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-right: 0.75rem;
        }

        .sidebar-section::after {
            content: '';
            flex-grow: 1;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.08);
        }

        .sidebar-menu a {
            display: flex;
            align-items: center;
            height: 50px;
            padding: 0 16px 0 24px;
            color: #4b5563;
            text-decoration: none;
            transition: all 0.2s;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            border-left: 4px solid transparent;
            gap: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-menu a i {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0;
            flex-shrink: 0;
        }

        .sidebar-menu a:hover {
            background: rgba(0, 0, 0, 0.03);
            color: var(--primary);
        }

        .sidebar-menu a.active {
            color: var(--primary);
            background: #eadebe;
            border-left: 4px solid var(--secondary);
            border-radius: 0 8px 8px 0;
            margin-left: -16px;
            padding-left: 40px;
            /* Aligns text exactly with non-active items */
        }

        .sidebar-menu a.active i {
            color: var(--secondary);
        }

        .sidebar-footer {
            padding: 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            margin-top: auto;
        }

        .main-content {
            margin-left: 250px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .topbar {
            background: #f4f1e9;
            padding: 1.5rem 2rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .btn-sidebar-toggle {
            display: none;
            background: transparent;
            border: none;
            font-size: 1.25rem;
            color: var(--primary);
            cursor: pointer;
        }

        .topbar h2 {
            margin: 0;
            color: var(--primary);
            font-weight: 700;
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .content {
            flex: 1;
            padding: 2rem;
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
        }

        .card-header {
            background: linear-gradient(135deg, #e6ddc5 0%, #f6e5b3 100%);
            color: #4a3728;
            border: none;
            padding: 1.5rem;
            border-radius: 10px 10px 0 0;
        }

        .card-header h5 {
            margin: 0;
            font-weight: 600;
        }

        .card-body {
            padding: 1.5rem;
        }

        .stat-card {
            background: #f4f1e9;
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            margin: 1rem 0;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, #32251a 100%);
            color: #ffffff;
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #32251a 0%, #1a130d 100%);
            color: #ffffff;
        }

        .btn-secondary {
            background: linear-gradient(135deg, var(--secondary) 0%, #b8860b 100%);
            color: var(--primary);
            border: none;
            font-weight: 600;
        }

        .btn-secondary:hover {
            background: linear-gradient(135deg, #b8860b 0%, #996515 100%);
            color: #2c2118;
        }

        .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
        }

        .btn-outline-primary:hover,
        .btn-check:checked+.btn-outline-primary,
        .btn-outline-primary.active,
        .btn-outline-primary:active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: #ffffff;
        }

        .btn-sage {
            background-color: #8ba888;
            color: #ffffff;
            border: none;
        }

        .btn-sage:hover,
        .btn-check:checked+.btn-sage,
        .btn-sage.active,
        .btn-sage:active {
            background-color: #7a9677;
            color: #ffffff;
        }

        .btn-outline-sage {
            color: #8ba888;
            border-color: #8ba888;
        }

        .btn-outline-sage:hover,
        .btn-check:checked+.btn-outline-sage,
        .btn-outline-sage.active,
        .btn-outline-sage:active {
            background-color: #8ba888;
            border-color: #8ba888;
            color: #ffffff;
        }

        .badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
        }

        .badge-pending {
            background-color: #f39c12;
            color: #f4f1e9;
        }

        .badge-approved {
            background-color: #27ae60;
            color: #f4f1e9;
        }

        .badge-rejected {
            background-color: #e74c3c;
            color: #f4f1e9;
        }

        .table-responsive {
            border-radius: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background: #f8f9fa;
            color: var(--primary);
            font-weight: 600;
            border: none;
            padding: 1rem;
        }

        .table tbody td {
            padding: 1rem;
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background-color: #e6ddc5;
        }

        .form-label {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            padding: 0.75rem 1rem;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--secondary);
            box-shadow: 0 0 0 0.2rem rgba(212, 160, 23, 0.25);
        }

        .alert {
            border: none;
            border-radius: 10px;
        }

        /* Pagination Standard Style */
        .pagination-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.15rem;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            background: #f4f1e9;
        }

        .pagination-wrap nav {
            display: flex;
            width: 100%;
        }

        .pagination-wrap .pagination {
            margin: 0;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.25rem;
        }

        .pagination-wrap .page-link {
            min-width: 38px;
            border: 1px solid #dfe6ee;
            border-radius: 6px;
            color: #3b5268;
            text-align: center;
        }

        .pagination-wrap .page-item.active .page-link {
            border-color: #b8860b;
            background: #b8860b;
            color: #fff;
        }

        .pagination-wrap .page-item.disabled .page-link {
            color: #9aa6b2;
            background: #f8fafc;
        }

        .pagination-info {
            color: #6c757d;
            font-size: 0.875rem;
            white-space: nowrap;
        }

        @media (max-width: 767.98px) {
            .pagination-wrap {
                align-items: flex-start;
                flex-direction: column;
                gap: 1rem;
            }

            .pagination-wrap nav {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 0.5rem;
                /* Space for horizontal scrollbar */
            }

            .pagination-wrap .pagination {
                justify-content: flex-start;
                flex-wrap: nowrap;
            }
        }

        .pagination {
            margin-top: 0;
        }

        .pagination .page-link {
            color: var(--secondary);
        }

        .pagination .page-link:hover {
            background-color: #e6ddc5;
            color: var(--secondary);
        }

        .pagination .page-item.active .page-link {
            background-color: var(--secondary);
            border-color: var(--secondary);
        }

        /* Override Bootstrap info/primary colors to gold */
        .text-info {
            color: #d4a017 !important;
        }

        .bg-info {
            background-color: #d4a017 !important;
            color: white !important;
        }

        .text-primary {
            color: #4a3728 !important;
        }

        .bg-primary {
            background-color: #4a3728 !important;
            color: white !important;
        }

        .btn-info {
            background-color: #d4a017 !important;
            border-color: #d4a017 !important;
            color: white !important;
        }

        .btn-info:hover {
            background-color: #b8860b !important;
            border-color: #b8860b !important;
        }

        .btn-outline-info {
            color: #d4a017 !important;
            border-color: #d4a017 !important;
        }

        .btn-outline-info:hover {
            background-color: #d4a017 !important;
            border-color: #d4a017 !important;
            color: white !important;
        }

        .alert-info {
            background-color: #e6ddc5 !important;
            border-color: #f6e5b3 !important;
            color: #7a5c1e !important;
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
            }

            .topbar {
                padding: 1rem;
            }

            .btn-sidebar-toggle {
                display: block;
            }

            .content {
                padding: 1rem;
            }

            .sidebar-menu a {
                padding: 0.75rem 1rem;
            }
        }
    </style>
    @yield('style')
</head>

<body>
    <div class="sidebar-overlay" id="sidebarOverlay"></div>
    <div class="admin-container">
        {{-- Sidebar --}}
        <div class="sidebar">
            <div class="sidebar-header">
                <h5><i class="fas fa-tachometer-alt"></i> Admin Panel</h5>
                <small>{{ auth()->user()->name }}</small>
            </div>

            @php
                $currentPegawai = request()->route('pegawai');
                $isApprovedPegawaiDetail = $currentPegawai instanceof \App\Models\Pegawai
                    && $currentPegawai->status_validasi === 'disetujui';
                $isSubmissionPegawaiDetail = $currentPegawai instanceof \App\Models\Pegawai
                    && $currentPegawai->status_validasi !== 'disetujui';
            @endphp

            <ul class="sidebar-menu">
                <li>
                    <a href="{{ route('admin.dashboard') }}"
                        class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                        <i class="fas fa-chart-line"></i> Dashboard
                    </a>
                </li>

                <li class="sidebar-section"><span>Data Master</span></li>
                <li>
                    <a href="{{ route('admin.pegawai.index') }}"
                        class="{{ request()->routeIs('admin.pegawai.index') || request()->routeIs('admin.pegawai.create') || request()->routeIs('admin.pegawai.store') || $isApprovedPegawaiDetail ? 'active' : '' }}">
                        <i class="fas fa-users"></i> Data Pegawai
                    </a>
                </li>
                @if (auth()->user()->isSuperAdmin())
                    <li>
                        <a href="{{ route('admin.unit-kerja.index') }}"
                            class="{{ request()->routeIs('admin.unit-kerja.*') ? 'active' : '' }}">
                            <i class="fas fa-building"></i> Unit Kerja
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('admin.jabatan.index') }}"
                            class="{{ request()->routeIs('admin.jabatan.*') ? 'active' : '' }}">
                            <i class="fas fa-briefcase"></i> Jabatan Fungsional
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('admin.assessment-master.index') }}"
                            class="{{ request()->routeIs('admin.assessment-master.*') ? 'active' : '' }}">
                            <i class="fas fa-sliders-h"></i> Master Assessment
                        </a>
                    </li>
                @endif
                <li>
                    <a href="{{ route('admin.kode-akses-kantor.index') }}"
                        class="{{ request()->routeIs('admin.kode-akses-kantor.*') ? 'active' : '' }}">
                        <i class="fas fa-key"></i> Kode Pendataan
                    </a>
                </li>

                <li class="sidebar-section"><span>Proses</span></li>
                <li>
                    <a href="{{ route('admin.pegawai.submissions') }}"
                        class="{{ request()->routeIs('admin.pegawai.submissions') || $isSubmissionPegawaiDetail ? 'active' : '' }}">
                        <i class="fas fa-inbox"></i> Pendataan Masuk
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.assessment-kompetensi.index') }}"
                        class="{{ request()->routeIs('admin.assessment-kompetensi.*') ? 'active' : '' }}">
                        <i class="fas fa-clipboard-list"></i> Assessment Kompetensi
                    </a>
                </li>
                @if (auth()->user()->isSuperAdmin())
                    <li>
                        <a href="{{ route('admin.validation-histories.index') }}"
                            class="{{ request()->routeIs('admin.validation-histories.*') ? 'active' : '' }}">
                            <i class="fas fa-check-circle"></i> Riwayat Validasi
                        </a>
                    </li>
                @endif

                <li class="sidebar-section"><span>Manajemen</span></li>
                <li>
                    <a href="{{ route('admin.pegawai-accounts.index') }}"
                        class="{{ request()->routeIs('admin.pegawai-accounts.*') ? 'active' : '' }}">
                        <i class="fas fa-user"></i> Akun Pegawai
                    </a>
                </li>
                @if (auth()->user()->isSuperAdmin())
                    <li>
                        <a href="{{ route('admin.admin-users.index') }}"
                            class="{{ request()->routeIs('admin.admin-users.*') ? 'active' : '' }}">
                            <i class="fas fa-users-cog"></i> Kelola Admin
                        </a>
                    </li>
                @endif
            </ul>

            <div class="sidebar-footer">
                <form action="{{ route('logout') }}" method="POST" style="margin: 0;">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-danger w-100">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </button>
                </form>
            </div>
        </div>

        {{-- Main Content --}}
        <div class="main-content">
            {{-- Topbar --}}
            <div class="topbar">
                <div class="topbar-left">
                    <button class="btn-sidebar-toggle" id="sidebarToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2>@yield('page_title')</h2>
                </div>
                <div class="user-menu">
                    <span>
                        <i class="fas fa-user-circle"></i> {{ auth()->user()->name }}
                    </span>
                </div>
            </div>

            <div class="content">
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Terjadi Kesalahan!</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle"></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" role="alert">
                        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const sidebar = document.querySelector('.sidebar');
            const overlay = document.getElementById('sidebarOverlay');
            const toggleBtn = document.getElementById('sidebarToggle');

            function toggleSidebar() {
                sidebar.classList.toggle('active');
                overlay.classList.toggle('active');
                document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
            }

            toggleBtn.addEventListener('click', toggleSidebar);
            overlay.addEventListener('click', toggleSidebar);
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @yield('script')
</body>

</html>