<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

  <link rel="stylesheet" href="{{asset('assets/')}}/css/style.css">
  <link rel="icon" href="https://e86.ng/wp-content/uploads/2020/05/favicon.ico" sizes="32x32">

    <style>
         a {
            text-decoration:none;
            color:black;
         }
    </style>


 <!-- CSS data tables link -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

  <!-- Css Buttons -->
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  
   <!-- JS data tables link -->
  <script  defer src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <script defer src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script defer src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>


  <!-- Js Data Table Buttons -->
<script defer src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script defer src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script defer src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<script defer src="{{asset('assets/')}}/js/dataTable.js"></script>

</head>
<body>

<nav id="main-menu">
     <ul class="nav-bar">
          <li class="nav-button-home"><a href="">Main Menu</a></li>
          <li class="nav-button-services"><a href="javascript:history.back()">Back</a></li>
          <li class="nav-button-products"><a href="{{ url('/logout') }}">Logout</a></li>
     </ul>
</nav>
<h1>Registered Students</h1>
<p>Only Students registered with this account will show below.</p>
<a href="{{ url('/new-staff-page')}}" class="btn btn-primary" style="float: right;margin: 8px;">New Staff</a>
 <div class="container">
 <table  id="example" class="table table-striped" style="width:100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Course Name</th>
            <th>Course Duration</th>
            <th>Prefered Days</th>
            <th>Gender</th>
            <th>Email</th>
            <th>Occupation</th>
            <th>Nok</th>
            <th>Relationship with Nok</th>
            <th>Nok Phone No</th>
            <th>Highest Level Of Education</th>
            <th>Date Of Birth</th>
            <th>Prior Experience</th>
            <th>Payment Mode</th>
        </tr>
    </thead>
    <tbody>
      @foreach($students as  $student)
        <tr>
            <td>{{$student->first_name}}</td>
            <td>{{$student->last_name}}</td>
            <td>{{$student->phone}}</td>
            <td>{{$student->address}}</td>
            <td>{{$student->course_name}}</td>
            <td>{{$student->course_duration}}</td>
            <td>{{$student->preffered_days}}</td>
            <td>{{$student->gender}}</td>
            <td>{{$student->email}}</td>
            <td>{{$student->occupation}}</td>
            <td>{{$student->nok}}</td>
            <td>{{$student->rNok}}</td>
            <td>{{$student->nok_phone_no}}</td>
            <td>{{$student->highest_loe}}</td>
            <td>{{$student->dob}}</td>
            <td>{{$student->prior_exp}}</td>
            <td>{{$student->payment_mode}}</td> 
        </tr>
       @endforeach
    </tbody>
</table>
  </div>


</body>
</html>