KCI-CAMPAIGN-TRACKER/app/Views/jobs/campaign.php

<?php
$campaignId       = (int) ($campaign['id'] ?? 0);
$campaignTypeName = (string) ($campaign['campaign_type_name'] ?? '');
?>
<script>
window.__campaignJobTypes = <?= json_encode($jobTypes ?? [], JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
</script>

<section class="content-stack" x-data="campaignJobsPageTable(<?= $campaignId ?>, window.__campaignJobTypes)">

    <div class="page-toolbar">
        <div class="section-heading">
            <h1>Campaign Jobs</h1>
            <p><?= e($campaignTypeName) ?> #<?= e((string) $campaignId) ?></p>
        </div>
        <div class="panel-actions">
            <a class="button button-secondary" href="/campaigns">&larr; Back to campaigns</a>
            <a class="button button-primary" href="/jobs/create">+ New Job</a>
        </div>
    </div>

    <section class="section-panel">
        <div class="panel-header">
            <h2>Import Jobs</h2>
        </div>

        <!-- Source tabs -->
        <div class="import-tabs">
            <button type="button"
                    class="import-tab"
                    :class="importSource === 'sheets' ? 'is-active' : ''"
                    x-on:click="importSource = 'sheets'">Google Sheets</button>
            <button type="button"
                    class="import-tab"
                    :class="importSource === 'file' ? 'is-active' : ''"
                    x-on:click="importSource = 'file'">CSV / Excel</button>
        </div>

        <!-- Google Sheets panel -->
        <div x-show="importSource === 'sheets'">
            <p class="attributes-hint" style="margin-bottom:1rem">
                The spreadsheet must be shared as <strong>Anyone with the link can view</strong>.
            </p>
            <div class="import-grid">
                <label class="field">
                    <span>Google Sheets URL</span>
                    <input class="input" type="url" x-model="importSheetUrl"
                           placeholder="https://docs.google.com/spreadsheets/d/...">
                </label>

                <label class="field">
                    <span>Sheet</span>
                    <select class="input" x-model="selectedSheetGid" :disabled="sheets.length === 0">
                        <option value="">Select a sheet</option>
                        <template x-for="sheet in sheets" :key="sheet.gid">
                            <option :value="sheet.gid" x-text="sheet.title"></option>
                        </template>
                    </select>
                </label>

                <label class="field">
                    <span>Job type</span>
                    <select class="input" x-model="selectedImportJobTypeId">
                        <option value="0">Select a job type</option>
                        <template x-for="jt in jobTypes" :key="jt.id">
                            <option :value="jt.id" x-text="jt.name"></option>
                        </template>
                    </select>
                </label>
            </div>

            <div class="form-actions import-actions">
                <button class="button button-secondary" type="button"
                        x-on:click="connectGoogleSheet()" :disabled="isConnecting">Connect</button>
                <button class="button button-primary" type="button"
                        x-on:click="importGoogleSheet()"
                        :disabled="isImporting || !selectedSheetGid || Number(selectedImportJobTypeId) === 0">
                    Import
                </button>
                <span class="inline-indicator" x-show="isConnecting">Connecting...</span>
                <span class="inline-indicator" x-show="isImporting">Importing...</span>
            </div>
        </div>

        <!-- File upload panel -->
        <div x-show="importSource === 'file'">
            <p class="attributes-hint" style="margin-bottom:1rem">
                Export your sheet as <strong>CSV</strong> or <strong>Excel (.xlsx)</strong> from Google Sheets, then upload it here.
            </p>
            <div class="import-grid">
                <label class="field">
                    <span>CSV or Excel file (.csv, .xlsx)</span>
                    <input class="input" type="file" accept=".csv,.xlsx"
                           x-ref="fileInput" x-on:change="onFileSelect($event)">
                </label>

                <label class="field">
                    <span>Sheet</span>
                    <select class="input" x-model="selectedFileSheetGid" :disabled="fileSheets.length === 0">
                        <option value="">Select a sheet</option>
                        <template x-for="sheet in fileSheets" :key="sheet.gid">
                            <option :value="sheet.gid" x-text="sheet.title"></option>
                        </template>
                    </select>
                </label>

                <label class="field">
                    <span>Job type</span>
                    <select class="input" x-model="selectedFileJobTypeId">
                        <option value="0">Select a job type</option>
                        <template x-for="jt in jobTypes" :key="jt.id">
                            <option :value="jt.id" x-text="jt.name"></option>
                        </template>
                    </select>
                </label>
            </div>

            <div class="form-actions import-actions">
                <button class="button button-secondary" type="button"
                        x-on:click="loadFileSheets()" :disabled="isLoadingFile || !fileSelected">
                    Load Sheets
                </button>
                <button class="button button-primary" type="button"
                        x-on:click="importFile()"
                        :disabled="isImportingFile || !fileTempName || !selectedFileSheetGid || Number(selectedFileJobTypeId) === 0">
                    Import
                </button>
                <span class="inline-indicator" x-show="isLoadingFile">Reading file...</span>
                <span class="inline-indicator" x-show="isImportingFile">Importing...</span>
            </div>
        </div>

        <!-- Shared result messages -->
        <div class="alert alert-success" x-cloak x-show="importMessage"       x-text="importMessage"></div>
        <div class="alert alert-error"   x-cloak x-show="importErrorMessage"  x-text="importErrorMessage"></div>
    </section>

    <section class="section-panel">
        <div class="panel-header">
            <div>
                <h2>Job Directory</h2>
                <p>All jobs in this campaign with job fields and attribute fields.</p>
            </div>
            <button class="button button-secondary" type="button" x-on:click="reloadTable()">Refresh</button>
        </div>

        <div class="inline-indicator" x-cloak x-show="isLoading">Loading jobs...</div>
        <div class="alert alert-error"   x-cloak x-show="errorMessage"  x-text="errorMessage"></div>
        <div id="campaign-jobs-page-table" class="tabulator-host"></div>
    </section>

</section>