@extends('admin/layouts/layoutMaster')
@section('title', 'Course Form List')
@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 rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
  <style>
    .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>Student Courses
        <a href="{{route('admin.stucourse')}}" class="btn btn-sm btn-dark float-end">Go Back</a></h5>
        <div class="card-body table-responsive">
            @if(session()->has('errors'))
              <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert">
                <i class="fas fa-times-circle me-1"></i>{{session('errors')->first() }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                </button>
              </div>
            @endif
            @if(session()->has('success'))
              <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
                <i class="fas fa-check-circle me-1"></i>{{session('success')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                </button>
              </div>
              <script>setTimeout(()=> {location.reload();}, 2000);</script>
            @endif
            
            <div class="form-group">
              <div class="mb-2">Name: <span class="fw-semibold">{{$course->user->surname . ' ' .$course->user->other_names}}</span></div>
              <div class="mb-2">Level: <span class="fw-semibold">{{$course->student_level}}00 Level</span></div>
              <div class="mb-2">Session: <span class="fw-semibold">{{$course->session}}</span></div>
              <div class="mb-2">Semester: <span class="fw-semibold">{{$course->semester==1 ? 'FIRST' : 'SECOND' }} SEMESTER</span></div>
              <div class="mb-0">Printed On: <span class="fw-semibold">{{$course->printed_on ? date('M d, Y. h:ia',strtotime($course->printed_on)) : 'Not printed'}}</span></div>
              <hr class="my-3" style="border:0.4px #f0f0f0 solid" />
            </div>
          <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>Code</th>
                  <th>Unit</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @if($lists)
                @foreach($lists as $course)
                <tr>
                  <td width="20">{{$loop->iteration}}</td>
                  <td>{{$course->course->name}}</td>
                  <td>{{$course->course->code}}</td>
                  <td>{{$course->course_load}}</td>
                  <td>
                    <!--<a href="{{route('admin.studRform',[$course->id])}}" class="btn btn-sm btn-danger px-2">Remove</a>-->
                  </td>
                </tr>
                @endforeach
                @endif
              </tbody>
            </table>
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </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"]],
  });
});
</script>
 @endsection
@endsection