 @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 Operation</a></li>
             <li><a href="#">Report Arrears</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 Arrear</h3>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <form action="{{url('realty/report-arrear-print')}}" method="POST">
         @csrf
         <div class="form-search">
             <div class="row">
                 <div class="col-xs-12 col-sm-4 col-md-4">
                     <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-4 col-md-4">
                     <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-4 col-md-4 ">
                     <div class="form-group">
                         <strong>Item Code</strong>
                         {!! Form::select('item_name', $items, null, ['class' => 'form-control select2 item_name']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-4 col-md-4 ">
                     <div class="form-group">
                         <strong>Project</strong>
                         {!! Form::select('projects', $project, null, ['class' => 'form-control select2 projects']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-4 col-md-4 ">
                     <div class="form-group">
                         <strong>Client</strong>
                         {!! Form::select('clients', $clients, null, ['class' => 'form-control select2 clients']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-4 col-md-4 ">
                     <div class="form-group">
                         <strong>Client Phone</strong>
                         {!! Form::text('client_phone',null, ['class' => 'form-control client-phone','placeholder'=>"Client Phone"]) !!}
                     </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="datatable_payment_client_report" class="table table-striped table-bordered table-hover nowrap">
                 <thead>
                     <tr>
                         <th>No</th>
                         <th>Date Payment</th>
                         <th>Project Name</th>
                         <th>Item Name</th>
                         <th>Client Name</th>
                         <th>Phone</th>
                         <th>Disbursement Date</th>
                         <th>Days Late</th>
                         <th>Principle OS</th>
                         <th>Principle Arrear</th>
                         <th>Interest Arrear</th>
                         <th>Penalty</th>
                     </tr>
                 </thead>
                 <tbody class="tbody"></tbody>
                 <tfoot class="tfoot">
                     <tr>
                         <td colspan="8" class="text-right">Total :</td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                     </tr>
                 </tfoot>
             </table>
         </div>
 </div>
 @endsection @section('js')

 <script type="text/javascript" src="{{asset('assets/controller/report-arrear-administrator.js')}}"></script>
 <script type="text/javascript">
     function searching() {
         $('#datatable_payment_client_report').DataTable().destroy();
         var start_date = $('.start_date').val();
         var end_date = $('.end_date').val();
         var project_id = $('.projects').val();
         var client_id = $('.clients').val();
         var item_id = $('.item_name').val();
         var client_phone = $('.client-phone').val();
         var index = $('#datatable_payment_client_report').DataTable({
             "lengthMenu": [
                 [20, 25, 50, 100, 500],
                 [20, 25, 50, 100, 500]
             ],
             serverSide: true,
             searching: true,
             ajax: {
                 type: "POST",
                 url: "{{route('report-arrear-lish')}}",
                 data: {
                     _token: "{{csrf_token()}}",
                     start_date: start_date,
                     end_date: end_date,
                     project_id: project_id,
                     client_id: client_id,
                     item_id: item_id,
                     client_phone: client_phone
                 }
             },
             dom: 'Blfrtip',
             buttons: [
                 'copyHtml5',
                 'excelHtml5',
                 'csvHtml5',
                 'pdfHtml5'
             ],
             columns: [{
                     data: 'DT_RowIndex'
                 },
                 {
                     data: 'loanprocess_datepayment'
                 },
                 {
                     data: 'project_name'
                 },
                 {
                     data: 'item_name'
                 },
                 {
                     data: 'client_fullname'
                 },
                 {
                     data: 'client_phone1'
                 },
                 {
                     data: 'loan_disbursement'
                 },
                 {
                     data: 'day_late'
                 },
                 {
                     data: 'loan_amountos',
                     'className': 'text-right'
                 },
                 {
                     data: 'loan_principle',
                     'className': 'text-right'
                 },
                 {
                     data: 'loan_interest',
                     'className': 'text-right'
                 },
                 {
                     data: 'penalty',
                     'className': 'text-right'
                 }
             ],
             "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 principleos = api
                     .column(8)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);

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

                 var interest_arrear = api
                     .column(10)
                     .data()
                     .reduce(function(a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);
                 var penalty_arrear = api
                     .column(11)
                     .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(principleos));
                 $(api.column(9).footer()).html(numFormat(principle_arrear));
                 $(api.column(10).footer()).html(numFormat(interest_arrear));
                 $(api.column(11).footer()).html(numFormat(penalty_arrear));
             },
         });
         index.on('order.dt search.dt', function() {
             index.column(0, {
                 search: 'applied',
                 order: 'applied'
             }).nodes().each(function(cell, i) {
                 cell.innerHTML = i + 1;
             });
         }).draw();
         $.fn.dataTable.ext.errMode = 'throw';
     }
 </script>
 @endsection