<x-layouts.admin title="Banners | Admin Suite" activePage="admin-banners">
<div class="max-w-5xl">
    <div class="flex justify-between items-end mb-10">
        <div>
            <h2 class="font-serif text-3xl text-on-surface">Banner Management</h2>
            <p class="text-on-surface-variant text-sm mt-1">Manage promotional banners displayed on the user dashboard.</p>
        </div>
        <a href="{{ route('admin.banners.create') }}" class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-3 rounded-md text-sm font-label font-medium flex items-center gap-2">
            <span class="material-symbols-outlined text-sm">add</span>
            New Banner
        </a>
    </div>

    @if($banners->isEmpty())
        <div class="bg-surface-container-lowest p-12 text-center">
            <span class="material-symbols-outlined text-4xl text-on-surface-variant mb-4">image</span>
            <p class="text-on-surface-variant">No banners created yet.</p>
        </div>
    @else
        <div class="space-y-4">
            @foreach($banners as $banner)
                <div class="bg-surface-container-lowest p-6 flex items-center gap-6">
                    <img src="{{ asset('storage/' . $banner->image_path) }}" alt="{{ $banner->title }}" class="w-32 h-20 object-cover rounded" />
                    <div class="flex-1">
                        <h3 class="font-label text-sm font-bold text-on-surface">{{ $banner->title }}</h3>
                        @if($banner->link)
                            <p class="text-xs text-on-surface-variant mt-1 truncate">{{ $banner->link }}</p>
                        @endif
                        <div class="flex items-center gap-2 mt-2">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $banner->is_active ? 'bg-secondary-container text-secondary' : 'bg-surface-container text-on-surface-variant' }}">
                                {{ $banner->is_active ? 'Active' : 'Inactive' }}
                            </span>
                            <span class="text-[10px] text-on-surface-variant">Order: {{ $banner->sort_order }}</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('admin.banners.edit', $banner) }}" class="text-primary hover:text-secondary transition-colors">
                            <span class="material-symbols-outlined text-xl">edit</span>
                        </a>
                        <form method="POST" action="{{ route('admin.banners.destroy', $banner) }}" onsubmit="return confirm('Delete this banner?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-on-surface-variant hover:text-error transition-colors">
                                <span class="material-symbols-outlined text-xl">delete</span>
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
</x-layouts.admin>
