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 DisenioInterior {

    constructor(domItem, wizardForm, validatorStepper, presupuestoCliente) {

        this.domItem = domItem;
        this.presupuestoCliente = presupuestoCliente;

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

        this.wizardStep = wizardForm.querySelector('#interior-libro');
        this.validatorStepper = validatorStepper;
        this.allowNext = true;

        this.disenioInterior = this.domItem.find(".disenio-interior");
        this.divPapelInterior = this.domItem.find("#divPapelInterior");
        this.textoPapelInterior = this.domItem.find("#textoPapelInterior");
        this.textoPapelInteriorColor = this.domItem.find("#textoPapelInteriorColor");
        this.divPapelInteriorColor = this.domItem.find("#divPapelInteriorColor");
        this.divPapelEspecialInterior = this.domItem.find("#divPapelEspecialInterior");
        this.divPapelEspecialInteriorColor = this.domItem.find("#divPapelEspecialInteriorColor");
        this.papelEspecialInterior = this.domItem.find("#papelEspecialInterior");
        this.divGramajeInterior = this.domItem.find("#divGramajeInterior");
        this.divGramajeInteriorColor = this.domItem.find("#divGramajeInteriorColor");

        this.negroEstandar = this.domItem.find("#negroEstandar");
        this.negroPremium = this.domItem.find("#negroPremium");
        this.colorEstandar = this.domItem.find("#colorEstandar");
        this.colorPremium = this.domItem.find("#colorPremium");

        this.interiorColor = this.domItem.find(".interior-color");
        this.disenioInterior_color = this.domItem.find(".disenio-interior-color");
        this.papelInterior_color = this.domItem.find(".papel-interior-color");

        this.colorEstandar_color = this.domItem.find("#colorEstandarColor");
        this.colorPremium_color = this.domItem.find("#colorPremiumColor");

        this.gramaje_color = this.domItem.find(".check-interior-color-gramaje");

        this.checksGramaje = $('.gramaje-interior');

        this.rl_interior = $(".rl-interior");
        this.rl_tipo_interior = $("#rl_tipo_interior");
        this.rl_papel_interior = $("#rl_papel_interior");
        this.rl_papel_interior_color = $("#rl_papel_interior_color");

        this.papelEspecial = new ClassSelect($("#papelEspecialInterior"),
            '/papelesgenericos/selectpapelespecial',
            window.translations["selectPapel"],
            false,
            {
                [this.csrf_token]: this.csrf_hash,
                tipo: this.getTipoImpresion(),
                cubierta: 0,
            }
        );
        this.papelEspecialColor = new ClassSelect($("#papelEspecialInteriorColor"),
            '/papelesgenericos/selectpapelespecial',
            window.translations["selectPapel"],
            false,
            {
                [this.csrf_token]: this.csrf_hash,
                tipo: this.getTipoImpresionColor(),
                cubierta: 0,
            }
        );

        this.papelInteriorDiferente = false;
        this.papelInterior = null;
        this.gramaje = null;
        this.papelInteriorColor = null;
        this.gramajeColor = null;

        this.cargando = true;


        this.initValidation();

    }


    init() {

        const self = this;

        this.papelEspecial.init();
        $('#papelEspecialInterior').on("change", this.#handlePapelInteriorEspecial.bind(this));
        this.papelEspecialColor.init();
        $('#papelEspecialInteriorColor').on("change", this.#handlePapelInteriorEspecialColor.bind(this));

        // Eventos
        this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
        this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));

    }




    updatePapeles(papeles = null) {

        const context = this;

        if (papeles == 'color') {
            this.divGramajeInteriorColor.empty();
            new Ajax('/papelesgenericos/getpapelcliente',
                {
                    [this.csrf_token]: this.csrf_hash,
                    tirada: $('#tirada').val(),
                    tipo: this.getTipoImpresion(),
                    cubierta: 0,
                },
                {},
                (response) => { this.fillPapelesColor(response); },
                (response) => { console.log(response); }
            ).get();
        }

        if (papeles == 'negro' || papeles == null) {
            this.divGramajeInterior.empty();
            new Ajax('/papelesgenericos/getpapelcliente',
                {
                    [this.csrf_token]: this.csrf_hash,
                    tirada: $('#tirada').val(),
                    tipo: this.getTipoImpresion(),
                    cubierta: 0,
                },
                {},
                (response) => { this.fillPapeles(response); },
                (response) => { console.log(response); }
            ).get();
        }

    }

    fillPapeles(response) {

        this.divPapelInterior.empty();
        this.divGramajeInterior.empty();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    fillPapelesColor(response) {

        this.divPapelInteriorColor.empty()
        this.divGramajeInteriorColor.empty();

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

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

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

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

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

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

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

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

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

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

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

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

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

                    this.papelEspecialColor.setOption(papel.id, papel.nombre);
                }
            });

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


    cargarDatos(datos, papelInteriorDiferente) {

        this.papelInteriorDiferente = papelInteriorDiferente;

        if (papelInteriorDiferente) {

            if (datos.negro) {
                if (datos.negro.tipo.includes("Premium")) {
                    this.negroPremium.addClass('selected');
                }
                else {
                    this.negroEstandar.addClass('selected');
                }

                this.papelInterior = datos.negro.papel.id;
                this.gramaje = datos.negro.gramaje;

            }
            if (datos.color) {
                if (datos.color.tipo.includes("Premium")) {
                    this.colorPremium_color.addClass('selected');
                }
                else {
                    this.colorEstandar_color.addClass('selected');
                }

                this.papelInteriorColor = datos.color.papel.id;
                this.gramajeColor = datos.color.gramaje;
            }
        }
        else {
            this.papelInteriorColor = null;
            this.gramajeColor = null;

            if (datos.color) {
                if (datos.color.tipo.includes("Premium")) {
                    this.colorPremium.addClass('selected');
                }
                else {
                    this.colorEstandar.addClass('selected');
                }
                this.papelInterior = datos.color.papel.id;
                this.gramaje = datos.color.gramaje;
            }
            else {
                if (datos.negro.tipo.includes("Premium")) {
                    this.negroPremium.addClass('selected');
                }
                else {
                    this.negroEstandar.addClass('selected');
                }

                this.papelInterior = datos.negro.papel.id;
                this.gramaje = datos.negro.gramaje;
            }
        }
        if(datos.paginasColorConsecutivas)
            this.updatePapeles();
        else
            this.updatePapeles('negro');

    }


    initValidation() {

        const stepper = this.validatorStepper;

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

                                divImpresionInterior.find('.fv-plugins-message-container').remove();
                                if ($('.disenio-interior.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    divImpresionInterior.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"].disenio_interior}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_papel_interior: {
                    validators: {
                        callback: {
                            callback: function (input) {

                                $('#divPapelInterior').find('.fv-plugins-message-container').remove();
                                $('#divPapelEspecialInterior').find('.fv-plugins-message-container').remove();

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

                                }
                                else {
                                    $('#divPapelInterior').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_interior: {
                    validators: {
                        callback: {
                            callback: function (input) {

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

                                if ($('#papelEspecialInterior').select2('data').length > 0)
                                    return true;
                                else {
                                    $('#divPapelEspecialInterior').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_interior: {
                    validators: {
                        callback: {
                            callback: function (input) {

                                const divGramajeInterior = $('#divGramajeInterior'); // Selecciona el div

                                const gramajeSeleccionado = $('.custom-selector-gramaje 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;
                            },
                        }
                    }
                },
                div_impresion_interior_color: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const divImpresionInterior = $('#divImpresionInteriorColor'); // Selecciona el div
                                if (divImpresionInterior.hasClass("d-none")) return true;

                                divImpresionInterior.find('.fv-plugins-message-container').remove();
                                if ($('.disenio-interior-color.selected').length > 0) {
                                    return true;
                                }
                                else {
                                    divImpresionInterior.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_impresion_interior_color" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].disenio_interior}
                                            </div>
                                        </div>
                                    `);
                                }
                                return false;
                            },
                        }
                    }
                },
                div_papel_interior_color: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const divPapelInterior = $('#divPapelInteriorColor'); // Selecciona el div
                                if (divPapelInteriorColor.hasClass("d-none")) return true;

                                $('#divPapelInteriorColor').find('.fv-plugins-message-container').remove();
                                $('#divPapelEspecialInteriorColor').find('.fv-plugins-message-container').remove();

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

                                }
                                else {
                                    $('#divPapelInteriorColor').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_interior_color: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const divGramajeInteriorColor = $('#divGramajeInteriorColor'); // Selecciona el div
                                if (divGramajeInteriorColor.hasClass("d-none")) return true;

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

                                }
                                else {
                                    divGramajeInteriorColor.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_impresion_interior':
                            case 'div_papel_interior':
                            case 'div_gramaje_interior':
                            case 'div_impresion_interior_color':
                            case 'div_papel_interior_color':
                            case 'div_gramaje_interior_color':
                            case 'div_papel_especial_interior':
                                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();
        });
    }


    getTipoImpresion() {

        let tipo = 'negro';
        if (this.colorEstandar.hasClass('selected'))
            tipo = 'color';
        else if (this.negroPremium.hasClass('selected'))
            tipo = 'negrohq';
        else if (this.colorPremium.hasClass('selected'))
            tipo = 'colorhq';

        return tipo;
    }

    getTipoImpresionColor() {

        let tipo = 'colorhq';
        if (this.colorEstandar_color.hasClass('selected'))
            tipo = 'color';

        return tipo;
    }


    getIsHq() {

        try {
            if (this.interiorColor.filter('.d-none').length > 0) {
                return this.disenioInterior.filter('.selected').attr('id').includes('Premium');
            }

            else if (this.disenioInterior_color.filter('.selected').length > 0) {
                return {
                    negro: this.disenioInterior.filter('.selected').attr('id').includes('Premium'),
                    color: this.disenioInterior_color.filter('.selected').attr('id').includes('Premium')
                }
            }

            return null;

        } catch (e) {
            return null;
        }
    }

    processMenuLateral() {

        let menu_off = true;
        this.rl_tipo_interior.removeClass('d-none');

        const HQ = this.getIsHq();
        const color = $("#paginasColor").val() > 0 ? true : false;
        const papelInterior = this.getPapel(true);
        const gramajeInterior = this.getGramaje();
        if (HQ != null && papelInterior != null && gramajeInterior != null) {

            menu_off = false;
            if ($(".interior-color").hasClass('d-none')) {
                if (!this.rl_papel_interior_color.hasClass('d-none')) {
                    this.rl_papel_interior_color.addClass('d-none');
                }
                const impInterior = (color ? "Color " : "Blanco y Negro ") + (HQ ? "Premium" : "Estándar");
                this.rl_tipo_interior.text(impInterior);
                this.rl_papel_interior.text(papelInterior + " " + gramajeInterior + " gr");
            }
            else {
                this.rl_papel_interior_color.removeClass('d-none');

                const impInterior = ("Negro " + (HQ.negro ? "Premium" : "Estándar") + " / Color " + (HQ.color ? "Premium" : "Estándar"));
                this.rl_tipo_interior.text(impInterior);
                this.rl_papel_interior.text(papelInterior.negro + " " + gramajeInterior.negro + " gr");
                this.rl_papel_interior_color.text(papelInterior.color + " " + gramajeInterior.color + " gr");

            }
        }

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

    }

    getPapel(forResumen = false) {

        try {
            let checkedPapel = $('.custom-selector-papel input[type="radio"]:checked');

            if (this.papelInterior != null && checkedPapel != null && checkedPapel.length > 0) {

                if (this.divPapelInteriorColor.hasClass('d-none')) {

                    if (forResumen) {

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

                }
                else {
                    let checkedPapelColor = $('.custom-selector-papel-color input[type="radio"]:checked');

                    if (checkedPapelColor == null || checkedPapelColor.length == 0 || checkedPapel == null || checkedPapel.length == 0)
                        return null;

                    let papelNegro = 0;
                    let papelColor = 0;

                    if (forResumen) {

                        let radioButtonIdNegro = checkedPapel[0].id;
                        if (radioButtonIdNegro == 'papelEspecialInterior')
                            papelNegro = capitalizeFirstLetter(this.papelEspecial.getText());
                        else {
                            let associatedLabel = $('label[for="' + radioButtonIdNegro + '"]');
                            papelNegro = capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
                        }
                        let radioButtonIdColor = checkedPapelColor[0].id;
                        if (radioButtonIdColor == 'papelEspecialInteriorColor')
                            papelColor = capitalizeFirstLetter(this.papelEspecialColor.getText());
                        else {
                            let associatedLabel = $('label[for="' + radioButtonIdColor + '"]');
                            papelColor = capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
                        }
                    }
                    else {

                        if (this.divPapelEspecialInterior.hasClass('d-none'))
                            papelNegro = this.papelInterior;
                        else {
                            papelNegro = this.papelEspecial.getVal();
                        }
                        if (this.divPapelEspecialInteriorColor.hasClass('d-none'))
                            papelColor = this.papelInteriorColor;
                        else {
                            papelColor = this.papelEspecialColor.getVal();
                        }
                    }
                    return {
                        negro: papelNegro,
                        color: papelColor,
                    }
                }
            }
            return null;
        }
        catch (e) {
            return null;
        }
    }

    getGramaje() {

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

            if (this.interiorColor.filter('.d-none').length == 0) {
                let checkedGramajeColor = $('.custom-selector-gramaje-color input[type="radio"]:checked');
                if (checkedGramaje.length == 0 || checkedGramajeColor.length == 0)
                    return null
                let values = {
                    negro: checkedGramaje[0].id.split('_')[1],
                    color: checkedGramajeColor[0].id.split('_')[1]
                }
                if (values.negro && values.color) {
                    return values;
                }
                else return null;
            }
            else {
                if (checkedGramaje.length == 0)
                    return null;
                return checkedGramaje[0].id.split('_')[1];
            }

        } catch (e) {
            return null;
        }
    }


    #handleDisenioInterior(event) {

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

        let class2Find = '.disenio-interior';
        if (element[0].closest('.image-container').id.includes('Color')) {
            this.divGramajeInteriorColor.empty();
            this.divPapelEspecialInteriorColor.addClass("d-none");
            $('#papelEspecialInteriorColor').off("change");
            this.papelEspecialColor.empty();
            $('#papelEspecialInteriorColor').on("change", this.#handlePapelInteriorEspecialColor.bind(this));
            this.papelInteriorColor = null;
            this.gramajeColor = null;
            class2Find = '.disenio-interior-color';
        }
        else {
            this.divGramajeInterior.empty();
            this.divPapelEspecialInterior.addClass("d-none");
            $('#papelEspecialInterior').off("change");
            this.papelEspecial.empty();
            $('#papelEspecialInterior').on("change", this.#handlePapelInteriorEspecial.bind(this));
            this.papelInterior = null;
            this.gramaje = null;
        }

        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');

        // Para recalcular el presupuesto
        element.trigger('change');

        if (class2Find == '.disenio-interior-color')
            this.updatePapeles('color');
        else
            this.updatePapeles();
    }


    #handlePapelInterior(event) {

        const context = this;

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

        let tipo = this.getTipoImpresion();

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

            if(!this.cargando)
                this.gramaje = null;
            this.divGramajeInterior.empty();
            this.divPapelEspecialInterior.removeClass("d-none");
            this.papelEspecialInterior.empty();

        }
        else {

            this.divPapelEspecialInterior.addClass("d-none");
            this.papelEspecialInterior.empty();
            this.divGramajeInterior.empty();
            new Ajax('/papelesgenericos/getpapelcliente',
                {
                    [this.csrf_token]: this.csrf_hash,
                    tirada: $('#tirada').val(),
                    papel: papel,
                    tipo: tipo,
                    cubierta: 0,
                },
                {},
                this.fillGramajes.bind(context),
                (response) => { console.log(response); }
            ).get();
        }
        if (!this.cargando)
            this.gramaje = null;
        else {
            this.cargando = false;
        }
    }

    #handlePapelInteriorEspecial() {

        const context = this;

        this.papelInterior = this.papelEspecial.getVal();

        let tipo = this.getTipoImpresion();

        new Ajax('/papelesgenericos/getpapelcliente',
            {
                [this.csrf_token]: this.csrf_hash,
                tirada: $('#tirada').val(),
                papel: this.papelInterior,
                tipo: tipo,
                cubierta: 0,
            },
            {},
            this.fillGramajes.bind(context),
            (response) => { console.log(response); }
        ).get();

    }

    #handlePapelInteriorColor(event) {

        const context = this;

        // Accede al ID del elemento que disparó el evento
        const element = $(event.target);
        const papel = element[0].id.split('_')[1];
        this.papelInteriorColor = papel;
        if (!this.cargando)
            this.gramajeColor = null;
        else {
            this.cargandoColor = false;
        }

        $('#' + papel).prop('checked', true);

        let tipo = this.getTipoImpresionColor();

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

            this.gramajeColor = null;
            this.divGramajeInteriorColor.empty();
            this.divPapelEspecialInteriorColor.removeClass("d-none");
            this.divPapelEspecialInteriorColor.empty();

        }
        else {

            this.divPapelEspecialInteriorColor.addClass("d-none");
            this.divPapelEspecialInteriorColor.empty();
            this.divGramajeInteriorColor.empty();
            new Ajax('/papelesgenericos/getpapelcliente',
                {
                    [this.csrf_token]: this.csrf_hash,
                    tirada: $('#tirada').val(),
                    papel: papel,
                    tipo: tipo,
                    cubierta: 0,
                },
                {},
                this.fillGramajesColor.bind(context),
                (response) => { console.log(response); }
            ).get();
        }
    }


    #handlePapelInteriorEspecialColor() {

        const context = this;

        this.papelInteriorColor = this.papelEspecialColor.getVal();

        let tipo = this.getTipoImpresionColor();

        new Ajax('/papelesgenericos/getpapelcliente',
            {
                [this.csrf_token]: this.csrf_hash,
                tirada: $('#tirada').val(),
                papel: this.papelInterior,
                tipo: tipo,
                cubierta: 0,
            },
            {},
            this.fillGramajesColor.bind(context),
            (response) => { console.log(response); }
        ).get();

    }


    fillGramajes(response) {


        this.divGramajeInterior.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 d-flex flex-column align-items-center justify-content-center gramaje-interior',
            });

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

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

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

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


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

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

            showGramaje = true;
        });

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

    fillGramajesColor(response) {


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

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

        response.papeles.forEach(valor => {

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

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

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

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

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


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

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

            showGramaje = true;
        });

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


export default DisenioInterior;