ludikevent_crm/assets/reserve.js

import './reserve.scss';
import * as Sentry from "@sentry/browser";
import {UtmEvent,UtmAccount} from "./tools/UtmEvent.js";
import * as Turbo from "@hotwired/turbo"

// --- INITIALISATION SENTRY ---
Sentry.init({
    dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
    tunnel: "/sentry-tunnel",
    integrations: [Sentry.browserTracingIntegration()],
    tracesSampleRate: 1.0,
});

// --- LOGIQUE DU LOADER TURBO ---
const initLoader = () => {
    let loaderEl = document.getElementById('turbo-loader');

    if (!loaderEl) {
        loaderEl = document.createElement('div');
        loaderEl.id = 'turbo-loader';
        loaderEl.className = 'fixed inset-0 z-[9999] flex items-center justify-center bg-white transition-opacity duration-300 opacity-0 pointer-events-none';
        loaderEl.innerHTML = `
            <div class="relative flex items-center justify-center">
                <div class="absolute w-24 h-24 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                <img src="/provider/images/favicon.png" class="w-12 h-12 relative z-10 animate-pulse" alt="Logo">
            </div>
        `;
        document.body.appendChild(loaderEl);
    }

    const showLoader = () => {
        loaderEl.classList.remove('opacity-0', 'pointer-events-none');
        loaderEl.classList.add('opacity-100');
    };

    const hideLoader = () => {
        setTimeout(() => {
            loaderEl.classList.remove('opacity-100');
            loaderEl.classList.add('opacity-0', 'pointer-events-none');
        }, 300);
    };

    // --- ÉVÉNEMENTS TURBO (SANS BOUCLE INFINIE) ---
    document.addEventListener("turbo:click", showLoader);
    document.addEventListener("turbo:submit-start", showLoader);
    document.addEventListener("turbo:load", hideLoader);
    document.addEventListener("turbo:render", hideLoader);
};

// --- LOGIQUE DU MENU MOBILE ---
const initMobileMenu = () => {
    const btn = document.getElementById('menu-button');
    const menu = document.getElementById('mobile-menu');
    if (btn && menu) {
        btn.onclick = () => {
            const isExpanded = btn.getAttribute('aria-expanded') === 'true';
            btn.setAttribute('aria-expanded', !isExpanded);
            menu.classList.toggle('hidden');
        };
    }
};

// --- LOGIQUE FILTRE CATALOGUE ---
const initCatalogueSearch = () => {
    const filters = document.querySelectorAll('.filter-btn');
    const products = document.querySelectorAll('.product-item');
    const emptyMsg = document.getElementById('empty-msg');

    if (!filters.length) return;

    filters.forEach(btn => {
        btn.onclick = () => {
            const category = btn.getAttribute('data-filter').toLowerCase();
            let count = 0;

            // UI boutons
            filters.forEach(f => {
                f.classList.remove('bg-slate-900', 'text-white');
                f.classList.add('bg-white', 'text-slate-500');
            });
            btn.classList.add('bg-slate-900', 'text-white');
            btn.classList.remove('bg-white', 'text-slate-500');

            // Filtrage
            products.forEach(item => {
                const itemCat = item.getAttribute('data-category').toLowerCase();
                if (category === 'all' || itemCat.includes(category)) {
                    item.style.display = 'block';
                    count++;
                } else {
                    item.style.display = 'none';
                }
            });

            if (emptyMsg) {
                count === 0 ? emptyMsg.classList.remove('hidden') : emptyMsg.classList.add('hidden');
            }
        };
    });
};

// --- INITIALISATION ---
document.addEventListener('DOMContentLoaded', () => {
    initLoader();
    initMobileMenu();
    initCatalogueSearch();
    customElements.define('utm-event',UtmEvent)
    customElements.define('utm-account',UtmAccount)

});

document.addEventListener('turbo:load', () => {
    initMobileMenu();
    initCatalogueSearch();
});

// Nettoyage avant cache pour éviter les bugs au retour arrière
document.addEventListener("turbo:before-cache", () => {
    document.querySelectorAll('.product-item').forEach(i => i.style.display = 'block');
    if (document.getElementById('empty-msg')) document.getElementById('empty-msg').classList.add('hidden');
});