<?=$this->include('themes/_commonPartialsBs/select2bs5') ?>
<?=$this->include('themes/_commonPartialsBs/datatables') ?>
<?=$this->include('themes/_commonPartialsBs/sweetalert') ?>
<?= $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"><?= $pageTitle ?></h3>
           </div><!--//.card-header -->
            <div class="card-body">
				<?= view('themes/_commonPartialsBs/_alertBoxes'); ?>

					<table id="tableOfPresupuestos" class="table table-striped table-hover" style="width: 100%;">
						<thead>
							<tr>
								<th>Número</th>
								<th><?= lang('Presupuestos.created_at') ?></th>
                                <th><?= lang('Presupuestos.tipoPresupuesto') ?></th>
                                <?php if ($clienteId == 0): ?>
                                    <th><?= lang('Clientes.cliente') ?></th>
                                <?php endif; ?>
								<th><?= lang('Presupuestos.titulo') ?></th>
								<th class='noFilter'><?= lang('Presupuestos.paginas') ?></th>
								<th class='noFilter'><?= lang('Presupuestos.tirada') ?></th>
								<th class='noFilter'><?= lang('Presupuestos.totalPresupuesto') ?></th>
								<th><?= lang('Presupuestos.presupuestoEstado') ?></th>
								<th class="noFilter 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 = $('#tableOfPresupuestos').find("tr:first th").length - 1;
const actionBtns = function(data) {
	if(data.estado == 'borrador'){
		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>
					<?php if(auth()->user()->can('presupuesto-cliente.delete')): ?>
						<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>
					<?php endif; ?>
				</div>
			</td>`;
	}
	else{	
		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-edit mx-2" data-id="${data.id}"></i></a>
				</div>
			</td>`;
	}
};
	
// Setup - add a text input to each footer cell
$('#tableOfPresupuestos thead tr').clone(true).appendTo('#tableOfPresupuestos thead');
$('#tableOfPresupuestos thead tr:eq(1) th').each(function (i) {
	if (!$(this).hasClass("noFilter")) {
		var title = $(this).text();
		if(i==1){

			$(this).html('<input id="bs-rangepicker-range" type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;"  />');
			var bsRangePickerRange = $('#bs-rangepicker-range')
			bsRangePickerRange.daterangepicker({
			ranges: {
				'<?= lang('datePicker.hoy') ?>': [moment(), moment()],
				'<?= lang('datePicker.ayer') ?>': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'<?= lang('datePicker.ultimos7') ?>': [moment().subtract(6, 'days'), moment()],
				'<?= lang('datePicker.ultimos30') ?>': [moment().subtract(29, 'days'), moment()],
				'<?= lang('datePicker.esteMes') ?>': [moment().startOf('month'), moment().endOf('month')],
				'<?= lang('datePicker.ultimoMes') ?>': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			},
			opens: 'right',
			language: '<?= config('Basics')->i18n ?>',
			"locale": {
				"customRangeLabel": "<?= lang('datePicker.personalizar') ?>",
				"format": "YYYY-MM-DD",
				"separator": " ",
				"applyLabel": "<?= lang('datePicker.aplicar') ?>",
				"cancelLabel": "<?= lang('datePicker.limpiar') ?>",
				
			},
			"alwaysShowCalendars": true,
			autoUpdateInput: false,
			
			});

			bsRangePickerRange.on('apply.daterangepicker', function(ev, picker) {
				$(this).val(picker.startDate.format('YYYY-MM-DD') + ' ' + picker.endDate.format('YYYY-MM-DD'));
				theTable
					.column(i)
					.search(this.value)
					.draw();
			});

			bsRangePickerRange.on('cancel.daterangepicker', function(ev, picker) {
				$(this).val('');
				theTable
					.column(i)
					.search(this.value)
					.draw();
			});
		
		}
        else if (i == 2) {
            // Agregar un selector en la tercera columna
            $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');

            // Agregar opciones al selector
            var selectorTipo = $('select', this);
            selectorTipo.append('<option value="">Todos</option>'); // Opción vacía
            selectorTipo.append('<option value="libroCosidoTapaBlanda"><?= lang('Presupuestos.libroCosidoTapaBlanda') ?></option>');
            selectorTipo.append('<option value="libroCosidoTapaDura"><?= lang('Presupuestos.libroCosidoTapaDura') ?></option>');
            selectorTipo.append('<option value="libroFresadoTapaBlanda"><?= lang('Presupuestos.libroFresadoTapaBlanda') ?></option>');
            selectorTipo.append('<option value="libroFresadoTapaDura"><?= lang('Presupuestos.libroFresadoTapaDura') ?></option>');
            selectorTipo.append('<option value="libroEspiralTapaDura"><?= lang('Presupuestos.libroEspiralTapaDura') ?></option>');
            selectorTipo.append('<option value="libroEspiralTapaBlanda"><?= lang('Presupuestos.libroEspiralTapaBlanda') ?></option>');
            selectorTipo.append('<option value="libroWireoTapaDura"><?= lang('Presupuestos.libroWireoTapaDura') ?></option>');
            selectorTipo.append('<option value="libroWireoTapaBlanda"><?= lang('Presupuestos.libroWireoTapaBlanda') ?></option>');
            selectorTipo.append('<option value="libroGrapado"><?= lang('Presupuestos.libroGrapado') ?></option>');

            selectorTipo.on('change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
                theTable.column(i).search(val).draw();
            });
        }
        <?php if ($clienteId == 0): ?>
            else if (i == 8) {
        <?php else: ?>
            else if (i == 7) {
        <?php endif; ?>
            // Agregar un selector en la tercera columna
            $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');

            // Agregar opciones al selector
            var selectorEstado = $('select', this);
            selectorEstado.append('<option value="">Todos</option>'); // Opción vacía
            selectorEstado.append('<option value="1"><?= lang('Presupuestos.presupuestoEstadoBorrador') ?></option>');
            selectorEstado.append('<option value="2"><?= lang('Presupuestos.presupuestoEstadoAceptado') ?></option>');

            selectorEstado.on('change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );
                theTable.column(i).search(val).draw();
            });
        }
		else{
			$(this).html('<input type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;"  />');

			$('input', this).on('change clear', function () {
				if (theTable.column(i).search() !== this.value) {
					theTable
						.column(i)
						.search(this.value)
						.draw();
				}
			});
		}
	}
	else {
		$(this).html('<span></span>');
	}
});


theTable = $('#tableOfPresupuestos').DataTable({
	orderCellsTop: true,
	fixedHeader: true,
	processing: true,
	serverSide: true,
	autoWidth: true,
	responsive: true,
	scrollX: true,
	lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
	pageLength: 50,
	lengthChange: true,
	"dom": '<"mb-3"l>Brtip',
	"buttons": [
		'colvis', 'copy', 'csv', 'excel', 'print', {
			extend: 'pdfHtml5',
			orientation: 'landscape',
			pageSize: 'A4'
		}
	],
	stateSave: false,
	order: [[1, 'desc']],
	language: {
		url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
	},
	ajax : $.fn.dataTable.pipeline( {
		url: '<?= route_to('datatableOfPresupuestos') ?>',
		method: 'POST',
        data: function(q) {
            q.cliente = <?php echo $clienteId; ?>;
        },
		headers: {'X-Requested-With': 'XMLHttpRequest'},
		async: true,
	}),
	columnDefs: [
		{
			orderable: false,
			searchable: false,
			targets: [lastColNr]
		},
	],
 
	columns : [
		{ 'data': 'id' },
		{ 'data': 'fecha' },
        { 'data': 'codigo',
            render: function(data, type, row, meta) {
                switch(data){
                    case "libroCosidoTapaBlanda":
                        return '<?= lang('Presupuestos.libroCosidoTapaBlanda') ?>';
                        break;

                    case "libroCosidoTapaDura":
                        return '<?= lang('Presupuestos.libroCosidoTapaDura') ?>';
                        break;

                    case "libroFresadoTapaBlanda":
                        return '<?= lang('Presupuestos.libroFresadoTapaBlanda') ?>';
                        break;

                    case "libroFresadoTapaDura":
                        return '<?= lang('Presupuestos.libroFresadoTapaDura') ?>';
                        break;


                    case "libroEspiralTapaDura":
                        return '<?= lang('Presupuestos.libroEspiralTapaDura') ?>';
                        break;

                    case "libroEspiralTapaBlanda":
                        return '<?= lang('Presupuestos.libroEspiralTapaBlanda') ?>';
                        break;

                    case "libroWireoTapaDura":
                        return '<?= lang('Presupuestos.libroWireoTapaDura') ?>';
                        break;

                    case "libroWireoTapaBlanda":
                        return '<?= lang('Presupuestos.libroWireoTapaBlanda') ?>';
                        break;

                    case "libroGrapado":
                        return '<?= lang('Presupuestos.libroGrapado') ?>';
                        break;

                    default:
                        return data;    // Debug
                        break;

                }
            },
        },
        <?php if ($clienteId == 0): ?>
			{ 'data': 'cliente'},
		<?php endif; ?>
        
		{ 'data': 'titulo' },
		{ 'data': 'paginas',render : (d) => `<span class="autonumeric">${d}</span>` },
		{ 'data': 'tirada',render : (d) => `<span class="autonumeric">${d}</span>` },
		{ 'data': 'total_presupuesto',render : (d) => `<span class="autonumeric">${d}</span>` },
		{ 'data': 'estado' ,
			'render': function ( data, type, row, meta ) {
                if(data=='borrador')
                    return '<?= lang('Presupuestos.presupuestoEstadoBorrador') ?>';
                else if(data=='aceptado')
                    return '<?= lang('Presupuestos.presupuestoEstadoAceptado') ?>';
                }
            },
		{ 'data': actionBtns }
	]
});

theTable.on('click', 'tbody td:not(:last-child)', function () {
    var data = theTable.row($(this).closest('tr')).data();
    var url = '/presupuestos/presupuestocliente/edit/' + data['id']; 
    window.location.href = url;
});

theTable.on( 'draw.dt', function () {
	
	const dateCols = [1];
	<?php if ($clienteId == 0): ?>
	const priceCols = [7];
	<?php else: ?>
	const priceCols = [6];
	<?php endif; ?>
	
	for (let coln of dateCols) {
		theTable.column(coln, { page: 'current' }).nodes().each( function (cell, i) {
			const datestr = cell.innerHTML;
			const dateStrLen = datestr.toString().trim().length;
			if (dateStrLen > 0) {
				let dateTimeParts= datestr.split(/[- :]/); // regular expression split that creates array with: year, month, day, hour, minutes, seconds values
				dateTimeParts[1]--; // monthIndex begins with 0 for January and ends with 11 for December so we need to decrement by one
				const d = new Date(...dateTimeParts); // new Date(datestr);
				cell.innerHTML = d.toLocaleDateString();
			}
		});
	}
	

});


$(document).on('click', '.btn-edit', function(e) {
	window.location.href = `/presupuestos/presupuestocliente/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: `/presupuestos/presupuestocliente/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") ?>">
	<link rel="stylesheet" href="<?= site_url("/themes/vuexy/vendor/libs/datatables-sk/plugins/fixedheader/fixedHeader.dataTables.min.css") ?>">
	<link rel="stylesheet" href="<?= site_url('themes/vuexy/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.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/buttons/buttons.colVis.min.js") ?>"></script>
	<script src="<?= site_url('themes/vuexy/vendor/libs/moment/moment.js') ?>"></script>
	<script src="<?= site_url('themes/vuexy/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.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() ?>

