sipadu_mbip/resources/views/main-dashboard/report/faulty.blade.php

@extends('layout.master', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun')
@section('sub_page_title', '')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	select.form-control, select.form-control:focus, select.form-control:hover { 
		border: 1px solid #ccc !important;
		height: auto !important;
	}
	.glyphicon { margin-right:10px; }
	th { font-weight: 600; text-align: center}
	table.dataTable.nowrap th, table.dataTable.nowrap td {
	    white-space: pre-line !important;
	}
	table.nowrap th, table.nowrap td {
	    white-space: pre-line !important;
	}
</style>

<div class="inner-page">
	<div class="row">
        <div class="col-md-2">
            <div class="card">
                <div class="card-block">
                	<div class="form-group" style="margin-top: 1.25em">
                		<label><b>Dari Tarikh <code>*</code></b></label>
                		<input type="date" name="start_date" id="start_date" class="form-control" required>
                	</div>
                	<div class="form-group" style="margin-top: 1.25em">
                		<label><b>Hingga Tarikh <code>*</code></b></label>
                		<input type="date" name="end_date"  id="end_date" class="form-control" required>
                	</div>
                	<div class="form-group" style="margin-top: 1.25em">
                		<label><b>Jabatan <code>*</code></b></label>
                		<select name="jabatan" id="jabatan" class="form-control" required>
                			<option value="null">Pilih jabatan</option>
                			@foreach($department as $d)
                			<option value="{{ $d->_id }}">{{ $d->jbkod }}</option>
                			@endforeach
                		</select>
                	</div>
                	<div class="form-group">
                		<button id="jana" class="btn btn-info btn-block waves-effect waves-light">Jana Report</button>
                	</div>
                </div>
            </div>
        </div>
        <div class="col-sm-10">
			<div class="card">
				<div class="card-header">
					<h5>Statistik Pengeluaran Kompaun Mengikut Kesalahan</h5>
					<div id="link" style="float:right"></div>
				</div>
				<div class="card-block">
					
					<div class="row m-b-30">
						<div class="col-lg-12 col-xl-12">
							@include('main-dashboard.report.part.faulty_nav')

							<!-- Tab panes -->
							<div class="tab-content card-block">
								@foreach($month as $key => $m)
								<div class="tab-pane {{ $key == 0 ? 'active' : '' }}" id="{{ $m }}" role="tabpanel">
									<div class="dt-responsive table-responsive">
										<table id="tbl_{{$m}}" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
											<thead>
												<tr>
													<th>BIL</th>
													<th width="319">KESALAHAN</th>
													<th>JUMLAH KOMPAUN KELUAR</th>
													<th>AMAUN KOMPAUN (RM)</th>
													<th>JUMLAH BAYAR</th>
													<th>AMAUN BAYAR (RM)</th>
													<th>JUMLAH KOMPAUN BELUM BAYAR</th>
													<th>AMAUN TUNGGAKAN (RM)</th>
													<th>KOMPAUN BATAL</th>
													<th>AMAUN BATAL (RM)</th>
													<th>KOMPAUN KURANG</th>
													<th>AMAUN KURANG (RM)</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th></th>
													<th>JUMLAH</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
													<th>0</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
								@endforeach
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>		
</div>
@endsection

@section('external_js')
<script type="text/javascript">

	var current_id = "{{ $user->_id }}";
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	var table = [], i ,month = <?php echo json_encode($month); ?>;
	$(document).ready(function() {

		for (i=0;i<=month.length;i++) {
			var j = i+1;
			var mm = j.toString();
			if(mm.length == 1){
				mm = '0'+mm;
			}
			console.log(mm);

			table[i] = $('#tbl_'+month[i]).DataTable({
				"ordering": false,
				"searching": false,
				"lengthChange": false,
				"pageLength": -1,
				"paging": false,
				"processing": true,
				"serverSide": true,
				"ajax": {
					"url": "{{ url('api/get/statistic-faulty') }}",
					"data": {
						"start_date": function() { return $('#start_date').val() },
						"end_date": function() { return $('#end_date').val() },
						"jabatan": function() { return $('#jabatan').val() },
						"month": mm,
					}
				},
				"columns": [
				{ "data": "index", "name": "index" },
				{ "data" : "name", "name": "name" },
				{ "data": "jum_kompaun_keluar", "jan": "jkk" },
				{ "data": "amaun_kompaun", "name": "ako" },
				{ "data": "jumlah_byr", "name": "jb" },
				{ "data": "amaun_byr", "name": "ab" },
				{ "data": "jum_kompaun_belum_byr", "name": "jkbb" },
				{ "data": "amaun_tunggakan", "name": "at" },
				{ "data": "kompaun_batal", "name": "kb" },
				{ "data": "amaun_batal", "name": "abt" },
				{ "data": "kompaun_kurang", "name": "kk" },
				{ "data": "amaun_kurang", "name": "ak" },
				],	
				"columnDefs": [
				{  
					"render": function ( data, type, row, meta ) {
						return (meta.row+1);
					},
					"targets": 0,
				},
				],
				"footerCallback": function(row, data, start, end, display) {
					var api = this.api();

					var jkk,ako,jb,ab,jkbb,at,kb,abt,kk,ak;
					jkk = api.column( 2 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 2 ).footer() ).html(jkk);

					ako = api.column( 3 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 3 ).footer() ).html(ako);

					jb = api.column( 4 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 4 ).footer() ).html(jb);

					ab = api.column( 5 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 5 ).footer() ).html(ab);

					jkbb = api.column( 6 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 6 ).footer() ).html(jkbb);

					at = api.column( 7 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 7 ).footer() ).html(at);

					kb = api.column( 8 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 8 ).footer() ).html(kb);

					abt = api.column( 9 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 9 ).footer() ).html(abt);

					kk = api.column( 10 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 10 ).footer() ).html(kk);

					ak = api.column( 11 ).data().reduce( function (a, b) {
						return parseFloat(a) + parseFloat(b);
					}, 0 );
					$( api.column( 11 ).footer() ).html(ak);
				},
				"drawCallback": function(settings) {
					var api = this.api();
				    // Output the data for the visible rows to the browser's console
				    if($('#start_date').val() != 'null' && $('#end_date').val() != 'null' && $('#jabatan').val() != 'null'){
					    var href = document.getElementById('mylink');
					    var d_link = document.getElementById('link').contains(href);
					    if(!d_link){
					    	var link = "{{ url('main/export/report/faulty') }}/"+$('#start_date').val()+"/"+$('#end_date').val()+"/"+$('#jabatan').val()+"/All";
					    	$('#link').html('<a target="_blank" id="mylink" href="'+link+'" class="btn btn-primary btn-sm waves-effect waves-light">Excel</a>');
					    }
					}
				},			
			});
		}

	    $('#jana').on('click', function(e){
	    	e.preventDefault();

	    	if($('#start_date').val() == '' || $('#end_date').val() == '' || $('#jabatan').val() == 'null'){
	    		alert('Sila pilih tarikh dan jabatan');
	    	}else {
	    		for (i=0;i<=month.length;i++) {
		    		table[i].ajax.reload();
		    	}
	    	}
	    	
	    });
	});
</script>
@endsection