<!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') — E-Recruitment Admin</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --sidebar-bg: #1a3c2a;
            --sidebar-active: #2E7D32;
            --sidebar-hover: rgba(255,255,255,0.08);
            --sidebar-text: rgba(255,255,255,0.75);
            --sidebar-text-active: #ffffff;
            --sidebar-label: rgba(255,255,255,0.35);
            --sidebar-width: 260px;
            --sidebar-collapsed: 0px;
            --header-height: 60px;
            --body-bg: #F0F4F2;
            --card-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --border-color: rgba(0,0,0,0.06);
            --green-500: #2E7D32;
            --green-600: #1B5E20;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--body-bg);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ===== SIDEBAR ===== */
        .admin-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--sidebar-bg);
            z-index: 100;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
        }
        .admin-sidebar.collapsed {
            transform: translateX(-100%);
        }

        /* Brand */
        .sidebar-brand {
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .sidebar-brand-icon {
            width: 42px; height: 42px;
            background: rgba(255,255,255,0.12);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .sidebar-brand-icon img { width: 28px; height: 28px; object-fit: contain; }
        .sidebar-brand-text h1 { font-size: 1.05rem; font-weight: 700; color: white; line-height: 1.2; }
        .sidebar-brand-text span { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-weight: 500; }

        /* Nav */
        .sidebar-nav { padding: 0.75rem 0.75rem; flex: 1; }
        .sidebar-nav-label {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--sidebar-label);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 1rem 0.75rem 0.5rem;
        }
        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.6rem 0.85rem;
            border-radius: 10px;
            color: var(--sidebar-text);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 500;
            margin-bottom: 2px;
            transition: all 0.15s ease;
        }
        .sidebar-nav-item:hover {
            background: var(--sidebar-hover);
            color: rgba(255,255,255,0.95);
        }
        .sidebar-nav-item.active {
            background: var(--sidebar-active);
            color: var(--sidebar-text-active);
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(46,125,50,0.35);
        }
        .sidebar-nav-item i { width: 20px; text-align: center; font-size: 0.95rem; }

        /* Sidebar footer */
        .sidebar-footer {
            padding: 1rem 1.25rem;
            border-top: 1px solid rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sidebar-footer-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--sidebar-active);
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 0.85rem;
        }
        .sidebar-footer-info { flex: 1; }
        .sidebar-footer-info strong { color: white; font-size: 0.85rem; display: block; }
        .sidebar-footer-info span { color: rgba(255,255,255,0.5); font-size: 0.72rem; }
        .sidebar-footer a { color: rgba(255,255,255,0.5); font-size: 1rem; transition: color 0.15s; }
        .sidebar-footer a:hover { color: white; }

        /* ===== HEADER ===== */
        .admin-header {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            height: var(--header-height);
            background: white;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1.5rem;
            z-index: 90;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .admin-header.expanded { left: 0; }
        .header-left { display: flex; align-items: center; gap: 12px; }
        .header-toggle {
            width: 38px; height: 38px;
            border: none; background: none; cursor: pointer;
            border-radius: 8px; display: flex; align-items: center; justify-content: center;
            color: var(--text-secondary); font-size: 1.15rem;
            transition: all 0.15s;
        }
        .header-toggle:hover { background: #f3f4f6; color: var(--text-primary); }
        .header-title h2 { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
        .header-title p { font-size: 0.78rem; color: var(--text-muted); }
        .header-right { display: flex; align-items: center; gap: 12px; }
        .header-user { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }

        /* ===== MAIN CONTENT ===== */
        .admin-main {
            margin-left: var(--sidebar-width);
            margin-top: var(--header-height);
            padding: 1.5rem;
            min-height: calc(100vh - var(--header-height));
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .admin-main.expanded { margin-left: 0; }

        /* ===== OVERLAY (mobile) ===== */
        .sidebar-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 99;
            display: none;
        }
        .sidebar-overlay.active { display: block; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .admin-sidebar { transform: translateX(-100%); }
            .admin-sidebar.mobile-open { transform: translateX(0); }
            .admin-header { left: 0 !important; }
            .admin-main { margin-left: 0 !important; }
        }

        /* ===== UTILITY CLASSES ===== */
        .card {
            background: var(--card-bg);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
        }
        .btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 0.55rem 1.1rem;
            border-radius: 10px;
            font-size: 0.85rem; font-weight: 600;
            border: none; cursor: pointer;
            text-decoration: none;
            transition: all 0.15s;
        }
        .btn-primary {
            background: linear-gradient(135deg, #2E7D32, #43A047);
            color: white;
            box-shadow: 0 2px 8px rgba(46,125,50,0.2);
        }
        .btn-primary:hover { box-shadow: 0 4px 16px rgba(46,125,50,0.3); transform: translateY(-1px); }
        .btn-danger { background: #EF4444; color: white; }
        .btn-danger:hover { background: #DC2626; }
        .btn-secondary { background: #F3F4F6; color: var(--text-secondary); }
        .btn-secondary:hover { background: #E5E7EB; }
        .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }

        /* Table */
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table th {
            text-align: left; padding: 0.75rem 1rem;
            font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border-color);
        }
        .data-table td {
            padding: 0.85rem 1rem;
            font-size: 0.88rem; color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
        }
        .data-table tr:hover td { background: #f9fafb; }
        .data-table tr:last-child td { border-bottom: none; }

        /* Badge */
        .badge {
            display: inline-block; padding: 0.25rem 0.65rem;
            border-radius: 20px; font-size: 0.72rem; font-weight: 600;
        }
        .badge-success { background: #D1FAE5; color: #065F46; }
        .badge-warning { background: #FEF3C7; color: #92400E; }
        .badge-danger { background: #FEE2E2; color: #991B1B; }
        .badge-info { background: #DBEAFE; color: #1E40AF; }
        .badge-secondary { background: #F3F4F6; color: #4B5563; }

        /* Form */
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.35rem; }
        .form-control {
            width: 100%; padding: 0.6rem 0.85rem;
            border: 1px solid #D1D5DB; border-radius: 10px;
            font-size: 0.88rem; font-family: inherit;
            transition: all 0.15s;
            background: white;
        }
        .form-control:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(46,125,50,0.1); }
        select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 2rem; }

        /* Pagination */
        .pagination { display: flex; gap: 4px; list-style: none; }
        .pagination a, .pagination span {
            padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.82rem;
            text-decoration: none; color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }
        .pagination .active span { background: var(--green-500); color: white; border-color: var(--green-500); }

        /* Alert */
        .alert { padding: 0.85rem 1.1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.88rem; }
        .alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
        .alert-danger { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

        @yield('extra-css')
    </style>
</head>
<body>
    <!-- Sidebar Overlay (mobile) -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

    <!-- Sidebar -->
    <aside class="admin-sidebar" id="adminSidebar">
        <div class="sidebar-brand">
            <div class="sidebar-brand-icon">
                <img src="{{ asset('assets/images/logo.png') }}" alt="Logo">
            </div>
            <div class="sidebar-brand-text">
                <h1>E-Recruitment</h1>
                <span>PT Brahma Bina Bakti</span>
            </div>
        </div>

        <nav class="sidebar-nav">
            <a href="{{ route('admin.dashboard') }}" class="sidebar-nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                <i class="fas fa-home"></i> Dasbor
            </a>

            <div class="sidebar-nav-label">MENU UTAMA</div>
            <a href="{{ route('admin.applicants.index') }}" class="sidebar-nav-item {{ request()->routeIs('admin.applicants.*') ? 'active' : '' }}">
                <i class="fas fa-users"></i> Data Pelamar
            </a>
            <a href="{{ route('admin.vacancies.index') }}" class="sidebar-nav-item {{ request()->routeIs('admin.vacancies.*') ? 'active' : '' }}">
                <i class="fas fa-briefcase"></i> Data Lowongan
            </a>
            <a href="{{ route('admin.announcements.index') }}" class="sidebar-nav-item {{ request()->routeIs('admin.announcements.*') ? 'active' : '' }}">
                <i class="fas fa-bullhorn"></i> Pengumuman
            </a>


            <div class="sidebar-nav-label">SISTEM</div>
            <a href="{{ route('admin.settings.index') }}" class="sidebar-nav-item {{ request()->routeIs('admin.settings.*') ? 'active' : '' }}">
                <i class="fas fa-cog"></i> Pengaturan
            </a>
        </nav>

        <div class="sidebar-footer">
            <div class="sidebar-footer-avatar">{{ substr(auth()->user()->name ?? 'A', 0, 1) }}</div>
            <div class="sidebar-footer-info">
                <strong>{{ auth()->user()->name ?? 'Administrator' }}</strong>
                <span>admin</span>
            </div>
            <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" title="Logout">
                <i class="fas fa-sign-out-alt"></i>
            </a>
            <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" style="display: none;">@csrf</form>
        </div>
    </aside>

    <!-- Header -->
    <header class="admin-header" id="adminHeader">
        <div class="header-left">
            <button class="header-toggle" onclick="toggleSidebar()" title="Toggle Sidebar">
                <i class="fas fa-bars"></i>
            </button>
            <div class="header-title">
                <h2>@yield('page-title', 'Dasbor')</h2>
                <p>@yield('page-subtitle', '')</p>
            </div>
        </div>
        <div class="header-right">
            <span class="header-user"><i class="fas fa-user-circle"></i> {{ auth()->user()->name ?? 'Admin' }}</span>
        </div>
    </header>

    <!-- Main Content -->
    <main class="admin-main" id="adminMain">
        @if(session('success'))
            <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger">
                <ul style="margin-left: 1rem;">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        @yield('content')
    </main>

    <script>
        const sidebar = document.getElementById('adminSidebar');
        const header = document.getElementById('adminHeader');
        const main = document.getElementById('adminMain');
        const overlay = document.getElementById('sidebarOverlay');
        let sidebarOpen = true;

        function toggleSidebar() {
            const isMobile = window.innerWidth <= 768;
            if (isMobile) {
                sidebar.classList.toggle('mobile-open');
                overlay.classList.toggle('active');
            } else {
                sidebarOpen = !sidebarOpen;
                sidebar.classList.toggle('collapsed');
                header.classList.toggle('expanded');
                main.classList.toggle('expanded');
            }
        }

        // Close sidebar on mobile when clicking overlay
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('mobile-open');
                overlay.classList.remove('active');
            }
        });
    </script>

    @yield('scripts')
</body>
</html>
