window.employeeDirectory = function () {
    return {
        search: '',
        table: null,

        init() {
            this.search = this.$root.querySelector('#employee-search')?.value ?? '';
            this.initTable();

            document.body.addEventListener('employees-changed', () => {
                this.reloadTable();
            });
        },

        initTable() {
            const tableElement = document.getElementById('employee-table');

            if (!tableElement || typeof Tabulator === 'undefined') {
                return;
            }

            this.table = new Tabulator(tableElement, {
                ajaxURL: '/employees/data',
                ajaxParams: {
                    search: this.search,
                },
                layout: 'fitColumns',
                responsiveLayout: 'collapse',
                pagination: true,
                paginationMode: 'local',
                paginationSize: 8,
                movableColumns: true,
                placeholder: 'No employees found.',
                columns: [
                    { title: 'Name', field: 'full_name', minWidth: 180 },
                    { title: 'Email', field: 'email', minWidth: 220 },
                    { title: 'Department', field: 'department', minWidth: 140 },
                    { title: 'Job Title', field: 'job_title', minWidth: 180 },
                    { title: 'Start Date', field: 'start_date', hozAlign: 'left', minWidth: 130 },
                ],
            });
        },

        applySearch() {
            if (!this.table) {
                return;
            }

            this.table.setData('/employees/data', {
                search: this.search,
            });
        },

        reloadTable() {
            if (!this.table) {
                this.initTable();
                return;
            }

            this.table.setData('/employees/data', {
                search: this.search,
            });
        },
    };
};