ludikevent_crm/assets/libs/SearchProductDevis.js

/**
 * RECHERCHE OPTIONS DEVIS
 */
export class SearchOptionsDevis extends HTMLButtonElement {
    constructor() {
        super();
        this.allOptions = [];
    }

    connectedCallback() {
        this.addEventListener('click', (e) => {
            e.preventDefault();
            this.openModal();
        });
    }

    async openModal() {
        let modal = document.getElementById('modal-search-options');
        if (!modal) {
            modal = this.createModalStructure();
            document.body.appendChild(modal);
            this.setupSearchEvent(modal);
        }

        modal.classList.remove('hidden');
        const container = modal.querySelector('#results-container-options');
        const searchInput = modal.querySelector('#modal-search-input-options');

        searchInput.value = '';
        container.innerHTML = `
            <div class="flex flex-col items-center justify-center p-12 text-slate-500">
                <div class="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                <p class="text-[10px] font-black uppercase tracking-[0.2em]">Chargement des options...</p>
            </div>
        `;

        try {
            const response = await fetch('/crm/options/json');
            this.allOptions = await response.json();
            this.renderOptions(this.allOptions, container, modal);
            setTimeout(() => searchInput.focus(), 100);
        } catch (error) {
            container.innerHTML = '<div class="text-rose-500 p-8 text-center text-xs font-bold uppercase">Erreur de liaison catalogue options.</div>';
        }
    }

    createModalStructure() {
        const div = document.createElement('div');
        div.id = 'modal-search-options';
        div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#0f172a]/90 backdrop-blur-md hidden animate-in fade-in duration-300';
        div.innerHTML = `
            <div class="bg-[#1e293b] border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
                <div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
                    <div class="flex justify-between items-center">
                        <h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
                            <span class="w-2 h-2 bg-blue-500 rounded-full mr-3 animate-pulse shadow-[0_0_8px_#3b82f6]"></span>
                            Sélection Option
                        </h3>
                        <button type="button"  class="cvr p-2 text-slate-400 hover:text-white transition-colors">
                            <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.5" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="relative">
                        <input type="text" id="modal-search-input-options" placeholder="RECHERCHER DANS LE CATALOGUE..."
                               class="w-full bg-[#0f172a] border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all uppercase placeholder:text-slate-700 outline-none">
                        <svg class="w-5 h-5 absolute left-4 top-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>

                <div id="results-container-options" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>

                <div class="p-4 bg-white/5 text-center border-t border-white/5">
                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest">Appuyez sur Échap pour annuler</p>
                </div>
            </div>
        `;
        div.querySelector('.cvr').addEventListener('click',rvt=>{
            rvt.preventDefault();
            div.classList.add('hidden');
        })
        return div;
    }

    setupSearchEvent(modal) {
        const input = modal.querySelector('#modal-search-input-options');
        const container = modal.querySelector('#results-container-options');

        input.oninput = () => {
            const query = input.value.toLowerCase().trim();
            const filtered = this.allOptions.filter(o => o.name.toLowerCase().includes(query));
            this.renderOptions(filtered, container, modal);
        };

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

    renderOptions(options, container, modal) {
        container.innerHTML = '';
        if (options.length === 0) {
            container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucune option trouvée</div>';
            return;
        }

        options.forEach(option => {
            const card = document.createElement('div');
            card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-blue-600/10 hover:border-blue-500/40 transition-all cursor-pointer group animate-in slide-in-from-bottom-2';

            const imgHtml = option.image
                ? `<img src="${option.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg border border-white/10 group-hover:scale-105 transition-transform" onerror="this.src='/provider/images/favicon.png'">`
                : `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">OPT</div>`;

            card.innerHTML = `
                ${imgHtml}
                <div class="flex-grow">
                    <div class="text-white font-black text-xs uppercase tracking-wider mb-1">${option.name}</div>
                    <div class="flex gap-4">
                        <span class="text-blue-500 text-[10px] font-black uppercase tracking-tighter">PRIX HT: ${option.price}€</span>
                    </div>
                </div>
                <div class="w-10 h-10 rounded-xl bg-slate-800 group-hover:bg-blue-600 flex items-center justify-center text-slate-500 group-hover:text-white transition-all shadow-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                </div>
            `;

            card.onclick = () => {
                this.fillOptionLine(option);
                modal.classList.add('hidden');
            };
            container.appendChild(card);
        });
    }

    fillOptionLine(option) {
        let row = this.parentElement.parentElement.parentElement.parentElement.parentElement
        if (row) {
            const nameInput = row.querySelector('input[name*="[product]"]');
            const priceInput = row.querySelector('input[name*="[price_ht]"]');
            if(nameInput) nameInput.value = option.name;
            if(priceInput) priceInput.value = option.price;

            const fieldset = row.querySelector('fieldset');
            if (fieldset) {
                fieldset.classList.add('border-blue-500/50', 'bg-blue-600/5');
                setTimeout(() => fieldset.classList.remove('border-blue-500/50', 'bg-blue-600/5'), 800);
            }
        }
    }
}

/**
 * RECHERCHE PRODUITS DEVIS
 */
export class SearchProductDevis extends HTMLButtonElement {
    constructor() {
        super();
        this.allProducts = [];
    }

    connectedCallback() {
        this.addEventListener('click', (e) => {
            e.preventDefault();
            this.openModal();
        });
    }

    async openModal() {
        let modal = document.getElementById('modal-search-product');
        if (!modal) {
            modal = this.createModalStructure();
            document.body.appendChild(modal);
            this.setupSearchEvent(modal);
        }

        modal.classList.remove('hidden');
        const container = modal.querySelector('#results-container');
        const searchInput = modal.querySelector('#modal-search-input');

        searchInput.value = '';
        container.innerHTML = `
            <div class="flex flex-col items-center justify-center p-12 text-slate-500">
                <div class="w-8 h-8 border-2 border-purple-500 border-t-transparent rounded-full animate-spin mb-4"></div>
                <p class="text-[10px] font-black uppercase tracking-[0.2em]">Synchronisation catalogue...</p>
            </div>
        `;

        try {
            const response = await fetch('/crm/products/json');
            this.allProducts = await response.json();
            this.renderProducts(this.allProducts, container, modal);
            setTimeout(() => searchInput.focus(), 100);
        } catch (error) {
            container.innerHTML = '<div class="text-rose-500 p-8 text-center text-xs font-bold uppercase">Erreur de liaison catalogue produits.</div>';
        }
    }

    createModalStructure() {
        const div = document.createElement('div');
        div.id = 'modal-search-product';
        div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-[#0f172a]/90 backdrop-blur-md hidden animate-in fade-in duration-300';
        div.innerHTML = `
            <div class="bg-[#1e293b] border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[2.5rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
                <div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
                    <div class="flex justify-between items-center">
                        <h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
                            <span class="w-2 h-2 bg-purple-500 rounded-full mr-3 animate-pulse shadow-[0_0_8px_#a855f7]"></span>
                            Sélection Produit
                        </h3>
                        <button type="button" class="cvr p-2 text-slate-400 hover:text-white transition-colors">
                            <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.5" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>

                    <div class="relative">
                        <input type="text" id="modal-search-input" placeholder="NOM OU RÉFÉRENCE PRODUIT..."
                               class="w-full bg-[#0f172a] border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 transition-all uppercase placeholder:text-slate-700 outline-none">
                        <svg class="w-5 h-5 absolute left-4 top-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>

                <div id="results-container" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>

                <div class="p-4 bg-white/5 text-center border-t border-white/5">
                    <p class="text-[9px] text-slate-500 font-black uppercase tracking-widest">Appuyez sur Échap pour annuler</p>
                </div>
            </div>
        `;
        div.querySelector('.cvr').addEventListener('click',rvt=>{
            rvt.preventDefault();
            div.classList.add('hidden');
        })
        return div;
    }

    setupSearchEvent(modal) {
        const input = modal.querySelector('#modal-search-input');
        const container = modal.querySelector('#results-container');

        input.oninput = () => {
            const query = input.value.toLowerCase().trim();
            const filtered = this.allProducts.filter(p => p.name.toLowerCase().includes(query));
            this.renderProducts(filtered, container, modal);
        };

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

    renderProducts(products, container, modal) {
        container.innerHTML = '';
        if (products.length === 0) {
            container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucun produit trouvé</div>';
            return;
        }

        products.forEach(product => {
            const card = document.createElement('div');
            card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-purple-600/10 hover:border-purple-500/40 transition-all cursor-pointer group animate-in slide-in-from-bottom-2';

            const imgHtml = product.image
                ? `<img src="${product.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg border border-white/10 group-hover:scale-105 transition-transform">`
                : `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">IMG</div>`;

            card.innerHTML = `
                ${imgHtml}
                <div class="flex-grow">
                    <div class="text-white font-black text-xs uppercase tracking-wider mb-1">${product.name}</div>
                    <div class="flex gap-4">
                        <span class="text-purple-400 text-[10px] font-black uppercase tracking-tighter">1J: ${product.price1day}€</span>
                        <span class="text-slate-500 text-[10px] font-black uppercase tracking-tighter">SUP: ${product.priceSup}€</span>
                    </div>
                </div>
                <div class="w-10 h-10 rounded-xl bg-slate-800 group-hover:bg-purple-600 flex items-center justify-center text-slate-500 group-hover:text-white transition-all shadow-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                </div>
            `;

            card.onclick = () => {
                this.fillFormLine(product);
                modal.classList.add('hidden');
            };
            container.appendChild(card);
        });
    }

    fillFormLine(product) {
        let row = this.parentElement.parentElement.parentElement.parentElement.parentElement
        if (row) {
            const nameInput = row.querySelector('input[name*="[product]"]');
            const priceInput = row.querySelector('input[name*="[price_ht]"]');
            const priceSupInput = row.querySelector('input[name*="[price_sup_ht]"]');

            if(nameInput) nameInput.value = product.name;
            if(priceInput) priceInput.value = product.price1day;
            if(priceSupInput) priceSupInput.value = product.priceSup;

            const fieldset = row.querySelector('fieldset');
            if (fieldset) {
                fieldset.classList.add('border-purple-500/50', 'bg-purple-600/5');
                setTimeout(() => fieldset.classList.remove('border-purple-500/50', 'bg-purple-600/5'), 800);
            }
        }
    }
}