@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">Voucher Summery Report</div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="search_form pb-3">
                            <form>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group mt-3">
                                            <label class="form-label">IAU<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="iau" id="iau"  data-placeholder="Select Role">
                                                <option value="1">Student 1</option>
                                                <option value="2">Student 2</option>
                                                <option value="3">Student 3</option>
                                                <option value="4">Student 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Payment Mode<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="payment_mode" id="payment_mode"  data-placeholder="Select Role">
                                                <option value="1">Student 1</option>
                                                <option value="2">Student 2</option>
                                                <option value="3">Student 3</option>
                                                <option value="4">Student 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group mt-3">
                                            <label class="form-label">ID</label>
                                            <div class="position-relative">
                                            <input type="text" class="form-control pr-5" id="statement_id" name="statement_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-md-4">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Control Account</label>
                                            <div class="position-relative">
                                            <input type="text" class="form-control pr-5" id="control_account" name="control_account" 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-md-4">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Entry Type<sup class="text-danger">*</sup></label>
                                            <select class="single-select form-select" name="entry_type" id="entry_type"  data-placeholder="Select Status">
                                                <option value="1">Entry Type 1</option>
                                                <option value="0">Entry Type 2</option>
                                            </select>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="accordion mt-3 feereport_section accordion-flush" id="voucher_accordian">
                                    <div class="accordion-item">
                                       <h2 class="accordion-header" id="headingOne">
                                          <button class="accordion-button p-2 border-0 bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#voucher_accordian_1" aria-expanded="true" aria-controls="voucher_accordian_1">
                                          More Filters
                                          </button>
                                       </h2>
                                       <div id="voucher_accordian_1" class="accordion-collapse collapse border-0" aria-labelledby="headingOne" data-bs-parent="#voucher_accordian">
                                          <div class="accordion-body p-0">
                                             <div class="row">
                                                <div class="col-md-7">
                                                   <div class="form-group mt-3">
                                                      <label class="form-label">Transaction Type<sup class="text-danger">*</sup></label>
                                                      <select class="single-select form-select" name="transaction_type" id="transaction_type"  data-placeholder="Select Role">
                                                         <option value="1">Application</option>
                                                         <option value="2">Program</option>
                                                         <option value="3">Services</option>
                                                         <option value="4">Courses</option>
                                                         <option value="4">Exam</option>
                                                      </select>
                                                   </div>
                                                </div>
                                                <div class="col-md-6">
                                        <div class="form-group mt-3">
                                            <label class="form-label">Voucher Date From<sup class="text-danger">*</sup></label>
                                            <div class="input-group time">
                                                <input type="text" class="form-control datepicker" id="voucher_from_date" name="voucher_from_date" placeholder="" value="">
                                                <label for="voucher_from_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">Voucher Date To<sup class="text-danger">*</sup></label>
                                            <div class="input-group time">
                                                <input type="text" class="form-control datepicker" id="voucher_to_date" name="voucher_to_date" placeholder="" value="">
                                                <label for="voucher_to_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>
                                             
                                          </div>
                                       </div>
                                    </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">Voucher Summary</h6>
                        </div>
                       
                              </div>
                                                                                               
						<div class="table-responsive">
							<table id="dataTable" class="table table-striped table-bordered " style="width:100%">
								<thead>
									<tr>
									<th>IAU</th>
									<th>Voucher ID</th>
								    <th>Voucher Date</th>
								    <th>FP Transaction Type</th>
								    <th>Control Account</th>
									<th>Debit</th>
									<th>Credit</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')),
   });
   $('.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');
            
     }  
   });
   }
  
</script>
	@endsection