@extends("parents.layouts.app")
@section("style")
<link href="{{ asset('assets/plugins/datatable/css/dataTables.bootstrap5.min.css') }}" rel="stylesheet" />
@endsection
@section("wrapper")
<!--start page wrapper -->
<div class="page-wrapper">
   <div class="page-content">
      <!--breadcrumb-->
      <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
         <div class="breadcrumb-title pe-3">Fees Raise</div>
      </div>
      <div class="card">
         <div class="card-body">
            <div class="tab-content py-3">
               <div class="tab-pane fade show active" id="manage_search" role="tabpanel">                  
                  <div class="table-responsive mt-5">
                     <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                        <thead>
                           <tr>
                              <th>Student Id</th>
                              <th>Program</th>
                              <th>Semester</th>
                              <th>Class Codes</th>
                              <th>Student Name</th>
                              <th>Fees Amount</th>
                              <th>Payment Status</th>
                              <th>Last Date</th>
                              <th>Action</th>
                           </tr>
                        </thead>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--end breadcrumb-->
   <hr/>
</div>
<!--end page wrapper -->
@endsection
@section("page-js-script")
<script src="{{ asset('assets/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
   $(document).ready(function(){
      $(".single-select").select2({
         theme: 'bootstrap4',
         width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
         placeholder: $(this).data('placeholder'),
         allowClear: Boolean($(this).data('allow-clear')),
      });
      

      window.dataTable = $('#dataTable').DataTable({
         'processing': true,
         'serverSide': true,
         'serverMethod': 'post',
         //'searching': false,
         'ajax': {
            'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'url': "{{ route('parent.parent_fee_raise_data_ajax_list') }}",
            'data': function(data){
                  
            }
         },
         'lengthMenu': [10, 20, 50, 100, 200, 500],
         'columns': [
            {data: 'id'}, 
            {data: 'programs'}, 
            {data :'semester'},
            {data :'class_codes'},
            {data :'name'},
            {data :'fee_amt'},
            {data :'payment_status'},
            {data :'date'},
            {data: 'action' },
         ],
         "order": [[0, 'asc' ]],
         "columnDefs": [
         { 
            "targets": [0,2,3,4,6], //first column / numbering column
            "orderable": false, //set not orderable
         }]
               

      });
      $('#datatable').on('page.dt', function() {
         $('#checkAll').prop("checked", false);
         $('.filed_check').prop("checked", false);
      });
   });
   
   function makeFeePayment(e,id,st_id,amt){
      if(confirm('Are you sure to make payment of ₹'+amt+'?')){
         $.ajax({
            'headers': {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }, 
            url:"{{ route('parent.fee_payment_view') }}",
            type:"POST",
            data:{id:id,st_id:st_id},
            dataType:"json",
            success:function(data){
               if(data.status == 1){
                  $('#modal-lg .modal-content').html(data.view);
                  $('#modal-lg').modal('show');
                  // toastr.success(data.msg,'Success');
                  // dataTable.draw();
               }else{
                  toastr.info(data.msg,'Info');
                  dataTable.draw();
               }
            }
         });
      }
   }
   
   function paycheckout(e,id){
      $.ajax({
        url:"{{ route('parent.paycheckout') }}",
        type:"POST",
        data:$('#'+id).serialize(),
        dataType:"json",
        success:function(res){
          if(res.status == 1){
            $('body .user_info_div').hide();
            $('body .checkout_div').show();
            $('body .checkout_div').html(res.view);
          }
        } 
      });
   }

   function cancel_payment(e){
      $('body .user_info_div').show();
      $('body .checkout_div').hide();
   }

</script>
@endsection