@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">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="">
                     <form onsubmit="submitFeeData(this); return false;">
                        <div class="row">
                           <div class="col-md-10">
                              <div class="form-group mt-3">
                                 <label class="form-label">Select Program<sup class="text-danger">*</sup></label>
                                 <select class="single-select form-select" name="program" id="program"  data-placeholder="Select Program">
                                       <option value="">--Select Program--</option>
                                       @foreach($programs as $program)
                                          <option value="{{$program->id}}">{{$program->title}}</option>
                                       @endforeach
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-10">
                              <div class="form-group mt-3">
                                 <label class="form-label">Select Semester<sup class="text-danger">*</sup></label>
                                 <select class="single-select form-select" name="semester" id="semester"  data-placeholder="Select Semester">
                                       <option value="">--Select Semester--</option>
                                       @foreach($semesters as $semester)
                                          <option value="{{$semester->id}}">{{$semester->title}}</option>
                                       @endforeach
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-10">
                              <div class="form-group mt-3">
                                 <label class="form-label">Select Class Codes<sup class="text-danger">*</sup></label>
                                 <select class="single-select form-select" name="class_codes" id="class_codes" data-placeholder="Select Class Codes" onchange="selectFeeData(this,'classStudents','class_students','students'); return false;">
                                       <option value="">--Select Class Codes--</option>
                                       @foreach($classCodes as $classCode)
                                          <option value="{{$classCode->id}}">{{$classCode->title}}</option>
                                       @endforeach
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-10 classStudents" style="display:none;">
                              <div class="form-group mt-3">
                                 <label class="form-label">Select Students<sup class="text-danger">*</sup></label>

                                 <div id="radioCheck">
                                    <input type="radio" id="all" name="class_students[]" value="0" onchange="select_data(this); return false;" checked>
                                    <label for="all">All</label>
                                    <!-- <input type="radio" id="selected_students" name="class_students[]" value="1" onchange="select_data(this); return false;"> -->
                                    <!-- <label for="selected_students">Selected Students</label> -->
                                 </div>

                                 <div id="selectStudents">
                                    <select class="single-select form-select" name="class_students[]" id="class_students" data-placeholder="Select Students" multiple>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-md-5">
                              <div class="form-group mt-3">
                                 <label class="form-label">Fees Amount</label>
                                 <div class="position-relative">
                                    <input type="number" class="form-control pr-5" id="fee_amt" name="fee_amount" placeholder="Fees Amount" value="">
                                 </div>
                              </div>
                           </div>
                           <div class="col-md-5">
                              <div class="form-group mt-3">
                                 <label class="form-label">Last Date</label>
                                 <div class="position-relative">
                                    <input type="date" class="form-control pr-5" id="last_date" name="last_date" placeholder="Last date" value="">
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="mt-3">
                           <button type="submit" class="btn btn-primary btn-sm py-1 submit_data">
                                 Submit
                           </button>
                           <button type="reset" class="btn btn-secondary btn-sm py-1">
                           Reset
                           </button>
                        </div>
                     </form>
                  </div>
                  
                  <div class="table-responsive mt-5">
                     <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                        <thead>
                           <tr>
                              <th>Id</th>
                              <th>Program</th>
                              <th>Semester</th>
                              <th>Class Codes</th>
                              <th>Total Fees Amount</th>
                              <th>Paid Fees Amount</th>
                              <th>Remaining Fees Amount</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')),
      });
      $('.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.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 :'fee_amt'},
            {data :'paid_fee_amt'},
            {data :'remaining_fee_amt'},
            {data: 'action' },
         ],
         "order": [[0, 'asc' ]],
         "columnDefs": [
         { 
            "targets": [0,2,3,4,5], //first column / numbering column
            "orderable": false, //set not orderable
         }]
               

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

   function selectFeeData(e,cls,id,type){
      var program_id = $('#program').val();
      var semester = $('#semester').val();
      var cls_code = $(e).val();
      $.ajax({
         'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }, 
         url:"{{ route('admin.selectFeeData') }}",
         type:"POST",
         data:{program_id:program_id,semester:semester,cls_code:cls_code,type:type},
         dataType:"json",
         success:function(data){
            if(data.status == 1){
               $('.'+cls).show();
               $('#'+id).html(data.view);
               $('#selectStudents').hide();
            }
         }
      })
   }

   function select_data(e){
      var val = $(e).val();
      // alert(val);
      if(val == 0){
         $('#selectStudents').hide();
         $('#class_students').val(null);
      }else{
         $('#selectStudents').show();
      }
   }

   function submitFeeData(e){
      $('.submit_data').attr('disabled',true);
      $.ajax({
         'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }, 
         url:"{{ route('admin.submitFeeData') }}",
         type:"POST",
         data:$(e).serialize(),
         dataType:"json",
         success:function(data){
            if(data.status == 1){
               toastr.success('Fees raised successfully','Success');
               $(e).trigger('reset');
               dataTable.draw();
               window.location.reload();
            }
         },
         error: function(data){ 
            if(typeof data.responseJSON.status !== 'undefined'){
               toastr.error(data.responseJSON.error,'Error');
            }else{
               $.each(data.responseJSON.errors, function( key, value ) {
                  toastr.error(value,'Error');
               });
            }
            $('.submit_data').removeAttr('disabled',true);
         } 
      })
   }
   
   function viewFeeData(e,id,st_id){
      $.ajax({
         'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }, 
         url:"",
         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');
            }
         }
      })
   }

</script>
@endsection