<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPNI DPK Rumah Sakit BaliMéd Denpasar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-slate-100 text-slate-800">

    <!-- Topbar -->
    <div class="bg-blue-950 text-blue-100 text-sm">
        <div class="max-w-7xl mx-auto px-4 py-2 flex flex-col md:flex-row justify-between gap-2">
            <div>PPNI DPK Rumah Sakit BaliMéd Denpasar</div>
            <div class="flex items-center gap-4">
                <span>Email: info@ppnibalimed.org | Telp: 08xxxxxxxxxx</span>

                @guest
                    <a href="{{ route('login') }}" class="text-white hover:underline">Admin</a>
                @else
                    <a href="{{ route('admin.dashboard') }}" class="text-white hover:underline">Dashboard</a>
                @endguest
            </div>
        </div>
    </div>

    <!-- Navbar -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <img src="{{ asset('assets/images/logo-ppni.png') }}" alt="Logo PPNI"
                    class="w-14 h-14 object-contain rounded-full bg-white shadow-sm p-1">

                <div>
                    <h1 class="text-xl font-bold text-blue-900">PPNI DPK BaliMéd</h1>
                    <p class="text-sm text-slate-500">Rumah Sakit BaliMéd Denpasar</p>
                </div>
            </div>

            <<div class="hidden md:flex items-center gap-6 text-sm font-medium">
                <a href="/" class="text-blue-900 hover:text-blue-600">Beranda</a>
                <a href="/tentang" class="text-slate-700 hover:text-blue-600">Tentang</a>
                <a href="/visi-misi" class="text-slate-700 hover:text-blue-600">Visi Misi</a>
                <a href="/struktur-organisasi" class="text-slate-700 hover:text-blue-600">Struktur</a>
                <a href="/berita" class="text-slate-700 hover:text-blue-600">Berita</a>
                <a href="/agenda" class="text-slate-700 hover:text-blue-600">Agenda</a>
                <a href="/galeri" class="text-slate-700 hover:text-blue-600">Galeri</a>
                <a href="/kontak" class="text-slate-700 hover:text-blue-600">Kontak</a>

                @auth
                    <a href="{{ route('admin.dashboard') }}"
                        class="bg-blue-900 text-white px-4 py-2 rounded-xl hover:bg-blue-800">
                        Dashboard
                    </a>
                @else
                    <a href="{{ route('login') }}" class="bg-blue-900 text-white px-4 py-2 rounded-xl hover:bg-blue-800">
                        Masuk Admin
                    </a>
                @endauth
        </div>
        </div>
    </nav>

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

    <!-- Footer -->
    <footer class="bg-blue-950 text-white mt-16">
        <div>
            <div class="flex items-center gap-3 mb-3">
                <img src="{{ asset('assets/images/logo-ppni.png') }}" alt="Logo PPNI"
                    class="w-12 h-12 object-contain rounded-full bg-white p-1">
                <h3 class="text-xl font-bold">PPNI DPK BaliMéd</h3>
            </div>

            <p class="text-blue-100 leading-7">
                Media informasi resmi organisasi profesi perawat di lingkungan
                Rumah Sakit BaliMéd Denpasar.
            </p>
        </div>

        <div>
            <h3 class="text-lg font-semibold mb-3">Menu Cepat</h3>
            <ul class="space-y-2 text-blue-100">
                <li><a href="/" class="hover:text-white">Beranda</a></li>
                <li><a href="/tentang" class="hover:text-white">Tentang</a></li>
                <li><a href="/berita" class="hover:text-white">Berita</a></li>
                <li><a href="/galeri" class="hover:text-white">Galeri</a></li>
                <li><a href="/kontak" class="hover:text-white">Kontak</a></li>
            </ul>
        </div>

        <div>
            <h3 class="text-lg font-semibold mb-3">Kontak</h3>
            <div class="text-blue-100 leading-7">
                <p>Rumah Sakit BaliMéd Denpasar</p>
                <p>Denpasar, Bali</p>
                <p>Email: info@ppnibalimed.org</p>
                <p>Telp: 08xxxxxxxxxx</p>
            </div>
        </div>
        </div>

        <div class="border-t border-blue-900">
            <div class="max-w-7xl mx-auto px-4 py-4 text-sm text-blue-200 text-center">
                © {{ date('Y') }} PPNI DPK Rumah Sakit BaliMéd Denpasar. All rights reserved.
            </div>
        </div>
    </footer>

</body>

</html>