{{-- =========================================================
     SUPER ADMIN HEADER
========================================================= --}}

@php
    /*
    |--------------------------------------------------------------------------
    | DATA SUPER ADMIN AKTIF
    |--------------------------------------------------------------------------
    | Ambil data langsung dari database berdasarkan ID yang tersimpan
    | di session. Dengan cara ini foto profil tetap terbaca meskipun
    | session foto belum diperbarui.
    */

    $headerSuperAdmin = null;

    if (session()->has('super_admin_id')) {
        $headerSuperAdmin = \App\Models\SuperAdmin::find(
            session('super_admin_id')
        );
    }

    /*
    |--------------------------------------------------------------------------
    | DATA HEADER
    |--------------------------------------------------------------------------
    */

    $headerUsername = $headerSuperAdmin?->username
        ?? session('super_admin_username', 'Super Admin');

    $headerFoto = $headerSuperAdmin?->foto_profil;

    $headerPageTitle = trim((string) View::yieldContent('page-title'));

    if ($headerPageTitle === '') {
        $headerPageTitle = trim((string) View::yieldContent('title', 'Dashboard'));
    }
@endphp



<header class="super-header" id="superHeader">

    {{-- =====================================================
         LEFT
    ====================================================== --}}
    <div class="header-left">

        {{-- SIDEBAR TOGGLE --}}
        <button
            type="button"
            class="header-menu-button"
            id="sidebarToggle"
            aria-label="Buka menu"
            title="Buka menu"
        >
            <i class="fa-solid fa-bars"></i>
        </button>


        {{-- PAGE INFORMATION --}}
        <div class="header-page-info">

            <h1 class="header-page-title">

                @if(request()->routeIs('superadmin.admin.*'))

                    Monitoring Akun Admin

                @else

                    {{ $headerPageTitle ?: 'Dashboard' }}

                @endif

            </h1>


            <div class="header-meta">

                <span
                    class="header-date"
                    id="headerDate"
                >
                    {{ now()->locale('id')->translatedFormat('l, d F Y') }}
                </span>


                <span class="header-separator">
                    •
                </span>


                <span
                    class="header-time"
                    id="headerTime"
                >
                    {{ now()->format('H.i.s') }}
                </span>

            </div>

        </div>

    </div>



    {{-- =====================================================
         RIGHT
    ====================================================== --}}
    <div class="header-right">

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

        <div
            class="header-profile"
            id="headerProfile"
        >

            {{-- =================================================
                 AVATAR HEADER
            ================================================== --}}
            <div class="header-profile-avatar">

                @if($headerFoto)

                    <img
                        src="{{ asset('storage/' . $headerFoto) }}"
                        alt="Foto Profil {{ $headerUsername }}"
                        class="header-profile-image"
                        onerror="
                            this.style.display='none';
                            this.parentElement
                                .querySelector('.header-profile-fallback')
                                .style.display='flex';
                        "
                    >

                    <i
                        class="fa-solid fa-user-tie header-profile-fallback"
                        style="display:none;"
                    ></i>

                @else

                    <i class="fa-solid fa-user-tie"></i>

                @endif

            </div>



            {{-- =================================================
                 PROFILE INFO
            ================================================== --}}
            <div class="header-profile-info">

                <span class="header-profile-name">

                    {{ $headerUsername }}

                </span>


                <span class="header-profile-role">

                    Super Administrator

                </span>

            </div>



            {{-- =================================================
                 DROPDOWN BUTTON
            ================================================== --}}
            <button
                type="button"
                class="header-profile-arrow"
                id="profileDropdownToggle"
                aria-label="Menu profil"
                aria-expanded="false"
            >

                <i class="fa-solid fa-chevron-down"></i>

            </button>

        </div>



        {{-- =================================================
             PROFILE DROPDOWN
        ================================================== --}}
        <div
            class="header-profile-dropdown"
            id="profileDropdown"
        >

            {{-- =================================================
                 DROPDOWN HEADER
            ================================================== --}}
            <div class="profile-dropdown-header">

                {{-- AVATAR DROPDOWN --}}
                <div class="profile-dropdown-avatar">

                    @if($headerFoto)

                        <img
                            src="{{ asset('storage/' . $headerFoto) }}"
                            alt="Foto Profil {{ $headerUsername }}"
                            class="profile-dropdown-image"
                            onerror="
                                this.style.display='none';
                                this.parentElement
                                    .querySelector('.profile-dropdown-fallback')
                                    .style.display='flex';
                            "
                        >

                        <i
                            class="fa-solid fa-user-tie profile-dropdown-fallback"
                            style="display:none;"
                        ></i>

                    @else

                        <i class="fa-solid fa-user-tie"></i>

                    @endif

                </div>


                {{-- DATA PROFILE --}}
                <div>

                    <strong>

                        {{ $headerUsername }}

                    </strong>


                    <span>

                        Super Administrator

                    </span>

                </div>

            </div>



            {{-- =================================================
                 DIVIDER
            ================================================== --}}
            <div class="profile-dropdown-divider"></div>



            {{-- =================================================
                 PROFIL
            ================================================== --}}
            <a
                href="{{ route('superadmin.profile') }}"
                class="
                    profile-dropdown-item
                    {{ request()->routeIs('superadmin.profile') ? 'active' : '' }}
                "
            >

                <i class="fa-solid fa-user"></i>

                <span>
                    Profil Super Admin
                </span>

            </a>



            {{-- =================================================
                 DIVIDER
            ================================================== --}}
            <div class="profile-dropdown-divider"></div>



            {{-- =================================================
                 LOGOUT
            ================================================== --}}
            <a
                href="{{ route('superadmin.logout') }}"
                class="profile-dropdown-item logout"
                onclick="
                    event.preventDefault();
                    document
                        .getElementById('super-admin-logout-form')
                        .submit();
                "
            >

                <i class="fa-solid fa-right-from-bracket"></i>

                <span>
                    Logout
                </span>

            </a>

        </div>

    </div>

</header>



{{-- =========================================================
     LOGOUT FORM
========================================================= --}}

<form
    id="super-admin-logout-form"
    action="{{ route('superadmin.logout') }}"
    method="POST"
    style="display:none;"
>

    @csrf

</form>



{{-- =========================================================
     HEADER JAVASCRIPT
========================================================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    /*
    |--------------------------------------------------------------------------
    | PROFILE DROPDOWN
    |--------------------------------------------------------------------------
    */

    const profileToggle =
        document.getElementById('profileDropdownToggle');

    const profileDropdown =
        document.getElementById('profileDropdown');

    const headerProfile =
        document.getElementById('headerProfile');


    if (
        profileToggle &&
        profileDropdown &&
        headerProfile
    ) {

        /*
        |--------------------------------------------------------------------------
        | BUKA / TUTUP DROPDOWN
        |--------------------------------------------------------------------------
        */

        profileToggle.addEventListener(
            'click',
            function (event) {

                event.stopPropagation();


                const isOpen =
                    profileDropdown.classList.contains('show');


                if (isOpen) {

                    profileDropdown.classList.remove('show');

                    profileToggle.classList.remove('active');

                    profileToggle.setAttribute(
                        'aria-expanded',
                        'false'
                    );

                } else {

                    profileDropdown.classList.add('show');

                    profileToggle.classList.add('active');

                    profileToggle.setAttribute(
                        'aria-expanded',
                        'true'
                    );

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | CEGAH DROPDOWN TERTUTUP SAAT DIKLIK
        |--------------------------------------------------------------------------
        */

        profileDropdown.addEventListener(
            'click',
            function (event) {

                event.stopPropagation();

            }
        );


        /*
        |--------------------------------------------------------------------------
        | KLIK DI LUAR DROPDOWN
        |--------------------------------------------------------------------------
        */

        document.addEventListener(
            'click',
            function () {

                profileDropdown.classList.remove(
                    'show'
                );

                profileToggle.classList.remove(
                    'active'
                );

                profileToggle.setAttribute(
                    'aria-expanded',
                    'false'
                );

            }
        );

    }



    /*
    |--------------------------------------------------------------------------
    | JAM REAL-TIME
    |--------------------------------------------------------------------------
    */

    function updateHeaderTime() {

        const timeElement =
            document.getElementById('headerTime');


        if (!timeElement) {

            return;

        }


        const now = new Date();


        const hours =
            String(
                now.getHours()
            ).padStart(2, '0');


        const minutes =
            String(
                now.getMinutes()
            ).padStart(2, '0');


        const seconds =
            String(
                now.getSeconds()
            ).padStart(2, '0');


        timeElement.textContent =
            `${hours}.${minutes}.${seconds}`;

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE JAM
    |--------------------------------------------------------------------------
    */

    updateHeaderTime();


    setInterval(
        updateHeaderTime,
        1000
    );

});

</script>

<script>
    let deferredSuperAdminInstallPrompt;
    const superAdminInstallButton = document.getElementById('installSuperAdminApp');

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

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

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

        deferredSuperAdminInstallPrompt.prompt();
        await deferredSuperAdminInstallPrompt.userChoice;
        deferredSuperAdminInstallPrompt = null;
        superAdminInstallButton.hidden = true;
    });

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