<div class="accordion accordion-bordered mt-3" id="accordionDatosServicios">
    <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="#accordionDatosServiciosTip" aria-expanded="false"
                    aria-controls="accordionDatosServiciosTip">
                <h4><?= lang("Presupuestos.datosServicios") ?></h4>
            </button>
        </h2>

        <div id="accordionDatosServiciosTip" class="accordion-collapse collapse show"
             data-bs-parent="#accordionDatosServicios">
            <div class="accordion-body">
                <div class="row">
                    <?php /* ?>
                    <div class="col-md-12 col-lg-4 py-4">
                        <button id="serv_default" type="button" class="btn btn-secondary waves-effect waves-light float-start"><?= lang("Presupuestos.serviciosDefault")?></button>
                    </div>
                    <?php */ ?>
                </div>
                <div class="nav-align-top mb-4">
                    <ul class="nav nav-pills mb-3 nav-servicios" role="tablist">
                        <li class="nav-item">
                            <button
                                    type="button"
                                    class="nav-link active"
                                    role="tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#servicios-acabado"
                                    aria-controls="servicios-acabado"
                                    aria-selected="true">
                                <?= lang("Presupuestos.servicioAcabado") ?>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                    type="button"
                                    class="nav-link"
                                    role="tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#servicios-preimpresion"
                                    aria-controls="servicios-preimpresion"
                                    aria-selected="false">
                                <?= lang("Presupuestos.servicioPreimpresion") ?>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                    type="button"
                                    class="nav-link"
                                    role="tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#servicios-encuadernacion"
                                    aria-controls="servicios-encuadernacion"
                                    aria-selected="false">
                                <?= lang("Presupuestos.servicioEncuadernado") ?>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                    type="button"
                                    class="nav-link"
                                    role="tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#servicios-manipulado"
                                    aria-controls="servicios-manipulado"
                                    aria-selected="false">
                                <?= lang("Presupuestos.servicioManipulado") ?>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button
                                    type="button"
                                    class="nav-link"
                                    role="tab"
                                    data-bs-toggle="tab"
                                    data-bs-target="#servicios-extra"
                                    aria-controls="servicios-extra"
                                    aria-selected="false">
                                <?= lang("Presupuestos.servicioExtra") ?>
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content border border-container">
                        <div class="tab-pane fade show active" id="servicios-acabado" role="tabpanel">
                            <div id="serv-acabado-alert">
                            </div>
                            <div id="serv-acabado-error">
                            </div>
                            <table id="tableOfServiciosAcabado" class="table table-striped table-hover tiradas-alternativas update-resumen-presupuesto" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th><?= lang('Presupuestos.id') ?></th>
                                    <th><?= lang('Tarifaacabado.tarifaacabado') ?></th>
                                    <th><?= lang('Proveedores.proveedor') ?></th>
                                    <th><?= lang('Presupuestos.precioUnidad') ?></th>
                                    <th><?= lang('Presupuestos.precioTotal') ?></th>
                                    <th><?= lang('Tarifaacabado.margen') ?></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div class="row mb-3 px-4">
                                <div class="col-md-12 col-lg-4 py-4">
                                    <select id="add_servicio_acabado_list" class="select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-4 px-2 py-4">
                                    <button id="insertar_serv_acabado" type="button" class="btn btn-secondary waves-effect waves-light float-start tiradas-alternativas"><?= lang("Presupuestos.insertar")?></button>
                                </div>

                            </div>
                        </div>


                        <div class="tab-pane fade" id="servicios-preimpresion" role="tabpanel">
                            <div id="serv-preimpresion-alert">
                            </div>
                            <div id="serv-preimpresion-error">
                            </div>
                            <table id="tableOfServiciosPreimpresion" class="table table-striped table-hover tiradas-alternativas update-resumen-presupuesto" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th><?= lang('Presupuestos.id') ?></th>
                                    <th><?= lang('Tarifapreimpresion.tarifapreimpresion') ?></th>
                                    <th><?= lang('Tarifapreimpresion.coste') ?></th>
                                    <th><?= lang('Presupuestos.precio') ?></th>
                                    <th><?= lang('Tarifaacabado.margen') ?></th>
                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div class="row mb-3 px-4">
                                <div class="col-md-12 col-lg-4 py-4">
                                    <select id="add_servicio_preimpresion_list" class="select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-4 px-2 py-4">
                                    <button id="insertar_serv_preimpresion" type="button" class="btn btn-secondary waves-effect waves-light float-start tiradas-alternativas"><?= lang("Presupuestos.insertar")?></button>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="servicios-encuadernacion" role="tabpanel">
                            <div id="serv-enc-alert">
                            </div>
                            <div id="serv-enc-error">
                            </div>

                            <table id="tableOfServiciosEncuadernacion" class="table dt-responsive dataTable tiradas-alternativas update-resumen-presupuesto" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th><?= lang('Presupuestos.id') ?></th>
                                    <th><?= lang('Presupuestos.tarifa') ?></th>
                                    <th><?= lang('Proveedores.proveedor') ?></th>
                                    <th><?= lang('Presupuestos.paginasCuadernillo') ?></th>
                                    <th><?= lang('Presupuestos.tiempo') ?></th>
                                    <th><?= lang('Presupuestos.precioUnidad') ?></th>
                                    <th><?= lang('Presupuestos.precioTotal') ?></th>
                                    <th><?= lang('Tarifaacabado.margen') ?></th>
                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="row mb-3 px-4">
                                <div class="col-md-12 col-lg-4 py-4">
                                    <select id="add_servicio_enc_list" class="select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-4 px-2 py-4">
                                    <button id="insertar_serv_enc" type="button" class="btn btn-secondary waves-effect waves-light float-start tiradas-alternativas"><?= lang("Presupuestos.insertar")?></button>
                                </div>

                            </div>

                        </div>

                        <div class="tab-pane fade" id="servicios-manipulado" role="tabpanel">
                            <div id="serv-manipulado-alert">
                            </div>
                            <div id="serv-manipulado-error">
                            </div>
                            <table id="tableOfServiciosManipulado" class="table table-striped table-hover tiradas-alternativas update-resumen-presupuesto" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th><?= lang('Presupuestos.id') ?></th>
                                    <th><?= lang('Tarifamanipulado.tarifamanipulado') ?></th>
                                    <th><?= lang('Presupuestos.precioUnidad') ?></th>
                                    <th><?= lang('Presupuestos.precioTotal') ?></th>
                                    <th><?= lang('Tarifaacabado.margen') ?></th>
                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div class="row mb-3 px-4">
                                <div class="col-md-12 col-lg-4 py-4">
                                    <select id="add_servicio_manipulado_list" class="select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-4 px-2 py-4">
                                    <button id="insertar_serv_manipulado" type="button" class="btn btn-secondary waves-effect waves-light float-start tiradas-alternativas"><?= lang("Presupuestos.insertar")?></button>
                                </div>

                            </div>
                        </div>


                        <div class="tab-pane fade" id="servicios-extra" role="tabpanel">
                            <div id="serv-extra-alert">
                            </div>
                            <div id="serv-extra-error">
                            </div>
                            <table id="tableOfServiciosExtra" class="table table-striped table-hover tiradas-alternativas update-resumen-presupuesto" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th><?= lang('Presupuestos.id') ?></th>
                                    <th><?= lang('Tarifaextra.tarifaextra') ?></th>
                                    <th><?= lang('Tarifaextra.coste') ?></th>
                                    <th><?= lang('Presupuestos.precio') ?></th>
                                    <th><?= lang('Tarifaacabado.margen') ?></th>
                                    <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <div class="row mb-3 px-4">
                                <div class="col-md-12 col-lg-4 py-4">
                                    <select id="add_servicio_extra_list" class="select2bs2" style="width: 100%;">
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-4 px-2 py-4">
                                    <button id="insertar_serv_extra" type="button" class="btn btn-secondary waves-effect waves-light float-start tiradas-alternativas"><?= lang("Presupuestos.insertar")?></button>
                                </div>

                            </div>
                        </div>

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