@php
    $blockTypes = [
        'rich-text' => 'Rich Text',
        'image-text' => 'Image + Text',
        'cards' => 'Cards Grid',
        'stats' => 'Statistics',
        'gallery' => 'Gallery',
        'cta' => 'Call to Action',
        'accordion' => 'Accordion / FAQ',
        'video' => 'Video Embed',
    ];

    $defaultData = [
        'rich-text' => ['html' => ''],
        'image-text' => ['image' => null, 'text' => '', 'position' => 'left'],
        'cards' => ['title' => '', 'cards' => []],
        'stats' => ['stats' => []],
        'gallery' => ['images' => []],
        'cta' => ['title' => '', 'text' => '', 'button_label' => '', 'button_url' => ''],
        'accordion' => ['items' => []],
        'video' => ['embed' => ''],
    ];
@endphp

<div class="block-builder" data-block-builder data-defaults="{{ json_encode($defaultData) }}">
    <div class="d-flex flex-column gap-2" data-block-list>
        @foreach ($blocks as $index => $block)
            <div class="card" data-block-item>
                <div class="card-body py-2">
                    <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                        <span class="fw-semibold">Block {{ $index + 1 }}</span>
                        <div class="d-flex gap-2 align-items-center flex-wrap">
                            <select class="form-select form-select-sm block-type" style="max-width: 190px;">
                                @foreach ($blockTypes as $value => $label)
                                    <option value="{{ $value }}" @selected(($block['type'] ?? 'rich-text') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                            <div class="form-check form-switch mb-0">
                                <input type="checkbox" class="form-check-input block-active" @checked((bool) ($block['is_active'] ?? true))>
                                <label class="form-check-label small">Active</label>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-danger block-remove">
                                <i class="ri-delete-bin-line"></i>
                            </button>
                        </div>
                    </div>
                    <input type="hidden" class="block-id" value="{{ $block['id'] ?? '' }}">
                </div>
            </div>
        @endforeach
    </div>

    <button type="button" class="btn btn-sm btn-primary mt-3" data-block-add>
        <i class="ri-add-line me-1"></i>Add block
    </button>

    <template data-block-template>
        <div class="card" data-block-item>
            <div class="card-body py-2">
                <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                    <span class="fw-semibold">Block</span>
                    <div class="d-flex gap-2 align-items-center flex-wrap">
                        <select class="form-select form-select-sm block-type" style="max-width: 190px;">
                            @foreach ($blockTypes as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <div class="form-check form-switch mb-0">
                            <input type="checkbox" class="form-check-input block-active" checked>
                            <label class="form-check-label small">Active</label>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-danger block-remove">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </div>
                </div>
                <input type="hidden" class="block-id" value="">
            </div>
        </div>
    </template>
</div>