{{-- <!DOCTYPE html>
<html lang="en" data-bs-theme="light" data-menu-color="dark" data-topbar-color="light">
<head>
    <meta charset="utf-8" />
    <title>@yield('title') | Mon Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Description de l'application" name="description" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

    <!-- CSS -->
    <link href="{{ asset('assets/libs/morris.js/morris.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/style.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet">

    @stack('styles')

    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
    window.Pusher = Pusher;
</script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.min.js"></script>
</head>

<body> --}}
    <!-- Begin page -->
    {{-- <div class="layout-wrapper"> --}}
        <!-- ========== Sidebar ========== -->
        {{-- @include('page.layouts.partials.sidebar') --}}

        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        {{-- <div class="page-content"> --}}
            <!-- Topbar -->
            {{-- @include('page.layouts.partials.topbar') --}}

            <!-- Main Content -->
            {{-- <div class="px-3">
                <div class="container-fluid">
                    @yield('content')
                </div>
            </div> --}}

            <!-- Footer -->
            {{-- @include('page.layouts.partials.footer') --}}
        {{-- </div>
    </div>

    document.addEventListener('DOMContentLoaded', function() {
    // Initialisation
    let notificationCount = 0;
    const notificationSound = new Audio('{{ asset("assets/sounds/notification.mp3") }}');

    // Écoute des événements Pusher
    window.Echo.channel('orders-channel')
        .listen('.order.created', (data) => {
            // Incrémenter le compteur
            notificationCount++;
            document.getElementById('notification-counter').textContent = notificationCount;

            // Jouer le son de notification
            notificationSound.play();

            // Créer l'élément de notification
            const notificationItem = `
                <div class="dropdown-item notify-item border-bottom border-light">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="m-0 font-size-14">Nouvelle commande #${data.invoice_number}</h6>
                            <p class="text-muted mb-0 small">${data.customer.name} - ${data.amount.total} FCFA</p>
                            <small class="text-muted">${new Date(data.dates.created_at).toLocaleString()}</small>
                        </div>
                    </div>
                </div>
            `;

            // Ajouter la notification
            const noNotifications = document.getElementById('no-notifications');
            if (noNotifications) noNotifications.remove();

            document.getElementById('notifications-list').insertAdjacentHTML('afterbegin', notificationItem);
        });

    // Vider les notifications
    document.getElementById('clear-notifications').addEventListener('click', function() {
        notificationCount = 0;
        document.getElementById('notification-counter').textContent = '0';
        document.getElementById('notifications-list').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>
        `;
    });
}); --}}
    <!-- Scripts -->
    {{-- <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.js') }}"></script>
    <script src="{{ asset('assets/libs/morris.js/morris.min.js') }}"></script>
    <script src="{{ asset('assets/libs/raphael/raphael.min.js') }}"></script>

    @stack('scripts')
    <script>
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: '{{ env('MIX_PUSHER_APP_KEY') }}',
        cluster: '{{ env('MIX_PUSHER_APP_CLUSTER') }}',
        encrypted: true,
        forceTLS: true
    });
</script>
</body>
</html> --}}



<!DOCTYPE html>
<html lang="en" data-bs-theme="light" data-menu-color="dark" data-topbar-color="light">
<head>
    <meta charset="utf-8" />
    <title>@yield('title') | Mon Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Description de l'application" name="description" />

    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

    <!-- CSS -->
    <link href="{{ asset('assets/libs/morris.js/morris.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/style.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/icons.min.css') }}" rel="stylesheet">

    @stack('styles')

    <!-- Pusher & Echo JS -->
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.15.3/dist/echo.iife.min.js"></script>
</head>

<body>
    <!-- Begin page -->
    <div class="layout-wrapper">
        <!-- ========== Sidebar ========== -->
        {{-- @include('page.layouts.partials.sidebar') --}}
        @include('layouts.partials.sidebar')

        <!-- ============================================================== -->
        <!-- Start Page Content -->
        <!-- ============================================================== -->
        <div class="page-content">
            <!-- Topbar -->
            {{-- @include('page.layouts.partials.topbar') --}}
            @include('layouts.partials.topbar')

            <!-- Main Content -->
            <div class="px-3">
                <div class="container-fluid">
                    @yield('content')
                </div>
            </div>

            <!-- Footer -->
            {{-- @include('page.layouts.partials.footer') --}}
        </div>
    </div>

    <!-- Scripts -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.js') }}"></script>
    <script src="{{ asset('assets/libs/morris.js/morris.min.js') }}"></script>
    <script src="{{ asset('assets/libs/raphael/raphael.min.js') }}"></script>

    <!-- Initialisation Echo -->
    <script>
        window.Echo = new Echo({
            broadcaster: 'pusher',
            key: '{{ env('MIX_PUSHER_APP_KEY') }}',
            cluster: '{{ env('MIX_PUSHER_APP_CLUSTER') }}',
            encrypted: true,
            forceTLS: true
        });
    </script>

    <!-- Gestion des Notifications -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Vérifie que les éléments nécessaires existent
            if (!document.getElementById('notification-counter') ||
                !document.getElementById('notifications-list')) {
                return;
            }

            let notificationCount = 0;
            const notificationSound = new Audio('{{ asset("assets/sounds/notification.mp3") }}');

            // Écoute des événements Pusher
            window.Echo.channel('orders-channel')
                .listen('.order.created', (data) => {
                    // Incrémenter le compteur
                    notificationCount++;
                    const counter = document.getElementById('notification-counter');
                    if (counter) counter.textContent = notificationCount;

                    // Jouer le son de notification
                    notificationSound.play().catch(e => console.error("Erreur son:", e));

                    // Créer l'élément de notification
                    const notificationItem = `
                        <div class="dropdown-item notify-item border-bottom border-light">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <h6 class="m-0 font-size-14">Nouvelle commande #${data.invoice_number}</h6>
                                    <p class="text-muted mb-0 small">${data.customer.name} - ${data.amount.total} FCFA</p>
                                    <small class="text-muted">${new Date(data.dates.created_at).toLocaleString()}</small>
                                </div>
                            </div>
                        </div>
                    `;

                    // Ajouter la notification
                    const noNotifications = document.getElementById('no-notifications');
                    if (noNotifications) noNotifications.remove();

                    const list = document.getElementById('notifications-list');
                    if (list) list.insertAdjacentHTML('afterbegin', notificationItem);
                });

            // Vider les notifications
            const clearBtn = document.getElementById('clear-notifications');
            if (clearBtn) {
                clearBtn.addEventListener('click', function() {
                    notificationCount = 0;
                    const counter = document.getElementById('notification-counter');
                    if (counter) counter.textContent = '0';

                    const list = document.getElementById('notifications-list');
                    if (list) list.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>
                    `;
                });
            }
        });
    </script>

    @stack('scripts')
</body>
</html>
