Reservair/includes/Views/RsvFormsPage.php

<?php

use Reservair\Forms\RsvFormBuilder;
use Reservair\Layout\RsvColumnLayout;

class RsvFormsPage extends RsvAdminPage {

    protected function render_content(): void {
        if (isset($_GET['action']) && $_GET['action'] === 'edit' && isset($_GET['id'])) {
            $this->show_edit(intval($_GET['id']));
            return;
        }
        $this->show_list();
    }

    private function show_list(): void {
        global $rsv_form_registry;
        $element_types     = array_keys($rsv_form_registry->handlers);
        $elements_with_ids = [];
        $next_id           = 1;
        $timetables        = (new RsvTimetableService())->get_all();
        ?>
        <h1>Formuláře</h1>
        <hr>
        <?php
        RsvColumnLayout::split('1:2')
            ->column(function () {
                echo RsvFormBuilder::create('add_form_definition', get_rest_url(null, 'reservations/v1/form-definition'), 'POST', 'Form definition created.')
                    ->heading('Přidat formulář')
                    ->nonce('my_action', 'my_nonce')
                    ->text('name', 'Název')
                    ->render();
                ?>
                <hr>
                <p class="submit">
                    <button type="submit" form="add_form_definition" class="button button-primary">Add Form Definition</button>
                </p>
            <?php })
            ->column(function () { ?>
                <div id="forms_table"></div>
                <script>
                var forms_dt = RsvDataGrid.create_data_grid(forms_table,
                    RsvFormDefinitionResource(), {
                        'form_id': RsvDataGrid.column('ID', false, 30),
                        'name': RsvDataGrid.action_column('Název', false, {
                            'Edit': RsvDataGrid.link_action((data) =>
                                `<?= menu_page_url('forms-settings', false) ?>&id=${data.form_id}&action=edit`
                            ),
                            'Trash': RsvDataGrid.func_action(function(dt, row, data) {
                                if (!confirm('Delete this form? This cannot be undone.')) return;
                                dt.resource.delete(data.form_id).then(() => forms_dt.refresh()).catch(err => alert(err.message));
                            }),
                            'Clone': RsvDataGrid.func_action(function(dt, row, data) {
                                const base_url = `<?= get_rest_url(null, 'reservations/v1/form-definition') ?>`;
                                fetch(`${base_url}/${data.form_id}`, {
                                    headers: { 'Accept': 'application/json' },
                                })
                                .then(r => {
                                    if (!r.ok) return r.json().then(err => { throw new Error(err.error || 'Fetch failed'); });
                                    return r.json();
                                })
                                .then(form_def => fetch(base_url, {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                                    body: JSON.stringify({
                                        name:       'Copy of ' + form_def.name,
                                        definition: form_def.definition,
                                    }),
                                }))
                                .then(r => {
                                    if (!r.ok) return r.json().then(err => { throw new Error(err.error || 'Clone failed'); });
                                    forms_dt.refresh();
                                })
                                .catch(err => alert(err.message));
                            }),
                        }),
                    });
                forms_dt.refresh();
                </script>
            <?php })
            ->output();
        ?>

        <?php $this->elements_table_script($elements_with_ids, $next_id, 'add_form_definition', $element_types, $timetables); ?>
        <?php
    }

    private function show_edit(int $id): void {
        global $rsv_form_registry;
        $element_types = array_keys($rsv_form_registry->handlers);

        $repo     = new RsvFormDefinitionRepository();
        $form_def = $repo->get($id);

        if ($form_def === null) {
            echo '<div class="notice notice-error"><p>Form definition not found.</p></div>';
            return;
        }

        $definition = $form_def['definition'] ?? [];
        $raw_elements = array_values($definition['elements'] ?? []);

        $elements_with_ids = array_map(function (array $el, int $idx): array {
            return array_merge($el, ['id' => $idx + 1]);
        }, $raw_elements, array_keys($raw_elements));

        $next_id    = count($elements_with_ids) + 1;
        $timetables = (new RsvTimetableService())->get_all();

        $email_key_options = ['' => '— select field —'];
        foreach ($raw_elements as $el) {
            $el_name = $el['name'] ?? '';
            if ($el_name === '') {
                continue;
            }
            $el_label = $el['label'] ?? '';
            $email_key_options[$el_name] = $el_label !== '' ? "$el_label ($el_name)" : $el_name;
        }

        ?>
        <h1>Edit Form: <?= esc_html($form_def['name']) ?></h1>
        <a href="<?= menu_page_url('forms-settings', false) ?>">← Back to Forms</a>
        <hr>

        <?php
        echo RsvFormBuilder::create('edit_form_definition', get_rest_url(null, 'reservations/v1/form-definition/' . $id), 'PUT', 'Form definition updated.')
            ->text('name', 'Name', '', true, $form_def['name'])
            ->select('definition.email_key', 'Email Key', $email_key_options, "Form field that holds the submitter's email address.", true, $definition['email_key'] ?? '')
            ->textarea('definition.success_message', 'Success message', 'Shown to the visitor after a successful submission. HTML is allowed. Use <reservation-summary></reservation-summary> to display the selected reservations. Leave blank for the default message.', false, $definition['success_message'] ?? '')
            ->render();
        ?>

        <hr>
        <h2>Form Elements</h2>
        <p>Define the fields that will appear in this form.</p>
        <div id="form_elements_table"></div>
        <p>
            <button type="button" class="button" id="rsv_add_element_btn">+ Add Element</button>
        </p>
        <p class="submit">
            <button type="submit" form="edit_form_definition" class="button button-primary">Update Form Definition</button>
        </p>

        <?php $this->elements_table_script($elements_with_ids, $next_id, 'edit_form_definition', $element_types, $timetables); ?>
        <?php
    }

    private function elements_table_script(array $elements_with_ids, int $next_id, string $form_id, array $element_types, array $timetables = []): void {
        $elements_json   = json_encode($elements_with_ids);
        $types_json      = json_encode(array_values($element_types));
        $timetables_json = json_encode(array_values($timetables));
        ?>
        <script>
        const rsv_element_types = <?= $types_json ?>;
        const rsv_timetables    = <?= $timetables_json ?>;

        const RSV_EMAIL_DEFAULTS = {
            accepted_subject: <?= json_encode('Rezervace přijata') ?>,
            accepted_body:    <?= json_encode("<h1>Vaše rezervace byla přijata</h1>\n<p>Vaše rezervace byla schválena. Těšíme se na vás!</p>") ?>,
            refused_subject:  <?= json_encode('Rezervace zamítnuta') ?>,
            refused_body:     <?= json_encode("<h1>Vaše rezervace byla zamítnuta</h1>\n<p>Vaše rezervace bohužel nebyla schválena. Zkuste prosím jiný termín.</p>") ?>,
        };

        const rsv_elements_source = (function(initial_items, next_id_start) {
            const items = initial_items;
            let next_id = next_id_start;

            return {
                get_page(skip, limit) {
                    skip = skip ?? 0;
                    limit = limit ?? 20;
                    return Promise.resolve({ total: items.length, data: items.slice(skip, skip + limit) });
                },
                put(id, data) {
                    const idx = items.findIndex(e => e.id === id);
                    if (idx === -1) return Promise.reject(new Error('Element not found'));
                    // Destructure reservation-specific fields so they don't bleed into extra_attrs.
                    const { id: _id, name: _n, label: _l, type: _t, desc: _d, required: _r,
                            price_per_block: _p, email_templates: _et, timetable_id: _ti, tag: _tag, ...extra_attrs } = items[idx];
                    items[idx] = {
                        ...extra_attrs,
                        id,
                        name:     data.name     ?? '',
                        label:    data.label    ?? '',
                        type:     data.type     ?? 'text',
                        desc:     data.desc     ?? '',
                        required: data.required === 'on',
                        ...(data.type === 'input-text' ? {
                            validation:      data.validation ?? '',
                            pattern:         data.pattern ?? '',
                            pattern_message: data.pattern_message ?? '',
                        } : {}),
                        ...(data.type === 'output-text' ? {
                            tag: data.tag ?? 'p',
                        } : {}),
                        ...(data.type === 'reservation' ? {
                            timetable_id:    data.timetable_id ? parseInt(data.timetable_id) : null,
                            price_per_block: parseFloat(data.price_per_block ?? '0') || 0,
                            email_templates: {
                                on_accepted: {
                                    enabled: !!data.email_accepted_enabled,
                                    subject: data.email_accepted_subject ?? RSV_EMAIL_DEFAULTS.accepted_subject,
                                    body:    data.email_accepted_body    ?? RSV_EMAIL_DEFAULTS.accepted_body,
                                },
                                on_refused: {
                                    enabled: !!data.email_refused_enabled,
                                    subject: data.email_refused_subject  ?? RSV_EMAIL_DEFAULTS.refused_subject,
                                    body:    data.email_refused_body     ?? RSV_EMAIL_DEFAULTS.refused_body,
                                },
                            },
                        } : {}),
                    };
                    return Promise.resolve(items[idx]);
                },
                add() {
                    const item = { id: next_id++, name: '', label: '', type: 'text', desc: '', required: false };
                    items.push(item);
                    return item;
                },
                move_up(id) {
                    const idx = items.findIndex(e => e.id === id);
                    if (idx > 0) [items[idx - 1], items[idx]] = [items[idx], items[idx - 1]];
                },
                move_down(id) {
                    const idx = items.findIndex(e => e.id === id);
                    if (idx !== -1 && idx < items.length - 1) [items[idx], items[idx + 1]] = [items[idx + 1], items[idx]];
                },
                remove(id) {
                    const idx = items.findIndex(e => e.id === id);
                    if (idx !== -1) items.splice(idx, 1);
                },
                get_all() {
                    return items.map(({ id, ...rest }) => rest);
                },
            };
        })(<?= $elements_json ?>, <?= $next_id ?>);

        function rsv_render_element_inline_form(dt, row, data) {
            const builder = RsvInlineFormBuilder.create(rsv_elements_source)
                .fieldset('Element', '50%')
                    .input_text('name',  'Slug',  data?.name  ?? '')
                    .input_text('label', 'Label', data?.label ?? '')
                    .input_select('type', 'Type', rsv_element_types, data?.type ?? rsv_element_types[0])
                .fieldset('Options', '50%')
                    .input_text('desc', 'Description', data?.desc ?? '')
                    .input_checkbox('required', 'Required', data?.required ?? false);

            if ((data?.type ?? rsv_element_types[0]) === 'reservation') {
                const accepted = data?.email_templates?.on_accepted ?? {};
                const refused  = data?.email_templates?.on_refused  ?? {};
                const timetable_options = [
                    { value: '', label: '— none —' },
                    ...rsv_timetables.map(t => ({ value: t.id, label: t.name })),
                ];
                builder
                    .input_select('timetable_id', 'Timetable', timetable_options, data?.timetable_id ?? '')
                    .input_number('price_per_block', 'Price per block', data?.price_per_block ?? 0)
                    .fieldset('Email — accepted', '100%')
                        .input_checkbox('email_accepted_enabled', 'Send email when accepted', accepted.enabled ?? true)
                        .input_text('email_accepted_subject', 'Subject', accepted.subject ?? RSV_EMAIL_DEFAULTS.accepted_subject)
                        .input_textarea('email_accepted_body', 'Body', accepted.body ?? RSV_EMAIL_DEFAULTS.accepted_body)
                    .fieldset('Email — refused', '100%')
                        .input_checkbox('email_refused_enabled', 'Send email when refused', refused.enabled ?? true)
                        .input_text('email_refused_subject', 'Subject', refused.subject ?? RSV_EMAIL_DEFAULTS.refused_subject)
                        .input_textarea('email_refused_body', 'Body', refused.body ?? RSV_EMAIL_DEFAULTS.refused_body);
            }

            if ((data?.type ?? rsv_element_types[0]) === 'output-text') {
                builder
                    .input_select('tag', 'Tag', [
                        { value: 'p',  label: 'Paragraph (p)' },
                        { value: 'h1', label: 'Heading 1 (h1)' },
                        { value: 'h2', label: 'Heading 2 (h2)' },
                        { value: 'h3', label: 'Heading 3 (h3)' },
                        { value: 'h4', label: 'Heading 4 (h4)' },
                        { value: 'h5', label: 'Heading 5 (h5)' },
                        { value: 'h6', label: 'Heading 6 (h6)' },
                    ], data?.tag ?? 'p');
            }

            if ((data?.type ?? rsv_element_types[0]) === 'input-text') {
                builder
                    .input_select('validation', 'Validation', [
                        { value: '',        label: '— none —' },
                        { value: 'email',   label: 'Email' },
                        { value: 'phone',   label: 'Phone' },
                        { value: 'digits',  label: 'Digits only' },
                        { value: 'pattern', label: 'Custom pattern' },
                    ], data?.validation ?? '')
                    .input_text('pattern', 'Custom pattern (regex)', data?.pattern ?? '')
                        .show_if(RsvInlineFormBuilder.match_p('validation', 'pattern'))
                    .input_text('pattern_message', 'Pattern error message', data?.pattern_message ?? '')
                        .show_if(RsvInlineFormBuilder.match_p('validation', 'pattern'));
            }

            const node = builder.build({
                id: data?.id,
                colspan: 6,
                save_label: 'Save',
                on_success: () => elements_dt.refresh(),
                on_cancel:  () => elements_dt.refresh(),
            });

            // Type swaps whole fieldsets, so re-render the inline form on change.
            // Common fields are carried over; type-specific fields reset to stored data.
            const type_select = node.querySelector('select[name="type"]');
            if (type_select) {
                type_select.addEventListener('change', () => {
                    const current = Object.fromEntries(new FormData(node.querySelector('form')));
                    const merged = {
                        ...data,
                        name:     current.name  ?? data?.name,
                        label:    current.label ?? data?.label,
                        desc:     current.desc  ?? data?.desc,
                        required: 'required' in current,
                        type:     type_select.value,
                    };
                    row.replaceChildren(rsv_render_element_inline_form(dt, row, merged));
                });
            }

            return node;
        }

        // The elements data grid only exists on the edit page. Guard it so a missing
        // container can't abort the script and strip the form's submit handler.
        const elements_table_el = document.getElementById('form_elements_table');
        if (elements_table_el) {
        var elements_dt = RsvDataGrid.create_data_grid(
            elements_table_el,
            rsv_elements_source,
            {
                'name': RsvDataGrid.action_column('Name', false, {
                    'Edit': RsvDataGrid.edit_action(function(dt, row, data) {
                        row.classList.add(
                            'inline-edit-row', 'inline-edit-row-post',
                            'quick-edit-row',  'quick-edit-row-post',
                            'inline-edit-post', 'inline-editor'
                        );
                        row.replaceChildren(rsv_render_element_inline_form(dt, row, data));
                    }),
                    'Move Up': RsvDataGrid.func_action(function(dt, row, data) {
                        rsv_elements_source.move_up(data.id);
                        dt.refresh();
                    }),
                    'Move Down': RsvDataGrid.func_action(function(dt, row, data) {
                        rsv_elements_source.move_down(data.id);
                        dt.refresh();
                    }),
                    'Remove': RsvDataGrid.func_action(function(dt, row, data) {
                        rsv_elements_source.remove(data.id);
                        dt.refresh();
                    }),
                }),
                'label':    RsvDataGrid.column('Label',       false),
                'type':     RsvDataGrid.column('Type',        false),
                'desc':     RsvDataGrid.column('Description', false),
                'required': RsvDataGrid.column('Required',    false),
                'details':  RsvDataGrid.column('Details',     false),
            }
        );
        elements_dt.map_column('details', (dt, row, data) => {
            const td = document.createElement('td');
            if (data.type === 'reservation') {
                const parts = [];
                if (data.timetable_id) {
                    const t = rsv_timetables.find(t => t.id === data.timetable_id);
                    parts.push(`Timetable: ${t ? t.name : data.timetable_id}`);
                }
                if (data.price_per_block != null) parts.push(`Price/block: ${data.price_per_block}`);
                const et = data.email_templates ?? {};
                const emails = [];
                if (et.on_accepted?.enabled) emails.push('accepted');
                if (et.on_refused?.enabled)  emails.push('refused');
                if (emails.length) parts.push(`Emails: ${emails.join(', ')}`);
                td.innerText = parts.join(' · ');
            }
            return td;
        });
        elements_dt.refresh();

        document.getElementById('rsv_add_element_btn').onclick = function() {
            rsv_elements_source.add();
            elements_dt.refresh();
        };
        }

        // The Email Key select offers the form's fields. Elements are edited in
        // the grid above and only persisted on save, so refresh the options from
        // the live source each time the select is opened.
        const rsv_email_key_select = document.querySelector('#edit_form_definition select[name="definition.email_key"]');
        function rsv_sync_email_key_options() {
            if (!rsv_email_key_select) return;
            const selected = rsv_email_key_select.value;
            const options = [new Option('— select field —', '')];
            for (const el of rsv_elements_source.get_all()) {
                if (!el.name) continue;
                options.push(new Option(el.label ? `${el.label} (${el.name})` : el.name, el.name));
            }
            rsv_email_key_select.replaceChildren(...options);
            rsv_email_key_select.value = selected;
        }
        rsv_email_key_select?.addEventListener('focus', rsv_sync_email_key_options);

        RsvAdminForm.bind(document.getElementById('<?= $form_id ?>'), {
            transform: (body) => ({
                name: body.name,
                definition: {
                    email_key:       body.definition?.email_key ?? '',
                    success_message: body.definition?.success_message ?? '',
                    elements:        rsv_elements_source.get_all(),
                },
            }),
            refresh: () => { if (typeof forms_dt !== 'undefined') forms_dt.refresh(); },
        });
        </script>
        <?php
    }
}