<div class="accordion accordion-bordered mt-3" id="accordionDatosLibro">
    <div class="card accordion-item active">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button" data-bs-toggle="collapse"
                data-bs-target="#accordionDatosLibroTip" aria-expanded="false" aria-controls="accordionDatosLibroTip">
                <h4><?= lang("Presupuestos.datosLibro") ?></h4>
            </button>
        </h2>

        <div id="accordionDatosLibroTip" class="accordion-collapse collapse show" data-bs-parent="#accordionDatosLibro">
            <div class="accordion-body">

                <div id='alert-datosLibro'></div>
                <!-- Fila 1 -->
                <div class="row">
                    <div class="col-md-12 col-lg-2 px-4">

                        <div class="row">
                            <div class="mb-1">
                                <label for="paginas" class="form-label">
                                    <?= lang('Presupuestos.paginas') ?>*
                                </label>
                                <input type="number" id="paginas" name="paginas" tabindex="1" maxLength="11"
                                    class="form-control" value="" <?php echo ($tipo_impresion_id == 21) ? ' max=80' : '' ?>>
                            </div><!--//.mb-3 -->

                        </div>
                    </div><!--//.col -->

                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-1">
                            <label for="tirada" class="form-label">
                                <?= lang('Presupuestos.tirada') ?>*
                            </label>
                            <input type="number" id="tirada" name="tirada" tabindex="2" maxLength="11"
                                class="form-control" value="">
                        </div><!--//.mb-3 -->

                    </div><!--//.col -->


                    <div class="col-md-12 col-lg-4 px-4">
                        <div class="mb-1">
                            <label id="label_papelFormatoId" for="papelFormatoId" class="form-label">
                                <?= lang('Presupuestos.papelFormatoId') ?>*
                            </label>
                            <div class="row tamanio-estandar">
                                <select id="papelFormatoId" name="papel_formato_id" tabindex="3"
                                    class="form-control select2bs2" style="width: 100%;">
                                </select>
                            </div>


                            <div class="row">
                                <div class="col-md-12 col-lg-6 tamanio-personalizado d-none">
                                    <div class="mb-1">
                                        <input type="number" id="papelFormatoAncho" name="papel_formato_ancho"
                                            maxLength="8" step="0.01" class="form-control formato_libro" value="">
                                    </div><!--//.mb-3 -->
                                </div><!--//.col -->

                                <div class="col-md-12 col-lg-6 tamanio-personalizado d-none">
                                    <div class="mb-1">
                                        <input type="number" id="papelFormatoAlto" name="papel_formato_alto"
                                            maxLength="8" step="0.01" class="form-control formato_libro" value="">
                                    </div><!--//.mb-3 -->
                                </div><!--//.col -->
                            </div>

                        </div><!--//.mb-3 -->
                    </div><!--//.col -->


                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-1">
                            <label for="merma" class="form-label">
                                <?= lang('Presupuestos.merma') ?>*
                            </label>
                            <input readonly style="background: #E8E8E8;" id="merma" name="merma" maxLength="8"
                                tabindex="4" step="1" placeholder="10" class="form-control" value="">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-1">
                            <label for="mermacubierta" class="form-label">
                                <?= lang('Presupuestos.mermacubierta') ?>*
                            </label>
                            <input readonly style="background: #E8E8E8;" id="mermacubierta" name="merma_cubierta"
                                tabindex="5" placeholder="10" maxLength="8" step="1" class="form-control" value="">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

                </div> <!--//.row -->



                <!-- Fila 2 -->
                <div class="row">
                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="row solapas-cubierta-div">
                            <div class="mb-1">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input solapas_cubierta" type="checkbox" id="solapas"
                                        name="solapas" tabindex="6" value="1">
                                    <label class="form-check-label"
                                        for="solapas"><?= lang('Presupuestos.solapasCubierta') ?></label>
                                </div>
                            </div><!--//.mb-3 -->
                        </div>
                        <div class="row">
                            <div class="mb-1 solapas-cubierta-div d-none" id="div_solapas_ancho">
                                <label for="solapas_ancho" class="form-label">
                                    <?= lang('Presupuestos.solapasAnchoCubierta') ?>*
                                </label>
                                <input type="number" id="solapas_ancho" name="solapas_ancho" placeholder="0"
                                    maxLength="8" step="1" min=60 class="form-control solapas_cubierta" value="60">
                                <div class="form-text">
                                    Entre 60 y 120 mm
                                </div>
                            </div><!--//.mb-1 -->
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="row solapas-sobrecubierta-div">
                            <div class="mb-1">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input solapas_sobrecubierta" type="checkbox"
                                        id="solapas_sobrecubierta" name="solapas_sobrecubierta" tabindex="6" value="1">
                                    <label class="form-check-label"
                                        for="solapas_sobrecubierta"><?= lang('Presupuestos.sobrecubierta') ?></label>
                                </div>
                            </div><!--//.mb-3 -->
                        </div>
                        <div class="row">
                            <div class="mb-1 solapas-sobrecubierta-div d-none" id="div_solapas_ancho_sobrecubierta">
                                <label for="solapas_ancho_sobrecubierta" class="form-label">
                                    <?= lang('Presupuestos.solapasAnchoSobrecubierta') ?>*
                                </label>
                                <input type="number" id="solapas_ancho_sobrecubierta" name="solapas_ancho_sobrecubierta"
                                    placeholder="60" min="60" maxLength="8" step="1"
                                    class="form-control solapas_sobrecubierta" value="">
                                <div class="form-text">
                                    Entre 60 y 120 mm
                                </div>
                            </div><!--//.mb-1 -->
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-6 px-4">
                        <div class="row">
                            <div class="mb-1">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="papelFormatoPersonalizado"
                                        name="papel_formato_personalizado" value="1">
                                    <label class="form-check-label"
                                        for="papelFormatoPersonalizado"><?= lang('Presupuestos.papelFormatoPersonalizado') ?></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fila 3 -->
                <div class="row mt-2 container-faja">

                    <div class="row align-items-center">
                        <div class="col-md-12 col-lg-2 px-4">
                            <div class="mb-1">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="faja" name="faja" tabindex="6"
                                        value="1">
                                    <label class="form-check-label" for="faja"><?= lang('Presupuestos.faja') ?></label>
                                </div>
                            </div><!--//.mb-3 -->
                        </div>

                        <div class="col-md-12 col-lg-2 px-4">
                            <div class="mb-1 faja-div d-none" id="div_faja_alto">
                                <label for="faja_alto" class="form-label">
                                    <?= lang('Presupuestos.altoFaja') ?>*
                                </label>
                                <input type="number" id="faja_alto" name="faja_alto" placeholder="0" maxLength="8"
                                    step="1" class="form-control" min="50" value="50">
                                <div class="form-text">
                                    Entre 50 y 120 mm
                                </div>
                            </div><!--//.mb-1 -->
                        </div>
                        <div class="col-md-12 col-lg-2 px-4">
                            <div class="mb-1 faja-div d-none" id="div_faja_solapas_ancho">
                                <label for="faja_solapas_ancho" class="form-label">
                                    <?= lang('Presupuestos.tamanioSolapasFaja') ?>*
                                </label>
                                <input type="number" id="faja_solapas_ancho" name="faja_solapas_ancho" placeholder="0"
                                    maxLength="8" step="1" min="60" class="form-control" value="60">
                                <div class="form-text">
                                    Entre 60 y 120 mm
                                </div>
                            </div><!--//.mb-1 -->
                        </div>

                    </div>
                </div>


                <!----------------------------------------------------------------------------->
                <?php if (str_contains($formAction, 'edit')): ?>

                <div class="divider divider-dark text-start mb-1">
                    <div class="divider-text">
                        <h5>
                            <?= lang("Presupuestos.acabadosExteriores") ?>
                        </h5>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-lg-6 px-4">
                        <div class="row">
                            <div class="mb-1">
                                <label id="label_acabado_cubierta_id" for="acabado_cubierta_id" class="form-label">
                                    <?= lang('Presupuestos.acabadoCubierta') ?>*
                                </label>
                                <select id="acabado_cubierta_id" name="acabado_cubierta_id" tabindex="3"
                                    class="form-control select2bs2" style="width: 100%;">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-6 px-4">
                        <div class="row impresion-con-sobrecubierta">
                            <div class="mb-1">
                                <label id="label_acabado_cubierta_id" for="acabado_sobrecubierta_id" class="form-label">
                                    <?= lang('Presupuestos.acabadoSobrecubierta') ?>*
                                </label>
                                <select id="acabado_sobrecubierta_id" name="acabado_sobrecubierta_id" tabindex="3"
                                    class="form-control select2bs2" style="width: 100%;">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-6 px-4 d-none acabado-faja">
                        <div class="row">
                            <div class="mb-1">
                                <label id="label_acabado_faja_id" for="acabado_faja_id" class="form-label">
                                    <?= lang('Presupuestos.acabadoFaja') ?>*
                                </label>
                                <select id="acabado_faja_id" name="acabado_faja_id" tabindex="3"
                                    class="form-control select2bs2" style="width: 100%;">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!----------------------------------------------------------------------------->
                <div class="divider divider-dark text-start mb-1">
                    <div class="divider-text">
                        <h5>
                            <?= lang("Presupuestos.opcionesPresupuesto") ?>
                        </h5>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 col-lg-3 px-4">
                        <div class="mb-3">
                            <div class="form-check">
                                <label for="retractilado" class="form-check-label">
                                    <input type="checkbox" id="retractilado" name="retractilado" value="1"
                                        class="form-check-input" service="acabado"
                                        service-id=<?= $serviciosAutomaticos['retractilado'] ?>>
                                    <?= lang('Presupuestos.retractilado') ?>
                                </label>
                            </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                        </div><!--//.col -->

                        <div class="col-md-12 col-lg-3 px-4">
                            <div class="mb-3">
                                <div class="form-check">
                                    <label for="retractilado5" class="form-check-label">
                                        <input type="checkbox" id="retractilado5" name="retractilado_5" value="1"
                                            class="form-check-input" service="acabado"
                                            service-id=<?= $serviciosAutomaticos['retractilado5'] ?>>
                                        <?= lang('Presupuestos.retractilado5') ?>
                                    </label>
                                </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                        </div><!--//.col -->

                        <div class="col-md-12 col-lg-3 px-4">
                            <div class="mb-3">
                                <div class="form-check">
                                    <label for="prototipo" class="form-check-label">
                                        <input type="checkbox" id="prototipo" name="prototipo" value="1"
                                            class="form-check-input" service="extra"
                                            service-id=<?= $serviciosAutomaticos['prototipo'] ?>>
                                        <?= lang('Presupuestos.prototipo') ?>
                                    </label>
                                </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                            <div class="mb-3">

                            </div><!--//.mb-3 -->
                        </div><!--//.col -->


                    </div>


                    <div class="row">

                        <div class="col-md-12 col-lg-3 px-4">
                            <div class="mb-3">
                                <div class="form-check">
                                    <label for="ferro" class="form-check-label">
                                        <input type="checkbox" id="ferro" name="ferro" value="1" class="form-check-input"
                                            service="extra" service-id=<?= $serviciosAutomaticos['ferro'] ?>>
                                        <?= lang('Presupuestos.ferro') ?>
                                    </label>
                                </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                        </div><!--//.col -->


                        <div class="col-md-12 col-lg-3 px-4">
                            <div class="mb-3">
                                <div class="form-check">
                                    <label for="ferroDigital" class="form-check-label">
                                        <input type="checkbox" id="ferroDigital" name="ferro_digital" value="1"
                                            service="extra" service-id=<?= $serviciosAutomaticos['ferro_digital'] ?>
                                            class="form-check-input">
                                        <?= lang('Presupuestos.ferroDigital') ?>
                                    </label>
                                </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                        </div><!--//.col -->

                        <div class="col-md-12 col-lg-3 px-4">
                            <div class="mb-3">
                                <div class="form-check">
                                    <label for="marcapaginas" class="form-check-label">
                                        <input type="checkbox" id="marcapaginas" name="marcapaginas" value="1"
                                            class="form-check-input">
                                        <?= lang('Presupuestos.marcapaginas') ?>
                                    </label>
                                </div><!--//.form-check -->
                            </div><!--//.mb-3 -->
                        </div><!--//.col -->

                        <input type="checkbox" id="serv_solapas_cubierta" name="serv_solapas_cubierta" value="1"
                            class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_cubierta'] ?>>
                        <input type="checkbox" id="serv_solapas_sobrecubierta" name="serv_solapas_sobrecubierta" value="1"
                            class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_sobrecubierta'] ?>>
                        <input type="checkbox" id="solapas_faja" name="solapas_faja" value="1"
                            class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_faja'] ?>>
                        <input type="checkbox" id="solapas_grandes_cubierta" name="solapas_grandes_cubierta" value="1"
                            class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_grandes_cubierta'] ?>>
                        <input type="checkbox" id="solapas_grandes_sobrecubierta" name="solapas_grandes_sobrecubierta"
                            value="1" class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_grandes_sobrecubierta'] ?>>
                        <input type="checkbox" id="solapas_grandes_faja" name="solapas_grandes_faja" value="1"
                            class="form-check-input d-none" service="manipulado"
                            service-id=<?= $serviciosAutomaticos['solapas_grandes_faja'] ?>>

                    </div>

                <?php endif; ?>

            </div> <!-- //.accordion-body -->
        </div> <!-- //.accordion-collapse -->
    </div> <!-- //.accordion-item -->
</div> <!-- //.accordion -->