@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 for 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></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>
                    <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-phone="{{$app->phone}}"
                    data-hash="{{$app->sid}}"
                    data-bs-target="#giveReg">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="giveReg" 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="giveStudent" 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-2">Name: <span class="name fw-semibold"></span></div>
          <div class="mb-2">Email: <span class="email fw-semibold"></span></div>
          <div class="mb-2">Phone No.: <span class="phone fw-semibold"></span></div>
          <div class="mb-2">Jamb No.: <span class="jamb fw-semibold"></span></div>
          <div class="form-group">
            <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>
          <button type="submit" class="btn btn-success">Assign</button>
        </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");
    }
  });
  
  $("#giveReg").on("show.bs.modal", function(e){
    $('.alertMsg').removeClass('alert-danger alert-success').hide();
    var xp = $(e.relatedTarget);
    $('.name').text(xp.data("name"));
    $('.email').text(xp.data("email"));
    $('.phone').text(xp.data("phone"));
    $('.jamb').text(xp.data("jamb"));
    $('#hashid').val(xp.data("hash"));
    $('#hashmail').val(xp.data("email"));
  });
  
  document.getElementById('giveStudent').addEventListener('submit', function (e) {
    e.preventDefault();
    const form = e.target;
    const alertBox = document.getElementById('regAlert');
    const formData = new FormData(form);
    const url = '{{route('admin.givereg')}}';
    $('.btn').attr('disabled','disabled');
    alertBox.style.display="none";
    
    fetch(url, {
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
        'Accept': 'application/json'
      },
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      alertBox.style.display="inline";
      document.querySelector('#pwd').value = '';
      
      if (data.success) {
        alertBox.innerHTML = `
        <div class="alert alert-success"><i class="bx bx-check-circle me-1"></i> 
          ${data.message}
        </div>`;
        
        const callback = "{{ route('admin.appregno', ':regno') }}".replace(':regno', data.regnumber);

        setTimeout(() => {
          bootstrap.Modal.getInstance(
            document.getElementById('giveReg')
          ).hide();
          data.printPage ?
          location= callback : location.reload(); // optional
        }, 4500);
      } else {
        $('.btn').removeAttr('disabled','disabled');
        alertBox.innerHTML = `
        <div class="alert alert-danger"><i class="bx bx-x-circle me-1"></i> 
          ${data.message ?? 'Something went wrong.'}
        </div>`;
      }
    })
    .catch(error => {
      $('.btn').removeAttr('disabled','disabled');
      alertBox.innerHTML = `
      <div class="alert alert-danger">
        <i class="bx bx-x-circle me-1"></i> Server error. Please try again.
      </div>`;
    });
});
    
});
</script>
 @endsection
@endsection