<div class="col-12 d-flex flex-column align-items-center">

    <h3 class="mb-1 fw-bold">Resumen del presupuesto</h3>
    <div class="line mb-4"></div>

    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
        <h5 class="mb-1 "> Precio unidad: <span id="resumenPrecioU"></span> €</h5>
        <h4 class="mb-1 "> Total base: <span id="resumenTotalBase"></span> €</h4>
        <h4 class="mb-1 "> Envío: <span id="resumenTotalEnvio"></span> €</h4>
        <h4 class="mb-1 "> Total antes de I.V.A: <span id="resumenTotalAntesIVA"></span> €</h4>
        <h4 class="mb-1 "> Iva (<span id="resumenIvaPorcentaje"></span>%): <span id="resumenIva"></span> €</h4>
        <h3 class="mt-3 mb-1 fw-bold"> Total: <span id="resumenTotal"></span> €</h3>
    </div><!--//.mb-3 -->

    <div id="divFormaCubierta" class="col-sm-12 mb-3 d-flex flex-column align-items-center">
        <div class="row justify-content-center col-sm-12">
            <div id="btnPreviewCubierta" class="btn col-sm-4 btn-primary waves-effect waves-light ml-2">
                <span class="align-middle d-sm-inline-block d-none me-sm-1"></i>Mostrar desarrollo cubierta</span>

            </div>
        </div>
        <div class="col-md-12 mb-3">
            <div class="d-flex align-items-stretch justify-content-end gap-2 d-none">
                <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
            </div>
                <div id="pv_ec_shape" class="d-none draw-shapes"></div>
        </div>
    </div>

    <div class="table-responsive col-10 mb-3">
        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th colspan="2">Datos generales</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-item-resumen-table">Titulo</td>
                    <td id="resumenTitulo">Albert Cook</td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Tipo libro</td>
                    <td id="resumenTipoLibro"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Formato</td>
                    <td id="resumenFormato"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Páginas negro</td>
                    <td id="resumenPaginasNegro"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Páginas color</td>
                    <td id="resumenPaginasColor"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Páginas en total</td>
                    <td id="resumenPaginas"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Tirada</td>
                    <td id="resumenTirada"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Prototipo</td>
                    <td id="resumenPrototipo"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive col-10 mb-3">
        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th colspan="2">Interior</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-item-resumen-table">Impresion</td>
                    <td id="resumenImpresion"></td>
                </tr>
                <tr class="mismoInterior">
                    <td class="col-item-resumen-table">Papel</td>
                    <td id="resumenPapelInterior"></td>
                </tr>
                <tr class="mismoInterior">
                    <td class="col-item-resumen-table">Gramaje</td>
                    <td id="resumenGramajeInterior"></td>
                </tr>
                <tr class="diferenteInterior d-none">
                    <td class="col-item-resumen-table">Papel B&N</td>
                    <td id="resumenPapelInteriorNegro"></td>
                </tr>
                <tr class="diferenteInterior d-none">
                    <td class="col-item-resumen-table">Gramaje B&N</td>
                    <td id="resumenGramajeInteriorNegro"></td>
                </tr>
                <tr class="diferenteInterior d-none">
                    <td class="col-item-resumen-table">Papel Color</td>
                    <td id="resumenPapelInteriorColor"></td>
                </tr>
                <tr class="diferenteInterior d-none">
                    <td class="col-item-resumen-table">Gramaje Color</td>
                    <td id="resumenGramajeInteriorColor"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="table-responsive col-10 mb-3">
        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th colspan="2">Cubierta</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-item-resumen-table">Tipo</td>
                    <td id="resumenCubiertaTipo"></td>
                </tr>
                <tr class="cubierta-tapa-blanda d-none">
                    <td class="col-item-resumen-table">Caras impresas</td>
                    <td id="resumenCarasCubierta"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Lomo cubierta</td>
                    <td id="resumenLomoCubierta"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Papel</td>
                    <td id="resumenPapelCubierta"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Gramaje</td>
                    <td id="resumenGramajeCubierta"></td>
                </tr>
                <tr class="cubierta-tapa-blanda d-none">
                    <td class="col-item-resumen-table">Solapas</td>
                    <td id="resumenSolapasCubierta"></td>
                </tr>
                <tr class="cubierta-tapa-dura d-none">
                    <td class="col-item-resumen-table">Papel de guardas</td>
                    <td id="resumenPapelGuardas"></td>
                </tr>
                <tr class="cubierta-tapa-dura d-none">
                    <td class="col-item-resumen-table">Guardas impresas</td>
                    <td id="resumenGuardasImpresas"></td>
                </tr>
                <tr class="cubierta-tapa-dura d-none">
                    <td class="col-item-resumen-table">Cabezada</td>
                    <td id="resumenCabezada"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Acabados</td>
                    <td id="resumenCubiertaAcabados"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="divResumenSobrecubierta" class="table-responsive col-10 mb-3 d-none">
        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th colspan="2">Sobrecubierta</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-item-resumen-table">Papel</td>
                    <td id="resumenPapelSobrecubierta">Estucado Mate</td>
                </tr>
                <tr class="d-none">
                    <td class="col-item-resumen-table">Gramaje</td>
                    <td id="resumenGramajeSobrecubierta"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Tamaño solapas</td>
                    <td id="resumenSolapaSobrecubierta"></td>
                </tr>
                <tr>
                    <td class="col-item-resumen-table">Plastificado</td>
                    <td id="resumenPlastificadoSobreCubierta"></td>
                </tr>
            </tbody>
        </table>
    </div>


    <?php if ($state == 2): ?>
        <div class="col-12 mb-3">
            <h3>Ficheros</h3>
            <div class="col-12">
                <div class="dropzone needsclick" id="dropzone-multi">
                    <div class="dz-message needsclick">
                        Arrastre aquí los ficheros o haga click
                    </div>
                    <div class="fallback">
                        <input name="file" type="file" />
                    </div>
                </div>
            </div>
            <button id="btnUploadFile" class="btn mt-3 btn-primary btn-submit waves-effect waves-light ml-2 ">
                <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('App.global_upload_files') ?></span>
                <i class="ti ti-upload ti-xs"></i>
            </button>
            <button id="submit-all-files" class="btn mt-3 btn-success btn-submit waves-effect waves-light ml-2">
                <span class="align-middle d-sm-inline-block d-none me-sm-1"><?= lang('App.global_save_file') ?></span>
                <i class="ti ti-device-floppy ti-xs"></i>
            </button>
        </div>
    <?php endif; ?>

</div>