<?=$this->include('themes/_commonPartialsBs/datatables') ?>
<?=$this->include('themes/_commonPartialsBs/sweetalert') ?>
<?= $this->extend('themes/vuexy/main/defaultlayout') ?>

<?=$this->section('content');  ?>
<div class="row">
    <div class="col-md-12">

        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title"><?=lang('Paises.paisList') ?></h3>
                <?=anchor(route_to('newPais'), lang('Basic.global.addNew').' '.lang('Paises.pais'), ['class'=>'btn btn-primary float-end']); ?>
           </div><!--//.card-header -->
            <div class="card-body">
				<?= view('themes/_commonPartialsBs/_alertBoxes'); ?>

					<table id="tableOfPaises" class="table table-striped table-hover" style="width: 100%;">
						<thead>
							<tr>
								<th><?= lang('Paises.nombre') ?></th>
								<th><?= lang('Paises.code') ?></th>
								<th><?= lang('Paises.code3') ?></th>
								<th><?= lang('Paises.moneda') ?></th>
								<th><?= lang('Paises.urlErp') ?></th>
								<th><?= lang('Paises.userErp') ?></th>
								<th><?= lang('Paises.keyErp') ?></th>
								<th><?= lang('Paises.showErp') ?></th>
								<th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
            </div><!--//.card-body -->
            <div class="card-footer">

            </div><!--//.card-footer -->
        </div><!--//.card -->
    </div><!--//.col -->
</div><!--//.row -->

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


<?=$this->section('additionalInlineJs') ?>
    
    const lastColNr = $('#tableOfPaises').find("tr:first th").length - 1;
    const actionBtns = function(data) {
        return `<td class="text-right py-0 align-middle">
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-sm btn-warning btn-edit me-1" data-id="${data.id}"><?= lang('Basic.global.edit') ?></button>
                    <button class="btn btn-sm btn-danger btn-delete ms-1" data-id="${data.id}"><?= lang('Basic.global.Delete') ?></button>
                </div>
                </td>`;
    };
    theTable = $('#tableOfPaises').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        scrollX: true,
        lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
        pageLength: 10,
        lengthChange: true,
        "dom": 'lfBrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'print', {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4'
            }
        ],
        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('dataTableOfPaises') ?>',
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            async: true,
        }),
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                targets: [lastColNr]
            }
        ],
        columns : [
            { 'data': 'nombre' },
            { 'data': 'code' },
            { 'data': 'code3' },
            { 'data': 'moneda' },
            { 'data': 'url_erp' },
            { 'data': 'user_erp' },
            { 'data': 'key_erp' },
            { 'data': 'show_erp' },
            { 'data': actionBtns }
        ]
    });
    
    theTable.on( 'draw.dt', function () {
        const boolCols = [7];
        for (let coln of boolCols) {
            theTable.column(coln, { page: 'current' }).nodes().each( function (cell, i) {
                cell.innerHTML = cell.innerHTML == '1' ? '<i class="text-success bi bi-check-lg"></i>' : '';
            });
        }
    });

    $(document).on('click', '.btn-edit', function(e) {
        window.location.href = `<?= route_to('paisList') ?>/${$(this).attr('data-id')}/edit`;
    });
    
    $(document).on('click', '.btn-delete', function(e) {
        Swal.fire({
            title: '<?= lang('Basic.global.sweet.sureToDeleteTitle', [mb_strtolower(lang('Paises.pais'))]) ?>',
            text: '<?= lang('Basic.global.sweet.sureToDeleteText') ?>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            confirmButtonText: '<?= lang('Basic.global.sweet.deleteConfirmationButton') ?>',
            cancelButtonText: '<?= lang('Basic.global.Cancel') ?>',
            cancelButtonColor: '#d33'
        })
        .then((result) => {
            const dataId = $(this).data('id');
            const row = $(this).closest('tr');
            if (result.value) {
                $.ajax({
                    url: `<?= route_to('paisList') ?>/${dataId}`,
                    method: 'DELETE',
                }).done((data, textStatus, jqXHR) => {
                    Toast.fire({
                        icon: 'success',
                        title: data.msg ?? jqXHR.statusText,
                    });
                    
                    theTable.clearPipeline();
                    theTable.row($(row)).invalidate().draw();
                }).fail((jqXHR, textStatus, errorThrown) => {
                    Toast.fire({
                        icon: 'error',
                        title: jqXHR.responseJSON.messages.error,
                    });
                })
            }
        });
    });
    
<?=$this->endSection() ?>


<?=$this->section('css') ?>
    <link rel="stylesheet" href="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.css") ?>">
<?=$this->endSection() ?>


<?= $this->section('additionalExternalJs') ?>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/dataTables.buttons.min.js") ?>"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.bootstrap5.min.js") ?>"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.html5.min.js") ?>"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/buttons/buttons.print.min.js") ?>"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/jszip/jszip.min.js") ?>"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/pdfmake.min.js") ?>" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/pdfmake/vfs_fonts.js") ?>"></script>
<?=$this->endSection() ?>

