@extends('adminlte::page') @section('content')
<?php Fun::lang() ?>
<div class="title-page">
	<div class="page-bar">
			<ul class="page-breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
			<li><a href="#">Reports</a></li>
			<li><a href="#">Report Construction</a></li>
			<li><a href="#">Report Budget & Actual Use</a></li>
			</ul>
	</div>
</div>
<div class="page">
	<div class="top-content">
		<div class="row">
		<div class="col-sm-12 col-xs-12">
			<div class="title-add">
			<div class="pull-left">
				<h3>Report Budget & Actual Use</h3>
			</div>
			</div>

		</div>
		</div>
	</div>
   	<form action="{{route('construction-report.budget_actual_use')}}" method="POST">
     @csrf
		<div class="form-search">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
						<strong>Form Date</strong>
						{!! Form::text('start_date', null, array('placeholder' => 'Start Date','class' => 'form-control date_picker start_date','autocomplete' => 'off')) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
						<strong>To Date</strong>
						{!! Form::text('end_date', null, array('placeholder' => 'End Date','class' => 'form-control date_picker end_date','autocomplete' => 'off')) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
						<strong>Other Type</strong>
						{!! Form::text('other_type', null, array('placeholder' => 'Other Type','class' => 'form-control','autocomplete' => 'off')) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
						<strong>Title</strong>
						{!! Form::text('title', null, array('placeholder' => 'Title','class' => 'form-control','autocomplete' => 'off')) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
					  <strong>Project</strong>
					  {!! Form::select('project_id', $projects, null, ['class' => 'form-control select2 projects']) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6 ">
					<div class="form-group">
					  <strong>Zone</strong>
					  {!! Form::select('zone_id', $zones, null, ['class' => 'form-control select2 zone_id']) !!}
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 text-right">
					<button type="button" class="button_primary btn-sm search" onclick="searching()"><span class="fa fa-search"> Search</span></button>&nbsp
					<button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
				</div>
			</div>
		</div>
    {!! Form::close() !!}
    <div class="box-body table-responsive">
       	<table id="purchase-order-datatable" class="table table-striped table-bordered table-hover nowrap" width="100%">
			<thead>
				<tr>
					<th>NO</th>
					<th>Date</th>
					<th>Other Type</th>
					<th>Project</th>
					<th>Zone</th>
					<th>Prepared By</th>
					<th>Title</th>
					<th>Status Finish</th>
					<th>BOQ Labour</th>
					<th>BOQ Material</th>
					<th>Actual Labour</th>
					<th>Actual Material</th>
					<th>Labour Balance</th>
					<th>Material Balance</th>
				</tr>
			</thead>
			<tbody class="tbody"></tbody>
			<tfoot class="tfoot">
				<tr>
					<td colspan="8" class="text-right">Total :</td>
					<td class="text-left"></td>
					<td class="text-left"></td>
					<td class="text-left"></td>
					<td class="text-left"></td>
					<td class="text-left"></td>
					<td class="text-left"></td>
				</tr>
			</tfoot>
       	</table>
    </div>
</div>
 @endsection @section('js')
 <script type="text/javascript">
     $(document).ready(function() {
		$('#main-spinner').show();
		$('#purchase-order-datatable').DataTable({
			ordering: false,
			"serverSide": true,
			"scrollY":"600px",
			"scrollCollapse": true,
			"scrollX": true,
			"lengthMenu": [
				[20, 25, 50, 100, 500,"All"],
				[20, 25, 50, 100, 500,-1]
			],
			ajax: {
				url:"{{route('construction-report.budget_actual_use')}}",
				type:"GET",
				data:function(d){
						d.start_date = $("input[name=start_date]").val();
						d.end_date = $("input[name=end_date]").val();
						d.other_type = $("input[name=other_type]").val();
						d.title = $("input[name=title]").val();
						d.project_id = $("select[name=project_id]").val();
						d.zone_id = $("select[name=zone_id]").val();
				}
            },
			columns: [
				{
					data: 'DT_RowIndex'
				},{
					data: 'date'
				}
				,{
					data: 'building_type'
				}
				,{
					data: 'project_name'
				}
				,{
					data: 'zone_name'
				}
				,{
					data: 'prepared_by'
				} ,{
					data: 'title'
				}
				,{
					data: 'status_finish'
				}
				,{
					data: 'boq_labour'
				}
				,{
					data: 'boq_material'
				} ,
				{
					data: 'actual_labour'
				},
				{
					data: 'actual_material'
				},
				{
					data: 'labour_balance'
				},
				{
					data: 'material_balance'
				}
			],
			"initComplete": function(settings, json) {
				$('#main-spinner').hide();
			},
			"footerCallback": function(row, data, start, end, display) {
				var api = this.api(),
				data;
				var intVal = function(i) {
				return typeof i === 'string' ?
					i.replace(/[\$,]/g, '') * 1 :
					typeof i === 'number' ?
					i : 0;
				};

				var boq_labour = api
					.column(8)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var boq_material = api
					.column(9)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var actual_labour = api
					.column(10)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var actual_material = api
					.column(11)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var labour_balance = api
					.column(12)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var material_balance = api
					.column(13)
					.data()
					.reduce(function(a, b) {
						return intVal(a) + intVal(b);
					}, 0);

				var numFormat = $.fn.dataTable.render.number('\,', '.', 2, '$ ').display;
				$(api.column(8).footer()).html(numFormat(boq_labour));
				$(api.column(9).footer()).html(numFormat(boq_material));
				$(api.column(10).footer()).html(numFormat(actual_labour));
				$(api.column(11).footer()).html(numFormat(actual_material));
				$(api.column(12).footer()).html(numFormat(labour_balance));
				$(api.column(13).footer()).html(numFormat(material_balance));
			},
		});
		$.fn.dataTable.ext.errMode = 'throw';       
    });
    function searching(){
      $('#purchase-order-datatable').DataTable().draw(true);
    }
 </script>
 @endsection