@extends('layouts.app')

@section('title')
Uni | Applications
@endsection

@section('links')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/forms/theme-checkbox-radio.css">
    <link href="assets/css/tables/table-basic.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="plugins/font-icons/fontawesome/css/regular.css">
    <link rel="stylesheet" href="plugins/font-icons/fontawesome/css/fontawesome.css">
    <link href="plugins/animate/animate.css" rel="stylesheet" type="text/css" />
    <script src="plugins/sweetalerts/promise-polyfill.js"></script>
    <link href="plugins/sweetalerts/sweetalert2.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/sweetalerts/sweetalert.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/components/custom-sweetalert.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-select/select2.min.css">
    <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
   
    <link href="plugins/lightbox/photoswipe.css" rel="stylesheet" type="text/css" />
    <link href="plugins/lightbox/default-skin/default-skin.css" rel="stylesheet" type="text/css" />
    <link href="plugins/lightbox/custom-photswipe.css" rel="stylesheet" type="text/css" />

   <style>
        #formValidate .wizard > .content {min-height: 25em;}
        #example-vertical.wizard > .content {min-height: 24.5em;}
        .t-rotate270 { -webkit-transform: rotate(270deg); transform:rotate(270deg) }
    
        .blockui-growl-message {
            display: none;
            text-align: left;
            padding: 15px;
            background-color: #455a64;
            color: #fff;
            border-radius: 3px;
        }
        .blockui-animation-container { display: none; }
        .multiMessageBlockUi {
            display: none;
            background-color: #455a64;
            color: #fff;
            border-radius: 3px;
            padding: 15px 15px 10px 15px;
        }
        .multiMessageBlockUi i { display: block }
     
        .clickable_element{
        cursor: pointer;
    }

		   input{
            text-transform: uppercase;
        }
    </style>
    
@endsection

@section('content')
        <!--  BEGIN CONTENT AREA  -->
        <input id="session_id" class="d-none" type="text" value="{{$session->id}}" >
        <input id="selected_applicant_id" class="d-none" type="text" value="" >

        <div id="content" class="main-content">
            <div class="layout-px-spacing">
                
                <div class="row layout-top-spacing" id="cancel-row">
                
                    <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
					    <div class="widget-heading"style="margin-bottom:55px;">
                        <h5 class="mt-3" style="float:left;">Manage {{$session->name}} Applications</h5>

                        {{-- <button class="mt-2 btn btn-success" data-toggle="modal" data-target="#add_department" style="float:right;">Create Department</button> --}}
                        {{-- <button class="mt-2 btn btn-success" data-toggle="modal" data-target="#add_field_of_study" style="float:right;">Create Field Of Study</button> --}}
						</div>
						<hr>
                        <div class="widget-content widget-content-area br-6">
						
                            <div class="table-responsive mb-4 mt-4">
                                <table id="applications_table" class="table table-hover non-hover" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Applicant Name</th>
                                            <th>Department</th>
                                            <th>Verification Status</th>
                                            <th>Status</th>
                                            <th>Programme</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
			
            <!-- Modal -->
            <form id="viewApplicant">
                @csrf
			<div class="modal fade" id="view_applicant" tabindex="-1" role="dialog" aria-labelledby="applicantLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="applicantLabel">APPLICANT</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
							</button>
						</div>
						<div class="modal-body">
                            <div id="show_applicant">
                                
                            </div>
                                    
                                    
                                    

                              
						</div>
						<div class="modal-footer">
							<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Close</button>
						</div>
					</div>
				</div>
            </div>
        </form>


        <form id="viewResult">
            @csrf
        <div class="modal fade" id="verify_result" tabindex="-1" role="dialog" aria-labelledby="applicantLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="applicantLabel">VERIFY RESULT</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="show_result">
                            
                        </div>
                                
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>


    <form id="viewResultSubject">
        @csrf
    <div class="modal fade" style="background: #00000047;" id="view_result_subject" tabindex="-1" role="dialog" aria-labelledby="applicantLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="applicantLabel">RESULT</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="show_result_subject" class="row">
                        
                    </div>
                            
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Close</button>
                </div>
            </div>
        </div>
    </div>
</form>




<form id="approveOrReject">
    @csrf
<div class="modal fade" style="background: #00000047;" id="approve_or_reject" tabindex="-1" role="dialog" aria-labelledby="applicantLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="applicantLabel">APPROVE OR REJECT APPLICANT</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body">
               
                <div id="" class="row">
                        <input id="applicant_id" class="d-none" name="applicant_id" type="text" value="" >

                       <div class="col-12">
                        <div class="form-group mb-4">
                            <div id="name-field" class="field-wrapper input">
                                <label for="select_option">Select Option</label>
                            </div>

                            <select name="status_option" class="status_option selectpicker" id="select_option">
                                <option value="">Select Option</option>
                                <option value=1>Approve</option>
                                <option value=0>Reject</option>
                                
                            </select>

                        </div>
                       </div>
                       <div class="col-12">
                        <div class="input-group mb-4">
                            <div class="input-group-prepend">
                              <span class="input-group-text">Reason</span>
                            </div>
                            <textarea class="reason_textarea form-control" name="reason_textarea" aria-label="With textarea"></textarea>
                          </div>
                       </div>
                       
                           
                           
                           <small id="" class="form-text text-muted">*Required Fields</small>

                </div>
                        
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Close</button>
				<button type="submit" class="warning confirm btn btn-primary">Submit</button>
            
            </div>
        </div>
    </div>
</div>
</form>

			<!-- End Modal -->			
			
			<!-- End Modal -->
@endsection

@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    </script>
<script src="js/view_applications.js"></script>

<script src="plugins/sweetalerts/sweetalert2.min.js"></script>
<script src="plugins/sweetalerts/custom-sweetalert.js"></script>
<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="plugins/bootstrap-select/select2.full.min.js"></script>
<script src="plugins/bootstrap-select/form-select2.min.js"></script>

<script src="plugins/blockui/jquery.blockUI.min.js"></script>
<script src="plugins/blockui/custom-blockui.js"></script>

   <script src="plugins/lightbox/photoswipe.min.js"></script>
   <script src="plugins/lightbox/photoswipe-ui-default.min.js"></script>
   <script src="plugins/lightbox/custom-photswipe.js"></script>
@endsection