<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">
        <h3 class="mb-1 fw-bold"> Datos del libro </h3>
    </div>

    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
        <label for="titulo" class="form-label">
            <?= lang('Presupuestos.titulo') ?>*
        </label>
        <input type="text" id="titulo" placeholder="Introduzca el título de la publicación" name="titulo"
            maxLength="300" class="form-control text-center" value="">
    </div>

    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
        <label for="autor" class="form-label">
            <?= lang('Presupuestos.autor') ?>
        </label>
        <input type="text" id="autor" placeholder="Autor" name="autor" maxLength="150" class="form-control text-center"
            value="">
    </div>

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

        <div class="col-sm-4 mb-3">
            <label for="isbn" class="form-label">
                <?= lang('Presupuestos.isbn') ?>
            </label>
            <input type="text" id="isbn" name="isbn" placeholder="ISBN" maxLength="50" class="form-control" value="">
        </div>

        <div class="col-sm-4 mb-3">
            <label for="coleccion" class="form-label">
                <?= lang('Presupuestos.coleccion') ?>
            </label>
            <input type="text" id="coleccion" name="coleccion" placeholder="Coleccion" maxLength="255"
                class="form-control" value="">
        </div>

        <div class="col-sm-4 mb-3">
            <label for="referenciaCliente" class="form-label">
                <?= lang('Presupuestos.referenciaCliente') ?>
            </label>
            <input type="text" id="referenciaCliente" name="referencia_cliente" placeholder="Referencia cliente"
                maxLength="100" class="form-control" value="">
        </div>


    </div>


    <div
        class="col-sm-5 mb-3 d-flex flex-column align-items-center <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " d-none" : "" ?>">
        <label <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " hidden" : "" ?> id="label_clienteId" for="clienteId" class="form-label">
            Cliente*
        </label>
        <select <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " hidden" : "" ?> id="clienteId" name="cliente_id" class="form-control select2bs2 calcular-presupuesto calcular-solapas"
            style="width: 100%;">
            <?php if (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')): ?>
                <option value="<?= $clienteId ?>" selected>cliente</option>
            <?php endif; ?>
        </select>
    </div>


    <div id="divExcluirRotativa"
        class="col-sm-5 mb-3 d-flex flex-column align-items-center <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " d-none" : "" ?>">
        <div class="form-check form-switch mb-2">
            <input <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " hidden" : "" ?> class=" calcular-solapas calcular-presupuesto form-check-input" type="checkbox" id="excluirRotativa"
                name="excluir_rotativa" value="1">
            <label <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')) ? " hidden" : "" ?> class="form-check-label" for="excluirRotativa">Excluir rotativa</label>
        </div>
    </div>


    <div class="row col-sm-10 mb-3 justify-content-center">
        <div class="col-sm-2 d-flex flex-column align-items-center mx-1 div-num-input">
            <label for="tirada" class="form-label">
                <?= lang('Presupuestos.tirada') ?> 1*
            </label>
            <input type="number" class="calcular-presupuesto calcular-solapas form-control text-center num-input" id="tirada"
                name="tirada" step="1" value="50">
        </div>

        <div class="col-sm-2 d-flex flex-column align-items-center mx-1  div-num-input">
            <label for="tirada2" class="form-label">
                <?= lang('Presupuestos.tirada') ?> 2
            </label>
            <input type="number" class="calcular-presupuesto calcular-solapas form-control text-center num-input" id="tirada2"
                name="tirada2" step="1" value="">
        </div>

        <div class="col-sm-2 d-flex flex-column align-items-center mx-1 div-num-input">
            <label for="tirada3" class="form-label">
                <?= lang('Presupuestos.tirada') ?> 3
            </label>
            <input type="number" class="calcular-presupuesto calcular-solapas form-control text-center num-input" id="tirada3"
                name="tirada3" step="1" value="">
        </div>

        <div class="col-sm-2 d-flex flex-column align-items-center mx-1 div-num-input">
            <label for="tirada4" class="form-label">
                <?= lang('Presupuestos.tirada') ?> 4
            </label>
            <input type="number" class="calcular-presupuesto calcular-solapas form-control text-center num-input" id="tirada4"
                name="tirada4" step="1" value="">
        </div>
    </div> <!--//.row -->

    <div class="col-sm-10 d-flex flex-column align-items-center justify-content-center">

        <div id="formatoEstandar" class="col-sm-4 mb-1 d-flex flex-column align-items-center">
            <label id="label_papelFormatoId" for="papelFormatoId" class="form-label">
                Formato Libro*
            </label>
            <select id="papelFormatoId" name="papel_formato_id" class="form-control select2bs2 calcular-presupuesto calcular-solapas"
                style="width: 100%;">
            </select>
        </div>

        <div id="formatoPersonalizado" class="row col-sm-8 justify-content-center d-none">

            <div class="col-sm-3 mb-1 mx-1 div-num-input">
                <label class="form-label" for="papelFormatoAncho">Ancho Libro*</label>
                <input type="number" id="papelFormatoAncho" name="papel_formato_ancho" step="1"
                    class="form-control formato_libro calcular-presupuesto calcular-solapas num-input" min="110" value="110">
            </div>

            <div class="col-sm-3 mb-1 mx-1 div-num-input">
                <label class="form-label" for="papelFormatoAlto">Alto Libro*</label>
                <input type="number" id="papelFormatoAlto" name="papel_formato_alto" step="1"
                    class="form-control formato_libro calcular-presupuesto  calcular-solapas num-input" min="170" value="170">
            </div>

        </div>

        <div class="row col-sm-4 mb-3 d-flex flex-column align-items-center">
            <div class="form-check form-switch mb-2">
                <input class="calcular-presupuesto calcular-solapas 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 class="row col-sm-9 mb-5 justify-content-center">

        <div class="row justify-content-center">
            <div class="col-sm-3">
                <label for="paginasColor" class="form-label">
                    <?= lang('Presupuestos.paginasColor') ?>
                </label>
                <input type="number" class="form-control calcular-presupuesto calcular-solapas input-paginas num-input" id="paginasColor"
                    name="paginasColor" step="1" value="0">

                <div class="form-text">
                    Siempre deben ser pares
                </div>

            </div>

            <div class="col-sm-3">
                <label for="paginasNegro" class="form-label">
                    <?= lang('Presupuestos.paginasNegro') ?>
                </label>
                <input type="number" class="form-control calcular-presupuesto calcular-solapas input-paginas num-input" id="paginasNegro"
                    name="paginasNegro" step="1" value="32">

                <div class="form-text">
                    Siempre deben ser pares
                </div>

            </div>

            <div class="col-sm-3">
                <label for="paginas" class="form-label">
                    <?= lang('Presupuestos.totalPaginas') ?>
                </label>
                <input disabled class="form-control calcular-lomo" id="paginas" name="paginas" step="1"
                    value="32">
            </div>
        </div>

        <div id='divPaginasCuadernillo' class="row col-sm-9 justify-content-left d-none">

            <div class="col-sm-4 mb-5">
                <label for="paginas_por_cuadernillo" class="form-label">
                    <?= lang('Presupuestos.paginasCuadernillo') ?>
                </label>
                <select id="paginasCuadernillo" name="paginas_por_cuadernillo"
                    class="calcular-presupuesto form-control select2bs2" style="width: 100%;">
                    <option value="32" selected>32</option>
                    <option value="28">28</option>
                    <option value="24">24</option>
                    <option value="20">20</option>
                    <option value="16">16</option>
                </select>
            </div>
        </div>

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

            <div id="divPaginasColorConsecutivas" class="form-check col-sm-9 form-switch mb-2 d-none">
                <input class="form-check-input" type="checkbox" id="pagColorConsecutivas" name="pag_color_consecutivas"
                    value="1">
                <label class="form-check-label"
                    for="pagColorConsecutivas"><?= lang('Presupuestos.paginasColorConsecutivas') ?></label>
            </div>

            <div id="divPosPaginasColor" class="col-sm-9 d-none">
                <label for="posPaginasColor" class="form-label">
                    <?= lang('Presupuestos.posicionPagColor') ?>
                </label>
                <input class="form-control" id="posPaginasColor" name="pos_paginas_color" value="">
                <div class="form-text">
                    Intruzca la posición separada por comas. Ej: 3,5,7 ó 4-10,20,155
                </div>
            </div>

        </div>

        <div class="row mt-2 justify-content-center">
            <div id="divPapelDiferente" class="form-check col-sm-9 form-switch mb-2 d-none">
                <input class="form-check-input" type="checkbox" id="papelDiferente" name="papel_diferente" value="1">
                <label class="form-check-label" for="papelDiferente"><?= lang('Presupuestos.papelDiferente') ?></label>
            </div>
        </div>
    </div>



    <div id="divTipoLibro" name="div_tipo_libro" class="row col-sm-10 mb-3 justify-content-center">

        <div id="fresado" class="tipo-libro calcular-solapas calcular-presupuesto imagen-selector image-container">
            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/fresado.png") ?>"
                alt="Fresado">
            <div class="form-text text-center">
                Fresado (a partir de 32 páginas)
            </div>
        </div>
        <div id="grapado" class="tipo-libro calcular-solapas calcular-presupuesto imagen-selector image-container">
            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/grapado.png") ?>"
                alt="Grapado">
            <div class="form-text text-center">
                Grapado (entre 12 y 40 páginas)
            </div>
        </div>
        <div id="espiral" class="tipo-libro calcular-solapas calcular-presupuesto imagen-selector image-container">
            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/espiral.png") ?>"
                alt="Espiral">
            <div class="form-text text-center">
                Espiral
            </div>
        </div>
        <div id="cosido" class="tipo-libro calcular-solapas calcular-presupuesto imagen-selector image-container">
            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/cosido.png") ?>"
                alt="Cosido">
            <div class="form-text text-center">
                Cosido (a partir de 32 páginas)
            </div>
        </div>
    </div>

    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
        <h3 class="mb-1 fw-bold"> Servicios extra </h3>
    </div>

    <div class="row col-sm-8 mb-3 d-flex flex-column align-items-left">
        <div class="row align-items-center" >
            <div class="col-sm-3 form-check form-switch mb-2 d-flex align-items-center gap-2">
                <input class="calcular-presupuesto form-check-input" type="checkbox" id="retractilado"
                    name="retractilado" value="1">
                <label class="form-check-label" for="ferro">Retractilado</label>
            </div>
            <div class="col-sm-3 form-check form-switch mb-2 d-flex align-items-center gap-2">
                <input class="calcular-presupuesto form-check-input" type="checkbox" id="retractilado5"
                    name="retractilado5" value="1">
                <label class="form-check-label" for="ferro">Retractilado de 5</label>
            </div>

            <?php foreach ($serviciosExtra as $servicio): ?>
                <div class="col-sm-3 form-check form-switch mb-2 d-flex align-items-center gap-2">
                    <?= $servicio ?>
                </div>
            <?php endforeach; ?>

            <div class="col-sm-3 form-check form-switch mb-2 d-flex align-items-center gap-2">
                <input class="calcular-presupuesto form-check-input" type="checkbox" id="marcapaginas"
                    name="marcapaginas" value="1">
                <label class="form-check-label" for="ferro">Marcapáginas</label>
            </div>

        </div>
    </div>


    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
        <h3 class="mb-1 fw-bold"> Otros </h3>
    </div>

    <div class="row col-sm-10 mb-3">

        <div class="col-sm-2 mb-md-0 mb-2">
            <label for="ivaReducido" class="form-label">I.V.A. reducido</label>
            <select id="ivaReducido" name="ivaReducido" class="form-control select2bs2 calcular-presupuesto"
                style="width: 100%;">
                <option value="1" selected>
                    <p><?= lang('SI') ?></p>
                </option>
                <option value="0">
                    <p><?= lang('NO') ?></p>
                </option>
            </select>
        </div>

        <p class="mt-2">Se verificará que el pedido cumpla con los requisitos establecidos en el Artículo 91 de la Ley
            37/1992, sobre inserción de publicidad, antes de proceder con su producción, lo que garantiza la aplicación
            del IVA reducido del 4%.</p>
    </div>

</div>