<div class="accordion accordion-bordered mt-3" id="accordioFacturas">

    <div class="card accordion-item active">
        <h2 class="accordion-header" id="headingFacturas">
            <button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionFacturasTip" aria-expanded="false" aria-controls="accordionFacturasTip">
                <h3><?= lang("Pedidos.facturas") ?></h3>
            </button>
        </h2>

        <div id="accordionFacturasTip" class="accordion-collapse collapse show" data-bs-parent="#accordioFacturas">
            <div class="accordion-body">

            <?php if ($pedidoEntity->estado == 'finalizado') : ?>
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-primary btn-md" id="add-factura" ><span><?= lang("Pedidos.addFactura") ?><i class="ti ti-receipt-2 ti-xs"></i></span></button>
                </div>
            <?php endif; ?>

            <table id="tableOfFacturas" class="table table-striped table-hover" style="width: 100%;grid-template-columns: 1fr 1fr 6fr 1fr 1fr 1fr;">
                    <thead>
                        <tr>
                            <th style="max-width:60px;"></th>
                            <th>ID</th>
                            <th><?= lang('Facturas.numeroFactura') ?></th>
                            <th><?= lang('Facturas.ejemplares') ?></th>
                            <th><?= lang('Facturas.serieFacturacion') ?></th>
                            <th><?= lang('Facturas.estado') ?></th>
                            <th><?= lang('Facturas.fechaFactura') ?></th>
                            <th><?= lang('Facturas.total') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                
            </div> <!-- /.accordion-body -->
        </div>
    </div>
</div>


<?=$this->section('additionalInlineJs') ?>

const actionBtns_facturas = function(data) {
    return `
        <td class="text-right py-0 align-middle">
            <div class="btn-group btn-group-sm">
                <a href="javascript:void(0);"><i class="ti ti-eye ti-sm btn-view-factura mx-2" data-id="${data.id}"></i></a>
            </div>
        </td>`;
};

window.tablaFacturasPedido = $('#tableOfFacturas').DataTable({
    processing: true,
    serverSide: true,
    autoWidth: true,
    responsive: true,
    scrollX: true,
    "dom": 't',
    stateSave: true,
    order: [[1, 'asc']],
    language: {
        url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
    },
    ajax : $.fn.dataTable.pipeline( {
        url: '<?= route_to('dataTableOfFacturasPedido') ?>',
        method: 'POST',
        data: function ( d ) {
            d.pedido_id = <?= $pedidoEntity->id ?>;
        },
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        async: true,
    }),
    columnDefs: [
        {
            orderable: false,
            searchable: false,
            targets: [0]
        }
    ],
    columns : [
        { 'data': actionBtns_facturas },
        { 'data': 'id' },
        { 'data': 'numero' },
        { 'data': 'ejemplares'},
        { 'data': 'serie' },
        { 'data': 'estado',
            render: function(data, type, row, meta) {
                switch(data){
                    case "borrador":
                        return '<?= lang('Facturas.borrador') ?>';
                        break;

                    case "validada":
                        return '<?= lang('Facturas.validada') ?>';
                        break;

                    default:
                        return '--';    // Debug
                        break;

                }
            }
        },
        { 'data': 'fecha_factura_at' },
        { 'data': 'total' },
    ]
});

$(document).on('click', '.btn-view-factura', function(e) {
    var pedido_id = $(this).data('id');
    var url = '<?= route_to('editarFactura', ':id') ?>';
    url = url.replace(':id', pedido_id );
    
    window.open(url, '_blank');
});

<?=$this->endSection() ?>