 @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="#">Operation</a></li>
            <li><a href="#">Manage Operation</a></li>
            <li><a href="#">Cancellation</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-page">
                     <div class="pull-left">
                         <h3>Cancel Deposit</h3>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <form action="{{url('realty/report-cancel-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','required')) !!}
                     </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','required')) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                        <strong>Project</strong>{!! Form::select('project_id',$projects,null,['class'=>'form-control select2','id'=>'project_id','multiple']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                        <strong>Client</strong>{!! Form::select('client_id',$clients,null,['class'=>'form-control select2','id'=>'client_id','multiple']) !!}
                     </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('Client-Cancellation-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 table-responsive">
             <table id="datatable_cancel_deposit" class="table table-striped table-bordered table-hover nowrap">
                 <thead>
                     <tr>
                         <th>No</th>
                         <th>Deposit Date</th>
                         <th>Cancel Date</th>
                         <th>Project Name</th>
                         <th>Category</th>
                         <th>Item Code</th>
                         <th>Client Name</th>
                         <th>Agency Name</th>
                         <th>Sale Price</th>
                         <th>Amount Receive</th>
                         <th>Description</th>
                     </tr>
                 </thead>
                 <tbody class="tbody">

                 </tbody>
                 <tfoot class="tfoot">
                     <tr>
                         <td colspan="8" class="text-right">Total :</td>
                         <td></td>
                         <td></td>
                     </tr>
                 </tfoot>
             </table>
         </div>
 </div>

 @endsection @section('js')

 <script type="text/javascript">
     $(document).ready(function() {
         $('#main-spinner').show();
         $('#datatable_cancel_deposit').DataTable({
             "serverSide": true,
             'ordering':false,
             'searching':true,
             "scrollY":        "600px",
            "scrollCollapse": true,
             "lengthMenu": [
                 [20, 30, 50, 100, 200, 500, 1000],
                 [20, 30, 50, 100, 200, 500, 1000]
             ],
             ajax: "{{ route('datatable.get_cancel_deposit') }}",
             columns: [{
                     "data": "DT_RowIndex"
                 },
                 {
                     "data": "sale_date"
                 },
                 {
                     "data": "cancel_date"
                 },
                 {
                     "data": "project_name"
                 },
                 {
                     "data": "category_name"
                 },
                 {
                     "data": "item_name"
                 },
                 {
                     "data": "client_fullname"
                 },
                 {
                     "data": "agency_name"
                 },
                 {
                     "data": "sale_amount"
                 },
                 {
                     "data": "sale_receive"
                 },
                 {
                     "data": "cancel_des"
                 }
             ],
             "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 salePrice = api
                     .column(8)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);

                 var saleReceive = api
                     .column(9)
                     .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(salePrice));
                 $(api.column(9).footer()).html(numFormat(saleReceive));
             },
             "initComplete": function(settings, json) {
                 $('#main-spinner').hide();
             }
         });
     });

     function cancel_deposit(obj) {
         var id = $(obj).closest("tr").attr("id");
         $("#ps_id").val(id);
     }
 </script>
 <script type="text/javascript">
     function searching() {
         $('#datatable_cancel_deposit').DataTable().destroy();
         var start_date = $('.start_date').val();
         var end_date = $('.end_date').val();
         var project_id = $('#project_id').val();
         var client_id = $('#client_id').val();
         $('#main-spinner').show();
         $('#datatable_cancel_deposit').DataTable({
             "serverSide": true,
             'ordering':false,
             'searching':true,
             "lengthMenu": [
                 [20, 30, 50, 100, 200, 500, 1000],
                 [20, 30, 50, 100, 200, 500, 1000]
             ],
             ajax: {
                 method: 'POST',
                 url: "{{ route('datatable.get_cancel_deposit') }}",
                 async: false,
                 data: {

                     _token: '{{ csrf_token() }}',
                     start_date: start_date,
                     end_date: end_date,
                     project_id:project_id,
                     client_id:client_id
                 },
             },
             columns: [{
                     "data": "DT_RowIndex"
                 },
                 {
                     "data": "sale_date"
                 },
                 {
                     "data": "cancel_date"
                 },
                 {
                     "data": "project_name"
                 },
                 {
                     "data": "category_name"
                 },
                 {
                     "data": "item_name"
                 },
                 {
                     "data": "client_fullname"
                 },
                 {
                     "data": "agency_name"
                 },
                 {
                     "data": "sale_amount"
                 },
                 {
                     "data": "sale_receive"
                 },
                 {
                     "data": "cancel_des",
                     'name': 'nso007_cancel_deposit.cancel_des'
                 }
             ],
             "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 salePrice = api
                     .column(8)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);

                 var saleReceive = api
                     .column(9)
                     .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(salePrice));
                 $(api.column(9).footer()).html(numFormat(saleReceive));
             },
             "initComplete": function(settings, json) {
                 $('#main-spinner').hide();
             }
         });
     }
 </script>

 @endsection