<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@yield('title', 'ISPA Prediction')</title>
    <link rel="icon" href="{{ asset('images/lungs.png') }}" type="image/png" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        body, html {
            font-family: 'Poppins', sans-serif !important;
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: #f0f4ff;
        }

        /* Appbar */
        .appbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: #fff;
            color: #000;
            display: flex;
            align-items: center;
            padding: 0 1rem;
            box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
            z-index: 1050;
        }

        .hamburger-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin-right: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 24px;
            height: 20px;
        }

        .hamburger-btn span {
            display: block;
            width: 24px;
            height: 3px;
            background-color: #000;
            border-radius: 2px;
        }

        .appbar-logo {
            height: 36px; /* Sedikit lebih besar agar proporsional */
            margin-right: 0.75rem;
            object-fit: contain;
        }

        .title {
            font-family: 'Fredoka One', cursive !important;
            font-weight: 700;
            font-size: 1.5rem;
            /* Warna gradasi menggunakan background image + text-fill */
            background: linear-gradient(90deg, #1e90ff, #00c6ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /* Tambahkan shadow agar lebih menonjol */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            user-select: none;
        }
        /* Sidebar */
        .sidebar {
            position: fixed;
            top: 30px; /* di bawah appbar */
            left: 0;
            width: 240px;
            height: calc(100vh - 56px);
            background-color: #fff;
            padding: 2rem 1rem;
            color: #000;
            overflow-y: auto;
            transition: all 0.3s ease;
            z-index: 1040;
        }
        .sidebar.collapsed {
            width: 0;
            padding: 0;
            overflow: hidden;
            display: none;
        }
        .sidebar .logo {
            font-weight: bold;
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }
        .sidebar .nav-link {
            color: #333;
            padding: 0.75rem 1rem;
            display: block;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            background-color: transparent;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        .sidebar .nav-link.active,
        .sidebar .nav-link:hover {
            background-color: rgb(80, 134, 215);
            color: white !important;
        }

        /* Main content */
        .main-content {
            margin-left: 240px;
            padding: 2rem;
            padding-top: 72px; /* space bawah appbar */
            transition: margin-left 0.3s ease;
        }
        .main-content.full-width {
            margin-left: 0;
        }
    </style>
</head>
<body>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
@endif

@php
    $isLoginPage = Request::is('login');
@endphp

@if ($isLoginPage)
    {{-- Halaman login tanpa sidebar --}}
    <div class="full-width-content d-flex justify-content-center align-items-center" style="min-height:100vh;">
        @yield('content')
    </div>
@else
    <div>
        @auth
          <header class="appbar">
    <button id="hamburger-btn" class="hamburger-btn" aria-label="Toggle Sidebar" aria-expanded="true" aria-controls="sidebar">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <img src="{{ asset('images/pantauispa.png') }}" alt="Logo" class="appbar-logo" />
    <div class="title">pantauISPA</div>

    {{-- Profil icon kanan dengan dropdown --}}
    <div class="dropdown ms-auto">
        <a class="nav-link dropdown-toggle p-0" href="#" role="button" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false" style="display:flex; align-items:center;">
            <i class="fas fa-user-circle fa-2x" style="color:#1e90ff;"></i> <!-- Warna biru yang sama dengan gradasi tulisan -->
        </a>

        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
            <li><a class="dropdown-item" href="{{ route('admin.edit', auth()->user()->id) }}"><i class="bi bi-pencil-square me-2"></i> Edit Profile</a></li>
            <li><hr class="dropdown-divider"></li>
            <li>
                <form id="logout-form" action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="dropdown-item text-danger">
                        <i class="bi bi-box-arrow-right me-2"></i> Logout
                    </button>
                </form>
            </li>
        </ul>
    </div>
</header>


            {{-- Sidebar --}}
            <nav class="sidebar" id="sidebar">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="{{ route('admin.dashboard') }}"
                            class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                            <i class="bi bi-house-door me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                       <a href="{{ route('admin.data-latih') }}"
                            class="nav-link {{ request()->is('admin/data-latih*') || request()->is('data-latih/*/edit') ? 'active' : '' }}">
                            <i class="bi bi-bar-chart me-2"></i> Dataset
                            </a>
                    </li>
                    <li class="nav-item">
                            <a href="{{ route('admin.uji-data') }}"
                               class="nav-link {{ request()->is('admin/uji-data') || request()->is('uji/proses') ? 'active' : '' }}">
                                <i class="bi bi-check-circle me-2"></i> Modelling
                            </a>
                        </li>
                    <li class="nav-item">
                        <a href="{{ route('admin.prediksi.index') }}"
                            class="nav-link {{ request()->routeIs('admin.prediksi.index') ? 'active' : '' }}">
                            <i class="bi bi-lightning me-2"></i> Hasil Prediksi
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#dataMenu" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ request()->routeIs('admin.users.*') || request()->routeIs('admin.kabupaten.*') || request()->routeIs('admin.kasus.*') ? 'true' : 'false' }}"
                            aria-controls="dataMenu"
                            class="nav-link d-flex justify-content-between align-items-center {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.kabupaten.*') || request()->routeIs('admin.kasus.*') ? 'active' : 'collapsed' }}">
                            <span><i class="bi bi-archive me-2"></i> Data</span>
                            <i class="bi bi-chevron-down"></i>
                        </a>
                        <div class="collapse {{ request()->routeIs('admin.users.*') || request()->routeIs('admin.kabupaten.*') || request()->routeIs('admin.kasus.*') ? 'show' : '' }}" id="dataMenu">
                            <ul class="nav flex-column ms-3">
                                <li class="nav-item">
                                    <a href="{{ route('admin.users.index') }}" 
                                    class="nav-link {{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                                        <i class="bi bi-people-fill me-2"></i> Users
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.kabupaten.index') }}" 
                                    class="nav-link {{ request()->routeIs('admin.kabupaten.*') ? 'active' : '' }}">
                                        <i class="bi bi-house-door me-2"></i> Kecamatan
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('admin.kasus.index') }}" 
                                    class="nav-link {{ request()->routeIs('admin.kasus.*') ? 'active' : '' }}">
                                        <i class="bi bi-file-bar-graph me-2"></i> Data Kasus
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li class="nav-item mt-auto">
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:none;">
                            @csrf
                        </form>
                        <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="nav-link text-danger">
                            <i class="bi bi-box-arrow-right me-2"></i> Logout
                        </a>
                    </li>
                </ul>
            </nav>
        @endauth

        <main class="main-content" id="main-content">
            @yield('content')
        </main>
    </div>
@endif

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const sidebar = document.getElementById('sidebar');
        const hamburgerBtn = document.getElementById('hamburger-btn');
        const mainContent = document.getElementById('main-content');

        hamburgerBtn.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.toggle('collapsed');

            // Sesuaikan margin main content
            if (isCollapsed) {
                mainContent.classList.add('full-width');
            } else {
                mainContent.classList.remove('full-width');
            }

            // Update aria-expanded untuk aksesibilitas
            hamburgerBtn.setAttribute('aria-expanded', !isCollapsed);
        });
    });
</script>

</body>
</html>
