crm_ecosplay/assets/app.js

import "./app.scss"
import { initEntrepriseSearch } from "./modules/entreprise-search.js"

// Membre / Super Admin : mutuellement exclusif
document.addEventListener('DOMContentLoaded', () => {
    const memberCheckbox = document.querySelector('input[value="siteconseil_member"]');
    const adminCheckbox = document.querySelector('input[value="siteconseil_admin"]');
    const otherGroupCheckboxes = () =>
        [...document.querySelectorAll('input[name="groups[]"]')].filter(cb => cb !== memberCheckbox);

    if (memberCheckbox && adminCheckbox) {
        memberCheckbox.addEventListener('change', () => {
            /* istanbul ignore next */ if (memberCheckbox.checked) otherGroupCheckboxes().forEach(cb => { cb.checked = false; });
        });

        adminCheckbox.addEventListener('change', () => {
            if (!adminCheckbox.checked) return;
            memberCheckbox.checked = false;
            otherGroupCheckboxes().forEach(cb => { cb.checked = true; });
        });
    }

    // Stats period selector
    const periodSelect = document.getElementById('stats-period-select');
    const customRange = document.getElementById('stats-custom-range');
    if (periodSelect && customRange) {
        periodSelect.addEventListener('change', () => {
            customRange.classList.toggle('hidden', periodSelect.value !== 'custom');
        });
    }

    // data-confirm — modal glassmorphism custom
    const confirmModal = document.createElement('div');
    confirmModal.id = 'confirm-modal';
    confirmModal.className = 'hidden fixed inset-0 z-[100] flex items-center justify-center';
    confirmModal.innerHTML = `
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="confirm-overlay"></div>
        <div class="relative glass-heavy w-full max-w-md mx-4 overflow-hidden" style="border-radius: 16px;">
            <div class="glass-dark text-white px-6 py-4 flex items-center gap-3" style="border-radius: 16px 16px 0 0;">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <span class="text-sm font-bold uppercase tracking-widest">Confirmation</span>
            </div>
            <div class="p-6">
                <p id="confirm-message" class="text-sm font-medium text-gray-700 leading-relaxed"></p>
                <div class="flex justify-end gap-3 mt-6">
                    <button type="button" id="confirm-cancel" class="px-5 py-2 glass font-bold uppercase text-xs tracking-wider text-gray-700 hover:bg-gray-900 hover:text-white transition-all">Annuler</button>
                    <button type="button" id="confirm-ok" class="px-5 py-2 bg-red-600 text-white font-bold uppercase text-xs tracking-wider hover:bg-red-700 transition-all" style="border-radius: 6px;">Confirmer</button>
                </div>
            </div>
        </div>`;
    document.body.appendChild(confirmModal);

    let pendingForm = null;
    const confirmMessage = document.getElementById('confirm-message');
    const confirmCancel = document.getElementById('confirm-cancel');
    const confirmOk = document.getElementById('confirm-ok');
    const confirmOverlay = document.getElementById('confirm-overlay');

    const closeConfirm = () => { confirmModal.classList.add('hidden'); pendingForm = null; };

    confirmCancel.addEventListener('click', closeConfirm);
    confirmOverlay.addEventListener('click', closeConfirm);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && pendingForm) closeConfirm(); });

    confirmOk.addEventListener('click', () => {
        if (pendingForm) {
            confirmModal.classList.add('hidden');
            pendingForm.removeAttribute('data-confirm');
            pendingForm.requestSubmit();
        }
    });

    document.querySelectorAll('form[data-confirm]').forEach(form => {
        form.addEventListener('submit', (e) => {
            if (form.dataset.confirm) {
                e.preventDefault();
                pendingForm = form;
                confirmMessage.textContent = form.dataset.confirm;
                confirmModal.classList.remove('hidden');
            }
        });
    });

    // Sidebar dropdown toggle
    document.querySelectorAll('.sidebar-dropdown-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const menu = btn.nextElementSibling;
            const arrow = btn.querySelector('.sidebar-dropdown-arrow');
            menu?.classList.toggle('hidden');
            arrow?.classList.toggle('rotate-180');
        });
    });

    // Mobile sidebar toggle
    const sidebarToggle = document.getElementById('admin-sidebar-toggle');
    const sidebar = document.getElementById('admin-sidebar');
    const overlay = document.getElementById('admin-overlay');

    if (sidebarToggle && sidebar && overlay) {
        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.toggle('open');
        });

        overlay.addEventListener('click', () => {
            sidebar.classList.remove('open');
        });
    }

    // Mobile menu toggle (public)
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuIconOpen = document.getElementById('menu-icon-open');
    const menuIconClose = document.getElementById('menu-icon-close');

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            menuIconOpen?.classList.toggle('hidden');
            menuIconClose?.classList.toggle('hidden');
        });
    }

    // Cookie banner
    const cookieBanner = document.getElementById('cookie-banner');
    const cookieAccept = document.getElementById('cookie-accept');
    const cookieRefuse = document.getElementById('cookie-refuse');

    if (cookieBanner && !localStorage.getItem('cookie_consent')) {
        cookieBanner.classList.remove('hidden');
    }

    cookieAccept?.addEventListener('click', () => {
        localStorage.setItem('cookie_consent', 'accepted');
        cookieBanner?.classList.add('hidden');
    });

    cookieRefuse?.addEventListener('click', () => {
        localStorage.setItem('cookie_consent', 'refused');
        cookieBanner?.classList.add('hidden');
    });

    // Search (customers & revendeurs)
    const renderHit = (h, linkPrefix) => {
        const id = h.customerId || h.id;
        const name = h.fqdn || h.name || h.fullName || h.raisonSociale || (h.firstName + ' ' + h.lastName);
        const sub = h.customerName ? `<span class="text-gray-400 ml-2">${h.customerName}</span>` : (h.email ? `<span class="text-gray-400 ml-2">${h.email}</span>` : '');
        return `<a href="${linkPrefix}${id}" class="block px-4 py-2 hover:bg-gray-50 border-b border-gray-100 text-xs">
            <span class="font-bold">${name}</span>
            ${sub}
            ${h.codeRevendeur ? `<span class="ml-2 px-1 py-0.5 bg-gray-900 text-[#fabf04] text-[9px] font-bold">${h.codeRevendeur}</span>` : ''}
        </a>`;
    };

    const performSearch = async (searchUrl, linkPrefix, results, q) => {
        const resp = await fetch(`${searchUrl}?q=${encodeURIComponent(q)}`);
        const hits = await resp.json();
        results.innerHTML = hits.length === 0
            ? '<div class="px-4 py-3 text-xs text-gray-400">Aucun resultat.</div>'
            : hits.map(h => renderHit(h, linkPrefix)).join('');
        results.classList.remove('hidden');
    };

    const setupSearch = (inputId, resultsId, searchUrl, linkPrefix) => {
        const input = document.getElementById(inputId);
        const results = document.getElementById(resultsId);
        if (!input || !results) return;

        let debounce;
        input.addEventListener('input', () => {
            clearTimeout(debounce);
            const q = input.value.trim();
            if (q.length < 2) {
                results.classList.add('hidden');
                results.innerHTML = '';
                return;
            }
            debounce = setTimeout(() => performSearch(searchUrl, linkPrefix, results, q), 300);
        });

        document.addEventListener('click', (e) => {
            /* istanbul ignore next */ if (!results.contains(e.target) && e.target !== input) {
                results.classList.add('hidden');
            }
        });
    };

    setupSearch('search-customers', 'search-results', '/admin/clients/search', '/admin/clients/');
    setupSearch('search-revendeurs', 'search-results-revendeurs', '/admin/revendeurs/search', '/admin/revendeurs/');
    setupSearch('search-ndd', 'search-ndd-results', '/admin/services/ndd/search', '/admin/clients/');
    setupSearch('search-websites', 'search-websites-results', '/admin/services/esyweb/search', '/admin/clients/');

    // Tarif tabs
    const tarifTabs = document.getElementById('tarif-tabs');
    if (tarifTabs) {
        const active = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass-dark text-white border border-white/20 border-b-0 cursor-pointer';
        const inactive = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all';

        tarifTabs.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', () => {
                const tab = btn.dataset.tab;
                tarifTabs.querySelectorAll('[data-tab]').forEach(b => {
                    b.className = b.dataset.tab === tab ? active : inactive;
                });
                document.querySelectorAll('[id^="content-"]').forEach(el => {
                    /* istanbul ignore next */ if (el.closest('#tarif-tabs')) return;
                    el.classList.toggle('hidden', el.id !== 'content-' + tab);
                });
            });
        });
    }

    // Recherche entreprise (page creation client)
    initEntrepriseSearch();

    // Recherche globale (navbar admin)
    const globalInput = document.getElementById('global-search');
    const globalResults = document.getElementById('global-search-results');
    if (globalInput && globalResults) {
        const typeIcons = {
            client: '&#128100;',
            ndd: '&#127760;',
            site: '&#128187;',
            contact: '&#128101;',
            revendeur: '&#127970;',
        };
        const typeLabels = {
            client: 'Client',
            ndd: 'NDD',
            site: 'Site',
            contact: 'Contact',
            revendeur: 'Revendeur',
        };

        let globalDebounce;
        globalInput.addEventListener('input', () => {
            clearTimeout(globalDebounce);
            const q = globalInput.value.trim();
            if (q.length < 2) {
                globalResults.classList.add('hidden');
                globalResults.innerHTML = '';
                return;
            }
            globalDebounce = setTimeout(async () => {
                const resp = await fetch('/admin/global-search?q=' + encodeURIComponent(q));
                const hits = await resp.json();
                if (hits.length === 0) {
                    globalResults.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">Aucun resultat.</div>';
                } else {
                    globalResults.innerHTML = hits.map(h =>
                        `<a href="${h.url}" class="flex items-center gap-3 px-4 py-2 hover:bg-white/80 border-b border-white/10 transition-colors">
                            <span class="text-sm">${typeIcons[h.type] || ''}</span>
                            <div class="min-w-0 flex-1">
                                <span class="text-xs font-bold block truncate">${h.label}</span>
                                ${h.sub ? `<span class="text-[10px] text-gray-400 block truncate">${h.sub}</span>` : ''}
                            </div>
                            <span class="px-1.5 py-0.5 bg-gray-100 text-gray-500 font-bold uppercase text-[8px] rounded shrink-0">${typeLabels[h.type] || h.type}</span>
                        </a>`
                    ).join('');
                }
                globalResults.classList.remove('hidden');
            }, 250);
        });

        document.addEventListener('click', (e) => {
            /* istanbul ignore next */ if (!globalResults.contains(e.target) && e.target !== globalInput) {
                globalResults.classList.add('hidden');
            }
        });

        globalInput.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') globalResults.classList.add('hidden');
        });
    }

    // ──────── Tab search devis / avis ────────
    initTabSearch('search-devis', 'search-devis-results');
    initTabSearch('search-adverts', 'search-adverts-results');

    // ──────── Devis lines repeater + drag & drop ────────
    initDevisLines();

    // ──────── Devis process : toggle formulaire de refus ────────
    const refuseBtn = document.getElementById('refuse-toggle-btn');
    const refuseForm = document.getElementById('refuse-form');
    if (refuseBtn && refuseForm) {
        refuseBtn.addEventListener('click', () => refuseForm.classList.toggle('hidden'));
    }
});

function initTabSearch(inputId, resultsId) {
    const input = document.getElementById(inputId);
    const results = document.getElementById(resultsId);
    if (!input || !results) return;

    const url = input.dataset.url;
    let timeout = null;

    const stateLabels = {
        created: 'Cree', send: 'Envoye', accepted: 'Accepte', refused: 'Refuse', cancel: 'Annule'
    };
    const stateColors = {
        created: 'bg-yellow-100 text-yellow-800', send: 'bg-blue-500/20 text-blue-700',
        accepted: 'bg-green-500/20 text-green-700', refused: 'bg-red-500/20 text-red-700',
        cancel: 'bg-gray-100 text-gray-600'
    };

    input.addEventListener('input', () => {
        clearTimeout(timeout);
        const q = input.value.trim();
        if (q.length < 2) { results.classList.add('hidden'); return; }

        timeout = setTimeout(async () => {
            const resp = await fetch(url + '?q=' + encodeURIComponent(q));
            const hits = await resp.json();
            if (hits.length === 0) {
                results.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">Aucun resultat.</div>';
            } else {
                results.innerHTML = hits.map(h =>
                    `<div class="flex items-center justify-between px-4 py-2 border-b border-white/10 hover:bg-white/50">
                        <div>
                            <span class="font-mono font-bold text-xs">${h.numOrder}</span>
                            <span class="text-[10px] text-gray-400 ml-2">${h.customerName || ''}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="font-mono text-xs">${h.totalTtc || '0.00'} €</span>
                            <span class="px-2 py-0.5 ${stateColors[h.state] || 'bg-gray-100'} font-bold uppercase text-[9px] rounded">${stateLabels[h.state] || h.state}</span>
                        </div>
                    </div>`
                ).join('');
            }
            results.classList.remove('hidden');
        }, 250);
    });

    document.addEventListener('click', (e) => {
        if (!results.contains(e.target) && e.target !== input) results.classList.add('hidden');
    });

    input.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') results.classList.add('hidden');
    });
}

function initDevisLines() {
    const container = document.getElementById('lines-container');
    const addBtn = document.getElementById('add-line-btn');
    const tplEl = document.getElementById('line-template');
    const totalEl = document.getElementById('total-ht');
    if (!container || !addBtn || !tplEl || !totalEl) return;

    const template = tplEl.innerHTML;
    let counter = 0;

    function renumber() {
        container.querySelectorAll('.line-row').forEach((row, idx) => {
            row.querySelector('.line-pos').textContent = '#' + (idx + 1);
            row.querySelector('.line-pos-input').value = idx;
        });
    }

    function recalc() {
        let total = 0;
        container.querySelectorAll('.line-price').forEach(input => {
            const v = parseFloat(input.value);
            if (!isNaN(v)) total += v;
        });
        totalEl.textContent = total.toFixed(2) + ' EUR';
    }

    function addLine() {
        const html = template.replaceAll('__INDEX__', counter);
        const wrapper = document.createElement('div');
        wrapper.innerHTML = html.trim();
        const node = wrapper.firstChild;
        container.appendChild(node);
        counter++;
        renumber();
        recalc();
    }

    container.addEventListener('click', e => {
        if (e.target.classList.contains('remove-line-btn')) {
            e.target.closest('.line-row').remove();
            renumber();
            recalc();
        }
    });

    container.addEventListener('input', e => {
        if (e.target.classList.contains('line-price')) recalc();
    });

    addBtn.addEventListener('click', () => addLine());

    // Boutons prestations rapides : ajoute une ligne pre-remplie
    document.querySelectorAll('.quick-price-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            addLine();
            const lastRow = container.querySelector('.line-row:last-child');
            if (!lastRow) return;
            lastRow.querySelector('input[name$="[title]"]').value = btn.dataset.title || '';
            lastRow.querySelector('textarea[name$="[description]"]').value = btn.dataset.description || '';
            const priceInput = lastRow.querySelector('.line-price');
            priceInput.value = btn.dataset.price || '0.00';
            recalc();
        });
    });

    // Drag & drop reordering
    let draggedRow = null;

    container.addEventListener('dragstart', e => {
        const row = e.target.closest('.line-row');
        if (!row) return;
        draggedRow = row;
        row.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
    });

    container.addEventListener('dragend', e => {
        const row = e.target.closest('.line-row');
        if (row) row.classList.remove('dragging');
        container.querySelectorAll('.line-row').forEach(r => r.classList.remove('drag-over'));
        draggedRow = null;
        renumber();
    });

    container.addEventListener('dragover', e => {
        e.preventDefault();
        const target = e.target.closest('.line-row');
        if (!target || target === draggedRow) return;
        container.querySelectorAll('.line-row').forEach(r => r.classList.remove('drag-over'));
        target.classList.add('drag-over');
    });

    container.addEventListener('drop', e => {
        e.preventDefault();
        const target = e.target.closest('.line-row');
        if (!target || !draggedRow || target === draggedRow) return;
        const rows = Array.from(container.querySelectorAll('.line-row'));
        const draggedIdx = rows.indexOf(draggedRow);
        const targetIdx = rows.indexOf(target);
        if (draggedIdx < targetIdx) {
            target.after(draggedRow);
        } else {
            target.before(draggedRow);
        }
        target.classList.remove('drag-over');
        renumber();
    });

    // Prefill en mode edition
    const initial = container.dataset.initialLines;
    if (initial) {
        try {
            const arr = JSON.parse(initial);
            arr.sort((a, b) => (a.pos || 0) - (b.pos || 0));
            arr.forEach(l => {
                addLine();
                const row = container.querySelector('.line-row:last-child');
                if (!row) return;
                row.querySelector('input[name$="[title]"]').value = l.title || '';
                row.querySelector('textarea[name$="[description]"]').value = l.description || '';
                row.querySelector('.line-price').value = l.priceHt || '0.00';
            });
            recalc();
        } catch (e) { /* ignore */ }
    }
}