@extends("admin.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">Free Reports </div>
      </div>
      <div class="card">
         <div class="card-body">
            <ul class="nav nav-tabs nav-danger" role="tablist">
               <li class="nav-item" role="presentation">
                  <a class="nav-link student_part active" data-bs-toggle="tab" href="#paid_fee_students" role="tab" aria-selected="true">
                     <div class="d-flex align-items-center">
                        <div class="tab-title">Paid Fee Student Report</div>
                     </div>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a class="nav-link  announc_class" data-bs-toggle="tab" href="#unpaid_fee_students" role="tab" aria-selected="false" >
                     <div class="d-flex align-items-center">
                        <div class="tab-title">Un-Paid Fee Student Report</div>
                     </div>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a class="nav-link  announc_class" data-bs-toggle="tab" href="#failed_fee_students" role="tab" aria-selected="false" >
                     <div class="d-flex align-items-center">
                        <div class="tab-title">Failed Fee Student Report</div>
                     </div>
                  </a>
               </li>
            </ul>
         </div>
      </div>

      <div class="card">
         <div class="card-body">
            <div class="row">
               <div class="col-3">
                  <div class="card border h-100">
                     <div class="select_heading p-3 bg-light border">
                        <h6 class="mb-0">Reports</h6>
                     </div>
                     <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                           <div id="student_freereport" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                 <ul class="nav nav-tabs nav-primary d-block border-0 sidetab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                       <b>Total Fees Amount</b> - ₹{{number_format($fee_data->total_fee_amount,2)}}
                                    </li>
                                    <li class="nav-item" role="presentation">
                                       <b>Paid Fees Amount</b> - ₹{{number_format($fee_data->total_pay_amount,2)}}
                                    </li>
                                    <li class="nav-item" role="presentation">
                                       <b>Remaining Fees Amount</b> - ₹{{number_format($fee_data->total_remaining_amount,2)}}
                                    </li>
                                    <hr>
                                    <li class="nav-itemmt-2" role="presentation">
                                       <b>Program</b> - {{$fee_data->pgrm_title}}
                                    </li>
                                    <li class="nav-item" role="presentation">
                                       <b>Class Code</b> - {{$fee_data->cls_title}}
                                    </li>
                                    <li class="nav-item" role="presentation">
                                       <b>Semester</b> - {{$fee_data->semester_name}}
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>                  
                     </div>
                     <div class="card-body">
                     </div>
                  </div>
               </div>
               <div class="col-md-9">
                  <div class="tab-content">
                     <div class="tab-pane fade show active" id="paid_fee_students" role="tabpanel">
                        <div class="search_form pb-3">                     
                           <div class="card">
                              <div class="card-body">
                                 <div class="search_result mt-3 border">
                                    <div class="d-flex mb-4 border-bottom bg-light border-bottom py-2 px-3 align-items-center">
                                       <div class="heading">
                                          <h6 class="mb-0">Paid Student Report</h6>
                                       </div>
                                    </div>
                                    <div class="table-responsive">
                                       <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                                          <thead>
                                             <tr>
                                                <th>Student ID</th>
                                                <th>Student Name</th>
                                                <th>Fee Amount</th>
                                                <th>Last Date</th>
                                                <th>Payment Status</th>
                                             </tr>
                                          </thead>
                                       </table>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="tab-pane fade show" id="unpaid_fee_students" role="tabpanel">
                        <div class="search_form pb-3">                     
                           <div class="card">
                              <div class="card-body">
                                 <div class="search_result mt-3 border">
                                    <div class="d-flex mb-4 border-bottom bg-light border-bottom py-2 px-3 align-items-center">
                                       <div class="heading">
                                          <h6 class="mb-0">Un-Paid Student Report</h6>
                                       </div>
                                    </div>
                                    <div class="table-responsive">
                                       <table id="dataTable_2" class="table table-striped table-bordered " style="width:100%">
                                          <thead>
                                             <tr>
                                                <th>Student ID</th>
                                                <th>Student Name</th>
                                                <th>Fee Amount</th>
                                                <th>Last Date</th>
                                                <th>Payment Status</th>
                                             </tr>
                                          </thead>
                                       </table>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="tab-pane fade show" id="failed_fee_students" role="tabpanel">
                        <div class="search_form pb-3">                     
                           <div class="card">
                              <div class="card-body">
                                 <div class="search_result mt-3 border">
                                    <div class="d-flex mb-4 border-bottom bg-light border-bottom py-2 px-3 align-items-center">
                                       <div class="heading">
                                          <h6 class="mb-0">Failed Student Report</h6>
                                       </div>
                                    </div>
                                    <div class="table-responsive">
                                       <table id="dataTable_3" class="table table-striped table-bordered " style="width:100%">
                                          <thead>
                                             <tr>
                                                <th>Student ID</th>
                                                <th>Student Name</th>
                                                <th>Fee Amount</th>
                                                <th>Last Date</th>
                                                <th>Payment Status</th>
                                             </tr>
                                          </thead>
                                       </table>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--end breadcrumb-->
   <hr/>
</div>
</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')),
      });
   
      $('.datepicker').datepicker({ 
         autoclose: true,
      });

      
      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('admin.paid_fee_raise_data_ajax_list') }}",
            'data': function(data){
                  
            }
         },
         'lengthMenu': [10, 20, 50, 100, 200, 500],
         'columns': [
            {data: 'id'}, 
            {data: 'first_name'}, 
            {data :'fee_amount'},
            {data :'last_date'},
            {data :'pay_status'},
         ],
         "order": [[0, 'asc' ]],
         "columnDefs": [
         { 
            "targets": [0,2,3], //first column / numbering column
            "orderable": false, //set not orderable
         }]
               

      });
      $('#datatable').on('page.dt', function() {
         $('#checkAll').prop("checked", false);
         $('.filed_check').prop("checked", false);
      });
      
      window.dataTable_2 = $('#dataTable_2').DataTable({
         'processing': true,
         'serverSide': true,
         'serverMethod': 'post',
         //'searching': false,
         'ajax': {
            'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'url': "{{ route('admin.unpaid_fee_raise_data_ajax_list') }}",
            'data': function(data){
                  
            }
         },
         'lengthMenu': [10, 20, 50, 100, 200, 500],
         'columns': [
            {data: 'id'}, 
            {data: 'first_name'}, 
            {data :'fee_amount'},
            {data :'last_date'},
            {data :'pay_status'},
         ],
         "order": [[0, 'asc' ]],
         "columnDefs": [
         { 
            "targets": [0,2,3], //first column / numbering column
            "orderable": false, //set not orderable
         }]
               

      });
      $('#datatable_2').on('page.dt', function() {
         $('#checkAll').prop("checked", false);
         $('.filed_check').prop("checked", false);
      });
      
      window.dataTable_3 = $('#dataTable_3').DataTable({
         'processing': true,
         'serverSide': true,
         'serverMethod': 'post',
         //'searching': false,
         'ajax': {
            'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            'url': "{{ route('admin.failed_fee_raise_data_ajax_list') }}",
            'data': function(data){
                  
            }
         },
         'lengthMenu': [10, 20, 50, 100, 200, 500],
         'columns': [
            {data: 'id'}, 
            {data: 'first_name'}, 
            {data :'fee_amount'},
            {data :'last_date'},
            {data :'pay_status'},
         ],
         "order": [[0, 'asc' ]],
         "columnDefs": [
         { 
            "targets": [0,2,3], //first column / numbering column
            "orderable": false, //set not orderable
         }]
               

      });
      $('#dataTable_3').on('page.dt', function() {
         $('#checkAll').prop("checked", false);
         $('.filed_check').prop("checked", false);
      });

   });
   
</script>
@endsection