@php
    $repeaterRaw = old('repeater_raw');
    if ($repeaterRaw === null) {
        $repeaterRaw = collect($section->repeater_items ?? [])->map(fn ($i) => trim(($i['title'] ?? '') . '|' . ($i['text'] ?? '')))->implode("\n");
    }
    $usedInOld = old('used_in', $section->used_in ?? []);
    $imageRaw = old('image_url', $section->image_url ?? '');
    $imagePreview = '';
    if (!empty($imageRaw)) {
        $imagePreview = str_starts_with($imageRaw, 'http://') || str_starts_with($imageRaw, 'https://')
            ? $imageRaw
            : asset('storage/' . ltrim($imageRaw, '/'));
    }
@endphp

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-5">
        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="text-base font-semibold mb-4">Section Content</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium">Section Name *</label>
                    <input name="name" value="{{ old('name', $section->name ?? '') }}" class="w-full mt-1 rounded border-gray-300" required>
                </div>
                <div>
                    <label class="text-sm font-medium">Section Type *</label>
                    <select name="section_type" class="w-full mt-1 rounded border-gray-300" required>
                        @foreach(['hero'=>'Hero','cta'=>'CTA','grid'=>'Grid','form'=>'Form','faq'=>'FAQ','stats'=>'Stats','feature_list'=>'Feature List','services_block'=>'Services Block'] as $value => $label)
                            <option value="{{ $value }}" {{ old('section_type', $section->section_type ?? '') === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-sm font-medium">Title</label>
                    <input name="title" value="{{ old('title', $section->title ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Subtitle</label>
                    <input name="subtitle" value="{{ old('subtitle', $section->subtitle ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Text</label>
                    <textarea name="text" rows="4" class="w-full mt-1 rounded border-gray-300">{{ old('text', $section->text ?? '') }}</textarea>
                </div>
                <div>
                    <label class="text-sm font-medium">Image URL</label>
                    <input name="image_url" value="{{ old('image_url', $section->image_url ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                    <label class="text-xs text-gray-500 block mt-2">Or Upload Image</label>
                    <input type="file" name="image_file" accept="image/*" class="w-full mt-1 text-sm rounded border-gray-300">
                    @if($imagePreview)
                        <img src="{{ $imagePreview }}" alt="Section image" class="mt-2 h-20 w-full max-w-xs rounded object-cover border border-gray-200">
                    @endif
                </div>
                <div>
                    <label class="text-sm font-medium">Icon (class/text)</label>
                    <input name="icon" value="{{ old('icon', $section->icon ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Button Label</label>
                    <input name="button_label" value="{{ old('button_label', $section->button_label ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">Button URL</label>
                    <input name="button_url" value="{{ old('button_url', $section->button_url ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Repeater Items</label>
                    <p class="text-xs text-gray-500 mt-1">One line per item. Format: <code>title|text</code></p>
                    <textarea name="repeater_raw" rows="6" class="w-full mt-1 rounded border-gray-300 font-mono text-sm">{{ $repeaterRaw }}</textarea>
                </div>
            </div>
        </section>
    </div>

    <div class="space-y-5">
        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h3 class="text-base font-semibold mb-4">Usage</h3>
            <label class="inline-flex items-center gap-2 text-sm mb-3">
                <input type="checkbox" name="is_global" value="1" {{ old('is_global', $section->is_global ?? true) ? 'checked' : '' }}>
                Global (Reusable)
            </label>
            <div class="mb-3">
                <label class="text-sm font-medium">Used In Pages</label>
                <select name="used_in[]" multiple class="w-full mt-1 rounded border-gray-300 h-44">
                    @foreach($pages as $page)
                        <option value="{{ $page->slug }}" {{ in_array($page->slug, $usedInOld, true) ? 'selected' : '' }}>{{ $page->name }} ({{ $page->slug }})</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="text-sm font-medium">Sort Order</label>
                <input type="number" min="0" name="sort_order" value="{{ old('sort_order', $section->sort_order ?? 0) }}" class="w-full mt-1 rounded border-gray-300">
            </div>
            <label class="inline-flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $section->is_active ?? true) ? 'checked' : '' }}>
                Active
            </label>
        </section>

        <div class="bg-white rounded-xl border border-gray-200 p-4 flex gap-2">
            <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg">Save</button>
            <a href="{{ route('admin.sections.index') }}" class="px-4 py-2.5 rounded-lg border border-gray-300 text-sm text-gray-700">Cancel</a>
        </div>
    </div>
</div>