
$(document).ready(function () {
    
    if ($('.toggle-visibility')){
        $('.toggle-visibility').on('click', function (e) {
            e.preventDefault();
            const $icon = $(this).find('.material-icons');

            $.ajax({
                url: $(this).data('url'),
                method: 'POST',
                data: { 
                    id: $(this).data('id'),
                    objet: $(this).data('objet'),
                    column: $(this).data('column'),
                },
                dataType: 'json',            
            }) 
            .fail(function (data) {
                alert('Erreur : ' + (data.responseJSON.message || 'Échec de l’opération'));
            }
            )
            .done(function (data) {
                if (data.success) {
                    $icon.text(data.new_state ? 'check' : 'close');
                    $icon.css('color', data.new_state ? 'green' : 'red');
                } else {
                    alert('Erreur : ' + (data.message || 'Échec de l’opération'));
                }
            });

        });
    }
     
    
    const fontTitleChoice = document.querySelector('#general_fontTitle')
    const fontTextChoice = document.querySelector('#general_fontText')
    const help = document.querySelectorAll('small');

    if (fontTitleChoice) {
        help[0].style.fontFamily = fontTitleChoice.value;
        fontTitleChoice.addEventListener('change', function() {
            help[0].style.fontFamily = this.value;
        });
    }

    if (fontTextChoice) {
        help[1].style.fontFamily = fontTextChoice.value;
        fontTextChoice.addEventListener('change', function() {
            help[1].style.fontFamily = this.value;
        });
    }


    const $popup = $('.popup-block');

    if($popup){
        const $btnPopup = $('.btn-default');
        const $btnClose = $('.close');
        const $overlay = $('.overlay ')

        $btnPopup.on('click', () => {
            $popup.css('display', 'block');
            $overlay.css('display', 'block');
            setTimeout(() => {
                $popup.css({
                    'opacity': '1',
                    'transform': 'translate(-50%, -50%) ',  // Se déplace à sa position initiale
                    'transition': 'all 0.5s ease'
                });
                $overlay.css({
                    'opacity': '1',
                    'transform': 'translate(0) ',  // Se déplace à sa position initiale
                    'transition': 'all 0.5s ease'
                });
            });
        });

        $btnClose.on('click ', () =>{
            $popup.css({
                'opacity': '0',
                'transform': 'translateY(-100%)',  // Déplace l'élément en bas
                'transition': 'transform 0.5s ease, opacity 0.8s ease'  // Animation fluide de la translation et de l'opacité
            });
            $overlay.css({
                'opacity': 0,
                'transform': 'translateX(-100%)',
                'transition': 'transform 0.5s ease, opacity 0.8s ease'
            });

            setTimeout(() => {
                $popup.css('display', 'none');
                $overlay.css('display', 'none');
            }, 1000);


        })


    }

       // --------------------------------------------------------
    // VISIBILITÉ CONDITIONNELLE
    // --------------------------------------------------------

    const $typeProduit  = $('#product_home_typeProduit');
    const $nbProduit    = $('#product_home_nbProduit').closest('.form-group');
    const $customWrap   = $('[data-product-search]').closest('.form-group');
    const $productCards = $('#product-cards-container');
   

      
    

    function toggleFields() {
        const val = $typeProduit.val();

        if (val === 'custom') {
            $customWrap.show();
            $productCards.show();
            $nbProduit.hide();
        } else {
            $customWrap.hide();
            $productCards.hide();
            $nbProduit.show();
        }
    }

    // Init au chargement
    toggleFields();

    // Sur changement
    $typeProduit.on('change', toggleFields);


    // --------------------------------------------------------
    // WIDGET RECHERCHE PRODUIT
    // --------------------------------------------------------

    const $input      = $('[data-product-search]');
    const $idsField   = $('[data-product-ids]');
    const $dropdown   = $('<ul class="product-search-dropdown"></ul>');
    let   searchTimer = null;
    let   selectedIds = [];



    // Initialise les IDs déjà sauvegardés (mode edit)
    if ($idsField.val()) {
        selectedIds = $idsField.val().split(',').filter(Boolean).map(Number);
    }

    // Insère le dropdown après l'input
    $input.after($dropdown);

    // Insère le container des cards après le dropdown
    $input.closest('.form-group').after(
        $('<div id="product-cards-container" class="product-cards-wrap"></div>')
    );

    const $cards = $('#product-cards-container');


    // --------------------------------------------------------
    // FRAPPE → RECHERCHE AJAX
    // --------------------------------------------------------

    $input.on('input', function () {
        const $token = $('[data-token]').data('token');
        const $baseUrl = $('.admin').data('base-url');
        const q = $(this).val().trim();

        clearTimeout(searchTimer);
        $dropdown.empty().hide();

        if (q.length < 1) return;

        searchTimer = setTimeout(function () {

            $.ajax({
                url: $baseUrl + '/index.php/modules/polarisprestatheme/product-search?_token=' + $token,
                method: 'GET',
                data: { q },
                success: function (products) {
                       
                    $dropdown.empty();

                    if (!products.length) {
                        $dropdown.append('<li class="no-result">Aucun produit trouvé</li>');
                        $dropdown.show();
                        return;
                    }

                    products.forEach(function (p) {

                        // Ne pas proposer un produit déjà sélectionné
                        if (selectedIds.includes(p.id)) return;

                        const img = p.image
                            ? `<img src="${p.image}" alt="${p.name}">`
                            : `<span class="no-img">?</span>`;

                        const $li = $(`
                            <li class="product-suggestion" data-id="${p.id}" data-name="${p.name}" data-image="${p.image ?? ''}">
                                ${img}
                                <span class="product-suggestion-name">${p.name}</span>
                            </li>
                        `);

                        $dropdown.append($li);
                    });

                    $dropdown.show();
                }
            });

        }, 300); // debounce 300ms
    });


    // --------------------------------------------------------
    // CLIC SUR SUGGESTION → AJOUTE LA CARD
    // --------------------------------------------------------

    $(document).on('click', '.product-suggestion', function () {

        const id    = $(this).data('id');
        const name  = $(this).data('name');
        const image = $(this).data('image');

        addProductCard(id, name, image);

        $input.val('');
        $dropdown.empty().hide();
    });


    // --------------------------------------------------------
    // ENTRÉE → SÉLECTIONNE LE PREMIER RÉSULTAT
    // --------------------------------------------------------

    $input.on('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const $first = $dropdown.find('.product-suggestion').first();
            if ($first.length) $first.trigger('click');
        }
    });


    // --------------------------------------------------------
    // FERME LE DROPDOWN AU CLIC AILLEURS
    // --------------------------------------------------------

    $(document).on('click', function (e) {
        if (!$(e.target).closest('.form-group').length) {
            $dropdown.empty().hide();
        }
    });


    // --------------------------------------------------------
    // AJOUTE UNE CARD PRODUIT
    // --------------------------------------------------------

    function addProductCard(id, name, image) {
    
        if (selectedIds.includes(id)) return;
       
        selectedIds.push(id);
        updateIdsField();

        const img = image
            ? `<img src="${image}" alt="${name}">`
            : `<div class="card-no-img">?</div>`;

        const $card = $(`
            <div class="product-card" data-id="${id}">
                ${img}
                <div class="product-card-info">
                    <span class="product-card-name">${name}</span>
                </div>
                <svg class="product-card-remove" data-id="${id}" aria-hidden="true" focusable="false" viewBox="0 0 20 24" role="img" width="16px" height="16px" fill="none"><path stroke="currentColor" stroke-width="3" d="M18.973 5.027L5.028 18.972m0-13.945l13.944 13.945"></path></svg>
            </div>
        `);

        $cards.append($card);
    }


    // --------------------------------------------------------
    // SUPPRIME UNE CARD
    // --------------------------------------------------------

    $(document).on('click', '.product-card-remove', function () {

        const id = Number($(this).data('id'));

        selectedIds = selectedIds.filter(i => i !== id);
        updateIdsField();

        $(this).closest('.product-card').remove();
    });


    // --------------------------------------------------------
    // MET À JOUR LE CHAMP CACHÉ
    // --------------------------------------------------------

    function updateIdsField() {
        $idsField.val(selectedIds.join(','));
    }


    // --------------------------------------------------------
    // CHARGEMENT INITIAL DES CARDS (mode edit)
    // --------------------------------------------------------

    
    if ($idsField.val()) {

    // Sauvegarde les IDs puis vide le tableau
    // pour laisser addProductCard les réinjecter
    const initialIds = $idsField.val().split(',').filter(Boolean).map(Number);
    selectedIds = []; // 👈 on vide pour ne pas bloquer includes()

    setTimeout(function() {

        initialIds.forEach(function(id) {
            const $token = $('[data-token]').data('token');
            const $baseUrl = $('.admin').data('base-url');

            $.ajax({
                url: $baseUrl + '/index.php/modules/polarisprestatheme/product-search?_token=' + $token,
                method: 'GET',
                dataType: 'json',
                data: { q: id },
                success: function(products) {
                    if (Array.isArray(products) && products.length) {
                        const p = products[0];
                        addProductCard(p.id, p.name, p.image);
                    }
                }
            });
        });

    }, 100);
}

});
