 @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="#">Report Project Owner</a></li>
             <li><a href="#">Report Deposit</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 Deposit</h3>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <form action="{{url('realty/report-view-deposit-print')}}" method="POST">
         @csrf
         <div class="form-search">
             <div class="row">
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Start 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-3 col-md-3">
                     <div class="form-group">
                         <strong>End 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-3 col-md-3">
                     <div class="form-group">
                         <strong>Project Name</strong>
                         {!! Form::select('project_id', $projects, null, ['class' => 'form-control select2 form-control project_name']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Item Name</strong>
                         {!! Form::select('item_id', $item, null, ['class' => 'form-control select2 form-control item_name']) !!}
                     </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
                     @can('Deposit-Report-Print')
                     <button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
                     @endcan
                 </div>
             </div>
         </div>
         {!! Form::close() !!}
         <div class="box-body">
             <div class="table-responsive">
                 <table id="datatable_report_booking" class="table table-striped table-bordered table-hover nowrap">
                     <thead>
                         <tr>
                             <th>No</th>
                             <th>Name</th>
                             <th>Phone</th>
                             <th>Address</th>
                             <th>Project Name</th>
                             <th>Category</th>
                             <th>Item Code</th>
                             <th>Street No</th>
                             <th>House No</th>
                             <th>Zone</th>
                             <th>House Size</th>
                             <th>Land Size</th>
                             <th>Sale Price</th>
                             <th>Deposit</th>
                             <th>Remain Amount</th>
                             <th>Sale Date</th>
                             <th>Contract Date</th>
                             <th>User type</th>
                             <th>Reference</th>
                             <th>Status</th>
                         </tr>
                     </thead>
                     <tbody class="tbody"></tbody>
                     <tfoot class="tfoot">
                         <tr>
                             <td colspan="12" style="text-align: right;">Total :</td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                         </tr>
                     </tfoot>
                 </table>
             </div>
         </div>
 </div>
 @endsection @section('js')

 <script type="text/javascript">
     $(document).ready(function() {
         $('.main-spinner').show();
         $('#datatable_report_booking').DataTable({
             serverSide: true,
             ajax: "{{ route('datatable.get_report_booking') }}",
             dom: 'Blfrtip',
             buttons: [
                 'copyHtml5',
                 'excelHtml5',
                 'csvHtml5',
                 'pdfHtml5'
             ],
             columns: [

                 {
                     data: 'DT_RowIndex'
                 },
                 {
                     data: 'client_name'
                 },
                 {
                     data: 'client_phone1'
                 },
                 {
                     data: 'client_address'
                 },
                 {
                     data: 'project_name'
                 },
                 {
                     data: 'category_name',
                     width: '5px'
                 },
                 {
                     data: 'item_name'
                 },
                 {
                     data: 'item_street'
                 },
                 {
                     data: 'item_house'
                 },
                 {
                     data: 'zone_name'
                 },
                 {
                     data: 'house_size'
                 },
                 {
                     data: 'land_size'
                 },
                 {
                     data: 'item_price',
                     "className": 'text-right'
                 },
                 {
                     data: 'deposit_amount',
                     "className": 'text-right'
                 },
                 {
                     data: 'remain_amount',
                     "className": 'text-right'
                 },
                 {
                     data: 'sale_date'
                 },
                 {
                     data: 'contract_date'
                 },
                 {
                     data: 'user_type'
                 },
                 {
                     data: 'agency_name'
                 },
                 {
                     data: 'status'
                 },

             ],
             "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 item_price_Total = api
                     .column(12)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);

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

                 var remain_Total = api
                     .column(14)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);
                 var numFormat = $.fn.dataTable.render.number('\,', '.', 2, '$ ').display;
                 $(api.column(12).footer()).html(numFormat(item_price_Total));
                 $(api.column(13).footer()).html(numFormat(receive_Total));
                 $(api.column(14).footer()).html(numFormat(remain_Total));
             },
         });
     });
 </script>
 <script type="text/javascript">
     function searching() {
        $('#datatable_report_booking').DataTable().destroy();
         var start_date = $('.start_date').val();
         var end_date = $('.end_date').val();
         var projects = $('.project_name').val();
         var item_name = $('.item_name').val();
         $('#datatable_report_booking').DataTable({
             serverSide: true,
             dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
             ajax: {
                 type: "POST",
                 url: "{{ route('datatable.get_report_booking') }}",
                 data: {
                     _token: '{{ csrf_token() }}',
                     project_id: projects,
                     start_date: start_date,
                     end_date: end_date,
                     item_id:item_name
                 }
             },
             columns: [

                 {
                     data: 'DT_RowIndex'
                 },
                 {
                     data: 'client_name'
                 },
                 {
                     data: 'client_phone1'
                 },
                 {
                     data: 'client_address'
                 },
                 {
                     data: 'project_name'
                 },
                 {
                     data: 'category_name',
                     width: '5px'
                 },
                 {
                     data: 'item_name'
                 },
                 {
                     data: 'item_street'
                 },
                 {
                     data: 'item_house'
                 },
                 {
                     data: 'zone_name'
                 },
                 {
                     data: 'house_size'
                 },
                 {
                     data: 'land_size'
                 },
                 {
                     data: 'item_price',
                     "className": 'text-right'
                 },
                 {
                     data: 'sale_receive',
                     "className": 'text-right'
                 },
                 {
                     data: 'remain_amount',
                     "className": 'text-right'
                 },
                 {
                     data: 'sale_date'
                 },
                 {
                     data: 'contract_date'
                 },
                 {
                     data: 'user_type'
                 },
                 {
                     data: 'agency_name'
                 },
                 {
                     data: 'status'
                 },

             ],
             "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 item_price_Total = api
                     .column(12)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);

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

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


                 var numFormat = $.fn.dataTable.render.number('\,', '.', 2, '$ ').display;
                 $(api.column(12).footer()).html(numFormat(item_price_Total));
                 $(api.column(13).footer()).html(numFormat(receive_Total));
                 $(api.column(14).footer()).html(numFormat(remain_Total));
             },
         });
     }
 </script>

 @endsection