@php
    use Mcamara\LaravelLocalization\Facades\LaravelLocalization;
@endphp

<header x-data="{ open: false, notificationsOpen: false }"
    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/20 dark:border-gray-700/20"
    style="margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); transition: margin-left 320ms cubic-bezier(0.2, 0.8, 0.2, 1), width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);">
    <div class="w-full px-4 py-3 flex justify-between items-center mx-auto overflow-visible" style="overflow: visible !important;">
        <a href="{{ route('home') }}">
            <div class="flex items-center gap-3">
                <span
                    class="font-bold text-2xl tracking-tight animate-slide-in bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary"></span>
            </div>
        </a>
        <nav class="hidden md:flex gap-8 items-center overflow-visible" style="overflow: visible !important;">
            <!-- Primary Navigation Menu -->
            <!-- Navigation Links -->
            <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
               
                @if (request()->is('*/siri*'))
                 @if (Auth::user()->isSuperAdmin() || Auth::user()->isDepartmentAdmin())
                     <x-nav-link :href="route('siri_benchmarks_index')" :active="request()->routeIs('siri_benchmarks_index')">
                        {{ trans('main.Benchmarks') }}
                    </x-nav-link>
                    @endif
                    <x-nav-link :href="route('siriHistory')" :active="request()->routeIs('siriHistory')">
                        {{ trans('main.History') }}
                    </x-nav-link>
                   
                @elseif (request()->is('*/cosiri*'))
                    @if (Auth::user()->isSuperAdmin() || Auth::user()->isDepartmentAdmin())
                     <x-nav-link :href="route('cosiri_benchmarks_index')" :active="request()->routeIs('cosiri_benchmarks_index')">
                        {{ trans('main.Benchmarks') }}
                    </x-nav-link>
                    @endif
                    <x-nav-link :href="route('coSiriHistory')" :active="request()->routeIs('coSiriHistory')">
                        {{ trans('main.History') }}
                    </x-nav-link>
                   
                @endif
            </div>

            <!-- Notifications Bell Icon -->
            @if (Auth::user())
            <div class="relative overflow-visible" x-data="{ open: false }" style="overflow: visible !important;">
                <button @click="open = !open" @click.away="open = false"
                    class="relative p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-full transition">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                            d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                    </svg>
                    <span id="notification-badge" style="display: none;"
                        class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center min-w-[20px]">
                        0
                    </span>
                </button>

                <!-- Notification Dropdown -->
                <div x-show="open" x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 z-[9999]"
                    style="display: none;">
                    <div class="py-1">
                        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ trans('notifications') }}</h3>
                                <button type="button" onclick="markAllAsRead(event)" class="text-xs text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">
                                    {{ trans('admin.mark_all_read') }}
                                </button>
                            </div>
                        </div>
                        <div id="notifications-list" class="max-h-96 overflow-y-auto">
                            <div class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
                                {{ trans('admin.loading_notifications') }}
                            </div>
                        </div>
                        <div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
                            <a href="{{ route('notifications.page') }}" class="text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">
                                {{ trans('admin.view_all_notifications') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endif


            <!-- Language Switcher and Dark Mode Toggle -->
            <div class="relative group">
                <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale() === 'en' ? 'fr' : 'en') }}"
                    class="flex items-center gap-1 hover:text-primary transition font-medium text-gray-800 dark:text-gray-200">
                    {{ strtoupper(LaravelLocalization::getCurrentLocale() === 'en' ? trans('welcome.fr') : trans('welcome.en')) }}
                </a>
            </div>
            <button
                @click="
                            darkMode = !darkMode; 
                            localStorage.setItem('darkMode', darkMode);
                        "
                x-init="if (localStorage.getItem('darkMode') !== null) {
                    darkMode = localStorage.getItem('darkMode') === 'true';
                }"
                class="z-[999] p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition text-gray-800 dark:text-gray-200">
                <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
                <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
            </button>

        </nav>

        <!-- Hamburger and Mobile Menu: always visible below md -->
        <div class="flex md:hidden items-center">
            <button @click="open = ! open"
                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <!-- Responsive Navigation Menu -->
        <div x-show="open" x-transition @click.away="open = false"
            class="md:hidden w-full bg-white dark:bg-gray-900 rounded-b-xl shadow-lg absolute left-0 top-full z-40">

            <!-- Mobile Language Switcher and Dark Mode Toggle -->
            <div
                class="flex items-center justify-between gap-4 px-4 py-2 border-t border-b border-gray-200 dark:border-gray-700">
                <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale() === 'en' ? 'fr' : 'en') }}"
                    class="flex items-center gap-1 hover:text-primary transition font-medium text-gray-800 dark:text-gray-200">
                    {{ strtoupper(LaravelLocalization::getCurrentLocale() === 'en' ? trans('welcome.fr') : trans('welcome.en')) }}
                </a>
                <button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode);"
                    x-init="if (localStorage.getItem('darkMode') !== null) { darkMode = localStorage.getItem('darkMode') === 'true'; }"
                    class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition text-gray-800 dark:text-gray-200">
                    <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                    </svg>
                    <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                </button>
            </div>
            <div class="pt-2 pb-3 space-y-1">
                <x-responsive-nav-link :href="route('home')" :active="request()->routeIs('home')">
                    {{ trans('main.Dashboard') }}
                </x-responsive-nav-link>
                @if (request()->is('*siri*'))
                    <x-responsive-nav-link :href="route('siriHistory')" :active="request()->routeIs('siriHistory')">
                        {{ trans('main.History') }}
                    </x-responsive-nav-link>
                @endif
                @if (Auth::user()->isSuperAdmin() || Auth::user()->isDepartmentAdmin())
                    <x-nav-link :href="route('admin.users')" :active="request()->routeIs('*admin.users*')">
                        {{ trans('admin.manage_users') }}
                    </x-nav-link>
                    <x-nav-link :href="route('admin.appeals')" :active="request()->routeIs('*admin.appeals*')">
                        {{ trans('admin.account_appeals') }}
                    </x-nav-link>
                @endif
            </div>
            <!-- Responsive Settings Options -->
            <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
                <div class="px-4">
                    <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}

                    </div>
                    <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                </div>
                <div class="mt-3 space-y-1">
                    <x-responsive-nav-link :href="route('profile.edit')">
                        {{ trans('main.Profile') }}
                    </x-responsive-nav-link>
                    <!-- Authentication -->
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault();
                                this.closest('form').submit();">
                            {{ trans('main.Log Out') }}
                        </x-responsive-nav-link>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Notification Details Modal -->
<div id="notification-modal" class="fixed inset-0 z-[9999] hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeNotificationModal()"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                        <div id="notification-modal-content">
                            <div class="animate-pulse">
                                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
                                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-4"></div>
                                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-full mb-2"></div>
                                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
                <button type="button" onclick="deleteNotification(window._currentNotificationId)" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
                    {{ trans('admin.delete') }}
                </button>
                <button type="button" onclick="markAsUnread(window._currentNotificationId)" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
                    {{ trans('admin.mark_as_unread') }}
                </button>
                <button type="button" onclick="closeNotificationModal()" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-600 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
                    {{ trans('admin.close') }}
                </button>
            </div>
        </div>
    </div>
</div>

@include('components.shared-confirmation-modal')

<script>
    // Handle sidebar collapse for navigation positioning
    document.addEventListener('DOMContentLoaded', function() {
        const navigation = document.querySelector('header');
        const sidebar = document.getElementById('sidebar');

        if (navigation && sidebar) {
            // Observe sidebar class changes
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                        if (sidebar.classList.contains('collapsed')) {
                            navigation.style.marginLeft = 'var(--sidebar-width-collapsed)';
                            navigation.style.width =
                                'calc(100% - var(--sidebar-width-collapsed))';
                        } else {
                            navigation.style.marginLeft = 'var(--sidebar-width)';
                            navigation.style.width = 'calc(100% - var(--sidebar-width))';
                        }
                    }
                });
            });

            observer.observe(sidebar, {
                attributes: true
            });
        }
    });

    // Responsive behavior for mobile
    window.addEventListener('resize', function() {
        const navigation = document.querySelector('header');
        if (window.innerWidth <= 768) {
            navigation.style.marginLeft = '0';
            navigation.style.width = '100%';
        } else {
            const sidebar = document.getElementById('sidebar');
            if (sidebar && sidebar.classList.contains('collapsed')) {
                navigation.style.marginLeft = 'var(--sidebar-width-collapsed)';
                navigation.style.width = 'calc(100% - var(--sidebar-width-collapsed))';
            } else {
                navigation.style.marginLeft = 'var(--sidebar-width)';
                navigation.style.width = 'calc(100% - var(--sidebar-width))';
            }
        }
    });

    // Notification System Functions
    @if (Auth::user())
    let notificationCheckInterval;

    // Load notifications count and update badge
    function loadNotificationCount() {
        fetch('{{ route('notifications.count') }}', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            const badge = document.getElementById('notification-badge');
            if (badge) {
                if (data.count > 0) {
                    badge.textContent = data.count > 99 ? '99+' : data.count;
                    badge.style.display = 'flex';
                } else {
                    badge.style.display = 'none';
                }
            }
        })
        .catch(error => {
            console.error('Error loading notification count:', error);
            // Hide badge on error to avoid confusion
            const badge = document.getElementById('notification-badge');
            if (badge) {
                badge.style.display = 'none';
            }
        });
    }

    // Load notifications for dropdown
    function loadNotifications() {
        fetch('{{ route('notifications') }}', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            const notificationsList = document.getElementById('notifications-list');
            if (!notificationsList) return;

            if (data.notifications && data.notifications.length > 0) {
                notificationsList.innerHTML = '';
                data.notifications.forEach(notification => {
                    const notificationEl = document.createElement('div');
                    notificationEl.className = `px-4 py-3 border-b border-gray-200 dark:border-gray-700 ${!notification.read_at ? 'bg-blue-50 dark:bg-blue-900/20' : ''} hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors`;
                    notificationEl.onclick = () => viewNotificationDetails(notification);
                    
                    const timeAgo = new Date(notification.created_at).toLocaleString();
                    
                    notificationEl.innerHTML = `
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <div class="w-2 h-2 bg-blue-500 rounded-full ${!notification.read_at ? '' : 'opacity-0'}"></div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    {{ trans('admin.new_appeal_submitted') }}
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
                                    ${notification.data.message || ''}
                                </p>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                                    ${timeAgo}
                                </p>
                            </div>
                        </div>
                    `;
                    notificationsList.appendChild(notificationEl);
                });
            } else {
                notificationsList.innerHTML = `
                    <div class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
                        {{ trans('admin.no_notifications') }}
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error loading notifications:', error);
            const notificationsList = document.getElementById('notifications-list');
            if (notificationsList) {
                notificationsList.innerHTML = `
                    <div class="px-4 py-3 text-sm text-red-500 text-center">
                        {{ trans('admin.error_loading_notifications') }}
                    </div>
                `;
            }
        });
    }

    // Mark notification as unread
    function markAsUnread(notificationId) {
        fetch(`{{ route('notifications.unread', ':id') }}`.replace(':id', notificationId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                loadNotificationCount();
                loadNotifications();
                // Also update the notifications page if we're on it
                if (typeof reloadNotificationsPage === 'function') {
                    reloadNotificationsPage();
                }
            }
        })
        .catch(error => {
            console.error('Error marking notification as unread:', error);
        });
    }

    // Mark notification as read (available in the navigation scope)
    function markAsRead(notificationId) {
        if (!notificationId) return Promise.reject(new Error('missing notification id'));

        return fetch(`{{ route('notifications.read', ':id') }}`.replace(':id', notificationId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            return response.json();
        })
        .then(data => {
            // Refresh badge/count after marking as read
            loadNotificationCount();
            return data;
        })
        .catch(error => {
            console.error('Error marking notification as read:', error);
            throw error;
        });
    }

    // Delete notification: open shared confirmation modal (or fallback to confirm+delete)
    function deleteNotification(notificationId) {
        if (!notificationId) return;

        // Prefer shared modal if available
        if (typeof window.showSharedConfirmation === 'function') {
            window.showSharedConfirmation('delete-single', { notificationId: notificationId }, { origin: 'navigation' });
            return;
        }

        // Fallback to native confirm and immediate delete
        if (!confirm('{{ trans('admin.confirm_delete_notification') }}')) {
            return;
        }

        fetch(`{{ route('notifications.delete', ':id') }}`.replace(':id', notificationId), {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                loadNotificationCount();
                loadNotifications();
                closeNotificationModal();
                if (typeof reloadNotificationsPage === 'function') {
                    reloadNotificationsPage();
                }
            }
        })
        .catch(error => {
            console.error('Error deleting notification:', error);
        });
    }

    // Listen for shared-confirm events to carry out delete-single when invoked from shared modal
    window.addEventListener('shared-confirm', function(e) {
        const d = e.detail || {};
        // only handle events dispatched from the navigation (header)
        if (d.origin && d.origin !== 'navigation') return;
        if (d.action === 'delete-single' && d.data && d.data.notificationId) {
            const notificationId = d.data.notificationId;
            // perform deletion
            fetch(`{{ route('notifications.delete', ':id') }}`.replace(':id', notificationId), {
                method: 'DELETE',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    loadNotificationCount();
                    loadNotifications();
                    closeNotificationModal();
                    if (typeof reloadNotificationsPage === 'function') {
                        reloadNotificationsPage();
                    }
                }
            })
            .catch(err => console.error('Error deleting notification via shared-confirm:', err));
        }
    });

    // Mark all notifications as read
    function markAllAsRead(event) {
        if (event) event.preventDefault();
        fetch('{{ route('notifications.mark-all-read') }}', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                loadNotificationCount();
                loadNotifications();
                // Also update the notifications page if we're on it
                if (typeof reloadNotificationsPage === 'function') {
                    reloadNotificationsPage();
                }
            }
        })
        .catch(error => {
            console.error('Error marking all notifications as read:', error);
        });
    }

    // Start notification checking
    function startNotificationPolling() {
        loadNotificationCount();
        notificationCheckInterval = setInterval(loadNotificationCount, 30000); // Check every 30 seconds
    }

    // Initialize notifications when page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Only initialize for admin users
        @if (Auth::user())
        startNotificationPolling();
        
        // Load notifications when dropdown is opened
        const notificationButton = document.querySelector('.relative.overflow-visible button');
        if (notificationButton) {
            notificationButton.addEventListener('click', function() {
                setTimeout(loadNotifications, 100); // Small delay to ensure dropdown is open
            });
        }
        @endif
    });

    // Notification Modal Functions
    function viewNotificationDetails(notificationOrId, detailsUrl) {
        // Accept either a notification object or an id
        const notificationObj = typeof notificationOrId === 'object' ? notificationOrId : null;
        const notificationId = notificationObj ? notificationObj.id : notificationOrId;

        // Close the notification dropdown first
        const dropdown = document.querySelector('.relative.overflow-visible div[x-show]');
        if (dropdown) {
            dropdown.style.display = 'none';
        }

        const modal = document.getElementById('notification-modal');
        const modalContent = document.getElementById('notification-modal-content');

        // Show modal
        modal.classList.remove('hidden');

    // If we already have the full notification object, use it directly
        const processNotification = (notification) => {
            const timeAgo = new Date(notification.created_at).toLocaleString();

            // Check if this is an appeal notification and has a valid appeal id
            if (notification.data && notification.data.appeal_id) {
                // Fetch current appeal status
                fetch(`{{ route('admin.appeals.show', ':id') }}`.replace(':id', notification.data.appeal_id), {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                    }
                })
                .then(appealResponse => {
                    if (appealResponse.ok) {
                        return appealResponse.text();
                    } else {
                        throw new Error('Appeal not found');
                    }
                })
                .then(appealHtml => {
                    // Parse the appeal status from the HTML response
                    const parser = new DOMParser();
                    const appealDoc = parser.parseFromString(appealHtml, 'text/html');
                    const statusElement = appealDoc.querySelector('[data-appeal-status]');
                    const appealStatus = statusElement ? statusElement.getAttribute('data-appeal-status') : 'unknown';

                    displayAppealNotificationModal(notification, timeAgo, appealStatus);
                })
                .catch(error => {
                    console.error('Error loading appeal details:', error);
                    // Fallback to showing basic notification if appeal details can't be loaded
                    displayBasicNotificationModal(notification, timeAgo);
                });
            } else {
                // Not an appeal notification, show basic modal
                displayBasicNotificationModal(notification, timeAgo);
            }

            // Mark as read if not already read
            if (!notification.read_at) {
                markAsRead(notification.id).catch(() => {});
            }

            // Expose current notification id for modal action buttons
            try { window._currentNotificationId = notification.id; } catch (e) {}

            // If a direct detailsUrl was provided (from notifications page), navigate there
            if (detailsUrl) {
                // Delay slightly to allow UI update
                setTimeout(() => window.location.href = detailsUrl, 150);
                return;
            }
        };

        if (notificationObj) {
            processNotification(notificationObj);
            return;
        }

        // Otherwise, fetch notifications and look up by id
        fetch(`{{ route('notifications') }}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => response.json())
        .then(data => {
            const notification = data.notifications.find(n => n.id === notificationId);
            if (notification) {
                processNotification(notification);
            } else {
                modalContent.innerHTML = `
                    <div class="text-center py-4">
                        <p class="text-red-600 dark:text-red-400">{{ trans('admin.notification_not_found') }}</p>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error loading notification details:', error);
            modalContent.innerHTML = `
                <div class="text-center py-4">
                    <p class="text-red-600 dark:text-red-400">{{ trans('admin.error_loading_notification_details') }}</p>
                </div>
            `;
        });
    }
    // Expose the navigation's detailed handler so other scripts can delegate to it
    try {
        window._nav_viewNotificationDetails = viewNotificationDetails;
    } catch (e) {
        // ignore in environments where window is not available
    }

    function displayBasicNotificationModal(notification, timeAgo) {
        const modalContent = document.getElementById('notification-modal-content');

        modalContent.innerHTML = `
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mb-4" id="modal-title">
                {{ trans('admin.notification_details') }}
            </h3>
            <div class="space-y-4">
                <div>
                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                        ${notification.data.message || '{{ trans('admin.notification') }}'}
                    </h4>
                    ${!notification.read_at ? '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 ml-2">{{ trans('admin.unread') }}</span>' : '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 ml-2">{{ trans('admin.read') }}</span>'}
                </div>

                <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <p><strong>{{ trans('admin.from') }}:</strong> ${notification.data.user_name || '{{ trans('admin.unknown') }}'}
                        ${notification.data.user_email ? `(${notification.data.user_email})` : ''}</p>
                    ${notification.data.department ? `<p><strong>{{ trans('admin.department') }}:</strong> ${notification.data.department}</p>` : ''}
                    <p><strong>{{ trans('admin.received_at') }}:</strong> ${timeAgo}</p>
                    ${notification.read_at ? `<p><strong>{{ trans('admin.read_at') }}:</strong> ${new Date(notification.read_at).toLocaleString()}</p>` : ''}
                </div>

                ${notification.data.action_url ? `
                    <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                        <a href="${notification.data.action_url}" class="inline-flex items-center px-3 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
                            {{ trans('admin.view_details') }}
                        </a>
                    </div>
                ` : ''}

                ${notification.data.additional_info ? `
                    <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                        <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{{ trans('admin.additional_information') }}</h5>
                        <p class="text-sm text-gray-600 dark:text-gray-400">${notification.data.additional_info}</p>
                    </div>
                ` : ''}
            </div>
        `;
    }

    function displayAppealNotificationModal(notification, timeAgo, appealStatus) {
        const modalContent = document.getElementById('notification-modal-content');

        let statusBadge = '';
        let statusMessage = '';
        let actionButton = '';

        if (appealStatus === 'pending') {
            statusBadge = '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 ml-2">{{ trans('admin.pending') }}</span>';
            statusMessage = '<p class="text-sm text-yellow-600 dark:text-yellow-400">{{ trans('admin.appeal_pending_message') }}</p>';
            actionButton = `
                <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                    <a href="${notification.data.action_url}" class="inline-flex items-center px-3 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
                        {{ trans('admin.review_appeal') }}
                    </a>
                </div>
            `;
        } else if (appealStatus === 'approved') {
            statusBadge = '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 ml-2">{{ trans('admin.approved') }}</span>';
            statusMessage = '<p class="text-sm text-green-600 dark:text-green-400">{{ trans('admin.appeal_approved_message') }}</p>';
            actionButton = `
                <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                    <a href="${notification.data.action_url}" class="inline-flex items-center px-3 py-2 bg-green-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition">
                        {{ trans('admin.view_appeal_details') }}
                    </a>
                </div>
            `;
        } else if (appealStatus === 'rejected') {
            statusBadge = '<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 ml-2">{{ trans('admin.rejected') }}</span>';
            statusMessage = '<p class="text-sm text-red-600 dark:text-red-400">{{ trans('admin.appeal_rejected_message') }}</p>';
            actionButton = `
                <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                    <a href="${notification.data.action_url}" class="inline-flex items-center px-3 py-2 bg-gray-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition">
                        {{ trans('admin.view_appeal_details') }}
                    </a>
                </div>
            `;
        }

        modalContent.innerHTML = `
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mb-4" id="modal-title">
                {{ trans('admin.appeal_notification_details') }}
            </h3>
            <div class="space-y-4">
                <div>
                    <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                        ${notification.data.message || '{{ trans('admin.appeal_notification') }}'}
                    </h4>
                    ${statusBadge}
                </div>

                ${statusMessage}

                <div class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                    <p><strong>{{ trans('admin.from') }}:</strong> ${notification.data.user_name || '{{ trans('admin.unknown') }}'}
                        ${notification.data.user_email ? `(${notification.data.user_email})` : ''}</p>
                    ${notification.data.department ? `<p><strong>{{ trans('admin.department') }}:</strong> ${notification.data.department}</p>` : ''}
                    <p><strong>{{ trans('admin.received_at') }}:</strong> ${timeAgo}</p>
                    ${notification.read_at ? `<p><strong>{{ trans('admin.read_at') }}:</strong> ${new Date(notification.read_at).toLocaleString()}</p>` : ''}
                </div>

                ${actionButton}

                ${notification.data.additional_info ? `
                    <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
                        <h5 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{{ trans('admin.additional_information') }}</h5>
                        <p class="text-sm text-gray-600 dark:text-gray-400">${notification.data.additional_info}</p>
                    </div>
                ` : ''}
            </div>
        `;
    }

    function closeNotificationModal() {
        const modal = document.getElementById('notification-modal');
        modal.classList.add('hidden');
        try { window._currentNotificationId = null; } catch (e) {}
    }

    // Close modal when clicking outside or pressing escape
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeNotificationModal();
        }
    });

    // Clean up interval when page unloads
    window.addEventListener('beforeunload', function() {
        if (notificationCheckInterval) {
            clearInterval(notificationCheckInterval);
        }
    });
    @endif
</script>