@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">Advance {{ ucfirst($module) }}</div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="search_form pb-3">
                            <form>
                                <div class="row">
                                    <div class="col-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Receipt Type<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="receipt_type" id="receipt_type"  data-placeholder="Select Role">
                                                <option value="1">All</option>
                                                <option value="2">P&C Free</option>
                                                <option value="3">Schorlership</option>
                                                <option value="4">Service Provided</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Receipt View<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="receipt_view" id="receipt_view"  data-placeholder="Select Role">
                                                <option value="1">Student</option>
                                                <option value="2">Applicant</option>
                                                <option value="3">Sponsor</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Student ID/Name</label>
                                            <div class="position-relative">
                                            <input type="text" class="form-control pr-5" id="student_id" name="student_id" placeholder="Enter 3 Char to auto search" value="">
                                 <span class="position-absolute top-50 translate-middle-y" style="right:15px;font-size: 18px;"><i class="bx bx-search"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Status<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="status" id="status"  data-placeholder="Select Status">
                                                <option value="1">Active</option>
                                                <option value="0">InActive</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Program</label>
                                            <div class="position-relative">
                                            <input type="text" class="form-control" id="program" name="program" placeholder="Enter 3 Char to auto search" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Intake<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="intake" id="intake"  data-placeholder="Select Role">
                                                <option value="1">2019</option>
                                                <option value="2">2020</option>
                                                <option value="3">2021</option>
                                                <option value="4">2022</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary btn-sm py-1">
                                        Search
                                    </button>
                                    <button type="reset" class="btn btn-secondary btn-sm py-1">
                                    Reset
                                    </button>
                                </div>
                            </form>
                        </div>
                     </div>
                </div>

				<!--end breadcrumb-->
				
				<hr/>
				<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">List Of Advance Fee</h6>
                        </div>
                        <div class="columns_part ms-auto">
                                 <button type="button" class="btn btn-primary btn-sm py-1" onclick="get_columns()">Columns</button>
                              </div>
                              </div>
                                                                                               
						<div class="table-responsive">
							<table id="dataTable" class="table table-striped table-bordered " style="width:100%">
								<thead>
									<tr>
									<th> S.No.</th>
									<th>Student ID</th>
								    <th>Student</th>
								    <th>Program</th>
									<th>Intake</th>
									<th>Ammount</th>
								</tr>
								</thead>
								<tbody>
                                    <tr>
                                        <td colspan="6" class="text-center">No record to display</td>
                                    </tr>
								</tbody>
								
							</table>
						</div>
					</div>
				</div>
				
			</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')),
   });
   });
   function get_columns(){
  $('#modal-default .modal-content').html('');
   $.ajax({ 
      'headers': {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }, 
     url :"{{ route('admin.student.get.columns') }}",  
     method:"post",  
     data:{},
     success:function(res){  
      $('#modal-sm .modal-content').html(res);
      $('#modal-sm').modal('show');
            
     }  
   });
   }
  
</script>
	@endsection