<div class="modal fade" id="assignStudentClassModal" tabindex="-1" aria-labelledby="assignStudentClassModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignStudentClassModalLabel">Assign Class to Student</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="assignStudentClassForm" action="<?= base_url('assign_class_student') ?>" method="post">
                    <?= csrf_field() ?>
                    <input type="hidden" name="student_id" id="studentId">
                    <div class="mb-3">
                        <label for="studentName" class="form-label">Student Name</label>
                        <input type="text" class="form-control" id="studentName" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="student_class_section_id" class="form-label">Select Class</label>
                        <select name="class_section_id" id="student_class_section_id" class="form-control" required>
                            <option value="" disabled selected>Select a class</option>
                            <?php if (!empty($classes) && is_array($classes)): ?>
                                <?php foreach ($classes as $class_): ?>
                                    <option value="<?= htmlspecialchars($class_['class_section_id']) ?>">
                                        <?= htmlspecialchars($class_['class_section_name']) ?>
                                    </option>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <option value="" disabled>No classes available</option>
                            <?php endif; ?>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="assignStudentClassButton">Assign Class</button>
            </div>
        </div>
    </div>
</div>

<?= $this->section('scripts') ?>
<script>
document.querySelectorAll('.assign-student-btn').forEach(function(button) {
    button.addEventListener('click', function () {
        const studentId = this.getAttribute('data-student-id');
        const studentName = this.getAttribute('data-student-name');

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

document.getElementById('assignStudentClassButton').addEventListener('click', function() {
    const form = document.getElementById('assignStudentClassForm');
    if (form.checkValidity()) {
        form.submit();
    } else {
        alert('Please select a class before submitting.');
    }
});
</script>
<?= $this->endSection() ?>
