import { getToken } from '../../common/common.js';
import { capitalizeFirstLetter } from '../../common/common.js';

import Ajax from '../../components/ajax.js';
import ClassSelect from '../../components/select2.js';


class DisenioCubierta {

    constructor(domItem, wizardForm, validatorStepper, presupuestoCliente) {

        this.domItem = domItem;
        this.allowNext = true;

        this.presupuestoCliente = presupuestoCliente;

        this.csrf_token = getToken();
        this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();

        this.wizardStep = wizardForm.querySelector('#cubierta-libro');
        this.validatorStepper = validatorStepper;

        this.disenioCubierta = this.domItem.find(".tipo-cubierta");
        this.solapasCubierta = this.domItem.find(".solapas-cubierta");
        this.textoPapelCubierta = this.domItem.find("#textoPapelCubierta");

        this.divPapelEspecial = this.domItem.find("#divPapelEspecialCubierta");
        this.papelEspecial = new ClassSelect($("#papelEspecialCubiertaSel"),
            '/papelesgenericos/selectpapelespecial',
            window.translations["selectPapel"],
            false,
            {
                [this.csrf_token]: this.csrf_hash,
                tipo: 'colorhq',
                cubierta: 1,
            }
        );

        this.divSolapas = this.domItem.find("#divSolapasCubierta");
        this.divCarasImpresion = this.domItem.find("#divCarasImpresion");
        this.divConfigGuardas = this.domItem.find("#divConfigTapaDura");

        this.carasCubierta = this.domItem.find("#carasCubierta");

        this.tapaBlanda = this.domItem.find("#tapaBlanda");
        this.tapaDuraLomoRecto = this.domItem.find("#tapaDura");
        this.tapaDuraLomoRedondo = this.domItem.find("#tapaDuraLomoRedondo");

        this.sinSolapas = this.domItem.find("#solapasCubiertaNo");
        this.conSolapas = this.domItem.find("#solapasCubiertaSi");
        this.divTamanioSolapas = this.domItem.find("#divTamanioSolapas");
        this.textoSolapasCubierta = this.domItem.find("#textoSolapasCubierta");
        this.tamanioSolapasCubierta = $(this.domItem.find("#solapasCubierta"));

        this.papelGuardas = this.domItem.find("#papelGuardas");
        this.guardasImpresas = this.domItem.find("#guardasImpresas");
        this.cabezada = this.domItem.find("#cabezada");

        this.cartulinaEstucada = this.domItem.find("#cartulinaEstucada");
        this.estucadoMate = this.domItem.find("#estucadoMate");

        this.divPapelCubierta = this.domItem.find("#divPapelCubierta");
        this.divGramajeCubierta = this.domItem.find("#divGramajeCubierta");

        this.acabadoCubierta = this.domItem.find("#acabadoCubierta");
        this.cubiertaRetractilado = this.domItem.find("#retractilado");

        this.configuracionSobrecubierta = this.domItem.find(".config-sobrecubierta");
        this.sobrecubierta = this.domItem.find("#addSobrecubierta");
        this.papelSobrecubierta = this.domItem.find("#papelSobrecubierta");
        this.acabadoSobrecubierta = this.domItem.find("#acabadoSobrecubierta");

        this.configuracionFaja = this.domItem.find(".config-faja");
        this.faja = this.domItem.find("#addFaja");

        this.solapasSobrecubierta = this.domItem.find("#solapasSobrecubierta");
        this.textoSolapasSobrecubierta = this.domItem.find("#textoLimitesSolapasSobrecubierta");
        this.solapasFaja = this.domItem.find("#solapasFaja");
        this.altoFaja = this.domItem.find("#altoFaja");

        this.fresado = $(this.domItem.find("#fresado")[0]);
        this.cosido = $(this.domItem.find("#cosido")[0]);

        this.rl_cubierta = $(".rl-cubierta");
        this.rl_papel_cubierta = $("#rl_papel_cubierta");
        this.rl_caras_cubierta = $("#rl_caras_cubierta");
        this.rl_acabado_cubierta = $("#rl_acabado_cubierta");

        this.rl_sobrecubierta = $(".rl-sobrecubierta");
        this.rl_no_sobrecubierta = $("#rl_no_sobrecubierta");
        this.rl_papel_sobrecubierta = $('#rl_papel_sobrecubierta');
        this.rl_tamanio_sobrecubierta = $('#rl_tamanio_sobrecubierta');
        this.rl_acabado_sobrecubierta = $("#rl_acabado_sobrecubierta");

        this.acabadoCubierta = new ClassSelect($("#acabadoCubierta"),
            '/serviciosacabados/getacabados',
            '',
            false,
            {
                [this.csrf_token]: this.csrf_hash,
                "cubierta": 1
            }
        );

        this.acabadoSobrecubierta = new ClassSelect($("#acabadoSobrecubierta"),
            '/serviciosacabados/getacabados',
            '',
            false,
            {
                [this.csrf_token]: this.csrf_hash,
                "sobrecubierta": 1
            }
        );

        this.initValidation();

        // Creamos un nuevo observador que detecta cambios en los atributos
        this.observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    const targetElement = mutation.target;
                    // check if targetElement has class 'selected'
                    if (targetElement.classList.contains('tipo-cubierta')) {
                        this.#handleMenuTipoCubierta();
                    }
                    else if (targetElement.classList.contains('solapas-cubierta')) {
                        this.#handleMenuSolapas();
                    }
                }
            });
        });

        this.papelCubierta = null;
        this.gramaje = null;

        this.cargando = true;
    }


    init() {

        const self = this;

        this.papelEspecial.init();
        this.acabadoCubierta.init();
        this.acabadoSobrecubierta.init();

        $('#papelEspecialCubiertaSel').on("change", this.#handlePapelCubiertaEspecial.bind(this));

        // Eventos
        this.disenioCubierta.on('click', this.#handleDisenioCubierta.bind(this));
        this.solapasCubierta.on('click', this.#handleSolapasCubierta.bind(this));
        this.tamanioSolapasCubierta.on('change', this.#handleTamanioSolapas.bind(this));
        this.altoFaja.on('blur', this.#handleInputs);
        this.solapasSobrecubierta.on('blur', this.#handleInputs);
        this.solapasFaja.on('blur', this.#handleInputs);

        this.carasCubierta.on('change', this.#handleCarasCubierta.bind(this));

        this.sobrecubierta.on('change', () => {
            this.sobrecubierta.is(":checked") ? this.configuracionSobrecubierta.removeClass("d-none") : this.configuracionSobrecubierta.addClass("d-none")
        }
        );
        this.faja.on('change', () => {
            this.faja.is(":checked") ? this.configuracionFaja.removeClass("d-none") : this.configuracionFaja.addClass("d-none")
        }
        );


        // Observadores
        this.observer.observe(this.tapaBlanda[0], { attributes: true });
        this.observer.observe(this.tapaDuraLomoRecto[0], { attributes: true });
        this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
        this.observer.observe(this.conSolapas[0], { attributes: true });
        this.observer.observe(this.sinSolapas[0], { attributes: true });
    }


    cargarDatos(datosCubierta, datosGuardas, datosSobrecubierta) {

        this.papelCubierta = datosCubierta.papel.id;
        this.gramaje = datosCubierta.gramaje;

        if (datosCubierta.lomoRedondo) {
            this.tapaDuraLomoRedondo.trigger('click');
        }
        else {
            if (datosCubierta.tapa == "dura") {
                this.tapaDuraLomoRecto.trigger('click');
            }
            else {
                this.tapaBlanda.trigger('click');
            }
        }

        if (datosCubierta.tapa == "dura") {
            this.papelGuardas.val(datosGuardas.papel.code + "_" + datosGuardas.gramaje).trigger('change');
            this.guardasImpresas.val(datosGuardas.paginas).trigger('change');
            this.cabezada.val(datosCubierta.cabezada).trigger('change');
        }
        else {
            this.carasCubierta.val(datosCubierta.paginas).trigger('change');
            if (datosCubierta.solapas) {
                this.conSolapas.trigger('click');
                this.tamanioSolapasCubierta.val(datosCubierta.solapas_ancho);

            }
            else {
                this.sinSolapas.trigger('click');
            }
        }

        this.divPapelCubierta.find(`[cod="${datosCubierta.papel.code}"]`).addClass('selected');

        setTimeout(function () {
            $(`#divGramajeCubierta .gramaje-cubierta input[data-value="${datosCubierta.gramaje}"]`).trigger('click');
        }, 0);

        // JJO this.cubiertaPlastificado.val(datosCubierta.plastificado).trigger('change');
        //this.cubiertaBarniz.val(datosCubierta.barniz).trigger('change');
        //this.cubiertaEstampado.val(datosCubierta.estampado).trigger('change');
        if (datosCubierta.retractilado) {
            setTimeout(() => {
                this.cubiertaRetractilado.trigger('click');
            }, 0);
        }

        if (datosSobrecubierta && datosSobrecubierta.papel) {
            this.sobrecubierta.trigger('click');
            this.papelSobrecubierta.val(datosSobrecubierta.papel.code + "_" + datosSobrecubierta.gramaje).trigger('change');
            this.solapasSobrecubierta.val(datosSobrecubierta.solapas_ancho);
            // JJO this.plastificadoSobrecubierta.val(datosSobrecubierta.plastificado).trigger('change');
        }

    }


    initValidation() {

        const stepper = this.validatorStepper;

        this.formValidation = FormValidation.formValidation(this.wizardStep, {
            fields: {
                div_tipo_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divTipoCubierta'); // Selecciona el div

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.tipo-cubierta.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_tipo_cubierta" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].tipo_cubierta}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_solapas_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const div = $('#divSolapasCubierta');
                                if (div.hasClass("d-none")) return true;

                                div.find('.fv-plugins-message-container').remove();
                                if ($('.solapas-cubierta.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    div.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_solapas_cubierta" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].opcion_solapas}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_papel_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {

                                $('#divPapelCubierta').find('.fv-plugins-message-container').remove();
                                $('#divPapelEspecialCubierta').find('.fv-plugins-message-container').remove();

                                const papelSeleccionado = $('.custom-selector-papel-cubierta input[type="radio"]:checked');
                                if (papelSeleccionado.length > 0) {
                                    return true;

                                }
                                else {
                                    $('#divPapelCubierta').append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].papel_interior}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_papel_especial_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {

                                $('#divPapelEspecialCubierta').find('.fv-plugins-message-container').remove();
                                if ($('#divPapelEspecialCubierta').hasClass("d-none")) return true;

                                if ($('#papelEspecialCubiertaSel').select2('data').length > 0)
                                    return true;
                                else {
                                    $('#divPapelEspecialCubierta').append(`
                                            <div class="fv-plugins-message-container invalid-feedback">
                                                <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
                                                    ${window.translations["validation"].papel_interior}
                                                </div>
                                            </div>
                                        `);
                                    return false;
                                }

                            }
                        }
                    }
                },
                div_gramaje_cubierta: {
                    validators: {
                        callback: {
                            callback: function (input) {

                                const divGramajeInterior = $('#divGramajeCubierta'); // Selecciona el div
                                divGramajeInterior.find('.fv-plugins-message-container').remove();

                                const gramajeSeleccionado = $('.custom-selector-gramaje-cubierta input[type="radio"]:checked');
                                if (gramajeSeleccionado.length > 0) {
                                    return true;

                                }
                                else {
                                    divGramajeInterior.append(`
                                    <div class="fv-plugins-message-container invalid-feedback">
                                        <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
                                            ${window.translations["validation"].gramaje_interior}
                                        </div>
                                    </div>
                                `);
                                }
                                return false;
                            },
                        }
                    }
                },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    // Use this for enabling/changing valid/invalid class
                    // eleInvalidClass: '',
                    eleValidClass: '',
                    rowSelector: function (field, ele) {
                        // field is the field name
                        // ele is the field element
                        switch (field) {
                            case 'div_tipo_cubierta':
                            case 'div_solapas_cubierta':
                            case 'div_papel_cubierta':
                            case 'div_gramaje_cubierta':
                            case 'div_papel_especial_cubierta':
                                return '.col-sm-10';
                            default:
                                return '.col-sm-3';
                        }
                    }
                }),
                autoFocus: new FormValidation.plugins.AutoFocus(),
                submitButton: new FormValidation.plugins.SubmitButton()
            }
        }).on('core.form.valid', () => {
            if (this.allowNext)
                stepper.next();
        });
    }


    processMenuLateral() {

        let menu_off = true;

        const papel = this.getPapel(true);
        const gramaje = this.getGramaje();

        if (papel != null && gramaje != null) {

            this.rl_papel_cubierta.text(papel + " " + gramaje + " gr");
            this.rl_acabado_cubierta.text(this.domItem.find("#plastificado").children("option:selected").text());
            this.rl_papel_cubierta.removeClass('d-none');
            this.rl_acabado_cubierta.removeClass('d-none');

            if (this.carasCubierta.find('option:selected').length > 0) {
                this.rl_caras_cubierta.text("Impresa " + this.carasCubierta.find('option:selected').text());
                this.rl_caras_cubierta.removeClass('d-none');
                menu_off = false;
            }
            else {
                this.rl_caras_cubierta.addClass('d-none');
            }

            menu_off = false;
        }
        else {
            this.rl_papel_cubierta.addClass('d-none');
            this.rl_acabado_cubierta.addClass('d-none');
        }

        if (!menu_off)
            this.rl_cubierta.removeClass('d-none');
        else
            this.rl_cubierta.addClass('d-none');

        // Sobrecubierta solo se muestra si cubierta ok
        if (!this.rl_cubierta.hasClass('d-none')) {
            this.rl_sobrecubierta.removeClass('d-none');
            if (!this.sobrecubierta.is(":checked")) {
                this.rl_no_sobrecubierta.removeClass('d-none');
                this.rl_papel_sobrecubierta.addClass('d-none');
                this.rl_tamanio_sobrecubierta.addClass('d-none');
                this.rl_acabado_sobrecubierta.addClass('d-none');
            }
            else {
                this.rl_no_sobrecubierta.addClass('d-none');
                this.rl_papel_sobrecubierta.removeClass('d-none');
                this.rl_tamanio_sobrecubierta.removeClass('d-none');
                this.rl_acabado_sobrecubierta.removeClass('d-none');

                const sobrecubierta = this.getSobrecubierta(true);
                this.rl_papel_sobrecubierta.text(sobrecubierta.papel + " " + sobrecubierta.gramaje + " gr")
                this.rl_tamanio_sobrecubierta.text("Solapas: " + sobrecubierta.solapas + " mm")
                let acabado_text = sobrecubierta.plastificado;
                if (acabado_text.includes("Sin plastificar"))
                    acabado_text = "Sin plastificar";
                this.rl_acabado_sobrecubierta.text(acabado_text);
            }
        }
        else {
            this.rl_sobrecubierta.addClass('d-none');
        }

    }


    getSolapasCubierta() {

        try {

            if (this.solapasCubierta.hasClass("selected").length == 0)
                return null;
            else {
                if (this.sinSolapas.hasClass("selected"))
                    return false;
                else if (this.conSolapas.hasClass("selected"))
                    return parseInt(this.tamanioSolapasCubierta.val());
                else
                    return null;
            }
        }
        catch (error) {
            return null;
        }
    }


    getPapel(forResumen = false) {

        try {
            let checkedPapel = $('.custom-selector-papel-cubierta input[type="radio"]:checked');
            if (this.papelCubierta != null && checkedPapel != null && checkedPapel.length > 0) {
                if (forResumen) {

                    if (checkedPapel.length == 0)
                        return null;
                    let radioButtonId = checkedPapel[0].id;
                    if (radioButtonId == 'papelEspecialCubierta')
                        return capitalizeFirstLetter(this.papelEspecial.getText());
                    else {
                        let associatedLabel = $('label[for="' + radioButtonId + '"]');
                        return capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
                    }
                }
                else {
                    if (this.divPapelEspecial.hasClass('d-none'))
                        return this.papelCubierta;
                    else {
                        return this.papelEspecial.getVal();
                    }
                }
            }
            return null;
        }
        catch (e) {
            return null;
        }
    }


    getGramaje() {

        let checkedGramaje = $('.custom-selector-gramaje-cubierta input[type="radio"]:checked');

        try {

                if (checkedGramaje.length == 0)
                    return null;
                return checkedGramaje[0].id.split('_')[1];
        } catch (e) {
            return null;
        }
    }

    getAcabados(forResumen = false) {
        try {
            let acabados = {};
            if (forResumen) {
                acabados = 'Plastificado ' + this.domItem.find("#plastificado").children("option:selected").text();
                if (this.domItem.find("#barniz").children("option:selected").val() != 'NONE')
                    acabados += ", Barniz UVI " + this.domItem.find("#barniz").children("option:selected").text();
                if (this.domItem.find("#estampado").children("option:selected").val() != 'NONE')
                    acabados += ", Estampado " + this.domItem.find("#estampado").children("option:selected").text();
                return acabados;
            }
            else {
                acabados.plastificado = this.domItem.find("#plastificado ").children("option:selected").val();
                acabados.barniz = this.domItem.find("#barniz").children("option:selected").val();
                acabados.estampado = this.domItem.find("#estampado").children("option:selected").val();
            }
            return acabados;
        } catch (e) {
            return null;
        }
    }


    getCabezada(forResumen = false) {

        try {
            if (this.tapaBlanda.hasClass("selected"))
                return false;
            else
                if (forResumen)
                    return this.domItem.find("#cabezada").children("option:selected").text();
                else
                    return this.domItem.find("#cabezada").children("option:selected").val();
        } catch (e) {
            return null;
        }
    }


    getGuardas(forResumen = false) {

        try {
            if (this.tapaBlanda.hasClass("selected")) {
                return false;
            }
            else {
                let guardas = {};

                if (forResumen) {
                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").text();
                    guardas.papel = papelGuardas.split(' ')[0] + ' ' + papelGuardas.split(' ')[1];
                    guardas.gramaje = papelGuardas.split(' ')[2];
                    guardas.caras = this.domItem.find("#guardasImpresas").children("option:selected").text();
                }
                else {
                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").val();
                    guardas.papel = papelGuardas.split('_')[0];
                    guardas.gramaje = papelGuardas.split('_')[1];
                    guardas.caras = this.domItem.find("#guardasImpresas").children("option:selected").val();
                }
                return guardas;
            }

        } catch (e) {
            return null;
        }
    }

    getSobrecubierta(forResumen = false) {

        try {
            if (!this.sobrecubierta.is(":checked")) {
                return false;
            }
            else {
                if (forResumen) {
                    let sobrecubierta = {};
                    const papel = this.domItem.find("#papelSobrecubierta").children("option:selected").text();
                    sobrecubierta.papel = papel.split(' ')[0] + ' ' + papel.split(' ')[1];
                    sobrecubierta.gramaje = papel.split(' ')[2];
                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
                    sobrecubierta.plastificado = 'Plastificado ' + this.domItem.find("#plastificadoSobrecubierta").children("option:selected").text();
                    return sobrecubierta;
                }
                else {
                    let sobrecubierta = {};
                    let papel = this.domItem.find("#papelSobrecubierta").children("option:selected").val();
                    sobrecubierta.papel = papel.split('_')[0];
                    sobrecubierta.gramaje = papel.split('_')[1];
                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
                    sobrecubierta.plastificado = this.domItem.find("#plastificadoSobrecubierta").children("option:selected").val();
                    return sobrecubierta;
                }
            }

        } catch (e) {
            return null;
        }
    }


    getFaja() {

        try {
            if (!this.faja.is(":checked")) {
                return false;
            }
            else {
                let faja = {};
                faja.alto = this.domItem.find("#altoFaja").val();
                let papel = this.domItem.find("#papelFaja").children("option:selected").val();
                faja.papel = papel.split('_')[0];
                faja.gramaje = papel.split('_')[1];
                faja.solapas = this.domItem.find("#solapasFaja").val();
                faja.plastificado = this.domItem.find("#plastificadoFaja").children("option:selected").val();
                return faja;
            }

        } catch (e) {
            return null;
        }
    }

    #handleCarasCubierta() {
        // Si es a dos caras
        if (this.carasCubierta.val() == 4) {
            this.cartulinaEstucada.addClass("d-none");
        }
        else {
            this.cartulinaEstucada.removeClass("d-none");
        }
    }


    #handleDisenioCubierta(event) {
        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);

        let class2Find = '.tipo-cubierta';

        let containers = element.closest(class2Find).parent().find(class2Find);
        for (let container of containers) {
            if (container != element.closest(class2Find)[0]) {
                $(container).removeClass('selected');
                $(container).find('.image-presupuesto').removeClass('selected');
            }
        }

        element.closest(class2Find).toggleClass('selected');
        element.closest('.image-presupuesto').toggleClass('selected');

        if (this.tapaBlanda.hasClass("selected")) {
            if (this.carasCubierta.val() == 2) {
                this.cartulinaEstucada.removeClass("d-none");
            }
            this.divGramajeCubierta.addClass("d-none");
        }
        else {
            this.cartulinaEstucada.addClass("d-none");
            this.estucadoMate.addClass("selected");
            this.divGramajeCubierta.removeClass("d-none");
        }

        element.trigger('change');
    }


    #handleSolapasCubierta(event) {
        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);

        let class2Find = '.solapas-cubierta';

        let containers = element.closest(class2Find).parent().find(class2Find);
        for (let container of containers) {
            if (container != element.closest(class2Find)[0]) {
                $(container).removeClass('selected');
                $(container).find('.image-presupuesto').removeClass('selected');
            }
        }

        element.closest(class2Find).toggleClass('selected');
        element.closest('.image-presupuesto').toggleClass('selected');

        element.trigger('change');
    }


    #handleMenuTipoCubierta() {

        if (this.tapaBlanda.hasClass("selected")) {

            this.divSolapas.removeClass("d-none");
            this.divCarasImpresion.removeClass("d-none");
            this.divConfigGuardas.addClass("d-none");
        }
        else if (this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")) {
            this.solapasCubierta.removeClass("selected");
            this.divSolapas.addClass("d-none");
            this.divCarasImpresion.addClass("d-none");
            this.divConfigGuardas.removeClass("d-none");
        }
        else {
            this.divSolapas.addClass("d-none");
            this.divCarasImpresion.addClass("d-none");
            this.divConfigGuardas.addClass("d-none");
        }

        this.#handleMenuPapel();
    }


    #handleMenuSolapas() {

        if (this.conSolapas.hasClass("selected")) {
            this.divTamanioSolapas.removeClass("d-none");
        }
        else {
            this.divTamanioSolapas.addClass("d-none");
        }
    }

    #handleMenuPapel() {

        this.divGramajeCubierta.empty();
        const tapa_dura = this.tapaBlanda.hasClass("selected") ? 0 : 1;
        new Ajax('/papelesgenericos/getpapelcliente',
            {
                [this.csrf_token]: this.csrf_hash,
                tipo: 'colorhq',
                cubierta: 1,
                tapa_dura: tapa_dura
            },
            {},
            (response) => { this.fillPapeles(response); },
            (response) => { console.log(response); }
        ).get();
    }


    #handlePapelCubiertaEspecial() {

        const context = this;

        this.papelCubierta = this.papelEspecial.getVal();
        const tapa_dura = this.tapaBlanda.hasClass("selected") ? 0 : 1;

        new Ajax('/papelesgenericos/getpapelcliente',
            {
                [this.csrf_token]: this.csrf_hash,
                papel: this.papelCubierta,
                tipo: 'colorhq',
                cubierta: 1,
                tapa_dura: tapa_dura,
            },
            {},
            this.fillGramajes.bind(context),
            (response) => { console.log(response); }
        ).get();

    }


    fillPapeles(response) {

        this.divPapelCubierta.empty();
        this.divGramajeCubierta.empty();

        if (response.papeles.length > 0) {
            this.textoPapelCubierta.removeClass('d-none');
        }
        else {
            this.textoPapelCubierta.addClass("d-none");
        }

        response.papeles.forEach(papel => {
            var container = $('<div>', {
                class: 'custom-selector custom-selector-papel-cubierta d-flex flex-column align-items-center justify-content-center'
            });

            var radioButton = $('<input>', {
                type: 'radio',          // Tipo de input
                name: 'calcular-presupuesto papel-cubierta',
                id: 'papelCubierta_' + papel.id,           // ID único
                value: 'option1'        // Valor del radio button
            });

            // Crear una etiqueta para el radio button
            var label = $('<label>', {
                for: 'papelCubierta_' + papel.id,
                text: papel.nombre
            });

            radioButton.on('click', this.#handleGramajeCubierta.bind(this));

            container.append(radioButton).append(label);
            $('#divPapelCubierta').append(container);

            if (this.papelCubierta == papel.id) {
                radioButton.prop('checked', true);
                radioButton.trigger('click');
            }
        });

        if (response.papeles_especiales.length > 0) {
            this.divPapelCubierta.removeClass('d-none');

            var container = $('<div>', {
                class: 'custom-selector custom-selector-papel-cubierta d-flex flex-column align-items-center justify-content-center'
            });

            var radioButton = $('<input>', {
                type: 'radio',
                name: 'calcular-presupuesto papel-cubierta',
                id: 'papelEspecialCubierta',
                value: 'option1'
            });

            // Crear una etiqueta para el radio button
            var label = $('<label>', {
                for: 'papelEspecialCubierta',
                text: 'PAPEL ESPECIAL'
            });

            radioButton.on('click', this.#handleGramajeCubierta.bind(this));

            response.papeles_especiales.forEach(papel => {
                if (papel.id == this.papelCubierta) {
                    radioButton.prop('checked', true);
                    radioButton.trigger('click');

                    this.papelEspecial.setOption(papel.id, papel.nombre);
                    this.#handlePapelCubiertaEspecial();
                }
            });

            container.append(radioButton).append(label);
            $('#divPapelCubierta').append(container);
        }
    }

    #handleGramajeCubierta() {

        const context = this;

        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);
        const papel = element[0].id.split('_')[1];
        this.papelCubierta = papel;
        
        $('#' + papel).prop('checked', true);


        if (element[0].id == 'papelEspecialCubierta') {

            if(!this.cargando)
                this.gramaje = null;
            this.divGramajeCubierta.empty();
            this.divPapelEspecial.removeClass("d-none");
            $('#papelEspecialCubiertaSel').off("change");
            this.papelEspecial.empty();
            $('#papelEspecialCubiertaSel').on("change", this.#handlePapelCubiertaEspecial.bind(this));
            


        }
        else {

            this.divPapelEspecial.addClass("d-none");
            $('#papelEspecialCubiertaSel').off("change");
            this.papelEspecial.empty();
            $('#papelEspecialCubiertaSel').on("change", this.#handlePapelCubiertaEspecial.bind(this));
            this.divGramajeCubierta.empty();
            const tapa_dura = this.tapaBlanda.hasClass("selected") ? 0 : 1;
            new Ajax('/papelesgenericos/getpapelcliente',
                {
                    [this.csrf_token]: this.csrf_hash,
                    papel: papel,
                    tipo: 'colorhq',
                    cubierta: 1,
                    tapa_dura: tapa_dura
                },
                {},
                this.fillGramajes.bind(context),
                (response) => { console.log(response); }
            ).get();
        }
        if (!this.cargando)
            this.gramaje = null;
        else {
            this.cargando = false;
        }
    }


    fillGramajes(response) {


        this.divGramajeCubierta.empty()
        let showGramaje = false;

        if (response.papeles.length <= 0 && response.papeles_especiales.length <= 0) {
            return;
        }

        let papel = response.papeles.length > 0 ? response.papeles : response.papeles_especiales;

        papel.forEach(valor => {

            var container = $('<div>', {
                class: 'custom-selector custom-selector-gramaje-cubierta d-flex flex-column align-items-center justify-content-center gramaje-cubierta',
            });

            var radioButton = $('<input>', {
                type: 'radio',          // Tipo de input
                name: 'calcular-presupuesto gramaje-cubierta',
                id: 'gramajeCubierta_' + valor.gramaje,           // ID único
                value: 'option1'        // Valor del radio button
            });

            // Crear una etiqueta para el radio button
            var label = $('<label>', {
                for: "gramajeCubierta_" + valor.gramaje,
                text: valor.gramaje + " gr"
            });

            radioButton.on('click', (event) => {
                const element = $(event.target);
                const gramaje = element[0].id;

                this.presupuestoCliente.checkForm(event);
            });


            container.append(radioButton).append(label);
            $('#divGramajeCubierta').append(container);

            if (this.gramaje != null) {
                if (this.gramaje == parseInt(valor.gramaje)) {
                    radioButton.prop('checked', true);
                    radioButton.trigger('click');
                }
            }

            showGramaje = true;
        });

        if ($("#divGramajeCubierta").hasClass("d-none") && showGramaje) {
            $("#divGramajeCubierta").removeClass("d-none");
        }
        else if (!showGramaje) {
            $("#divGramajeCubierta").addClass("d-none");
        }
    }


    #handleTamanioSolapas() {

        const min = parseInt(this.tamanioSolapasCubierta[0].min);
        const max = parseInt(this.tamanioSolapasCubierta[0].max);

        if (this.tamanioSolapasCubierta.val() < min || this.tamanioSolapasCubierta.val() == '' || isNaN(this.tamanioSolapasCubierta.val())) {
            this.tamanioSolapasCubierta.val(min);
        }

        else if (this.tamanioSolapasCubierta.val() > max)
            this.tamanioSolapasCubierta.val(max);
    }

    #handleClickGramaje(customOption) {

        const el = customOption[0];

        if (el.checked) {
            // If custom option element is radio, remove checked from the siblings (closest `.row`)
            if (el.type === 'radio') {
                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
                customRadioOptionList.map(function (customRadioOptionEL) {
                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
                })
            }
            el.closest('.custom-option').classList.add('checked')
        } else {
            el.closest('.custom-option').classList.remove('checked')
        }
    }

    #handleInputs() {

        const id = $(this).attr('id');
        const min = parseInt($('#' + id).attr('min'));
        const max = parseInt($('#' + id).attr('max'));

        if ($('#' + id).val() < min || $('#' + id).val() == '' || isNaN($('#' + id).val())) {
            $('#' + id).val(min);
        }

        else if ($('#' + id).val() > max)
            $('#' + id).val(max);
    }
}


export default DisenioCubierta;