@php
    use Illuminate\Support\Facades\Auth;

    $currentRoute = Route::currentRouteName();

    $titles = [
        'dashboard' => 'Dashboard',
        'barang' => 'Daftar Barang',
        'inventaris' => 'Inventaris',
        'lokasi' => 'Daftar Gedung & Ruangan',
        'inventaris.barang-rusak' => 'Barang Rusak',
        'inventaris.barang-habis-masa-pakai' => 'Barang Habis Masa Pakai',
        'gudang' => 'Gudang Inventaris',
        'riwayat-mutasi' => 'Riwayat Mutasi',
        'arsip-aset' => 'Arsip Aset',
        'peminjaman' => 'Pemakaian',
        'panduan' => 'Panduan Sistem',

        // Halaman Profil
        'profile' => 'Profil Administrator',
    ];

    $pageTitle = $titles[$currentRoute] ?? match (true) {
        request()->routeIs('lokasi.detail') => 'Detail Lokasi',
        request()->routeIs('barang.detail') => 'Detail Barang',
        request()->routeIs('barang.edit') => 'Edit Barang',
        request()->routeIs('barang.tambah') => 'Tambah Barang',
        request()->routeIs('inventaris.detail') => 'Detail Inventaris',
        request()->routeIs('inventaris.pemeriksaan') => 'Pemeriksaan Inventaris',
        request()->routeIs('inventaris.tambah') => 'Tambah Inventaris',
        request()->routeIs('inventaris.edit') => 'Edit Inventaris',
        request()->routeIs('gudang.tambah') => 'Tambah Gudang',
        request()->routeIs('gudang.*') => 'Gudang Inventaris',
        request()->routeIs('peminjaman.detail', 'peminjaman.show') => 'Detail Pemakaian',
        request()->routeIs('panduan.*') => 'Panduan Sistem',
        default => 'Dashboard',
    };

    $admin = Auth::user();
@endphp
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<header class="header">

    <div class="header-left">
        <button class="menu-toggle-btn" id="menuToggle">
            <i class="fa-solid fa-bars"></i>
        </button>

        <div class="page-title">
            {{ $pageTitle }}
        </div>

        <div class="page-datetime">
            <span id="currentDate"></span>
            <span class="dot">•</span>
            <span id="currentTime"></span>
        </div>

    </div>

    <div class="header-right">

        <button type="button" id="installAdminApp" class="pwa-install-button" hidden>
            <i class="fa-solid fa-download"></i>
            Pasang Aplikasi
        </button>

        <div class="profile-dropdown">

            <div class="profile-menu">

                <div class="avatar">

                    @if ($admin && !empty($admin->foto) && file_exists(public_path('assets/images/admin/' . $admin->foto)))
                        <img src="{{ asset('assets/images/admin/' . $admin->foto) }}" alt="{{ $admin->nama_lengkap }}">
                    @else
                        <i class="bi bi-person-circle"></i>
                    @endif

                </div>

                <div class="profile-info">

                    <div class="profile-name">
                        {{ $admin->nama_lengkap ?? 'Administrator' }}
                    </div>

                    <div class="profile-role">
                        Administrator
                    </div>

                </div>

                <i class="bi bi-chevron-down arrow"></i>

            </div>

            <div class="dropdown-menu">

                <a href="{{ route('profile') }}">
                    <i class="bi bi-person"></i>
                    Lihat Profil
                </a>

                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button type="submit" class="logout-btn">
                        <i class="bi bi-box-arrow-right"></i> Logout
                    </button>
                </form>

            </div>

        </div>
    </div>

</header>

<script>
    function updateDateTime() {

        const now = new Date();

        const dateOptions = {
            weekday: 'long',
            day: 'numeric',
            month: 'long',
            year: 'numeric'
        };

        const timeOptions = {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };

        document.getElementById('currentDate').innerHTML =
            now.toLocaleDateString('id-ID', dateOptions);

        document.getElementById('currentTime').innerHTML =
            now.toLocaleTimeString('id-ID', timeOptions);

    }

    updateDateTime();

    setInterval(updateDateTime, 1000);
</script>

<script>
    let deferredAdminInstallPrompt;
    const adminInstallButton = document.getElementById('installAdminApp');

    window.addEventListener('beforeinstallprompt', event => {
        event.preventDefault();
        deferredAdminInstallPrompt = event;

        if (!window.matchMedia('(display-mode: standalone)').matches && adminInstallButton) {
            adminInstallButton.hidden = false;
        }
    });

    adminInstallButton?.addEventListener('click', async () => {
        if (!deferredAdminInstallPrompt) return;

        deferredAdminInstallPrompt.prompt();
        await deferredAdminInstallPrompt.userChoice;
        deferredAdminInstallPrompt = null;
        adminInstallButton.hidden = true;
    });

    window.addEventListener('appinstalled', () => {
        if (adminInstallButton) adminInstallButton.hidden = true;
    });
</script>







<script>
   const toggle = document.getElementById("menuToggle");

const sidebar = document.querySelector(".sidebar");

const overlay = document.getElementById("sidebarOverlay");

toggle.addEventListener("click", function () {

    if(window.innerWidth <= 768){

        sidebar.classList.add("show");
        overlay.classList.add("show");

    }else{

        sidebar.classList.toggle("collapsed");

        if(sidebar.classList.contains("collapsed")){

            localStorage.setItem("sidebar","collapsed");

        }else{

            localStorage.setItem("sidebar","normal");

        }

    }

});

overlay.onclick = function(){

    sidebar.classList.remove("show");

    overlay.classList.remove("show");

}
</script>