@php
    use App\Models\OptionalCourse;
    use App\Models\Course;
@endphp
@extends('layouts.app')

@push('custom-css')
    <style>
        .fa-times-circle {
            color: red;
            font-size: 20px;
            float: right;
            vertical-align: center;
            cursor: pointer;
        }
    </style>
@endpush

@section('title')
    {{-- {{ $user->first_name }} {{ $user->last_name }}'s Courses --}}
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
            </div>

            @if (session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                    {{ session('success') }}<a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    {{ session('error') }}<a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif

            <div class="row">
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-head">
                                    <header>{{ $user->first_name }} {{ $user->last_name }}'s Courses</header>
                                    <div class="tools">
                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                        <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                    </div>
                                </div>
                                <div class="card-body ">
                                    <div class="table-scrollable">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Course Name</th>
                                                    <th>Course Code</th>
                                                    <th>Course Type</th>
                                                    <th>Course Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($student_current_courses as $student_course)
                                                    <tr>
                                                        <td>{{ $loop->index + 1 }}</td>
                                                        <td>{{ ucfirst($student_course->course_name) }}</td>
                                                        <td>{{ $student_course->course_code }}</td>
                                                        <td>{{ $student_course->course_type_name }}</td>
                                                        <td>
                                                            <span
                                                                class="
                                                            @if ($student_course->name == 'active') badge bg-success
                                                            @elseif($student_course->name == 'repeated')
                                                               badge bg-info
                                                            @elseif($student_course->name == 'exempted')
                                                                badge bg-danger @endif
                                                           ">
                                                                {{ $student_course->name }}
                                                            </span>
                                                        </td> {{-- This is the course status name --}}
                                                        <td>
                                                            <form action="{{ route('course-delete') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" name="std_course_id"
                                                                    value="{{ $student_course->course_id }}">
                                                                {{-- <i class="del fa fa-times-circle "></i> --}}
                                                                <button class="btn btn-danger">Delete</button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-head">
                                    <header>Program/Sessional Courses</header>
                                    <div class="tools">
                                        <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                        <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                    </div>
                                </div>
                                <div class="card-body ">
                                    <div class="table-scrollable">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Course Name</th>
                                                    <th>Course Code</th>
                                                    <th>Course Type</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($sessional_courses as $sessional_course)
                                                    <tr>
                                                        <td>{{ $loop->index + 1 }}</td>
                                                        <td>{{ ucfirst($sessional_course->course_name) }}</td>
                                                        <td>{{ $sessional_course->course_code }}</td>
                                                        <td>{{ $sessional_course->course_type_name }}</td>

                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-3 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Add Course(s)</header>
                        </div>
                        <form action="{{ route('add-course') }}" method="post">
                            @csrf
                            <input type="hidden" name="student_id" value="{{ $student->id }}">
                            <input id="acad-sess-id" type="hidden" name="academic_year_id"
                                value="{{ $student_progress->year_id }}">
                            <input id="acad-year-id" type="hidden" name="academic_session_id"
                                value="{{ $student_progress->session_id }}">
                            <input id="year" type="hidden" name="intake_year"
                                value="{{ $student_progress->entry_year }}">
                            <div class="card-body " id="bar-parent">
                                <div class="row">
                                    <div class="form-group col-lg-6">
                                        <select class="form-select" name="course_id">
                                            @foreach ($courses as $course)
                                                <div class="form-group">
                                                    <label>Course</label>
                                                    <option value="{{ $course->id }}">{{ $course->course_name }}
                                                    </option>
                                                </div>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group col-lg-6">
                                        <select class="form-select" name="course_status_id">
                                            @foreach ($course_status as $status)
                                                <div class="form-group">
                                                    <label>Course</label>
                                                    <option value="{{ $status->id }}">{{ ucfirst($status->name) }}
                                                    </option>
                                                </div>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <button id="add-btn" class="btn btn-primary">Add</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <form action="{{ route('student-courses-approval') }}" method="post">
                    @csrf
                    <input id="userId" type="hidden" name="student_no" value="{{ $student->student_no }}">
                    @if ($student_progress->courses_confirmation == 'pending')
                        <button type="submit" class="btn btn-info m-r-20">Approve courses</button>
                    @elseif($student_progress->courses_confirmation == 'confirmed')
                        <button type="submit" class="btn btn-danger m-r-20">Revert Courses Approval</button>
                    @endif
                </form>
            </div>
        </div>
    </div>

    {{-- <script>
        window.addEventListener('load', function() {
            //used old fashioned AJAX for legacy browser support [code snippet for the fetch API available down below]

            const studentId = document.getElementById('userId').value,
                academicSessionId = document.getElementById('acad-sess-id').value,
                academicYearId = document.getElementById('acad-year-id').value;
            year = document.getElementById('year').value;
            let xhr = new XMLHttpRequest()
            xhr.open('GET', 'student-optional-courses/' + studentId + '/' + academicSessionId + '/' +
                academicYearId + '/' + year, true);
            xhr.onload = function() {
                let output = '',
                    courses = JSON.parse(xhr.responseText);
                courses.forEach(function(course, index) {
                    output += `
                    <tr>
                        <td>${ index + 1 } </i>
                        <td>${ course } </td>
                        <td><a href="delete/${course}/${studentId}" ><i class="del fa fa-times-circle "></i></a></td>
                    </tr>
                `
                })
                document.getElementById('optional-courses-table').innerHTML = output;
            }
            xhr.send();
        })
    </script> --}}
@endsection