@php
    /** @var array<string,mixed> $content */
    $content = $content ?? [];
    $defaultSections = [['name' => 'Products', 'items' => [['name' => '', 'description' => '', 'price' => '', 'image_path' => '']]]];
    $seedSections = old('sections', ! empty($content['sections']) ? $content['sections'] : $defaultSections);
    $seedServices = old('services', ! empty($content['services'])
        ? $content['services']
        : [['name' => '', 'duration_minutes' => 30, 'price_ghs' => '', 'description' => '']]);
@endphp

{{-- Only the active type's block is in the DOM (x-if), so inputs never collide across types. --}}

{{-- ============================ BOOKING ============================ --}}
<template x-if="type === 'booking'">
<div x-data="{
        services: @js($seedServices),
        activeDays: @js(old('active_days', $content['active_days'] ?? ['mon','tue','wed','thu','fri'])),
        days: [
            { key: 'mon', label: 'Mon' }, { key: 'tue', label: 'Tue' }, { key: 'wed', label: 'Wed' },
            { key: 'thu', label: 'Thu' }, { key: 'fri', label: 'Fri' }, { key: 'sat', label: 'Sat' }, { key: 'sun', label: 'Sun' },
        ],
        toggleDay(key) {
            if (this.activeDays.includes(key)) { this.activeDays = this.activeDays.filter(d => d !== key); }
            else { this.activeDays.push(key); }
        },
        addService() { this.services.push({ name: '', duration_minutes: 30, price_ghs: '', description: '' }); },
        removeService(i) { this.services.splice(i, 1); },
     }" class="space-y-4">
    <div>
        <label class="block text-xs font-semibold text-slate-600">Business / page title *</label>
        <input type="text" name="booking_title" value="{{ old('booking_title', $content['booking_title'] ?? '') }}"
               placeholder="e.g. Glow Salon"
               class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
    </div>
    <div>
        <label class="block text-xs font-semibold text-slate-600">Description</label>
        <textarea name="description" rows="2" placeholder="What customers should know…"
                  class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">{{ old('description', $content['description'] ?? '') }}</textarea>
    </div>
    <div class="grid gap-3 sm:grid-cols-2">
        <div>
            <label class="block text-xs font-semibold text-slate-600">Opens at</label>
            <input type="time" name="opens_at" value="{{ old('opens_at', $content['opens_at'] ?? '09:00') }}"
                   class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
        </div>
        <div>
            <label class="block text-xs font-semibold text-slate-600">Closes at</label>
            <input type="time" name="closes_at" value="{{ old('closes_at', $content['closes_at'] ?? '17:00') }}"
                   class="mt-1.5 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
        </div>
    </div>
    <div>
        <p class="text-xs font-semibold text-slate-600">Available days *</p>
        <div class="mt-2 flex flex-wrap gap-2">
            <template x-for="day in days" :key="day.key">
                <button type="button" @click="toggleDay(day.key)"
                        class="rounded-lg border px-3 py-1.5 text-xs font-semibold transition"
                        :class="activeDays.includes(day.key) ? 'border-indigo-300 bg-indigo-50 text-indigo-700' : 'border-slate-200 text-slate-500'"
                        x-text="day.label"></button>
            </template>
        </div>
        <template x-for="day in activeDays" :key="day">
            <input type="hidden" name="active_days[]" :value="day">
        </template>
    </div>
    <div>
        <div class="flex items-center justify-between">
            <p class="text-xs font-semibold text-slate-600">Services *</p>
            <button type="button" @click="addService()" class="text-xs font-semibold text-indigo-600">+ Add service</button>
        </div>
        <template x-for="(svc, i) in services" :key="i">
            <div class="mt-3 rounded-xl border border-slate-200 p-3 space-y-2">
                <input type="text" :name="'services['+i+'][name]'" x-model="svc.name" placeholder="Service name *"
                       class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
                <div class="grid grid-cols-2 gap-2">
                    <input type="number" :name="'services['+i+'][duration_minutes]'" x-model="svc.duration_minutes" min="15" step="15" placeholder="Duration (min)"
                           class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                    <input type="number" :name="'services['+i+'][price_ghs]'" x-model="svc.price_ghs" min="0" step="0.01" placeholder="Price GHS (0 = free)"
                           class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                </div>
                <input type="text" :name="'services['+i+'][description]'" x-model="svc.description" placeholder="Description (optional)"
                       class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
                <button type="button" x-show="services.length > 1" @click="removeService(i)" class="text-xs text-red-600">Remove</button>
            </div>
        </template>
    </div>
    <label class="flex items-center gap-2 text-sm text-slate-600">
        <input type="hidden" name="accepts_payment" value="0">
        <input type="checkbox" name="accepts_payment" value="1" @checked(old('accepts_payment', $content['accepts_payment'] ?? true)) class="rounded border-slate-300 text-indigo-600">
        Accept online payment for paid services
    </label>
    <div class="grid gap-4 sm:grid-cols-2">
        <div>
            <label class="block text-xs font-semibold text-slate-600">Logo (optional)</label>
            <input type="file" name="menu_logo" accept="image/png,image/jpeg,image/gif,image/webp" class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm">
        </div>
        <div>
            <label class="block text-xs font-semibold text-slate-600">Cover image (optional)</label>
            <input type="file" name="menu_cover" accept="image/png,image/jpeg,image/gif,image/webp" class="mt-1.5 block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm">
        </div>
    </div>
</div>
</template>

{{-- ============================ MENU ============================ --}}
<template x-if="type === 'menu'">
<div x-data="{
        sections: @js($seedSections),
        addItem(sIdx) { this.sections[sIdx].items.push({ name: '', description: '', price: '', image_path: '' }) },
        removeItem(sIdx, iIdx) { this.sections[sIdx].items.splice(iIdx, 1) },
        removeSection(sIdx) { this.sections.splice(sIdx, 1) },
        addSection() { this.sections.push({ name: 'New Section', items: [{ name: '', description: '', price: '', image_path: '' }] }) },
     }">
    <div class="mb-4 space-y-3">
        <p class="text-xs font-semibold text-slate-600">Branding <span class="font-normal text-slate-400">(optional)</span></p>
        <div class="grid gap-3 sm:grid-cols-3">
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Logo</label>
                <input type="file" name="menu_logo" accept="image/png,image/jpeg,image/gif,image/webp"
                       class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
            </div>
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Cover Image</label>
                <input type="file" name="menu_cover" accept="image/png,image/jpeg,image/gif,image/webp"
                       class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
                <x-qr.cover-image-hint />
            </div>
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Brand Color</label>
                <input type="color" name="brand_color" value="{{ old('brand_color', $content['brand_color'] ?? '#f97316') }}"
                       class="mt-1 h-10 w-full cursor-pointer rounded-xl border border-slate-200 p-1">
            </div>
        </div>
    </div>

    <input type="text" name="menu_title" value="{{ old('menu_title', $content['title'] ?? 'Menu') }}" placeholder="Menu title"
           class="mb-4 w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">

    @include('merchant.storefronts.partials.payment-shipping', ['content' => $content, 'noun' => 'items', 'word' => 'delivery'])

    <template x-for="(section, sIdx) in sections" :key="sIdx">
        <div class="mb-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/50">
            <div class="flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
                <input type="text" :name="'sections[' + sIdx + '][name]'" x-model="section.name" placeholder="Section name"
                       class="flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold">
                <button type="button" x-show="sections.length > 1" @click="removeSection(sIdx)"
                        class="ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="space-y-3 p-4">
                <template x-for="(item, iIdx) in section.items" :key="iIdx">
                    <div class="rounded-xl border border-slate-200 bg-white p-3">
                        <input type="hidden" :name="'sections['+sIdx+'][items]['+iIdx+'][image_path]'" :value="item.image_path || ''">
                        <div class="grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
                            <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][name]'" x-model="item.name" placeholder="Item name *"
                                   class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                            <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][price]'" x-model="item.price" placeholder="Price (e.g. 25.00)"
                                   class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                            <button type="button" x-show="section.items.length > 1" @click="removeItem(sIdx, iIdx)"
                                    class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                            </button>
                        </div>
                        <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][description]'" x-model="item.description" placeholder="Description (optional)"
                               class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
                        <div class="mt-2">
                            <label class="block text-[11px] font-medium text-slate-500">Photo (optional)</label>
                            <input type="file" :name="'item_images[' + sIdx + '][' + iIdx + ']'" accept="image/png,image/jpeg,image/gif,image/webp"
                                   class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-slate-100 file:px-2 file:py-1 file:text-xs file:font-medium file:text-slate-600">
                        </div>
                    </div>
                </template>
                <button type="button" @click="addItem(sIdx)" class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Add item
                </button>
            </div>
        </div>
    </template>
    <button type="button" @click="addSection()" class="inline-flex items-center gap-1.5 rounded-xl border border-indigo-200 bg-indigo-50 px-3.5 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        Add section
    </button>
</div>
</template>

{{-- ============================ SHOP ============================ --}}
<template x-if="type === 'shop'">
<div x-data="{
        sections: @js($seedSections),
        addItem(sIdx) { this.sections[sIdx].items.push({ name: '', description: '', price: '', image_path: '' }) },
        removeItem(sIdx, iIdx) { this.sections[sIdx].items.splice(iIdx, 1) },
        removeSection(sIdx) { this.sections.splice(sIdx, 1) },
        addSection() { this.sections.push({ name: 'New Category', items: [{ name: '', description: '', price: '', image_path: '' }] }) },
     }">
    <div class="mb-4 space-y-3">
        <p class="text-xs font-semibold text-slate-600">Branding <span class="font-normal text-slate-400">(optional)</span></p>
        <div class="grid gap-3 sm:grid-cols-3">
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Logo</label>
                <input type="file" name="menu_logo" accept="image/png,image/jpeg,image/gif,image/webp"
                       class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
            </div>
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Cover Image</label>
                <input type="file" name="menu_cover" accept="image/png,image/jpeg,image/gif,image/webp"
                       class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-2 file:py-1 file:text-xs file:font-semibold file:text-indigo-700">
                <x-qr.cover-image-hint />
            </div>
            <div>
                <label class="block text-[11px] font-medium text-slate-500">Brand Color</label>
                <input type="color" name="brand_color" value="{{ old('brand_color', $content['brand_color'] ?? '#7c3aed') }}"
                       class="mt-1 h-10 w-full cursor-pointer rounded-xl border border-slate-200 p-1">
            </div>
        </div>
    </div>

    <div class="mb-4 grid gap-3 sm:grid-cols-2">
        <input type="text" name="shop_title" value="{{ old('shop_title', $content['title'] ?? 'Our Shop') }}" placeholder="Shop name"
               class="rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
        <select name="currency" class="rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm text-slate-700">
            @foreach(['GHS' => 'GHS (Ghanaian Cedi)', 'USD' => 'USD (US Dollar)', 'NGN' => 'NGN (Nigerian Naira)', 'KES' => 'KES (Kenyan Shilling)'] as $code => $clabel)
                <option value="{{ $code }}" @selected(old('currency', $content['currency'] ?? 'GHS') === $code)>{{ $clabel }}</option>
            @endforeach
        </select>
    </div>

    @include('merchant.storefronts.partials.payment-shipping', ['content' => $content, 'noun' => 'products', 'word' => 'shipping'])

    <template x-for="(section, sIdx) in sections" :key="sIdx">
        <div class="mb-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50/50">
            <div class="flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3">
                <input type="text" :name="'sections[' + sIdx + '][name]'" x-model="section.name" placeholder="Category name"
                       class="flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold">
                <button type="button" x-show="sections.length > 1" @click="removeSection(sIdx)"
                        class="ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="space-y-3 p-4">
                <template x-for="(item, iIdx) in section.items" :key="iIdx">
                    <div class="rounded-xl border border-slate-200 bg-white p-3">
                        <input type="hidden" :name="'sections['+sIdx+'][items]['+iIdx+'][image_path]'" :value="item.image_path || ''">
                        <div class="grid gap-2 sm:grid-cols-[1fr_1fr_auto]">
                            <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][name]'" x-model="item.name" placeholder="Product name *"
                                   class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                            <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][price]'" x-model="item.price" placeholder="Price (e.g. 25.00)"
                                   class="rounded-lg border border-slate-200 px-3 py-2 text-sm">
                            <button type="button" x-show="section.items.length > 1" @click="removeItem(sIdx, iIdx)"
                                    class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-400 hover:border-red-300 hover:text-red-500">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                            </button>
                        </div>
                        <input type="text" :name="'sections[' + sIdx + '][items][' + iIdx + '][description]'" x-model="item.description" placeholder="Description (optional)"
                               class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm">
                        <div class="mt-2">
                            <label class="block text-[11px] font-medium text-slate-500">Product photo (optional)</label>
                            <input type="file" :name="'item_images[' + sIdx + '][' + iIdx + ']'" accept="image/png,image/jpeg,image/gif,image/webp"
                                   class="mt-1 block w-full text-xs text-slate-600 file:mr-2 file:rounded-lg file:border-0 file:bg-slate-100 file:px-2 file:py-1 file:text-xs file:font-medium file:text-slate-600">
                        </div>
                    </div>
                </template>
                <button type="button" @click="addItem(sIdx)" class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800">
                    <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Add product
                </button>
            </div>
        </div>
    </template>
    <button type="button" @click="addSection()" class="inline-flex items-center gap-1.5 rounded-xl border border-indigo-200 bg-indigo-50 px-3.5 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
        Add category
    </button>
</div>
</template>