@extends('admin.layouts.mainlayout')

@section('content')
<div class="container">
    <h3>Offline Course Registration</h3>

    <div id="course-builder">
        <div class="mb-3">
            <label>Faculties & Departments</label>
            <select id="courseSelector" class="form-control">
                <option value="">-- Select Course --</option>
            </select>
        </div>

        <button onclick="addCourse()" class="btn btn-sm btn-success mb-3">Add Course</button>

        <h5>Your Selected Courses:</h5>
        <ul id="selectedCourses" class="list-group mb-3"></ul>

        <form id="courseForm" action="{{ route('registercourse') }}" method="POST">
            @csrf
            <input type="hidden" name="course_ids[]" id="course_ids_input">
            <button type="submit" class="btn btn-primary">Register Courses</button>
        </form>
    </div>
            <div>
        <strong>Total Tuition: $<span id="tuitionDisplay">0.00</span></strong>
    </div>
</div>

<script>
let allCourses = {};
let selectedCourses = [];
let singlecourse;

document.addEventListener("DOMContentLoaded", function () {
    fetchAllCourses();

    // Restore from localStorage
    if (localStorage.getItem("selectedCourses")) {
        selectedCourses = JSON.parse(localStorage.getItem("selectedCourses"));
        renderSelectedCourses();
    }
});

function fetchAllCourses() {
    fetch('/public/allcourses') ///api/courses/data
        .then(res => res.json())
        .then(data => {
            allCourses = data;
            populateCourseSelector(data);
        });
}

function populateCourseSelector(data) {
    const selector = document.getElementById("courseSelector");
    data.forEach(faculty => {
        faculty.departments.forEach(dept => {
            dept.courses.forEach(course => {
                let option = document.createElement("option");
                option.value = course.id;
                option.text = `${faculty.title} > ${dept.title} > ${course.code} - ${course.title} ${course.credit_hours} Credits @ ${course.tuition_per_credit}/credit`;
                selector.appendChild(option);
            });
        });
    });
}

function addCourse() {
    const selector = document.getElementById("courseSelector");
    const selectedId = selector.value;
    const selectedText = selector.options[selector.selectedIndex].text;
    
    //alert('Selected Id '+ selectedId + ' text ' + selectedText);

    //check if a course is already selected and return if it has been 
    //selected
    if (!selectedId || selectedCourses.includes(selectedId)) return;

    selectedCourses.push(selectedId);
    localStorage.setItem("selectedCourses", JSON.stringify(selectedCourses));
    renderSelectedCourses();
    //update the tuition after adding the course
    
    updateTuition(selectedId);
}

function renderSelectedCourses() {
    const list = document.getElementById("selectedCourses");
    //this line is unused. Y?
    const input = document.getElementById("course_ids_input");

    list.innerHTML = "";
    selectedCourses.forEach((id, index) => {
        const li = document.createElement("li");
        li.className = "list-group-item d-flex justify-content-between align-items-center";
        const text = [...document.getElementById("courseSelector").options]
            .find(option => option.value == id)?.text;
        li.innerHTML = `${text} 
            <button onclick="removeCourse(${index})" class="btn btn-sm btn-danger">Remove</button>`;
        list.appendChild(li);
    });

    input.value = JSON.stringify(selectedCourses);
}

function removeCourse(index) {
    selectedCourses.splice(index, 1);
    localStorage.setItem("selectedCourses", JSON.stringify(selectedCourses));
    renderSelectedCourses();
}

function updateTuition(courseId)
{
    alert('Updating tuition for course Id ' + courseId);
}

</script>
@endsection