<?= $this->include('themes/_commonPartialsBs/datatables') ?>
<?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
<?= $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('PapelGenerico.papelGenericoList') ?></h3>
                <?=anchor(route_to('newPapelGenerico'), lang('Basic.global.addNew').' '.lang('PapelGenerico.papelGenerico'), ['class'=>'btn btn-primary float-end']); ?>
           </div><!--//.card-header -->
            <div class="card-body">
				<?= view('themes/_commonPartialsBs/_alertBoxes'); ?>

					<table id="tableOfPapelesgenericos" class="table table-striped table-hover" style="width: 100%;">
						<thead>
							<tr>
								<th><?= lang('PapelGenerico.nombre') ?></th>
								<th><?= lang('PapelGenerico.code') ?></th>
								<th><?= lang('PapelGenerico.codeOt') ?></th>
								<th><?= lang('PapelGenerico.showInClient') ?></th>
                                <th><?= lang('PapelGenerico.showInClientSpecial') ?></th>
                                <th><?= lang('PapelGenerico.activo') ?></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 = $('#tableOfPapelesgenericos').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">
                    <a href="javascript:void(0);"><i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i></a>
                    <a href="javascript:void(0);"><i class="ti ti-trash ti-sm btn-delete mx-2" data-id="${data.id}" data-bs-toggle="modal" data-bs-target="#confirm2delete"></i></a>
                </div>
            </td>`;
    };

    theTable = $('#tableOfPapelesgenericos').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', // 'lfBrtip', // you can try different layout combinations by uncommenting one or the other
        // "dom": '<"top"lf><"clear">rt<"bottom"ipB><"clear">',  // remember to comment this line if you uncomment the above
        "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('dataTableOfPapelesGenericos') ?>',
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            async: true,
        }),
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                targets: [lastColNr]
            }
        ],
        columns : [
            { 'data': 'nombre' },
            { 'data': 'code' },
            { 'data': 'code_ot' },
            { 'data': 'show_in_client' },
            { 'data': 'show_in_client_special' },
            { 'data': 'activo' },
            { 'data': actionBtns }
        ]
    });


    theTable.on( 'draw.dt', function () {
        const boolCols = [3, 4, 5];
        for (let coln of boolCols) {
            theTable.column(coln, { page: 'current' }).nodes().each( function (cell, i) {
                cell.innerHTML = cell.innerHTML == '1' ? '<i class="ti ti-check"></i>' : '';
            });
        }

    });

    $(document).on('click', '.btn-edit', function(e) {
        window.location.href = `/configuracion/papelesgenericos/edit/${$(this).attr('data-id')}`;
    });

    $(document).on('click', '.btn-delete', function(e) {
        $(".btn-remove").attr('data-id', $(this).attr('data-id'));
    });

    $(document).on('click', '.btn-remove', function(e) {
        const dataId = $(this).attr('data-id');
        const row = $(this).closest('tr');
        if ($.isNumeric(dataId)) {
            $.ajax({
                url: `/configuracion/papelesgenericos/delete/${dataId}`,
                method: 'GET',
            }).done((data, textStatus, jqXHR) => {
                $('#confirm2delete').modal('toggle');
                theTable.clearPipeline();
                theTable.row($(row)).invalidate().draw();
                popSuccessAlert(data.msg ?? jqXHR.statusText);
            }).fail((jqXHR, textStatus, errorThrown) => {
                popErrorAlert(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() ?>

