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

    <div class="col-sm-8 mb-5 d-flex flex-column align-items-center">
        <h6 class="mb-1 text-center"> Recuerde que la cubierta es el conjunto formado por la portada, contraportada,
            lomo y solapas, en caso de que las lleve. </h6>
    </div><!--//.mb-3 -->

    <div id="divTipoCubierta" name="div_tipo_cubierta" class="row col-sm-10 mb-5 justify-content-center">

        <div id="tapaBlanda"
            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/tapa-blanda.jpg") ?>"
                alt="TapaBlanda">
            <label class="form-label">
                Tapa blanda
            </label>
        </div>

        <div id="tapaDura"
            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
            <img class="image-presupuesto"
                src="<?= site_url("assets/img/presupuestoCliente/tapa-dura-lomo-recto.jpg") ?>" alt="TapaDura">
            <label class="form-label">
                Tapa dura lomo recto
            </label>
        </div>

        <div id="tapaDuraLomoRedondo"
            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
            <img class="image-presupuesto"
                src="<?= site_url("assets/img/presupuestoCliente/tapa-dura-lomo-redondo.jpg") ?>"
                alt="TapaDuraLomoRedondo">
            <label class="form-label">
                Tapa dura lomo redondo
            </label>
        </div>

    </div>


    <div id="divCarasImpresion" name="div_caras_impresion" class="row col-sm-10 mb-5 justify-content-center d-none">

        <div class="col-sm-4 mb-md-0 mb-2">
            <label for="carasCubierta" class="form-label">Caras impresas cubierta</label>
            <select id="carasCubierta" name="carasCubierta" class="form-control select2bs2 calcular-presupuesto"
                style="width: 100%;">
                <option value="2" selected>
                    <p><?= lang('Presupuestos.unaCara') ?></p>
                </option>
                <option value="4">
                    <p><?= lang('Presupuestos.dosCaras') ?></p>
                </option>
            </select>
        </div>

    </div>


    <div id="divSolapasCubierta" name="div_solapas_cubierta" class="row col-sm-10 mb-5 justify-content-center d-none">

        <div id="solapasCubiertaNo"
            class="calcular-presupuesto 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">
            <label class="form-label">
                Sin solapas
            </label>
        </div>

        <div id="solapasCubiertaSi"
            class="calcular-presupuesto 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 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 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 id="textoSolapasCubierta" class="form-text">
                Entre 60 y 120 mm
            </div>
        </div>

    </div>

    <div id="divConfigTapaDura" name="div_config_tapa_dura" class="row col-sm-10 mb-5 justify-content-center d-none">

        <div class="row justify-content-center">
            <div class="row col-sm-4">
                <div class="">
                    <label for="papelGuardas" class="form-label">
                        <?= lang('Presupuestos.papelGuardas') ?>
                    </label>
                    <select class="form-select select2bs2 calcular-presupuesto" id="papelGuardas" name="papel_guardas">
                    </select>
                </div>
                <div class="">
                    <label for="gramajeGuardas" class="form-label">
                        <?= lang('Presupuestos.gramajeGuardas') ?>
                    </label>
                    <select class="form-select select2bs2 calcular-presupuesto" id="gramajeGuardas"
                        name="gramaje_guardas">
                    </select>
                </div>
            </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="4"><?= lang('Presupuestos.unaCara') ?></option>
                    <option value="8"><?= 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" 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 id="textoPapelCubierta" class="col-sm-8 mb-3 d-flex flex-column align-items-center d-none">
        <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-5 justify-content-center">
    </div>


    <div id="divPapelEspecialCubierta" name="div_papel_especial_cubierta"
        class="row col-sm-10 mb-3 justify-content-center d-none">
        <div class="col-sm-5 mb-0">
            <label for="titulo" class="form-label">
                Seleccione el papel especial
            </label>
            <select id="papelEspecialCubiertaSel" name="papel_especial_cubierta"
                class="form-control select2bs2 calcular-presupuesto col-5 mb-0">
            </select>
        </div>
    </div>

    <div id="divGramajeCubierta" name="div_gramaje_cubierta" class="row col-sm-10 mb-3 justify-content-center d-none">
    </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-6">
                <select class="form-select select2bs2 calcular-presupuesto" id="acabadoCubierta"
                    name="acabado_cubierta">
                    <option value="0"> <?= lang('Presupuestos.acabadoNinguno') ?> </option>
                </select>
            </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"> Extras </h3>
    </div><!--//.mb-3 -->

    <div class="row col-sm-12 mb-3 justify-content-center align-items-top">

        <div class="row col-sm-2 mb-3 d-flex flex-column align-items-center sobrecubierta-items">
            <div class="form-check form-switch mb-2">
                <input class="calcular-presupuesto form-check-input" type="checkbox" id="addSobrecubierta"
                    name="add_sobrecubierta" value="1">
                <label class="form-check-label" for="addSobrecubierta"><?= lang('Presupuestos.sobrecubierta') ?></label>
            </div>
        </div>

        <div class="col-sm-3 config-sobrecubierta d-none sobrecubierta-items">
            <div class="">
                <label for="papelSobrecubierta" class="form-label">
                    <?= lang('Presupuestos.papelSobrecubierta') ?>
                </label>
                <select class="form-select select2bs2 calcular-presupuesto" id="papelSobrecubierta" name="papel_sobrecubierta">
                </select>
            </div>
            <div class="">
                <label for="gramajeSobrecubierta" class="form-label">
                    <?= lang('Presupuestos.gramajeSobrecubierta') ?>
                </label>
                <select class="form-select select2bs2 calcular-presupuesto" id="gramajeSobrecubierta" name="gramaje_sobrecubierta">
                </select>
            </div>
        </div>

        <div class="col-sm-3 config-sobrecubierta d-none sobrecubierta-items">
            <label for="solapasSobrecubierta" class="form-label">
                <?= lang('Presupuestos.tamanioSolapasSobrecubierta') ?>
            </label>
            <input id="solapasSobrecubierta" name="solapas_sobrecubierta" type="number"
                class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1" value="60">
            <div id="textoLimitesSolapasSobrecubierta" class="form-text">
                Entre 60 y 120 mm
            </div>
        </div>

        <div class="col-sm-4 config-sobrecubierta d-none sobrecubierta-items">
            <label for="plastificadoSobrecubierta" class="form-label">
                <?= lang('Presupuestos.acabado') ?>
            </label>
            <select class="form-select select2bs2 calcular-presupuesto" id="acabadoSobrecubierta"
                name="acabado_sobrecubierta">
                <option value="0"> <?= lang('Presupuestos.acabadoNinguno') ?> </option>
            </select>
        </div>
    </div>

    <div id="divExtras" name="div_extras" class="row col-sm-12 mb-0 justify-content-center">

        <div class="row justify-content-center">

            <div class="col-sm-2 mb-3 d-flex flex-column align-items-center">
                <div class="form-check form-switch mb-2">
                    <input class="calcular-presupuesto form-check-input" type="checkbox" id="addFaja" name="add_faja"
                        value="1">
                    <label class="form-check-label" for="addFaja"><?= lang('Presupuestos.faja') ?></label>
                </div>
            </div>

            <div class="row col-sm-3 config-faja d-none">
                <div class="">
                    <label for="papelFaja" class="form-label">
                        <?= lang('Presupuestos.papelFaja') ?>
                    </label>
                    <select class="form-select select2bs2 calcular-presupuesto" id="papelFaja" name="papel_faja">
                    </select>
                </div>
                <div class="">
                    <label for="gramajeFaja" class="form-label">
                        <?= lang('Presupuestos.gramajeFaja') ?>
                    </label>
                    <select class="form-select select2bs2 calcular-presupuesto" id="gramajeFaja" name="gramaje_faja">
                    </select>
                </div>
            </div>


            <div class="col-sm-2 config-faja d-none">
                <label for="altoFaja" class="form-label">
                    <?= lang('Presupuestos.altoFaja') ?>
                </label>
                <input id="altoFaja" name="alto_faja" type="number"
                    class="calcular-presupuesto form-control text-center num-input" min="50" step="1" value="60">
                <div class="form-text">
                    Entre 50 mm y 120 mm
                </div>
            </div>


            <div class="col-sm-2 config-faja d-none">
                <label for="solapasFaja" class="form-label">
                    <?= lang('Presupuestos.tamanioSolapasFaja') ?>
                </label>
                <input id="solapasFaja" name="solapas_faja" type="number"
                    class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1"
                    value="60">
                <div id="textoLimitesSolapasFaja" class="form-text">
                    Entre 60 y 120 mm
                </div>
            </div>

            <div class="col-sm-3 config-faja d-none">
                <label for="acabadoFaja" class="form-label">
                    <?= lang('Presupuestos.plastificadoFaja') ?>
                </label>
                <select class="form-select select2bs2 calcular-presupuesto" id="acabadoFaja" name="plastificado_faja">
                    <option value="0"> <?= lang('Presupuestos.acabadoNinguno') ?> </option>
                </select>
            </div>

        </div>
    </div>


</div>