@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>Tahun <code>*</code></b></label>
                		<input type="month" name="tahun" id="tahun" 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</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">
							<!-- Nav tabs -->
							<ul class="nav nav-tabs md-tabs" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" data-toggle="tab" href="#keping" role="tab">Keping</a>
									<div class="slide"></div>
								</li>
								<li class="nav-item">
									<a class="nav-link" data-toggle="tab" href="#jumlah" role="tab">Jumlah</a>
									<div class="slide"></div>
								</li>
							</ul>

							<!-- Tab panes -->
							<div class="tab-content card-block">
								<div class="tab-pane active" id="keping" role="tabpanel">
									<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">BIL</th>
													<th rowspan="2">NAMA ANGGOTA</th>
													<th colspan="12">Bulan</th>
													<th rowspan="2">JUM</th>
												</tr>
												<tr>
													<th>JAN</th>
												  	<th>FEB</th>
												  	<th>MAC</th>
												  	<th>APRIL</th>
												  	<th>MEI</th>
												  	<th>JUN</th>
												  	<th>JULAI</th>
												  	<th>OGOS</th>
												  	<th>SEPT</th>
												  	<th>OKT</th>
												  	<th>NOV</th>
												  	<th>DIS</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th></th>
													<th>JUMLAH BESAR</th>
												  	<th>FEB</th>
												  	<th>MAC</th>
												  	<th>APRIL</th>
												  	<th>MEI</th>
												  	<th>JUN</th>
												  	<th>JULAI</th>
												  	<th>OGOS</th>
												  	<th>SEPT</th>
												  	<th>OKT</th>
												  	<th>NOV</th>
												  	<th>DIS</th>
												  	<th>DIS</th>
												  	<th>JUM</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
								<div class="tab-pane" id="jumlah" role="tabpanel">
									<div class="dt-responsive table-responsive">
										<table id="reportJ" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
											<thead>
												<tr>
													<th rowspan="2">BIL</th>
													<th rowspan="2">NAMA ANGGOTA</th>
													<th colspan="12">Bulan</th>
													<th rowspan="2">JUM</th>
												</tr>
												<tr>
													<th>JAN</th>
												  	<th>FEB</th>
												  	<th>MAC</th>
												  	<th>APRIL</th>
												  	<th>MEI</th>
												  	<th>JUN</th>
												  	<th>JULAI</th>
												  	<th>OGOS</th>
												  	<th>SEPT</th>
												  	<th>OKT</th>
												  	<th>NOV</th>
												  	<th>DIS</th>
												</tr>
											</thead>
											<tfoot>
												<tr>
													<th></th>
													<th>JUMLAH BESAR</th>
												  	<th>FEB</th>
												  	<th>MAC</th>
												  	<th>APRIL</th>
												  	<th>MEI</th>
												  	<th>JUN</th>
												  	<th>JULAI</th>
												  	<th>OGOS</th>
												  	<th>SEPT</th>
												  	<th>OKT</th>
												  	<th>NOV</th>
												  	<th>DIS</th>
												  	<th>DIS</th>
												  	<th>JUM</th>
												</tr>
											</tfoot>
										</table>
									</div>
								</div>
							</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;
	$(document).ready(function() {

	    table1 = $('#reportK').DataTable({
	    	"ordering": false,
	    	"searching": false,
	    	"lengthChange": false,
	    	"pageLength": -1,
	    	"paging": false,
	    	"processing": true,
	    	"serverSide": true,
	    	"ajax": {
			    "url": "{{ url('api/get/statistic-compound/enforcer') }}",
			    "data": {
			        "year": function() { return $('#tahun').val() },
			        "jabatan": function() { return $('#jabatan').val() },
			        "jenis": "keping",
			        "current_id": current_id,
			    }
			},
			"columns": [
				{ "data": "index", "name": "index" },
				{ "data" : "name", "name": "name" },
				{ "data": "jan", "jan": "kpd" },
				{ "data": "feb", "name": "feb" },
				{ "data": "mac", "name": "mac" },
				{ "data": "apr", "name": "apr" },
				{ "data": "mei", "name": "mei" },
				{ "data": "jun", "name": "jun" },
				{ "data": "july", "name": "july" },
				{ "data": "ogos", "name": "ogos" },
				{ "data": "sept", "name": "sept" },
				{ "data": "okt", "name": "okt" },
				{ "data": "nov", "name": "nov" },
				{ "data": "dis", "name": "dis" },
				{ "data": "total", "name": "total" },
			],
			"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 jan,feb,mar,apr,mei,jun,jul,ogos,sept,okt,nov,dis,jum;
			 	jan = api.column( 2 ).data().reduce( function (a, b) {
	                    return parseFloat(a) + parseFloat(b);
	            }, 0 );
	            $( api.column( 2 ).footer() ).html(jan);

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

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

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

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

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

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

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

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

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

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

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

	            jum = api.column( 14 ).data().reduce( function (a, b) {
	                    return parseFloat(a) + parseFloat(b);
	            }, 0 );
	            $( api.column( 14 ).footer() ).html(jum);
			},
			"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/enforcer') }}/"+$('#tahun').val()+"/"+$('#jenis').val()+"/"+$('#jabatan').val();
				    $('#link').html('<a target="_blank" href="'+link+'" class="btn btn-primary btn-sm waves-effect waves-light">Excel</a>');
				}
			},
	    });

		table2 = $('#reportJ').DataTable({
	    	"ordering": false,
	    	"searching": false,
	    	"lengthChange": false,
	    	"pageLength": -1,
	    	"paging": false,
	    	"processing": true,
	    	"serverSide": true,
	    	"ajax": {
			    "url": "{{ url('api/get/statistic-compound/enforcer') }}",
			    "data": {
			        "date": function() { return $('#tahun').val() },
			        "jabatan": function() { return $('#jabatan').val() },
			        "jenis": "jumlah",
			        "current_id": current_id,
			    }
			},
			"columns": [
				{ "data": "index", "name": "index" },
				{ "data" : "name", "name": "name" },
				{ "data": "jan", "jan": "kpd" },
				{ "data": "feb", "name": "feb" },
				{ "data": "mac", "name": "mac" },
				{ "data": "apr", "name": "apr" },
				{ "data": "mei", "name": "mei" },
				{ "data": "jun", "name": "jun" },
				{ "data": "july", "name": "july" },
				{ "data": "ogos", "name": "ogos" },
				{ "data": "sept", "name": "sept" },
				{ "data": "okt", "name": "okt" },
				{ "data": "nov", "name": "nov" },
				{ "data": "dis", "name": "dis" },
				{ "data": "total", "name": "total" },
			],
			"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 jan,feb,mar,apr,mei,jun,jul,ogos,sept,okt,nov,dis,jum;
			 	jan = api.column( 2 ).data().reduce( function (a, b) {
	                    return parseFloat(a) + parseFloat(b);
	            }, 0 );
	            $( api.column( 2 ).footer() ).html(jan);

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

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

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

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

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

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

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

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

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

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

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

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

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

	    	if($('#tahun').val() == 'null' || $('#jabatan').val() == 'null'){
	    		alert('Sila pilih tahun dan jabatan');
	    	}else {
	    		console.log("tahun " + $('#tahun').val());
	    		table1.ajax.reload();
	    		table2.ajax.reload();
	    	}

	    });
	});
</script>
@endsection