@extends('admin/layouts/layoutMaster')
@section('title', 'Applicant Lists')
@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
  <style>
    .pimg{width:165px;height:150px;}
    .p-restyle p{padding:0px !important;margin:0px !important;margin-bottom:6px !important;}
    table{
      border-left:#ccc solid 1px !important;
      border-right:#ccc solid 1px!important;
    }
    .field-icon{float:right;margin-right:15px;margin-top:-28px;position:relative;z-index:2;cursor:pointer;}
  </style>
@endsection
@section('content')
<div class="row">
    <!-- Basic  -->
    <div class="col-12">
      <div class="card mb-4">
        <h5 class="card-header"><i class="bi bi-people me-1"></i>Applicants With Reg. Number</h5>
        
        @if(session()->has('errors'))
          <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert">
            {{session('errors')->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            </button>
          </div>
        @endif
        <div class="card-body table-responsive">
          <table id="tablex" class="table table-striped table-hover table-bordered table-sm">
              <thead class="table-dark fs-2 fw-semibolder" height="32px">
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Jamb</th>
                  <th>Phone</th>
                  <th>Assign By</th>
                  <th>Year</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @if($applicants)
                @foreach($applicants as $app)
                <tr>
                  <td width="20">{{$loop->iteration}}</td>
                  <td>{{$app->name}}</td>
                  <td>{{$app->email}}</td>
                  <td>{{$app->jamb}}</td>
                  <td>{{$app->phone}}</td>
                  <td>{{$app->staff ?? 'No Staff'}}</td>
                  <td>{{$app->entry_year}}</td>
                  <td>
                    <button type="button" 
                    class="btn btn-primary btn-sm" 
                    data-bs-toggle="modal"
                    data-name="{!!$app->name!!}"
                    data-email="{{$app->email}}"
                    data-jamb="{{$app->jamb}}"
                    data-year="{{$app->entry_year}}"
                    data-staf="{{$app->staff ?? 'No Staff'}}"
                    data-reg="{{$app->regno}}"
                    data-bs-target="#viewReg">View</button>
                  </td>
                </tr>
                @endforeach
              </tbody>
                @else
                <tfooter>
                <tr>
                  <td colspan="6">No records found</td>
                </tr>
                </tfooter>
                @endif
            </table>
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </div>
 <!-- Modal -->
<div class="modal fade" id="viewReg" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="" action="" method="POST" onsubmit="return false;">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="modalLabel"><i class="bx bx-user me-1"></i> Assign School Registration Number </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        <div id="regAlert"></div>
          <div class="mb-3">Name: <span class="name fw-semibold"></span></div>
          <div class="mb-3">Email: <span class="email fw-semibold"></span></div>
          <div class="mb-3">Jamb No.: <span class="jamb fw-semibold"></span></div>
          <div class="mb-3">Entry Year: <span class="year fw-semibold"></span></div>
          <div class="mb-3">Assigned By: <span class="staf fw-semibold"></span></div>
          <div class="form-group hide" style="display:none">
            <label for="password">Admin Password</label>
            <input type="password" id="pwd" name="adminPassword" class="form-control" placeholder="Enter Admin Password" required>
            <span toggle="#pwd" class="bi fw-semibold bi-eye field-icon toggle-pwd"></span>
            <input type="hidden" name="applicantId" id="hashid">
            <input type="hidden" name="email" id="hashmail">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <a href="javascript:void(0)" id="pref" type="button" class="btn btn-success">Show Reg</a>
        </div>
      </form>
    </div>
  </div>
</div>
 @section('page-script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="{{asset('assets/js/pages-auth.js')}}"></script>
<script>
$(document).ready(function() {
  $('#tablex').DataTable({
    "paging": true,
    "searching": true,
    "ordering": false,
    "order": [[0, "desc"]],
  });
  
  $(".toggle-pwd").click(function(){
    $(this).toggleClass("bi-eye bi-eye-slash");
    var input=$($(this).attr("toggle"));
    if(input.attr("type")==="password"){
      input.attr("type","text");
    }else{
      input.attr("type", "password");
    }
  });
  
  $("#viewReg").on("show.bs.modal", function(e){
    var xp = $(e.relatedTarget);
    $('.name').text(xp.data("name"));
    $('.email').text(xp.data("email"));
    $('.jamb').text(xp.data("jamb"));
    $('.year').text(xp.data("year"));
    $('.staf').text(xp.data("staf"));
    
    var regg = xp.data("reg");
    var url = "{{ route('admin.appregno', ':regno') }}";
    url = url.replace(':regno', regg);
    $('#pref').attr('href', url);
    
  });
});
</script>
 @endsection
@endsection