@extends('layouts.admin')
@section('title', isset($banner) ? 'Edit Banner' : 'Create Banner')
@section('content')
<div class="max-w-4xl">
    <div class="admin-card overflow-hidden">
        <div class="border-b border-gold/10 px-6 py-4">
            <h3 class="font-playfair text-cream text-lg font-semibold">{{ isset($banner) ? 'Edit Banner Details' : 'Create New Banner' }}</h3>
        </div>

        <form action="{{ isset($banner) ? route('admin.banners.update', $banner) : route('admin.banners.store') }}" 
              method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
            @csrf
            @if(isset($banner)) @method('PUT') @endif

            <div class="grid md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="form-label">Banner Position</label>
                    <select name="position" class="form-input">
                        <option value="hero" {{ (isset($banner) && $banner->position == 'hero') ? 'selected' : '' }}>Homepage Hero (Main Slider)</option>
                        <option value="middle" {{ (isset($banner) && $banner->position == 'middle') ? 'selected' : '' }}>Middle Section</option>
                        <option value="footer" {{ (isset($banner) && $banner->position == 'footer') ? 'selected' : '' }}>Footer Promotion</option>
                    </select>
                </div>

                <div>
                    <label class="form-label">Main Title</label>
                    <input type="text" name="title" value="{{ old('title', $banner->title ?? '') }}" class="form-input" placeholder="e.g. Authentic Bengali Cuisine">
                </div>

                <div>
                    <label class="form-label">Subtitle / Tagline</label>
                    <input type="text" name="subtitle" value="{{ old('subtitle', $banner->subtitle ?? '') }}" class="form-input" placeholder="e.g. Experience the Taste of Tradition">
                </div>

                <div class="md:col-span-2">
                    <label class="form-label">Short Description</label>
                    <textarea name="description" rows="2" class="form-input resize-none">{{ old('description', $banner->description ?? '') }}</textarea>
                </div>

                <div>
                    <label class="form-label">Main Image (Desktop - 1920x1080 recommended)</label>
                    <input type="file" name="image" class="form-input text-xs">
                    @if(isset($banner) && $banner->image)
                        <img src="{{ $banner->image_url }}" class="h-20 mt-2 rounded border border-gold/20">
                    @endif
                </div>

                <div>
                    <label class="form-label">Mobile Image (Vertical - Optional)</label>
                    <input type="file" name="mobile_image" class="form-input text-xs">
                </div>

                <div>
                    <label class="form-label">CTA Button Text</label>
                    <input type="text" name="cta_text" value="{{ old('cta_text', $banner->cta_text ?? 'Explore Menu') }}" class="form-input">
                </div>

                <div>
                    <label class="form-label">CTA Button URL</label>
                    <input type="text" name="cta_url" value="{{ old('cta_url', $banner->cta_url ?? '/menu') }}" class="form-input">
                </div>

                <div>
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $banner->sort_order ?? 0) }}" class="form-input">
                </div>

                <div class="flex items-center gap-6 pt-4">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $banner->is_active ?? true) ? 'checked' : '' }} class="w-4 h-4 accent-gold">
                        <span class="text-cream/70 text-sm">Visible on Website</span>
                    </label>
                </div>
            </div>

            <div class="pt-6 border-t border-gold/10 flex gap-4">
                <button type="submit" class="btn-primary px-10 py-3">
                    <i class="fas fa-save mr-2"></i> {{ isset($banner) ? 'Update Banner' : 'Publish Banner' }}
                </button>
                <a href="{{ route('admin.banners.index') }}" class="text-cream/40 hover:text-cream flex items-center px-4 transition-colors">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection