<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'KITA ADIA (LLDIKTI III)')</title>
    <!-- Google Fonts & Bootstrap -->
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --dark-navy: #0f172a;
            --sidebar-bg: #1e293b;
            --accent: #eab308;
            --danger: #ef4444;
            --success: #10b981;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: #334155;
            min-height: 100vh;
        }

        /* Sidebar Styling */
        .sidebar {
            width: 280px;
            background-color: var(--sidebar-bg);
            min-height: 100vh;
            box-shadow: 4px 0 20px rgba(0,0,0,0.05);
            transition: all 0.3s;
            z-index: 1000;
        }

        .sidebar-header {
            background-color: var(--dark-navy);
            padding: 1.5rem 1.2rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .sidebar-brand {
            font-size: 1.25rem;
            font-weight: 800;
            color: #fff;
            text-decoration: none;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-brand span.badge {
            font-size: 0.7rem;
            padding: 0.35em 0.65em;
            background-color: var(--accent);
            color: var(--dark-navy);
        }

        .user-card {
            padding: 1.2rem;
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            margin: 1rem;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .nav-link-custom {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0.8rem 1rem;
            color: #cbd5e1;
            text-decoration: none;
            border-radius: 8px;
            margin: 0.2rem 1rem;
            font-weight: 500;
            transition: all 0.2s;
        }

        .nav-link-custom:hover {
            background: rgba(255,255,255,0.05);
            color: #fff;
        }

        .nav-link-custom.active {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }

        /* Content Area Styling */
        .content-area {
            flex: 1;
            padding: 2rem;
            max-height: 100vh;
            overflow-y: auto;
        }

        .card-custom {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            background: #fff;
            border: 1px solid #f1f5f9;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .card-custom:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.05);
        }

        .gradient-bg {
            background: linear-gradient(135deg, var(--dark-navy) 0%, var(--sidebar-bg) 100%);
            color: white;
        }

        /* Stepper Visual Timeline */
        .stepper-wrapper {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }

        .stepper-wrapper::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 5%;
            right: 5%;
            height: 4px;
            background: #e2e8f0;
            z-index: 1;
        }

        .stepper-line-progress {
            position: absolute;
            top: 25px;
            left: 5%;
            height: 4px;
            background: var(--primary);
            z-index: 1;
            transition: width 0.5s ease-in-out;
        }

        .stepper-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            width: 16%;
        }

        .step-counter {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #f1f5f9;
            border: 3px solid #cbd5e1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 0.5rem;
            transition: all 0.3s;
        }

        .stepper-item.active .step-counter {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 15px rgba(79, 70, 229, 0.4);
        }

        .stepper-item.completed .step-counter {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
        }

        .step-name {
            font-size: 0.75rem;
            font-weight: 600;
            color: #64748b;
            text-align: center;
        }

        .stepper-item.active .step-name {
            color: var(--primary);
            font-weight: 700;
        }

        /* Alert and Animations */
        .alarm-indicator {
            background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
            animation: pulse-danger 2s infinite;
        }

        @keyframes pulse-danger {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        /* Responsive Mobile Layout */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: -280px;
                height: 100vh;
                z-index: 1050;
                box-shadow: 10px 0 20px rgba(0,0,0,0.3);
            }
            .sidebar.show {
                left: 0;
            }
            .sidebar-overlay {
                display: none;
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(0,0,0,0.5);
                z-index: 1040;
                backdrop-filter: blur(2px);
            }
            .sidebar-overlay.show {
                display: block;
            }
            .content-area {
                padding: 1rem;
                width: 100%;
            }
            .stepper-wrapper {
                flex-wrap: wrap;
                gap: 1rem;
                justify-content: center;
            }
            .stepper-item {
                width: 30%;
                margin-bottom: 1rem;
            }
            .stepper-wrapper::before, .stepper-line-progress {
                display: none; /* Hide progress line on mobile to prevent wrapping issues */
            }
        }
        
        .mobile-header {
            background-color: var(--dark-navy);
            color: white;
            z-index: 1030;
        }
    </style>
    @stack('styles')
</head>
<body>
<!-- Mobile Header -->
<div class="mobile-header d-flex d-md-none align-items-center justify-content-between p-3 shadow-sm sticky-top">
    <a href="{{ route('dashboard') }}" class="sidebar-brand m-0">
        <i class="fa-solid fa-graduation-cap text-warning"></i>
        <span>KITA ADIA</span>
    </a>
    <button class="btn btn-outline-light btn-sm" id="sidebarToggleBtn">
        <i class="fa-solid fa-bars fs-5"></i>
    </button>
</div>

<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<div class="d-flex main-wrapper w-100" style="min-height: 100vh;">
    <!-- Sidebar -->
    <aside class="sidebar d-flex flex-column">
        <div class="sidebar-header">
            <a href="{{ route('dashboard') }}" class="sidebar-brand">
                <i class="fa-solid fa-graduation-cap text-warning"></i>
                <span>KITA AKADEMIK <span class="badge">ADIA (LLDIKTI III)</span></span>
            </a>
        </div>

        <!-- User Brief -->
        <div class="user-card">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 45px; height: 45px; font-weight: 700;">
                    {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                </div>
                <div class="overflow-hidden">
                    <h6 class="text-white mb-0 text-truncate" style="font-size: 0.9rem;">{{ auth()->user()->name }}</h6>
                    <small class="text-warning text-truncate d-block" style="font-size: 0.75rem; font-weight: 600;">
                        @if(auth()->user()->isMahasiswaDosenRole())
                            Mahasiswa / Dosen
                        @elseif(auth()->user()->isSatgasRole())
                            Satgas Kampus
                        @elseif(auth()->user()->isPenilaiRole())
                            Tim Penilai Ilmiah
                        @elseif(auth()->user()->isPsikologRole())
                            Psikolog
                        @elseif(auth()->user()->isRektorRole())
                            Rektor PTS
                        @elseif(auth()->user()->isLldiktiRole())
                            ADIA (LLDIKTI III)
                        @endif
                    </small>
                    @if(auth()->user()->pts_nama)
                        <small class="text-muted text-truncate d-block" style="font-size: 0.7rem; color: #94a3b8 !important;">{{ auth()->user()->pts_nama }}</small>
                    @endif
                </div>
            </div>
        </div>

        <!-- Navigation Menu -->
        <ul class="nav flex-column mb-auto mt-2">
            <li>
                <a href="{{ route('dashboard') }}" class="nav-link-custom {{ request()->routeIs('dashboard') ? 'active' : '' }}">
                    <i class="fa-solid fa-chart-line w-20"></i> Dashboard
                </a>
            </li>

            @if(auth()->user()->isLldiktiRole())
            <li>
                <a href="{{ route('profil.index') }}#satgas-pts" class="nav-link-custom">
                    <i class="fa-solid fa-users-viewfinder w-20"></i> Profil Satgas PTS
                </a>
            </li>
            @endif

            @if(auth()->user()->isMahasiswaDosenRole())
            <li>
                <a href="{{ route('laporan.create') }}" class="nav-link-custom {{ request()->routeIs('laporan.create') ? 'active' : '' }}">
                    <i class="fa-solid fa-file-circle-plus w-20"></i> Ajukan Laporan/KITA
                </a>
            </li>
            @endif

            <li>
                <a href="{{ route('laporan.index') }}" class="nav-link-custom {{ request()->routeIs('laporan.index') || request()->routeIs('laporan.show') ? 'active' : '' }}">
                    <i class="fa-solid fa-file-shield w-20"></i> Daftar Laporan/Kasus
                </a>
            </li>

            <li>
                <a href="{{ route('profil.index') }}" class="nav-link-custom {{ request()->routeIs('profil.index') ? 'active' : '' }}">
                    <i class="fa-solid fa-circle-info w-20"></i> Profil ADIA (LLDIKTI III)
                </a>
            </li>
        </ul>

        <!-- Logout Button -->
        <div class="p-3 border-top border-secondary mt-auto">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="btn btn-danger w-100 py-2 d-flex align-items-center justify-content-center gap-2" style="border-radius: 8px; font-weight: 600;">
                    <i class="fa-solid fa-right-from-bracket"></i> Logout
                </button>
            </form>
        </div>
    </aside>

    <!-- Main Content Area -->
    <main class="content-area">
        <!-- Toast Notification Area / Flash Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm p-3 mb-4 rounded-3 d-flex align-items-center justify-content-between gap-2" role="alert">
                <div class="d-flex align-items-center gap-2">
                    <i class="fa-solid fa-circle-check text-success fs-5"></i>
                    <div>{{ session('success') }}</div>
                </div>
                
                @if(session('wa_link'))
                    <a href="{{ session('wa_link') }}" target="_blank" class="btn btn-success btn-sm fw-bold shadow-sm d-flex align-items-center gap-2" style="background-color: #25D366; border-color: #25D366;">
                        <i class="fa-brands fa-whatsapp fs-5"></i> Kirim ke WhatsApp
                    </a>
                    <script>
                        window.onload = function() {
                            window.open("{{ session('wa_link') }}", '_blank');
                        };
                    </script>
                @endif

                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm p-3 mb-4 rounded-3 d-flex align-items-center gap-2" role="alert">
                <i class="fa-solid fa-triangle-exclamation text-danger fs-5"></i>
                <div>{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm p-3 mb-4 rounded-3" role="alert">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <i class="fa-solid fa-circle-xmark text-danger fs-5"></i>
                    <strong class="text-danger">Terjadi Kesalahan Pengisian:</strong>
                </div>
                <ul class="mb-0 ps-3 text-danger">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

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

<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- Mobile Sidebar Toggle Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sidebar = document.querySelector('.sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const toggleBtn = document.getElementById('sidebarToggleBtn');

        if (toggleBtn && sidebar && overlay) {
            toggleBtn.addEventListener('click', function() {
                sidebar.classList.add('show');
                overlay.classList.add('show');
                document.body.style.overflow = 'hidden'; // Prevent background scrolling
            });
            
            overlay.addEventListener('click', function() {
                sidebar.classList.remove('show');
                overlay.classList.remove('show');
                document.body.style.overflow = '';
            });
        }
    });
</script>

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