@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;
	}

	.panel-group .panel {
	    margin-bottom: 0;
	    overflow: hidden;
	    border-radius: 4px;
	}
	.panel-default {
    	border-color: #ddd;
	}
	.panel-default>.panel-heading {
	    color: #333;
	    background-color: #f5f5f5;
	    border-color: #ddd;
	}
	.panel-title {
	    margin-top: 0;
	    margin-bottom: 0;
	    font-size: 16px;
	    color: inherit;
	}

	.panel-body .table>thead>tr>th, .panel-body .table>tbody>tr>th, .panel-body .table>tfoot>tr>th, .panel-body .table>thead>tr>td, .panel-body .table>tbody>tr>td, .panel-body .table>tfoot>tr>td {
	    padding: 8px;
	    line-height: 1.428571429;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	}
	.glyphicon { margin-right:10px; }
	.panel-body { padding:0px; }
	.panel-body table tr td { padding-left: 15px }
	.panel-body .table {margin-bottom: 0px; }

	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-12">
            <div class="card">
                <div class="card-block">
                    <!-- <form class="main"> -->

                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <label><input id="checkDate" type="checkbox" />&nbsp;<b>Tarikh</b></label>
                             </div>
                            <div class="col-lg-3">
                                <input type="date" id="start_date" class=" form-control form-control-sm" value="" />
                            </div>
                            <span><b>-</b></span>
                            <div class="col-lg-3">
                                <input type="date" id="end_date" class="form-control form-control-sm" value="" />
                            </div>
                        </div>
 
                        <div class="form-group" style="margin-top: 1.25em">
							<button type="submit" id="jana" class="btn btn-info btn-sm waves-effect waves-light">Jana Report</button>
						</div>

                    <!-- </form> -->
                </div>
            </div>
        </div>
    </div>

	<div class="row">
		<div class="col-sm-12">
			<div class="card">
				<div class="card-header">
					<h5>Laporan Pengeluaran Kompaun Mengikut Kesalahan</h5>
				</div>
				<div class="card-block">
					<div class="dt-responsive table-responsive">
						<table id="report" class="table table-sm table-striped table-bordered nowrap" style="width:100%">
							<thead>
								<tr>
									<th width="20">#</th>
									<th>Kesalahan</th>
									<th width="80">Jumlah Kompaun Keluar</th>
									<th width="80">Amaun Kompaun (RM)</th>
								  	<th width="80">Jumlah Bayar</th>
								  	<th width="80">Amaun Bayar (RM)</th>
								  	<th width="80">Jumlah Kompaun Belum Bayar</th>
								  	<th width="80">Amaun Tungakkan (RM)</th>
								  	<th width="80">Kompaun Batal</th>
								  	<th width="80">Amaun Batal (RM)</th>
								  	<th width="80">Kompaun Kurang</th>
								  	<th width="80">Amaun Kurang (RM)</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th width="20">#</th>
									<th>Kesalahan</th>
									<th width="80">Jumlah Kompaun Keluar</th>
									<th width="80">Amaun Kompaun (RM)</th>
								  	<th width="80">Jumlah Bayar</th>
								  	<th width="80">Amaun Bayar (RM)</th>
								  	<th width="80">Jumlah Kompaun Belum Bayar</th>
								  	<th width="80">Amaun Tungakkan (RM)</th>
								  	<th width="80">Kompaun Batal</th>
								  	<th width="80">Amaun Batal (RM)</th>
								  	<th width="80">Kompaun Kurang</th>
								  	<th width="80">Amaun Kurang (RM)</th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')
<script type="text/javascript">
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	$(document).ready(function() {
		var origin   = window.location.origin; 

		$(".theme-loader").animate({
			opacity: "0"
		},1000);

		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		var checkdate = false;
		$('#checkDate').change(function () {
			checkdate = !checkdate;

			if(checkdate){
				$('#start_date').prop('required',true);
			}else{
				$('#start_date').prop('required',false);
			}
		});

		$('#jana').click(function () {

			$('#report').DataTable().clear().destroy();

			var url = "";

			if($('#start_date').val() == '' && checkdate == false){
				url = "{{ url('api/report/compound/list/null/null') }}";
			}else if($('#start_date').val() != '' && checkdate == true){
				if($('#end_date').val() == ''){
					url = "{{ url('api/report/compound/list') }}/"+$('#start_date').val()+"/null";
				}else{
					url = "{{ url('api/report/compound/list') }}/"+$('#start_date').val()+"/"+$('#end_date').val();
				}
			}

			var table = $('#report').DataTable({
				// "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
				"pageLength": -1,
				"dom": "Bfrtip",
				"serverSide": true,
				"processing": true,
				"ajax": url,
				"columns": [
				{ "data": "DT_RowIndex","name": "DT_RowIndex"},
				{ "data": "kesalahan","name": "kesalahan"},
				{ "data": "jumlahK","name": "jumlahK"},
				{ "data": "amaunK", "name": "amaunK" },
				{ "data": "jumlahB", "name": "jumlahB" },
				{ "data": "amaunB", "name": "amaunB" },
				{ "data": "belumB", "name": "belumB"},
				{ "data": "amaunT", "name": "amaunT"},
				{ "data": "kBatal","name": "kBatal"},
				{ "data": "amaunBatal","name": "amaunBatal"},
				{ "data": "kompaunKurang","name": "kompaunKurang"},
				{ "data": "amaunKurang","name": "amaunKurang"},
				],			
				"language": {
					"paginate": {
						"previous": "Sebelumnya",
						"next": "Seterusnya"
					},
					"sLengthMenu": "Tunjukkan _MENU_ entri",
					"zeroRecords": "Tiada Data Ditemui",
					"infoEmpty": "Tiada Rekod Yang Wujud",
					"infoFiltered": "(Ditapis daripada _MAX_ jumlah rekod)",
					"info": "Tunjuk _START_ hingga _END_ daripada _TOTAL_ entri",
					"sSearch": "Cari:",
				},
				"buttons": [{
					"extend": "collection",
					"text": "Eksport",
					"buttons": [
					"copy",
					'excel',
					'csv',
					'pdf',
					'print'
					]
				}]
			});
		});
	});
</script>
@endsection