<div class="space-y-6">
    <div>
        <flux:heading size="xl">Homepage hero banners</flux:heading>
        <flux:text class="mt-1 text-zinc-600 dark:text-zinc-400">
            Slideshow on the store front page: headline, copy, background image URL, pill tags, and up to two buttons.
        </flux:text>
    </div>

    <flux:card class="p-4 md:p-6">
        <flux:heading size="lg" class="mb-4">{{ $editingId ? 'Edit banner' : 'New banner' }}</flux:heading>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Eyebrow (badge)</flux:label>
                <flux:input wire:model="eyebrow" placeholder="New arrivals weekly" />
                <flux:error name="eyebrow" />
            </flux:field>
            <flux:field>
                <flux:label>Headline</flux:label>
                <flux:input wire:model="headline" placeholder="Main headline" />
                <flux:error name="headline" />
            </flux:field>
            <flux:field class="md:col-span-2">
                <flux:label>Body</flux:label>
                <flux:textarea wire:model="body" rows="3" placeholder="Supporting text under the headline" />
                <flux:error name="body" />
            </flux:field>
            <flux:field class="md:col-span-2">
                <flux:label>Background image URL</flux:label>
                <flux:input wire:model="backgroundImageUrl" placeholder="https://… or /images/hero-bg.jpg" />
                <flux:error name="backgroundImageUrl" />
                <flux:description>Full URL or site path (e.g. Unsplash or <code class="text-xs">/images/your-file.jpg</code>).</flux:description>
            </flux:field>
            <flux:field class="md:col-span-2">
                <flux:label>Pill tags</flux:label>
                <flux:textarea wire:model="tagsInput" rows="2" placeholder="Tag one, Tag two (comma or newline separated)" />
                <flux:error name="tagsInput" />
            </flux:field>
            <flux:field>
                <flux:label>Primary button label</flux:label>
                <flux:input wire:model="buttonLabel" />
                <flux:error name="buttonLabel" />
            </flux:field>
            <flux:field>
                <flux:label>Primary button URL</flux:label>
                <flux:input wire:model="buttonUrl" placeholder="/shop" />
                <flux:error name="buttonUrl" />
            </flux:field>
            <flux:field>
                <flux:label>Secondary button label</flux:label>
                <flux:input wire:model="buttonSecondaryLabel" />
                <flux:error name="buttonSecondaryLabel" />
            </flux:field>
            <flux:field>
                <flux:label>Secondary button URL</flux:label>
                <flux:input wire:model="buttonSecondaryUrl" placeholder="/register" />
                <flux:error name="buttonSecondaryUrl" />
            </flux:field>
            <flux:field variant="inline" class="md:col-span-2 self-end">
                <flux:checkbox wire:model="isActive" />
                <flux:label>Active (visible on homepage)</flux:label>
            </flux:field>
        </div>
        <div class="flex flex-wrap gap-3 mt-6">
            <flux:button wire:click="save" variant="primary">{{ $editingId ? 'Update banner' : 'Create banner' }}</flux:button>
            @if ($editingId)
                <flux:button wire:click="resetForm" variant="ghost">Cancel</flux:button>
            @endif
        </div>
    </flux:card>

    <div class="space-y-3">
        <flux:heading size="lg">All banners</flux:heading>
        @forelse ($this->banners as $banner)
            <flux:card class="p-4">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div class="flex gap-4 min-w-0">
                        <div
                            class="w-28 h-20 shrink-0 rounded-lg bg-cover bg-center border border-zinc-200 dark:border-zinc-700"
                            style="background-image: url({{ json_encode($banner->background_image_url) }})"
                        ></div>
                        <div class="min-w-0">
                            <flux:heading size="base" class="truncate">{{ $banner->headline }}</flux:heading>
                            @if ($banner->eyebrow)
                                <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">{{ $banner->eyebrow }}</flux:text>
                            @endif
                            <flux:badge color="{{ $banner->is_active ? 'lime' : 'zinc' }}" class="mt-2">{{ $banner->is_active ? 'Active' : 'Hidden' }}</flux:badge>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <flux:button wire:click="moveUp({{ $banner->id }})" size="sm" variant="outline" title="Move up">↑</flux:button>
                        <flux:button wire:click="moveDown({{ $banner->id }})" size="sm" variant="outline" title="Move down">↓</flux:button>
                        <flux:button wire:click="edit({{ $banner->id }})" size="sm" variant="filled">Edit</flux:button>
                        <flux:button wire:click="toggleActive({{ $banner->id }})" size="sm" variant="outline">
                            {{ $banner->is_active ? 'Hide' : 'Show' }}
                        </flux:button>
                        <flux:button wire:click="delete({{ $banner->id }})" wire:confirm="Delete this banner?" size="sm" variant="danger">Delete</flux:button>
                    </div>
                </div>
            </flux:card>
        @empty
            <flux:callout>No banners yet. Create one above — or run <code class="text-xs">php artisan db:seed --class=HomepageBannerSeeder</code> for four starter slides.</flux:callout>
        @endforelse
    </div>
</div>
