@php
    $userName = Auth::user()->name ?? '';
    $initials = strtoupper(
        collect(preg_split('/\s+/', trim($userName)))
            ->filter()
            ->take(2)
            ->map(fn($word) => \Illuminate\Support\Str::substr($word, 0, 1))
            ->join(''),
    );
@endphp

<header class="pc-header">
    <div class="header-wrapper">
        <div class="me-auto pc-mob-drp">
            <ul class="list-unstyled mb-0 d-flex align-items-center">
                <li class="pc-h-item pc-sidebar-collapse">
                    <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
                        <i class="ti ti-menu-2"></i>
                    </a>
                </li>
                <li class="pc-h-item pc-sidebar-popup">
                    <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
                        <i class="ti ti-menu-2"></i>
                    </a>
                </li>
                <li class="pc-h-item d-none d-md-inline-flex align-items-center" style="margin-left: 2px;">
                    <div class="search-wrapper" style="width: 250px; text-align: center;">
                        <div id="datetime-display" style="font-weight: 500; font-size: 14px;"></div>
                    </div>
                </li>
                <li class="pc-h-item d-none d-md-inline-flex align-items-center ms-2">
                    <a href="{{ route('attendance.session.show', ['sessionId' => 1]) }}"
                        class="btn btn-sm btn-light border d-inline-flex align-items-center gap-1" target="_blank"
                        rel="noopener noreferrer">
                        <i class="ti ti-qrcode"></i>
                        <span>QR Absensi</span>
                    </a>
                </li>

            </ul>
        </div>


        <div class="ms-auto">
            <ul class="list-unstyled">
                <li class="dropdown pc-h-item header-user-profile">
                    <a class="pc-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#"
                        role="button">
                        <span
                            class="user-avtar d-inline-flex align-items-center justify-content-center fw-semibold text-white bg-secondary">{{ $initials }}</span>
                        <span>{{ Auth::user()->name }}</span>
                    </a>
                    <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
                        <div class="dropdown-header d-flex align-items-center justify-content-between">
                            <div class="d-flex mb-1">
                                <div class="shrink-0">
                                    <span
                                        class="user-avtar wid-35 d-inline-flex align-items-center justify-content-center fw-semibold text-white bg-secondary">{{ $initials }}</span>
                                </div>
                                <div class="grow ms-3">
                                    <h6 class="mb-1">{{ Auth::user()->name }}</h6>
                                    <span>{{ Auth::user()->role }}</span>
                                </div>
                            </div>
                        </div>

                        <a href="{{ route('logout') }}" class="dropdown-item" data-logout-trigger="true"><i
                                class="ti ti-logout" style="color: red;"></i><span>Keluar
                                Aplikasi</span></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</header>

@push('scripts')
    <script>
        document.addEventListener('click', function(e) {
            const logoutTrigger = e.target.closest('[data-logout-trigger]');

            if (!logoutTrigger) {
                return;
            }

            e.preventDefault();

            if (typeof Swal === 'undefined') {
                window.location.href = logoutTrigger.getAttribute('href');
                return;
            }

            Swal.fire({
                title: 'Logout sekarang?',
                text: 'Sesi login Anda akan diakhiri.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, logout',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#b91c1c',
                cancelButtonColor: '#6b7280',
                reverseButtons: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = logoutTrigger.getAttribute('href');
                }
            });
        });

        function updateDateTime() {
            const display = document.getElementById("datetime-display");
            const now = new Date();

            // Format nama hari & bulan dalam bahasa Indonesia
            const hariList = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
            const bulanList = ["Januari", "Februari", "Maret", "April", "Mei", "Juni",
                "Juli", "Agustus", "September", "Oktober", "November", "Desember"
            ];

            const hari = hariList[now.getDay()];
            const tanggal = now.getDate();
            const bulan = bulanList[now.getMonth()];
            const tahun = now.getFullYear();

            const jam = String(now.getHours()).padStart(2, "0");
            const menit = String(now.getMinutes()).padStart(2, "0");
            const detik = String(now.getSeconds()).padStart(2, "0");

            // Format: Senin, 27 Oktober 2025 | 11:45:30
            display.textContent = `${hari}, ${tanggal} ${bulan} ${tahun} | ${jam}:${menit}:${detik}`;
        }

        // Update setiap detik
        setInterval(updateDateTime, 1000);
        updateDateTime(); // Panggil pertama kali
    </script>
@endpush