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

<script>
window.__jobTypes      = <?= json_encode($model->jobTypes,          JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
window.__initialJtId   = <?= json_encode($model->form['job_type_id'], JSON_HEX_TAG | JSON_THROW_ON_ERROR) ?>;
window.__initialJtVals = <?= 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>Select a campaign and job type, then fill in the attribute values.</p>
        </div>
        <a class="button button-secondary" href="/jobs">&larr; Back to list</a>
    </div>

    <?php if (!$model->campaigns): ?>
        <div class="alert alert-error">
            No campaigns exist yet. <a href="/campaigns/create">Create a campaign</a> before adding jobs.
        </div>
    <?php elseif (!$model->jobTypes): ?>
        <div class="alert alert-error">
            No job types exist yet. <a href="/job-types/create">Create a job type</a> before adding jobs.
        </div>
    <?php else: ?>

    <section class="section-panel" x-data="jobForm(window.__jobTypes, window.__initialJtId, window.__initialJtVals)">

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

        <form method="post" action="/jobs" class="ct-form" novalidate>
            <?= csrf_field() ?>

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

                <label class="field field-full">
                    <span>Job type <span class="required-mark">*</span></span>
                    <select class="input<?= isset($model->errors['job_type_id']) ? ' input-error' : '' ?>"
                            name="job_type_id" x-model="selectedTypeId" x-on:change="onTypeChange()" required>
                        <option value="0">— Select a job type —</option>
                        <?php foreach ($model->jobTypes as $jt): ?>
                            <option value="<?= e((string) $jt['id']) ?>"
                                <?= (int) $model->form['job_type_id'] === $jt['id'] ? 'selected' : '' ?>>
                                <?= e($jt['name']) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if (isset($model->errors['job_type_id'])): ?>
                        <small class="field-error"><?= e($model->errors['job_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 job 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 job type has no attributes defined.
            </p>

            <div class="form-actions">
                <button class="button button-primary" type="submit">Save Job</button>
                <a class="button button-secondary" href="/jobs">Cancel</a>
            </div>
        </form>

    </section>

    <?php endif; ?>

</section>