problema con los custom radiobutons

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_disenioCubierta.php

@@ -1,5 +1,9 @@
 <div class="col-12 pb-2 d-flex flex-column align-items-center">
 
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h5 class="mb-1 fw-bold titulo"></h5>
+    </div><!--//.mb-3 -->
+
     <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
         <h3 class="mb-1 fw-bold"> Diseño cubierta </h3>
     </div><!--//.mb-3 -->
@@ -34,7 +38,7 @@
     </div>
 
 
-    <div id="divSolapasCubierta" name="div_solapas_cubierta" class="row col-sm-10 mb-5 justify-content-center">
+    <div id="divSolapasCubierta" name="div_solapas_cubierta" class="row col-sm-10 mb-5 justify-content-center d-none">
 
         <div id="solapasCubiertaNo" class="d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
             <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/sinSolapasCubierta.png") ?>" alt="Sin solapas">
@@ -43,160 +47,207 @@
             </label>
         </div>
 
-        <div id="solapasCubiertaNo" class="d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
+        <div id="solapasCubiertaSi" class="d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
             <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/conSolapasCubierta.png") ?>" alt="Con solapas">
             <label class="form-label">
                 Con solapas
             </label>
         </div>
 
-        <div class="d-flex flex-column align-items-center justify-content-center imagen-selector image-container">
-            <label for="tirada2" class="form-label">
+        <div id="divTamanioSolapas" class="d-flex flex-column align-items-center justify-content-center image-container d-none">
+            <label for="solapasCubierta" class="form-label">
                 Tamaño solapas
             </label>
-            <input type="number" class="calcular-presupuesto form-control text-center num-input" id="solapasCubierta" name="solapas_cubierta" step="1" value="50">
+            <input id="solapasCubierta" name="solapas_cubierta" type="number" class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1" value="60">
+            <div class="form-text">
+                Entre 60 y 120 mm
+            </div>
         </div>
 
     </div>
 
+    <div id="divConfigTapaDura" class="row col-sm-10 mb-5 justify-content-center d-none">
+
+        <div class="row justify-content-center">
+            <div class="col-sm-3">
+                <label for="paginasColor" class="form-label">
+                    <?= lang('Presupuestos.papelGuardas') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="papelGuardas" name="papel_guardas">
+                    <option value="OFFWH"><?= lang('Presupuestos.offsetBlancoGuardas') ?></option>
+                    <option value="OFFAH"><?= lang('Presupuestos.offsetAhuesadoGuardas') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="guardasImpresas" class="form-label">
+                    <?= lang('Presupuestos.guardasImpresas') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="guardasImpresas" name="guardas_impresas">
+                    <option value="0"><?= lang('Presupuestos.sinImpresion') ?></option>
+                    <option value="1"><?= lang('Presupuestos.unaCara') ?></option>
+                    <option value="2"><?= lang('Presupuestos.dosCaras') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="cabezada" class="form-label">
+                    <?= lang('Presupuestos.cabezada') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="cabezada" name="cabezada">
+                    <option value="WHI"><?= lang('Presupuestos.blanca') ?></option>
+                    <option value="GRE"><?= lang('Presupuestos.verde') ?></option>
+                    <option value="BLUE"><?= lang('Presupuestos.azul') ?></option>
+                    <option value="REDYEL"><?= lang('Presupuestos.rojaAmarilla') ?></option>
+                </select>
+            </div>
+
+        </div>
+    </div>
+
     <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
-        <h3 class="mb-1 fw-bold"> Papel interior </h3>
+        <h3 class="mb-1 fw-bold"> Papel cubierta </h3>
     </div><!--//.mb-3 -->
 
-
     <div id="divPapelCubierta" name="div_papel_cubierta" class="row col-sm-10 mb-3 justify-content-center">
 
-        <div id="offsetBlanco" class="d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
-            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-blanco.png") ?>" alt="offsetBlanco">
-            <label for="titulo" class="form-label">
-                Offset Blanco
+        <div id="cartulinaEstucada" class="min-width-fit d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/cartulina-grafica.png") ?>" alt="Cartulina estucada">
+            <label class="form-label">
+                Cartulina gráfica estucada a una cara
             </label>
         </div>
 
-        <div id="offsetAhuesado" class="d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
-            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado.png") ?>" alt="offsetAhuesado">
-            <label for="titulo" class="form-label">
-                Offset Ahuesado
-            </label>
-        </div>
-
-        <div id="offsetAhuesadoVolumen" class="d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
-            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado-volumen.png") ?>" alt="offsetAhuesadoVolumen">
-            <label for="titulo" class="form-label">
-                Offset Ahuesado Volumen
-            </label>
-        </div>
-
-        <div id="estucadoMate" class="d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
-            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/estucado-mate.png") ?>" alt="estucadoMate">
-            <label for="titulo" class="form-label">
+        <div id="estucadoMate" class="min-width-fit d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/estucado-mate-cubierta.png") ?>" alt="Estucado mate">
+            <label class="form-label">
                 Estucado Mate
             </label>
         </div>
-
     </div>
 
-    <div id="divGramajeCubierta" name="div_gramaje_cubierta" class="row col-sm-10 mb-3 justify-content-center">
 
-        <div class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje70">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 70 gr </span>
-                    </span>
-                    <input id="gramaje70" name="customRadioIcon" data-value="70" class="form-check-input" type="radio" value="" checked />
-                </label>
-            </div>
-        </div>
+    <div id="divGramajeCubierta" name="div_gramaje_interior_color" class="row col-sm-10 mb-3 justify-content-center d-none">
 
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje80">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 80 gr </span>
-                    </span>
-                    <input id="gramaje80" name="customRadioIcon" data-value="80" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
 
-        <div class="mb-md-0 mb-2 checkbox-presupuesto-container">
+        <div id="divGramaje170Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
             <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje90">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 90 gr </span>
-                    </span>
-                    <input id="gramaje90" name="customRadioIcon" data-value="90" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje100">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 100 gr </span>
-                    </span>
-                    <input id="gramaje100" name="customRadioIcon" data-value="100" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje115">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 115 gr </span>
-                    </span>
-                    <input id="gramaje115" name="customRadioIcon" data-value="115" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje120">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 120 gr </span>
-                    </span>
-                    <input id="gramaje120" name="customRadioIcon" data-value="120" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje135">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 135 gr </span>
-                    </span>
-                    <input id="gramaje135" name="customRadioIcon" data-value="135" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje150">
-                    <span class="custom-option-body">
-                        <span class="custom-option-title"> 150 gr </span>
-                    </span>
-                    <input id="gramaje150" name="customRadioIcon" data-value="150" class="form-check-input" type="radio" value="" />
-                </label>
-            </div>
-        </div>
-
-        <div class="checkbox-presupuesto-container mb-md-0 mb-2">
-            <div class="form-check custom-option custom-option-icon">
-                <label class="form-check-label custom-option-content" for="gramaje170">
+                <label class="form-check-label custom-option-content" for="gramaje170Cubierta">
                     <span class="custom-option-body">
                         <span class="custom-option-title"> 170 gr </span>
                     </span>
-                    <input id="gramaje170" name="customRadioIcon" data-value="170" class="form-check-input" type="radio" value="" />
+                    <input id="gramaje170Cubierta" name="gramajeCubiertaRadio" data-value="170" class="form-check-input" type="radio" value="170"  />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje240Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon">
+                <label class="form-check-label custom-option-content" for="gramaje240Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 240 gr </span>
+                    </span>
+                    <input id="gramaje240Cubierta" name="gramajeCubiertaRadio" data-value="240" class="form-check-input" type="radio" value="240"  />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje270Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon">
+                <label class="form-check-label custom-option-content" for="gramaje270Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 270 gr </span>
+                    </span>
+                    <input id="gramaje270Cubierta" name="gramajeCubiertaRadio" data-value="270" class="form-check-input" type="radio" value="270"  />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje300Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon">
+                <label class="form-check-label custom-option-content" for="gramaje300Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 300 gr </span>
+                    </span>
+                    <input id="gramaje300Cubierta" name="gramajeCubiertaRadio" data-value="300" class="form-check-input" type="radio" value="300"  />
+                </label>
+            </div>
+            <div class="form-text">
+                Recomendado
+            </div>
+        </div>
+
+        <div id="divGramaje350Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon">
+                <label class="form-check-label custom-option-content" for="gramaje350Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 350 gr </span>
+                    </span>
+                    <input id="gramaje350Cubierta" name="gramajeCubiertaRadio" data-value="350" class="form-check-input" type="radio" value="350"  />
                 </label>
             </div>
         </div>
 
     </div>
 
+
+    <hr class="col-sm-10 my-10">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Acabados </h3>
+    </div><!--//.mb-3 -->
+
+    <div class="row col-sm-12 mb-5 justify-content-center">
+
+        <div class="row justify-content-center">
+            <div class="col-sm-3">
+                <label for="plastificado" class="form-label">
+                    <?= lang('Presupuestos.plastificado') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="plastificado" name="plastificado">
+                    <option value="BRIL"><?= lang('Presupuestos.brillo') ?></option>
+                    <option value="MATE"><?= lang('Presupuestos.mate') ?></option>
+                    <option value="ANTI"><?= lang('Presupuestos.antirrayado') ?></option>
+                    <option value="SAND"><?= lang('Presupuestos.rugoso') ?></option>
+                    <option value="SINP"><?= lang('Presupuestos.sinPlastificar') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="barniz" class="form-label">
+                    <?= lang('Presupuestos.barniz') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="barniz" name="barniz">
+                    <option value=""> - </option>
+                    <option value="R2D"><?= lang('Presupuestos.relieve2D') ?></option>
+                    <option value="R3D"><?= lang('Presupuestos.relieve3D') ?></option>
+                </select>
+                <div class="form-text">
+                    <?= lang('Presupuestos.barnizDescription') ?>
+                </div>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="estampado" class="form-label">
+                    <?= lang('Presupuestos.estampado') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="estampado" name="estampado">
+                    <option value=""> - </option>
+                    <option value="GOLD"><?= lang('Presupuestos.oro') ?></option>
+                    <option value="SILV"><?= lang('Presupuestos.plata') ?></option>
+                    <option value="COPP"><?= lang('Presupuestos.cobre') ?></option>
+                    <option value="BRON"><?= lang('Presupuestos.bronce') ?></option>
+                </select>
+            </div>
+
+            <div id="solapasCubiertaNo" class="d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
+                <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/retractilado.png") ?>" alt="Retractilado">
+                <label class="form-label">
+                    Retractilado
+                </label>
+            </div>
+
+        </div>
+    </div>
+
 </div>