<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card tab2-card">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade active show" id="account" role="tabpanel"
                            aria-labelledby="account-tab">

                            <form class="" method="POST" action="profile.php" enctype="multipart/form-data"
                                novalidate="">
                                <h4>
                                    <strong>Document Details</strong>
                                </h4>
                                <!-- Select Education -->
                                <div class="form-group row">
                                    <label for="educationType" class="col-xl-3 col-md-4"><span
                                            style="color: red;">*</span>
                                        <strong>Select
                                            Education</strong></label>
                                    <div class="col-xl-8 col-md-5">
                                        <select class="form-control" id="educationTypeId" name="educationTypeId"
                                            required>
                                            <option value="">Select Education</option>
                                            <option value="1">Secondary</option>
                                            <option value="2">Higher</option>
                                            <option value="3">Other</option>
                                        </select>
                                    </div>

                                </div>
                                <!-- Select Qualification -->
                                <div class="form-group row">
                                    <label for="qualification" class="col-xl-3 col-md-4"><span
                                            style="color: red;">*</span><strong>
                                            Select
                                            Qualification</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <select class="form-control" id="qualification" name="qualification" required>
                                            <option value="">Select Qualification</option>
                                            <!-- Options will be populated by JS -->
                                        </select>
                                    </div>
                                </div>
                                <!-- Education Institute -->
                                <div class="form-group row">
                                    <label for="educationInstitute" class="col-xl-3 col-md-4"><strong>
                                            Education
                                            Institute</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <input class="form-control" id="educationInstitute" name="educationInstitute"
                                            type="">
                                    </div>
                                </div>
                                <!-- Start Date -->
                                <div class="form-group row">
                                    <label for="startDate" class="col-xl-3 col-md-4"><strong>Starting
                                            Date</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <input class="form-control datepicker" id="startDate" name="startDate"
                                            type="date">
                                    </div>
                                </div>
                                <!-- End Date -->
                                <div class="form-group row">
                                    <label for="endDate" class="col-xl-3 col-md-4"><strong>End Date</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <input class="form-control datepicker" id="endDate" name="endDate" type="date">
                                    </div>
                                </div>
                                <!-- Current Study -->
                                <div class="form-group row">
                                    <label for="currentStudy" class="col-xl-3 col-md-4"><strong>Currently
                                            Studying?</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="currentStudyYes"
                                                name="currentStudy" value="yes">
                                            <label class="form-check-label" for="currentStudyYes"
                                                style='margin-left: 10px;'>Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="currentStudyNo"
                                                name="currentStudy" value="no">
                                            <label class="form-check-label" for="currentStudyNo"
                                                style='margin-left: 10px;'>No</label>
                                        </div>
                                    </div>
                                </div>
                                <!-- Education Information -->
                                <div class="form-group row">
                                    <label for="AdditionalInfo" class="col-xl-3 col-md-4"><strong>Additional
                                            Information</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <input class="form-control" id="AdditionalInfo" name="AdditionalInfo" type="">
                                    </div>
                                </div>
                                <!-- Upload Document -->
                                <div class="form-group row">
                                    <label for="campus_certificate" class="col-xl-3 col-md-4"><strong>Upload
                                            Document</strong></label>
                                    <div class="col-xl-8 col-md-7">
                                        <input type="file" name="campus_certificate[]" class="fileInput"
                                            id="campus_certificate">
                                    </div>
                                </div>
                                <!-- Submit button -->
                                <div class="pull-right">
                                    <button type="submit" class="btn btn-primary" name="upload">Upload</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const yesCheckbox = document.getElementById('currentStudyYes');
    const noCheckbox = document.getElementById('currentStudyNo');

    yesCheckbox.addEventListener('change', function() {
        if (yesCheckbox.checked) {
            noCheckbox.checked = false;
        }
    });

    noCheckbox.addEventListener('change', function() {
        if (noCheckbox.checked) {
            yesCheckbox.checked = false;
        }
    });
});
</script>


<!-- Include jQuery and the script to handle the AJAX request -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#educationTypeId').change(function() {
        var educationTypeId = $(this).val();

        // Make AJAX request if a valid education type is selected
        if (educationTypeId) {
            $.ajax({
                url: 'includes/update-profile.php',
                type: 'POST',
                data: {
                    educationTypeId: educationTypeId
                },
                dataType: 'json',
                success: function(data) {
                    console.log("Data received: ", data);
                    var qualificationDropdown = $('#qualification');
                    qualificationDropdown.empty(); // Clear the current options

                    // Add a default option
                    qualificationDropdown.append(
                        '<option value="">Select Qualification</option>');

                    // Add new options from the response
                    $.each(data, function(index, qualification) {
                        qualificationDropdown.append('<option value="' +
                            qualification.education_qual_id + '">' +
                            qualification.education_qual + '</option>');
                    });
                }
            });
        } else {
            // If no valid type selected, reset the qualification dropdown
            $('#qualification').empty().append('<option value="">Select Qualification</option>');
        }
    });
});
</script>