<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edu Authorities Student Management System || Add Graduate Student</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="assets/vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="assets/vendors/css/vendor.bundle.base.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="assets/vendors/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="assets/vendors/chartist/chartist.min.css">
    <link rel="stylesheet" href="assets/vendors/select2/select2.min.css">
    <link rel="stylesheet" href="assets/vendors/select2-bootstrap-theme/select2-bootstrap.min.css">
    <!-- End plugin css for this page -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="assets/css/style.css" />
    <!-- Additional CSS for Form -->
    <style>
        /* Adjust base font size */
        body {
            font-size: 14px;
        }
        /* Customize form styles */
        .form-section {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 25px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: block; /* Ensure it can be displayed */
        }
        .form-section h1, .form-section h2, .form-section h3 {
            margin-bottom: 15px;
            font-size: 1rem;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 5px;
        }
        .form-group label {
            font-weight: 500;
        }
        .form-control, .form-check-label {
            font-size: 0.875rem;
        }
        .btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        /* Section headers */
        .section-header {
            background-color: #343a40;
            color: #fff;
            padding: 8px 12px;
            border-radius: 5px 5px 0 0;
            margin-bottom: -1px;
            font-size: 0.95rem;
        }
        /* Form container */
        .form-container {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        /* Smaller radio buttons */
        .small-radio .form-check-input {
            width: 16px;
            height: 16px;
            vertical-align: middle; /* Align radio buttons vertically to the middle */
            margin-top: 1px; /* Reset margin to improve alignment */
            margin-left: 10px;
        }

        .small-radio .form-check-label {
            margin-left: 0.5rem; /* Adjust spacing between radio button and label */
            font-size: 0.875rem;
            vertical-align: middle; /* Align label vertically to the middle */
            margin-left: 40px;
        }

        /* Available Semesters to Enroll to Table */
        .semester-table {
            width: 100%;
            height: 50%;
            border-collapse: collapse;
            font-size: 0.75rem; /* Smaller font */
            margin-top: 10px;
        }
        .semester-table th, .semester-table td {
            border: 1px solid #dee2e6;
            padding: 8px;
            text-align: left;
        }
        .semester-table th {
            background-color: #f1f1f1;
        }
        .extension-period {
            background-color: #d1ecf1; /* Light Blue */
        }
        .pandemic-adjustment {
            background-color: #f8d7da; /* Light Red */
        }
        .semester-number {
            width: 5%;
        }
        .semester-name {
            width: 95%;
        }

        /* Disabled Course Sections */
        .disabled-section {
            pointer-events: none;
            opacity: 0.6;
        }
    </style>
    <!-- Google Translate -->
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
        }
    </script>
    <!-- NicEdit -->
    <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
    <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    <!-- Password Check Script -->
    <script type="text/javascript">
        function checkpass() {
            if (document.changepassword.newpassword.value != document.changepassword.confirmpassword.value) {
                alert('New Password and Confirm Password field does not match');
                document.changepassword.confirmpassword.focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body>

<div class="container-scroller">
    <!-- Navbar -->
    <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex align-items-center">
            <a class="navbar-brand brand-logo ml-auto text-right" href="dashboard.php">
                <img src="assets/images/logo.png" alt="logo"/>
            </a>
            <a class="navbar-brand brand-logo-mini" href="dashboard.php"><img src="assets/images/logo.png" alt="logo"/></a>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center flex-grow-1">
            <h5 class="mb-0 font-weight-medium d-none d-lg-flex mx-auto">EVALUATION REGULAR STUDENTS</h5>
            <ul class="navbar-nav navbar-nav-right ml-auto">
                <li class="nav-item dropdown d-none d-xl-inline-flex user-dropdown">
                    <a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
                        <img class="img-xs rounded-circle ml-2" src="assets/images/faces/face8.jpg" alt="Profile image"> <span class="font-weight-normal"> Mayuri K </span></a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
                        <div class="dropdown-header d-flex">
                            <img class="img-md rounded-circle" src="assets/images/faces/face8.jpg" width="60px" alt="Profile image">
                            <div>
                                <p class="mb-1 mt-3">Mayuri K</p>
                                <p class="font-weight-light text-muted mb-0"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                            </div>
                        </div>
                        <a class="dropdown-item" href="profile.php"><i class="dropdown-item-icon icon-user text-primary"></i> My Profile</a>
                        <a class="dropdown-item" href="change-password.php"><i class="dropdown-item-icon icon-energy text-primary"></i> Change Password</a>
                        <a class="dropdown-item" href="logout.php"><i class="dropdown-item-icon icon-power text-primary"></i> Sign Out</a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
                <span class="icon-menu"></span>
            </button>
        </div>
    </nav>
    <!-- End Navbar -->

    <div class="container-fluid page-body-wrapper">
        <!-- Sidebar -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="dashboard.php">
                        <i class="icon-home menu-icon"></i>
                        <span class="menu-title">Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#ui-basic1" aria-expanded="false" aria-controls="ui-basic1">
                        <i class="icon-people menu-icon"></i>
                        <span class="menu-title">Students</span>
                    </a>
                    <div class="collapse" id="ui-basic1">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"> <a class="nav-link" href="add-students.php">Add Students</a></li>
                            <li class="nav-item"> <a class="nav-link" href="manage-students.php">Manage Students</a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="icon-doc menu-icon"></i>
                        <span class="menu-title">Notice</span>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"> <a class="nav-link" href="add-notice.php"> Add Notice </a></li>
                            <li class="nav-item"> <a class="nav-link" href="manage-notice.php"> Manage Notice </a></li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="between-dates-reports.php">
                        <i class="icon-flag menu-icon"></i>
                        <span class="menu-title">Reports</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="search.php">
                        <i class="icon-magnifier menu-icon"></i>
                        <span class="menu-title">Search</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- End Sidebar -->

        <!-- Main Panel -->
        <div class="main-panel">
            <div class="content-wrapper">
                <!-- Page Header -->
                <div class="page-header">
                    <h3 class="page-title"> Doctor of Philosophy (Philippine Studies) - Add Student </h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page"> Add Student</li>
                        </ol>
                    </nav>
                </div>
                <!-- End Page Header -->

                <!-- Graduate Program Form -->
                <div class="form-container">
                    <div class="form-section">
                        <form action="save_student_data.php" method="POST">
                            <h1>Section 1: Personal Information</h1>

                            <!-- Plan Selection -->
                            <div class="form-group">
                                <label>Plan:</label>
                                <div class="radio-group row small-radio">
                                    <div class="form-check col-md-3">
                                        <input class="form-check-input" type="radio" name="plan" value="A" required>
                                        <label class="form-check-label">Plan A</label>
                                    </div>
                                    <div class="form-check col-md-3">
                                        <input class="form-check-input" type="radio" name="plan" value="B">
                                        <label class="form-check-label">Plan B</label>
                                    </div>
                                    <div class="form-check col-md-3">
                                        <input class="form-check-input" type="radio" name="plan" value="C">
                                        <label class="form-check-label">Plan C</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Name Information -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>Surname:</label>
                                        <input type="text" class="form-control" name="surname" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label>First Name:</label>
                                        <input type="text" class="form-control" name="first_name" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Middle Name:</label>
                                        <input type="text" class="form-control" name="middle_name">
                                    </div>
                                </div>
                            </div>

                            <!-- Email and Cellphone Information -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>UP Email Address:</label>
                                        <input type="email" class="form-control" name="up_email" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Alternate Email Address:</label>
                                        <input type="email" class="form-control" name="alternate_email">
                                    </div>
                                    <div class="col-md-4">
                                        <label>Cellphone Number:</label>
                                        <input type="tel" class="form-control" name="cellphone_number" required>
                                    </div>
                                </div>
                            </div>

                            <!-- Postgraduate Degree, Institution, and Program Type -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>Postgraduate Degree:</label>
                                        <div id="postgraduate_degrees_container">
                                            <input type="text" class="form-control mb-2" name="postgraduate_degree[]" required>
                                        </div>
                                        <button type="button" class="btn btn-primary btn-sm" onclick="addPostgraduateDegree()">Add More</button>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Institution:</label>
                                        <div id="institutions_container">
                                            <input type="text" class="form-control mb-2" name="institution[]" required>
                                        </div>
                                        <button type="button" class="btn btn-primary btn-sm" onclick="addInstitution()">Add More</button>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Program Type:</label>
                                        <div class="radio-group row small-radio">
                                            <div class="form-check col-md-6">
                                                <input class="form-check-input" type="radio" name="program_type" value="related" required>
                                                <label class="form-check-label">Related</label>
                                            </div>
                                            <div class="form-check col-md-6">
                                                <input class="form-check-input" type="radio" name="program_type" value="unrelated">
                                                <label class="form-check-label">Unrelated</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Enrollment Information -->
                            <div class="form-group">
                                <label>Semester and Academic Year of 1st Enrollment to the Program:</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <select class="form-control" name="first_enrollment_semester" id="first_enrollment_semester" required>
                                            <option value="">Select Semester</option>
                                            <option value="1st Semester">1st Semester</option>
                                            <option value="2nd Semester">2nd Semester</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <select class="form-control" name="first_enrollment_year" id="first_enrollment_year" required>
                                            <option value="">Select Year</option>
                                            <script>
                                                for (let year = 1998; year <= 2050; year++) {
                                                    document.write(`<option value="${year}">${year}-${year + 1}</option>`);
                                                }
                                            </script>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- MRR Calculator -->
                            <div class="form-group">
                                <h3>MRR Calculator</h3>
                                <p>Start from the Semester and Academic Year of 1st Enrollment to the Program</p>
                                <button type="button" class="btn btn-success btn-sm" onclick="calculateMRR()">Calculate MRR</button>
                                <div id="mrr_result" class="mt-3"></div>
                            </div>

                            <!-- Remarks and Program Adviser -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>Remarks:</label>
                                        <input type="text" class="form-control" name="remarks">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Program Adviser:</label>
                                        <select class="form-control" name="program_adviser" required>
                                            <option value="">Select Adviser</option>
                                            <option value="ac_coordinator">AC Coordinator</option>
                                            <option value="cal_coordinator">CAL Coordinator</option>
                                            <option value="cssp_coordinator">CSSP Coordinator</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                           <!-- Status Selection -->
                           <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>Status:</label>
                                        <select class="form-control" name="status" onchange="toggleInactiveFields(this.value)" required>
                                            <option value="">Select Status</option>
                                            <option value="active_enrolled">Active: Enrolled</option>
                                            <option value="active_residence">Active: Residence</option>
                                            <option value="inactive_loa">Inactive: LOA</option>
                                            <option value="inactive_awol">Inactive: AWOL</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Inactive Fields (Initially Hidden) -->
                            <div id="inactive_fields" style="display: none;" class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label>Semester and Academic Year of Last Enrollment:</label>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <select class="form-control" name="last_enrollment_semester" id="last_enrollment_semester">
                                                    <option value="">Select Semester</option>
                                                    <option value="1st Semester">1st Semester</option>
                                                    <option value="2nd Semester">2nd Semester</option>
                                                    <option value="Midyear">Midyear</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <select class="form-control" name="last_enrollment_year" id="last_enrollment_year">
                                                    <option value="">Select Year</option>
                                                    <script>
                                                        for (let year = 1998; year <= 2050; year++) {
                                                            document.write(`<option value="${year}">${year}-${year + 1}</option>`);
                                                        }
                                                    </script>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label>Reason for LOA/AWOL:</label>
                                        <input type="text" class="form-control" name="reason_loa_awol">
                                    </div>
                                </div>
                            </div>

                            <!-- Section 2: Course Information -->
                            <div id="course_information_section" style="display: none;" class="form-section">
                                <h1>Section 2: Course Information</h1>
                                <!-- Core Courses -->
                                <h2>1. Core Courses (Allowed Units: 9 Units)</h2>
                                <div id="core_courses">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3">
                                            <label>Subject:</label>
                                            <input type="text" class="form-control" name="core_subject[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Instructor:</label>
                                            <input type="text" class="form-control" name="core_instructor[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Semester and Year Taken:</label>
                                            <select class="form-control" name="core_semester" required>
    <option value="">Select Semester</option>
</select>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Grade:</label>
                                            <input type="text" class="form-control" name="core_grade[]" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Unit:</label>
                                            <input type="number" class="form-control" name="core_unit[]" min="1" max="3" onchange="checkCoreCompletion()" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="addCoreCourse()">+</button>
                                        </div>
                                    </div>
                                    <div id="core_courses_list"></div>
                                </div>

                                <!-- Qualifying Exam Section -->
                                <div id="qualifying_exam_section" style="display: none;" class="form-group">
                                    <h3>Qualifying Exam</h3>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label>Date of Qualifying Exam:</label>
                                            <input type="date" class="form-control" name="qualifying_exam_date">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>Result:</label>
                                            <select class="form-control" name="qualifying_exam_result" onchange="toggleCourseSections(this.value)">
                                                <option value="">Select Result</option>
                                                <option value="pass">Pass</option>
                                                <option value="retake">Retake</option>
                                                <option value="fail">Fail</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Other Courses Section -->
                            <div id="other_courses" style="display: none;" class="form-section disabled-section">
                                <!-- Major Courses -->
                                <h2>2. Major Courses (Allowed Units: 12 Units)</h2>
                                <div id="major_courses">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3">
                                            <label>Subject:</label>
                                            <input type="text" class="form-control" name="major_subject[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Instructor:</label>
                                            <input type="text" class="form-control" name="major_instructor[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Semester and Year Taken:</label>
                                            <select class="form-control" name="major_semester" required>
                                                <option value="">Select Semester</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Grade:</label>
                                            <input type="text" class="form-control" name="major_grade[]" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Unit:</label>
                                            <input type="number" class="form-control" name="major_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="addMajorCourse()">+</button>
                                        </div>
                                    </div>
                                    <div id="major_courses_list"></div>
                                </div>
                                <br>

                                <!-- Cognate Courses -->
                                <h2>3. Cognate Courses (Allowed Units: 9 Units)</h2>
                                <div id="cognate_courses">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3">
                                            <label>Subject:</label>
                                            <input type="text" class="form-control" name="cognate_subject[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Instructor:</label>
                                            <input type="text" class="form-control" name="cognate_instructor[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Semester and Year Taken:</label>
                                            <select class="form-control" name="cognate_semester" required>
                                                <option value="">Select Semester</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Grade:</label>
                                            <input type="text" class="form-control" name="cognate_grade[]" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Unit:</label>
                                            <input type="number" class="form-control" name="cognate_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="addCognateCourse()">+</button>
                                        </div>
                                    </div>
                                    <div id="cognate_courses_list"></div>
                                </div>
                                <br>

                                <!-- Elective Courses -->
                                <h2>4. Elective Courses (Allowed Units: 6 Units)</h2>
                                <div id="elective_courses">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3">
                                            <label>Subject:</label>
                                            <input type="text" class="form-control" name="elective_subject[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Instructor:</label>
                                            <input type="text" class="form-control" name="elective_instructor[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Semester and Year Taken:</label>
                                            <select class="form-control" name="elective_semester" required>
                                                <option value="">Select Semester</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Grade:</label>
                                            <input type="text" class="form-control" name="elective_grade[]" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Unit:</label>
                                            <input type="number" class="form-control" name="elective_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="addElectiveCourse()">+</button>
                                        </div>
                                    </div>
                                    <div id="elective_courses_list"></div>
                                </div>
                                <br>

                                <!-- Comprehensive Exam Section -->
                                <div id="comprehensive_exam_section" style="display: none;" class="form-group">
                                    <h3>Comprehensive Exam</h3>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label>Date of Comprehensive Exam:</label>
                                            <input type="date" class="form-control" name="comprehensive_exam_date">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label>Result:</label>
                                            <select class="form-control" name="comprehensive_exam_result" onchange="toggleDissertationSection(this.value)">
                                                <option value="">Select Result</option>
                                                <option value="pass">Pass</option>
                                                <option value="retake">Retake</option>
                                                <option value="fail">Fail</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Dissertation Section -->
                            <div id="dissertation_section" style="display: none;" class="form-section disabled-section">
                                <h1>Section 3: Dissertation Information</h1>
                                <h2>Dissertation Courses (Allowed Units: 12 Units)</h2>
                                <div id="dissertation_courses">
                                    <div class="form-row align-items-end">
                                        <div class="form-group col-md-3">
                                            <label>Subject:</label>
                                            <input type="text" class="form-control" name="dissertation_subject[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Instructor:</label>
                                            <input type="text" class="form-control" name="dissertation_instructor[]" required>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label>Semester and Year Taken:</label>
                                            <select class="form-control" name="dissertation_semester" required>
                                                <option value="">Select Semester</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Grade:</label>
                                            <input type="text" class="form-control" name="dissertation_grade[]" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <label>Unit:</label>
                                            <input type="number" class="form-control" name="dissertation_unit[]" min="1" max="3" required>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <button type="button" class="btn btn-primary btn-sm" onclick="addDissertationCourse()">+</button>
                                        </div>
                                    </div>
                                    <div id="dissertation_courses_list"></div>
                                </div>
                                <br>

                                <!-- Dissertation Details -->
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Dissertation Title:</label>
                                            <input type="text" class="form-control" name="dissertation_title" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Dissertation Adviser:</label>
                                            <input type="text" class="form-control" name="dissertation_adviser" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Panel 1:</label>
                                            <input type="text" class="form-control" name="panel_1" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Panel 2:</label>
                                            <input type="text" class="form-control" name="panel_2" required>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Panel 3:</label>
                                            <input type="text" class="form-control" name="panel_3" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Checklist -->
                                <div class="form-group">
                                    <h2>Checklist</h2>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="proposal_defense" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Proposal Defense</label>
                                        <input type="date" class="form-control mt-1" name="proposal_defense_date">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="proposal_defended" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Proposal Defended</label>
                                        <input type="date" class="form-control mt-1" name="proposal_defended_date">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="field_work" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Field Work/Dissertation Writing</label>
                                        <input type="date" class="form-control mt-1" name="field_work_date">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="final_oral_defense" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Final Oral Defense</label>
                                        <input type="date" class="form-control mt-1" name="final_oral_defense_date">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="final_oral_defended" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Final Oral Defended</label>
                                        <input type="date" class="form-control mt-1" name="final_oral_defended_date">
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="candidate_for_graduation" onchange="toggleGraduationSection()">
                                        <label class="form-check-label"> Candidate for Graduation</label>
                                        <input type="date" class="form-control mt-1" name="candidate_for_graduation_date">
                                    </div>
                                </div>
                            </div>

                            <!-- Graduation Section -->
                            <div id="graduation_section" style="display: none;" class="form-section disabled-section">
                                <h1>Section 4: Graduation Information</h1>
                                <div class="form-group">
                                    <label>Semester and Academic Year of Graduation:</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-control" name="graduation_semester" id="graduation_semester" required>
                                                <option value="">Select Semester</option>
                                                <option value="1st Semester">1st Semester</option>
                                                <option value="2nd Semester">2nd Semester</option>
                                                <option value="Midyear">Midyear</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-control" name="graduation_year" id="graduation_year" required>
                                                <option value="">Select Year</option>
                                                <script>
                                                    for (let year = 1998; year <= 2050; year++) {
                                                        document.write(`<option value="${year}">${year}-${year + 1}</option>`);
                                                    }
                                                </script>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Date of Commencement:</label>
                                    <input type="date" class="form-control" name="commencement_date" required>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- End Graduate Program Form -->
            </div>
            <!-- content-wrapper ends -->

            <!-- Footer -->
            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright &copy; 2024 <a href="https://www.mayurik.com/" target="_blank">Mayuri K</a>. All rights reserved.</span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Edu Authorities <i class="icon-heart text-danger"></i></span>
                </div>
            </footer>
            <!-- End Footer -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- JS Scripts -->
<script src="assets/vendors/js/vendor.bundle.base.js"></script>
<!-- Plugin js for this page -->
<script src="assets/vendors/select2/select2.min.js"></script>
<script src="assets/vendors/typeahead.js/typeahead.bundle.min.js"></script>
<script src="assets/vendors/chart.js/Chart.min.js"></script>
<script src="assets/vendors/moment/moment.min.js"></script>
<script src="assets/vendors/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendors/chartist/chartist.min.js"></script>
<!-- End plugin js for this page -->
<!-- Injected scripts -->
<script src="assets/js/off-canvas.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/typeahead.js"></script>
<script src="assets/js/select2.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Custom Scripts for Form Functionality -->
<script>
    // Global array to store available semesters
    let availableSemesters = [];

    // Function to add Postgraduate Degree fields
    function addPostgraduateDegree() {
        const container = document.getElementById('postgraduate_degrees_container');
        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'postgraduate_degree[]';
        input.className = 'form-control mb-2';
        input.required = true;
        container.appendChild(input);
    }

    // Function to add Institution fields
    function addInstitution() {
        const container = document.getElementById('institutions_container');
        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'institution[]';
        input.className = 'form-control mb-2';
        input.required = true;
        container.appendChild(input);
    }

    // Function to toggle Inactive Fields
    function toggleInactiveFields(status) {
        const inactiveFields = document.getElementById('inactive_fields');
        if (status === 'inactive_loa' || status === 'inactive_awol') {
            inactiveFields.style.display = 'block';
        } else {
            inactiveFields.style.display = 'none';
        }
    }

    // Function to calculate MRR
    function calculateMRR() {
        const programType = document.querySelector('input[name="program_type"]:checked');
        const semester = document.getElementById('first_enrollment_semester').value;
        const year = document.getElementById('first_enrollment_year').value;

        if (!programType || semester === '' || year === '') {
            alert('Please select Program Type, Semester, and Academic Year of 1st Enrollment to proceed.');
            return;
        }

        const startSemester = semester;
        const startYear = parseInt(year);
        const resultContainer = document.getElementById('mrr_result');

        const semesters = ["1st Semester", "2nd Semester"];
        let currentSemesterIndex = semesters.indexOf(startSemester);
        let currentYear = startYear;
        const programRelated = programType.value === 'related';

        let mrrSemesters = programRelated ? 12 : 16;
        let extensionSemesters = 10;  // Total extension semesters (5 years)
        let pandemicSemesters = 0;

        // Determine if the student's MRR range includes the pandemic period
        let pandemicStartYear = 2019;
        let pandemicEndYear = 2021;
        let pandemicStartSemester = "2nd Semester";
        let affectedByPandemic = false;

        for (let i = 0; i < mrrSemesters; i++) {
            if (
                (currentYear === pandemicStartYear && currentSemesterIndex === semesters.indexOf(pandemicStartSemester)) ||
                (currentYear > pandemicStartYear && currentYear <= pandemicEndYear)
            ) {
                affectedByPandemic = true;
                break;
            }
            currentSemesterIndex++;
            if (currentSemesterIndex >= semesters.length) {
                currentSemesterIndex = 0;
                currentYear++;
            }
        }

        // Reset the semester and year to start calculating available semesters
        currentSemesterIndex = semesters.indexOf(startSemester);
        currentYear = startYear;

        if (affectedByPandemic) {
            pandemicSemesters = 5;  // Number of semesters during the pandemic (2nd Sem 2019-2020 to 2nd Sem 2021-2022)
        }

        let result = '<p>Available Semesters to Enroll:</p>';
        result += '<table class="semester-table">';
        result += '<thead><tr><th class="semester-number">#</th><th class="semester-name">Semester</th></tr></thead>';
        result += '<tbody>';

        let adjustedSemesters = mrrSemesters + pandemicSemesters + extensionSemesters;

        availableSemesters = []; // Reset the array each time Calculate MRR is run

        for (let i = 0; i < adjustedSemesters; i++) {
            let semesterText = '';
            let rowClass = '';

            if (i >= mrrSemesters && i < mrrSemesters + pandemicSemesters) {
                semesterText = `${semesters[currentSemesterIndex]} ${currentYear}-${currentYear + 1} (Pandemic Adjustment)`;
                rowClass = 'pandemic-adjustment';
            } else if (i >= mrrSemesters + pandemicSemesters && i < adjustedSemesters) {
                semesterText = `${semesters[currentSemesterIndex]} ${currentYear}-${currentYear + 1} (Extension Period)`;
                rowClass = 'extension-period';
            } else {
                semesterText = `${semesters[currentSemesterIndex]} ${currentYear}-${currentYear + 1}`;
            }

            availableSemesters.push(semesterText); // Add to the array

            result += `<tr class="${rowClass}"><td>${i + 1}</td><td>${semesterText}</td></tr>`;

            currentSemesterIndex++;
            if (currentSemesterIndex >= semesters.length) {
                currentSemesterIndex = 0;
                currentYear++;
            }
        }

        result += '</tbody></table>';

        result += `<p>Regular Period of Program Completion: ${mrrSemesters / 2} years (${mrrSemesters} semesters)</p>`;
        if (pandemicSemesters > 0) {
            result += `<p>Pandemic Adjustment: Additional ${pandemicSemesters / 2} years (${pandemicSemesters} semesters) due to the pandemic, applicable to students affected during the 2nd Semester 2019-2020 to 2nd Semester 2021-2022 period.</p>`;
        }
        result += `<p>Extension Period: ${extensionSemesters / 2} years (${extensionSemesters} semesters), each extension shall be for a period not exceeding one (1) calendar year at a time.</p>`;

        resultContainer.innerHTML = result;

        // Display the Course Information section
        const courseInfoSection = document.getElementById('course_information_section');
        if (courseInfoSection) {
            courseInfoSection.style.display = 'block';
            courseInfoSection.classList.remove('disabled-section');
        } else {
            console.warn('course_information_section element not found.');
        }

        // Populate core and major courses semester and year dropdowns using the availableSemesters array
        populateSemesterYearDropdown('core_semester', availableSemesters);
        populateSemesterYearDropdown('major_semester', availableSemesters);
        populateSemesterYearDropdown('cognate_semester', availableSemesters);
        populateSemesterYearDropdown('elective_semester', availableSemesters);
        populateSemesterYearDropdown('dissertation_semester', availableSemesters);
    }

    // Function to populate Semester Year dropdowns
    function populateSemesterYearDropdown(dropdownName, semestersArray) {
    const dropdowns = document.getElementsByName(dropdownName);
    dropdowns.forEach(select => {
        // Clear existing options except the first
        select.options.length = 1;
        semestersArray.forEach(semester => {
            const option = document.createElement('option');
            option.value = semester;
            option.text = semester;
            select.appendChild(option);
        });
    });
}


    // Function to add Core Course
    function addCoreCourse() {
        const container = document.getElementById('core_courses_list');
        const formRow = document.createElement('div');
        formRow.className = 'form-row align-items-end mt-2';
        formRow.innerHTML = `
            <div class="form-group col-md-3">
                <label>Subject:</label>
                <input type="text" class="form-control" name="core_subject[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Instructor:</label>
                <input type="text" class="form-control" name="core_instructor[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Semester and Year Taken:</label>
                <select class="form-control" name="core_semester[]" required>
                    <option value="">Select Semester</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <label>Grade:</label>
                <input type="text" class="form-control" name="core_grade[]" required>
            </div>
            <div class="form-group col-md-1">
                <label>Unit:</label>
                <input type="number" class="form-control" name="core_unit[]" min="1" max="3" onchange="checkCoreCompletion()" required>
            </div>
            <div class="form-group col-md-1">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCourse(this)">-</button>
            </div>
        `;
        container.appendChild(formRow);

        // Populate the newly added dropdown using the availableSemesters array
        const newSelect = formRow.querySelector('select[name="core_semester[]"]');
        if (availableSemesters.length > 0) {
            availableSemesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester;
                option.text = semester;
                newSelect.appendChild(option);
            });
        } else {
            // If availableSemesters is empty, handle accordingly
            console.warn('Available semesters are not yet calculated. Please calculate MRR first.');
        }
    }

    // Function to check Core Completion
    function checkCoreCompletion() {
        const coreUnits = document.querySelectorAll('input[name="core_unit[]"]');
        let totalUnits = 0;
        coreUnits.forEach(unit => {
            totalUnits += parseInt(unit.value) || 0;
        });

        const qualifyingExamSection = document.getElementById('qualifying_exam_section');
        if (totalUnits >= 9) {
            qualifyingExamSection.style.display = 'block';
        } else {
            qualifyingExamSection.style.display = 'none';
        }
    }

    // Function to add Major Course
    function addMajorCourse() {
        const container = document.getElementById('major_courses_list');
        const formRow = document.createElement('div');
        formRow.className = 'form-row align-items-end mt-2';
        formRow.innerHTML = `
            <div class="form-group col-md-3">
                <label>Subject:</label>
                <input type="text" class="form-control" name="major_subject[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Instructor:</label>
                <input type="text" class="form-control" name="major_instructor[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Semester and Year Taken:</label>
                <select class="form-control" name="major_semester[]" required>
                    <option value="">Select Semester</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <label>Grade:</label>
                <input type="text" class="form-control" name="major_grade[]" required>
            </div>
            <div class="form-group col-md-1">
                <label>Unit:</label>
                <input type="number" class="form-control" name="major_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
            </div>
            <div class="form-group col-md-1">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCourse(this)">-</button>
            </div>
        `;
        container.appendChild(formRow);

        // Populate the newly added dropdown using the availableSemesters array
        const newSelect = formRow.querySelector('select[name="major_semester[]"]');
        if (availableSemesters.length > 0) {
            availableSemesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester;
                option.text = semester;
                newSelect.appendChild(option);
            });
        } else {
            console.warn('Available semesters are not yet calculated. Please calculate MRR first.');
        }
    }

    // Function to add Cognate Course
    function addCognateCourse() {
        const container = document.getElementById('cognate_courses_list');
        const formRow = document.createElement('div');
        formRow.className = 'form-row align-items-end mt-2';
        formRow.innerHTML = `
            <div class="form-group col-md-3">
                <label>Subject:</label>
                <input type="text" class="form-control" name="cognate_subject[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Instructor:</label>
                <input type="text" class="form-control" name="cognate_instructor[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Semester and Year Taken:</label>
                <select class="form-control" name="cognate_semester[]" required>
                    <option value="">Select Semester</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <label>Grade:</label>
                <input type="text" class="form-control" name="cognate_grade[]" required>
            </div>
            <div class="form-group col-md-1">
                <label>Unit:</label>
                <input type="number" class="form-control" name="cognate_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
            </div>
            <div class="form-group col-md-1">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCourse(this)">-</button>
            </div>
        `;
        container.appendChild(formRow);

        // Populate the newly added dropdown using the availableSemesters array
        const newSelect = formRow.querySelector('select[name="cognate_semester[]"]');
        if (availableSemesters.length > 0) {
            availableSemesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester;
                option.text = semester;
                newSelect.appendChild(option);
            });
        } else {
            console.warn('Available semesters are not yet calculated. Please calculate MRR first.');
        }
    }

    // Function to add Elective Course
    function addElectiveCourse() {
        const container = document.getElementById('elective_courses_list');
        const formRow = document.createElement('div');
        formRow.className = 'form-row align-items-end mt-2';
        formRow.innerHTML = `
            <div class="form-group col-md-3">
                <label>Subject:</label>
                <input type="text" class="form-control" name="elective_subject[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Instructor:</label>
                <input type="text" class="form-control" name="elective_instructor[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Semester and Year Taken:</label>
                <select class="form-control" name="elective_semester[]" required>
                    <option value="">Select Semester</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <label>Grade:</label>
                <input type="text" class="form-control" name="elective_grade[]" required>
            </div>
            <div class="form-group col-md-1">
                <label>Unit:</label>
                <input type="number" class="form-control" name="elective_unit[]" min="1" max="3" onchange="checkMajorCognateElectiveCompletion()" required>
            </div>
            <div class="form-group col-md-1">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCourse(this)">-</button>
            </div>
        `;
        container.appendChild(formRow);

        // Populate the newly added dropdown using the availableSemesters array
        const newSelect = formRow.querySelector('select[name="elective_semester[]"]');
        if (availableSemesters.length > 0) {
            availableSemesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester;
                option.text = semester;
                newSelect.appendChild(option);
            });
        } else {
            console.warn('Available semesters are not yet calculated. Please calculate MRR first.');
        }
    }

    // Function to add Dissertation Course
    function addDissertationCourse() {
        const container = document.getElementById('dissertation_courses_list');
        const formRow = document.createElement('div');
        formRow.className = 'form-row align-items-end mt-2';
        formRow.innerHTML = `
            <div class="form-group col-md-3">
                <label>Subject:</label>
                <input type="text" class="form-control" name="dissertation_subject[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Instructor:</label>
                <input type="text" class="form-control" name="dissertation_instructor[]" required>
            </div>
            <div class="form-group col-md-3">
                <label>Semester and Year Taken:</label>
                <select class="form-control" name="dissertation_semester[]" required>
                    <option value="">Select Semester</option>
                </select>
            </div>
            <div class="form-group col-md-1">
                <label>Grade:</label>
                <input type="text" class="form-control" name="dissertation_grade[]" required>
            </div>
            <div class="form-group col-md-1">
                <label>Unit:</label>
                <input type="number" class="form-control" name="dissertation_unit[]" min="1" max="3" required>
            </div>
            <div class="form-group col-md-1">
                <button type="button" class="btn btn-danger btn-sm" onclick="removeCourse(this)">-</button>
            </div>
        `;
        container.appendChild(formRow);

        // Populate the newly added dropdown using the availableSemesters array
        const newSelect = formRow.querySelector('select[name="dissertation_semester[]"]');
        if (availableSemesters.length > 0) {
            availableSemesters.forEach(semester => {
                const option = document.createElement('option');
                option.value = semester;
                option.text = semester;
                newSelect.appendChild(option);
            });
        } else {
            console.warn('Available semesters are not yet calculated. Please calculate MRR first.');
        }
    }

    // Function to remove a course row
    function removeCourse(button) {
        const row = button.parentElement.parentElement;
        row.remove();
    }

    // Function to check Major, Cognate, and Elective Completion
    function checkMajorCognateElectiveCompletion() {
        const majorUnits = document.querySelectorAll('input[name="major_unit[]"]');
        const cognateUnits = document.querySelectorAll('input[name="cognate_unit[]"]');
        const electiveUnits = document.querySelectorAll('input[name="elective_unit[]"]');
        let totalUnits = 0;

        majorUnits.forEach(unit => {
            totalUnits += parseInt(unit.value) || 0;
        });
        cognateUnits.forEach(unit => {
            totalUnits += parseInt(unit.value) || 0;
        });
        electiveUnits.forEach(unit => {
            totalUnits += parseInt(unit.value) || 0;
        });

        const comprehensiveExamSection = document.getElementById('comprehensive_exam_section');
        if (totalUnits >= 27) { // 12 Major + 9 Cognate + 6 Elective = 27 Units
            comprehensiveExamSection.style.display = 'block';
        } else {
            comprehensiveExamSection.style.display = 'none';
        }
    }

    // Function to toggle Course Sections based on Qualifying Exam Result
    function toggleCourseSections(result) {
        const otherCourses = document.getElementById('other_courses');
        if (result === 'pass') {
            otherCourses.style.display = 'block';
            otherCourses.classList.remove('disabled-section');
        } else {
            otherCourses.style.display = 'none';
            otherCourses.classList.add('disabled-section');
        }
    }

    // Function to toggle Dissertation Section based on Comprehensive Exam Result
    function toggleDissertationSection(result) {
        const dissertationSection = document.getElementById('dissertation_section');
        if (result === 'pass') {
            dissertationSection.style.display = 'block';
            dissertationSection.classList.remove('disabled-section');
        } else {
            dissertationSection.style.display = 'none';
            dissertationSection.classList.add('disabled-section');
        }
    }

    // Function to toggle Graduation Section based on Checklist
    function toggleGraduationSection() {
        const graduationSection = document.getElementById('graduation_section');
        const checklistItems = document.querySelectorAll('#dissertation_section input[type="checkbox"]');
        let allChecked = true;

        checklistItems.forEach(item => {
            if (!item.checked) {
                allChecked = false;
            }
        });

        if (allChecked) {
            graduationSection.style.display = 'block';
            graduationSection.classList.remove('disabled-section');
        } else {
            graduationSection.style.display = 'none';
            graduationSection.classList.add('disabled-section');
        }
    }

    // Function to initialize existing dropdowns on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Initially populate existing course dropdowns if availableSemesters is already populated
        populateSemesterYearDropdown('core_semester', availableSemesters);
        populateSemesterYearDropdown('major_semester', availableSemesters);
        populateSemesterYearDropdown('cognate_semester', availableSemesters);
        populateSemesterYearDropdown('elective_semester', availableSemesters);
        populateSemesterYearDropdown('dissertation_semester', availableSemesters);
    });
</script>
</body>
</html>


Can  you make all input is not required just important details