<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Editar Promoción') }}: {{ $promotion->title }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 dark:border-gray-700">
                <form action="{{ route('promotions.update', $promotion) }}" method="POST" enctype="multipart/form-data" class="p-8">
                    @csrf
                    @method('PUT')

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Título -->
                        <div class="md:col-span-2">
                            <x-input-label for="title" :value="__('Título de la Promoción')" />
                            <x-text-input id="title" name="title" type="text" class="mt-1 block w-full text-lg font-bold" :value="old('title', $promotion->title)" required />
                            <x-input-error :messages="$errors->get('title')" class="mt-2" />
                        </div>

                        <!-- Descripción -->
                        <div class="md:col-span-2">
                            <x-input-label for="description" :value="__('Descripción o Subtítulo')" />
                            <textarea id="description" name="description" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm" rows="2">{{ old('description', $promotion->description) }}</textarea>
                            <x-input-error :messages="$errors->get('description')" class="mt-2" />
                        </div>

                        <!-- Badge Text -->
                        <div>
                            <x-input-label for="badge_text" :value="__('Texto del Badge')" />
                            <x-text-input id="badge_text" name="badge_text" type="text" class="mt-1 block w-full" :value="old('badge_text', $promotion->badge_text)" />
                            <x-input-error :messages="$errors->get('badge_text')" class="mt-2" />
                        </div>

                        <!-- Badge Color -->
                        <div>
                            <x-input-label for="badge_color" :value="__('Color del Badge')" />
                            <select id="badge_color" name="badge_color" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm">
                                <option value="indigo" {{ old('badge_color', $promotion->badge_color) == 'indigo' ? 'selected' : '' }}>Indigo</option>
                                <option value="red" {{ old('badge_color', $promotion->badge_color) == 'red' ? 'selected' : '' }}>Rojo</option>
                                <option value="amber" {{ old('badge_color', $promotion->badge_color) == 'amber' ? 'selected' : '' }}>Ámbar</option>
                                <option value="green" {{ old('badge_color', $promotion->badge_color) == 'green' ? 'selected' : '' }}>Verde</option>
                                <option value="emerald" {{ old('badge_color', $promotion->badge_color) == 'emerald' ? 'selected' : '' }}>Esmeralda</option>
                                <option value="blue" {{ old('badge_color', $promotion->badge_color) == 'blue' ? 'selected' : '' }}>Azul</option>
                                <option value="purple" {{ old('badge_color', $promotion->badge_color) == 'purple' ? 'selected' : '' }}>Púrpura</option>
                            </select>
                            <x-input-error :messages="$errors->get('badge_color')" class="mt-2" />
                        </div>

                        <!-- Imagen -->
                        <div class="md:col-span-2 bg-slate-50 dark:bg-gray-900/50 p-4 rounded-xl flex gap-6 items-center">
                            <div class="shrink-0">
                                @if($promotion->image)
                                    <img src="{{ asset('storage/' . $promotion->image) }}" class="h-24 w-40 object-cover rounded shadow" alt="Actual">
                                @else
                                    <div class="h-24 w-40 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center text-gray-400">Sin imagen</div>
                                @endif
                            </div>
                            <div class="flex-1">
                                <x-input-label for="image" :value="__('Cambiar Imagen (Banner)')" />
                                <input id="image" name="image" type="file" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" accept="image/*" />
                                <x-input-error :messages="$errors->get('image')" class="mt-2" />
                            </div>
                        </div>

                        <!-- Descuento -->
                        <div>
                            <x-input-label for="discount_percent" :value="__('% de Descuento')" />
                            <x-text-input id="discount_percent" name="discount_percent" type="number" class="mt-1 block w-full" :value="old('discount_percent', $promotion->discount_percent)" />
                            <x-input-error :messages="$errors->get('discount_percent')" class="mt-2" />
                        </div>

                        <!-- Starts At -->
                        <div>
                            <x-input-label for="starts_at" :value="__('Fecha de Inicio')" />
                            <x-text-input id="starts_at" name="starts_at" type="date" class="mt-1 block w-full" :value="old('starts_at', optional($promotion->starts_at)->format('Y-m-d'))" />
                            <x-input-error :messages="$errors->get('starts_at')" class="mt-2" />
                        </div>

                        <!-- Ends At -->
                        <div>
                            <x-input-label for="ends_at" :value="__('Fecha de Fin')" />
                            <x-text-input id="ends_at" name="ends_at" type="date" class="mt-1 block w-full" :value="old('ends_at', optional($promotion->ends_at)->format('Y-m-d'))" />
                            <x-input-error :messages="$errors->get('ends_at')" class="mt-2" />
                        </div>

                        <!-- Activa / Orden -->
                        <div class="flex items-center gap-6 md:col-span-2 bg-gray-50 dark:bg-gray-900/50 p-4 rounded-xl">
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_active" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" value="1" {{ old('is_active', $promotion->is_active) ? 'checked' : '' }}>
                                <span class="ms-2 text-sm font-bold text-gray-700 dark:text-gray-300">{{ __('Publicada') }}</span>
                            </label>

                            <div class="flex items-center gap-2">
                                <x-input-label for="sort_order" :value="__('Orden')" class="m-0" />
                                <x-text-input id="sort_order" name="sort_order" type="number" class="w-20 py-1" :value="old('sort_order', $promotion->sort_order)" />
                            </div>
                        </div>
                    </div>

                    <div class="mt-8 flex gap-3">
                        <x-primary-button>
                            {{ __('Guardar Cambios') }}
                        </x-primary-button>
                        <a href="{{ route('promotions.index') }}" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-500 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-300 uppercase tracking-widest shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-25 transition ease-in-out duration-150">
                            {{ __('Cancelar') }}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
