<div class="animate-fadeInUpBounce">
    <div class="row justify-content-center mb-3">
        <div class="col-auto">
            <button type="button" id="btn-plantilla-cubierta" class="btn btn-outline-primary btn-border">
                <i class="ri-questionnaire-line label-icon align-middle fs-16 me-2"></i>
                <span th:text="#{presupuesto.plantilla-cubierta}">
                    Plantilla de cubierta
                </span>
            </button>
        </div>
    </div>

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.tipo-cubierta}">Tipo cubierta
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.tipo-cubierta-descripcion}">Seleccione el tipo de cubierta
            </h5>
        </div>

        <div class="ribbon-content mt-4">
            <div class="row justify-content-center imagen-container-group mt-3">
                <div id="tapaBlanda" class="tapa-cubierta image-container imagen-selector selected" th:attr="data-summary-text=#{presupuesto.tapa-blanda}">
                    <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/tapa-blanda.png"
                        alt="">
                    <label for="titulo" class="form-label" th:text="#{presupuesto.tapa-blanda}">
                        Tapa blanda
                    </label>
                </div>

                <div id="tapaDura" class="tapa-cubierta image-container imagen-selector" th:attr="data-summary-text=#{presupuesto.tapa-dura}">
                    <img class="image-presupuesto"
                        src="/assets/images/imprimelibros/presupuestador/tapa-dura-lomo-recto.png" alt="">
                    <label class="form-label" th:text="#{presupuesto.tapa-dura}">
                        Tapa dura
                    </label>
                </div>

                <div id="tapaDuraLomoRedondo" class="tapa-cubierta image-container imagen-selector" th:attr="data-summary-text=#{presupuesto.tapa-dura-lomo-redondo}">
                    <img class="image-presupuesto"
                        src="/assets/images/imprimelibros/presupuestador/tapa-dura-lomo-redondo.png" alt="">
                    <label class="form-label" th:text="#{presupuesto.tapa-dura-lomo-redondo}">
                        Tapa dura lomo redondo
                    </label>
                </div>
            </div>


            <div class="row justify-content-center mt-4 imagen-container-group tapa-blanda-options">
                <div class="col-auto">
                    <div class="d-flex flex-wrap align-items-center gap-4 ">

                        <!-- Bloque de solapas -->
                        <div class="d-flex gap-3">
                            <div id="sin-solapas" class="image-container imagen-selector solapas-cubierta selected" th:attr="data-summary-text=#{app.no}">
                                <img class="image-presupuesto"
                                    src="/assets/images/imprimelibros/presupuestador/sinSolapasCubierta.png" alt="">
                                <label class="form-label text-center d-block" th:text="#{presupuesto.sin-solapas}">
                                    Sin solapas
                                </label>
                            </div>

                            <div id="con-solapas" class="image-container imagen-selector solapas-cubierta" th:attr="data-summary-text=#{app.yes}">
                                <img class="image-presupuesto"
                                    src="/assets/images/imprimelibros/presupuestador/conSolapasCubierta.png" alt="">
                                <label class="form-label text-center d-block" th:text="#{presupuesto.con-solapas}">
                                    Con solapas
                                </label>
                            </div>
                        </div>

                        <!-- Inputs -->
                        <div class="d-flex flex-column flex-md-row align-items-start gap-3">
                            <!-- Impresión cubierta -->
                            <div>
                                <label for="impresion-cubierta" class="form-label"
                                    th:text="#{presupuesto.impresion-cubierta}">Impresión de cubierta</label>
                                <div class="input-group input-group-sm">
                                    <select class="form-select select2 datos-cubierta tapa-cubierta-summary" id="impresion-cubierta">
                                        <option value="2" th:text="#{presupuesto.una-cara}">Una cara</option>
                                        <option value="4" th:text="#{presupuesto.dos-caras}">Dos caras</option>
                                    </select>
                                    <button
                                        class="btn btn-outline-primary btn-icon waves-effect waves-light material-shadow-none"
                                        type="button" id="impresion-cubierta-help">
                                        <i class="ri-questionnaire-line"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Tamaño solapa -->
                            <div id="div-solapas-cubierta" class="d-none">
                                <label for="tamanio-solapas-cubierta" class="form-label"
                                    th:text="#{presupuesto.tamanio-solapa}">Tamaño solapa</label>
                                <input type="number"
                                    class="form-control form-control-sm solapas-presupuesto datos-cubierta tapa-cubierta-summary"
                                    id="tamanio-solapas-cubierta" min="60" max="120" value="80" step="1">
                                <div class="form-text">
                                    <p class="mb-0">min: 60 mm</p>
                                    <p class="max-solapa-text">max: 120 mm</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div
                class="row justify-content-center align-items-center mt-3 imagen-container-group tapa-dura-options d-none">

                <div class="col-auto mb-3">
                    <label for="papel-guardas" class="form-label" th:text="#{presupuesto.papel-guardas}">Papel de
                        guardas</label>
                    <select class="form-select select2 datos-cubierta tapa-cubierta-summary" id="papel-guardas">
                        <optgroup th:label="#{presupuesto.offset}">
                            <option value="1" data-papel-id="3" data-gramaje="170"
                                th:text="#{presupuesto.offset-blanco} + ' 170 gr'" selected>Offset blanco 170 gr
                            </option>
                            <option value="2" data-papel-id="4" data-gramaje="170"
                                th:text="#{presupuesto.offset-ahuesado} + ' 170 gr'">Offset ahuesado 170 gr</option>
                        </optgroup>
                        <optgroup th:label="#{presupuesto.estucado}">
                            <option value="3" data-papel-id="2" data-gramaje="170"
                                th:text="#{presupuesto.estucado-mate} + ' 170 gr'">Estucado mate 170 gr</option>
                        </optgroup>
                    </select>
                </div>
                <div class="col-auto mb-3">
                    <label for="guardas-impresas" class="form-label" th:text="#{presupuesto.guardas-impresas}">Guardas
                        impresas</label>
                    <select class="form-select select2 datos-cubierta tapa-cubierta-summary" id="guardas-impresas">
                        <option value="0" th:text="#{presupuesto.no}" selected>No</option>
                        <option value="4" th:text="#{presupuesto.una-cara}">Una cara</option>
                        <option value="8" th:text="#{presupuesto.dos-caras}">Dos caras</option>
                    </select>
                </div>
                <div class="col-auto mb-3">
                    <label for="cabezada" class="form-label" th:text="#{presupuesto.cabezada}">Cabezada</label>
                    <select class="form-select select2 datos-cubierta tapa-cubierta-summary" id="cabezada">
                        <option value="WHI" th:text="#{presupuesto.cabezada-blanca}" selected>Blanca</option>
                        <option value="GRE" th:text="#{presupuesto.cabezada-verde}">Verde</option>
                        <option value="BLUE" th:text="#{presupuesto.cabezada-azul}">Azul</option>
                        <option value="REDYEL" th:text="#{presupuesto.cabezada-roja-amarilla}">Roja-Amarilla</option>
                    </select>
                </div>
            </div>

        </div>
    </div>
    <!-- End Ribbon Shape -->

    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.papel-cubierta}">Papel cubierta</div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.papel-cubierta-descripcion}">
                Seleccione el papel para la cubierta</h5>
        </div>

        <div class="ribbon-content mt-4">

            <div id="div-papel-cubierta" class="row justify-content-center imagen-container-group">

            </div>
        </div>

    </div>
    <!-- End Ribbon Shape -->

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.gramaje-cubierta}">Gramaje cubierta
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.gramaje-cubierta-descripcion}">
                Gramaje del interior</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div id="div-gramaje-cubierta" class="hstack gap-2 justify-content-center flex-wrap">
                <input type="radio" class="btn-check" id="gramaje-cubierta-240" name="gramaje-cubierta"
                    data-gramaje="240">
                <label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-240">
                    240
                </label>

                <input type="radio" class="btn-check" id="gramaje-cubierta-250" name="gramaje-cubierta"
                    data-gramaje="250">
                <label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-250">
                    250
                </label>

                <input type="radio" class="btn-check" id="gramaje-cubierta-270" name="gramaje-cubierta"
                    data-gramaje="270">
                <label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-270">
                    270
                </label>

                <input type="radio" class="btn-check" id="gramaje-cubierta-300" name="gramaje-cubierta"
                    data-gramaje="300" checked>
                <label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-300">
                    <span class="invisible small">_</span>
                    300
                    <span class="text-warning small fw-bold">⭐</span>
                </label>

                <input type="radio" class="btn-check" id="gramaje-cubierta-350" name="gramaje-cubierta"
                    data-gramaje="350">
                <label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-350">
                    350
                </label>
            </div>

        </div>
    </div>
    <!-- End Ribbon Shape -->


    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.acabado}">Acabado
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.acabado-cubierta-descripcion}">
                Acabado de la cubierta</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div class="hstack gap-2 justify-content-center flex-wrap mx-4">
                <p th:text="#{presupuesto.acabado-cubierta-aviso}"></p>
            </div>

            <div id="div-acabado-cubierta" class="hstack gap-2 justify-content-center flex-wrap">

            </div>

        </div>
    </div>
    <!-- End Ribbon Shape -->

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.cubierta-extras}">Extras
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.cubierta-extras-descripcion}">
                Opciones adicionales para la cubierta</h5>
        </div>

        <div class="ribbon-content mt-4">

            <div class="row justify-content-center mt-4">
                <div class="col-auto">
                    <div class="d-flex flex-wrap align-items-center gap-4 ">

                        <button id="sobrecubierta" type="button" class="btn btn-opcion-presupuesto custom-toggle mb-4"
                            data-bs-toggle="button">
                            <span class="icon-on">
                                <i class="ri-close-line align-bottom me-1"></i>
                                <span th:text="#{presupuesto.sobrecubierta}"></span>
                            </span>
                            <span class="icon-off">
                                <i class="ri-add-line align-bottom me-1"></i>
                                <span th:text="#{presupuesto.sobrecubierta}"></span>
                            </span>
                        </button>

                        <div id="div-sobrecubierta" class="d-flex flex-wrap d-none align-items-start gap-3">
                            <div class="d-flex flex-column me-2">
                                <label for="papel-sobrecubierta" class="form-label"
                                    th:text="#{presupuesto.sobrecubierta-papel}">Papel</label>
                                <select class="form-select select2 datos-cubierta sobrecubierta-item w-auto" id="papel-sobrecubierta">
                                    <optgroup th:label="#{presupuesto.estucado}">
                                        <option selected value="2" data-papel-id="2" data-gramaje="170"
                                            th:text="#{presupuesto.estucado-mate} + ' 170 gr'">Estucado mate 170 gr
                                        </option>
                                    </optgroup>
                                    <optgroup th:label="#{presupuesto.verjurado}">
                                        <option value="1" data-papel-id="18" data-gramaje="160"
                                            th:text="#{presupuesto.verjurado-blanco-natural} + ' 160 gr'">Verjurado blanco natural 160 gr
                                            170 gr
                                        </option>
                                        <option value="2" data-papel-id="9" data-gramaje="160"
                                            th:text="#{presupuesto.verjurado-ahuesado} + ' 160 gr'">Verjurado ahuesado 160 gr
                                        </option>
                                    </optgroup>
                                    
                                </select>
                            </div>

                            <div class="d-flex flex-column me-2">
                                <label for="tamanio-solapas-sobrecubierta" class="form-label"
                                    th:text="#{presupuesto.sobrecubierta-solapas}">Tamaño solapas sobrecubierta</label>
                                <input type="number" class="form-control datos-cubierta sobrecubierta-item w-auto"
                                    id="tamanio-solapas-sobrecubierta" min="60" max="120" value="80" step="1">
                                <div class="form-text">
                                    <p class="mb-0">min: 60 mm</p>
                                    <p class="max-solapa-text">max: 120 mm</p>
                                </div>
                            </div>

                            <div class="d-flex flex-column me-2">
                                <label for="sobrecubierta-acabado" class="form-label"
                                    th:text="#{presupuesto.acabado}">Acabado</label>
                                <select class="form-select select2 datos-cubierta sobrecubierta-item w-auto" id="sobrecubierta-acabado">
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row justify-content-center mt-4">
                <div class="col-auto">
                    <div class="d-flex flex-wrap align-items-center gap-4 ">

                        <button id="faja" type="button" class="btn btn-opcion-presupuesto custom-toggle mb-4"
                            data-bs-toggle="button">
                            <span class="icon-on">
                                <i class="ri-close-line align-bottom me-1"></i>
                                <span th:text="#{presupuesto.faja}"></span>
                            </span>
                            <span class="icon-off">
                                <i class="ri-add-line align-bottom me-1"></i>
                                <span th:text="#{presupuesto.faja}"></span>
                            </span>
                        </button>

                        <div id="div-faja" class="d-flex flex-wrap d-none align-items-start gap-3">
                            <div class="d-flex flex-column me-2">
                                <label for="papel-faja" class="form-label"
                                    th:text="#{presupuesto.faja-papel}">Papel</label>
                                <select class="form-select select2 datos-cubierta faja-item w-auto" id="papel-faja">
                                    <optgroup th:label="#{presupuesto.estucado}">
                                        <option selected value="2" data-papel-id="2" data-gramaje="170"
                                            th:text="#{presupuesto.estucado-mate} + ' 170 gr'">Estucado mate 170 gr
                                        </option>
                                    </optgroup>
                                    <optgroup th:label="#{presupuesto.verjurado}">
                                        <option value="1" data-papel-id="18" data-gramaje="160"
                                            th:text="#{presupuesto.verjurado-blanco-natural} + ' 160 gr'">Verjurado blanco natural 160 gr
                                            170 gr
                                        </option>
                                        <option value="2" data-papel-id="9" data-gramaje="160"
                                            th:text="#{presupuesto.verjurado-ahuesado} + ' 160 gr'">Verjurado ahuesado 160 gr
                                        </option>
                                    </optgroup>
                                    
                                </select>
                            </div>

                            <div class="d-flex flex-column me-2">
                                <label for="alto-faja" class="form-label"
                                    th:text="#{presupuesto.faja-alto}">Alto faja</label>
                                <input type="number" class="form-control datos-cubierta faja-item w-auto"
                                    id="alto-faja" min="50" max="120" value="80" step="1">
                                <div class="form-text">
                                    <p class="mb-0">min: 50 mm</p>
                                    <p class="alto-faja-max">max: 120 mm</p>
                                </div>
                            </div>

                            <div class="d-flex flex-column me-2">
                                <label for="tamanio-solapas-faja" class="form-label"
                                    th:text="#{presupuesto.faja-solapas}">Tamaño solapas faja</label>
                                <input type="number" class="form-control datos-cubierta faja-item w-auto"
                                    id="tamanio-solapas-faja" min="60" max="120" value="80" step="1">
                                <div class="form-text">
                                    <p class="mb-0">min: 60 mm</p>
                                    <p class="max-solapa-text">max: 120 mm</p>
                                </div>
                            </div>

                            <div class="d-flex flex-column me-2">
                                <label for="faja-acabado" class="form-label"
                                    th:text="#{presupuesto.acabado}">Acabado</label>
                                <select class="form-select select2 datos-cubierta faja-item w-auto" id="faja-acabado">
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Ribbon Shape -->


    <div class="d-flex justify-content-between align-items-center mt-4 w-100">
        <button id="btn-prev-cubierta" type="button"
            class="btn btn-light d-flex align-items-center btn-change-tab-cubierta">
            <i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
            <span th:text="#{presupuesto.volver-interior}">Volver a interior</span>
        </button>
        <button id="btn-next-cubierta" type="button"
            class="btn btn-secondary d-flex align-items-center btn-change-tab-cubierta">
            <span th:text="#{presupuesto.continuar-seleccion-tirada}">Continuar a selección de tirada</span>
            <i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
        </button>
    </div>
</div>