@extends('admin.layout')

@section('title', $banner ? 'Modifier la bannière' : 'Nouvelle bannière')
@section('header', $banner ? 'Modifier la bannière' : 'Nouvelle bannière')

@section('content')
<nav class="mb-6">
    <a href="{{ route('admin.banners.index') }}" class="text-slate-500 hover:text-slate-900 text-sm">← Bannières</a>
</nav>

<form method="POST" action="{{ $banner ? route('admin.banners.update', $banner) : route('admin.banners.store') }}" class="max-w-2xl space-y-6">
    @csrf
    @if($banner) @method('PUT') @endif

    <div class="bg-white rounded-2xl border border-slate-200 p-6 space-y-6">
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Nom (interne)</label>
            <input type="text" name="name" value="{{ old('name', $banner?->name) }}" required placeholder="Ex: Promo Noël" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            @error('name')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Type</label>
                <select name="type" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    <option value="bar" {{ old('type', $banner?->type) === 'bar' ? 'selected' : '' }}>Bandeau</option>
                    <option value="popup" {{ old('type', $banner?->type) === 'popup' ? 'selected' : '' }}>Pop-up</option>
                    <option value="alert" {{ old('type', $banner?->type) === 'alert' ? 'selected' : '' }}>Alerte urgente</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Position</label>
                <select name="position" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    <option value="top" {{ old('position', $banner?->position) === 'top' ? 'selected' : '' }}>Haut de page</option>
                    <option value="bottom" {{ old('position', $banner?->position) === 'bottom' ? 'selected' : '' }}>Bas de page</option>
                    <option value="floating" {{ old('position', $banner?->position) === 'floating' ? 'selected' : '' }}>Flottant (coin)</option>
                </select>
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Contenu (texte affiché)</label>
            <textarea name="content" rows="3" placeholder="Ex: -20% sur toute la boutique jusqu'au 31 décembre !" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">{{ old('content', $banner?->content) }}</textarea>
            @error('content')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">URL du lien (optionnel)</label>
                <input type="url" name="link_url" value="{{ old('link_url', $banner?->link_url) }}" placeholder="https://..." class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Texte du bouton</label>
                <input type="text" name="link_text" value="{{ old('link_text', $banner?->link_text) }}" placeholder="Voir l'offre" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Image (optionnel)</label>
            <x-admin.image-input name="image" :value="old('image', $banner?->image)" placeholder="URL ou cliquer pour uploader" input-class="w-full border border-slate-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" />
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Couleur de fond</label>
                <input type="text" name="background_color" value="{{ old('background_color', $banner?->background_color) }}" placeholder="#e84600 ou vide" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Couleur du texte</label>
                <input type="text" name="text_color" value="{{ old('text_color', $banner?->text_color) }}" placeholder="#ffffff ou vide" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Début d'affichage</label>
                <input type="date" name="starts_at" value="{{ old('starts_at', $banner?->starts_at?->format('Y-m-d')) }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Fin d'affichage</label>
                <input type="date" name="ends_at" value="{{ old('ends_at', $banner?->ends_at?->format('Y-m-d')) }}" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>

        <div class="flex items-center gap-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="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
                <span class="font-medium text-slate-700">Bannière active</span>
            </label>
            <div class="flex-1">
                <label class="block text-sm font-medium text-slate-700 mb-1">Ordre d'affichage</label>
                <input type="number" name="order" value="{{ old('order', $banner?->order ?? 0) }}" min="0" class="w-24 px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>
        </div>
    </div>

    <div class="flex gap-3">
        <button type="submit" class="px-6 py-2.5 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition">{{ $banner ? 'Enregistrer' : 'Créer' }}</button>
        <a href="{{ route('admin.banners.index') }}" class="px-6 py-2.5 border border-slate-200 rounded-xl text-slate-700 hover:bg-slate-50 transition">Annuler</a>
    </div>
</form>
@endsection
