{{-- <div class="navbar-custom">
    <div class="topbar">
        <!-- Contenu du header -->
    </div>
</div> --}}

<div class="navbar-custom">
    <div class="topbar">
        <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
            <!-- Brand Logo -->
            <div class="logo-box">
                <a class='logo-light' href='{{ route('dashboard') }}'>
                    <img src="{{ asset('assets/images/logo-light.png') }}" alt="logo" class="logo-lg" height="22">
                    <img src="{{ asset('assets/images/logo-sm.png') }}" alt="small logo" class="logo-sm" height="22">
                </a>
                <a class='logo-dark' href='{{ route('dashboard') }}'>
                    <img src="{{ asset('assets/images/logo-dark.png') }}" alt="dark logo" class="logo-lg" height="22">
                    <img src="{{ asset('assets/images/logo-sm.png') }}" alt="small logo" class="logo-sm" height="22">
                </a>
            </div>

            <!-- Sidebar Menu Toggle Button -->
            <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
            </button>
        </div>

        <ul class="topbar-menu d-flex align-items-center gap-4">
            <!-- Fullscreen Toggle -->
            <li class="d-none d-md-inline-block">
                <a class="nav-link" href="#" data-bs-toggle="fullscreen">
                    <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
            </li>

            <!-- Search Bar -->
            <li class="dropdown">
                <a class="nav-link dropdown-toggle waves-effect waves-light arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                    <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0">
                    <form class="p-3">
                        <input type="search" class="form-control" placeholder="Search ..." aria-label="Search">
                    </form>
                </div>
            </li>

            <!-- Language Selector -->
            <li class="dropdown d-none d-md-inline-block">
                <a class="nav-link dropdown-toggle waves-effect waves-light arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                    <img src="{{ asset('assets/images/flags/us.jpg') }}" alt="user-image" class="me-0 me-sm-1" height="18">
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated">
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="{{ asset('assets/images/flags/germany.jpg') }}" alt="German" class="me-1" height="12">
                        <span class="align-middle">German</span>
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="{{ asset('assets/images/flags/italy.jpg') }}" alt="Italian" class="me-1" height="12">
                        <span class="align-middle">Italian</span>
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="{{ asset('assets/images/flags/spain.jpg') }}" alt="Spanish" class="me-1" height="12">
                        <span class="align-middle">Spanish</span>
                    </a>
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="{{ asset('assets/images/flags/russia.jpg') }}" alt="Russian" class="me-1" height="12">
                        <span class="align-middle">Russian</span>
                    </a>
                </div>
            </li>

            <!-- Notifications -->
            <!-- Remplacez la section notifications existante par : -->
<li class="dropdown notification-list" id="notification-container">
    <a class="nav-link dropdown-toggle waves-effect waves-light arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
        <i class="mdi mdi-bell font-size-24"></i>
        <span class="badge bg-danger rounded-circle noti-icon-badge" id="notification-counter">0</span>
    </a>
    <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0">
        <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border">
            <div class="row align-items-center">
                <div class="col">
                    <h6 class="m-0 font-size-16 fw-semibold">Notifications</h6>
                </div>
                <div class="col-auto">
                    <a href="javascript:void(0);" class="text-dark text-decoration-underline" id="clear-notifications">
                        <small>Clear All</small>
                    </a>
                </div>
            </div>
        </div>
        <div class="px-1" style="max-height: 300px;" data-simplebar id="notifications-list">
            <!-- Les notifications seront ajoutées ici dynamiquement -->
            <div class="text-center py-3" id="no-notifications">
                <i class="mdi mdi-bell-off-outline font-size-24 text-muted"></i>
                <p class="text-muted mb-0">Aucune notification</p>
            </div>
        </div>
        <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item border-top border-light py-2">
            View All
        </a>
    </div>
</li>

            <!-- Dark/Light Mode Toggle -->
            <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
            </li>

            <!-- User Profile -->
            <li class="dropdown">
                <a class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                    <img src="{{ asset('assets/images/users/avatar-4.jpg') }}" alt="user-image" class="rounded-circle">

                    <span class="ms-1 d-none d-md-inline-block">
                        @auth
                        {{ Auth::user()->name }}<i class="mdi mdi-chevron-down"></i>
                        @endauth
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                    <div class="dropdown-header noti-title">
                        <h6 class="text-overflow m-0">Bienvenue !</h6>
                    </div>
                    <a href="" class="dropdown-item notify-item">
                        <i class="bx bx-user font-size-16 me-2"></i>
                        <span>Mon Profil</span>
                    </a>
                    <a href="" class="dropdown-item notify-item">
                        <i class="bx bx-cog font-size-16 me-2"></i>
                        <span>Paramètres</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item notify-item">
                            <i class="bx bx-log-out font-size-16 me-2"></i>
                            <span>Déconnexion</span>
                        </button>
                    </form>
                </div>
            </li>
        </ul>
    </div>
</div>


{{-- <script>
    // Dans votre topbar - plus simple car même domaine
fetch('/notifications/count', {
    headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
    credentials: 'same-origin' // Important pour les cookies de session
})
.then(response => response.json())
.then(data => {
    // Mettre à jour le compteur
    document.getElementById('notification-counter').textContent = data.count;
});
</script> --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const notificationCounter = document.getElementById('notification-counter');
    const notificationsList = document.getElementById('notifications-list');
    const noNotifications = document.getElementById('no-notifications');
    const clearNotificationsBtn = document.getElementById('clear-notifications');

    // Fonction pour charger le compteur de notifications
    function loadNotificationCount() {
        fetch('/notifications/count', {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            updateCounter(data.count);
            if (data.count > 0) {
                loadNotifications();
            }
        })
        .catch(error => {
            console.error('Erreur chargement compteur:', error);
        });
    }

    // Fonction pour charger les notifications détaillées
    function loadNotifications() {
        fetch('/notifications', {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            updateNotificationsList(data.notifications);
        })
        .catch(error => {
            console.error('Erreur chargement notifications:', error);
        });
    }

    // Mettre à jour le compteur
    function updateCounter(count) {
        if (notificationCounter) {
            notificationCounter.textContent = count;
            if (count === 0) {
                notificationCounter.style.display = 'none';
            } else {
                notificationCounter.style.display = 'flex';
            }
        }
    }

    // Mettre à jour la liste des notifications
    function updateNotificationsList(notifications) {
        if (!notificationsList) return;

        if (notifications.length === 0) {
            notificationsList.innerHTML = `
                <div class="text-center py-3" id="no-notifications">
                    <i class="mdi mdi-bell-off-outline font-size-24 text-muted"></i>
                    <p class="text-muted mb-0">Aucune notification</p>
                </div>
            `;
            return;
        }

        let html = '';
        notifications.forEach(notification => {
            html += `
                <div class="dropdown-item notify-item border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="mb-1">Nouvelle commande ${getOrderTypeText(notification.type)}</h6>
                            <p class="mb-0 text-muted">${notification.name}</p>
                            <small class="text-muted">${formatDate(notification.created_at)}</small>
                        </div>
                        <div class="ms-2">
                            <button class="btn btn-sm btn-link text-danger p-0 mark-as-viewed"
                                    data-id="${notification.id}"
                                    data-type="${notification.type}">
                                <i class="mdi mdi-check-all"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });

        notificationsList.innerHTML = html;

        // Ajouter les événements aux boutons
        document.querySelectorAll('.mark-as-viewed').forEach(button => {
            button.addEventListener('click', function() {
                markAsViewed(this.dataset.id, this.dataset.type);
            });
        });
    }

    // Marquer une notification comme vue
    function markAsViewed(orderId, orderType) {
        fetch(`/${orderType}-orders/${orderId}/mark-viewed`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Recharger les notifications
                loadNotificationCount();
            }
        })
        .catch(error => {
            console.error('Erreur marquage comme vu:', error);
        });
    }

    // Effacer toutes les notifications
    if (clearNotificationsBtn) {
        clearNotificationsBtn.addEventListener('click', function(e) {
            e.preventDefault();
            clearAllNotifications();
        });
    }

    function clearAllNotifications() {
        fetch('/notifications/clear', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateCounter(0);
                updateNotificationsList([]);
            }
        })
        .catch(error => {
            console.error('Erreur effacement notifications:', error);
        });
    }

    // Helper functions
    function getOrderTypeText(type) {
        const types = {
            'discovery': 'Site',
            'hotel': 'Hôtel',
            'vehicle': 'Véhicule'
        };
        return types[type] || 'Inconnu';
    }

    function formatDate(dateString) {
        return new Date(dateString).toLocaleDateString('fr-FR', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    // Charger initialement
    loadNotificationCount();

    // Recharger toutes les 30 secondes (polling)
    setInterval(loadNotificationCount, 30000);
});
</script>

{{-- <script>
document.addEventListener('DOMContentLoaded', function() {
    const notificationCounter = document.getElementById('notification-counter');
    const notificationsList = document.getElementById('notifications-list');
    const noNotifications = document.getElementById('no-notifications');
    const clearNotificationsBtn = document.getElementById('clear-notifications');

    // Écouter les événements de notification
    window.Echo.channel('notifications')
        .listen('NewOrderNotification', (e) => {
            incrementNotificationCounter();
            addNotification(e.order);
        })
        .listen('OrderViewedNotification', (e) => {
            decrementNotificationCounter();
            removeNotification(e.orderId);
        });

    // Initialiser le compteur
    function initNotificationCounter() {
        fetch('/api/notifications/count')
            .then(response => response.json())
            .then(data => {
                updateCounter(data.count);
                if (data.count > 0) {
                    loadNotifications();
                }
            });
    }

    // Charger les notifications
    function loadNotifications() {
        fetch('/api/notifications')
            .then(response => response.json())
            .then(data => {
                data.notifications.forEach(notification => {
                    addNotification(notification);
                });
            });
    }

    // Ajouter une notification
    function addNotification(order) {
        if (noNotifications) {
            noNotifications.style.display = 'none';
        }

        const notificationItem = document.createElement('div');
        notificationItem.className = 'dropdown-item notify-item border-bottom';
        notificationItem.id = `notification-${order.id}`;
        notificationItem.innerHTML = `
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                    <h6 class="mb-1">Nouvelle commande ${getOrderType(order)}</h6>
                    <p class="mb-0 text-muted">${order.name || order.site_name || order.hotel_name}</p>
                    <small class="text-muted">${formatDate(order.created_at)}</small>
                </div>
                <div class="ms-2">
                    <button class="btn btn-sm btn-link text-danger p-0 mark-as-viewed"
                            data-id="${order.id}"
                            data-type="${getOrderType(order).toLowerCase()}">
                        <i class="mdi mdi-check-all"></i>
                    </button>
                </div>
            </div>
        `;

        notificationsList.insertBefore(notificationItem, notificationsList.firstChild);

        // Ajouter l'événement pour marquer comme vu
        notificationItem.querySelector('.mark-as-viewed').addEventListener('click', function() {
            markAsViewed(this.dataset.id, this.dataset.type);
        });
    }

    // Marquer comme vu
    function markAsViewed(orderId, orderType) {
        fetch(`/api/${orderType}-orders/${orderId}/mark-viewed`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                removeNotification(orderId);
                decrementNotificationCounter();
            }
        });
    }

    // Supprimer une notification
    function removeNotification(orderId) {
        const notification = document.getElementById(`notification-${orderId}`);
        if (notification) {
            notification.remove();
        }

        // Afficher "Aucune notification" si nécessaire
        if (notificationsList.children.length === 1) { // Seulement le message par défaut
            noNotifications.style.display = 'block';
        }
    }

    // Incrémenter le compteur
    function incrementNotificationCounter() {
        const currentCount = parseInt(notificationCounter.textContent) || 0;
        updateCounter(currentCount + 1);
    }

    // Décrémenter le compteur
    function decrementNotificationCounter() {
        const currentCount = parseInt(notificationCounter.textContent) || 0;
        if (currentCount > 0) {
            updateCounter(currentCount - 1);
        }
    }

    // Mettre à jour le compteur
    function updateCounter(count) {
        notificationCounter.textContent = count;
        if (count === 0) {
            notificationCounter.style.display = 'none';
        } else {
            notificationCounter.style.display = 'flex';
        }
    }

    // Effacer toutes les notifications
    clearNotificationsBtn.addEventListener('click', function() {
        fetch('/api/notifications/clear', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                notificationsList.innerHTML = `
                    <div class="text-center py-3" id="no-notifications">
                        <i class="mdi mdi-bell-off-outline font-size-24 text-muted"></i>
                        <p class="text-muted mb-0">Aucune notification</p>
                    </div>
                `;
                updateCounter(0);
            }
        });
    });

    // Helper functions
    function getOrderType(order) {
        if (order.site_name) return 'Site';
        if (order.hotel_name) return 'Hôtel';
        if (order.vehicle_name) return 'Véhicule';
        return 'Commande';
    }

    function formatDate(dateString) {
        return new Date(dateString).toLocaleString('fr-FR');
    }

    // Initialiser
    initNotificationCounter();
});
</script> --}}
