@auth
         <span></span>
        @else
        <script>alert('Please log in'); window.location = "{{url('/')}}"</script>
    
        @endauth
@extends('layouts.frontendlayout')

@section('content')
<div class="container">


@if (session('clear_local_storage'))
<script>
    localStorage.removeItem("selectedCourses");
</script>
@endif
 <header  class="bg-primary text-white py-3">
<h2>Enroll {{ auth()->user()->name}} in the following Courses</h2>
</header>
    <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
            <div class="form-group">
                <h4>Available Sections</h4>
                <select class="form-control" name="section_id" id="section_id">

                </select>

            </div>
            <input type="hidden" name="course_ids[]" id="course_ids_input">
            <input type="hidden" name="section_ids[]" id="section_ids_input">
            <button type="submit" class="btn btn-primary">Register Courses</button>
            <button type="button" onclick="getSelectedCourses();" class="btn btn-info">Retrieve Selected Courses</button>
            
        </form>
    </div>
            <div>
        <strong>Total Tuition: $<input type="text" id="tuitionDisplay" value="0.00"></strong>
    </div>
</div>

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

/*window.addEventListener('load', function () {
  //console.log('Page fully loaded');
 // alert("Loading ..");
  renderSelectedCourses();
});
*/
window.onload  = function(){
     let courseid = document.getElementById("courseSelector").value;
    alert("Course ID " + courseid);
}
//get the sections associated with the selected course

document.getElementById("courseSelector").addEventListener('change', function(){
    alert('Course selected');
    let courseid = document.getElementById("courseSelector").value;
    alert("Course ID " + courseid);

    fetch('/public/admin/getcoursesections/' + courseid)
    .then(res => res.json())
    .then(data => {
        let section = document.getElementById('section_id');
        section.innerHTML = "";
     for (let i = 0; i < data.length; i++) {
        
        let option = document.createElement('option');
        option.value = data[i].id;
        option.text = data[i].section_name;
        section.appendChild(option);    
     }   
    });
});

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);
            });
        });
    });
}
//this function populates the select element that contains the dropdown list of courses
//this function call shold also populate the hidden input element with id section_ids_input;
function addCourse() {
    const selector = document.getElementById("courseSelector");
    const selectedId = selector.value; //selected course Id
    console.log('Selected coures id '+selectedId);
    const selectedText = selector.options[selector.selectedIndex].text;

    //get the hidden input element that contains the list selexted courses
    const inputCourses = document.getElementById('course_ids_input');
    
    //get the hidden input element that contains the list of selected sections.
    //note that the section ids are stored in the same array index position as that of the
    //corresponding selected course

    const inputSection = document.getElementById("section_ids_input");
    
    //get the selected section value
    const sectionId = document.getElementById("section_id").value;

    //check if a course is already selected and ignore it if it has been 
    //selected, by returning fron the function
    if (!selectedId || selectedCourses.includes(selectedId)) return;

    

    console.log("Section Id : " + sectionId);

     
    //add to the selected courses array
    selectedCourses.push(selectedId);

    //at this point the course had been selected 
    //s6 we add the selected section Id  to the selected sections array
    selectedSections.push(sectionId);

//create loca storage in the browser for offline access
    localStorage.setItem("selectedCourses", JSON.stringify(selectedCourses));
    localStorage.setItem("selectedSections", JSON.stringify(selectedSections));

    //convert the selectedSections array to a json string and assign it to the hidden
    //sections_ids
    console.log("JSON string of selected sections " + JSON.stringify(selectedSections));

    inputCourses.value = JSON.stringify(selectedCourses);
    inputSection.value = JSON.stringify(selectedSections);
    renderSelectedCourses();
    
    console.log('Selected option' + selectedId);
    //update the tuition after adding the course
    updateTuition(selectedId);
    //store the tuition total
    setTimeout(() => {
        let tuition = document.getElementById('tuitionDisplay').value;

   // alert('Total tuition '+ tuition);
    localStorage.setItem('totaltuition', tuition);
   // alert('Total tuition '+ tuition);
   // alert('Stored tuition ' + localStorage.getItem('totaltuition'))  
    },1000);
    
    
}

function renderSelectedCourses() {
  // alert('Retrieving previously selected courses ...');
   //console.log("Retrieving previously selected courses ...");
    const list = document.getElementById("selectedCourses");
    //this line is unused. Y?
    const inputCourses = document.getElementById("course_ids_input");
    const inputSections = document.getElementById("section_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";
        //get the options collection and find the option whose value match the selected id and 
        //set its text property
        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);
    });

    inputCourses.value = JSON.stringify(selectedCourses);
    inputSections.value = JSON.stringify(selectedSections);
}

function getSelectedCourses()
{
    renderSelectedCourses();
    let tuition = document.getElementById('tuitionDisplay');

//alert('Total tuition '+ tuition);

//restore the old tuition value
tuition.value = localStorage.getItem('totaltuition');
//alert('Stored tuition ' + localStorage.getItem('totaltuition'));
    
}
function removeCourse(index) {
    selectedCourses.splice(index, 1);
    console.log('selected index '+ index);
    localStorage.setItem("selectedCourses", JSON.stringify(selectedCourses));
    renderSelectedCourses();
}

function updateTuition(courseId)
{
    fetch('/public/getcourse/' + courseId)
    .then(res => res.json())
    .then( data => {
        singlecourse = data;
        creditHr =  parseFloat(singlecourse.credit_hours);
        tuition_percredit = parseFloat(singlecourse.tuition_per_credit);
        let cost = parseFloat(creditHr) * parseFloat(tuition_percredit);

        let totaltutionInput = document.getElementById('tuitionDisplay');
        totaltutionInput.value = parseFloat(totaltutionInput.value) + cost;
        //get current value
        //let curValue = parseFloat(totaltutionInput.value);
        //totaltutionInput.value = parseFloat(curValue) + cost;
        //alert('This course cost ' + cost);
    }
        
    
    );
    //alert('Updating tuition for course Id ' + courseId);
}

</script>
@endsection