<x-layouts.admin title="Banners & Advertisements">
    <x-admin.page-header title="Banners & Advertisements" subtitle="{{ $banners->total() }} total — one place for hero slides, sale banners, and promotional ads.">
        <x-slot:actions>
            <a href="{{ route('admin.banners.create') }}">
                <x-admin.button variant="accent"><i class="fa-solid fa-plus text-xs"></i> New Banner</x-admin.button>
            </a>
        </x-slot:actions>
    </x-admin.page-header>

    <div class="mb-4 flex flex-wrap gap-2">
        <a href="{{ route('admin.banners.index') }}" class="rounded-full px-3 py-1.5 text-xs font-medium transition {{ ! $activeType ? 'bg-ink text-ivory' : 'bg-black/5 text-ink/60 hover:bg-black/10' }}">
            All
        </a>
        @foreach ($types as $type)
            <a href="{{ route('admin.banners.index', ['type' => $type->value]) }}" class="rounded-full px-3 py-1.5 text-xs font-medium transition {{ $activeType === $type->value ? 'bg-ink text-ivory' : 'bg-black/5 text-ink/60 hover:bg-black/10' }}">
                {{ $type->label() }}
            </a>
        @endforeach
    </div>

    <x-admin.card :padded="false">
        @if ($banners->isEmpty())
            <x-admin.empty-state icon="fa-solid fa-images" title="No banners yet" subtitle="Add a hero slide, sale banner, or promotional ad to feature it on the storefront.">
                <x-slot:action>
                    <a href="{{ route('admin.banners.create') }}">
                        <x-admin.button variant="accent">Create your first banner</x-admin.button>
                    </a>
                </x-slot:action>
            </x-admin.empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Banner</th>
                            <th>Placement</th>
                            <th>Schedule</th>
                            <th>Status</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($banners as $banner)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="h-9 w-14 shrink-0 overflow-hidden rounded-lg bg-black/5">
                                            <img src="{{ Storage::url($banner->image) }}" alt="" class="h-full w-full object-cover">
                                        </div>
                                        <span class="font-medium text-ink">{{ $banner->title ?? '—' }}</span>
                                    </div>
                                </td>
                                <td><x-admin.badge color="gold">{{ $banner->type->label() }}</x-admin.badge></td>
                                <td class="text-xs text-ink/50">
                                    @if ($banner->starts_at || $banner->ends_at)
                                        {{ $banner->starts_at?->format('d M') ?? 'Now' }} &rarr; {{ $banner->ends_at?->format('d M Y') ?? 'Ongoing' }}
                                    @else
                                        Always on
                                    @endif
                                </td>
                                <td>
                                    <x-admin.badge :color="$banner->status->value === 'active' ? 'green' : 'gray'">
                                        {{ ucfirst($banner->status->value) }}
                                    </x-admin.badge>
                                </td>
                                <td>
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('admin.banners.edit', $banner) }}" class="text-ink/50 hover:text-ink" title="Edit">
                                            <i class="fa-solid fa-pen"></i>
                                        </a>
                                        <x-admin.delete-form :action="route('admin.banners.destroy', $banner)" confirm-title="Delete this banner?" />
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $banners->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
