@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-body">
        <h3 class="card-title">Due Payments Report</h3>
        <div class="table-responsive">
            <table class="table table-bordered" id="users-table">
                    <thead>
                        <tr>
                            <th>S. No.</th>
                            <th>Customer Name</th>                            
                            <th>Customer ID</th>
                            <th>Amount</th>
                            <th>Name</th>
                            <th>Business Type</th>
                            <th>Type</th>
                            <th>Due Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
        </div>
    </div>
</div>
<!-- The Modal -->
<div class="modal fade" id="loadModalAjax" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Deal Details</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<style type="text/css">
    @media (min-width: 768px) {
      .modal-xl {
        width: 90%;
       max-width:1200px;
      }
    }
</style>

@stop

@section('javascript')
    <script>
        var t = $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! url('/') !!}/payments/dueEMIReportAnyData',
                dom: 'frtip',
                'lengthMenu': [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'full_name', name: 'full_name' },
                    { data: 'username', name: 'username' },
                    { data: 'amount', name: 'amount' },
                    { data: 'name', name: 'name' },
                    { data: 'type_name', name: 'type_name' },
                    { data: 'comment', name: 'comment' },
                    { data: 'due_date', name: 'due_date' },
                    { data: 'action', name: 'action' },
                ],
                "columnDefs": [
                    {
                        "render": function ( data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                         },
                        "targets": 0
                    },
                ],
                'order': [[1, 'asc']],
                drawCallback: function( settings ) {
                    openModal();
                  }
            });
            
            function openModal(){
              $('.openModal').click(function(){
                 $('#loadModalAjax .modal-body').load('{{ url('/') }}/payments/addpaymentsajax/' + $(this).attr('data-id'),function(result){
                    $('#loadModalAjax').modal({show:true});
                  //init_validation('#updateStudentForm', rules, messages);
                   });
              });
              $('.openModalInvoices').click(function(){
                 $('#loadModalAjax .modal-content').load('/student_invoices_modal.php?id=' + $(this).attr('data-id'),function(result){
                    $('#loadModalAjax').modal({show:true});
                  //init_validation('#updateStudentForm', rules, messages);
                   });
              });
            }

    </script>
@endsection
