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

<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>Choose a campaign type, enter a name, then fill in the type&rsquo;s attribute values.</p>
        </div>
        <a class="button button-secondary" href="/campaigns">&larr; Back to list</a>
    </div>

    <?php if (!$model->campaignTypes): ?>
        <div class="alert alert-error">
            No campaign types have been defined yet.
            <a href="/campaign-types/create">Create a campaign type</a> before adding campaigns.
        </div>
    <?php else: ?>

    <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" 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">Save Campaign</button>
                <a class="button button-secondary" href="/campaigns">Cancel</a>
            </div>
        </form>

    </section>

    <?php endif; ?>

</section>