<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>
<div
    class="container-fluid"
    data-api-list="<?= esc($apiListUrl ?? '') ?>"
    data-api-assign="<?= esc($apiAssignUrl ?? '') ?>"
    data-api-delete="<?= esc($apiDeleteUrl ?? '') ?>"
    data-csrf-name="<?= esc($csrfTokenName ?? csrf_token()) ?>"
    data-csrf-value="<?= esc($csrfTokenValue ?? csrf_hash()) ?>"
>
    <div class="wrapper">
        <div class="content">
            <h2 class="text-center mt-4 mb-2">Teacher Class Assignments</h2>
            <?php if (!empty($missingYear)): ?>
                <div class="alert alert-warning" role="alert">
                    Current school year is not configured. This page is read-only until configured in
                    <a href="<?= site_url('configuration/configuration_view') ?>" class="alert-link">Add/Edit Configuration</a> (key: <code>school_year</code>).
                </div>
            <?php endif; ?>

            <?= view('partials/flash_messages') ?>
            <div id="assignmentMessages"></div>

            <table id="teachersTable" class="display table table-striped table-hover align-middle">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Role</th>
                        <th>Assigned Classes</th>
                        <th>School Year</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center text-muted">Loading...</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?= $this->include('partials/assign_class_teacher_modal') ?>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var container = document.querySelector('.container-fluid[data-api-list]');
    if (!container) {
        return;
    }

    var apiList   = container.getAttribute('data-api-list')   || '';
    var apiAssign = container.getAttribute('data-api-assign') || '';
    var apiDelete = container.getAttribute('data-api-delete') || '';

    var csrfName  = container.getAttribute('data-csrf-name')  || '';
    var csrfValue = container.getAttribute('data-csrf-value') || '';

    var tableEl   = document.getElementById('teachersTable');
    var tbody     = tableEl ? tableEl.querySelector('tbody') : null;
    var messages  = document.getElementById('assignmentMessages');
    var selectedYear = <?= json_encode((string)($schoolYear ?? '')) ?>;
    var isCurrentYear = <?= json_encode((bool)($isCurrentYear ?? true)) ?>;
    var classSelect     = document.getElementById('class_section_id');
    var assignForm      = document.getElementById('assignClassForm');
    var assignButton    = document.getElementById('assignClassButton');
    var teacherRoleHidden  = document.getElementById('teacherRoleHidden');
    var teacherRoleDisplay = document.getElementById('teacherRoleDisplay');
    var assignModalEl = document.getElementById('assignClassModal');

    function updateCsrfFromResponse(data) {
        if (!data) return;
        if (data.csrf_token && data.csrf_hash) {
            csrfName = data.csrf_token;
            csrfValue = data.csrf_hash;
            container.setAttribute('data-csrf-name', csrfName);
            container.setAttribute('data-csrf-value', csrfValue);
            var hiddenField = document.getElementById('assignCsrfField');
            if (hiddenField) {
                hiddenField.setAttribute('name', csrfName);
                hiddenField.value = csrfValue;
            }
        }
    }

    function applyCsrf(payload) {
        var data = Object.assign({}, payload || {});
        if (csrfName) {
            data[csrfName] = csrfValue;
        }
        return data;
    }

    function bootstrapAlertClass(type) {
        if (type === 'success') return 'alert-success';
        if (type === 'info') return 'alert-info';
        if (type === 'warning') return 'alert-warning';
        return 'alert-danger';
    }

    function showMessage(type, text) {
        if (!messages || !text) return;
        var alert = document.createElement('div');
        alert.className = 'alert ' + bootstrapAlertClass(type) + ' alert-dismissible fade show';
        alert.setAttribute('role', 'alert');
        alert.innerHTML = '<span>' + text + '</span>'
            + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>';
        messages.appendChild(alert);
        setTimeout(function () {
            if (alert && alert.parentNode) {
                alert.classList.remove('show');
                alert.classList.add('fade');
                setTimeout(function () {
                    if (alert.parentNode) {
                        alert.parentNode.removeChild(alert);
                    }
                }, 200);
            }
        }, 6000);
    }

    function renderAssignedList(assignments, label, teacher) {
        var fragment = document.createDocumentFragment();
        assignments.forEach(function (assignment) {
            var li = document.createElement('li');
            li.className = 'd-flex align-items-center justify-content-between gap-2 mb-1';

            var text = document.createElement('span');
            text.innerHTML = '<strong>' + (assignment.class_section_name || 'Class #' + assignment.section_id) + '</strong> (' + label + ')';
            li.appendChild(text);

            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'btn btn-outline-danger btn-sm remove-assignment-btn';
            btn.textContent = 'Remove';
            btn.setAttribute('data-teacher-id', teacher.teacher_id);
            btn.setAttribute('data-teacher-name', teacher.name || '');
            btn.setAttribute('data-class-section-id', assignment.section_id);
            btn.setAttribute('data-class-name', assignment.class_section_name || 'Class #' + assignment.section_id);
            var position = (assignment.role || '').toLowerCase();
            if (position !== 'main' && position !== 'ta') {
                position = label.toLowerCase() === 'ta' ? 'ta' : 'main';
            }
            btn.setAttribute('data-position', position);
            var assignmentSchoolYear = assignment.school_year || selectedYear || '';
            btn.setAttribute('data-school-year', assignmentSchoolYear);
            li.appendChild(btn);

            fragment.appendChild(li);
        });
        return fragment;
    }

    function renderTeachersTable(teachers, schoolYear) {
        if (!tbody) return;

        if (window.jQuery && $.fn.DataTable && $.fn.DataTable.isDataTable('#teachersTable')) {
            $('#teachersTable').DataTable().destroy();
        }

        tbody.innerHTML = '';

        if (!teachers || teachers.length === 0) {
            var emptyRow = document.createElement('tr');
            var emptyCell = document.createElement('td');
            emptyCell.className = 'text-center text-muted';
            emptyCell.textContent = 'No teachers found.';
            emptyRow.appendChild(emptyCell);
            for (var i = 0; i < 8; i++) {
                emptyRow.appendChild(document.createElement('td'));
            }
            tbody.appendChild(emptyRow);
        } else {
            teachers.forEach(function (teacher, index) {
                var row = document.createElement('tr');

                var orderCell = document.createElement('td');
                orderCell.className = 'text-center';
                orderCell.textContent = index + 1;
                row.appendChild(orderCell);

                var firstCell = document.createElement('td');
                firstCell.textContent = teacher.firstname || '';
                row.appendChild(firstCell);

                var lastCell = document.createElement('td');
                lastCell.textContent = teacher.lastname || '';
                row.appendChild(lastCell);

                var emailCell = document.createElement('td');
                emailCell.textContent = teacher.email || '';
                row.appendChild(emailCell);

                var phoneCell = document.createElement('td');
                phoneCell.textContent = teacher.cellphone || '';
                row.appendChild(phoneCell);

                var roleCell = document.createElement('td');
                var role = (teacher.role || '').replace(/_/g, ' ');
                roleCell.textContent = role ? role.charAt(0).toUpperCase() + role.slice(1) : 'N/A';
                row.appendChild(roleCell);

                var assignedCell = document.createElement('td');
                if ((teacher.main_assignments && teacher.main_assignments.length) ||
                    (teacher.ta_assignments && teacher.ta_assignments.length)) {
                    var list = document.createElement('ul');
                    list.className = 'list-unstyled mb-0';
                    if (teacher.main_assignments && teacher.main_assignments.length) {
                        list.appendChild(renderAssignedList(teacher.main_assignments, 'Main', teacher));
                    }
                    if (teacher.ta_assignments && teacher.ta_assignments.length) {
                        list.appendChild(renderAssignedList(teacher.ta_assignments, 'TA', teacher));
                    }
                    assignedCell.appendChild(list);
                } else {
                    var empty = document.createElement('em');
                    empty.textContent = 'No classes assigned';
                    assignedCell.appendChild(empty);
                }
                row.appendChild(assignedCell);

                var schoolYearCell = document.createElement('td');
                schoolYearCell.textContent = teacher.school_year || schoolYear || '';
                row.appendChild(schoolYearCell);

                var actionsCell = document.createElement('td');
                var assignBtn = document.createElement('button');
                assignBtn.type = 'button';
                assignBtn.className = 'btn btn-success btn-sm assign-class-btn';
                if (!isCurrentYear) { assignBtn.disabled = true; assignBtn.title = 'Editing disabled for non-current year'; }
                assignBtn.setAttribute('data-bs-toggle', 'modal');
                assignBtn.setAttribute('data-bs-target', '#assignClassModal');
                assignBtn.setAttribute('data-teacher-id', teacher.teacher_id);
                assignBtn.setAttribute('data-teacher-name', teacher.name || '');
                assignBtn.setAttribute('data-teacher-role', teacher.role || '');
                assignBtn.textContent = 'Assign Class';
                actionsCell.appendChild(assignBtn);
                row.appendChild(actionsCell);

                tbody.appendChild(row);
            });
        }

        if (window.jQuery && $.fn.DataTable) {
            $('#teachersTable').DataTable({
                pageLength: 100,
                lengthMenu: [5, 10, 25, 50, 100],
                order: [[0, 'asc']],
                columnDefs: [
                    { orderable: false, targets: [6, 8] }
                ]
            });
        }
    }

    function populateClassOptions(classes) {
        if (!classSelect) {
            return;
        }
        classSelect.innerHTML = '';

        var placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.disabled = true;
        placeholder.selected = true;
        placeholder.textContent = 'Select a class';
        classSelect.appendChild(placeholder);

        (classes || []).forEach(function (cls) {
            var option = document.createElement('option');
            option.value = cls.class_section_id;
            option.textContent = cls.class_section_name || ('Class #' + cls.class_section_id);
            classSelect.appendChild(option);
        });
    }

    function loadAssignments() {
        if (!apiList || !tbody) {
            return;
        }

        tbody.innerHTML = '<tr>'
            + '<td class="text-center text-muted">Loading...</td>'
            + '<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>'
            + '</tr>';

        var url = apiList + (selectedYear ? ('?schoolYear=' + encodeURIComponent(selectedYear)) : '');
        fetch(url, {
            headers: { 'Accept': 'application/json' },
            credentials: 'same-origin'
        })
            .then(function (response) {
                return response.json()
                    .catch(function () { return {}; })
                    .then(function (data) {
                        return { ok: response.ok, data: data };
                    });
            })
            .then(function (result) {
                if (!result) {
                    throw new Error('No response received.');
                }

                var data = result.data || {};
                updateCsrfFromResponse(data);

                if (!result.ok || data.ok === false) {
                    showMessage('danger', data.message || 'Unable to load teacher assignments.');
                    return;
                }

                renderTeachersTable(data.teachers || [], data.school_year || '');
                populateClassOptions(data.classes || []);
            })
            .catch(function (error) {
                showMessage('danger', error.message || 'Failed to load assignments.');
            });
    }

    function submitAssignment(payload) {
        if (!apiAssign || !isCurrentYear) {
            showMessage('warning', 'Editing disabled for non-current year.');
            return;
        }

        fetch(apiAssign, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            credentials: 'same-origin',
            body: JSON.stringify(applyCsrf(payload))
        })
            .then(function (response) {
                return response.json()
                    .catch(function () { return {}; })
                    .then(function (data) {
                        return { ok: response.ok, data: data };
                    });
            })
            .then(function (result) {
                if (!result) {
                    throw new Error('No response received.');
                }

                var data = result.data || {};
                updateCsrfFromResponse(data);

                if (!result.ok || data.ok === false) {
                    showMessage('danger', data.message || 'Unable to assign class.');
                    return;
                }

                showMessage('success', data.message || 'Class assigned successfully.');

                if (assignForm) {
                    assignForm.reset();
                }

                if (assignModalEl && window.bootstrap) {
                    var modalInstance = bootstrap.Modal.getInstance(assignModalEl);
                    if (modalInstance) {
                        modalInstance.hide();
                    }
                }

                loadAssignments();
            })
            .catch(function (error) {
                showMessage('danger', error.message || 'Unable to assign class.');
            });
    }

    function removeAssignment(payload) {
        if (!apiDelete || !isCurrentYear) {
            showMessage('warning', 'Editing disabled for non-current year.');
            return;
        }

        fetch(apiDelete, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            credentials: 'same-origin',
            body: JSON.stringify(applyCsrf(payload))
        })
            .then(function (response) {
                return response.json()
                    .catch(function () { return {}; })
                    .then(function (data) {
                        return { ok: response.ok, data: data };
                    });
            })
            .then(function (result) {
                if (!result) {
                    throw new Error('No response received.');
                }

                var data = result.data || {};
                updateCsrfFromResponse(data);

                if (!result.ok || data.ok === false) {
                    showMessage('danger', data.message || 'Unable to remove assignment.');
                    return;
                }

                showMessage('success', data.message || 'Assignment removed successfully.');
                loadAssignments();
            })
            .catch(function (error) {
                showMessage('danger', error.message || 'Unable to remove assignment.');
            });
    }

    document.addEventListener('click', function (event) {
        var assignBtn = event.target.closest('.assign-class-btn');
        if (assignBtn) {
            var teacherId = assignBtn.getAttribute('data-teacher-id') || '';
            var teacherName = assignBtn.getAttribute('data-teacher-name') || '';
            var teacherRole = assignBtn.getAttribute('data-teacher-role') || '';

            var nameInput = document.getElementById('teacherName');
            var idInput = document.getElementById('teacherId');

            if (idInput) {
                idInput.value = teacherId;
            }
            if (nameInput) {
                nameInput.value = teacherName;
            }
            if (teacherRoleHidden) {
                teacherRoleHidden.value = teacherRole;
            }
            if (teacherRoleDisplay) {
                teacherRoleDisplay.value = teacherRole === 'teacher_assistant' ? 'Teaching Assistant' : 'Teacher';
            }
        }

        var removeBtn = event.target.closest('.remove-assignment-btn');
        if (removeBtn) {
            event.preventDefault();
            var teacherId = removeBtn.getAttribute('data-teacher-id');
            var classSectionId = removeBtn.getAttribute('data-class-section-id');
            var position = removeBtn.getAttribute('data-position');
            var schoolYear = removeBtn.getAttribute('data-school-year') || '';
            var className = removeBtn.getAttribute('data-class-name') || 'this class';
            var teacherName = removeBtn.getAttribute('data-teacher-name') || 'this teacher';

            if (confirm('Remove ' + className + ' (' + position.toUpperCase() + ') from ' + teacherName + '?')) {
                removeAssignment({
                    teacher_id: teacherId,
                    class_section_id: classSectionId,
                    position: position,
                    school_year: schoolYear
                });
            }
        }
    });

    if (assignButton && assignForm) {
        assignButton.addEventListener('click', function (event) {
            event.preventDefault();
            if (!assignForm.checkValidity()) {
                assignForm.reportValidity ? assignForm.reportValidity() : alert('Please fill out all required fields.');
                return;
            }

            submitAssignment({
                teacher_id: assignForm.teacher_id.value,
                teacher_role: assignForm.teacher_role ? assignForm.teacher_role.value : (teacherRoleHidden ? teacherRoleHidden.value : ''),
                class_section_id: assignForm.class_section_id.value
            });
        });
    }

    loadAssignments();
});
</script>
<?= $this->endSection() ?>
