backoffice/application/views/historique_transactions.php

<!-- DataTables -->
<link rel="stylesheet"
	  href="<?php echo base_url('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="<?php echo base_url('bower_components/toastr/toastr.css') ?>">

<style>

	/* Turn off scrollbar when body element has the loading class */
	body.loading {
		overflow: hidden;
	}

	/* Make spinner image visible when body element has the loading class */
	body.loading #loader {
		display: block;
	}

	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#loader {
		display: none;
	}

	.img-center {
		display: block;
		margin-left: auto;
		margin-right: auto;
		/*width: 65%;*/
	}

</style>

<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">

		<h1>
			<?php echo isset($category) ? 'Wallet' :  $this->lang->line('Gestion des wallets') ; echo ' '.$network.' - '.$country.(isset($parrain) ? ' ::   POS de '.$parrain->lastname : ''); ?>
<!--			<input type="button" class="btn btn-primary pull-right" id="Bactiver"-->
<!--				   value="Activer/Désactiver le(s) réseau(x)" />-->
		</h1>
		<?php
		$site_url = base_url();

		if ($alert == "ok") {

			if (!$success == "ok") {
				?>
				<div class='alert alert-danger alert-dismissible col-xs-6'>
					<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
					<h4><i class='icon fa fa-ban'></i> Erreur!</h4>
					<?php echo $message; ?>
				</div>

				<?php
			} else {
				?>
				<div class="alert alert-success alert-dismissible col-xs-6">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
					<h4><i class="icon fa fa-check"></i> Success!</h4>
					<?php echo $message; ?>
				</div>

				<?php
			}
		}
		?>
	</section>
	<section class="content">
		<div class="row">
			<div class="col-md-4 col-sm-6 col-xs-12">
				<div class="info-box">
					<span class="info-box-icon bg-aqua"><i class="ion ion-android-time"></i></span>
					<div class="info-box-content">
						<span class="info-box-text"><?php echo $this->lang->line('Période') ?> </span>
						<span class="info-box-number">
                                    <input id="picker"
										style="background: #fff; cursor: pointer; padding: 1px 1px; border: 1px solid #ccc; width: 100%" data-category="<?php echo isset($category) ? $category : null ?>"
										type="text" name="daterange" data-lang="<?php echo $this->session->userdata('site_lang') ?>"
										value="<?php echo ($startDate!=null & $endDate != null) ?  $startDate. ' - '.$endDate : ''?>"/>
                                    
						</span>
						<span> Format : <?php echo $this->session->userdata('site_lang') === 'french' ? 'Jour - Mois - Année ' : 'Year - Month - Day'?> </span>
					</div>
				</div>
			</div>
			<?php if ($this->session->userdata('category') != 'super') { ?>
				<div class="col-md-8">
				<div class="box box-danger">
					<div class="box-header with-border">
						<h3 class="box-title"><?php echo $this->lang->line('analysis_by_supervisor'); ?></h3>
					</div>
					<div class="box-body">
						<form name="form_login" action="<?php echo base_url('Hyperviseur_dash/wallet') ?>" method="GET">
							<input type="hidden" name="history" value="transaction">
							<div class="row">
								<div class="col-xs-6">
									<div class="form-group" id="grp-agent">
										<?php
										if($superviseurs!=false){
											$numrows=$superviseurs->num_rows();
											if ($numrows > 0) { ?>
												<select class="form-control input-lg" name="parrainId" required>
													<?php foreach($superviseurs->result() as $row) {
														echo "<option value='".$row->agent_id."' ".($row->agent_id == $parrain_id ? 'selected' : '').">".$row->lastname."</option>";
													} ?>
												</select>
											<?php }else{
												echo $this->lang->line('Aucun agent');
											}
										}else{
											echo $this->lang->line('Aucun agent');
										}
										?>
									</div>
								</div>
								<div class="col-xs-3">
									<button class="btn btn-block btn-primary" type='submit'> <?= $this->lang->line('show_selection'); ?></button>
								</div>
								<div class="col-xs-3">
									<?php if(isset($parrain_id)): ?>
										<a class="btn btn-block btn-danger" href="<?= current_url().'?history=transaction'?>"><?= $this->lang->line('cancel_selection'); ?></a>
									<?php endif; ?>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<?php } ?>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<div class="box">
					<div class="box-header">
						<h3 class="box-title"><?= $this->lang->line('Historique des transactions').(isset($parrain) ? ' ::  POS de '.$parrain->lastname : '') ?></h3>
						<?php if ($this->session->userdata('category') != 'super') { ?>
							<div class="box-tools">
								<?php if(isset($parrain_id)): ?>
									<button id="export-grouping" class="btn btn-info">
										Exporter par groupe
									</button>
								<?php endif;?>
								<a class="btn btn-success" href="<?php echo current_url().'?history=deleted_transactions'?>">
									<?php echo $this->lang->line('deleted_transactions'); ?>
								</a>
							</div>
						<?php } ?>
					</div>
					<div class="box-body" style="overflow-x:auto;">
							<table id="transactions" class="table table-bordered table-striped">
								<thead>
								<tr>
									<th align='center'>ID</th>
									<th align='center'>Type</th>
									<th><?php echo $this->lang->line('cart_number') ?></th>
									<th><?php echo $this->lang->line('customer_net_amount') ?></th>
									<th><?php echo $this->lang->line('bank_deposit_amount') ?></th>
									<th><?php echo $this->lang->line('Commission de la banque') ?></th>
									<th><?php echo $this->lang->line('Commission de l\'hyperviseur') ?></th>
									<th><?php echo $this->lang->line('Commission du superviseur') ?></th>
									<th><?php echo $this->lang->line('Commission de l\'agent') ?></th>
									<th><?php echo $this->lang->line('agent_name') ?></th>
									<th><?php echo $this->lang->line('Superviseur') ?></th>
									<th align='center'>Date</th>
									<?php if ($this->session->userdata('category') != 'super') { ?>
										<th align='center'>Action</th>
									<?php } ?>
								</tr>
								</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="deleteTransaction" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h3 class="modal-title"><?php echo $this->lang->line('delete_transaction'); ?></h3>
					</div>
					<div class="modal-body">
						<h4> <?php echo $this->lang->line('are_you_sure'); ?> </h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo $this->lang->line('Fermer'); ?></button>
						<button type="button" class="btn btn-primary" id="delete"  > <?php echo $this->lang->line('Confirmer'); ?></button>
					</div>
				</div>
			</div>
		</div>

		<div id="loader" class="center-div loader">
			<div class="center-div">
				<img style="text-align: center" class="img-center" src="<?php echo base_url('dist/img/loading.gif') ?>" alt="Loading" height="50" width="50">
				<p style="text-align: center">Chargement</p>
			</div>
		</div>
	</section>


</div>
<!-- jQuery 3 -->
<script src="<?php echo base_url('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<?php echo base_url('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- DataTables -->
<script src="<?php echo base_url('bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
<script src="<?php echo base_url('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
<!-- SlimScroll -->
<script src="<?php echo base_url('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?php echo base_url('bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url('dist/js/demo.js') ?>"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.20/dataRender/datetime.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<script src="<?php echo base_url('dist/js/sweetalert2.js') ?>"></script>
<script src="<?php echo base_url('bower_components/toastr/toastr.js') ?>"></script>
<script src="<?php echo base_url('bower_components/js-xlsx/dist/xlsx.full.min.js') ?>"></script>
<script src="<?php echo base_url('bower_components/file-saver/dist/FileSaver.js') ?>"></script>


<script>

	// Add remove loading class on body element based on Ajax request status
	$(document).on({
		ajaxStart: function () {
			$("body").addClass("loading");
		},
		ajaxStop: function () {
			$("body").removeClass("loading");
		}
	});

	$(function () {
		const lang =  $('#picker').data('lang');
		const format = lang === 'french' ? 'fr' : 'en';
		moment.updateLocale(moment.locale(format), { invalidDate: "" }); // Blank text when is invalid date
		var table = $('#transactions').DataTable({
			// Processing indicator
			"processing": true,
			"language": {
				"processing": "<?= $this->lang->line('loading') ?>",
				"emptyTable" : "<?= $this->lang->line('Aucune transaction') ?>"
			},
			// DataTables server-side processing mode
			"serverSide": true,
			// Initial no order.
			"order": [],
			// Load data from an Ajax source
			"ajax": {
				"url": "<?php echo base_url('pagination/WalletTransaction/getLists'); ?>",
				"data":{
					"startDate" : "<?= $startDate?>",
					"endDate" : "<?= $endDate?>",
					"id_network" : <?= $id_network ?>,
					"parrain_id": "<?= $parrain_id ?>"
				},
				"type": "POST"
			},
			"aaSorting": [[ 0, "desc" ]],
			"columnDefs": [ {
				targets: 11,
				render: $.fn.dataTable.render.moment( 'YYYY-MM-DD HH:mm:ss' , 'D MMMM YYYY HH:mm:ss', format)
			},{
				targets: 10,
				visible : false
			}
			],
			dom: 'Bfrtip',
			"buttons": [
				'pageLength',
				{
					"extend": 'excelHtml5',
					title: "<?= $this->lang->line('Historique des transactions').(isset($parrain) ? ' _  POS de '.$parrain->lastname : '')?>",
					customizeData: function (data) {
						for (var i = 0; i < data.body.length; i++) {
							for (var j = 0; j < data.body[i].length; j++) {
								// data.body[i][j] = '\u200C' + data.body[i][j];
								if ([3, 4, 5, 6 , 7 , 8].includes(j)) {
									// Get the value and strip the non numeric characters
									// var value = $(this).text();
									value = data.body[i][j].replace(',', ".")
									data.body[i][j] = Number(value.replace(/[^0-9\.-]+/g, ""));
								}
							}
						}
					},
					trim: false,
					"action": newexportaction
				},
				{
					extend: 'csvHtml5',
					title: "<?= $this->lang->line('Historique des transactions').(isset($parrain) ? ' _  POS de '.$parrain->lastname : '')?>",
					customizeData: function (data) {
						for (var i = 0; i < data.body.length; i++) {
							for (var j = 0; j < data.body[i].length; j++) {
								// data.body[i][j] = '\u200C' + data.body[i][j];
								if ([3, 4, 5, 6 , 7 , 8].includes(j)) {
									// Get the value and strip the non numeric characters
									// var value = $(this).text();
									value = data.body[i][j].replace(',', ".")
									data.body[i][j] = Number(value.replace(/[^0-9\.-]+/g, ""));
								}
							}
						}
					},
					trim: false,
					"action": newexportaction
				},
				{
					extend: 'pdfHtml5',
					orientation: 'landscape',
					pageSize: 'LEGAL',
					title: "<?= $this->lang->line('Historique des transactions').(isset($parrain) ? ' _  POS de '.$parrain->lastname : '')?>",
					trim: false,
					"action": newexportaction
				},
				// 'colvis'
			]
		});

		table.buttons().container()
				.appendTo('#example_wrapper .col-sm-6:eq(0)');

		function newexportaction(e, dt, button, config) {
			var self = this;
			var oldStart = dt.settings()[0]._iDisplayStart;
			dt.one('preXhr', function (e, s, data) {
				// Just this once, load all data from the server...
				data.start = 0;
				data.length = 2147483647;
				dt.one('preDraw', function (e, settings) {
					// Call the original action function
					if (button[0].className.indexOf('buttons-copy') >= 0) {
						$.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-excel') >= 0) {
						$.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
								$.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
								$.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-csv') >= 0) {
						$.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
								$.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
								$.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-pdf') >= 0) {
						$.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
								$.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
								$.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
					} else if (button[0].className.indexOf('buttons-print') >= 0) {
						$.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
					}
					dt.one('preXhr', function (e, s, data) {
						// DataTables thinks the first item displayed is index 0, but we're not drawing that.
						// Set the property to what it was before exporting.
						settings._iDisplayStart = oldStart;
						data.start = oldStart;
					});
					// Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
					setTimeout(dt.ajax.reload, 0);
					// Prevent rendering of the full data to the DOM
					return false;
				});
			});
			// Requery the server with the new one-time export settings
			dt.ajax.reload();
		}
	});
</script>

<script>

	$("#export-grouping").click(function(){
		let start = "<?= $startDate?>"
		let end = "<?=$endDate?>"
		let parrain_id = "<?=$parrain_id?>"

		let button = $(this);
		button.prop("disabled",true);
		$.ajax({
			url : '<?php echo base_url('/Hyperviseur_dash/export')?>',
			type : 'POST',
			dataType : 'json',
			data: {"parrain_id": parrain_id , start : start , end : end },
			async:true,
			success : function(data){

				console.log('data',data)

				// Empty workbook object
				var wb = XLSX.utils.book_new();
				var title = "<?= $this->lang->line('Historique des transactions').(isset($parrain) ? ' _ POS de '.$parrain->lastname : '')?>"+" _ "+start+" - "+end
				wb.Props = {
					Title: title,
					Subject: title,
					Author: "iLink World",
					CreatedDate: new Date()
				};

				wb.SheetNames.push("sheet");

				//Data
				var ws_data = data ; //[['hello' , 'world']];  //a row with 2 columns
				// Create the sheet from this array by using aoa_to_sheet()
				var ws = XLSX.utils.aoa_to_sheet(ws_data);
				// Assign the sheet object to the workbook Sheets array.
				wb.Sheets["sheet"] = ws;

				/* cell width */
				var wscols = [];
				let cell;
				for (let i = 0; i < ws_data.length; i++) {
					wscols.push({ wch: 20 });  // wch = character
				}

				ws['!cols'] = wscols;

				var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});
				function s2ab(s) {
					var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
					var view = new Uint8Array(buf);  //create uint8array as viewer
					for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
					return buf;
				}

				saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), title+'.xlsx');
			},
			error : function(resultat, statut, erreur){
				console.log(resultat+" "+erreur);
				toastr.error("<?php echo $this->lang->line('error_message')?>" , "<?php echo $this->lang->line('request_error')?>");
			},
			complete: function (){
				button.prop("disabled",false);
			}
		});
	});


</script>

<script type="text/javascript">
	var startDate;
	var endDate;

	$(function () {
		const lang =  $('#picker').data('lang');
		const category =  $('#picker').data('category');
        const id_network = "<?= $id_network?>";
		$('input[name="daterange"]').daterangepicker({
			opens: 'left',
			autoUpdateInput: false,
			locale: {
				format: lang === 'french' ? 'DD-MM-YYYY' : 'YYYY-MM-DD',
				cancelLabel: 'Clear'
			}
		}, function (start, end, label) {
			const debut = start.format('YYYY-MM-DD');
			const fin = end.format('YYYY-MM-DD');
			if(category)
				window.location = "<?php echo current_url()?>" + "?history=transaction" + "<?= isset($parrain_id) ? '&parrainId='.$parrain_id : '' ?>" + "&d=" + debut + "&f=" + fin;
			else
				window.location = "<?php echo current_url()?>" + "?id="+id_network+"&history=transaction" + "&d=" + debut + "&f=" + fin;

		});

		$('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
			//do something, like clearing an input
			$('#daterange').val('');
			if(category)
				window.location = "<?php echo current_url()?>" + "?history=transaction"+ "<?= isset($parrain_id) ? '&parrainId='.$parrain_id : '' ?>";
			else
				window.location = "<?php echo current_url()?>" + "?id="+id_network+"&history=transaction";
		});
	});

</script>
<script>
	toastr.options.closeButton = true;
	toastr.options.closeMethod = 'fadeOut';
	toastr.options.closeDuration = 5000;
	toastr.options.closeEasing = 'swing';

	var id_transaction = null;

	$(document).on("click", ".openModal", function () {
		id_transaction = $(this).data('id-transaction');
	})

	$(document).on("click", "#cancel", function () {
		let button = $(this);
		button.prop("disabled",true);
		const id_transaction = $(this).data('id-transaction');
		$.ajax({
			url : '<?php echo base_url('index.php/Gestion/cancelTransation')?>',
			type : 'POST',
			dataType : 'json',
			data: {"id_transaction": id_transaction},
			async:true,
			success : function(data){
				if(data){
					Swal.fire({
						icon: 'success',
						title: "<?php echo $this->lang->line('canceled_transaction')?>",
						text: "<?php echo $this->lang->line('informations_updated')?>",
						timer: 3000
					}).then(()=>{
						location.reload();
					});
					// alert("Les informations ont été mises à jour.") ? "" : location.reload();
				}else{
					toastr.error("<?php echo $this->lang->line('error_message')?>" , "<?php echo $this->lang->line('request_error')?>");
				}
			},
			error : function(resultat, statut, erreur){
				console.log(resultat+" "+erreur);
				toastr.error("<?php echo $this->lang->line('error_message')?>" , "<?php echo $this->lang->line('request_error')?>");
			},
			complete: function (){
				button.prop("disabled",false);
			}
		});
	});

	$('#delete').click(function(){
		let button = $(this);
		button.prop('disabled', true);
		$.ajax({
			url : '<?php echo base_url('index.php/Hyperviseur_dash/delete_wallet_transaction')?>',
			type : 'POST',
			dataType : 'json',
			data: {"id_transaction": id_transaction},
			success : function(data, statut){
				if(data=='200'){
					Swal.fire({
						icon: 'success',
						title: "<?php echo $this->lang->line('transaction_deleted')?>",
						text: "<?php echo $this->lang->line('informations_updated')?>",
						timer: 3000
					}).then(()=>{
						location.reload();
					});
					// alert("Les informations ont été mises à jour.") ? "" : location.reload();
				}else{
					toastr.error("<?php echo $this->lang->line('error_message')?>" , "<?php echo $this->lang->line('request_error')?>");
				}
			},
			error : function(resultat, statut, erreur){
				console.log(resultat+" "+erreur);
				toastr.error("<?php echo $this->lang->line('error_message')?>" , "<?php echo $this->lang->line('request_error')?>");
			},

			complete: function (){
				button.prop('disabled', false);
	 		}
		});
	});
</script>