@extends('admin.layout')

@section('title', 'Homepage Banners')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
    
    <!-- Add Banner Form (4 cols) -->
    <div class="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
        <h3 class="font-extrabold text-slate-900 text-sm border-b border-slate-100 pb-3">Upload Banner</h3>

        <form action="{{ route('admin.sliders.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
            @csrf

            <div>
                <label class="block font-bold text-slate-700 mb-1">Banner Title</label>
                <input type="text" name="title" placeholder="e.g. Pure Botanical Wellness" class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
            </div>

            <div>
                <label class="block font-bold text-slate-700 mb-1">Banner Image (1920x600px) *</label>
                <input type="file" name="banner" required class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-slate-600 file:mr-4 file:py-1.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
            </div>

            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl transition-all shadow-xs">
                Upload Banner
            </button>
        </form>
    </div>

    <!-- Active Banners Grid (8 cols) -->
    <div class="lg:col-span-8 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-4">
        <h3 class="font-extrabold text-slate-900 text-sm border-b border-slate-100 pb-3">Active Homepage Sliders</h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @forelse($sliders as $slider)
                <div class="rounded-2xl border border-slate-200 overflow-hidden bg-slate-50 relative group">
                    <div class="h-44 bg-slate-100 relative overflow-hidden flex items-center justify-center">
                        <img src="{{ banner_image_url($slider->image ?? $slider->banner) }}" alt="Slider Banner" class="w-full h-full object-cover" onerror="this.onerror=null;this.src='{{ asset('img/slider/1.jpg') }}';">
                    </div>
                    <div class="p-3 flex items-center justify-between bg-white text-xs">
                        <span class="font-bold text-slate-900 truncate">{{ $slider->name ?? $slider->title ?? 'Hero Slide' }}</span>
                        <a href="{{ route('admin.sliders.delete', ['id' => $slider->id]) }}" onclick="return confirm('Delete this banner?');" class="text-red-600 hover:text-red-800 font-bold">Delete</a>
                    </div>
                </div>
            @empty
                <p class="text-xs text-slate-400 py-6 text-center col-span-2">No custom banners uploaded.</p>
            @endforelse
        </div>
    </div>

</div>
@endsection