@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">Manage Finance Hold</div>
      </div>
      <div class="card">
      <div class="card-body">
                     <form>
                        <div class="row">
                           
                        <div class="col-md-6">
                                          <div class="form-group mt-3">
                                             <label class="form-label">FH ID/Name<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="fh_name" id="fh_name"  data-placeholder="Select Role">
                                                <option value=""></option>
                                                <option value="1">First</option>
                                                <option value="2">Second</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-6">
                                          <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 Intake">
                                                <option value="1">Active</option>
                                                <option value="0">InActive</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-6">
                                                <div class="form-group mt-3">
                                                   <label class="form-label">Cut Off Date <sup class="text-danger">*</sup></label>
                                                   <div class="input-group time">
                                                      <input type="text" class="form-control datepicker" id="cutoff_date" name="cutoff_date" placeholder="" value="">
                                                      <label for="cutoff_date" class="input-group-append input-group-addon"><span class="input-group-text py-2 rounded-0"><i class="lni lni-calendar"></i></label></span>
                                                   </div>
                                                </div>
                                             </div>
                                       <div class="col-md-6">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Hold Type<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="hold_type_search" id="hold_type_search"  data-placeholder="Select Role">
                                                <option value=""></option>
                                                <option value="2">Hold Type 1</option>
                                                <option value="3">Hold Type 2</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 class="search_result mt-4 border card">
                     <div class="d-flex mb-4 border-bottom bg-light border-bottom py-3 px-3 align-items-center">
                        <div class="heading">
                           <h6 class="mb-0">List Of Financial Hold Type</h6>
                        </div>
                     </div>
                     <div class="d-flex mb-4 border-bottom pb-4 px-3">
                        <div class="reset_password mx-1">
                           <button type="button" class="btn btn-secondary btn-sm py-1" onclick="reset_password()"><i class="fadeIn animated bx bx-copy"></i></button>
                        </div>
                        <div class="reset_password mx-1">
                           <button type="button" data-bs-toggle="tab" href="#announcements" role="tab" aria-selected="false" class="btn btn-secondary btn-sm py-1" onclick="send_message()"><i class="fadeIn animated bx bx-pencil"></i></button>
                        </div>
                        <div class="reset_password mx-1">
                           <button type="button" data-bs-toggle="tab" href="#announcements" role="tab" aria-selected="false" class="btn btn-secondary btn-sm py-1" onclick="send_message()"><i class="lni lni-trash"></i></button>
                        </div>
                        <div class="dropdown mx-1">
                           <a href="javascript:void(0);" class="btn btn-secondary btn-sm py-1">
                           Apply To</a>
                           
                        </div>
                     </div>
                     <div class="table-responsive px-3">
                        <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                           <thead>
                              <tr>
                                 <th>Finance Hold ID</th>
                                 <th>Finance Hold Name</th>
                                 <th>Cutoff Date</th>
                                 <th>Applicable On</th>
                                 <th>Finance Hold Types</th>
                                 <th>Mapped Programs</th>
                                 <th>Blocked Students</th>
                                 <th>Status</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td colspan="8" class="text-center">No record to display</td>
                              </tr>
                           </tbody>
                        </table>
                     </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,
        
    });
   });
   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');
            
     }  
   });
   }

   function get_templete(id) {
			if(id == 'download_box'){
				$('#download_box').show();
				$('#upload_box').hide();
			}else{
				$('#download_box').hide();
				$('#upload_box').show();
			}
		}
   
</script>
@endsection