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" :class="{ 'api-lookup-label': attr.type === 'api_lookup' || attr.type === 'customer_lookup' }">
                            <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 === 'api_lookup' || attr.type === 'customer_lookup'">
                                <div class="api-lookup-field">
                                    <input class="input" type="text"
                                           :name="`attribute_values[${attr.name}]`"
                                           x-model="attributeValues[attr.name]"
                                           :placeholder="attr.type === 'customer_lookup' ? 'Type to search customers…' : 'Type to search…'"
                                           autocomplete="off"
                                           x-on:focus="openApiLookup(attr.name)"
                                           x-on:blur="closeApiLookup(attr.name)"
                                           x-on:keydown.escape.prevent="closeApiLookup(attr.name)">
                                    <div class="api-lookup-dropdown"
                                         x-show="apiLookupOpen[attr.name]"
                                         x-on:mousedown.prevent>
                                        <p class="api-lookup-loading" x-show="apiLookupState[attr.name] === 'loading'">Loading…</p>
                                        <div class="api-lookup-table" x-show="apiLookupState[attr.name] !== 'loading' && apiLookupState[attr.name] !== 'error'">
                                            <div class="api-lookup-thead"
                                                 :style="`grid-template-columns: repeat(${getApiOptions(attr.name).fields.length || 1}, 1fr)`">
                                                <template x-for="f in getApiOptions(attr.name).fields" :key="f">
                                                    <span x-text="f"></span>
                                                </template>
                                            </div>
                                            <div class="api-lookup-tbody">
                                                <template x-for="rec in getFilteredRecords(attr.name, attributeValues[attr.name])" :key="rec._primary">
                                                    <div class="api-lookup-tr"
                                                         :class="{ 'is-selected': attributeValues[attr.name] === rec._primary }"
                                                         :style="`grid-template-columns: repeat(${getApiOptions(attr.name).fields.length || 1}, 1fr)`"
                                                         x-on:click="selectApiOption(attr, rec)">
                                                        <template x-for="(v, i) in rec._display" :key="i">
                                                            <span x-text="v"></span>
                                                        </template>
                                                    </div>
                                                </template>
                                                <div class="api-lookup-empty" x-show="!getFilteredRecords(attr.name, attributeValues[attr.name]).length">No results.</div>
                                            </div>
                                        </div>
                                        <small class="field-error" x-show="apiLookupState[attr.name] === 'error'" x-text="apiLookupError[attr.name] || 'Fetch failed.'"></small>
                                    </div>
                                </div>
                            </template>
                            <template x-if="attr.type !== 'boolean' && attr.type !== 'api_lookup' && attr.type !== 'customer_lookup'">
                                <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>