@extends('admin/layouts/layoutMaster')
@section('title', 'Search Applicant')
@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-search me-1"></i>Search Applicant 
            <a href="{{route('admin.clrSearch')}}" class="btn btn-sm btn-outline-secondary float-end"><i class="bi bi-x-circle me-1"></i>Back To Search</a></h5>
        
        <div class="card-body table-responsive">
        @if(session('error') || session('success'))
          <div class="row justify-content-center">
            <div class="col-md-6">
              @if(session('error'))
              <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-x-circle me-1"></i>{!! session('error') !!}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
              @endif
              <!--if (session('success'))-->
              <!--<div class="alert alert-success alert-dismissible fade show" role="alert">-->
              <!--  <i class="bi bi-check2-circle me-1"></i>{--session('success')--}-->
              <!--  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>-->
              <!--</div>-->
              <!--script>
                // setTimeout(()=>{location ="{{--route('admin.sapp')--}}"},500);
              <!--</script>-->
              <!--endif-->
            </div>
          </div>
          @endif
          @if(!session('searchResults'))
            <form method="post" action="{{ route('admin.searchemail') }}">
                @csrf
              <div class="form-group row justify-content-center">
                <div class="col-md-6 my-5 p-4" style="border:1px solid #ccc;border-radius:4px;">
                  <div class="mb-3">
                    <label for="search">Search</label>
                    <input type="email" name="email" class="form-control" placeholder="Enter email address" value="{{old('email')}}">
                  </div>
                  <div class="mb-3 text-center">
                    <button type="submit" class="btn btn-sm btn-outline-success">SEARCH</button>
                  </div>
                </div>
              </div>
            </form>
        @else
        @php $app = session('searchResults') @endphp
          <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($app)
                <!--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>
        @endif
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </div>
@if(session()->has('searchResults'))
 <!-- 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="mb-2">Registration Number.: <span class="regno 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>
@endif
 @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"));
    $('.regno').text(xp.data("regno"));
    $('#hashid').val(xp.data("hash"));
    $('#hashmail').val(xp.data("email"));
    var regnob = xp.data("regno");
    if (regnob && regnob.trim() !== '') {
      $('.btn').prop('disabled', true);
    }
  });
  
  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