document.addEventListener('DOMContentLoaded', function () {
    const divisionSelect = document.getElementById('division_id');
    const departmentSelect = document.getElementById('department_id');
    const roleSelect = document.getElementById('role_id');

    const initialDepartmentId = departmentSelect.dataset.initial;
    const initialRoleId = roleSelect.dataset.initial;

    function fetchDepartments(divisionId, callback) {
        fetch(`api.php?action=get_departments&division_id=${divisionId}`)
            .then(response => response.json())
            .then(data => {
                departmentSelect.innerHTML = '<option value="">Select Department</option>';
                data.forEach(department => {
                    const option = document.createElement('option');
                    option.value = department.id;
                    option.textContent = department.name;
                    if (department.id == initialDepartmentId) {
                        option.selected = true;
                    }
                    departmentSelect.appendChild(option);
                });
                if (callback) callback();
            });
    }

    function fetchRoles(departmentId, callback) {
        fetch(`api.php?action=get_roles&department_id=${departmentId}`)
            .then(response => response.json())
            .then(data => {
                roleSelect.innerHTML = '<option value="">Select Role</option>';
                data.forEach(role => {
                    const option = document.createElement('option');
                    option.value = role.id;
                    option.textContent = role.name;
                    if (role.id == initialRoleId) {
                        option.selected = true;
                    }
                    roleSelect.appendChild(option);
                });
                if (callback) callback();
            });
    }

    divisionSelect.addEventListener('change', function () {
        const divisionId = this.value;
        departmentSelect.dataset.initial = ''; // Clear initial value on change
        roleSelect.dataset.initial = ''; // Clear initial value on change
        fetchDepartments(divisionId, () => {
            // After loading departments, if there's a selected one, load its roles
            if (departmentSelect.value) {
                fetchRoles(departmentSelect.value);
            }
        });
    });

    departmentSelect.addEventListener('change', function () {
        const departmentId = this.value;
        roleSelect.dataset.initial = ''; // Clear initial value on change
        fetchRoles(departmentId);
    });

    // Initial load
    if (divisionSelect.value) {
        fetchDepartments(divisionSelect.value, () => {
            if (initialDepartmentId) {
                fetchRoles(initialDepartmentId);
            }
        });
    }
});