sipadu_mbip/resources/views/main-dashboard/report/perbezaan.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;
	    font-size: 11px !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>Tahun1 <code>*</code></b></label>
                		<input type="date" name="tahun1" id="tahun1" class="form-control" required>
                		<!-- <select name="tahun1" id="tahun1" class="form-control" required>
                			<option value="null">Pilih tahun pertama</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>Anggaran Tahun1 <code>*</code></b></label>
                		<input name="budget1" id="budget1" class="form-control" required>
                		<small style="color:red">Sila masukkan nombor sahaja</small>
                	</div>
                	<div class="form-group" style="margin-top: 1.25em">
                		<label><b>Tahun2 <code>*</code></b></label>
                		<input type="date" name="tahun2" id="tahun2" class="form-control" required>
                		<!-- <select name="tahun2" id="tahun2" class="form-control" required>
                			<option value="null">Pilih tahun kedua</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>Anggaran Tahun2 <code>*</code></b></label>
                		<input name="budget2" id="budget2" class="form-control" required>
                		<small style="color:red">Sila masukkan nombor sahaja</small>
                	</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</h5>
					<div id="link" style="float:right"></div>
				</div>
				<div class="card-block">
					<div class="dt-responsive table-responsive">
						<table id="reportK" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
							<thead>
								<tr>
									<th rowspan="2">BULAN</th>
									<th rowspan="2">ANGGARAN TAHUN <div id="tahun_1"></th>
									<th rowspan="2">KOMPAUN KELUAR (RM)</th>
									<th rowspan="2">PENGURANGAN KOMPAUN (RM)</th>
									<th colspan="2">KUTIPAN SEMASA</th>
									<th rowspan="2">% KUTIPAN</th>
									<th rowspan="2">% TERKUMPUL</th>
									<th rowspan="2">ANGGARAN TAHUN <div id="tahun_2"></th>
									<th rowspan="2">KOMPAUN KELUAR (RM)</th>
									<th rowspan="2">PENGURANGAN KOMPAUN (RM)</th>
									<th colspan="2">KUTIPAN SEMASA</th>
									<th rowspan="2">% KUTIPAN</th>
									<th rowspan="2">% TERKUMPUL</th>
								</tr>
								<tr>
									<th>KUTIPAN BULAN (RM)</th>
									<th>KUTIPAN TERKUMPUL (RM)</th>
									<th>KUTIPAN BULAN (RM)</th>
									<th>KUTIPAN TERKUMPUL (RM)</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th></th>
									<th>JUMLAH</th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th>JUMLAH</th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</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;
	$(document).ready(function() {

	    table = $('#reportK').DataTable({
	    	"ordering": false,
	    	"searching": false,
	    	"lengthChange": false,
	    	"pageLength": -1,
	    	"paging": false,
	    	"processing": true,
	    	"serverSide": true,
	    	"ajax": {
			    "url": "{{ url('api/get/current-compound') }}",
			    "data": {
			        "start_year": function() { return $('#tahun1').val() },
			        "end_year": function() { return $('#tahun2').val() },
			        "budget1": function() { return $('#budget1').val() },
			        "budget2": function() { return $('#budget2').val() },
			        "jabatan": function() { return $('#jabatan').val() },
			    }
			},
			"columns": [
				{ "data": "month", "name": "month" },
				{ "data" : "budget1", "name": "budget1" },
				{ "data": "kompaun_keluar1", "name": "kompaun_keluar1" },
				{ "data": "kompaun_kurang1", "name": "kompaun_kurang1" },
				{ "data": "kutipan_bulanan1", "name": "kutipan_bulanan1" },
				{ "data": "kutipan_terkumpul1", "name": "kutipan_terkumpul1" },
				{ "data": "kutipan1", "name": "kutipan1" },
				{ "data": "terkumpul1", "name": "terkumpul1" },
				{ "data": "budget2", "name": "budget2" },
				{ "data": "kompaun_keluar2", "name": "kompaun_keluar2" },
				{ "data": "kompaun_kurang2", "name": "kompaun_kurang2" },
				{ "data": "kutipan_bulanan2", "name": "kutipan_bulanan2" },
				{ "data": "kutipan_terkumpul2", "name": "kutipan_terkumpul2" },
				{ "data": "kutipan2", "name": "kutipan2" },
				{ "data": "terkumpul2", "name": "terkumpul2" },
			],	
			"footerCallback": function(row, data, start, end, display) {
			 	var api = this.api();

			 	var jum_kompaun1,jum_kurang1,jum_kutipan1,jum_kompaun2,jum_kurang2,jum_kutipan2;
			 	jum_kompaun1 = api.column( 2 ).data().reduce( function (a, b) {
	                    return parseFloat(a) + parseFloat(b);
	            }, 0 );
	            $( api.column( 2 ).footer() ).html(jum_kompaun1);

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

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

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

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

	            jum_kutipan2 = api.column( 11 ).data().reduce( function (a, b) {
	                    return parseFloat(a) + parseFloat(b);
	            }, 0 );
	            $( api.column( 11 ).footer() ).html(jum_kutipan2);
			},
			"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/current/compound') }}/"+$('#tahun1').val()+"/"+$('#tahun2').val()+"/"+$('#budget1').val()+"/"+$('#budget2').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();

	    	if($('#jabatan').val() == 'null' && $('#tahun1').val() == '' && $('#tahun2').val() == '' && $('#budget1').val() == '' && $('#budget2').val() == ''){
	    		alert('Sila pilih tahun1, tahun2, anggaran tahun1, anggaran tahun2, dan jabatan');
	    	}else {
	    		
	    		table.ajax.reload();
	    	}
	    	
	    });
	});
</script>
@endsection