<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace(); // Perintah untuk memproses semua tag [data-feather]
</script>

<section class="bg-white shadow-md z-50">
    <header>
        {{-- Kontainer Utama: flex-col (Vertikal) di Mobile, flex-row (Horizontal) di Desktop --}}
        <div class="container mx-auto px-4 py-1 flex flex-col md:flex-row md:justify-between md:items-center">

            @php $profil = \App\Models\VillageProfile::first(); @endphp
            {{-- BARIS 1 (MOBILE): Logo dan Teks Judul (Kiri) --}}
            <div class="flex items-center space-x-3 mb-2 md:mb-2 mt-2">
                @php $logoUrl = $profil && $profil->logo_kabupaten ? asset('storage/' . $profil->logo_kabupaten) : asset('images/logo-kabupaten.png'); @endphp
                @if ($logoUrl)
                    <img src="{{ $logoUrl }}" alt="Logo Kabupaten"
                         class="h-10 md:h-14 w-auto object-contain">
                @endif
                <div>
                    <h2 class="text-lg md:text-2xl font-bold text-blue-900 leading-tight">Selamat Datang di Website Resmi Desa Cemara</h2>
                </div>
            </div>

            {{-- BARIS 2 (MOBILE): Tanggal (Kiri) dan Login (Kanan) --}}
            {{-- PENTING: w-full agar mengisi penuh lebar kontainer, dan justify-between untuk memisahkan elemen --}}
            <div
                class="w-full flex justify-between items-center text-blue-900 font-medium text-sm md:w-auto md:space-x-4 md:text-base mb-2 mt-2">

                {{-- Gunakan space-x-1 untuk merapatkan ikon dan teks di mobile --}}
                <div class="flex items-center space-x-1">
                    <i class="far fa-calendar-alt"></i>
                    <span id="currentDateTime"></span>
                </div>
                <!-- 
                <a href="#"
                    class="flex items-center space-x-2 cursor-pointer hover:text-blue-600 transition-colors">
                    <i class="fas fa-user-circle text-lg"></i>
                    <span>Login</span>
                </a> -->
            </div>
        </div>
    </header>
</section>

<nav class="bg-blue-900 text-white sticky top-0 z-50" x-data="{ menuOpen: false }">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-2">

            <div class="flex items-center space-x-4">
                @if ($logoUrl)
                    <a href="/">
                        <img src="{{ $logoUrl }}" alt="Logo Kabupaten"
                             class="h-8 md:h-10 w-auto object-contain">
                    </a>
                @endif

                <div :class="menuOpen ? 'block' : 'hidden'"
                    class="w-full md:flex md:items-center md:space-x-1 md:w-auto absolute md:static left-0 top-full bg-blue-900 md:bg-transparent px-4 md:px-0 pb-4 md:pb-0 shadow-lg md:shadow-none">

                    @php
                        $currentRoute = request()->path();
                    @endphp

                    <a href="/"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ $currentRoute === '/' ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-home"></i>
                        <span>Home</span>
                    </a>
                    <a href="/profildesa"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ $currentRoute === 'profildesa' ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-user"></i>
                        <span>Profil Desa</span>
                    </a>
                    <a href="/berita"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ request()->is('berita*') ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-newspaper"></i>
                        <span>Portal Berita</span>
                    </a>
                    <a href="/layanan"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ $currentRoute === 'layanan' ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-info-circle"></i>
                        <span>Informasi Layanan</span>
                    </a>
                    <a href="/pengajuan-surat"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ request()->is('pengajuan-surat*') ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-file-alt"></i>
                        <span>Pengajuan Surat</span>
                    </a>
                    <a href="/pengaduan"
                        class="flex items-center space-x-1 text-sm px-3 py-2 rounded transition duration-300 {{ request()->is('pengaduan*') ? 'bg-blue-700 text-white' : 'hover:bg-blue-700' }}">
                        <i class="fas fa-book"></i>
                        <span>Pengaduan</span>
                    </a>
                </div>
            </div>

            <!-- Kanan: Form Pencarian -->
            <div class="hidden md:flex items-center space-x-2">
                <form action="/berita" method="GET" class="flex items-center space-x-2">
                    <input type="text" name="search" placeholder="Cari berita..."
                        value="{{ request('search') }}"
                        class="px-4 py-1.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-gray-800 text-sm w-48">
                    <button type="submit" class="p-2 bg-blue-800 hover:bg-blue-600 rounded-lg transition duration-300">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>

            <!-- Tombol Menu Mobile -->
            <button @click="menuOpen = !menuOpen"
                class="md:hidden p-2 hover:bg-blue-700 rounded transition duration-300">
                <i class="fas fa-bars" :class="menuOpen ? 'fas fa-times' : 'fas fa-bars'"></i>
            </button>

        </div>
    </div>
</nav>


<script>
    // Fungsi untuk memperbarui tanggal dan waktu
    function updateDateTime() {
        const now = new Date();

        // Nama hari dalam bahasa Indonesia
        const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
        const dayName = days[now.getDay()];

        // Nama bulan dalam bahasa Indonesia
        const months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
        ];
        const monthName = months[now.getMonth()];

        // Format tanggal
        const date = now.getDate();
        const year = now.getFullYear();

        // Format waktu dengan leading zero
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        // Gabungkan semua format
        const formattedDateTime = `${dayName}, ${date} ${monthName} ${year}, ${hours}:${minutes}:${seconds}`;

        // Update elemen HTML
        document.getElementById('currentDateTime').textContent = formattedDateTime;
    }

    // Panggil fungsi pertama kali
    updateDateTime();

    // Update setiap detik
    setInterval(updateDateTime, 1000);
</script>