<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPA HCT</title>
    <style>
        :root {
    --primary-gradient: linear-gradient(135deg, #1a5c1a 0%, #0f3d0f 100%);
    --secondary-gradient: linear-gradient(135deg, #0f3d0f 0%, #0a2a0a 100%);
    --background-gradient: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
            --card-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            --border-radius: 16px;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: white;
            color: #1f2937;
            line-height: 1.6;
            min-height: 100vh;
            padding: 2rem;
            font-size: 22px;

        }

        h1 {
            font-size: 3rem;
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin: 2rem 0;
            letter-spacing: -0.025em;
        }

        h2 {
            font-size: 1.875rem;
            color: #2563eb;
            margin: 2rem 0 1rem;
            font-weight: 700;
            position: relative;
            padding-bottom: 0.5rem;
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-gradient);
            border-radius: 2px;
        }

        .content {
            background: var(--card-gradient);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: var(--shadow-lg);
            max-width: 65%;
            margin: 2rem auto;
            border: 1px solid rgba(148, 163, 184, 0.1);
            backdrop-filter: blur(10px);
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 1.5rem 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            background: white;
        }

        th {
            background: var(--primary-gradient);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            padding: 1.25rem 1rem;
            text-align: left;
        }

        td {
            padding: 1rem;
            border-bottom: 1px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        tr:hover td {
            background-color: #f8fafc;
            transform: scale(1.01);
        }

        tr:last-child td {
            border-bottom: none;
        }

	select {
    width: 80px;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: bold;
    color: #1f2937;
    background-color: #cceeff;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    text-align: center; /* Center the selected text */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234B5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}


        select:hover {
            border-color: #3b82f6;
            transform: translateY(-1px);
        }

        select:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            /*transform: translateY(-1px);*/
        }

        .buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            margin: 2rem 0;
        }

        .buttons button {
            background: var(--secondary-gradient);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.775rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .buttons button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .buttons button:active {
            transform: translateY(0);
        }

        input[type="text"] {
            width: 100%;
            padding: 0.875rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.fixed-gpa-container {
    max-width: 250px;
    width: 50%;
    position: fixed;
    top: 2rem;
    left: 3rem;
    background: var(--card-gradient);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(148, 163, 184, 0.1);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    text-align: center;  /* Add this line */
}

.fixed-gpa-container button {
			background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
}

        .fixed-gpa-container:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .grade-f {
            background: var(--danger-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }
		
		        .grade-g {
            background: var(--danger-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        .course-code {
            color: #2563eb;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .course-code:hover {
            color: #1d4ed8;
        }

        .course-code::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-gradient);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .course-code:hover::after {
            transform: scaleX(1);
        }

	.customAlert {
	    display: none; 

            position: fixed;
            top: 250px;
            left: 50px;
            transform: transform: translateX(-40%); 
            background: var(--card-gradient);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
            max-width: 250px;
            width: 50%;
            z-index: 1100;
            border: 1px solid rgba(148, 163, 184, 0.1);
            backdrop-filter: blur(10px);
        }

        .customAlert button {
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
        }

        .customAlert button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

footer {
    width: 60%;
    margin: 3rem auto; /* Changed from margin-top to margin to center horizontally */
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: #64748b;
    font-size: 0.875rem;
    background: var(--card-gradient);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .content {
                padding: 1.5rem;
            }

            h1 {
                font-size: 2rem;
            }

            .buttons {
                flex-direction: column;
            }

            .buttons button {
                width: 100%;
            }


        }

        /* Modern checkbox styling */
        input[type="checkbox"] {
            appearance: none;
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid #e2e8f0;
            border-radius: 4px;
            margin-right: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
			background: white;

        }

        input[type="checkbox"]:checked {
            background: var(--primary-gradient);
            border-color: #2563eb;
        }

        input[type="checkbox"]:checked::after {
            content: '✓';
            position: absolute;
            color: white;
            font-size: 1rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* Animation for table rows */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        tr {
            animation: fadeIn 0.3s ease-out forwards;
        }
		
		select:disabled {
    background-color: white !important;
    color: #1f2937;
    border-color: #e2e8f0;
    cursor: not-allowed;
    opacity: 0.8;
}
    </style>
	
	<style>
    @media print {
        /* Prevent page breaks inside the table */
        table {
            page-break-inside: avoid; /* Prevents breaking of the table */
            width: 100%; /* Ensure the table takes full width */
        }

        tr {
            page-break-inside: avoid; /* Prevents breaking of table rows */
            page-break-after: auto; /* Allows rows to be printed without forced breaks */
        }

        td, th {
            /*white-space: nowrap;  Prevents text from wrapping */
        }
		
		.Semester-section {
        page-break-inside: avoid; /* Prevent page breaks inside each Semester section */
    }
		
	.fixed-gpa-container {
        display: none; /* Hide these elements during print */
    }
	.customAlert  {
        display: none; /* Hide these elements during print */
    }
    .buttons {
        display: none; /* Hide these elements during print */
    }
    }
</style>
</head>
<body>
    <h1>GPA and Graduation Tracker</h1>
	
	    <h2 style="align-items: center; text-align: center; width: 60%; margin: 3rem auto;">Bachelor of Accounting 202410</h2>

    <div class="content">

 
  
         <table style="background: #cceeff;">
            <tr>
                <td colspan="3">Student Name:
                <input type="text" id="studentName" placeholder="Enter your name" onchange="saveStudentInfo()" style="width: 70%; padding: 8px; font-size: 18px;"></td>
            </tr>
            <tr>
                <td colspan="3">Student ID:
                <input type="text" id="studentId" placeholder="Enter your ID" onchange="saveStudentInfo()" style="width: 30%; padding: 8px; font-size: 18px;"></td>
            </tr>
            <tr colspan="3" >
                <td style="font-size:36px; font-weight: bold;">Your GPA: <span id="gpa">0.00</span></td>
				  <td class="buttons"  style="width: 120%;" colspan="4" ><button onclick="clearData()">Clear Data</button><button onclick="printAsPDF()">Print as PDF</button></td>

            </tr>
			
			 <!--tr-->
				  <!--td class="buttons"  style="width: 170%;" colspan="4" ><button onclick="clearData()">Clear Data</button><button onclick="printAsPDF()">Print as PDF</button><button onclick="calculateGPA()">Save Data</button></td-->
            	<!--td class="buttons"  style="width: 170%;" colspan="4" ><button onclick="clearData()">Clear Data</button><button onclick="printAsPDF()">Print as PDF</button><button onclick="calculateGPA()">Save Data</button><button onclick="lockSelectedCourses()"><p  style="background-color:red">Lock Selected</p></button></td-->

			<!--/tr-->
			

		</table>
  
  
  
        
		
<!--div>
    <label>
        <input type="checkbox" id="checkpoint" onchange="toggleSelections()"> Lock Selected Courses
    </label>
</div-->
		
		       <form id="gpaForm">
            <!-- Courses will be dynamically added here -->
        </form>
    </div>

    <div id="GPAAlert" class="fixed-gpa-container" >
        <h2>GPA: <span id="gpaTop">0.00</span></h2>
        <button onclick="closeGPAAlert()">Close</button>
    </div>
	
	

<!-- HTML for the custom alert modal -->
<!--div id="customAlert" style="display:none; position: fixed; bottom: 532px; left: 13%; transform: translateX(-50%); z-index: 1000;">
    <div style="background-color:white; padding:20px; border:1px solid black; border-radius: 8px; width: 200px; text-align: center;">
        <span id="alertMessage" style="font-size: 18px;"></span>
        <br><br>
        <button onclick="closeCustomAlert()">Close</button>
    </div>
</div-->

<div id="customAlert" class="customAlert">
         <span id="alertMessage" style="font-size: 18px;"></span>
        <br><br>
        <button onclick="closeCustomAlert()">Close</button>
 </div>

    <footer>
        <p>This program helps students calculate GPA and track course plans but does not replace the campus portal or academic advising.</p>
        <p>&copy; 2024 GPA Tracker | Designed by Dr. Fawaz Hrahsheh</p>
		<input type="checkbox" id="checkpoint" onchange="loadLockedCourseStates()">
    </footer>

    
 	 <script>
        const courses = [
            // Course data as defined in your original code
{ Year: "Year 1", Semester: "Semester 1", course_code: "MGT 1003", course_name: "Principles of Management", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 1", course_code: "ACC 1003", course_name: "Fundamentals of Financial Accounting", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 1", course_code: "BUS 1023", course_name: "Applied Mathematics for Business", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 1", course_code: "ECO 1003", course_name: "Microeconomics", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 1", course_code: "LSC 1103", course_name: "Professional Written Communication", credit_hours: 3, prerequisites: "none" },

{ Year: "Year 1", Semester: "Semester 2", course_code: "ACC 1103", course_name: "Managerial Accounting", credit_hours: 3, prerequisites: "ACC 1003" },
{ Year: "Year 1", Semester: "Semester 2", course_code: "ECO 1103", course_name: "Macroeconomics", credit_hours: 3, prerequisites: "ECO 1003" },
{ Year: "Year 1", Semester: "Semester 2", course_code: "LSC 1503", course_name: "Professional Spoken Communication", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 2", course_code: "MRK 1103", course_name: "Principles of Marketing", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 1", Semester: "Semester 2", course_code: "MGT 1013", course_name: "Managing Organizational Behavior", credit_hours: 3, prerequisites: "none" },

{ Year: "Year 2", Semester: "Semester 3", course_code: "FIN 2003", course_name: "Financial Management", credit_hours: 3, prerequisites: "ACC 1003" },
{ Year: "Year 2", Semester: "Semester 3", course_code: "BUS 2403", course_name: "Innovation and Entrepreneurship", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 2", Semester: "Semester 3", course_code: "STS 2003", course_name: "Business Statistic", credit_hours: 3, prerequisites: "BUS 1023" },
{ Year: "Year 2", Semester: "Semester 3", course_code: "ACC 2103", course_name: " Intermediate Financial Accounting I", credit_hours: 3, prerequisites: "ACC 1003" },
{ Year: "Year 2", Semester: "Semester 3", course_code: "AES 1003", course_name: "Emirati Studies", credit_hours: 3, prerequisites: "none" },

{ Year: "Year 2", Semester: "Semester 4", course_code: "ACC 2003", course_name: "Cost Accounting", credit_hours: 3, prerequisites: "ACC 1003" },
{ Year: "Year 2", Semester: "Semester 4", course_code: "ACC 2123", course_name: "Intermediate Financial Accounting II", credit_hours: 3, prerequisites: "ACC 2103" },
{ Year: "Year 2", Semester: "Semester 4", course_code: "BIS 2103", course_name: "Business Information Systems", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 2", Semester: "Semester 4", course_code: "BUS 2503", course_name: "AI for Business", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 2", Semester: "Semester 4", course_code: "MGT 2113", course_name: "Ethics and Sustainability in Business", credit_hours: 3, prerequisites: "none" },

{ Year: "Year 3", Semester: "Semester 5", course_code: "ACC 3013", course_name: "Taxation", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 3", Semester: "Semester 5", course_code: "ACC 3113", course_name: "Auditing", credit_hours: 3, prerequisites: "ACC 2103" },
{ Year: "Year 3", Semester: "Semester 5", course_code: "BUS 3013", course_name: "Data Science for Business", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 3", Semester: "Semester 5", course_code: "LAW 3103", course_name: "Business and Commercial Law", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 3", Semester: "Semester 5", course_code: "MGT 3013", course_name: "Project Management & Bus. Simulation", credit_hours: 3, prerequisites: "none" },

{ Year: "Year 3", Semester: "Semester 6", course_code: "ACC 3103", course_name: "Accounting Information Systems", credit_hours: 3, prerequisites: "BIS 2103" },
{ Year: "Year 3", Semester: "Semester 6", course_code: "ACC 3616", course_name: "ACC Industry Project I", credit_hours: 6, prerequisites: "none" },
{ Year: "Year 3", Semester: "Semester 6", course_code: "BUS 3123", course_name: "Business Research Methods", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 3", Semester: "Semester 6", course_code: "FIN 3003", course_name: "Corporate Finance", credit_hours: 3, prerequisites: "FIN 2003" },

{ Year: "Year 4", Semester: "Semester 7", course_code: "ACC 4013", course_name: "International Fin. Rep. Standards", credit_hours: 3, prerequisites: "ACC  2123" },
{ Year: "Year 4", Semester: "Semester 7", course_code: "ACC 4043", course_name: "Advanced Auditing", credit_hours: 3, prerequisites: "ACC 3113" },
{ Year: "Year 4", Semester: "Semester 7", course_code: "ACC 4053", course_name: "Advanced Financial Accounting", credit_hours: 3, prerequisites: "ACC  2123" },
{ Year: "Year 4", Semester: "Semester 7", course_code: "ACC 4063", course_name: "Internal Auditing", credit_hours: 3, prerequisites: "ACC  2123" },
{ Year: "Year 4", Semester: "Semester 7", course_code: "ACC 4153", course_name: "Financial Reporting", credit_hours: 3, prerequisites: "ACC  2123" },

{ Year: "Year 4", Semester: "Semester 8", course_code: "ACC 4173", course_name: "Contemporary Issues in Accounting", credit_hours: 3, prerequisites: "none" },
{ Year: "Year 4", Semester: "Semester 8", course_code: "ACC 4183", course_name: "Business Analytics for Accountant", credit_hours: 3, prerequisites: "ACC 3103" },
{ Year: "Year 4", Semester: "Semester 8", course_code: "ACC 4213", course_name: "Accounting Capstone Research Project", credit_hours: 3, prerequisites: "BUS 3123" },
{ Year: "Year 4", Semester: "Semester 8", course_code: "ACC 4716", course_name: "ACC Industry Project II", credit_hours: 6, prerequisites: "ACC 31616" }			
			];

        const gradePoints = {
            "A": 4.0, "A-": 3.7, "B+": 3.3, "B": 3.0, "B-": 2.7,
            "C+": 2.3, "C": 2.0, "C-": 1.7, "D+": 1.3, "D": 1.0, "F": 0.0
        };


function calculateGPA() {
    let totalPoints = 0;
    let totalCredits = 0;
    const form = document.getElementById('gpaForm');

    // Get all select elements within the form
    const selects = form.querySelectorAll('select');

    selects.forEach(select => {
        const grade = select.value; // Get the value of the select element
        const courseCode = select.name; // Get the course code from the name attribute

        // Find the course data to get credit hours
        const course = courses.find(course => course.course_code === courseCode);
        if (course && grade && grade in gradePoints) {
            totalPoints += gradePoints[grade] * course.credit_hours;
            totalCredits += course.credit_hours;
        }
    });

    const gpa = totalCredits > 0 ? (totalPoints / totalCredits).toFixed(2) : "0.00";
    showMessage('', `${totalCredits} credit hours have been selected`);

    // Update both GPA displays
    document.getElementById('gpa').innerText = gpa;
    document.getElementById('gpaTop').innerText = gpa; // Update the top GPA display

    // Save GPA to localStorage
    localStorage.setItem('gpa', gpa);

    // Check GPA value and apply or remove red color
    if (parseFloat(gpa) < 2) {
        document.getElementById('gpa').classList.add("grade-f"); // Add red color if GPA is less than 2
        document.getElementById('gpaTop').classList.add("grade-f"); // Add red color to top GPA display
    } else {
        document.getElementById('gpa').classList.remove("grade-f"); // Remove red color if GPA is 2 or more
        document.getElementById('gpaTop').classList.remove("grade-f"); // Remove red color from top GPA display
    }
}

function loadCourses() {
    const form = document.getElementById('gpaForm');
    let currentYear = "";
    let currentSemester = "";
    let table = null;
    let SemesterSection = null;

    courses.forEach(course => {
        if (course.Year !== currentYear || course.Semester !== currentSemester) {
            currentYear = course.Year;
            currentSemester = course.Semester;

            // Create a container for each Semester section
            SemesterSection = document.createElement('div');
            SemesterSection.classList.add('Semester-section'); // Add the new class

            const header = document.createElement('h2');
            header.innerText = `${currentYear} - ${currentSemester}`;
            SemesterSection.appendChild(header);

            table = document.createElement('table');
            const headerRow = document.createElement('tr');
            headerRow.innerHTML = `<th>Course Code</th><th>Course Name</th><th>Credit Hours</th><th>Grade</th>`;
            table.appendChild(headerRow);

            SemesterSection.appendChild(table);
            form.appendChild(SemesterSection); // Append to form
        }

        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="course-code" onclick="showPrerequisites('${course.course_code}', '${course.prerequisites}')">${course.course_code}</td>
            <td>${course.course_name}</td>
            <td>${course.credit_hours}</td>
            <td>
                <input type="checkbox" class="lock-checkbox" onchange="toggleGradeLock(this, '${course.course_code}')" />
                <select name="${course.course_code}" id="${course.course_code}" onchange="saveGrades(); updateGradeColor(this); calculateGPA();">
                    <option value="">  </option>
                    <option value="A">A</option>
                    <option value="A-">A-</option>
                    <option value="B+">B+</option>
                    <option value="B">B</option>
                    <option value="B-">B-</option>
                    <option value="C+">C+</option>
                    <option value="C">C</option>
                    <option value="C-">C-</option>
                    <option value="D+">D+</option>
                    <option value="D">D</option>
                    <option value="F">F</option>
                    <option value="P">P</option>
                </select>
            </td>
        `;
        table.appendChild(row);
    });

    loadGrades();
    loadGPA();
}

function toggleGradeLock(checkbox, courseCode) {
    const selectElement = document.getElementById(courseCode);
    if (checkbox.checked) {
        selectElement.disabled = true; // Lock the grade
        selectElement.style.backgroundColor = "white"; // Change background color to indicate it's locked
    } else {
        selectElement.disabled = false; // Unlock the grade
        selectElement.style.backgroundColor = "#cceeff"; // Reset background color
    }
}


        function saveGrades() {
            const grades = {};

            courses.forEach(course => {
                const grade = document.getElementById(course.course_code)?.value;
                if (grade) {
                    grades[course.course_code] = grade;
                }
            });

            localStorage.setItem('grades', JSON.stringify(grades));
        }


function showPrerequisites(courseCode, prerequisites) {
    const message = `Pre-req. for <span>${courseCode}</span>: <span style="font-weight: bold; color: red;"><br>${prerequisites || 'None'}</span>`;
    document.getElementById('alertMessage').innerHTML = message;
    document.getElementById('customAlert').style.display = 'block';
}

function showMessage(courseCode, prerequisites) {
    const message = ` <span style="font-weight: bold; color: red;"><br>${prerequisites || 'None'}</span>`;
    document.getElementById('alertMessage').innerHTML = message;
    document.getElementById('customAlert').style.display = 'block';
}

function closeCustomAlert() {
    document.getElementById('customAlert').style.display = 'none';
}

function closeGPAAlert() {
    document.getElementById('GPAAlert').style.display = 'none';
}

// Example usage

function toggleSelections() {
    const isChecked = document.getElementById('checkpoint').checked;
    localStorage.setItem('checkpointLocked', isChecked);
    const form = document.getElementById('gpaForm');

    courses.forEach(course => {
        const selectElement = document.getElementById(course.course_code);
        if (selectElement) {
            if (!isChecked) {
                // Unlock all courses
                selectElement.disabled = false;
                selectElement.style.backgroundColor = "#cceeff";
            } else if (selectElement.value !== "") {
                // Lock only courses with grades
                selectElement.disabled = true;
                selectElement.style.backgroundColor = "white";
            }
			

        } 

    });
	
}

function loadCheckpointState() {
    const isChecked = localStorage.getItem('checkpointLocked') === 'true'; // Retrieve the state
    document.getElementById('checkpoint').checked = isChecked; // Set the checkbox state
    toggleSelections(); // Call to update the select elements based on the checkbox state
}

function lockSelectedCourses() {
    const form = document.getElementById('gpaForm');
    let lockedCount = 0;
    
    courses.forEach(course => {
        const selectElement = document.getElementById(course.course_code);
        if (selectElement && selectElement.value !== "") {
            selectElement.disabled = true;
            selectElement.style.backgroundColor = "white";
            lockedCount++;
        }
    });
    

	
    // Update the checkpoint state
    document.getElementById('checkpoint').checked = true;
    localStorage.setItem('checkpointLocked', true);
    
    // Show confirmation message 
	showMessage('', `${lockedCount} courses have been locked`);
 	
}

function loadGrades() {
        const savedGrades = JSON.parse(localStorage.getItem('grades')) || {};

        courses.forEach(course => {
            const grade = savedGrades[course.course_code];
            const selectElement = document.getElementById(course.course_code);
            if (grade) {
                selectElement.value = grade;
                if (grade === "F") {
                    selectElement.classList.add("grade-f");
                } else {
                    selectElement.classList.remove("grade-f");
                }
            }
        });

        toggleSelections(); // Ensure the correct state of selects
    }

        function saveStudentInfo() {
            const studentName = document.getElementById('studentName').value;
            const studentId = document.getElementById('studentId').value;

            localStorage.setItem('studentName', studentName);
            localStorage.setItem('studentId', studentId);
        }

        function loadStudentInfo() {
            const studentName = localStorage.getItem('studentName');
            const studentId = localStorage.getItem('studentId');

            if (studentName) {
                document.getElementById('studentName').value = studentName;
            }
            if (studentId) {
                document.getElementById('studentId').value = studentId;
            }
        }

        function updateGradeColor(selectElement) {
            if (selectElement.value === "F") {
                selectElement.classList.add("grade-f");
            } else {
                selectElement.classList.remove("grade-f");
            }
        }


            function printAsPDF() {
                window.print();
            }

      function clearData() {
            localStorage.clear();
            document.getElementById('gpaForm').reset();
            document.getElementById('gpa').innerText = "0.00";
			document.getElementById('gpaTop').innerText = "0.00";
            document.getElementById('studentName').value = "";
            document.getElementById('studentId').value = "";
            //alert("All data cleared."); // Added user confirmation
			loadLockedCourseStates();
        }

        function openInNewTab() {
            window.open(window.location.href, '_blank');
        }



        function loadGPA() {
            const gpa = localStorage.getItem('gpa');

            if (gpa) {
                document.getElementById('gpa').innerText = gpa;
                document.getElementById('gpaTop').innerText = gpa; // Update the top GPA display
                if (parseFloat(gpa) < 2) {
                    document.getElementById('gpa').classList.add("grade-f");
                    document.getElementById('gpaTop').classList.add("grade-f");
                }
            }
        }
		

			function toggleGradeLock(checkbox, courseCode) {
    const selectElement = document.getElementById(courseCode);
    if (checkbox.checked) {
        selectElement.disabled = true; // Lock the grade
        selectElement.style.backgroundColor = "white"; // Change background color to indicate it's locked
    } else {
        selectElement.disabled = false; // Unlock the grade
        selectElement.style.backgroundColor = "#cceeff"; // Reset background color
    }
    
    // Save the state of the checkbox to localStorage
    const lockedCourses = JSON.parse(localStorage.getItem('lockedCourses')) || {};
    lockedCourses[courseCode] = checkbox.checked;
    localStorage.setItem('lockedCourses', JSON.stringify(lockedCourses));
}

// Function to load the state of the checkboxes
function loadLockedCourseStates() {
    const lockedCourses = JSON.parse(localStorage.getItem('lockedCourses')) || {};

    courses.forEach(course => {
        const checkbox = document.querySelector(`input[type="checkbox"][onchange*="${course.course_code}"]`);
        if (checkbox) {
            checkbox.checked = lockedCourses[course.course_code] || false; // Set checkbox state
            toggleGradeLock(checkbox, course.course_code); // Update select element based on checkbox state
        }
    });
}

window.onload = function() {
    loadCheckpointState(); // Load the checkpoint state first
    loadCourses();
    loadStudentInfo();
    calculateGPA();
    loadGPA(); // Load previous GPA value
    loadLockedCourseStates(); // Load the locked course states
};
    </script>	
    
</body>
</html>
