KCI-CAMPAIGN-TRACKER/app/Views/campaigns/edit.php

<?php $campaignId = (int) ($model->campaign['id'] ?? 0); ?>
<script>
window.__campaignTypes  = <?= json_encode($model->campaignTypes,        JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
window.__initialTypeId  = <?= json_encode($model->form['campaign_type_id'], JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
window.__initialValues  = <?= json_encode($model->form['attribute_values'], JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
</script>

<section class="content-stack">

    <div class="page-toolbar">
        <div class="section-heading">
            <h1><?= e($model->title) ?></h1>
            <p>Update the campaign name, type, or attribute values.</p>
        </div>
        <a class="button button-secondary" href="/campaigns">&larr; Back to list</a>
    </div>

    <?php if ($model->saved): ?>
        <div class="alert alert-success" x-data="{ open: true }" x-show="open" x-transition.opacity x-init="setTimeout(() => open = false, 3500)">
            Campaign updated successfully.
        </div>
    <?php endif; ?>

    <section class="section-panel" x-data="campaignForm(window.__campaignTypes, window.__initialTypeId, window.__initialValues)">

        <?php if (isset($model->errors['_token'])): ?>
            <div class="alert alert-error"><?= e($model->errors['_token'][0]) ?></div>
        <?php endif; ?>

        <form method="post" action="/campaigns/<?= e((string) $campaignId) ?>/update" class="ct-form" novalidate>
            <?= csrf_field() ?>

            <div class="form-section">
                <label class="field field-full">
                    <span>Campaign type <span class="required-mark">*</span></span>
                    <select
                        class="input<?= isset($model->errors['campaign_type_id']) ? ' input-error' : '' ?>"
                        name="campaign_type_id"
                        x-model="selectedTypeId"
                        x-on:change="onTypeChange()"
                        required
                    >
                        <option value="0">— Select a campaign type —</option>
                        <?php foreach ($model->campaignTypes as $type): ?>
                            <option
                                value="<?= e((string) $type['id']) ?>"
                                <?= (int) $model->form['campaign_type_id'] === $type['id'] ? 'selected' : '' ?>
                            ><?= e($type['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($model->errors['campaign_type_id'])): ?>
                        <small class="field-error"><?= e($model->errors['campaign_type_id'][0]) ?></small>
                    <?php endif; ?>
                </label>


            </div>

            <div class="form-section" x-show="currentAttributes.length > 0">
                <div class="attributes-header">
                    <h3>Attribute values</h3>
                    <p class="attributes-hint">Fields defined by the selected campaign type.</p>
                </div>

                <div class="form-grid">
                    <template x-for="attr in currentAttributes" :key="attr.name">
                        <label class="field">
                            <span x-text="attr.name"></span>
                            <template x-if="attr.type === 'boolean'">
                                <select class="input"
                                        :name="`attribute_values[${attr.name}]`"
                                        x-on:change="attributeValues[attr.name] = $event.target.value">
                                    <option value=""      :selected="!attributeValues[attr.name]">— Select —</option>
                                    <option value="true"  :selected="attributeValues[attr.name] === 'true'">True</option>
                                    <option value="false" :selected="attributeValues[attr.name] === 'false'">False</option>
                                </select>
                            </template>
                            <template x-if="attr.type !== 'boolean'">
                                <input class="input"
                                       :type="inputType(attr.type)"
                                       :name="`attribute_values[${attr.name}]`"
                                       :value="attributeValues[attr.name] ?? ''"
                                       x-on:input="attributeValues[attr.name] = $event.target.value">
                            </template>
                        </label>
                    </template>
                </div>
            </div>

            <p class="attributes-hint" x-show="selectedTypeId && currentAttributes.length === 0">
                This campaign type has no attributes defined.
            </p>

            <div class="form-actions">
                <button class="button button-primary" type="submit">Update Campaign</button>
                <a class="button button-secondary" href="/campaigns">Cancel</a>
            </div>
        </form>

        <div class="delete-zone">
            <h4>Delete this campaign</h4>
            <p>This cannot be undone.</p>
            <form
                method="post"
                action="/campaigns/<?= e((string) $campaignId) ?>/delete"
                x-on:submit.prevent="confirmDelete($event)"
            >
                <?= csrf_field() ?>
                <button type="submit" class="button button-danger">Delete Campaign</button>
            </form>
        </div>

    </section>

    <section class="section-panel" x-data="campaignJobsTable(<?= $campaignId ?>)">
        <div class="panel-header">
            <div>
                <h2>Jobs</h2>
                <p>All jobs attached to this campaign.</p>
            </div>
            <div class="panel-actions">
                <button class="button button-secondary button-sm" type="button" x-cloak x-show="!isVisible" x-on:click="showTable()">
                    Show Jobs
                </button>
                <a class="button button-primary button-sm" href="/jobs/create">+ New Job</a>
                <button class="button button-secondary button-sm" type="button" x-cloak x-show="isVisible" x-on:click="reloadTable()">Refresh</button>
                <button class="button button-secondary button-sm" type="button" x-cloak x-show="isVisible" x-on:click="hideTable()">Hide</button>
            </div>
        </div>
        <div x-cloak x-show="isVisible" x-transition.opacity>
            <div class="inline-indicator" x-show="isLoading">Loading jobs...</div>
            <div class="alert alert-error" x-show="errorMessage" x-text="errorMessage"></div>
            <div class="empty-state" x-show="!isLoading && !errorMessage && hasLoaded && groups.length === 0">
                <p>No jobs are attached to this campaign.</p>
            </div>

            <div class="job-type-table-stack" x-show="groups.length > 0">
                <template x-for="group in groups" :key="group.id">
                    <section class="job-type-table-group">
                        <div class="job-type-table-heading">
                            <h3 x-text="group.name"></h3>
                            <span x-text="group.rows.length + (group.rows.length === 1 ? ' job' : ' jobs')"></span>
                        </div>
                        <div :id="group.elementId" class="tabulator-host"></div>
                    </section>
                </template>
            </div>
        </div>
    </section>

</section>