@php
    use Illuminate\Support\Carbon;

    $blockEditorState = $page->blocks->map(function ($b) {
        $content = $b->content ?? [];
        if ($b->type === 'countdown' && ! empty($content['target_datetime'])) {
            try {
                $content['target_datetime'] = Carbon::parse($content['target_datetime'])
                    ->timezone(config('app.timezone'))
                    ->format('Y-m-d\TH:i');
            } catch (\Throwable) {
            }
        }

        return [
            'uid' => 'b'.$b->id,
            'type' => $b->type,
            'sort_order' => $b->sort_order,
            'is_visible' => $b->is_visible,
            'content' => $content,
        ];
    })->values()->all();

    $blockTypesMeta = [
        ['type' => 'hero', 'label' => __('Hero-sectie'), 'hint' => __('Kop & subkop')],
        ['type' => 'image', 'label' => __('Afbeelding'), 'hint' => __('Logo of beeld, optionele link')],
        ['type' => 'benefits', 'label' => __('Voordelen'), 'hint' => __('Lijst met USPs')],
        ['type' => 'social_proof', 'label' => __('Social proof'), 'hint' => __('Telleraanmeldingen')],
        ['type' => 'form', 'label' => __('Registratieformulier'), 'hint' => __('Aanmeldformulier')],
        ['type' => 'countdown', 'label' => __('Afteltimer'), 'hint' => __('Aftellen naar datum')],
        ['type' => 'text', 'label' => __('Tekst'), 'hint' => __('Vrije tekst')],
        ['type' => 'cta_banner', 'label' => __('CTA-banner'), 'hint' => __('Knop + link')],
        ['type' => 'divider', 'label' => __('Scheiding'), 'hint' => __('Lijn of ruimte')],
    ];

    $benefitIcons = ['ticket', 'clock', 'mail', 'users', 'star', 'heart', 'gift', 'music', 'shield', 'check'];
@endphp

<div
    x-data="pageBlockEditor({
        initialBlocks: @js($blockEditorState),
        blockTypes: @js($blockTypesMeta),
        storageBase: @js(asset('storage'))
    })"
>
    <h2 id="page-blocks-heading" class="text-lg font-semibold text-slate-900">{{ __('Pagina-inhoud (blokken)') }}</h2>
    <p class="mt-1 text-sm text-slate-600">{{ __('Sleep blokken om de volgorde te wijzigen. Klik op een blok om het te openen of te sluiten. Het oog-icoon verbergt een blok op de publieke pagina.') }}</p>

    <div class="mt-4 flex flex-wrap items-center gap-2">
        <div class="relative" x-data="{ open: false }">
        <button
            type="button"
            class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50"
            @click="open = !open"
        >
            {{ __('+ Blok toevoegen') }}
            <span class="text-slate-400" x-text="open ? '▲' : '▼'"></span>
        </button>
        <div
            x-show="open"
            x-cloak
            @click.outside="open = false"
            class="absolute left-0 z-20 mt-2 w-full max-w-md rounded-lg border border-slate-200 bg-white py-1 shadow-lg"
        >
            <template x-for="bt in blockTypes" :key="bt.type">
                <button
                    type="button"
                    class="flex w-full flex-col items-start gap-0.5 px-4 py-3 text-left text-sm hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
                    @click="addBlock(bt.type); open = false"
                    x-bind:disabled="bt.type === 'form' && hasFormBlock()"
                >
                    <span class="font-medium text-slate-900" x-text="bt.label"></span>
                    <span class="text-xs text-slate-500" x-text="bt.hint"></span>
                </button>
            </template>
        </div>
        </div>
        <button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" @click="expandAll()">
            {{ __('Alles uitklappen') }}
        </button>
        <button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" @click="collapseAll()">
            {{ __('Alles inklappen') }}
        </button>
    </div>

    <div class="mt-6 flex flex-col gap-4" x-ref="sortRoot">
        <template x-for="block in blocks" :key="block.uid">
            <div
                class="overflow-hidden rounded-xl border border-slate-200 bg-slate-50/80 shadow-sm"
                :class="{ 'opacity-50': !block.is_visible }"
                :data-block-uid="block.uid"
            >
                <input type="hidden" :name="`blocks[${block.uid}][type]`" :value="block.type" />
                <input type="hidden" :name="`blocks[${block.uid}][sort_order]`" :value="block.sort_order" />
                <input type="hidden" :name="`blocks[${block.uid}][is_visible]`" :value="block.is_visible ? 1 : 0" />

                <div
                    class="flex items-start gap-2 bg-white px-3 py-2"
                    :class="isCollapsed(block.uid) ? 'rounded-xl' : 'rounded-t-xl border-b border-slate-200'"
                >
                    <button type="button" class="block-drag-handle mt-2 cursor-grab touch-pan-y px-1 text-slate-400 hover:text-slate-600" title="{{ __('Sleep') }}">≡</button>
                    <button
                        type="button"
                        class="min-w-0 flex-1 rounded-lg py-0.5 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
                        @click="toggleCollapsed(block.uid)"
                        :aria-expanded="!isCollapsed(block.uid)"
                    >
                        <span class="flex items-start gap-2">
                            <span class="mt-0.5 w-4 shrink-0 text-center text-xs text-slate-500" x-text="isCollapsed(block.uid) ? '▶' : '▼'" aria-hidden="true"></span>
                            <span class="min-w-0 flex-1">
                                <span class="block" x-text="blockTypes.find(t => t.type === block.type)?.label || block.type"></span>
                                <span
                                    x-show="isCollapsed(block.uid) && blockSummary(block) !== ''"
                                    x-cloak
                                    class="mt-0.5 block max-w-full truncate text-xs font-normal text-slate-500"
                                    x-text="blockSummary(block)"
                                ></span>
                            </span>
                        </span>
                    </button>
                    <div class="flex shrink-0 items-center gap-0.5 self-center">
                        <button type="button" class="p-1 text-slate-500 hover:text-slate-800" :title="block.is_visible ? '{{ __('Verbergen op publieke pagina') }}' : '{{ __('Tonen') }}'" @click="block.is_visible = !block.is_visible">
                            <span x-text="block.is_visible ? '👁' : '🚫'"></span>
                        </button>
                        <button type="button" class="p-1 text-red-600 hover:text-red-800" @click="requestDelete(block.uid)">✕</button>
                    </div>
                </div>

                <div x-show="!isCollapsed(block.uid)" class="space-y-4 p-4">
                    {{-- Hero --}}
                    <div x-show="block.type === 'hero'" class="grid gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Kop (headline)') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][headline]`" x-model="block.content.headline" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" maxlength="255" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Subkop') }}</label>
                            <textarea :name="`blocks[${block.uid}][content][subheadline]`" x-model="block.content.subheadline" rows="3" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Eyebrow / label') }}</label>
                                <input type="text" :name="`blocks[${block.uid}][content][eyebrow_text]`" x-model="block.content.eyebrow_text" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Eyebrow-stijl') }}</label>
                                <select :name="`blocks[${block.uid}][content][eyebrow_style]`" x-model="block.content.eyebrow_style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                    <option value="badge">badge</option>
                                    <option value="text">text</option>
                                    <option value="none">none</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Tekstuitlijning') }}</label>
                            <select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="center">center</option>
                                <option value="left">left</option>
                                <option value="right">right</option>
                            </select>
                        </div>
                    </div>

                    {{-- Image --}}
                    <div x-show="block.type === 'image'" class="grid gap-4">
                        <template x-if="block.content.image && block.content.image !== ''">
                            <div class="flex flex-wrap items-center gap-3">
                                <img :src="storageBase + '/' + block.content.image" alt="" class="h-16 w-auto max-w-[12rem] rounded border border-slate-200 bg-white object-contain p-1" />
                                <label class="inline-flex items-center gap-2 text-sm text-red-700">
                                    <input type="checkbox" :name="`blocks[${block.uid}][remove_block_image]`" value="1" />
                                    {{ __('Afbeelding verwijderen') }}
                                </label>
                            </div>
                        </template>
                        <input type="hidden" :name="`blocks[${block.uid}][content][image]`" :value="block.content.image || ''" />
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Afbeelding uploaden') }}</label>
                            <input type="file" :name="`blocks[${block.uid}][block_image]`" accept="image/jpeg,image/png,image/webp,image/svg+xml,.svg" class="mt-1 block w-full text-sm text-slate-600" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Link-URL (optioneel, bij klik)') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][link_url]`" x-model="block.content.link_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" placeholder="https://…" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Alt-tekst') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][alt]`" x-model="block.content.alt" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Max. breedte (px)') }}</label>
                                <input type="number" min="48" max="800" :name="`blocks[${block.uid}][content][max_width_px]`" x-model.number="block.content.max_width_px" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Uitlijning') }}</label>
                                <select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                    <option value="center">center</option>
                                    <option value="left">left</option>
                                    <option value="right">right</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- Benefits --}}
                    <div x-show="block.type === 'benefits'" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Layout') }}</label>
                                <select :name="`blocks[${block.uid}][content][layout]`" x-model="block.content.layout" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                    <option value="list">list</option>
                                    <option value="grid">grid</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Max. kolommen') }}</label>
                                <select :name="`blocks[${block.uid}][content][max_columns]`" x-model.number="block.content.max_columns" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-slate-700">{{ __('Items') }}</span>
                            <button type="button" class="text-sm font-medium text-indigo-600 hover:text-indigo-500" @click="addBenefitItem(block.uid)">+ {{ __('Voordeel') }}</button>
                        </div>
                        <template x-for="(item, idx) in block.content.items" :key="idx">
                            <div class="flex flex-wrap items-end gap-2 rounded-lg border border-slate-200 bg-white p-3">
                                <div class="min-w-[8rem] flex-1">
                                    <label class="text-xs text-slate-500">{{ __('Icoon') }}</label>
                                    <select :name="`blocks[${block.uid}][content][items][${idx}][icon]`" x-model="item.icon" class="mt-0.5 block w-full rounded border-slate-300 text-sm">
                                        @foreach ($benefitIcons as $ic)
                                            <option value="{{ $ic }}">{{ $ic }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="min-w-[12rem] flex-[2]">
                                    <label class="text-xs text-slate-500">{{ __('Tekst') }}</label>
                                    <input type="text" :name="`blocks[${block.uid}][content][items][${idx}][text]`" x-model="item.text" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
                                </div>
                                <button type="button" class="mb-0.5 text-sm text-red-600 hover:text-red-800" @click="removeBenefitItem(block.uid, idx)">{{ __('Verwijderen') }}</button>
                            </div>
                        </template>
                    </div>

                    {{-- Social proof --}}
                    <div x-show="block.type === 'social_proof'" class="grid gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Sjabloon (gebruik {count})') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][template]`" x-model="block.content.template" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Minimum aantal (alleen tonen als ≥)') }}</label>
                            <input type="number" min="0" :name="`blocks[${block.uid}][content][min_count]`" x-model.number="block.content.min_count" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="hidden" :name="`blocks[${block.uid}][content][show_animation]`" :value="block.content.show_animation ? 1 : 0" />
                            <input type="checkbox" @change="block.content.show_animation = $event.target.checked" :checked="block.content.show_animation" />
                            {{ __('Animatie') }}
                        </label>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
                            <select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="pill">pill</option>
                                <option value="badge">badge</option>
                                <option value="plain">plain</option>
                            </select>
                        </div>
                    </div>

                    {{-- Form --}}
                    <div x-show="block.type === 'form'" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Titel boven formulier') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Beschrijving') }}</label>
                            <textarea :name="`blocks[${block.uid}][content][description]`" x-model="block.content.description" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
                        </div>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Knoptekst') }}</label>
                                <input type="text" :name="`blocks[${block.uid}][content][button_label]`" x-model="block.content.button_label" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Knopkleur') }}</label>
                                <input type="text" :name="`blocks[${block.uid}][content][button_color]`" x-model="block.content.button_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Knoptekstkleur') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][button_text_color]`" x-model="block.content.button_text_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
                        </div>
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="hidden" :name="`blocks[${block.uid}][content][show_field_icons]`" :value="block.content.show_field_icons ? 1 : 0" />
                            <input type="checkbox" @change="block.content.show_field_icons = $event.target.checked" :checked="block.content.show_field_icons" />
                            {{ __('Iconen bij velden') }}
                        </label>
                        <p class="text-xs text-slate-500">{{ __('Voornaam, achternaam en e-mail blijven verplicht ingeschakeld voor de database.') }}</p>
                        <template x-for="fk in ['first_name','last_name','email','phone']" :key="fk">
                            <div class="rounded-lg border border-slate-200 bg-white p-3">
                                <p class="text-sm font-medium capitalize text-slate-800" x-text="fk.replace('_',' ')"></p>
                                <template x-if="fk === 'phone'">
                                    <label class="mt-2 inline-flex items-center gap-2 text-sm text-slate-700">
                                        <input type="hidden" :name="`blocks[${block.uid}][content][fields][phone][enabled]`" :value="block.content.fields.phone.enabled ? 1 : 0" />
                                        <input type="checkbox" @change="block.content.fields.phone.enabled = $event.target.checked" :checked="block.content.fields.phone.enabled" />
                                        {{ __('Telefoonveld tonen') }}
                                    </label>
                                </template>
                                <template x-if="fk !== 'phone'">
                                    <input type="hidden" :name="`blocks[${block.uid}][content][fields][${fk}][enabled]`" value="1" />
                                    <input type="hidden" :name="`blocks[${block.uid}][content][fields][${fk}][required]`" value="1" />
                                </template>
                                <div class="mt-2 grid gap-2 sm:grid-cols-2">
                                    <div>
                                        <label class="text-xs text-slate-500">{{ __('Label') }}</label>
                                        <input type="text" :name="`blocks[${block.uid}][content][fields][${fk}][label]`" x-model="block.content.fields[fk].label" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
                                    </div>
                                    <div>
                                        <label class="text-xs text-slate-500">{{ __('Placeholder') }}</label>
                                        <input type="text" :name="`blocks[${block.uid}][content][fields][${fk}][placeholder]`" x-model="block.content.fields[fk].placeholder" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
                                    </div>
                                </div>
                                <template x-if="fk === 'phone'">
                                    <label class="mt-2 inline-flex items-center gap-2 text-sm text-slate-700">
                                        <input type="hidden" :name="`blocks[${block.uid}][content][fields][phone][required]`" :value="block.content.fields.phone.required ? 1 : 0" />
                                        <input type="checkbox" @change="block.content.fields.phone.required = $event.target.checked" :checked="block.content.fields.phone.required" />
                                        {{ __('Telefoon verplicht') }}
                                    </label>
                                </template>
                            </div>
                        </template>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Privacytekst') }}</label>
                            <textarea :name="`blocks[${block.uid}][content][privacy_text]`" x-model="block.content.privacy_text" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Privacy-URL') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][privacy_url]`" x-model="block.content.privacy_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" placeholder="https://…" />
                        </div>
                    </div>

                    {{-- Countdown --}}
                    <div x-show="block.type === 'countdown'" class="grid gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Doeldatum / -tijd') }}</label>
                            <input type="datetime-local" :name="`blocks[${block.uid}][content][target_datetime]`" x-model="block.content.target_datetime" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Na afloop') }}</label>
                            <select :name="`blocks[${block.uid}][content][expired_action]`" x-model="block.content.expired_action" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="hide">hide</option>
                                <option value="show_message">show_message</option>
                                <option value="reload">reload</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Bericht (bij show_message)') }}</label>
                            <textarea :name="`blocks[${block.uid}][content][expired_message]`" x-model="block.content.expired_message" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
                            <select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="large">large</option>
                                <option value="compact">compact</option>
                            </select>
                        </div>
                        <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                            <input type="hidden" :name="`blocks[${block.uid}][content][show_labels]`" :value="block.content.show_labels ? 1 : 0" />
                            <input type="checkbox" @change="block.content.show_labels = $event.target.checked" :checked="block.content.show_labels" />
                            {{ __('Labels tonen') }}
                        </label>
                        @foreach (['days' => 'dagen', 'hours' => 'uren', 'minutes' => 'minuten', 'seconds' => 'seconden'] as $lk => $lab)
                            <div>
                                <label class="block text-sm font-medium text-slate-700">{{ __('Label :key', ['key' => $lk]) }}</label>
                                <input
                                    type="text"
                                    :name="`blocks[${block.uid}][content][labels][{{ $lk }}]`"
                                    x-model="block.content.labels['{{ $lk }}']"
                                    class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"
                                />
                            </div>
                        @endforeach
                    </div>

                    {{-- Text --}}
                    <div x-show="block.type === 'text'" class="grid gap-2">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Tekst') }}</label>
                            <textarea :name="`blocks[${block.uid}][content][body]`" x-model="block.content.body" rows="6" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Tekstgrootte') }}</label>
                            <select :name="`blocks[${block.uid}][content][text_size]`" x-model="block.content.text_size" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="sm">sm</option>
                                <option value="base">base</option>
                                <option value="lg">lg</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Uitlijning') }}</label>
                            <select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="center">center</option>
                                <option value="left">left</option>
                                <option value="right">right</option>
                            </select>
                        </div>
                    </div>

                    {{-- CTA --}}
                    <div x-show="block.type === 'cta_banner'" class="grid gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Tekst') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][text]`" x-model="block.content.text" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Knoptekst') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][button_label]`" x-model="block.content.button_label" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Knop-URL') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][button_url]`" x-model="block.content.button_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Knopkleur') }}</label>
                            <input type="text" :name="`blocks[${block.uid}][content][button_color]`" x-model="block.content.button_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
                            <select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="inline">inline</option>
                                <option value="stacked">stacked</option>
                            </select>
                        </div>
                    </div>

                    {{-- Divider --}}
                    <div x-show="block.type === 'divider'" class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
                            <select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="line">line</option>
                                <option value="dots">dots</option>
                                <option value="space_only">space_only</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Ruimte') }}</label>
                            <select :name="`blocks[${block.uid}][content][spacing]`" x-model="block.content.spacing" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
                                <option value="small">small</option>
                                <option value="medium">medium</option>
                                <option value="large">large</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div
                    x-show="confirmDeleteUid === block.uid"
                    x-cloak
                    class="border-t border-red-100 bg-red-50 px-4 py-3 text-sm text-red-900"
                >
                    <p>{{ __('Dit blok verwijderen?') }}</p>
                    <div class="mt-2 flex gap-2">
                        <button type="button" class="rounded bg-red-600 px-3 py-1.5 font-medium text-white hover:bg-red-500" @click="removeBlock(block.uid)">{{ __('Verwijderen') }}</button>
                        <button type="button" class="rounded border border-slate-300 bg-white px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-50" @click="cancelDelete()">{{ __('Annuleren') }}</button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>