<?=$this->include('themes/_commonPartialsBs/datatables') ?>
<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
<?= $this->extend('themes/vuexy/main/defaultlayout') ?>
<?= $this->section("content") ?>
<div class="row">
	<div class="col-12">
		<div class="card card-info">
			<div class="card-header">
				<h3 class="card-title"><?= $boxTitle ?? $pageTitle ?></h3>
			</div><!--//.card-header -->
			<form id="papelGenericoForm" method="post" class="card-body" action="<?= $formAction ?>">
				<?= csrf_field() ?>
                <?= view("themes/_commonPartialsBs/_alertBoxes") ?>
                <?= !empty($validation->getErrors()) ? $validation->listErrors("bootstrap_style") : "" ?>
                <?= view("themes/vuexy/form/configuracion/papel/_papelGenericoFormItems") ?>
				<div class="pt-4">
                    <input
                            type="submit"
                            class="btn btn-primary float-start me-sm-3 me-1"
                            name="save"
                            value="<?= lang("Basic.global.Save") ?>"
                    />
					<?= anchor(route_to("papelGenericoList"), lang("Basic.global.Cancel"), ["class" => "btn btn-secondary"]) ?>
				</div><!-- /.card-footer -->
			</form>
        </div><!-- //.card -->
    </div><!--//.col -->

			<?php if(str_contains($formAction,'edit')): ?>
				<div class="accordion mt-3" id="accordionExample">
					<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="#accordionOne" aria-expanded="flase" aria-controls="accordionOne">
								<?= lang("PapelGenerico.form_acordion_title") ?>
							</button>
						</h2>

						<div id="accordionOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
							<div class="accordion-body">
								<?= view('themes/_commonPartialsBs/_alertBoxes'); ?>

								<table id="tableOfPapelesimpresion" class="table table-striped table-hover" style="width: 100%;">
									<thead>
										<tr>
										<th><?= lang('PapelImpresion.defecto') ?></th>
										<th><?= lang('PapelImpresion.nombre') ?></th>	
										<th><?= lang('PapelImpresion.gramaje') ?></th>
										<th class="text-nowrap"></th>
										</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div> <!-- //.accordion -->
			<?php endif; ?>
</div><!--//.row -->
<?= $this->endSection() ?>

<?=$this->section('additionalInlineJs') ?>
    
			// JJO
			const url = window.location.href;
			const url_parts = url.split('/');
            let id = -1;
			if(url_parts[url_parts.length-2] == 'edit'){
				id = url_parts[url_parts.length-1];
			}
            const lastColNr = $('#tableOfPapelesimpresion').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">
                            <i class="ti ti-pencil ti-sm btn-edit mx-2" data-id="${data.id}"></i>
                        </div>
                        </td>`;
            };

            theTable = $('#tableOfPapelesimpresion').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":  '<"mt-4">lfrt<"mb-3"ip>',  // '<"mt-4"><"float-end"B><"float-start"l><t><"mt-4 mb-3"p>',
		        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('dataTableOfPapelesImpresion') ?>',
					data: {
						id_PG: id,
					},
					method: 'POST',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    async: true,
                }),
                columnDefs: [
                    {
                        orderable: false,
                        searchable: false,
                        targets: [lastColNr] //JJO añadidas bool cols
                    }
                ],
                columns : [
					{ 'data': 'defecto' },
					{ 'data': 'nombre' },
                    { 'data': 'gramaje',render : (d) => `<span class="autonumeric">${d}</span>` },
                    { 'data': actionBtns }
                ]
            });

    
        theTable.on( 'draw.dt', function () {
                const boolCols = [0];
            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 = `<?= route_to('papelImpresionList') ?>/${$(this).attr('data-id')}/edit`;
        window.location.href = `/configuracion/papelesimpresion/edit/${$(this).attr('data-id')}`;
    });

    $('#showInClientSpecial').on('change', function() {
        if($(this).is(':checked')) {
            $('#showInClient').prop('disabled', true);
            $('#showInClient').prop('checked', true);
        }
        else{
            $('#showInClient').prop('disabled', false);
        }
    });


<?=$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() ?>

