KCI-CAMPAIGN-TRACKER/public/js/app.js

// ── Shared util ───────────────────────────────────────────────────────────────

const PAGE_SIZES    = [10, 25, 50, 100];
const PAGE_SIZES_SM = [5, 10, 25, 50];


function _postDelete(action) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = action;

    const t = document.createElement('input');
    t.type  = 'hidden';
    t.name  = '_token';
    t.value = window.__csrf || '';
    form.appendChild(t);

    document.body.appendChild(form);
    form.submit();
}

// Returns every {value, row} pair where `key` has a primitive value anywhere in the tree.
// `row` is the nearest plain-object ancestor that directly owns `key`.
function _deepFindRows(obj, key, out) {
    out = out || [];
    if (obj === null || typeof obj !== 'object') return out;
    if (Array.isArray(obj)) {
        for (var i = 0; i < obj.length; i++) { _deepFindRows(obj[i], key, out); }
        return out;
    }
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
        var v = obj[key];
        if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
            out.push({ value: String(v), row: obj });
        }
    }
    for (var k in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, k)) { _deepFindRows(obj[k], key, out); }
    }
    return out;}

function _escapeHtml(value) {
    return String(value).replace(/[&<>"']/g, function (char) {
        return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;',
        }[char];
    });
}

function _tabulatorPersistenceKey(key) {
    return 'ct.tabulator.' + key;
}

// Builds a stable Tabulator field name for a dynamic attribute column, derived from the
// attribute's name rather than its position. This keeps persisted column order, width,
// visibility, and filters tied to the same attribute across page loads, even when the
// set/order of attributes discovered from the result rows changes.
function _attributeFieldKey(name, usedFields) {
    let slug = String(name).toLowerCase().trim().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
    if (slug === '') {
        slug = 'field';
    }

    const base = 'attr__' + slug;
    let key = base;
    let suffix = 2;
    while (usedFields.has(key)) {
        key = base + '_' + suffix;
        suffix++;
    }

    usedFields.add(key);
    return key;
}

// Discovers the unique set of dynamic attributes across a list of rows, assigning each
// a stable `field` name (see _attributeFieldKey) for use as a Tabulator column field.
function _discoverAttributeColumns(rows, typeAttributesField, normalizeFn) {
    const attributes = [];
    const usedFields = new Set();

    rows.forEach((row) => {
        normalizeFn(row[typeAttributesField] || []).forEach((attr) => {
            if (!attributes.some((existing) => existing.name === attr.name)) {
                attributes.push({ ...attr, field: _attributeFieldKey(attr.name, usedFields) });
            }
        });

        Object.keys(row.attribute_values || {}).forEach((name) => {
            if (!attributes.some((existing) => existing.name === name)) {
                attributes.push({ name: name, type: 'text', order: attributes.length + 1, field: _attributeFieldKey(name, usedFields) });
            }
        });
    });

    return attributes;
}

function _tabulatorBaseOptions(persistenceKey) {
    return {
        persistence: {
            columns: true,
            sort: true,
            filter: true,
            page: {
                size: true,
                page: true,
            },
        },
        persistenceID: persistenceKey,
    };
}

function _clearTabulatorPersistence(persistenceKey) {
    try {
        window.localStorage.removeItem(_tabulatorPersistenceKey(persistenceKey + '-columns'));
        window.localStorage.removeItem(_tabulatorPersistenceKey(persistenceKey + '-sort'));
        window.localStorage.removeItem(_tabulatorPersistenceKey(persistenceKey + '-filter'));
        window.localStorage.removeItem(_tabulatorPersistenceKey(persistenceKey + '-page'));
    } catch (error) {
    }
}

function _tabulatorVisibleColumns(table) {
    if (!table || typeof table.getColumns !== 'function') {
        return [];
    }

    return table.getColumns()
        .map((column) => {
            const definition = typeof column.getDefinition === 'function' ? column.getDefinition() : null;
            if (!definition || !definition.field || definition.field === 'edit_url') {
                return null;
            }

            const element = typeof column.getElement === 'function' ? column.getElement() : null;
            const isVisible = !element || element.offsetParent !== null;
            if (!isVisible) {
                return null;
            }

            return {
                field: definition.field,
                title: definition.title || definition.field,
            };
        })
        .filter((column) => column !== null);
}

function _downloadBlob(blob, filename) {
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.setTimeout(() => window.URL.revokeObjectURL(url), 0);
}

async function _exportTabulatorCsv(url, table, filename) {
    if (!table) {
        throw new Error('The table is not ready yet.');
    }

    const payload = {
        columns: _tabulatorVisibleColumns(table),
        rows: typeof table.getData === 'function' ? table.getData('active') : [],
    };

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Accept': 'text/csv',
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': window.__csrf || '',
        },
        body: JSON.stringify(payload),
    });

    if (!response.ok) {
        throw new Error('Unable to export CSV.');
    }

    const blob = await response.blob();
    const disposition = response.headers.get('Content-Disposition') || '';
    const match = disposition.match(/filename="?([^";]+)"?/i);
    _downloadBlob(blob, match ? match[1] : filename);
}

// ── Campaign Type ─────────────────────────────────────────────────────────────

window.campaignTypeTable = function () {
    return {
        table: null,

        init() {
            this.initTable();
        },

        initTable() {
            const el = document.getElementById('campaign-type-table');
            if (!el || typeof Tabulator === 'undefined') {
                return;
            }

            this.table = new Tabulator(el, {
                ajaxURL: '/campaign-types/data',
                layout: 'fitColumns',
                responsiveLayout: 'collapse',
                pagination: true,
                paginationMode: 'local',
                paginationSize: 10,
                paginationSizeSelector: PAGE_SIZES,
                movableColumns: true,
                placeholder: 'No campaign types found.',
                initialSort: [{ column: 'name', dir: 'asc' }],
                columns: [
                    {
                        title: 'Actions',
                        field: 'id',
                        width: 160,
                        hozAlign: 'center',
                        headerSort: false,
                        formatter: function (cell) {
                            const id = cell.getValue();
                            return '<a href="/campaign-types/' + id + '/edit" class="button button-secondary button-sm">Edit</a> ' +
                                   '<button onclick="window.deleteCampaignType(' + id + ')" class="button button-danger button-sm">Delete</button>';
                        },
                    },
                    { title: 'Name', field: 'name', minWidth: 200 },
                    {
                        title: 'Attributes',
                        field: 'attributes_summary',
                        minWidth: 240,
                        formatter: function (cell) {
                            const v = cell.getValue();
                            return v ? '<span class="attr-summary">' + _escapeHtml(v) + '</span>'
                                     : '<span class="attr-empty">&mdash;</span>';
                        },
                    },
                    { title: 'Count',   field: 'attribute_count', hozAlign: 'center', width: 80 },
                    { title: 'Created', field: 'created_at', minWidth: 160 },
                ],
            });
        },

        reloadTable() {
            if (!this.table) {
                this.initTable();
                return;
            }
            this.table.setData('/campaign-types/data');
        },
    };
};

window.deleteCampaignType = function (id) {
    if (!confirm('Delete this campaign type? This cannot be undone.')) {
        return;
    }
    _postDelete('/campaign-types/' + id + '/delete');
};

window.campaignTypeForm = function (initialAttributes) {
    return {
        attributes:    Array.isArray(initialAttributes) ? initialAttributes : [],
        dragIndex:     null,
        dragOverIndex: null,

        addAttribute() {
            this.attributes.push({ name: '', type: 'text', order: this.attributes.length + 1 });
        },

        removeAttribute(index) {
            this.attributes.splice(index, 1);
            this.renumberOrder();
        },

        renumberOrder() {
            this.attributes.forEach(function (attr, i) { attr.order = i + 1; });
        },

        dragStart(event, index) {
            this.dragIndex = index;
            event.dataTransfer.effectAllowed = 'move';
        },

        dragOver(event, index) {
            this.dragOverIndex = index;
        },

        drop(event, index) {
            if (this.dragIndex !== null && this.dragIndex !== index) {
                var moved = this.attributes.splice(this.dragIndex, 1)[0];
                this.attributes.splice(index, 0, moved);
                this.renumberOrder();
            }
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        dragEnd() {
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        confirmDelete(event) {
            if (confirm('Delete this campaign type? This cannot be undone.')) {
                event.target.submit();
            }
        },
    };
};

// ── Campaign ──────────────────────────────────────────────────────────────────

window.campaignTable = function () {
    return {
        table: null,
        jobsTable: null,
        isLoading: false,
        isJobsLoading: false,
        errorMessage: '',
        jobsErrorMessage: '',
        selectedCampaignId: null,
        selectedCampaignTitle: '',

        init() {
            this.loadTable();
        },

        async loadTable() {
            const el = document.getElementById('campaign-table');
            if (!el || typeof Tabulator === 'undefined' || this.isLoading) {
                return;
            }

            this.isLoading = true;
            this.errorMessage = '';

            try {
                const response = await fetch('/campaigns/data', {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load campaigns.');
                }

                const rows = await response.json();
                const campaignRows = Array.isArray(rows) ? rows : [];
                const attributes = this.attributeColumnsForRows(campaignRows);
                const tableRows = this.formatRows(campaignRows, attributes);
                const columns = this.columnsForAttributes(attributes);

                if (!this.table) {
                    this.table = new Tabulator(el, {
                        data: tableRows,
                        layout: 'fitColumns',
                        responsiveLayout: 'collapse',
                        pagination: true,
                        paginationMode: 'local',
                        paginationSize: 10,
                        paginationSizeSelector: PAGE_SIZES,
                        movableColumns: true,
                        placeholder: 'No campaigns found.',
                        initialSort: [{ column: 'campaign_type_name', dir: 'asc' }],
                        columns: columns,
                    });
                    this.table.on('rowClick', (event, row) => this.goToCampaignJobs(event, row));
                } else {
                    this.table.setColumns(columns);
                    this.table.setData(tableRows);
                }
            } catch (error) {
                this.errorMessage = error.message || 'Unable to load campaigns.';
            } finally {
                this.isLoading = false;
            }
        },

        attributeColumnsForRows(rows) {
            const attributes = [];

            rows.forEach((row) => {
                this.normalizeAttributes(row.campaign_type_attributes || []).forEach((attr) => {
                    if (!attributes.some((existing) => existing.name === attr.name)) {
                        attributes.push(attr);
                    }
                });

                Object.keys(row.attribute_values || {}).forEach((name) => {
                    if (!attributes.some((existing) => existing.name === name)) {
                        attributes.push({ name: name, type: 'text', order: attributes.length + 1 });
                    }
                });
            });

            return attributes;
        },

        normalizeAttributes(attributes) {
            return attributes
                .filter((attr) => attr && attr.name)
                .slice()
                .sort((a, b) => (a.order || 0) - (b.order || 0));
        },

        formatRows(rows, attributes) {
            return rows.map((row) => {
                const attributeValues = row.attribute_values || {};
                const tableRow = {
                    id: row.id,
                    campaign_type_name: row.campaign_type_name || '',
                    created_at: row.created_at || '',
                };

                attributes.forEach((attr, index) => {
                    tableRow['attr_' + index] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                return tableRow;
            });
        },

        formatAttributeValue(value) {
            if (value === null || value === undefined) {
                return '';
            }

            if (Array.isArray(value) || typeof value === 'object') {
                return JSON.stringify(value);
            }

            return String(value);
        },

        columnsForAttributes(attributes) {
            const columns = [
                {
                    title: 'Actions',
                    field: 'id',
                    width: 230,
                    hozAlign: 'center',
                    headerSort: false,
                    formatter: function (cell) {
                        const id = cell.getValue();
                        return '<a href="/campaigns/' + id + '/jobs" class="button button-primary button-sm">Jobs</a> ' +
                               '<a href="/campaigns/' + id + '/edit" class="button button-secondary button-sm">Edit</a> ' +
                               '<button onclick="window.deleteCampaign(' + id + ')" class="button button-danger button-sm">Delete</button>';
                    },
                },
                {
                    title: 'Campaign Type',
                    field: 'campaign_type_name',
                    minWidth: 160,
                    headerFilter: 'input',
                },
            ];

            attributes.forEach((attr, index) => {
                columns.push({
                    title: attr.name,
                    field: 'attr_' + index,
                    minWidth: 150,
                    headerFilter: 'input',
                    formatter: function (cell) {
                        const value = cell.getValue();
                        return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                    },
                });
            });

            columns.push(
                { title: 'Created', field: 'created_at', minWidth: 160, headerFilter: 'input' }
            );

            return columns;
        },

        goToCampaignJobs(event, row) {
            const target = event.target;
            if (target instanceof Element && target.closest('a, button')) {
                return;
            }

            window.location.href = '/campaigns/' + encodeURIComponent(row.getData().id) + '/jobs';
        },

        reloadTable() {
            this.loadTable();
        },

        openCampaignJobs(campaign) {
            this.selectedCampaignId = campaign.id;
            this.selectedCampaignTitle = 'Campaign #' + campaign.id + ' - ' + campaign.campaign_type_name;
            this.$nextTick(() => this.loadJobsTable());
        },

        async reloadJobsTable() {
            if (!this.selectedCampaignId) {
                return;
            }

            await this.loadJobsTable();
        },

        closeJobsTable() {
            this.selectedCampaignId = null;
            this.selectedCampaignTitle = '';
            this.jobsErrorMessage = '';

            if (this.jobsTable && typeof this.jobsTable.destroy === 'function') {
                this.jobsTable.destroy();
            }

            this.jobsTable = null;
        },

        async loadJobsTable() {
            const el = document.getElementById('campaign-jobs-drilldown-table');
            if (!el || typeof Tabulator === 'undefined' || this.isJobsLoading) {
                return;
            }

            this.isJobsLoading = true;
            this.jobsErrorMessage = '';

            try {
                const response = await fetch('/campaigns/' + encodeURIComponent(this.selectedCampaignId) + '/jobs/data', {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load campaign jobs.');
                }

                const rows = await response.json();
                const jobRows = Array.isArray(rows) ? rows : [];
                const attributes = this.jobAttributeColumnsForRows(jobRows);
                const tableRows = this.formatJobRows(jobRows, attributes);
                const columns = this.jobColumnsForAttributes(attributes);

                if (!this.jobsTable) {
                    this.jobsTable = new Tabulator(el, {
                        data: tableRows,
                        layout: 'fitColumns',
                        responsiveLayout: 'collapse',
                        pagination: true,
                        paginationMode: 'local',
                        paginationSize: 10,
                        paginationSizeSelector: PAGE_SIZES,
                        movableColumns: true,
                        placeholder: 'No jobs found for this campaign.',
                        initialSort: [{ column: 'job_type_name', dir: 'asc' }],
                        columns: columns,
                        ..._tabulatorBaseOptions(this.persistenceKey),
                    });
                } else {
                    this.jobsTable.setColumns(columns);
                    this.jobsTable.setData(tableRows);
                }
            } catch (error) {
                this.jobsErrorMessage = error.message || 'Unable to load campaign jobs.';
            } finally {
                this.isJobsLoading = false;
            }
        },

        jobAttributeColumnsForRows(rows) {
            return _discoverAttributeColumns(rows, 'job_type_attributes', this.normalizeAttributes);
        },

        formatJobRows(rows, attributes) {
            return rows.map((row) => {
                const attributeValues = row.attribute_values || {};
                const tableRow = {
                    id: row.id,
                    campaign_id: row.campaign_id || '',
                    job_type_id: row.job_type_id || '',
                    job_type_name: row.job_type_name || '',
                    created_at: row.created_at || '',
                    updated_at: row.updated_at || '',
                    edit_url: '/jobs/' + encodeURIComponent(row.id) + '/edit',
                };

                attributes.forEach((attr) => {
                    tableRow[attr.field] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                return tableRow;
            });
        },

        jobColumnsForAttributes(attributes) {
            const columns = [
                {
                    title: 'Actions',
                    field: 'edit_url',
                    width: 90,
                    hozAlign: 'center',
                    headerSort: false,
                    formatter: function (cell) {
                        return '<a href="' + _escapeHtml(cell.getValue()) + '" class="button button-secondary button-sm">Edit</a>';
                    },
                },
                { title: 'Job ID', field: 'id', width: 90, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Campaign ID', field: 'campaign_id', width: 120, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Job Type ID', field: 'job_type_id', width: 120, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Job Type', field: 'job_type_name', minWidth: 160, headerFilter: 'input' },
            ];

            attributes.forEach((attr) => {
                columns.push({
                    title: attr.name,
                    field: attr.field,
                    minWidth: 150,
                    headerFilter: 'input',
                    formatter: function (cell) {
                        const value = cell.getValue();
                        return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                    },
                });
            });

            columns.push(
                { title: 'Created', field: 'created_at', minWidth: 160, headerFilter: 'input' },
                { title: 'Updated', field: 'updated_at', minWidth: 160, headerFilter: 'input' }
            );

            return columns;
        },
    };
};

window.deleteCampaign = function (id) {
    if (!confirm('Delete this campaign? This cannot be undone.')) {
        return;
    }
    _postDelete('/campaigns/' + id + '/delete');
};

window.campaignJobsPageTable = function (campaignId, jobTypes) {
    return {
        table: null,
        jobTypes: Array.isArray(jobTypes) ? jobTypes : [],
        isLoading: false,
        configMessage: '',
        isConnecting: false,
        isImporting: false,
        errorMessage: '',
        importSheetUrl: '',
        sheets: [],
        selectedSheetGid: '',
        selectedImportJobTypeId: '0',
        importMessage: '',
        importErrorMessage: '',

        // File upload state
        importSource: 'sheets',
        fileSelected: false,
        fileTempName: '',
        fileSheets: [],
        selectedFileSheetGid: '',
        selectedFileJobTypeId: '0',
        isLoadingFile: false,
        isImportingFile: false,
        persistenceKey: 'campaign-jobs-page-' + campaignId,

        init() {
            this.loadTable();
        },

        dataUrl() {
            return '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/data';
        },

        sheetsUrl() {
            return '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/import/sheets';
        },

        importUrl() {
            return '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/import';
        },

        async loadTable() {
            const el = document.getElementById('campaign-jobs-page-table');
            if (!el || typeof Tabulator === 'undefined' || this.isLoading) {
                return;
            }

            this.isLoading = true;
            this.errorMessage = '';

            try {
                const response = await fetch(this.dataUrl(), {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load campaign jobs.');
                }

                const rows = await response.json();
                const jobRows = Array.isArray(rows) ? rows : [];
                const attributes = this.attributeColumnsForRows(jobRows);
                const tableRows = this.formatRows(jobRows, attributes);
                const columns = this.columnsForAttributes(attributes);

                if (!this.table) {
                    this.table = new Tabulator(el, {
                        data: tableRows,
                        layout: 'fitData',
                        maxHeight: '65vh',
                        pagination: true,
                        paginationMode: 'local',
                        paginationSize: 10,
                        paginationSizeSelector: PAGE_SIZES,
                        movableColumns: true,
                        placeholder: 'No jobs found for this campaign.',
                        initialSort: [{ column: 'job_type_name', dir: 'asc' }],
                        columns: columns,
                    });
                } else {
                    this.table.setColumns(columns);
                    this.table.setData(tableRows);
                }
            } catch (error) {
                this.errorMessage = error.message || 'Unable to load campaign jobs.';
            } finally {
                this.isLoading = false;
            }
        },

        attributeColumnsForRows(rows) {
            const attributes = [];

            rows.forEach((row) => {
                this.normalizeAttributes(row.job_type_attributes || []).forEach((attr) => {
                    if (!attributes.some((existing) => existing.name === attr.name)) {
                        attributes.push(attr);
                    }
                });

                Object.keys(row.attribute_values || {}).forEach((name) => {
                    if (!attributes.some((existing) => existing.name === name)) {
                        attributes.push({ name: name, type: 'text', order: attributes.length + 1 });
                    }
                });
            });

            return attributes;
        },

        normalizeAttributes(attributes) {
            return attributes
                .filter((attr) => attr && attr.name)
                .slice()
                .sort((a, b) => (a.order || 0) - (b.order || 0));
        },

        formatRows(rows, attributes) {
            return rows.map((row) => {
                const attributeValues = row.attribute_values || {};
                const tableRow = {
                    id: row.id,
                    campaign_id: row.campaign_id || '',
                    campaign_type_name: row.campaign_type_name || '',
                    job_type_id: row.job_type_id || '',
                    job_type_name: row.job_type_name || '',
                    created_at: row.created_at || '',
                    updated_at: row.updated_at || '',
                    edit_url: '/jobs/' + encodeURIComponent(row.id) + '/edit',
                };

                attributes.forEach((attr, index) => {
                    tableRow['attr_' + index] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                return tableRow;
            });
        },

        formatAttributeValue(value) {
            if (value === null || value === undefined) {
                return '';
            }

            if (Array.isArray(value) || typeof value === 'object') {
                return JSON.stringify(value);
            }

            return String(value);
        },

        columnsForAttributes(attributes) {
            const columns = [
                {
                    title: 'Actions',
                    field: 'edit_url',
                    width: 90,
                    hozAlign: 'center',
                    headerSort: false,
                    formatter: function (cell) {
                        return '<a href="' + _escapeHtml(cell.getValue()) + '" class="button button-secondary button-sm">Edit</a>';
                    },
                },
                { title: 'Job ID', field: 'id', width: 90, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Campaign ID', field: 'campaign_id', width: 120, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Campaign Type', field: 'campaign_type_name', minWidth: 160, headerFilter: 'input' },
                { title: 'Job Type ID', field: 'job_type_id', width: 120, hozAlign: 'center', headerFilter: 'input' },
                { title: 'Job Type', field: 'job_type_name', minWidth: 160, headerFilter: 'input' },
            ];

            attributes.forEach((attr, index) => {
                columns.push({
                    title: attr.name,
                    field: 'attr_' + index,
                    minWidth: 150,
                    headerFilter: 'input',
                    formatter: function (cell) {
                        const value = cell.getValue();
                        return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                    },
                });
            });

            columns.push(
                { title: 'Created', field: 'created_at', minWidth: 160, headerFilter: 'input' },
                { title: 'Updated', field: 'updated_at', minWidth: 160, headerFilter: 'input' }
            );

            return columns;
        },

        reloadTable() {
            this.loadTable();
        },

        async exportCsv() {
            try {
                await _exportTabulatorCsv('/campaigns/' + encodeURIComponent(campaignId) + '/jobs/export', this.table, 'campaign-jobs-export.csv');
            } catch (error) {
                this.errorMessage = error.message || 'Unable to export CSV.';
            }
        },

        async connectGoogleSheet() {
            this.isConnecting = true;
            this.importMessage = '';
            this.importErrorMessage = '';
            this.sheets = [];
            this.selectedSheetGid = '';

            try {
                const data = await this.postImportForm(this.sheetsUrl(), {
                    sheet_url: this.importSheetUrl,
                });

                this.sheets = Array.isArray(data.sheets) ? data.sheets : [];
                if (this.sheets.length > 0) {
                    this.selectedSheetGid = this.sheets[0].gid;
                    this.importMessage = 'Connected. Select a sheet and job type to import.';
                } else {
                    this.importErrorMessage = 'No sheets were found in that Google Sheets file.';
                }
            } catch (error) {
                this.importErrorMessage = error.message || 'Unable to connect to Google Sheets.';
            } finally {
                this.isConnecting = false;
            }
        },

        async importGoogleSheet() {
            this.isImporting = true;
            this.importMessage = '';
            this.importErrorMessage = '';

            try {
                const data = await this.postImportForm(this.importUrl(), {
                    sheet_url: this.importSheetUrl,
                    sheet_gid: this.selectedSheetGid,
                    job_type_id: this.selectedImportJobTypeId,
                });

                const matched = Array.isArray(data.matched_attributes) ? data.matched_attributes.join(', ') : '';
                this.importMessage = 'Imported ' + data.imported + ' jobs. Skipped ' + data.skipped + ' empty rows.' +
                    (matched ? ' Matched: ' + matched + '.' : '');
                await this.loadTable();
            } catch (error) {
                this.importErrorMessage = error.message || 'Unable to import Google Sheet.';
            } finally {
                this.isImporting = false;
            }
        },

        async postImportForm(url, fields) {
            const body = new URLSearchParams();
            body.set('_token', window.__csrf || '');

            Object.keys(fields).forEach((key) => {
                body.set(key, fields[key] || '');
            });

            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                },
                body: body.toString(),
            });

            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(data.error || 'Import failed.');
            }

            return data;
        },

        // ── File upload methods ───────────────────────────────────────────────

        onFileSelect(event) {
            this.fileSelected  = event.target.files && event.target.files.length > 0;
            this.fileTempName  = '';
            this.fileSheets    = [];
            this.selectedFileSheetGid = '';
            this.importMessage = '';
            this.importErrorMessage = '';
        },

        async loadFileSheets() {
            this.isLoadingFile  = true;
            this.importMessage  = '';
            this.importErrorMessage = '';
            this.fileTempName   = '';
            this.fileSheets     = [];
            this.selectedFileSheetGid = '';

            try {
                const fileInput = this.$refs.fileInput;
                if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
                    throw new Error('No file selected.');
                }

                const form = new FormData();
                form.set('_token', window.__csrf || '');
                form.set('import_file', fileInput.files[0]);

                const url      = '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/import/file/sheets';
                const response = await fetch(url, {
                    method: 'POST',
                    headers: { Accept: 'application/json' },
                    body: form,
                });

                const data = await response.json().catch(() => ({}));
                if (!response.ok) {
                    throw new Error(data.error || 'Could not read the file.');
                }

                this.fileTempName  = data.temp_file || '';
                this.fileSheets    = Array.isArray(data.sheets) ? data.sheets : [];

                if (this.fileSheets.length > 0) {
                    this.selectedFileSheetGid = this.fileSheets[0].gid;
                    this.importMessage = 'File loaded. Select a sheet and job type to import.';
                } else {
                    this.importErrorMessage = 'No sheets were found in the uploaded file.';
                }
            } catch (error) {
                this.importErrorMessage = error.message || 'Could not read the file.';
            } finally {
                this.isLoadingFile = false;
            }
        },

        async importFile() {
            this.isImportingFile    = true;
            this.importMessage      = '';
            this.importErrorMessage = '';

            try {
                const url  = '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/import/file';
                const data = await this.postImportForm(url, {
                    temp_file:   this.fileTempName,
                    sheet_gid:   this.selectedFileSheetGid,
                    job_type_id: this.selectedFileJobTypeId,
                });

                const matched = Array.isArray(data.matched_attributes) ? data.matched_attributes.join(', ') : '';
                this.importMessage = 'Imported ' + data.imported + ' jobs. Skipped ' + data.skipped + ' empty rows.' +
                    (matched ? ' Matched: ' + matched + '.' : '');
                this.fileTempName = '';
                await this.loadTable();
            } catch (error) {
                this.importErrorMessage = error.message || 'Import failed.';
            } finally {
                this.isImportingFile = false;
            }
        },
    };
};

window.campaignForm = function (types, initialTypeId, initialValues) {
    return {
        types:           types,
        selectedTypeId:  String(initialTypeId || ''),
        attributeValues: Object.assign({}, initialValues || {}),

        get currentType() {
            var id = this.selectedTypeId;
            if (!id) return null;
            return this.types.find(function (t) { return String(t.id) === String(id); }) || null;
        },

        get currentAttributes() {
            if (!this.currentType) return [];
            return this.currentType.attributes.slice().sort(function (a, b) {
                return (a.order || 0) - (b.order || 0);
            });
        },

        onTypeChange() {
            this.attributeValues = {};
        },

        inputType(attrType) {
            return ['number', 'date'].includes(attrType) ? attrType : 'text';
        },

        confirmDelete(event) {
            if (confirm('Delete this campaign? This cannot be undone.')) {
                event.target.submit();
            }
        },
    };
};

// Campaign Jobs

window.campaignJobsTable = function (campaignId) {
    return {
        tables: {},
        groups: [],
        isVisible: false,
        isLoading: false,
        hasLoaded: false,
        errorMessage: '',

        dataUrl() {
            return '/campaigns/' + encodeURIComponent(campaignId) + '/jobs/data';
        },

        async showTable() {
            this.isVisible = true;
            if (!this.hasLoaded) {
                await this.loadGroups();
            }
        },

        hideTable() {
            this.isVisible = false;
        },

        async reloadTable() {
            this.isVisible = true;
            await this.loadGroups();
        },

        async loadGroups() {
            this.isLoading = true;
            this.errorMessage = '';
            this.destroyTables();

            try {
                const response = await fetch(this.dataUrl(), {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load campaign jobs.');
                }

                const rows = await response.json();
                this.groups = this.groupRows(Array.isArray(rows) ? rows : []);
                this.hasLoaded = true;
                this.$nextTick(() => this.initTables());
            } catch (error) {
                this.groups = [];
                this.errorMessage = error.message || 'Unable to load campaign jobs.';
            } finally {
                this.isLoading = false;
            }
        },

        groupRows(rows) {
            const groups = {};

            rows.forEach((row) => {
                const id = String(row.job_type_id || 0);
                if (!groups[id]) {
                    groups[id] = {
                        id: id,
                        elementId: 'campaign-jobs-table-' + id,
                        name: row.job_type_name || 'Job Type #' + id,
                        attributes: this.normalizeAttributes(row.job_type_attributes || []),
                        rows: [],
                    };
                }

                const attributeValues = row.attribute_values || {};
                this.ensureAttributeColumns(groups[id], attributeValues);

                const gridRow = {
                    id: row.id,
                    created_at: row.created_at || '',
                    edit_url: '/jobs/' + encodeURIComponent(row.id) + '/edit',
                };

                groups[id].attributes.forEach((attr, index) => {
                    gridRow['attr_' + index] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                groups[id].rows.push(gridRow);
            });

            return Object.values(groups).sort((a, b) => a.name.localeCompare(b.name));
        },

        ensureAttributeColumns(group, attributeValues) {
            Object.keys(attributeValues).forEach((name) => {
                const exists = group.attributes.some((attr) => attr.name === name);
                if (!exists) {
                    group.attributes.push({
                        name: name,
                        type: 'text',
                        order: group.attributes.length + 1,
                    });
                }
            });
        },

        normalizeAttributes(attributes) {
            return attributes
                .filter((attr) => attr && attr.name)
                .slice()
                .sort((a, b) => (a.order || 0) - (b.order || 0));
        },

        formatAttributeValue(value) {
            if (value === null || value === undefined) {
                return '';
            }

            if (Array.isArray(value) || typeof value === 'object') {
                return JSON.stringify(value);
            }

            return String(value);
        },

        initTables() {
            if (typeof Tabulator === 'undefined') {
                return;
            }

            this.groups.forEach((group) => {
                const el = document.getElementById(group.elementId);
                if (!el || this.tables[group.id]) {
                    return;
                }

                this.tables[group.id] = new Tabulator(el, {
                    data: group.rows,
                    layout: 'fitColumns',
                    responsiveLayout: 'collapse',
                    pagination: true,
                    paginationMode: 'local',
                    paginationSize: 5,
                    paginationSizeSelector: PAGE_SIZES_SM,
                    movableColumns: true,
                    placeholder: 'No jobs found for this job type.',
                    initialSort: [{ column: 'created_at', dir: 'desc' }],
                    columns: this.columnsForGroup(group),
                });
            });
        },

        columnsForGroup(group) {
            const actions = {
                title: 'Actions',
                field: 'edit_url',
                width: 90,
                hozAlign: 'center',
                headerSort: false,
                formatter: function (cell) {
                    return '<a href="' + _escapeHtml(cell.getValue()) + '" class="button button-secondary button-sm">Edit</a>';
                },
            };

            const attrColumns = group.attributes.map((attr, index) => ({
                title: attr.name,
                field: 'attr_' + index,
                minWidth: 150,
                formatter: function (cell) {
                    const value = cell.getValue();
                    return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                },
            }));

            if (attrColumns.length === 0) {
                attrColumns.push({ title: 'Job ID', field: 'id', width: 90, hozAlign: 'center' });
            }

            return [actions, ...attrColumns, { title: 'Created', field: 'created_at', minWidth: 160 }];
        },

        destroyTables() {
            Object.values(this.tables).forEach((table) => {
                if (table && typeof table.destroy === 'function') {
                    table.destroy();
                }
            });
            this.tables = {};
        },
    };
};

// Job Type

window.jobTypeTable = function () {
    return {
        table: null,

        init() {
            this.initTable();
        },

        initTable() {
            const el = document.getElementById('job-type-table');
            if (!el || typeof Tabulator === 'undefined') {
                return;
            }

            this.table = new Tabulator(el, {
                ajaxURL: '/job-types/data',
                layout: 'fitColumns',
                responsiveLayout: 'collapse',
                pagination: true,
                paginationMode: 'local',
                paginationSize: 10,
                paginationSizeSelector: PAGE_SIZES,
                movableColumns: true,
                placeholder: 'No job types found.',
                initialSort: [{ column: 'name', dir: 'asc' }],
                columns: [
                    {
                        title: 'Actions',
                        field: 'id',
                        width: 160,
                        hozAlign: 'center',
                        headerSort: false,
                        formatter: function (cell) {
                            const id = cell.getValue();
                            return '<a href="/job-types/' + id + '/edit" class="button button-secondary button-sm">Edit</a> ' +
                                   '<button onclick="window.deleteJobType(' + id + ')" class="button button-danger button-sm">Delete</button>';
                        },
                    },
                    { title: 'Name', field: 'name', minWidth: 200 },
                    {
                        title: 'Attributes',
                        field: 'attributes_summary',
                        minWidth: 240,
                        formatter: function (cell) {
                            const v = cell.getValue();
                            return v ? '<span class="attr-summary">' + _escapeHtml(v) + '</span>'
                                     : '<span class="attr-empty">&mdash;</span>';
                        },
                    },
                    { title: 'Count',   field: 'attribute_count', hozAlign: 'center', width: 80 },
                    { title: 'Created', field: 'created_at', minWidth: 160 },
                ],
            });
        },

        reloadTable() {
            if (!this.table) {
                this.initTable();
                return;
            }
            this.table.setData('/job-types/data');
        },
    };
};

window.deleteJobType = function (id) {
    if (!confirm('Delete this job type? This cannot be undone.')) {
        return;
    }
    _postDelete('/job-types/' + id + '/delete');
};

window.jobTypeForm = function (initialAttributes, customerTypes) {
    return {
        attributes:    Array.isArray(initialAttributes) ? initialAttributes : [],
        customerTypes: Array.isArray(customerTypes)     ? customerTypes     : [],
        dragIndex:     null,
        dragOverIndex: null,

        addAttribute() {
            this.attributes.push({
                name: '', type: 'text', alias: '', order: this.attributes.length + 1,
                api_url: '', api_match_field: '', api_auto_fill: '', api_format: 'json', api_return_type: 'text',
                customer_type_id: 0,
            });
        },

        importCustomerTypeAttributes(index) {
            var row = this.attributes[index];
            if (!row) return;

            var ctId = Number(row.customer_type_id || 0);
            if (!ctId) return;

            var ct = this.customerTypes.find(function (c) { return Number(c.id) === ctId; });
            if (!ct || !Array.isArray(ct.attributes) || ct.attributes.length === 0) {
                row.customer_type_id = 0;
                return;
            }

            var imported = ct.attributes.slice().sort(function (a, b) {
                return (a.order || 0) - (b.order || 0);
            }).map(function (a) {
                var importedType = (a.type === 'api_lookup') ? 'text' : (a.type || 'text');
                return {
                    name:             a.name  || '',
                    type:             importedType,
                    alias:            a.alias || '',
                    order:            0,
                    api_url:          '',
                    api_match_field:  '',
                    api_auto_fill:    '',
                    api_format:       a.api_format      || 'json',
                    api_return_type:  a.api_return_type || 'text',
                    customer_type_id: 0,
                };
            });

            if (row.type === 'customer_lookup') {
                // Keep the lookup row; stamp api_match_field from the customer type, then insert attrs after it.
                row.api_match_field = ct.api_match_field || '';
                this.attributes.splice.apply(this.attributes, [index + 1, 0].concat(imported));
            } else {
                // Legacy customer placeholder — replace with expanded attrs.
                this.attributes.splice.apply(this.attributes, [index, 1].concat(imported));
            }
            this.renumberOrder();
        },

        removeAttribute(index) {
            this.attributes.splice(index, 1);
            this.renumberOrder();
        },

        renumberOrder() {
            this.attributes.forEach(function (attr, i) { attr.order = i + 1; });
        },

        dragStart(event, index) {
            this.dragIndex = index;
            event.dataTransfer.effectAllowed = 'move';
        },

        dragOver(event, index) {
            this.dragOverIndex = index;
        },

        drop(event, index) {
            if (this.dragIndex !== null && this.dragIndex !== index) {
                var moved = this.attributes.splice(this.dragIndex, 1)[0];
                this.attributes.splice(index, 0, moved);
                this.renumberOrder();
            }
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        dragEnd() {
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        confirmDelete(event) {
            if (confirm('Delete this job type? This cannot be undone.')) {
                event.target.submit();
            }
        },
    };
};

// ── Job ───────────────────────────────────────────────────────────────────────

window.jobTable = function () {
    return {
        table: null,
        isLoading: false,
        errorMessage: '',
        configMessage: '',
        persistenceKey: 'jobs-directory',

        init() {
            this.loadTable();
        },

        async loadTable() {
            const el = document.getElementById('job-table');
            if (!el || typeof Tabulator === 'undefined' || this.isLoading) {
                return;
            }

            this.isLoading = true;
            this.errorMessage = '';

            try {
                const response = await fetch('/jobs/data', {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load jobs.');
                }

                const rows = await response.json();
                const jobRows = Array.isArray(rows) ? rows : [];
                const attributes = this.attributeColumnsForRows(jobRows);
                const tableRows = this.formatRows(jobRows, attributes);
                const columns = this.columnsForAttributes(attributes);

                if (this.table) {
                    this.table.destroy();
                    this.table = null;
                }

                this.table = new Tabulator(el, {
                    data: tableRows,
                    layout: 'fitData',
                    pagination: true,
                    paginationMode: 'local',
                    paginationSize: 10,
                    paginationSizeSelector: PAGE_SIZES,
                    movableColumns: true,
                    placeholder: 'No jobs found.',
                    initialSort: [{ column: 'job_type_name', dir: 'asc' }],
                    columns: columns,
                    ..._tabulatorBaseOptions(this.persistenceKey),
                });
            } catch (error) {
                this.errorMessage = error.message || 'Unable to load jobs.';
            } finally {
                this.isLoading = false;
            }
        },

        attributeColumnsForRows(rows) {
            return _discoverAttributeColumns(rows, 'job_type_attributes', this.normalizeAttributes);
        },

        normalizeAttributes(attributes) {
            return attributes
                .filter((attr) => attr && attr.name)
                .slice()
                .sort((a, b) => (a.order || 0) - (b.order || 0));
        },

        formatRows(rows, attributes) {
            return rows.map((row) => {
                const attributeValues = row.attribute_values || {};
                const tableRow = {
                    id: row.id,
                    edit_url: '/jobs/' + encodeURIComponent(row.id) + '/edit',
                    campaign_id: row.campaign_id || '',
                    campaign_type_name: row.campaign_type_name || '',
                    job_type_id: row.job_type_id || '',
                    job_type_name: row.job_type_name || '',
                    created_at: row.created_at || '',
                    updated_at: row.updated_at || '',
                };

                attributes.forEach((attr) => {
                    tableRow[attr.field] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                return tableRow;
            });
        },

        formatAttributeValue(value) {
            if (value === null || value === undefined) {
                return '';
            }

            if (Array.isArray(value) || typeof value === 'object') {
                return JSON.stringify(value);
            }

            return String(value);
        },

        columnsForAttributes(attributes) {
            const columns = [
                {
                    title: 'Actions',
                    field: 'edit_url',
                    width: 160,
                    hozAlign: 'center',
                    headerSort: false,
                    formatter: function (cell) {
                        const url = cell.getValue();
                        const id  = cell.getRow().getData().id;
                        return '<a href="' + _escapeHtml(url) + '" class="button button-secondary button-sm">Edit</a> ' +
                               '<button onclick="window.deleteJob(' + id + ')" class="button button-danger button-sm">Delete</button>';
                    },
                },
                { title: 'Job ID',   field: 'id',                 width: 90,     hozAlign: 'center', headerFilter: 'input' },
                { title: 'Campaign', field: 'campaign_type_name', minWidth: 160,  headerFilter: 'input' },
                { title: 'Job Type', field: 'job_type_name',      minWidth: 160,  headerFilter: 'input' },
            ];

            attributes.forEach((attr) => {
                columns.push({
                    title: attr.name,
                    field: attr.field,
                    minWidth: 150,
                    headerFilter: 'input',
                    formatter: function (cell) {
                        const value = cell.getValue();
                        return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                    },
                });
            });

            columns.push(
                { title: 'Created', field: 'created_at', minWidth: 160, headerFilter: 'input' },
                { title: 'Updated', field: 'updated_at', minWidth: 160, headerFilter: 'input' }
            );

            return columns;
        },

        reloadTable() {
            this.loadTable();
        },

        async exportCsv() {
            try {
                await _exportTabulatorCsv('/jobs/export', this.table, 'jobs-export.csv');
            } catch (error) {
                this.errorMessage = error.message || 'Unable to export CSV.';
            }
        },

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

            const shouldReset = window.confirm('Reset this table configuration? This clears saved columns, filters, sorting, and page size.');
            if (!shouldReset) {
                return;
            }

            _clearTabulatorPersistence(this.persistenceKey);
            this.configMessage = 'Table configuration reset.';
            this.loadTable();
            window.setTimeout(() => {
                this.configMessage = '';
            }, 3000);
        },
    };
};

window.deleteJob = function (id) {
    if (!confirm('Delete this job? This cannot be undone.')) {
        return;
    }
    _postDelete('/jobs/' + id + '/delete');
};

window.jobForm = function (jobTypes, initialTypeId, initialValues) {
    return {
        jobTypes:        jobTypes,
        selectedTypeId:  String(initialTypeId || ''),
        attributeValues: Object.assign({}, initialValues || {}),
        apiLookupState:       {},
        apiLookupError:       {},
        apiLookupOptions:     {},
        apiLookupOpen:        {},
        customerLookupState:   {},
        customerLookupOptions: {},
        customerLookupOpen:    {},

        get currentType() {
            var id = this.selectedTypeId;
            if (!id) return null;
            return this.jobTypes.find(function (t) { return String(t.id) === String(id); }) || null;
        },

        get currentAttributes() {
            if (!this.currentType) return [];
            return this.currentType.attributes.slice().sort(function (a, b) {
                return (a.order || 0) - (b.order || 0);
            });
        },

        init() {
            var self = this;
            this.currentAttributes.forEach(function (attr) {
                if (attr.type === 'api_lookup')      { self.fetchApiValue(attr); }
                if (attr.type === 'customer_lookup') { self.fetchCustomers(attr); }
            });
        },

        onTypeChange() {
            this.attributeValues       = {};
            this.apiLookupOptions      = {};
            this.apiLookupState        = {};
            this.apiLookupOpen         = {};
            this.customerLookupOptions = {};
            this.customerLookupState   = {};
            this.customerLookupOpen    = {};
            var self = this;
            this.$nextTick(function () {
                self.currentAttributes.forEach(function (attr) {
                    if (attr.type === 'api_lookup')      { self.fetchApiValue(attr); }
                    if (attr.type === 'customer_lookup') { self.fetchCustomers(attr); }
                });
            });
        },

        inputType(attrType) {
            return ['number', 'date'].includes(attrType) ? attrType : 'text';
        },

        getApiOptions(name) {
            return this.apiLookupOptions[name] || { fields: [], records: [] };
        },

        openApiLookup(name) {
            var o = {}; o[name] = true;
            this.apiLookupOpen = Object.assign({}, this.apiLookupOpen, o);
        },

        closeApiLookup(name) {
            var o = {}; o[name] = false;
            this.apiLookupOpen = Object.assign({}, this.apiLookupOpen, o);
        },

        getFilteredRecords(name, search) {
            var records = this.getApiOptions(name).records;
            if (!search) return records;
            var term = String(search).toLowerCase();
            return records.filter(function (rec) {
                return rec._display.some(function (v) {
                    return String(v).toLowerCase().indexOf(term) !== -1;
                });
            });
        },

        selectApiOption(attr, rec) {
            var newValues = Object.assign({}, this.attributeValues);
            newValues[attr.name] = rec._primary;

            var autoFill = (attr.api_auto_fill || '').split(';').map(function (s) { return s.trim(); }).filter(Boolean);
            var attrs    = this.currentAttributes;
            autoFill.forEach(function (alias) {
                var target = null;
                for (var i = 0; i < attrs.length; i++) {
                    if (attrs[i].alias === alias) { target = attrs[i]; break; }
                }
                if (!target) return;
                var rowVal = rec._row[alias];
                if (rowVal !== undefined && rowVal !== null) {
                    newValues[target.name] = String(rowVal);
                }
            });

            this.attributeValues = newValues;
            this.closeApiLookup(attr.name);
        },

        fetchApiValue(attr) {
            var self = this;
            if (!attr.api_url) return;

            var resolvedUrl = attr.api_url.replace(/\{alias\}/g, encodeURIComponent(attr.alias || ''));

            // Reassign whole objects so Alpine sees new references and re-renders nested x-for
            var s = {}; s[attr.name] = 'loading';
            var e = {}; e[attr.name] = '';
            var o = {}; o[attr.name] = { fields: [], records: [] };
            self.apiLookupState   = Object.assign({}, self.apiLookupState,   s);
            self.apiLookupError   = Object.assign({}, self.apiLookupError,   e);
            self.apiLookupOptions = Object.assign({}, self.apiLookupOptions, o);

            var matchFields = (attr.api_match_field || '')
                .split(';')
                .map(function (s) { return s.trim(); })
                .filter(Boolean);

            fetch('/api/proxy?url=' + encodeURIComponent(resolvedUrl))
                .then(function (res) { return res.json(); })
                .then(function (envelope) {
                    if (envelope.error) {
                        var se = {}; se[attr.name] = envelope.error;
                        var ss = {}; ss[attr.name] = 'error';
                        self.apiLookupError = Object.assign({}, self.apiLookupError, se);
                        self.apiLookupState = Object.assign({}, self.apiLookupState, ss);
                        return;
                    }
                    var body   = envelope.body || '';
                    var result = { fields: matchFields.slice(), records: [] };
                    var seenRows = [];

                    function addRow(rawRow) {
                        if (seenRows.indexOf(rawRow) !== -1) return;
                        seenRows.push(rawRow);
                        var display = result.fields.map(function (f) {
                            var v = rawRow[f]; return (v !== undefined && v !== null) ? String(v) : '';
                        });
                        result.records.push({ _primary: display[0] || '', _display: display, _row: rawRow });
                    }

                    if (attr.api_format === 'xml') {
                        try {
                            var doc = new DOMParser().parseFromString(body, 'text/xml');
                            if (result.fields.length === 0) { result.fields = [doc.documentElement.tagName]; }
                            // Collect sibling-based rows keyed by the first match field element
                            var firstField = result.fields[0];
                            var els = doc.getElementsByTagName(firstField);
                            for (var xi = 0; xi < els.length; xi++) {
                                var row = {};
                                var par = els[xi].parentNode;
                                if (par) {
                                    for (var xc = 0; xc < par.childNodes.length; xc++) {
                                        var cn = par.childNodes[xc];
                                        if (cn.nodeType === 1) { row[cn.tagName] = cn.textContent.trim(); }
                                    }
                                }
                                addRow(row);
                            }
                        } catch (e) { /* leave records empty */ }
                    } else {
                        try {
                            var parsed = JSON.parse(body);
                            if (result.fields.length > 0) {
                                // Collect unique parent rows that own the first match field
                                _deepFindRows(parsed, result.fields[0]).forEach(function (hit) { addRow(hit.row); });
                            } else if (Array.isArray(parsed)) {
                                result.fields = ['Value'];
                                parsed.forEach(function (item) {
                                    if (typeof item !== 'object') { addRow({ Value: String(item) }); }
                                });
                            } else if (typeof parsed === 'string' || typeof parsed === 'number' || typeof parsed === 'boolean') {
                                result.fields = ['Value'];
                                addRow({ Value: String(parsed) });
                            }
                        } catch (e) { /* leave records empty */ }
                    }

                    var oo = {}; oo[attr.name] = result;
                    var os = {}; os[attr.name] = 'idle';
                    self.apiLookupOptions = Object.assign({}, self.apiLookupOptions, oo);
                    self.apiLookupState   = Object.assign({}, self.apiLookupState,   os);
                })
                .catch(function (err) {
                    console.error('[api-lookup] fetch failed:', err);
                    var ce = {}; ce[attr.name] = 'Network error — see browser console.';
                    var cs = {}; cs[attr.name] = 'error';
                    self.apiLookupError = Object.assign({}, self.apiLookupError, ce);
                    self.apiLookupState = Object.assign({}, self.apiLookupState, cs);
                });
        },

        getCustomerOptions(name) {
            return this.customerLookupOptions[name] || { fields: [], records: [] };
        },

        openCustomerLookup(name) {
            var o = {}; o[name] = true;
            this.customerLookupOpen = Object.assign({}, this.customerLookupOpen, o);
        },

        closeCustomerLookup(name) {
            var o = {}; o[name] = false;
            this.customerLookupOpen = Object.assign({}, this.customerLookupOpen, o);
        },

        getFilteredCustomers(name, search) {
            var records = this.getCustomerOptions(name).records;
            if (!search) return records;
            var term = String(search).toLowerCase();
            return records.filter(function (rec) {
                return rec._display.some(function (v) {
                    return String(v).toLowerCase().indexOf(term) !== -1;
                });
            });
        },

        selectCustomer(attr, customer) {
            var newValues = Object.assign({}, this.attributeValues);
            newValues[attr.name] = customer._primary;
            var av = customer._raw.attribute_values || {};
            Object.keys(av).forEach(function (key) {
                newValues[key] = String(av[key] !== null && av[key] !== undefined ? av[key] : '');
            });
            this.attributeValues = newValues;
            this.closeCustomerLookup(attr.name);
        },

        fetchCustomers(attr) {
            var self       = this;
            var ctId       = Number(attr.customer_type_id || 0);
            var matchField = attr.api_match_field || '';
            if (!ctId) return;

            var s = {}; s[attr.name] = 'loading';
            var o = {}; o[attr.name] = { fields: [], records: [] };
            self.customerLookupState   = Object.assign({}, self.customerLookupState,   s);
            self.customerLookupOptions = Object.assign({}, self.customerLookupOptions, o);

            fetch('/api/customers?customer_type_id=' + ctId, { headers: { Accept: 'application/json' } })
                .then(function (res) { return res.json(); })
                .then(function (rows) {
                    var ss = {}; ss[attr.name] = 'idle';
                    if (!Array.isArray(rows) || rows.length === 0) {
                        self.customerLookupState = Object.assign({}, self.customerLookupState, ss);
                        return;
                    }
                    var attrKeys = Object.keys(rows[0].attribute_values || {});
                    var records  = rows.map(function (c) {
                        var av      = c.attribute_values || {};
                        var display = attrKeys.map(function (k) { return av[k] !== undefined && av[k] !== null ? String(av[k]) : ''; });
                        var primary = matchField && av[matchField] !== undefined ? String(av[matchField]) : String(c.id);
                        return { _primary: primary, _display: display, _raw: c };
                    });
                    var oo = {}; oo[attr.name] = { fields: attrKeys, records: records };
                    self.customerLookupOptions = Object.assign({}, self.customerLookupOptions, oo);
                    self.customerLookupState   = Object.assign({}, self.customerLookupState,   ss);
                })
                .catch(function (err) {
                    console.error('[customer-lookup] fetch failed:', err);
                    var cs = {}; cs[attr.name] = 'error';
                    self.customerLookupState = Object.assign({}, self.customerLookupState, cs);
                });
        },

        confirmDelete(event) {
            if (confirm('Delete this job? This cannot be undone.')) {
                event.target.submit();
            }
        },
    };
};

// ── Customer Type ─────────────────────────────────────────────────────────────

window.customerTypeTable = function () {
    return {
        table: null,

        init() {
            this.initTable();
        },

        initTable() {
            const el = document.getElementById('customer-type-table');
            if (!el || typeof Tabulator === 'undefined') {
                return;
            }

            this.table = new Tabulator(el, {
                ajaxURL: '/customer-types/data',
                layout: 'fitColumns',
                responsiveLayout: 'collapse',
                pagination: true,
                paginationMode: 'local',
                paginationSize: 10,
                paginationSizeSelector: PAGE_SIZES,
                movableColumns: true,
                placeholder: 'No customer types found.',
                initialSort: [{ column: 'name', dir: 'asc' }],
                columns: [
                    {
                        title: 'Actions',
                        field: 'id',
                        width: 160,
                        hozAlign: 'center',
                        headerSort: false,
                        formatter: function (cell) {
                            const id = cell.getValue();
                            return '<a href="/customer-types/' + id + '/edit" class="button button-secondary button-sm">Edit</a> ' +
                                   '<button onclick="window.deleteCustomerType(' + id + ')" class="button button-danger button-sm">Delete</button>';
                        },
                    },
                    { title: 'Name', field: 'name', minWidth: 200 },
                    {
                        title: 'Attributes',
                        field: 'attributes_summary',
                        minWidth: 240,
                        formatter: function (cell) {
                            const v = cell.getValue();
                            return v ? '<span class="attr-summary">' + _escapeHtml(v) + '</span>'
                                     : '<span class="attr-empty">&mdash;</span>';
                        },
                    },
                    { title: 'Count',   field: 'attribute_count', hozAlign: 'center', width: 80 },
                    { title: 'Created', field: 'created_at', minWidth: 160 },
                ],
            });
        },

        reloadTable() {
            if (!this.table) {
                this.initTable();
                return;
            }
            this.table.setData('/customer-types/data');
        },
    };
};

window.deleteCustomerType = function (id) {
    if (!confirm('Delete this customer type? This cannot be undone.')) {
        return;
    }
    _postDelete('/customer-types/' + id + '/delete');
};

window.customerTypeForm = function (initialAttributes) {
    return {
        attributes:    Array.isArray(initialAttributes) ? initialAttributes : [],
        dragIndex:     null,
        dragOverIndex: null,

        addAttribute() {
            this.attributes.push({ name: '', type: 'text', alias: '', order: this.attributes.length + 1, api_url: '', api_match_field: '', api_auto_fill: '', api_format: 'json', api_return_type: 'text' });
        },

        removeAttribute(index) {
            this.attributes.splice(index, 1);
            this.renumberOrder();
        },

        renumberOrder() {
            this.attributes.forEach(function (attr, i) { attr.order = i + 1; });
        },

        dragStart(event, index) {
            this.dragIndex = index;
            event.dataTransfer.effectAllowed = 'move';
        },

        dragOver(event, index) {
            this.dragOverIndex = index;
        },

        drop(event, index) {
            if (this.dragIndex !== null && this.dragIndex !== index) {
                var moved = this.attributes.splice(this.dragIndex, 1)[0];
                this.attributes.splice(index, 0, moved);
                this.renumberOrder();
            }
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        dragEnd() {
            this.dragIndex     = null;
            this.dragOverIndex = null;
        },

        confirmDelete(event) {
            if (confirm('Delete this customer type? This cannot be undone.')) {
                event.target.submit();
            }
        },
    };
};

// ── Customer ──────────────────────────────────────────────────────────────────

window.customerTable = function () {
    return {
        table: null,
        isLoading: false,
        errorMessage: '',

        init() {
            this.loadTable();
        },

        async loadTable() {
            const el = document.getElementById('customer-table');
            if (!el || typeof Tabulator === 'undefined' || this.isLoading) {
                return;
            }

            this.isLoading = true;
            this.errorMessage = '';

            try {
                const response = await fetch('/customers/data', {
                    headers: { Accept: 'application/json' },
                });

                if (!response.ok) {
                    throw new Error('Unable to load customers.');
                }

                const rows = await response.json();
                const customerRows = Array.isArray(rows) ? rows : [];
                const attributes = this.attributeColumnsForRows(customerRows);
                const tableRows = this.formatRows(customerRows, attributes);
                const columns = this.columnsForAttributes(attributes);

                if (this.table) {
                    this.table.destroy();
                    this.table = null;
                }

                this.table = new Tabulator(el, {
                    data: tableRows,
                    layout: 'fitData',
                    pagination: true,
                    paginationMode: 'local',
                    paginationSize: 10,
                    paginationSizeSelector: PAGE_SIZES,
                    movableColumns: true,
                    placeholder: 'No customers found.',
                    initialSort: [{ column: 'customer_type_name', dir: 'asc' }],
                    columns: columns,
                });
            } catch (error) {
                this.errorMessage = error.message || 'Unable to load customers.';
            } finally {
                this.isLoading = false;
            }
        },

        attributeColumnsForRows(rows) {
            const attributes = [];

            rows.forEach((row) => {
                this.normalizeAttributes(row.customer_type_attributes || []).forEach((attr) => {
                    if (!attributes.some((existing) => existing.name === attr.name)) {
                        attributes.push(attr);
                    }
                });

                Object.keys(row.attribute_values || {}).forEach((name) => {
                    if (!attributes.some((existing) => existing.name === name)) {
                        attributes.push({ name: name, type: 'text', order: attributes.length + 1 });
                    }
                });
            });

            return attributes;
        },

        normalizeAttributes(attributes) {
            return attributes
                .filter((attr) => attr && attr.name)
                .slice()
                .sort((a, b) => (a.order || 0) - (b.order || 0));
        },

        formatRows(rows, attributes) {
            return rows.map((row) => {
                const attributeValues = row.attribute_values || {};
                const tableRow = {
                    id: row.id,
                    edit_url: '/customers/' + encodeURIComponent(row.id) + '/edit',
                    customer_type_id: row.customer_type_id || '',
                    customer_type_name: row.customer_type_name || '',
                    created_at: row.created_at || '',
                };

                attributes.forEach((attr, index) => {
                    tableRow['attr_' + index] = this.formatAttributeValue(attributeValues[attr.name] ?? '');
                });

                return tableRow;
            });
        },

        formatAttributeValue(value) {
            if (value === null || value === undefined) {
                return '';
            }

            if (Array.isArray(value) || typeof value === 'object') {
                return JSON.stringify(value);
            }

            return String(value);
        },

        columnsForAttributes(attributes) {
            const columns = [
                {
                    title: 'Actions',
                    field: 'edit_url',
                    width: 160,
                    hozAlign: 'center',
                    headerSort: false,
                    formatter: function (cell) {
                        const url = cell.getValue();
                        const id  = cell.getRow().getData().id;
                        return '<a href="' + _escapeHtml(url) + '" class="button button-secondary button-sm">Edit</a> ' +
                               '<button onclick="window.deleteCustomer(' + id + ')" class="button button-danger button-sm">Delete</button>';
                    },
                },
                { title: 'Customer ID',   field: 'id',                 width: 110,    hozAlign: 'center', headerFilter: 'input' },
                { title: 'Customer Type', field: 'customer_type_name', minWidth: 180, headerFilter: 'input' },
            ];

            attributes.forEach((attr, index) => {
                columns.push({
                    title: attr.name,
                    field: 'attr_' + index,
                    minWidth: 150,
                    headerFilter: 'input',
                    formatter: function (cell) {
                        const value = cell.getValue();
                        return value ? _escapeHtml(value) : '<span class="attr-empty">&mdash;</span>';
                    },
                });
            });

            columns.push(
                { title: 'Created', field: 'created_at', minWidth: 160, headerFilter: 'input' }
            );

            return columns;
        },

        reloadTable() {
            this.loadTable();
        },
    };
};

window.deleteCustomer = function (id) {
    if (!confirm('Delete this customer? This cannot be undone.')) {
        return;
    }
    _postDelete('/customers/' + id + '/delete');
};

window.customerForm = function (customerTypes, initialTypeId, initialValues) {
    return {
        customerTypes:   customerTypes,
        selectedTypeId:  String(initialTypeId || ''),
        attributeValues: Object.assign({}, initialValues || {}),
        apiLookupState:   {},
        apiLookupError:   {},
        apiLookupOptions: {},
        apiLookupOpen:    {},

        // CSV import
        csvStep:          'idle',
        csvFileSelected:  false,
        isCsvUploading:   false,
        isCsvPreviewing:  false,
        isCsvApproving:   false,
        csvError:         '',
        csvHeaders:       [],
        csvMapping:       {},
        csvTempName:      '',
        csvPreviewRows:   [],
        csvPreviewStats:  { total: 0, ok: 0, duplicate: 0, empty: 0 },
        csvDoneMessage:   '',
        csvApproveErrors: [],

        get currentType() {
            var id = this.selectedTypeId;
            if (!id) return null;
            return this.customerTypes.find(function (t) { return String(t.id) === String(id); }) || null;
        },

        get currentAttributes() {
            if (!this.currentType) return [];
            return this.currentType.attributes.slice().sort(function (a, b) {
                return (a.order || 0) - (b.order || 0);
            });
        },

        init() {
            var self = this;
            this.currentAttributes.forEach(function (attr) {
                if (attr.type === 'api_lookup') { self.fetchApiValue(attr); }
            });
        },

        onTypeChange() {
            this.attributeValues  = {};
            this.apiLookupOptions = {};
            this.apiLookupState   = {};
            this.apiLookupOpen    = {};
            this.resetCsvImport();
            var self = this;
            this.$nextTick(function () {
                self.currentAttributes.forEach(function (attr) {
                    if (attr.type === 'api_lookup') { self.fetchApiValue(attr); }
                });
            });
        },

        inputType(attrType) {
            return ['number', 'date'].includes(attrType) ? attrType : 'text';
        },

        getApiOptions(name) {
            return this.apiLookupOptions[name] || { fields: [], records: [] };
        },

        openApiLookup(name) {
            var o = {}; o[name] = true;
            this.apiLookupOpen = Object.assign({}, this.apiLookupOpen, o);
        },

        closeApiLookup(name) {
            var o = {}; o[name] = false;
            this.apiLookupOpen = Object.assign({}, this.apiLookupOpen, o);
        },

        getFilteredRecords(name, search) {
            var records = this.getApiOptions(name).records;
            if (!search) return records;
            var term = String(search).toLowerCase();
            return records.filter(function (rec) {
                return rec._display.some(function (v) {
                    return String(v).toLowerCase().indexOf(term) !== -1;
                });
            });
        },

        selectApiOption(attr, rec) {
            var newValues = Object.assign({}, this.attributeValues);
            newValues[attr.name] = rec._primary;

            var autoFill = (attr.api_auto_fill || '').split(';').map(function (s) { return s.trim(); }).filter(Boolean);
            var attrs    = this.currentAttributes;
            autoFill.forEach(function (alias) {
                var target = null;
                for (var i = 0; i < attrs.length; i++) {
                    if (attrs[i].alias === alias) { target = attrs[i]; break; }
                }
                if (!target) return;
                var rowVal = rec._row[alias];
                if (rowVal !== undefined && rowVal !== null) {
                    newValues[target.name] = String(rowVal);
                }
            });

            this.attributeValues = newValues;
            this.closeApiLookup(attr.name);
        },

        fetchApiValue(attr) {
            var self = this;
            if (!attr.api_url) return;

            var resolvedUrl = attr.api_url.replace(/\{alias\}/g, encodeURIComponent(attr.alias || ''));

            var s = {}; s[attr.name] = 'loading';
            var e = {}; e[attr.name] = '';
            var o = {}; o[attr.name] = { fields: [], records: [] };
            self.apiLookupState   = Object.assign({}, self.apiLookupState,   s);
            self.apiLookupError   = Object.assign({}, self.apiLookupError,   e);
            self.apiLookupOptions = Object.assign({}, self.apiLookupOptions, o);

            var matchFields = (attr.api_match_field || '')
                .split(';')
                .map(function (s) { return s.trim(); })
                .filter(Boolean);

            fetch('/api/proxy?url=' + encodeURIComponent(resolvedUrl))
                .then(function (res) { return res.json(); })
                .then(function (envelope) {
                    if (envelope.error) {
                        var se = {}; se[attr.name] = envelope.error;
                        var ss = {}; ss[attr.name] = 'error';
                        self.apiLookupError = Object.assign({}, self.apiLookupError, se);
                        self.apiLookupState = Object.assign({}, self.apiLookupState, ss);
                        return;
                    }
                    var body   = envelope.body || '';
                    var result = { fields: matchFields.slice(), records: [] };
                    var seenRows = [];

                    function addRow(rawRow) {
                        if (seenRows.indexOf(rawRow) !== -1) return;
                        seenRows.push(rawRow);
                        var display = result.fields.map(function (f) {
                            var v = rawRow[f]; return (v !== undefined && v !== null) ? String(v) : '';
                        });
                        result.records.push({ _primary: display[0] || '', _display: display, _row: rawRow });
                    }

                    if (attr.api_format === 'xml') {
                        try {
                            var doc = new DOMParser().parseFromString(body, 'text/xml');
                            if (result.fields.length === 0) { result.fields = [doc.documentElement.tagName]; }
                            var firstField = result.fields[0];
                            var els = doc.getElementsByTagName(firstField);
                            for (var xi = 0; xi < els.length; xi++) {
                                var row = {};
                                var par = els[xi].parentNode;
                                if (par) {
                                    for (var xc = 0; xc < par.childNodes.length; xc++) {
                                        var cn = par.childNodes[xc];
                                        if (cn.nodeType === 1) { row[cn.tagName] = cn.textContent.trim(); }
                                    }
                                }
                                addRow(row);
                            }
                        } catch (e) { /* leave records empty */ }
                    } else {
                        try {
                            var parsed = JSON.parse(body);
                            if (result.fields.length > 0) {
                                _deepFindRows(parsed, result.fields[0]).forEach(function (hit) { addRow(hit.row); });
                            } else if (Array.isArray(parsed)) {
                                result.fields = ['Value'];
                                parsed.forEach(function (item) {
                                    if (typeof item !== 'object') { addRow({ Value: String(item) }); }
                                });
                            } else if (typeof parsed === 'string' || typeof parsed === 'number' || typeof parsed === 'boolean') {
                                result.fields = ['Value'];
                                addRow({ Value: String(parsed) });
                            }
                        } catch (e) { /* leave records empty */ }
                    }

                    var oo = {}; oo[attr.name] = result;
                    var os = {}; os[attr.name] = 'idle';
                    self.apiLookupOptions = Object.assign({}, self.apiLookupOptions, oo);
                    self.apiLookupState   = Object.assign({}, self.apiLookupState,   os);
                })
                .catch(function (err) {
                    console.error('[api-lookup] fetch failed:', err);
                    var ce = {}; ce[attr.name] = 'Network error — see browser console.';
                    var cs = {}; cs[attr.name] = 'error';
                    self.apiLookupError = Object.assign({}, self.apiLookupError, ce);
                    self.apiLookupState = Object.assign({}, self.apiLookupState, cs);
                });
        },

        confirmDelete(event) {
            if (confirm('Delete this customer? This cannot be undone.')) {
                event.target.submit();
            }
        },

        // ── CSV import ────────────────────────────────────────────────────────

        onCsvFileSelect(event) {
            this.csvFileSelected = !!(event.target.files && event.target.files.length > 0);
            this.csvError = '';
        },

        async uploadCsv() {
            var fileInput = this.$refs.csvFileInput;
            if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
                this.csvError = 'No file selected.';
                return;
            }

            this.isCsvUploading = true;
            this.csvError = '';

            try {
                var form = new FormData();
                form.set('_token', window.__csrf || '');
                form.set('csv_file', fileInput.files[0]);

                var response = await fetch('/customers/import/upload', {
                    method: 'POST',
                    headers: { Accept: 'application/json' },
                    body: form,
                });

                var data = await response.json().catch(function () { return {}; });
                if (!response.ok) { throw new Error(data.error || 'Could not read the file.'); }

                this.csvHeaders  = Array.isArray(data.headers) ? data.headers : [];
                this.csvTempName = data.temp_name || '';
                this.csvMapping  = {};
                this.autoMatchCsvHeaders();
                this.csvStep = 'mapping';
            } catch (err) {
                this.csvError = err.message || 'Could not upload the file.';
            } finally {
                this.isCsvUploading = false;
            }
        },

        autoMatchCsvHeaders() {
            var mapping = {};
            var self    = this;
            this.currentAttributes.forEach(function (attr) {
                var norm  = self.normalizeCsvHeader(attr.name);
                var match = self.csvHeaders.find(function (h) {
                    return self.normalizeCsvHeader(h) === norm;
                });
                if (match) { mapping[attr.name] = match; }
            });
            this.csvMapping = mapping;
        },

        normalizeCsvHeader(s) {
            return s.toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
        },

        unusedCsvHeaders(attrName) {
            var self = this;
            var used = new Set(
                Object.entries(this.csvMapping)
                    .filter(function (pair) { return pair[0] !== attrName && pair[1]; })
                    .map(function (pair) { return pair[1]; })
            );
            return this.csvHeaders.filter(function (h) { return !used.has(h); });
        },

        setMapping(attrName, col) {
            var m = Object.assign({}, this.csvMapping);
            if (col === '') { delete m[attrName]; } else { m[attrName] = col; }
            this.csvMapping = m;
        },

        clearMapping(attrName) {
            var m = Object.assign({}, this.csvMapping);
            delete m[attrName];
            this.csvMapping = m;
        },

        buildMappingBody(body) {
            Object.entries(this.csvMapping).forEach(function (pair) {
                body.set('mapping[' + pair[0] + ']', pair[1]);
            });
        },

        async previewCsv() {
            this.isCsvPreviewing = true;
            this.csvError = '';

            try {
                var body = new URLSearchParams();
                body.set('_token', window.__csrf || '');
                body.set('customer_type_id', this.selectedTypeId);
                body.set('temp_name', this.csvTempName);
                this.buildMappingBody(body);

                var response = await fetch('/customers/import/preview', {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    },
                    body: body.toString(),
                });

                var data = await response.json().catch(function () { return {}; });
                if (!response.ok) { throw new Error(data.error || 'Preview failed.'); }

                this.csvPreviewRows  = Array.isArray(data.rows) ? data.rows : [];
                this.csvPreviewStats = data.stats || { total: 0, ok: 0, duplicate: 0, empty: 0 };
                this.csvStep = 'preview';
            } catch (err) {
                this.csvError = err.message || 'Preview failed.';
            } finally {
                this.isCsvPreviewing = false;
            }
        },

        async approveCsv() {
            this.isCsvApproving = true;
            this.csvError = '';

            try {
                var body = new URLSearchParams();
                body.set('_token', window.__csrf || '');
                body.set('customer_type_id', this.selectedTypeId);
                body.set('temp_name', this.csvTempName);
                this.buildMappingBody(body);

                var response = await fetch('/customers/import/approve', {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    },
                    body: body.toString(),
                });

                var data = await response.json().catch(function () { return {}; });
                if (!response.ok) { throw new Error(data.error || 'Import failed.'); }

                var inserted = data.inserted || 0;
                var skipped  = data.skipped  || 0;
                this.csvDoneMessage  = 'Successfully imported ' + inserted + ' customer' + (inserted !== 1 ? 's' : '') + '.' +
                    (skipped > 0 ? ' Skipped ' + skipped + ' empty row' + (skipped !== 1 ? 's' : '') + '.' : '');
                this.csvApproveErrors = Array.isArray(data.errors) ? data.errors : [];
                this.csvStep = 'done';
            } catch (err) {
                this.csvError = err.message || 'Import failed.';
            } finally {
                this.isCsvApproving = false;
            }
        },

        resetCsvImport() {
            this.csvStep          = 'idle';
            this.csvFileSelected  = false;
            this.isCsvUploading   = false;
            this.isCsvPreviewing  = false;
            this.isCsvApproving   = false;
            this.csvError         = '';
            this.csvHeaders       = [];
            this.csvMapping       = {};
            this.csvTempName      = '';
            this.csvPreviewRows   = [];
            this.csvPreviewStats  = { total: 0, ok: 0, duplicate: 0, empty: 0 };
            this.csvDoneMessage   = '';
            this.csvApproveErrors = [];
            var fi = this.$refs.csvFileInput;
            if (fi) { fi.value = ''; }
        },
    };
};

// Unsaved-changes guard — fires beforeunload warning when a .ct-form has been
// touched but not yet submitted. Delete forms and the logout form are excluded
// because they use different CSS classes and are intentional navigation.
(function () {
    function initDirtyFormGuard() {
        var forms = document.querySelectorAll('form.ct-form');
        if (!forms.length) return;

        var dirty = false;

        function markDirty() { dirty = true; }
        function markClean() { dirty = false; }

        forms.forEach(function (form) {
            form.addEventListener('input', markDirty);
            form.addEventListener('change', markDirty);
            form.addEventListener('submit', markClean);
        });

        window.addEventListener('beforeunload', function (e) {
            if (!dirty) return;
            e.preventDefault();
            e.returnValue = '';
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initDirtyFormGuard);
    } else {
        initDirtyFormGuard();
    }
}());