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();
        $programs   = array_map(fn($p) => $p->to_array(), (new RsvMembershipProgramRepository())->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'] ?? '')
            ->code('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.', $definition['success_message'] ?? '')
            ->render();
        ?>

        <hr>
        <h2>Membership Discounts</h2>
        <p>Map a membership program to a discount percentage. The chosen field's value must match a key in that program for the discount to apply.</p>
        <?php
        $membership = $definition['membership'] ?? [];
        $bindings   = $membership['bindings'] ?? [];
        ?>
        <div id="rsv_membership_bindings_table"></div>
        <p>
            <button type="button" class="button" id="rsv_add_binding_btn">+ Add Binding</button>
        </p>
        <label>
            Combine mode:
            <select name="definition.membership_combine">
                <option value="max" <?= ($membership['combine'] ?? 'max') === 'max' ? 'selected' : '' ?>>Max (best discount wins)</option>
                <option value="sum" <?= ($membership['combine'] ?? 'max') === 'sum' ? 'selected' : '' ?>>Sum (capped at 100%)</option>
            </select>
        </label>

        <hr>
        <?php
        RsvColumnLayout::split('3:2')
            ->column(function (): void { ?>
                <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>
                    <button type="submit" form="edit_form_definition" class="button button-primary">Update Form Definition</button>
                </p>
            <?php })
            ->column(function (): void { ?>
                <h3>Live preview</h3>
                <div id="rsv_form_preview" class="rsv-form-preview" style="position: sticky; top: 40px;"></div>
            <?php })
            ->output();
        ?>

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

    private function elements_table_script(array $elements_with_ids, int $next_id, string $form_id, array $element_types, array $timetables = [], array $programs = [], array $bindings = []): void {
        $elements_json   = json_encode($elements_with_ids);
        $types_json      = json_encode(array_values($element_types));
        $timetables_json = json_encode(array_values($timetables));
        $programs_json   = json_encode(array_values($programs));
        $bindings_json   = json_encode(array_values($bindings));
        $bindings_next   = count($bindings) + 1;
        ?>
        <script>
        const rsv_element_types = <?= $types_json ?>;
        const rsv_timetables    = <?= $timetables_json ?>;
        const rsv_membership_programs = <?= $programs_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>") ?>,
            maintainer_subject: <?= json_encode('Nová rezervace čeká na schválení') ?>,
            maintainer_body:    <?= json_encode("<h1>Nový požadavek o rezervaci</h1>\n<p>Rezervace č. {{reservation_id}} čeká na vaše schválení.</p>\n<p><strong>Datum:</strong> {{date}}</p>\n<p><strong>Čas:</strong> {{start}} – {{end}}</p>\n<p><reservation-actions></reservation-actions></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: {
                                maintainer: {
                                    subject: data.email_maintainer_subject ?? RSV_EMAIL_DEFAULTS.maintainer_subject,
                                    body:    data.email_maintainer_body    ?? RSV_EMAIL_DEFAULTS.maintainer_body,
                                },
                                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 ?>);

        const rsv_bindings_source = (function(initial_items, next_id_start) {
            const items = (initial_items || []).map((b, i) => ({
                id:         i + 1,
                program_id: parseInt(b.program_id) || 0,
                discount:   parseFloat(b.discount) || 0,
                field:      b.field ?? '',
            }));
            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('Binding not found'));
                    items[idx] = {
                        id,
                        program_id: parseInt(data.program_id) || 0,
                        discount:   parseFloat(data.discount) || 0,
                        field:      data.field ?? '',
                    };
                    return Promise.resolve(items[idx]);
                },
                add() {
                    const item = { id: next_id++, program_id: 0, discount: 0, field: '' };
                    items.push(item);
                    return item;
                },
                remove(id) {
                    const idx = items.findIndex(e => e.id === id);
                    if (idx !== -1) items.splice(idx, 1);
                },
                get_all() {
                    return items
                        .filter(b => b.program_id > 0)
                        .map(({ id, ...rest }) => rest);
                },
            };
        })(<?= $bindings_json ?>, <?= $bindings_next ?>);

        function rsv_collect_definition() {
            const form = document.getElementById('<?= $form_id ?>');
            const get  = (n) => form?.querySelector(`[name="${n}"]`)?.value ?? '';

            return {
                name: get('name'),
                definition: {
                    email_key:        get('definition.email_key'),
                    success_message:  get('definition.success_message'),
                    membership:       {
                        bindings: rsv_bindings_source.get_all(),
                        combine:  get('definition.membership_combine') || 'max',
                    },
                    elements:         rsv_elements_source.get_all(),
                },
            };
        }

        const rsv_preview_el = document.getElementById('rsv_form_preview');
        let rsv_preview_timer = null;

        function rsv_schedule_preview() {
            if (!rsv_preview_el) return;
            clearTimeout(rsv_preview_timer);
            rsv_preview_timer = setTimeout(rsv_render_preview, 300);
        }

        function rsv_render_preview() {
            if (!rsv_preview_el) return;
            fetch('<?= get_rest_url(null, 'reservations/v1/form-definition/preview') ?>', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-WP-Nonce': ReservairServiceAPI.nonce,
                },
                body: JSON.stringify(rsv_collect_definition()),
            })
            .then(r => r.ok ? r.json() : r.json().then(e => { throw new Error(e.error || 'Preview failed'); }))
            .then(data => {
                rsv_preview_el.innerHTML = data.html || '<p class="rsv-preview-empty">No fields to preview yet.</p>';
            })
            .catch(() => { rsv_preview_el.innerHTML = '<p class="rsv-preview-empty">Preview unavailable.</p>'; });
        }

        // The preview form is inert: block submission (capture so it works after re-render).
        rsv_preview_el?.addEventListener('submit', (e) => e.preventDefault(), true);

        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 maintainer = data?.email_templates?.maintainer  ?? {};
                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 - for maintainer', '100%')
                        .input_text('email_maintainer_subject', 'Subject', maintainer.subject ?? RSV_EMAIL_DEFAULTS.maintainer_subject)
                        .input_textarea('email_maintainer_body', 'Body', maintainer.body ?? RSV_EMAIL_DEFAULTS.maintainer_body)
                    .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(); rsv_schedule_preview(); },
                on_cancel:  () => { elements_dt.refresh(); rsv_schedule_preview(); },
            });

            // 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();
                        rsv_schedule_preview();
                    }),
                    'Move Down': RsvDataGrid.func_action(function(dt, row, data) {
                        rsv_elements_source.move_down(data.id);
                        dt.refresh();
                        rsv_schedule_preview();
                    }),
                    'Remove': RsvDataGrid.func_action(function(dt, row, data) {
                        rsv_elements_source.remove(data.id);
                        dt.refresh();
                        rsv_schedule_preview();
                    }),
                }),
                '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();
            rsv_schedule_preview();
        };
        }

        // 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);

        // Membership discount bindings — edited in a data grid backed by the
        // in-memory source above; persisted with the rest of the definition.
        function rsv_binding_program_options() {
            return [
                { value: '', label: '— select program —' },
                ...rsv_membership_programs.map(p => ({ value: p.id, label: p.name })),
            ];
        }

        function rsv_binding_field_options() {
            const options = [{ value: '', label: '— select field —' }];
            for (const el of rsv_elements_source.get_all()) {
                if (!el.name) continue;
                options.push({ value: el.name, label: el.label ? `${el.label} (${el.name})` : el.name });
            }
            return options;
        }

        function rsv_render_binding_inline_form(dt, row, data) {
            return RsvInlineFormBuilder.create(rsv_bindings_source)
                .fieldset('Discount binding', '100%')
                    .input_select('program_id', 'Program', rsv_binding_program_options(), data?.program_id ?? '')
                    .input_number('discount', 'Discount %', data?.discount ?? 0)
                    .input_select('field', 'Field', rsv_binding_field_options(), data?.field ?? '')
                .build({
                    id: data?.id,
                    colspan: 3,
                    save_label: 'Save',
                    on_success: () => { rsv_bindings_dt.refresh(); rsv_schedule_preview(); },
                    on_cancel:  () => { rsv_bindings_dt.refresh(); rsv_schedule_preview(); },
                });
        }

        const rsv_bindings_table_el = document.getElementById('rsv_membership_bindings_table');
        if (rsv_bindings_table_el) {
            var rsv_bindings_dt = RsvDataGrid.create_data_grid(
                rsv_bindings_table_el,
                rsv_bindings_source,
                {
                    'program_id': RsvDataGrid.action_column('Program', 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_binding_inline_form(dt, row, data));
                        }),
                        'Remove': RsvDataGrid.func_action(function(dt, row, data) {
                            rsv_bindings_source.remove(data.id);
                            dt.refresh();
                            rsv_schedule_preview();
                        }),
                    }),
                    'discount': RsvDataGrid.column('Discount %', false),
                    'field':    RsvDataGrid.column('Field',      false),
                }
            );
            rsv_bindings_dt.map_column('program_id', (dt, row, data) => {
                const td = document.createElement('td');
                const p = rsv_membership_programs.find(p => String(p.id) === String(data.program_id));
                td.innerText = p ? p.name : (data.program_id ? `#${data.program_id}` : '—');
                return td;
            });
            rsv_bindings_dt.map_column('field', (dt, row, data) => {
                const td = document.createElement('td');
                const el = rsv_elements_source.get_all().find(e => e.name === data.field);
                td.innerText = data.field ? (el && el.label ? `${el.label} (${el.name})` : data.field) : '—';
                return td;
            });
            rsv_bindings_dt.refresh();

            document.getElementById('rsv_add_binding_btn')?.addEventListener('click', function() {
                rsv_bindings_source.add();
                rsv_bindings_dt.refresh();
                rsv_schedule_preview();
            });
        }

        const rsv_meta_form = document.getElementById('<?= $form_id ?>');
        ['name', 'definition.email_key', 'definition.success_message', 'definition.membership_combine'].forEach((n) => {
            const el = rsv_meta_form?.querySelector(`[name="${n}"]`);
            el?.addEventListener('input', rsv_schedule_preview);
            el?.addEventListener('change', rsv_schedule_preview);
        });

        RsvAdminForm.bind(document.getElementById('<?= $form_id ?>'), {
            transform: () => rsv_collect_definition(),
            refresh: () => { if (typeof forms_dt !== 'undefined') forms_dt.refresh(); },
        });

        rsv_render_preview();
        </script>
        <?php
    }
}