sipadu_mbip/resources/views/main-dashboard/report/backlog.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>Tahun <code>*</code></b></label>
                		<select name="tahun" id="tahun" class="form-control" required>
                			<option value="null">Pilih tahun</option>
                			<option value="2016">2016</option>
                			<option value="2017">2017</option>
                			<option value="2018">2018</option>
                			<option value="2019">2019</option>
                			<option value="2020">2020</option>
                		</select>
                	</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>Laporan Tunggakan Tahunan</h5>
					<div id="link" style="float:right"></div>
				</div>
				<div class="card-block">
					<!-- <div id='bal'>balance pada tahun </div> -->
					<div class="dt-responsive table-responsive">
						<table id="reportTt" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
							<thead>
								<tr>
									<th>BULAN</th>		
									<th id='bal' style="width:17%">BAKI </th>						
									<th>KUTIPAN BULANAN (RM)</th>		
									<th>JUMLAH KOMPAUN BAYAR</th>		
									<th>KUTIPAN TERKUMPUL (RM)</th>		
									<th>BAKI TUNGGAKAN (RM)</th>		
									<th>BAKI BELUM BAYAR</th>			
									<th>JUMLAH KURANG (RM)</th>			
									<th>% KUTIPAN</th>					
									<th>% TERKUMPUL</th>		
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th></th>					
									<th>JUMLAH</th>				
									<th></th>					
									<th></th>					
									<th></th>					
									<th></th>					
									<th></th>					
									<th></th>					
									<th></th>					
									<th></th>					
								</tr>
							</tfoot>
						</table>
					</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, test;
	$(document).ready(function() {

	    table = $('#reportTt').DataTable({
	    	"ordering": false,
	    	"searching": false,
	    	"lengthChange": false,
	    	"pageLength": -1,
	    	"paging": false,
	    	"processing": true,
	    	"serverSide": true,
	    	"ajax": {
			    "url": "{{ url('api/get/backlog-compound') }}",
			    "data": {
			        "year": function() { return $('#tahun').val() },
			        "jabatan": function() { return $('#jabatan').val() },
			        "current_id": '',
			    }
			},
			"columns": [
				{ "data": "bulan", "name": "bulan" },									//1
				{ "data": "space", "name": "space" },									//2
				{ "data": "kutipan_bulanan", "name": "kutipan_bulanan" },				//3
				{ "data": "jumlah_kompaun_bayar", "name": "jumlah_kompaun_bayar" },		//4
				{ "data": "kutipan_terkumpul", "name": "kutipan_terkumpul" },			//5
				{ "data": "baki_tunggakan", "name": "baki_tunggakan" },					//6
				{ "data": "baki_belum_bayar", "name": "baki_belum_bayar" },				//7
				{ "data": "jumlah_kurang", "name": "jumlah_kurang" },					//8
				{ "data": "_kutipan", "name": "_kutipan" },								//9
				{ "data": "_terkumpul", "name": "_terkumpul" },							//10
			],
	    	"rowCallback": function( row, data ) {
	            
	    		var keping, jumlah;
	            
	            jumlah = parseInt(table.cell(0,2).data()) + parseInt(table.cell(0,5).data());
	            keping = parseInt(table.cell(0,3).data()) + parseInt(table.cell(0,6).data());

	            $('#bal').html("BAKI PADA 1.1." + $('#tahun').val() + " \n " + jumlah  + " \n " + keping);  		
	            
	        },	
			"footerCallback": function(row, data, start, end, display) {
			 	var api = this.api();

			 	var kutipan_bulanan,jum_kompaun_bayar,jum_kurang;

			 	test = 8;

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

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

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

			},
			"drawCallback": function(settings) {
				var api = this.api();				

		        // Output the data for the visible rows to the browser's console
		        var data = api.rows( {page:'current'} ).data().toArray();
		        if (data && data.length > 0) {
					var link = "{{ url('main/export/report/backlog') }}/"+$('#tahun').val()+"/"+$('#jabatan').val();
				    $('#link').html('<a target="_blank" href="'+link+'" class="btn btn-primary btn-sm waves-effect waves-light">Excel</a>');
				}
			},			
	    });

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

	    	// console.log(" data " + $('#tahun').val()+ " dan " + $('#jabatan').val());
	    	$('#bal').html('BAKI');

	    	if($('#tahun').val() == 'null' || $('#jabatan').val() == 'null'){
	    		alert('Sila pilih tahun dan jabatan');
	    	}else {
	    		
	    		table.ajax.reload();
	    	
	    	}
	    	
	    });
	});
	
</script>
@endsection