<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Sistem Informasi Pendataan Pegawai') - Kabupaten Sukabumi</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #2d2312;
            --secondary: #d4a017;
        }

        body {
            font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #e8e4d9;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background-color: #f4f1e9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .container-main {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem 0;
        }

        .card-form {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        .card-header {
            background: linear-gradient(135deg, #e6ddc5 0%, #f6e5b3 100%);
            color: #4a3728;
            padding: 2rem;
            text-align: center;
        }

        .card-header h2 {
            margin: 0;
            font-weight: 700;
        }

        .card-body {
            padding: 2rem;
        }

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

        .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);
        }

        .btn-submit {
            background: linear-gradient(135deg, #3b2a1a 0%, #d4a017 100%);
            border: none;
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            width: 100%;
            transition: transform 0.2s;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(212, 160, 23, 0.4);
        }

        .btn-submit:active {
            transform: translateY(0);
        }

        .footer {
            background-color: #f4f1e9;
            color: #6c757d;
            text-align: center;
            padding: 1.5rem;
            margin-top: auto;
        }

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

        .required::after {
            content: "*";
            color: #e74c3c;
            margin-left: 0.25rem;
        }

        .section-title {
            color: var(--primary);
            font-weight: 700;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid 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; }
        .btn-primary { background-color: #4a3728 !important; border-color: #4a3728 !important; color: white !important; }
        .btn-primary:hover { background-color: #3b2c20 !important; border-color: #3b2c20 !important; }
        .btn-outline-primary { color: #4a3728 !important; border-color: #4a3728 !important; }
        .btn-outline-primary:hover { background-color: #4a3728 !important; border-color: #4a3728 !important; color: white !important; }
        .alert-info { background-color: #e6ddc5 !important; border-color: #f6e5b3 !important; color: #7a5c1e !important; }

        @media (max-width: 768px) {
            .container-main {
                padding: 1.5rem 0;
            }

            .card-header {
                padding: 1.5rem;
            }

            .card-body {
                padding: 1.5rem;
            }

            .card-form {
                margin: 0.5rem;
            }
        }
    </style>
    @yield('style')
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light shadow-sm py-3" style="background-color: #f4f1e9; border-bottom: 1px solid rgba(0,0,0,0.05);">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="{{ route('home') }}">
                <i class="fas fa-users-cog fs-4" style="color: #f0c040;"></i>
                <span class="fw-bold tracking-tight" style="color: #4a3728;">Sipenjas <span style="color: #d4a017;">Sukabumi</span></span>
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-lg-4 me-auto mb-2 mb-lg-0 gap-lg-3">
                    <li class="nav-item">
                        <a class="nav-link px-3 {{ request()->routeIs('home') ? 'active fw-semibold' : 'text-secondary' }}" href="{{ route('home') }}" style="{{ request()->routeIs('home') ? 'color: #d4a017 !important;' : '' }}">
                            <i class="fas fa-home me-1"></i> Beranda
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-3 {{ request()->routeIs('pegawai.form') ? 'active fw-semibold' : 'text-secondary' }}" href="{{ route('pegawai.form') }}" style="{{ request()->routeIs('pegawai.form') ? 'color: #d4a017 !important;' : '' }}">
                            <i class="fas fa-file-signature me-1"></i> Form Pendataan
                        </a>
                    </li>
                </ul>
                <div class="navbar-nav align-items-center gap-3">
                    @auth
                        <div class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle d-flex align-items-center gap-2 px-3 py-1.5 rounded-pill text-dark" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);">
                                <i class="fas fa-user-circle fs-5" style="color: #d4a017;"></i>
                                <span class="fw-medium">{{ auth()->user()->name }}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2 p-2" style="border-radius: 12px; min-width: 240px; background-color: #f4f1e9;">
                                <li>
                                    <div class="dropdown-header text-secondary">
                                        <div class="fw-bold text-dark fs-6">{{ auth()->user()->name }}</div>
                                        <div class="text-truncate small">{{ auth()->user()->email }}</div>
                                        <span class="badge mt-1 fw-bold" style="background-color: #d4a017; color: #f4f1e9;">{{ auth()->user()->role_label }}</span>
                                    </div>
                                </li>
                                <li><hr class="dropdown-divider border-secondary opacity-25"></li>
                                <li>
                                    @if (auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                                        <a class="dropdown-item d-flex align-items-center gap-2 py-2 text-dark" href="{{ route('admin.dashboard') }}" style="border-radius: 8px;">
                                            <i class="fas fa-chart-line" style="color: #d4a017;"></i> Dashboard Admin
                                        </a>
                                    @elseif (auth()->user()->isPegawai())
                                        <a class="dropdown-item d-flex align-items-center gap-2 py-2 text-dark" href="{{ route('pegawai.dashboard') }}" style="border-radius: 8px;">
                                            <i class="fas fa-user-shield" style="color: #d4a017;"></i> Portal Pegawai
                                        </a>
                                    @endif
                                </li>
                                <li><hr class="dropdown-divider border-secondary opacity-25"></li>
                                <li>
                                    <form action="{{ route('logout') }}" method="POST" class="m-0">
                                        @csrf
                                        <button type="submit" class="dropdown-item d-flex align-items-center gap-2 py-2 text-danger fw-semibold" style="border-radius: 8px;">
                                            <i class="fas fa-sign-out-alt"></i> Keluar
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    @else
                        <a class="btn px-4 py-1.5 rounded-pill fw-medium" href="{{ route('login') }}" style="transition: all 0.3s; color: #d4a017; border-color: #d4a017;">
                            <i class="fas fa-sign-in-alt me-1"></i> Masuk Sistem
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    </nav>

    <div class="container-main">
        <div class="container">
            @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">
                    {{ 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">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

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

    <footer class="footer">
        <p class="mb-0">&copy; 2026 Sistem Informasi Pendataan Pegawai Jabatan Fungsional Kabupaten Sukabumi. All rights reserved.</p>
    </footer>

    <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @yield('script')
</body>
</html>
