{{-- Shared form for create / edit --}}
<div class="grid lg:grid-cols-3 gap-6">

    {{-- Left column --}}
    <div class="lg:col-span-2 space-y-5">

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-5">
            <h2 class="font-bold text-gray-700 text-sm uppercase tracking-wide border-b pb-3">Contenu</h2>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Titre <span class="text-red-400">*</span></label>
                    <input type="text" name="title" value="{{ old('title', $promotion->title ?? '') }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="Ex : Jusqu'à -30% sur les chargeurs" required>
                    @error('title')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Sous-titre</label>
                    <input type="text" name="subtitle" value="{{ old('subtitle', $promotion->subtitle ?? '') }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="Ex : Offres spéciales">
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">Description courte</label>
                <textarea name="description" rows="2"
                          class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                          placeholder="Une phrase d'accroche pour l'offre...">{{ old('description', $promotion->description ?? '') }}</textarea>
            </div>

            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Texte remise</label>
                    <input type="text" name="discount_text" value="{{ old('discount_text', $promotion->discount_text ?? '') }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="Ex : -30%, 2+1 offert, PROMO">
                    <p class="text-xs text-gray-400 mt-1">Affiché en badge rouge sur la bannière</p>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Libellé bouton</label>
                    <input type="text" name="button_label" value="{{ old('button_label', $promotion->button_label ?? "Profiter de l'offre") }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           placeholder="Profiter de l'offre">
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">Lien du bouton</label>
                <input type="url" name="link_url" value="{{ old('link_url', $promotion->link_url ?? '') }}"
                       class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                       placeholder="https://...">
                @error('link_url')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        {{-- Dates --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-4">
            <h2 class="font-bold text-gray-700 text-sm uppercase tracking-wide border-b pb-3">Période de validité</h2>
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date de début</label>
                    <input type="datetime-local" name="starts_at"
                           value="{{ old('starts_at', isset($promotion) && $promotion->starts_at ? $promotion->starts_at->format('Y-m-d\TH:i') : '') }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <p class="text-xs text-gray-400 mt-1">Laisser vide = dès maintenant</p>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date de fin</label>
                    <input type="datetime-local" name="ends_at"
                           value="{{ old('ends_at', isset($promotion) && $promotion->ends_at ? $promotion->ends_at->format('Y-m-d\TH:i') : '') }}"
                           class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <p class="text-xs text-gray-400 mt-1">Laisser vide = sans limite</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Right column --}}
    <div class="space-y-5">

        {{-- Image --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"
             x-data="{
                preview: '{{ isset($promotion) && $promotion->image_url ? $promotion->image_url : '' }}'
             }">
            <h2 class="font-bold text-gray-700 text-sm uppercase tracking-wide border-b pb-3 mb-4">Image de fond</h2>

            <div class="aspect-video rounded-xl overflow-hidden bg-gray-100 mb-3 flex items-center justify-center">
                <template x-if="preview">
                    <img :src="preview" class="w-full h-full object-cover">
                </template>
                <template x-if="!preview">
                    <div class="text-center text-gray-300">
                        <i class="fas fa-image text-4xl mb-2 block"></i>
                        <p class="text-xs">Aucune image</p>
                    </div>
                </template>
            </div>

            <label class="block w-full cursor-pointer border-2 border-dashed border-gray-200 hover:border-blue-400 rounded-xl px-4 py-3 text-center text-sm text-gray-500 transition-colors">
                <i class="fas fa-upload mr-2 text-blue-400"></i> Choisir une image
                <input type="file" name="image" accept="image/*" class="hidden"
                       @change="preview = URL.createObjectURL($event.target.files[0])">
            </label>
            <p class="text-xs text-gray-400 mt-2">JPG, PNG, WebP — max 4 Mo. Taille recommandée : 1400×500 px</p>
            @error('image')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
        </div>

        {{-- Options --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-4">
            <h2 class="font-bold text-gray-700 text-sm uppercase tracking-wide border-b pb-3">Options</h2>

            <label class="flex items-center gap-3 cursor-pointer">
                <div class="relative" x-data="{ checked: {{ old('is_active', ($promotion->is_active ?? true) ? 'true' : 'false') }} }">
                    <input type="hidden" name="is_active" :value="checked ? '1' : '0'">
                    <button type="button" @click="checked = !checked"
                            :class="checked ? 'bg-green-500' : 'bg-gray-300'"
                            class="w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none">
                        <span :class="checked ? 'translate-x-6' : 'translate-x-1'"
                              class="inline-block w-4 h-4 bg-white rounded-full shadow transition-transform duration-200"></span>
                    </button>
                </div>
                <span class="text-sm font-semibold text-gray-700">Offre active</span>
            </label>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">Ordre d'affichage</label>
                <input type="number" name="sort_order" min="0" max="99"
                       value="{{ old('sort_order', $promotion->sort_order ?? 0) }}"
                       class="w-24 border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <p class="text-xs text-gray-400 mt-1">0 = priorité haute</p>
            </div>
        </div>

        {{-- Submit --}}
        <button type="submit"
                class="w-full bg-gradient-to-r from-blue-700 to-blue-900 hover:from-blue-800 hover:to-blue-950 text-white font-bold py-3.5 rounded-2xl flex items-center justify-center gap-2 shadow-lg transition-all hover:-translate-y-0.5">
            <i class="fas fa-save"></i> Enregistrer
        </button>
        <a href="{{ route('admin.promotions.index') }}"
           class="block text-center text-sm text-gray-500 hover:text-gray-700 mt-2 transition-colors">
            Annuler
        </a>
    </div>
</div>