<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>SEHATI</title>
    <link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.ico') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('css/layout.css') }}">

    @stack('styles')
</head>

<body>
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container py-2">
            <a class="navbar-brand" href="{{ url('/') }}">
                <img src="{{ asset('img/sehati-logo.png') }}" alt="Logo SEHATI" class="navbar-logo">
                SEHATI
            </a>

            <!-- Hamburger -->
            <button class="navbar-toggler" type="button"
                    data-bs-toggle="collapse" data-bs-target="#navbarMenu"
                    aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="hamburger-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </button>

            <!-- Menu -->
            <div class="collapse navbar-collapse" id="navbarMenu">
                <ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#home">Home</a></li>
                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#tentang">Tentang</a></li>
                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#penyakit">Penyakit</a></li>
                    <li class="nav-item"><a class="nav-link mx-1" href="{{ url('/') }}#gejala">Gejala</a></li>
                    <li class="nav-item mt-2 mt-lg-0 ms-lg-2">
                        @auth
                            <div class="dropdown">
                                <button class="nav-profil-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <div class="nav-profil-avatar">
                                        {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                                    </div>
                                    <span class="nav-profil-name d-none d-lg-inline">{{ Str::limit(Auth::user()->name, 8) }}</span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end nav-dropdown">
                                    <li>
                                        <a class="dropdown-item nav-dropdown-item" href="{{ route('riwayat.prediksi') }}">
                                            <i class="fa-solid fa-clock-rotate-left"></i>
                                            Riwayat Prediksi
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider nav-dropdown-divider"></li>
                                    <li>
                                        <form action="{{ route('logout') }}" method="POST">
                                            @csrf
                                            <button type="submit" class="dropdown-item nav-dropdown-item nav-dropdown-logout">
                                                <i class="fa-solid fa-right-from-bracket"></i>
                                                Logout
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </div>
                        @endauth

                        @guest
                            <a class="nav-link nav-btn-login" href="{{ route('login') }}">Login</a>
                        @endguest
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    @yield('content')

    <footer>
        <small>&copy; 2026 SEHATI &mdash; Sistem Prediksi</small>
    </footer>

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