<div id="content-datos-generales" class="animate-fadeInUpBounce">
    <!-- 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.informacion-libro}">Información del
                libro</div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.datos-generales-descripcion}"></h5>
        </div>

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

            <div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show material-shadow d-none"
                role="alert" id="datos-generales-alert">
                <i class="ri-error-warning-line label-icon"></i>
                <strong th:text="#{presupuesto.errores-title}">Corrija los siguientes errores:</strong>
                <ul class="mb-0" id="datos-generales-alert-list">
                </ul>
            </div>

            <div class="px-2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="mb-3">
                            <label for="titulo" class="form-label" th:text="#{presupuesto.titulo}">
                                >Título*</label>
                            <input type="text" class="form-control datos-generales-data" id="titulo" placeholder=""
                                th:value="${presupuesto?.titulo} ?: ''">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="autor" class="form-label" th:text="#{presupuesto.autor}">Autor</label>
                            <input type="text" class="form-control datos-generales-data" id="autor" th:value="${presupuesto?.autor} ?: ''">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <label for="isbn" class="form-label" th:text="#{presupuesto.isbn}">ISBN</label>
                            <input type="text" class="form-control datos-generales-data" id="isbn" th:value="${presupuesto?.isbn} ?: ''" >
                        </div>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-3 mb-1">
                            <label for="tirada1" class="form-label" th:text="#{presupuesto.tirada1}">Tirada 1*</label>
                            <input type="number" class="form-control datos-generales-data" id="tirada1" placeholder=""
                                value="10">
                        </div>
                        <div class="col-sm-3 mb-1">
                            <label for="tirada2" class="form-label" th:text="#{presupuesto.tirada2}">Tirada 2</label>
                            <input type="number" class="form-control datos-generales-data" id="tirada2" placeholder=""
                                value="">
                        </div>
                        <div class="col-sm-3 mb-1">
                            <label for="tirada3" class="form-label" th:text="#{presupuesto.tirada3}">Tirada 3</label>
                            <input type="number" class="form-control datos-generales-data" id="tirada3" placeholder=""
                                value="">
                        </div>
                        <div class="col-sm-3 mb-1">
                            <label for="tirada4" class="form-label" th:text="#{presupuesto.tirada4}">Tirada 4</label>
                            <input type="number" class="form-control datos-generales-data" id="tirada4" placeholder=""
                                value="">
                        </div>
                    </div>
                    <p class="text-muted" th:text="#{presupuesto.tiradasPODnoPOD(${pod})}">
                        No puede mezclar tiradas menores de 30 unidades con mayores de 30
                        unidades</p>
                </div>

                <div class="row justify-content-center">
                    <div class="col-sm-8">

                        <div class="row justify-content-center">
                            <div class="col-sm-4 mb-3 div-formato">
                                <label for="formato" class="form-label" th:text="#{presupuesto.formato}">Formato</label>
                                <select class="form-select select2 datos-generales-data" id="formato">
                                    <optgroup th:label="#{presupuesto.orientacion.vertical}">
                                        <option data-ancho="148" data-alto="210" value="148x210">148x210 (A5)</option>
                                        <option data-ancho="120" data-alto="170" value="120x170">120x170</option>
                                        <option data-ancho="210" data-alto="297" value="210x297">210x297 (A4)</option>
                                    </optgroup>
                                    <optgroup th:label="#{presupuesto.orientacion.cuadrado}">
                                        <option data-ancho="210" data-alto="210" value="210x210">210x210</option>
                                        <option data-ancho="230" data-alto="230" value="230x230">230x230</option>
                                    </optgroup>
                                    <optgroup th:label="#{presupuesto.orientacion.apaisado}">
                                        <option data-ancho="210" data-alto="148" value="210x148">210x148 (A5)</option>
                                        <option data-ancho="240" data-alto="170" value="240x170">240x170</option>
                                        <option data-ancho="297" data-alto="210" value="297x210">297x210 (A4)</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>

                        <div class="row justify-content-center div-formato-personalizado d-none">
                            <div class="col-3 col-sm-3 mb-1">
                                <label for="ancho" class="form-label" th:text="#{presupuesto.ancho}">Ancho (mm)</label>
                                <input type="number" class="form-control datos-generales-data" id="ancho" name="ancho"
                                    value="210" th:attr="min=${ancho_alto_min}, max=${ancho_alto_max}">
                            </div>
                            <div class="col-3 col-sm-3 mb-1">
                                <label for="alto" class="form-label" th:text="#{presupuesto.alto}">Alto (mm)</label>
                                <input type="number" class="form-control datos-generales-data" id="alto" name="alto"
                                    value="297" th:attr="min=${ancho_alto_min}, max=${ancho_alto_max}">
                            </div>
                        </div>

                        <div class="row justify-content-center mb-3">
                            <div class="col-sm-4 d-flex justify-content-center">
                                <div class="form-check form-switch form-switch-custom form-switch-presupuesto mb-3">
                                    <input type="checkbox"
                                        class="form-check-input form-switch-custom-primary datos-generales-data"
                                        id="formato-personalizado" name="formato-personalizado">
                                    <label for="formato-personalizado" class="form-label"
                                        th:text="#{presupuesto.formato-personalizado}">
                                        Formato Personalizado
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row justify-content-center mb-2">
                    <div class="col-sm-2">
                        <label for="paginas-negro" class="form-label" th:text="#{presupuesto.paginas-negro}">Páginas
                            Negro</label>
                        <input type="number" step="2" class="form-control paginas datos-generales-data"
                            id="paginas-negro" name="paginas-negro" value="0">
                        <div class="form-text" th:text="#{presupuesto.siempre-pares}">
                            Siempre deben ser pares</div>
                    </div>

                    <div class="col-auto d-flex align-items-center justify-content-center">
                        <i class="mdi mdi-plus-box fs-2"></i>
                    </div>

                    <div class="col-sm-2">
                        <label for="paginas-color" class="form-label" th:text="#{presupuesto.paginas-color}">Páginas
                            Color</label>
                        <input type="number" step="2" class="form-control paginas datos-generales-data"
                            id="paginas-color" name="paginas-color" value="32">
                        <div class="form-text" th:text="#{presupuesto.siempre-pares}">
                            Siempre deben ser pares</div>
                    </div>

                    <div class="col-auto d-flex align-items-center justify-content-center">
                        <i class="mdi mdi-equal-box fs-2"></i>
                    </div>

                    <div class="col-sm-2">
                        <label for="paginas" class="form-label" th:text="#{presupuesto.paginas-total}">Total
                            Páginas</label>
                        <input disabled class="form-control" id="paginas" name="paginas" value="32">
                    </div>
                </div>

                <div id="div-posicion-paginas-color" class="row justify-content-center">
                    <div class="col-sm-6">
                        <label for="posicionPaginasColor" class="form-label" th:text="#{presupuesto.paginas-posicion}">
                            Posición páginas color
                        </label>
                        <input class="form-control datos-generales-data" id="posicionPaginasColor" value="">
                        <div class="form-text">
                            <p th:text="#{presupuesto.paginas-posicion-descripcion}">
                                Intruzca la posición separada por comas. Ej: 3,5,7 ó 4-10,20,155
                            </p>
                        </div>
                    </div>
                </div>

            </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.encuadernacion}">Encuadernación</div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.encuadernacion-descripcion}">
                Seleccione la encuadernación del libro</h5>
        </div>

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

            <div class="px-2">
                <div class="d-flex flex-wrap justify-content-center gap-3 imagen-container-group">

                    <!-- Opción: Fresado -->
                    <div class="tipo-libro image-container imagen-selector selected datos-generales-data"
                        th:attr="data-summary-text=#{presupuesto.fresado}" id="fresado">
                        <input type="radio" name="tipoEncuadernacion" value="fresado" hidden>
                        <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/fresado.png"
                            alt="Fresado" />
                        <div class="form-text text-center" th:text="#{presupuesto.fresado-descripcion}">
                            Fresado (a partir de 32 páginas)</div>
                    </div>


                    <!-- Opción: Cosido -->
                    <div class="tipo-libro image-container imagen-selector datos-generales-data" 
                    th:attr="data-summary-text=#{presupuesto.cosido}" id="cosido">
                        <input type="radio" name="tipoEncuadernacion" value="cosido" hidden>
                        <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/cosido.png"
                            alt="Cosido" />
                        <div class="form-text text-center" th:text="#{presupuesto.cosido-descripcion}">
                            Cosido (a partir de 32 páginas)</div>
                    </div>


                    <!-- Opción: Grapado -->
                    <div class="tipo-libro image-container imagen-selector datos-generales-data" 
                    th:attr="data-summary-text=#{presupuesto.grapado}" id="grapado">
                        <input type="radio" name="tipoEncuadernacion" value="grapado" hidden>
                        <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/grapado.png"
                            alt="Grapado" />
                        <div class="form-text text-center" th:text="#{presupuesto.grapado-descripcion}">
                            Grapado (entre 12 y 40 páginas)</div>
                    </div>

                    <!-- Opción: Espiral -->
                    <div class="tipo-libro image-container imagen-selector datos-generales-data" 
                    th:attr="data-summary-text=#{presupuesto.espiral}" id="espiral">
                        <input type="radio" name="tipoEncuadernacion" value="espiral" hidden>
                        <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/espiral.png"
                            alt="Espiral" />
                        <div class="form-text text-center" th:text="#{presupuesto.espiral-descripcion}">
                            Espiral (a partir de 20 páginas)</div>
                    </div>

                    <!-- Opción: Wire-O -->
                    <div class="tipo-libro image-container imagen-selector datos-generales-data" 
                    th:attr="data-summary-text=#{presupuesto.wire-o}" id="wireo">
                        <input type="radio" name="tipoEncuadernacion" value="wireo" hidden>
                        <img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/wire-o.png"
                            alt="Wire-O" />
                        <div class="form-text text-center" th:text="#{presupuesto.wire-o-descripcion}">
                            Wire-O (a partir de 20 páginas)</div>
                    </div>

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

    <div class="d-flex align-items-center justify-content-center gap-3 mt-3">
        <button type="button" id="next-datos-generales" class="btn btn-secondary d-flex align-items-center ms-auto">
            <span th:text="#{presupuesto.continuar-interior}">Continuar a diseño interior</span>
            <i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
        </button>
    </div>
</div>