trbajando en los custom checks

httpdocs/assets/js/safekat/pages/presupuestoCliente/datosGenerales.js

@@ -3,48 +3,306 @@ import ClassSelect from '../../components/select2.js';
 
 class DatosGenerales {
 
-    constructor(domItem) {
+    constructor(domItem, wizardForm, validatorStepper) {
         this.domItem = domItem;
-        this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/menuitems', window.translations["formatoLibro"]);        
+
+        this.wizardStep = wizardForm.querySelector('#datos-generales');
+        this.validatorStepper = validatorStepper;
+
+        this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/menuitems', window.translations["formatoLibro"]);
+        this.cliente = new ClassSelect($("#clienteId"), '/clientes/cliente/menuitems', window.translations["selectCliente"]);
+
+        this.titulo = this.domItem.find("#titulo");
+
         this.checkFormatoPersonalizado = this.domItem.find("#papelFormatoPersonalizado");
         this.formatoPersonalizado = this.domItem.find("#formatoPersonalizado");
+        this.anchoPersonalizado = this.domItem.find("#papelFormatoAncho");
+        this.altoPersonalizado = this.domItem.find("#papelFormatoAlto");
 
         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.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.initValidation();
     }
 
 
     init() {
-        
+
+        // Selects
         this.formatoLibro.init();
+        this.cliente.init();
+
+        // Eventos
         this.checkFormatoPersonalizado.bind('change', this.#handleFormatoLibro.bind(this));
-
-        this.tiposLibro.on('click', this.#handleTipolibro.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.titulo.on('change', () => { $(".titulo").html(this.titulo.val()); });
+        this.papelDiferente.on('change', () => { $(".titulo").html(this.titulo.val()); });
+    }
+
+    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
+                                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();
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                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 = $("#clienteId").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();
+                                return value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0;
+                            },
+                        }
+                    }
+                },
+                paginasNegro: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const value = $("#paginasNegro").val();
+                                return value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0;
+                            },
+                        }
+                    }
+                },
+                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) {
+                                    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', () => {
+            stepper.next();
+        });
     }
 
 
     #handleFormatoLibro() {
-        
-        if(this.checkFormatoPersonalizado.is(':checked')) {
+
+        if (this.checkFormatoPersonalizado.is(':checked')) {
             this.formatoLibro.hide();
             this.formatoPersonalizado.show();
+            this.formValidation.revalidateField('papel_formato_id');
         }
-        else{
+        else {
             this.formatoLibro.show();
             this.formatoPersonalizado.hide();
+            this.formValidation.revalidateField('papel_formato_ancho');
+            this.formValidation.revalidateField('papel_formato_alto');
         }
     }
 
     #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]) {
@@ -58,7 +316,7 @@ class DatosGenerales {
     }
 
     #handlePaginas() {
-        
+
         let paginasNegro = this.paginasNegro.val();
         let paginasColor = this.paginasColor.val();
 
@@ -72,16 +330,16 @@ class DatosGenerales {
         let totalPaginas = parseInt(paginasNegro) + parseInt(paginasColor);
         this.paginas.val(totalPaginas);
 
-        let tipos = [this.domItem.find('#fresado'),  this.domItem.find('#cosido')];
-        if (totalPaginas < 32){
+        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{
+        else {
             for (let tipo of tipos) {
                 tipo.show();
             }
@@ -92,9 +350,90 @@ class DatosGenerales {
             this.domItem.find('#grapado').find('.image-presupuesto').removeClass('selected');
             this.domItem.find('#grapado').hide();
         }
-        else{
+        else {
             this.domItem.find('#grapado').show();
         }
+        this.formValidation.revalidateField('paginas');
+
+        // Se configura dependiento si hay color o no
+        if (paginasColor == 0) {
+
+            this.#handleInteriorLayout('negro');
+            this.divPaginasColorConsecutivas.addClass('d-none');
+            this.divPosPaginasColor.addClass('d-none');
+            this.posPaginasColor.val("");
+            this.pagColorConsecutivas.prop('checked', false);
+        }
+        else {
+            if(this.papelDiferente.is(":checked"))
+                this.#handleInteriorLayout('mixto');    
+            else
+                this.#handleInteriorLayout('color');
+            this.divPaginasColorConsecutivas.removeClass('d-none');
+            this.divPosPaginasColor.removeClass('d-none');
+        }
+    }
+
+
+    #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')){
+            $(".interior-color").removeClass('d-none');
+            this.#handleInteriorLayout('mixto');
+        }
+        else {
+            $(".interior-color").addClass('d-none');
+            $("#divGramajeInteriorColor").addClass('d-none');
+            $(".papel-interior").removeClass('selected');
+            $(".gramaje-interior").prop('checked', false);
+            $(".gramaje-interior-color").prop('checked', false);
+            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);
+        }
     }
 
 }

httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioInterior.js

@@ -0,0 +1,562 @@
+class DisenioInterior {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+        this.domItem = domItem;
+
+        this.wizardStep = wizardForm.querySelector('#interior-libro');
+        this.validatorStepper = validatorStepper;
+
+        this.disenioInterior = this.domItem.find(".disenio-interior");
+        this.papelInterior = this.domItem.find(".papel-interior");
+
+        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.offsetBlanco = this.domItem.find("#offsetBlanco");
+        this.offsetAhuesado = this.domItem.find("#offsetAhuesado");
+        this.offsetAhuesadoVolumen = this.domItem.find("#offsetAhuesadoVolumen");
+        this.estucadoMate = this.domItem.find("#estucadoMate");
+
+        this.gramaje70 = this.domItem.find("#interiorGramaje70");
+        this.gramaje80 = this.domItem.find("#interiorGramaje80");
+        this.gramaje90 = this.domItem.find("#interiorGramaje90");
+        this.gramaje100 = this.domItem.find("#interiorGramaje100");
+        this.gramaje115 = this.domItem.find("#interiorGramaje115");
+        this.gramaje120 = this.domItem.find("#interiorGramaje120");
+        this.gramaje135 = this.domItem.find("#interiorGramaje135");
+        this.gramaje150 = this.domItem.find("#interiorGramaje150");
+        this.gramaje170 = this.domItem.find("#interiorGramaje170");
+
+        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.offsetBlanco_color = this.domItem.find("#offsetBlancoColor");
+        this.offsetAhuesado_color = this.domItem.find("#offsetAhuesadoColor");
+        this.offsetAhuesadoVolumen_color = this.domItem.find("#offsetAhuesadoVolumenColor");
+        this.estucadoMate_color = this.domItem.find("#estucadoMateColor");
+
+        this.gramaje70_color = this.domItem.find("#interiorGramaje70Color");
+        this.gramaje80_color = this.domItem.find("#interiorGramaje80Color");
+        this.gramaje90_color = this.domItem.find("#interiorGramaje90Color");
+        this.gramaje100_color = this.domItem.find("#interiorGramaje100Color");
+        this.gramaje115_color = this.domItem.find("#interiorGramaje115Color");
+        this.gramaje120_color = this.domItem.find("#interiorGramaje120Color");
+        this.gramaje135_color = this.domItem.find("#interiorGramaje135Color");
+        this.gramaje150_color = this.domItem.find("#interiorGramaje150Color");
+        this.gramaje170_color = this.domItem.find("#interiorGramaje170Color");
+
+        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;
+                    if (targetElement.id.includes("Color"))
+                        this.#handleUpdateGramajeColor();
+                    else
+                        this.#handleUpdateGramaje();
+                }
+            });
+        });
+    }
+
+
+    init() {
+
+        // Eventos
+        this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
+        this.papelInterior.on('click', this.#handlePapelInterior.bind(this));
+        this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));
+        this.papelInterior_color.on('click', this.#handlePapelInterior.bind(this));
+
+        // Observadores
+        this.observer.observe(this.negroEstandar[0], { attributes: true });
+        this.observer.observe(this.negroPremium[0], { attributes: true });
+        this.observer.observe(this.colorEstandar[0], { attributes: true });
+        this.observer.observe(this.colorPremium[0], { attributes: true });
+        this.observer.observe(this.offsetBlanco[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesado[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesadoVolumen[0], { attributes: true });
+        this.observer.observe(this.estucadoMate[0], { attributes: true });
+        this.observer.observe(this.colorEstandar_color[0], { attributes: true });
+        this.observer.observe(this.colorPremium_color[0], { attributes: true });
+        this.observer.observe(this.offsetBlanco_color[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesado_color[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesadoVolumen_color[0], { attributes: true });
+        this.observer.observe(this.estucadoMate_color[0], { attributes: true });
+
+    }
+
+    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) {
+                                const divPapelInterior = $('#divPapelInterior'); // Selecciona el div
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').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_gramaje_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInterior'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').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 (divPapelInterior.hasClass("d-none")) return true;
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').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_gramaje_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInteriorColor'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').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_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':
+                                return '.col-sm-10';
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            stepper.next();
+        });
+    }
+
+
+    #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'))
+            class2Find = '.disenio-interior-color';
+
+        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');
+    }
+
+
+    #handlePapelInterior(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.papel-interior';
+        if (element[0].closest('.image-container').id.includes('Color'))
+            class2Find = '.papel-interior-color';
+
+        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');
+    }
+
+    #handleUpdateGramaje() {
+
+        let showGramaje = false;
+
+        $(".check-interior-gramaje ").prop("checked", false);
+
+        if (this.negroEstandar.hasClass("selected") || this.colorEstandar.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.removeClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        else if (this.negroPremium.hasClass("selected") || this.colorPremium.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.removeClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.removeClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInterior").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInterior").addClass("d-none");
+        }
+    }
+
+
+    #handleUpdateGramajeColor() {
+
+        let showGramaje = false;
+
+        $(".check-interior-color-gramaje ").prop("checked", false);
+
+        if (this.colorEstandar_color.hasClass("selected")) {
+
+            if (this.offsetBlanco_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.removeClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen_color.hasClass("selected")) {
+                this.gramaje70_color.removeClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.addClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.removeClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        else if (this.colorPremium_color.hasClass("selected")) {
+
+            if (this.offsetBlanco_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.removeClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.removeClass("d-none");
+                this.gramaje170_color.removeClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.removeClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.addClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.removeClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.removeClass("d-none");
+                this.gramaje150_color.removeClass("d-none");
+                this.gramaje170_color.removeClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        if ($("#divGramajeInteriorColor").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInteriorColor").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInteriorColor").addClass("d-none");
+        }
+    }
+}
+
+
+export default DisenioInterior;

httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js

@@ -1,26 +1,160 @@
 import DatosGenerales from './datosGenerales.js';
+import DisenioInterior from './disenioInterior.js';
 import Ajax from '../../components/ajax.js';
 
+class PresupuestoCliente {
 
-function initPresupuesto(response){
+    constructor() {
+        this.clientePresupuestoWizard = document.querySelector('#wizard-presupuesto-cliente');
 
-    window.translations = JSON.parse(response);
+        this.validationStepper = new Stepper(this.clientePresupuestoWizard, {
+            linear: true
+        });
 
-    let datosGenerales = new DatosGenerales($("#datos-generales"));
-    datosGenerales.init();
+        this.btnNext = $('#btnNext');
+        this.btnPrev = $('#btnPrev');
+        this.btnPrint = $('#btnPrint');
+        this.btnSave = $('#btnSave');
+        this.btnConfirm = $('#btnConfirm');
+
+        this.datosGenerales = new DatosGenerales($("#datos-generales"), this.clientePresupuestoWizard, this.validationStepper);
+        this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper);
+    }
+
+
+    init() {
+
+        this.btnNext.on('click', this.#nextStep.bind(this));
+        this.btnPrev.on('click', this.#prevtStep.bind(this));
+
+        // Fuerza el foco en el campo de búsqueda de select2
+        $(document).on('select2:open', () => {
+            document.querySelector('.select2-search__field').focus();
+        });
+
+        this.validationStepper._element.addEventListener('shown.bs-stepper', this.buttonsHandler.bind(this));
+
+        this.datosGenerales.init();
+        this.disenioInterior.init();
+
+        this.RELLENAR_PRESUPUESTO();
+
+    }
+
+
+    RELLENAR_PRESUPUESTO() {
+        $("#titulo").val("Titulo del libro");
+        const clienteId = $("#clienteId");
+        const newOption = new Option("Cliente 1", "1", true, true);
+        clienteId.append(newOption).trigger('change');
+
+        const papelFormatoId = $("#papelFormatoId");
+        const newOption2 = new Option("Formato 1", "1", true, true);
+        papelFormatoId.append(newOption2).trigger('change');
+
+        $("#paginasColor").val("5");
+        $("#paginasColor").trigger('change');
+
+        $("#fresado").trigger("click");
+
+        $("#colorEstandar").trigger("click");
+        $("#offsetBlanco").trigger("click");
+        $("#gramaje80").prop("checked", true);  
+        $("#gramaje80").trigger("change");
+
+
+    }
+
+
+    buttonsHandler() {
+        switch (this.validationStepper._currentIndex + 1) {
+            case 0:
+                this.btnPrev.addClass('d-none');
+                this.btnNext.removeClass('d-none');
+                this.btnPrint.addClass('d-none');
+                this.btnSave.addClass('d-none');
+                this.btnConfirm.addClass('d-none');
+                break;
+
+            case 1:
+                this.btnPrev.removeClass('d-none');
+                this.btnNext.removeClass('d-none');
+                this.btnPrint.addClass('d-none');
+                this.btnSave.addClass('d-none');
+                this.btnConfirm.addClass('d-none');
+                break;
+        }
+    }
+
+
+    #nextStep() {
+
+        switch (this.validationStepper._currentIndex) {
+            case 0:
+                this.datosGenerales.formValidation.validate();
+                break;
+
+            case 1:
+                this.disenioInterior.formValidation.validate();
+                break;
+            /*
+ 
+            case 2:
+                FormValidation4.validate();
+                break;
+    
+            case 3:
+                FormValidation5.validate();
+                break;
+    */
+            default:
+                break;
+        }
+    }
+
+    #prevtStep() {
+        switch (this.validationStepper._currentIndex) {
+            case 4:
+                validationStepper.previous();
+                break;
+
+            case 3:
+                validationStepper.previous();
+                break;
+
+            case 2:
+                validationStepper.previous();
+                break;
+
+            case 1:
+                this.validationStepper.previous();
+                break;
+
+            default:
+                break;
+        }
+    }
+}
+
+function initialize(translations) {
+
+    window.translations = JSON.parse(translations);
+
+    let presupuestoCliente = new PresupuestoCliente();
+    presupuestoCliente.init();
 }
 
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
 
     const locale = document.querySelector('meta[name="locale"]').getAttribute('content');
-    
-    new Ajax('/translate/getTranslation', {locale: locale, translationFile: 'Presupuestos'}, {}, 
-        initPresupuesto,
-        function(error){
+
+    new Ajax('/translate/getTranslation', { locale: locale, translationFile: 'Presupuestos' }, {},
+        initialize,
+        function (error) {
             console.log("Error getting translations:", error);
         }
     ).post();
-    
+
 });
 

httpdocs/themes/vuexy/css/presupuestoCliente.css

@@ -37,3 +37,9 @@
     transform-style: preserve-3d;
 }
 
+.checkbox-presupuesto-container {
+    width: 110px !important;
+    max-width: 110px !important;
+    min-width: 110px !important;
+}
+