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

					<table id="tableOfMaquinaspordefecto" class="table table-striped table-hover" style="width: 100%;">
						<thead>
							<tr>
								<th><?= lang('MaquinasPorDefecto.tipo') ?></th>
								<th><?= lang('Maquinas.maquina') ?></th>
                                <th><?= lang('MaquinasPorDefecto.anchoMin') ?></th>
								<th><?= lang('MaquinasPorDefecto.anchoMax') ?></th>
								<th><?= lang('MaquinasPorDefecto.altoMin') ?></th>
								<th><?= lang('MaquinasPorDefecto.altoMax') ?></th>
								<th><?= lang('MaquinasPorDefecto.tiradaMin') ?></th>
								<th><?= lang('MaquinasPorDefecto.tiradaMax') ?></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 = $('#tableOfMaquinaspordefecto').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 = $('#tableOfMaquinaspordefecto').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: "//cdn.datatables.net/plug-ins/1.13.4/i18n/<?= config('Basics')->i18n ?>.json"
        },
        ajax : $.fn.dataTable.pipeline( {
            url: '<?= route_to('dataTableOfMaquinasPorDefecto') ?>',
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            async: true,
        }),
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                targets: [lastColNr]
            }
        ],
        columns : [
            { 'data': 'tipo',  "render": function ( data, type, row, meta ) {
                if(data=='bn')
                    return '<?= lang('MaquinasPorDefecto.bn') ?>';
                else if(data=='bnhq')
                    return '<?= lang('MaquinasPorDefecto.bnhq') ?>';
                else if(data=='color')
                    return '<?= lang('MaquinasPorDefecto.color') ?>';
                else if(data=='cubierta')
                    return '<?= lang('MaquinasPorDefecto.cubierta') ?>';
                else if(data=='portada')
                    return '<?= lang('MaquinasPorDefecto.portada') ?>';
                else if(data=='rotativa')
                    return '<?= lang('MaquinasPorDefecto.rotativa') ?>';
                }
            },
            { 'data': 'maquina' },
            { 'data': 'ancho_min' },
            { 'data': 'ancho_max' },
            { 'data': 'alto_min' },
            { 'data': 'alto_max' },
            { 'data': 'tirada_min' },
            { 'data': 'tirada_max' },
            { 'data': actionBtns }
        ]
    });

    $(document).on('click', '.btn-edit', function(e) {
        window.location.href = `/configuracion/maquinasdefecto/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/maquinasdefecto/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="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
<?= $this->endSection() ?>

<?= $this->section('additionalExternalJs') ?>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js" integrity="sha512-xcHCGC5tQ0SHlRX8Anbz6oy/OullASJkEhb4gjkneVpGE3/QGYejf14CUO5n5q5paiHfRFTa9HKgByxzidw2Bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js" integrity="sha512-rDbVu5s98lzXZsmJoMa0DjHNE+RwPJACogUCLyq3Xxm2kJO6qsQwjbE5NDk2DqmlKcxDirCnU1wAzVLe12IM3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.js" integrity="sha512-cktKDgjEiIkPVHYbn8bh/FEyYxmt4JDJJjOCu5/FQAkW4bc911XtKYValiyzBiJigjVEvrIAyQFEbRJZyDA1wQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<?= $this->endSection() ?>

