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

class DatosGenerales {

    constructor(domItem, wizardForm, validatorStepper) {

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

        this.wizardStep = wizardForm.querySelector('#datos-generales');
        this.validatorStepper = validatorStepper;

        this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/getSelect2', window.translations["formatoLibro"]);
        this.cliente = new ClassSelect($("#clienteId"), '/clientes/cliente/getSelect2', window.translations["selectCliente"]);

        this.titulo = this.domItem.find("#titulo");
        this.autor = this.domItem.find("#autor");
        this.isbn = this.domItem.find("#isbn");
        this.coleccion = this.domItem.find("#coleccion");
        this.referenciaCliente = this.domItem.find("#referenciaCliente");

        this.tirada1 = this.domItem.find("#tirada");
        this.tirada2 = this.domItem.find("#tirada2");
        this.tirada3 = this.domItem.find("#tirada3");
        this.tirada4 = this.domItem.find("#tirada4");

        this.papelFormatoId = this.domItem.find("#papelFormatoId");
        this.checkFormatoPersonalizado = this.domItem.find("#papelFormatoPersonalizado");
        this.formatoPersonalizado = this.domItem.find("#formatoPersonalizado");
        this.formatoEstandar = this.domItem.find("#formatoEstandar");
        this.anchoPersonalizado = this.domItem.find("#papelFormatoAncho");
        this.altoPersonalizado = this.domItem.find("#papelFormatoAlto");

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

        this.tiposLibro = this.domItem.find(".tipo-libro");

        this.paginas = this.domItem.find("#paginas");
        this.paginasNegro = this.domItem.find("#paginasNegro");
        this.paginasColor = this.domItem.find("#paginasColor");
        this.divPaginasCuaderillo = this.domItem.find("#divPaginasCuadernillo");
        this.paginasCuadernillo = this.domItem.find("#paginasCuadernillo");
        this.divPaginasColorConsecutivas = this.domItem.find("#divPaginasColorConsecutivas");
        this.pagColorConsecutivas = this.domItem.find("#pagColorConsecutivas");
        this.divPapelDiferente = this.domItem.find("#divPapelDiferente");
        this.papelDiferente = this.domItem.find("#papelDiferente");
        this.divPosPaginasColor = this.domItem.find("#divPosPaginasColor");
        this.posPaginasColor = this.domItem.find("#posPaginasColor");

        this.ivaReducido = this.domItem.find("#ivaReducido");
        this.excluirRotativa = this.domItem.find("#excluirRotativa");
        this.prototipo = this.domItem.find("#prototipo");
        this.ferro = this.domItem.find("#ferro");
        this.ferroDigital = this.domItem.find("#ferroDigital");
        this.marcapaginas = this.domItem.find("#marcapaginas");
        this.retractilado = this.domItem.find("#retractilado");
        this.retractilado5 = this.domItem.find("#retractilado5");

        this.rl_datos_generales = $(".rl-datos-generales");
        this.rl_tipo = $("#rl_tipo");
        this.rl_tipo_cubierta = $('#rl_tipo_cubierta');
        this.rl_tamanio = $("#rl_tamanio");
        this.rl_tiradas = $("#rl_tiradas");
        this.rl_paginas = $("#rl_paginas");

        this.rl_servicios_extra = $(".rl-servicios-extra");
        this.rl_prototipo = $("#rl_prototipo");
        this.rl_ferro = $("#rl_ferro");
        this.rl_ferroDigital = $("#rl_ferroDigital");
        this.rl_marcapaginas = $("#rl_marcapaginas");
        this.rl_retractilado = $("#rl_retractilado");
        this.rl_retractilado5 = $("#rl_retractilado5");

        this.selectedTirada = null;

        this.cargando = false;

        this.initValidation();
    }


    init() {

        // Selects
        this.formatoLibro.init();
        this.cliente.init();


        // Inicializa el tipo de impresion
        this.#handlePaginas();

        // Eventos
        this.checkFormatoPersonalizado.bind('change', this.#handleFormatoLibro.bind(this));
        this.formatoLibro.item.on('change', this.#handleFormatoLibro.bind(this));
        this.tiposLibro.on('click', this.#handleTipolibro.bind(this));
        this.domItem.find('.input-paginas').on('change', this.#handlePaginas.bind(this));
        this.anchoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
        this.altoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
        this.pagColorConsecutivas.on('change', this.#handPaginasConsecutivas.bind(this));
        this.papelDiferente.on('change', this.#handlePapelDiferente.bind(this));

        this.anchoPersonalizado.on("change", this.#checkValue.bind(this));
        this.altoPersonalizado.on("change", this.#checkValue.bind(this));

        this.titulo.on('change', () => { $(".titulo").html(this.titulo.val()); });

        this.retractilado.on('change', this.#eventRetractilado.bind(this));
        this.retractilado5.on('change', this.#eventRetractilado.bind(this));
    }

    initValidation() {

        const stepper = this.validatorStepper;

        this.formValidation = FormValidation.formValidation(this.wizardStep, {
            fields: {
                titulo: {
                    validators: {
                        notEmpty: {
                            message: window.translations["validation"].requerido_short
                        },
                    }
                },
                cliente_id: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].cliente,
                            callback: function (input) {
                                // Get the selected options
                                if (!$(this.excluirRotativa).prop('hidden'))
                                    return true;
                                const options = $("#clienteId").select2('data');
                                const hasValidOption = options.some(option => parseInt(option.id) > 0);
                                return options !== null && options.length > 0 && hasValidOption;
                            },
                        }
                    }
                },
                tirada: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                const value = $("#tirada").val();
                                const value2 = $("#tirada2").val();
                                const value3 = $("#tirada3").val();
                                const value4 = $("#tirada4").val();
                                let tiradas = [value];

                                if (!(value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0)) {
                                    return {
                                        valid: false,
                                        message: window.translations["validation"].integer_greatherThan_0,
                                    };
                                }
                                if (value2.length > 0 && Number.isInteger(parseInt(value2)) && parseInt(value2) > 0) {
                                    tiradas.push(value2);
                                }
                                if (value3.length > 0 && Number.isInteger(parseInt(value3)) && parseInt(value3) > 0) {
                                    tiradas.push(value3);
                                }
                                if (value4.length > 0 && Number.isInteger(parseInt(value4)) && parseInt(value4) > 0) {
                                    tiradas.push(value4);
                                }
                                // comprobar si hay valores > 30
                                const noPOD = (tiradas.some(tirada => parseInt(tirada) > 30));
                                const siPOD = (tiradas.some(tirada => parseInt(tirada) <= 30));
                                if (noPOD && siPOD) {
                                    return {
                                        valid: false,
                                        message: "No se pueden mezclar tiradas <30 con >30",
                                    }
                                }

                                return true;
                            },
                        }
                    }
                },
                tirada2: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                let field = $("#tirada2");
                                field.val(field.val().replace(/[^0-9]/g, ''));
                                let value = field.value;
                                if (value == '')
                                    return true;
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                tirada3: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                let field = $("#tirada3");
                                field.val(field.val().replace(/[^0-9]/g, ''));
                                let value = field.value;
                                if (value == '')
                                    return true;
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                tirada4: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                let field = $("#tirada4");
                                field.val(field.val().replace(/[^0-9]/g, ''));
                                let value = field.value;
                                if (value == '')
                                    return true;
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                papel_formato_id: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].papelFormato,
                            callback: function (input) {
                                // Get the selected options
                                const options = $("#papelFormatoId").select2('data');
                                const hasValidOption = options.some(option => parseInt(option.id) > 0);
                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
                                if (custom_format)
                                    return true;
                                return options !== null && options.length > 0 && hasValidOption;
                            },
                        }
                    }
                },
                papel_formato_ancho: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                // Get the selected options
                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
                                if (!custom_format)
                                    return true;
                                const value = $("#papelFormatoAncho").val();
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                papel_formato_alto: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                // Get the selected options
                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
                                if (!custom_format)
                                    return true;
                                const value = $("#papelFormatoAlto").val();
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                paginasColor: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                // Get the selected options
                                const value = $("#paginasColor").val();
                                if (value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0) {

                                    if (parseInt(value) % 2 != 0) {
                                        return {
                                            valid: false,
                                            message: window.translations["validation"].paginas_pares
                                        };
                                    }
                                    return true;
                                }
                                return false;
                            },
                        }
                    }
                },
                paginasNegro: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                // Get the selected options
                                const value = $("#paginasNegro").val();
                                if (value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0) {

                                    if (parseInt(value) % 2 != 0) {
                                        return {
                                            valid: false,
                                            message: window.translations["validation"].paginas_pares
                                        };
                                    }
                                    return true;
                                }
                                return false;
                            },
                        }
                    }
                },
                paginas: {
                    validators: {
                        callback: {
                            message: window.translations["validation"].integer_greatherThan_0,
                            callback: function (input) {
                                // Get the selected options
                                const value = $("#paginas").val();
                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
                            },
                        }
                    }
                },
                div_tipo_libro: {
                    validators: {
                        callback: {
                            callback: function (input) {
                                const divTipoLibro = $('#divTipoLibro'); // Selecciona el div

                                divTipoLibro.find('.fv-plugins-message-container').remove();
                                if ($('.tipo-libro.selected').length > 0) {
                                    if ($('#cosido').hasClass('selected') || $('#grapado').hasClass('selected')) {
                                        const value = parseInt($("#paginas").val());
                                        if (value % 4 != 0) {
                                            divTipoLibro.append(`
                                                <div class="fv-plugins-message-container invalid-feedback">
                                                    <div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
                                                        ${window.translations["validation"].paginas_multiplo_4}
                                                    </div>
                                                </div>
                                            `);
                                            return false;
                                        }
                                        return true;
                                    }

                                    return true;
                                }
                                else {
                                    divTipoLibro.append(`
                                        <div class="fv-plugins-message-container invalid-feedback">
                                            <div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
                                                ${window.translations["validation"].tipo_libro}
                                            </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_libro':
                                return '.col-sm-10';
                            case 'titulo':
                                return '.col-sm-8';
                            case 'cliente_id':
                                return '.col-sm-5';
                            case 'papel_formato_id':
                                return '.col-sm-4';
                            case 'papel_formato_ancho':
                            case 'papel_formato_ancho':
                                return '.col-sm-3';
                            case 'tirada':
                            case 'tirada2':
                            case 'tirada3':
                            case 'tirada4':
                                return '.col-sm-2';

                            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;

        if (this.tiposLibro.filter('.selected').length > 0) {
            let tipo = String(this.tiposLibro.filter('.selected').attr('id'));
            tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1);
            this.rl_tipo.text(tipo);
            this.rl_tipo.removeClass('d-none');
            menu_off = false;
        }
        else {
            this.rl_tipo.addClass('d-none');
        }
        if($('.tipo-cubierta.selected').length>0){
            this.rl_tipo_cubierta.text($($('.tipo-cubierta.selected').find('.form-label')).text());
            this.rl_tipo_cubierta.removeClass('d-none');
        }
        else{
            this.rl_tipo_cubierta.addClass('d-none');
        }
        if (this.checkFormatoPersonalizado.is(':checked')) {
            let ancho = parseFloat(this.anchoPersonalizado.val());
            let alto = parseFloat(this.altoPersonalizado.val());
            if (!isNaN(ancho) && !isNaN(alto)) {
                this.rl_tamanio.text(ancho + ' x ' + alto);
                this.rl_tamanio.removeClass('d-none');
                menu_off = false;
            }
            else {
                this.rl_tamanio.addClass('d-none');
            }
        }

        else {
            if (this.papelFormatoId.val() != null) {
                this.rl_tamanio.text(this.papelFormatoId.find('option:selected').text());
                this.rl_tamanio.removeClass('d-none');
                menu_off = false;
            }
            else {
                this.rl_tamanio.addClass('d-none');
            }
        }

        const tiradas = this.getTiradas();
        if (tiradas.length > 0) {
            this.rl_tiradas.text(tiradas.join(', '));
            this.rl_tiradas.removeClass('d-none');
        }
        else
            this.rl_tiradas.addClass('d-none');

        if (this.paginas.val() > 0) {
            this.rl_paginas.text(this.paginas.val() + " páginas");
            this.rl_paginas.removeClass('d-none');
        }
        else
            this.rl_paginas.addClass('d-none');

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

        // servicios extra
        menu_off = true;
        /*if(this.prototipo.is(':checked')){
            this.rl_prototipo.removeClass("d-none");
            menu_off = false;
        }
        else{
            this.rl_prototipo.addClass('d-none');
        }

        if(this.ferro.is(':checked')){
            this.rl_ferro.removeClass("d-none");
            menu_off = false;
        }
        else{
            this.rl_ferro.addClass('d-none');
        }

        if(this.ferroDigital.is(':checked')){
            this.rl_ferroDigital.removeClass("d-none");
            menu_off = false;
        }
        else{
            this.rl_ferroDigital.addClass('d-none');
        }
*/
        $('#rl-servicios-extra-items').empty();

        if(this.marcapaginas.is(':checked')){
            let $ul = $('<ul>', {
                class: 'list-group list-group-timeline'
            });

            let $li = $('<li>', {
                class: 'list-group-item list-group-timeline-primary texto-resumen-lateral',
                text: 'Marcapáginas'
            });

            $ul.append($li);
            $('#rl-servicios-extra-items').append($ul);
            menu_off = false;
        }

        if(this.retractilado.is(':checked')){
            let $ul = $('<ul>', {
                class: 'list-group list-group-timeline'
            });

            let $li = $('<li>', {
                class: 'list-group-item list-group-timeline-primary texto-resumen-lateral',
                text: 'Retractilado'
            });

            $ul.append($li);
            $('#rl-servicios-extra-items').append($ul);
            menu_off = false;
        }

        if(this.retractilado5.is(':checked')){
            let $ul = $('<ul>', {
                class: 'list-group list-group-timeline'
            });

            let $li = $('<li>', {
                class: 'list-group-item list-group-timeline-primary texto-resumen-lateral',
                text: 'Retractilado de 5'
            });

            $ul.append($li);
            $('#rl-servicios-extra-items').append($ul);
            menu_off = false;
        }

        const serviciosExtra = $('input[type="checkbox"][data-tarifa-tipo="extra"]:checked');
        for(let i=0; i<serviciosExtra.length; i++){
            let $ul = $('<ul>', {
                class: 'list-group list-group-timeline'
            });

            let $li = $('<li>', {
                class: 'list-group-item list-group-timeline-primary texto-resumen-lateral',
                text: '' + $(serviciosExtra[i]).data('tarifa-nombre')
            });

            $ul.append($li);
            $('#rl-servicios-extra-items').append($ul);
        }

        if(!menu_off){
            this.rl_servicios_extra.removeClass('d-none');
        }
        else{
            this.rl_servicios_extra.addClass('d-none');
        }


    }


    cargarDatos(datos) {

        this.cargando = true;

        this.titulo.val(datos.titulo);
        this.autor.val(datos.autor);
        this.isbn.val(datos.isbn);
        this.coleccion.val(datos.coleccion);
        this.referenciaCliente.val(datos.referenciaCliente);

        this.cliente.setOption(datos.clienteId, datos.clienteNombre);
        this.cliente.setVal(datos.clienteId);

        if(datos.selectedTirada){
            this.selectedTirada = datos.selectedTirada;
        }
        $(this.cliente).trigger('change');

        if (datos.excluirRotativa) {
            this.excluirRotativa.prop('checked', true);
        }

        this.tirada1.val(parseInt(datos.tirada));
        if (datos.tirada2)
            this.tirada2.val(parseInt(datos.tirada2));
        if (datos.tirada3)
            this.tirada3.val(parseInt(datos.tirada3));
        if (datos.tirada4)
            this.tirada4.val(parseInt(datos.tirada4));

        if (datos.papelFormatoPersonalizado) {
            this.checkFormatoPersonalizado.prop('checked', true);
            this.formatoEstandar.addClass('d-none');
            this.formatoPersonalizado.removeClass('d-none');
            this.formValidation.revalidateField('papel_formato_id');
            this.altoPersonalizado.val(datos.papelFormatoAlto);
            this.anchoPersonalizado.val(datos.papelFormatoAncho);
        }
        else {
            this.formatoLibro.setOption(datos.papelFormatoId, datos.papelFormatoNombre);
            this.formatoLibro.setVal(datos.papelFormatoId);
        }

        this.paginas.val(parseInt(datos.paginas));
        this.paginasNegro.val(parseInt(datos.paginasNegro));
        this.paginasColor.val(parseInt(datos.paginasColor)).trigger('change');

        this.pagColorConsecutivas.prop('checked', datos.paginasColorConsecutivas);
        if (datos.paginasColorConsecutivas) {
            //this.divPapelDiferente.removeClass('d-none');
            //this.papelDiferente.prop('checked', datos.papelInteriorDiferente).trigger('change');
        }
        this.posPaginasColor.val(datos.posPaginasColor);

        this.paginasCuadernillo.val(datos.paginasCuadernillo);

        if (datos.tipo != "") {
            this.tiposLibro.removeClass('selected');
            this.tiposLibro.find('.image-presupuesto').removeClass('selected');
            this.domItem.find('#' + datos.tipo).addClass('selected');

            if(datos.tipo == 'cosido'){
                this.divPaginasCuaderillo.removeClass('d-none');
            }
        }


        if(datos.serviciosExtra){

            let serviciosExtra = $('input[type="checkbox"][data-tarifa-tipo="extra"]');

            $(serviciosExtra).each(function() {
                let tarifaId = $(this).data('tarifa-id') + "";

                if (datos.serviciosExtra.includes(tarifaId)) {
                    $(this).prop('checked', true);
                }
            });
        }

        //this.prototipo.prop('checked', datos.prototipo);
        //this.ferro.prop('checked', datos.ferro);
        //this.ferroDigital.prop('checked', datos.ferroDigital);
        this.marcapaginas.prop('checked', datos.marcapaginas);
        this.retractilado.prop('checked', datos.retractilado);
        this.retractilado5.prop('checked', datos.retractilado5);

        this.ivaReducido.val(datos.ivaReducido ? 1 : 0).trigger('change');

        this.cargando = false;
    }

    getCliente() {
        if ($(this.excluirRotativa).prop('hidden'))
            return $('#clienteId').val();
        return this.cliente.getVal();
    }

    getDimensionLibro() {

        let ancho = 0;
        let alto = 0;

        if (this.checkFormatoPersonalizado.is(':checked')) {
            ancho = parseFloat(this.anchoPersonalizado.val());
            alto = parseFloat(this.altoPersonalizado.val());
        }
        else {
            if (this.papelFormatoId.val() != null) {
                const selectedText = this.papelFormatoId.find('option:selected').text();
                if (selectedText.length > 0) {
                    ancho = parseFloat(selectedText.trim().split(" x ")[0]);
                    alto = parseFloat(selectedText.trim().split(" x ")[1]);
                }
            }
            else
                return null;
        }
        return {
            ancho: ancho,
            alto: alto
        }
    }

    getTiradas() {
        let tiradas = [];
        tiradas.push(parseInt(this.tirada1.val()));
        if (this.tirada2.val().length > 0 && parseInt(this.tirada2.val()) > 0)
            tiradas.push(parseInt(this.tirada2.val()));
        if (this.tirada3.val().length > 0 && parseInt(this.tirada3.val()) > 0)
            tiradas.push(parseInt(this.tirada3.val()));
        if (this.tirada4.val().length > 0 && parseInt(this.tirada4.val()) > 0)
            tiradas.push(parseInt(this.tirada4.val()));
        return tiradas;
    }


    getIsColor() {
        if (this.paginasColor.val() > 0) {
            return true;
        }
        return false;
    }


    #handleFormatoLibro() {

        if (this.checkFormatoPersonalizado.is(':checked')) {
            this.formatoEstandar.addClass('d-none');
            this.formatoPersonalizado.removeClass('d-none');
            this.formValidation.revalidateField('papel_formato_id');
        }
        else {
            this.formatoEstandar.removeClass('d-none');
            this.formatoPersonalizado.addClass('d-none');
            this.formValidation.revalidateField('papel_formato_ancho');
            this.formValidation.revalidateField('papel_formato_alto');
        }
        const alto = this.getDimensionLibro().alto;
        $('#altoFaja').closest('.config-faja').find('.form-text').text('Entre 50 y ' + alto + ' mm');
    }

    #checkValue(event){
        let target = event.target;
        if(target.value < target.min){
            target.value = target.min;
        }
    }

    #eventRetractilado(event) {
        let target = event.target;
        if (target.id == 'retractilado') {
            if (this.retractilado5.is(':checked')) {
                this.retractilado5.prop('checked', false);
            }
        }
        else {
            if (this.retractilado.is(':checked')) {
                this.retractilado.prop('checked', false);
            }
        }
    }


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

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

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

        if (this.fresado.hasClass('selected') || this.cosido.hasClass('selected')) {
            $('#tapaDuraLomoRedondo').removeClass('d-none');
            if (this.cosido.hasClass('selected')) {
                //$('#tapaDuraLomoRedondo').addClass('selected');
                this.divPaginasCuaderillo.removeClass('d-none');
            }
            else {
                this.divPaginasCuaderillo.addClass('d-none');
            }
        }
        else {
            $('#tapaDuraLomoRedondo').addClass('d-none');
            $('#tapaDuraLomoRedondo').removeClass('selected');
            this.divPaginasCuaderillo.addClass('d-none');
        }

        if (this.grapado.hasClass('selected') || this.espiral.hasClass('selected')) {
            $('#addSobrecubierta').prop('checked', false).trigger('change');
            $(".sobrecubierta-items").addClass('d-none');
        }
        else {
            if ($('#addSobrecubierta').hasClass('d-none')) {
                $('#addSobrecubierta').removeClass('d-none');
            }
        }

        this.checkPaginasMultiplo4();

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

    #handlePaginas() {

        let paginasNegro = this.paginasNegro.val();
        let paginasColor = this.paginasColor.val();

        if (paginasNegro == '' || isNaN(paginasNegro)) {
            paginasNegro = 0;
        }
        if (paginasColor == '' || isNaN(paginasColor)) {
            paginasColor = 0;
        }

        let totalPaginas = parseInt(paginasNegro) + parseInt(paginasColor);
        this.paginas.val(totalPaginas);

        let tipos = [this.domItem.find('#fresado'), this.domItem.find('#cosido')];
        if (totalPaginas < 32) {
            for (let tipo of tipos) {
                tipo.removeClass('selected');
                tipo.find('.image-presupuesto').removeClass('selected');

                tipo.hide();
            }
        }
        else {
            for (let tipo of tipos) {
                tipo.show();
            }
        }

        if (totalPaginas < 12 || totalPaginas > 40) {
            this.domItem.find('#grapado').removeClass('selected');
            this.domItem.find('#grapado').find('.image-presupuesto').removeClass('selected');
            this.domItem.find('#grapado').hide();
        }
        else {
            this.domItem.find('#grapado').show();
        }
        this.formValidation.revalidateField('paginas');

        // Se configura dependiento si hay color o no
        const lastLayoutColor = $('#negroEstandar').hasClass('d-none');
        if (paginasColor == 0) {

            this.#handleInteriorLayout('negro');
            this.divPaginasColorConsecutivas.addClass('d-none');
            this.divPosPaginasColor.addClass('d-none');
            this.posPaginasColor.val("");
            this.pagColorConsecutivas.prop('checked', false);

            if(lastLayoutColor && !this.cargando){

                $('#divPapelInterior').empty();
                $('#divGramajeInterior').empty();
                $('#negroEstandar').trigger('click');
            }
        }
        else {
            if (this.papelDiferente.is(":checked"))
                this.#handleInteriorLayout('mixto');
            else
                this.#handleInteriorLayout('color');
            this.divPaginasColorConsecutivas.removeClass('d-none');
            this.divPosPaginasColor.removeClass('d-none');

            if(!lastLayoutColor && !this.cargando){

                $('#divPapelInterior').empty();
                $('#divGramajeInterior').empty();
                $('#colorEstandar').trigger('click');
            }
        }

        $('.calcular-lomo').trigger('change');

        this.checkPaginasMultiplo4();
    }

    checkPaginasMultiplo4(){

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

        if ($('#cosido').hasClass('selected') || $('#grapado').hasClass('selected')) {
            const value = parseInt($("#paginas").val());
            if (value % 4 != 0) {
                divTipoLibro.append(`
                    <div class="fv-plugins-message-container invalid-feedback">
                        <div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
                            ${window.translations["validation"].paginas_multiplo_4}
                        </div>
                    </div>
                `);
                return false;
            }
        }
        return true;
    }


    #handPaginasConsecutivas() {
        if (this.pagColorConsecutivas.is(':checked')) {
            //this.divPapelDiferente.removeClass('d-none');
        }
        else {
            /*this.divPapelDiferente.addClass('d-none');
            this.papelDiferente.prop('checked', false);*/
        }
    }


    #handlePapelDiferente() {
        if (this.papelDiferente.is(':checked')) {
            $(".papel-interior").removeClass('selected');
            $(".interior-color").removeClass('d-none');
            this.#handleInteriorLayout('mixto');
            $("#divPapelInterior").empty();
            $("#divGramajeInterior").empty();
            $("#divPapelInteriorColor").empty();
            $("#divGramajeInteriorColor").empty();
        }
        else {
            $(".interior-color").addClass('d-none');
            $("#divPapelInterior").empty();
            $("#divGramajeInterior").empty();
            $("#divPapelInteriorColor").empty();
            $("#divGramajeInteriorColor").empty();
            this.#handlePaginas();
        }
    }


    #handleInteriorLayout(layout) {
        switch (layout) {
            case 'negro':
            case 'mixto':
                $('#negroEstandar').removeClass('d-none');
                $('#negroPremium').removeClass('d-none');
                $('#colorEstandar').addClass('d-none');
                $('#colorPremium').addClass('d-none');
                break;
            case 'color':
                $('#negroEstandar').addClass('d-none');
                $('#negroPremium').addClass('d-none');
                $('#colorEstandar').removeClass('d-none');
                $('#colorPremium').removeClass('d-none');
                break;
            default:
                break;
        }
    }

    #handleCheckFormatoPersonalizado() {

        const minAncho = this.anchoPersonalizado.min;
        const minAlto = this.altoPersonalizado.min;

        if (this.anchoPersonalizado.val() < minAncho || this.anchoPersonalizado.val() == '' || isNaN(this.anchoPersonalizado.val())) {
            this.anchoPersonalizado.val(minAncho);
        }

        if (this.altoPersonalizado.val() < minAlto || this.altoPersonalizado.val() == '' || isNaN(this.altoPersonalizado.val())) {
            this.altoPersonalizado.val(minAlto);
        }
    }

    getServiciosExtra() {

        let serviciosExtra = $('input[type="checkbox"][data-tarifa-tipo="extra"]:checked');

        if (serviciosExtra.length === 0) {
            return [];
        }

        let servicios = [];

        $(serviciosExtra).each(function() {
            let tarifaId = $(this).data('tarifa-id');
            if (tarifaId) {
                servicios.push(tarifaId);
            }
        });

        return servicios;
    }

}


export default DatosGenerales;