@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 Payment Plan</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="#manage_search" role="tab" aria-selected="true">
                     <div class="d-flex align-items-center">
                        <div class="tab-title">Search</div>
                     </div>
                  </a>
               </li>
               <li class="nav-item" role="presentation">
                  <a class="nav-link  announc_class" data-bs-toggle="tab" href="#import_discount" role="tab" aria-selected="false" >
                     <div class="d-flex align-items-center">
                        <div class="tab-title">Import Persons Covered</div>
                     </div>
                  </a>
               </li>
            </ul>
            <div class="tab-content py-3  border-top">
               <div class="tab-pane fade show active" id="manage_search" role="tabpanel">
                  <div class="">
                     <form>
                        <div class="row">
                        <div class="col-md-8">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Program<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="program_search" id="program_search"  data-placeholder="Select Role">
                                                <option value="1">First</option>
                                                <option value="2">Second</option>
                                                <option value="3">Thired</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                          <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_search" id="intake_search"  data-placeholder="Select Intake">
                                                <option value="1"></option>
                                                <option value="2">2020</option>
                                                <option value="3">2021</option>
                                                <option value="4">2022</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Seat Type<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="seat_type_search" id="seat_type_search"  data-placeholder="Select Role">
                                                <option value="1"></option>
                                                <option value="2">BSC</option>
                                                <option value="3">12th</option>
                                                <option value="4">10th</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Payment Plan Name<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="feename_search" id="feename_search"  data-placeholder="Select Role">
                                                <option value="1"></option>
                                                <option value="2">BSC</option>
                                                <option value="3">12th</option>
                                                <option value="4">10th</option>
                                             </select>
                                          </div>
                                       </div>
                         
                        </div>
                        <div class="accordion mt-3 feereport_section accordion-flush" id="accordionExample_manage">
                           <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="#morefilter_manage" aria-expanded="true" aria-controls="morefilter_manage">
                                 More Filters
                                 </button>
                              </h2>
                              <div id="morefilter_manage" class="accordion-collapse collapse border-0" aria-labelledby="headingOne" data-bs-parent="#accordionExample_manage">
                                 <div class="accordion-body p-0">
                                    <div class="row">
                                       <div class="col-md-4">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Mapping Status<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="mapping_status" id="mapping_status"  data-placeholder="Select Status">
                                                <option value="1">Active</option>
                                                <option value="0">InActive</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Approved Status<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="approved_status" id="approved_status"  data-placeholder="Select Approved By">
                                                <option value="1">First</option>
                                                <option value="2">Second</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Currency<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="currency_search" id="currency_search"  data-placeholder="Select Intake Year">
                                                <option value="1"></option>
                                                <option value="2">INR</option>
                                                <option value="3">USD</option>
                                             </select>
                                          </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 class="search_result mt-4 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 Payment Plan </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="fadeIn animated bx bx-paste"></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">
                           Student Course Enrolment  </a>
                           
                        </div>
                        <div class="dropdown mx-1">
                           <a href="javascript:void(0);" class="btn btn-secondary btn-sm py-1">
                           Plan Enrolment</a>
                           
                        </div>
                        <div class="dropdown mx-1">
                           <button type="button" class="btn btn-secondary btn-sm py-1 dropdown-toggle" data-bs-toggle="dropdown">
                           More Actions
                           </button>
                           <ul class="dropdown-menu mt-2">
                              <li><a class="dropdown-item" href="#">Print Id Card</a></li>
                              <li><a class="dropdown-item" href="#">Print Tax Certificate</a></li>
                           </ul>
                        </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>ID</th>
                                 <th>Payment Plan Name</th>
                                 <th>Payment Plan Type</th>
                                 <th>Approval Status</th>
                                 <th>Mapping Status</th>
                                 <th>Requests Received</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td colspan="6" class="text-center">No record to display</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
               <div class="tab-pane fade" id="import_discount" role="tabpanel">
                  <div class="">
                     <form class="">
                        <div class="row">
                           <div class="col-md-12">
                                 <div class="form-group mt-3">
                                    <div class="form-check form-check-inline">
                                       <input class="form-check-input" type="radio" name="templete_name" id="download_templete" value="1" checked onclick="get_templete('download_box')">
                                       <label class="form-check-label" for="download_templete">Download Templete</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                       <input class="form-check-input" type="radio" name="templete_name" id="upload_templete" value="0" onclick="get_templete('upload_box')">
                                       <label class="form-check-label" for="upload_templete">Upload Templete</label>
                                    </div>
                                 </div>
                              </div>
                              <div class="templete_box">
                                 <div id="download_box">
                                    <div class="row">
                                       <div class="col-md-10">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Brand Compus<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="brand_compus" id="brand_compus"  data-placeholder="Select Status">
                                                   <option value="1">JGP Global</option>
                                                   <option value="2">JGP School</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-9">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Payment Plan Name<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="payment_plan_name" id="fee_plan_name"  data-placeholder="Select Role">
                                                <option value=""></option>
                                                <option value="1">Payment Plan Name</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-4">
                                    <div class="form-group mt-3">
                                       <label class="form-label">Intake Year<sup class="text-danger">*</sup></label>
                                       <select class="single-select form-select" name="intake" id="intake"  data-placeholder="Select Role">
                                          <option value="0"></option>
                                          <option value="2">2020</option>
                                          <option value="3">2021</option>
                                          <option value="4">2022</option>
                                       </select>
                                    </div>
                                 </div>
                                       <div class="col-md-4">
                                    <div class="form-group mt-3">
                                       <label class="form-label">Program<sup class="text-danger">*</sup></label>
                                       <select class="single-select form-select" name="program" id="program"  data-placeholder="Select Role">
                                       <option value=""></option>
                                          <option value="1">First</option>
                                          <option value="2">Second</option>
                                       </select>
                                    </div>
                                 </div>
                               
                                 <div class="col-md-4">
                                    <div class="form-group mt-3">
                                       <label class="form-label">Seat Type<sup class="text-danger">*</sup></label>
                                       <select class="single-select form-select" name="seat_type" id="seat_type"  data-placeholder="Select Role">
                                          <option value=""></option>
                                          <option value="2">Seat Type 1</option>
                                          <option value="3">Seat Type 2</option>
                                       </select>
                                    </div>
                                    </div>
                                
                                 <div class="col-md-12">
                                    <div class="submit_btn mt-4">
                                       <button type="submit" class="btn btn-primary btn-sm py-1">Download Template</button>
                                       <button type="reset" class="btn btn-primary btn-sm py-1">Reset</button>
                                    </div>
                                 </div>
                                    </div>
                                 </div>
                                 <div id="upload_box" style="display:none;">
                                    <div class="row">
                                    <div class="col-md-10">
                                          <div class="form-group mt-3">
                                             <label class="form-label">Brand Compus<sup class="text-danger">*</sup></label>
                                             <select class="single-select form-select" name="brand_compus_templete" id="brand_compus_templete"  data-placeholder="Select Status">
                                                   <option value="1">JGP Global</option>
                                                   <option value="2">JGP School</option>
                                             </select>
                                          </div>
                                       </div>
                                       <div class="col-md-12">
                                          <div class="form-group mt-3">
                                             <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="temp_uploads" id="my_uploads" value="1" checked>
                                                <label class="form-check-label" for="my_uploads">My Uploads</label>
                                             </div>
                                             <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="temp_uploads" id="all_uploads" value="0">
                                                <label class="form-check-label" for="all_uploads">All Uploads</label>
                                             </div>
                                          </div>
                                    </div>
                                       <div class="col-md-5 mt-3">
                                          <div class="form-group">
                                             <label class="form-label">Template Name<sup class="text-danger">*</sup></label>
                                             <input type="text" name="template_name" class="form-control" placeholder="" value="">
                                          </div>
                                       </div>
                                       <div class="col-md-12">
                                    <label  class="form-label mt-3">Upload File</label>
                                    <div class="input-group ">
                                       <div class="col-md-12">
                                          <div class="custom-file">
                                             <input type="hidden" name="image_path" value="upload/student/">   
                                             <input type="hidden" name="image_name" value="image"> 
                                             <div class="row">
                                                <div class="col-7">
                                                   <input type="text" class="form-control" id="prev_input" value="">
                                                </div>
                                                <div class="col-5">
                                                   <div class="profile_img d-flex">
                                                      <div class="upload_img">
                                                         <button type="button" class="btn btn-primary btn-sm py-1" onclick="trigger_click()">Browse File</button>
                                                         <input type="file" class="custom-file form-control d-none" name="image" accept=".jpg,.jpeg,.png" id="profile" >
                                                      </div>                                                      
                                                   </div>
                                                </div>
                                             </div>
                                             <input type="hidden" name="file_id" id="file_id" value="">
                                             <i class="image_loader fa-btn-loader fa fa-refresh fa-spin fa-1x fa-fw" style="display:none;"></i>
                                          </div>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="col-md-12">
                                    <div class="csv_file mt-4">
                                       <button type="submit" class="btn btn-primary btn-sm py-1">Upload Csv File</button>
                                       <button type="Reset" class="btn btn-secondary btn-sm py-1">Reset</button>
                                    </div>
                                 </div>
                                    </div>
                                    <div class="search_result mt-5 border">
                     
                     <div class="d-flex my-3 border-bottom pb-3 px-3">
                        <div class="reset_password mx-1">
                           <button type="button" class="btn btn-secondary btn-sm py-1" onclick="reset_password()"><i class="lni lni-radio-button"></i>  Refresh</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-radio-button"></i>  Force Run</button>
                        </div>
                     </div>
                     <div class="table-responsive">
                        <table id="dataTable" class="table table-striped table-bordered " style="width:100%">
                           <thead>
                              <tr>
                                 <th>Module Name</th>
                                 <th>Uploaded File Name</th>
                                 <th>Uploaded By</th>
                                 <th>Uploaded On</th>
                                 <th>Processing Status</th>
                                 <th>Processed On</th>
                                 <th>Bad Record</th>
                                 <th>Log File</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td colspan="8" class="text-center">No record to display</td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
                                 </div>
                              </div>
                        </div>
                     </form>
                  </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,
        
    });
   });
   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