<div class="accordion 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-3">
                                <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="<?= old('paginas', $presupuestoEntity->paginas) ?>">
                            </div><!--//.mb-3 -->

                        </div>

                        <div class="row">

                            <div class="mb-3">

                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="solapas" name="solapas" tabindex="6" value="1" <?= $presupuestoEntity->solapas == true ? 'checked' : ''; ?>>
                                    <label class="form-check-label" for="papelFormatoPersonalizado"><?= lang('Presupuestos.solapasCubierta') ?></label>
                                </div>
                                
                            </div><!--//.mb-3 -->

                        </div>

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

                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-3">
                            <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="<?= old('tirada', $presupuestoEntity->tirada) ?>">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->


                    <div class="col-md-12 col-lg-4 px-4">
                        <div class="mb-3">
                            <label id="label_papelFormatoId" for="papelFormatoId" class="form-label">
                                <?= lang('Presupuestos.papelFormatoId') ?>*
                            </label>

                            <select id="papelFormatoId" name="papel_formato_id" tabindex="3" class="form-control select2bs2" style="width: 100%;">

                                <?php if (isset($papelFormatoList) && is_array($papelFormatoList) && !empty($papelFormatoList)) :
                                    foreach ($papelFormatoList as $formato) : ?>
                                        <option value="<?= $formato->id ?>" <?= $formato->id == $presupuestoEntity->papel_formato_id ? ' selected' : '' ?>>
                                            <?= $formato->tamanio ?>
                                        </option>
                                <?php endforeach;
                                endif; ?>
                            </select>

                            <div class="row">
                                <div class="col-md-12 col-lg-6">
                                    <div class="mb-3">
                                        <input style="display: none" type="number" id="papelFormatoAncho" name="papel_formato_ancho" maxLength="8" step="0.01" class="form-control" value="<?= old('papel_formato_ancho', $presupuestoEntity->papel_formato_ancho) ?>">
                                    </div><!--//.mb-3 -->
                                </div><!--//.col -->

                                <div class="col-md-12 col-lg-6">
                                    <div class="mb-3">
                                        <input style="display: none" type="number" id="papelFormatoAlto" name="papel_formato_alto" maxLength="8" step="0.01" class="form-control" value="<?= old('papel_formato_alto', $presupuestoEntity->papel_formato_alto) ?>">
                                    </div><!--//.mb-3 -->
                                </div><!--//.col -->
                            </div>


                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="papelFormatoPersonalizado" name="papel_formato_personalizado" value="1" <?= $presupuestoEntity->papel_formato_personalizado == true ? 'checked' : ''; ?>>
                                <label class="form-check-label" for="papelFormatoPersonalizado"><?= lang('Presupuestos.papelFormatoPersonalizado') ?></label>
                            </div>

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


                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-3">
                            <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="<?= old('merma', $presupuestoEntity->merma) ?>">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-3">
                            <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="<?= old('merma_cubierta', $presupuestoEntity->merma_cubierta) ?>">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

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

                <div class="row">



                </div>

                <?php if($presupuestoEntity->solapas == true): ?>
                    <div class="row" id="div_solapas_ancho">
                <?php else: ?>
                    <div class="row" id="div_solapas_ancho" style="display:none;">
                <?php endif; ?>
                    <div class="col-md-12 col-lg-2 px-4">
                        <div class="mb-3">
                            <label for="solapas_ancho" class="form-label">
                                <?= lang('Presupuestos.solapasAnchoCubierta') ?>*
                            </label>
                            <input type="number" id="solapas_ancho" name="solapas_ancho" placeholder="6.00" maxLength="8" step="0.01" class="form-control" value="<?= old('solapas_ancho', $presupuestoEntity->solapas_ancho) ?>">
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

                </div>




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

                <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" <?= $presupuestoEntity->retractilado == true ? 'checked' : ''; ?>>
                                    <?= 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" <?= $presupuestoEntity->retractilado5 == true ? 'checked' : ''; ?>>
                                    <?= 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="fajaColor" class="form-check-label">
                                    <input type="checkbox" id="fajaColor" name="faja_color" value="1" class="form-check-input" <?= $presupuestoEntity->faja_color == true ? 'checked' : ''; ?>>
                                    <?= lang('Presupuestos.fajaColor') ?>
                                </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" <?= $presupuestoEntity->prototipo == true ? 'checked' : ''; ?>>
                                    <?= 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" <?= $presupuestoEntity->ferro == true ? 'checked' : ''; ?>>
                                    <?= 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" class="form-check-input" <?= $presupuestoEntity->ferro_digital == true ? 'checked' : ''; ?>>
                                    <?= 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" <?= $presupuestoEntity->marcapaginas == true ? 'checked' : ''; ?>>
                                    <?= lang('Presupuestos.marcapaginas') ?>
                                </label>
                            </div><!--//.form-check -->
                        </div><!--//.mb-3 -->
                    </div><!--//.col -->

                </div>

                <?php endif; ?>

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

<!------------------------------------------->
<!-- Código JS comportamiento general pag. -->
<!------------------------------------------->
<?= $this->section("additionalInlineJs") ?>

$('#paginas').on("change", function () {
    
    const url2 = window.location.href;
    const url_parts2 = url2.split('/');
    
    if(url_parts2[url_parts2.length-2] == 'edit'){

        checkPaginasPresupuesto()
        updateLineasPresupuesto()
        // Si es negro o color
        if ($('#tipoImpresion').select2('data')[0].id == 'negro' ||
            $('#tipoImpresion').select2('data')[0].id == 'color') {
            $('#compPaginasNegro').val(parseInt($('#paginas').val())-parseInt($('#compPaginasColor').val()));
            $('#compPaginasNegro').trigger('change')
        }
        // Si es negrohq o colorhq
        if ($('#tipoImpresion').select2('data')[0].id == 'negrohq' ||
            $('#tipoImpresion').select2('data')[0].id == 'colorhq') {
            $('#compPaginasNegrohq').val(parseInt($('#paginas').val())-parseInt($('#compPaginasColorhq').val()));
            $('#compPaginasNegrohq').trigger('change');
        }
        
        update_servicios(false)
    }
});

$('#tirada').on("change", function () {
    
    calcular_mermas()

    const url2 = window.location.href;
    const url_parts2 = url2.split('/');
    
    if(url_parts2[url_parts2.length-2] == 'edit'){
        update_servicios(false)
        updateLineasPresupuesto()
        checkInsertar()
    }
})

function calcular_mermas(){
    
    const tirada = parseInt($('#tirada').val())
    var merma = 0
    htmlString = ''

    if(tirada><?php echo $POD; ?>){
        merma = tirada*0.1<=30 ? tirada*0.1 : 30
    }
    else{
        merma_lineas = []
        tableLineasPresupuesto.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var rowData = this.data();
            if(rowData.row_id != 'lp_cubierta' && rowData.row_id != 'lp_sobrecubierta'){
                const formas_linea = <?php echo $isCosido; ?>==0?parseInt(rowData.formas):parseInt(rowData.formas)/2
                if(formas_linea > tirada)
                    merma_lineas.push(formas_linea-tirada)    
                else
                    merma_lineas.push(tirada%formas_linea)
            }
                
        })
        

        if(merma_lineas.length>0)
            merma = Math.max(...merma_lineas)
        else{
            htmlString = `
                <div class="alert alert-warning d-flex align-items-baseline" role="alert">
                    <span class="alert-icon alert-icon-lg text-primary me-2">
                        <i class="ti ti-bell ti-sm"></i>
                    </span>
                    <div class="d-flex flex-column ps-1">
                        <h5 class="alert-heading mb-2"><?= lang("Presupuestos.validation.no_lp_for_merma") ?></h5>
                    </div>
                </div>`;  
            

            merma = 0
    
        }
            
    }
    $('#mermacubierta').val(parseInt(merma))
    $('#merma').val(parseInt(merma))
    $('#alert-datosLibro').html(htmlString)
}


$('#papelFormatoId').select2({
    allowClear: false,
});

$('#papelFormatoPersonalizado').on("click",function(){
    var checkbox = document.getElementById('papelFormatoPersonalizado');
    if(checkbox.checked == true){
        document.getElementById("papelFormatoAncho").style.display = "block";
        document.getElementById("papelFormatoAlto").style.display = "block";
        $('#papelFormatoId').next(".select2-container").hide();
        $('#papelFormatoId').val('').change();
        document.getElementById("label_papelFormatoId").innerHTML =  
            "<?=lang('Presupuestos.papelFormatoId') ?> (" +
            "<?=lang('Presupuestos.papelFormatoAncho') ?> x <?=lang('Presupuestos.papelFormatoAncho') ?>)*";
    }
    else{
        document.getElementById("papelFormatoAncho").value= "";
        document.getElementById("papelFormatoAlto").value= "";
        document.getElementById("papelFormatoAncho").style.display = "none";
        document.getElementById("papelFormatoAlto").style.display = "none";
        $('#papelFormatoId').next(".select2-container").show();
        document.getElementById("label_papelFormatoId").innerHTML =
            "<?=lang('Presupuestos.papelFormatoId') ?>*";
    }
});

<?php if(str_contains($formAction,'edit')): ?>
    var ancho_libro = getDimensionLibro().ancho;
    var alto_libro = getDimensionLibro().alto;

    $('#retractilado').on("change", function () {
        checkRetractiladoComparador(this);
        servicioRetractilado()
    });


    $('#retractilado5').on("change", function () {
        checkRetractiladoComparador(this);
        servicioRetractilado5()
    });

    $('#fajaColor').on("change", function () {
        servicioFajaColor()
    });

    $('#ferro').on("change", function () {
        servicioFerro()
    });

    $('#prototipo').on("change", function () {
        servicioPrototipo()
        servicioFerro()
    });
    

$('#papelFormatoId').on('select2:select', function (e){
    ancho_libro = getDimensionLibro().ancho;
    alto_libro = getDimensionLibro().alto;
    update_servicios(false)
})

<?php endif; ?>

$('#papelFormatoAncho').on('change', function (e){
    ancho_libro = getDimensionLibro().ancho;
    alto_libro = getDimensionLibro().alto;
})

$('#papelFormatoAlto').on('change', function (e){
    ancho_libro = getDimensionLibro().ancho;
    alto_libro = getDimensionLibro().alto;
})

$("#solapas").on("click", function () {
    var e = document.getElementById('div_solapas_ancho');
    if (document.getElementById('solapas').checked) {
        e.style.display = "flex";
    }
    else {
        e.style.display = "none";
    }
    
    $('#serv_default').click()
});
<?= $this->endSection() ?>
