@extends('admin/layouts/layoutMaster')
@section('title', 'Student 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,.clearFd{float:right;margin-right:15px;margin-top:-28px;position:relative;z-index:2;cursor:pointer;}
  </style>
@endsection
@section('content')

<h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> Manage Students
  </h4>
  
<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>Manage Students</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">
          <form method="GET" action="{{ route('admin.findStudentList') }}">
            <div class="row justify-content-center mb-3">
              <div class="col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Search student..." value="{{ request('search') }}">
                @if(request('search'))
                  <i class="bi bi-x-circle text-danger clearFd" data-url="{{ route('admin.findStudentList') }}"></i>
                @endif
              </div>
              <div class="col-md-2">
                <button class="btn btn-primary">Search</button>
              </div>
            </div>
          </form>
          <table id="tablexx" 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>Reg. No</th>
                  <th>Level</th>
                  <th>Email</th>
                  <th>Phone</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @if($students)
                @foreach($students as $student)
                <tr>
                  <td width="20">{{$loop->iteration}}</td>
                  <td>{{$student->name}}</td>
                  <td>{{$student->reg_number}}</td>
                  <td>{{$student->s_level."00"}}</td>
                  <td>{{$student->email}}</td>
                  <td>{{$student->phone}}</td>
                  <td>
                    <button type="button" 
                    class="btn btn-primary btn-sm" 
                    data-bs-toggle="modal"
                    data-name="{!!$student->name!!}"
                    data-email="{{$student->email}}"
                    data-reg="{{$student->reg_number}}"
                    data-jamb="{{$student->jamb_number}}"
                    data-level="{{$student->s_level}}"
                    data-phone="{{$student->phone}}"
                    data-state="{{$student->status}}"
                    data-hash="{{$student->id}}"
                    data-bs-target="#view">View</button>
                  </td>
                </tr>
                @endforeach
              </tbody>
                @else
                <tfooter>
                <tr>
                  <td colspan="6">No records found</td>
                </tr>
                </tfooter>
                @endif
            </table>
            <div class="my-3">
              {{ $students->links() }}
            </div>
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </div>
 <!-- Modal -->
<div class="modal fade" id="view" 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="updateStudent" 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> Update Student Information </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">Jamb No.: <span class="jamb fw-semibold"></span></div>
          <div class="mb-2">Reg No.: <span class="reg fw-semibold"></span></div>
          <div class="mb-2">Phone No.: <span class="phone fw-semibold"></span></div>
          <div class="mb-2">Level: <span class="level fw-semibold"></span></div>
          <div class="row g-2">
              <div class="col-md-6 mb-3">
                <label for="Change Level">Change Level</label>
                <input type="number" id="lvl" name="level" class="form-control" placeholder="Enter level" min="1" max="4">
              </div>
              <div class="col-md-6 mb-3">
                <label for="Lock Student">Lock Student</label>
                <select name="lockStudent" class="form-select" style="cursor:pointer;">
                  <option value="1">Activate</option>
                  <option value="2">Suspend</option>
                  <option value="0">Lock</option>
                </select>
              </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">
                <span toggle="#pwd" class="bi fw-semibold bi-eye field-icon toggle-pwd"></span>
                <input type="hidden" name="userId" id="hashid">
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="botton" class="btn btn-info" id="updateImgtBtn">Update Passport</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">UPDATE</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"]],
  });
  
  $('.clearFd').click(function(){
    window.location.href = $(this).data('url');
  });
  
  $(".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");
    }
  });
  
  $("#view").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"));
    $('.reg').text(xp.data("reg"));
    $('.level').text(xp.data("level")+"00");
    $('#lvl').val(xp.data("level"));
    // $('#lvl').val(xp.data("state"));
    $('#hashid').val(xp.data("hash"));
  });
  
  document.getElementById('updateStudent').addEventListener('submit', function (e) {
    e.preventDefault();
    const form = e.target;
    const alertBox = document.getElementById('regAlert');
    const formData = new FormData(form);
    const url = '{{route('admin.switchStudent')}}';
    $('.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>`;

        setTimeout(() => {
          bootstrap.Modal.getInstance(
            document.getElementById('view')
          ).hide();
          location.reload(); 
        }, 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>`;
    });
});

  $('#updateImgtBtn').click(function () {
    var id = $('#hashid').val();
    if(id){
      var url = "{{ route('admin.studentPic', ':id') }}";
      url = url.replace(':id', id);
      window.location.href = url;
    }

});

});


</script>
 @endsection
@endsection