<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-4xl font-black text-slate-900 tracking-tight font-outfit">New Advertisement</h1>
                <p class="text-slate-400 font-medium mt-1 italic uppercase tracking-widest text-[10px]">Adding a new image-based promotion</p>
            </div>
            <a href="{{ route('admin.advertisements.index') }}" class="btn btn-secondary gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                Back to List
            </a>
        </div>
    </x-slot>

    <div class="max-w-4xl">
        <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-xl p-10">
            <form action="{{ route('admin.advertisements.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Basic Info -->
                    <div class="space-y-6">
                        <div>
                            <x-input-label for="title" :value="__('Ad Title')" class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2" />
                            <x-text-input id="title" name="title" type="text" class="w-full" :value="old('title')" required placeholder="Summer Sale 2026" />
                            <x-input-error :messages="$errors->get('title')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="target_url" :value="__('Target URL (Optional)')" class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2" />
                            <x-text-input id="target_url" name="target_url" type="url" class="w-full" :value="old('target_url')" placeholder="https://example.com/promo" />
                            <x-input-error :messages="$errors->get('target_url')" class="mt-2" />
                        </div>

                        <div class="flex items-center gap-3 p-4 bg-slate-50 rounded-2xl border border-slate-100">
                            <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active') ? 'checked' : '' }} class="w-5 h-5 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                            <x-input-label for="is_active" :value="__('Activate Immediately')" class="text-sm font-bold text-slate-700 cursor-pointer" />
                        </div>
                    </div>

                    <!-- Placement & File -->
                    <div class="space-y-6">
                        <div>
                            <x-input-label for="placement" :value="__('Placement Section')" class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2" />
                            <select name="placement" id="placement" class="w-full border-slate-200 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm font-bold text-sm text-slate-700">
                                <option value="library_top">Library Top</option>
                                <option value="library_bottom">Library Bottom</option>
                                <option value="note_top">Note Detail Top</option>
                                <option value="note_show_sidebar">Note Detail Sidebar</option>
                                <option value="dashboard_top">Dashboard Top</option>
                            </select>
                            <x-input-error :messages="$errors->get('placement')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="size" :value="__('Ad Size Class')" class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2" />
                            <select name="size" id="size" class="w-full border-slate-200 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm font-bold text-sm text-slate-700">
                                <option value="leaderboard">Leaderboard (728x90 style)</option>
                                <option value="rectangle">Medium Rectangle (300x250 style)</option>
                                <option value="responsive">Full Width Responsive</option>
                            </select>
                            <x-input-error :messages="$errors->get('size')" class="mt-2" />
                        </div>

                        <div>
                            <x-input-label for="image" :value="__('Advertisement Image')" class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2" />
                            <input type="file" name="image" id="image" required class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all cursor-pointer">
                            <p class="mt-2 text-[10px] text-slate-400 italic uppercase">Max size: 2MB. Format: JPG, PNG, WEBP, GIF</p>
                            <x-input-error :messages="$errors->get('image')" class="mt-2" />
                        </div>
                    </div>
                </div>

                <div class="pt-8 border-t border-slate-50 flex gap-4">
                    <button type="submit" class="btn btn-indigo flex-grow py-4 text-sm tracking-[0.2em]">
                        Create Advertisement
                    </button>
                    <a href="{{ route('admin.advertisements.index') }}" class="btn btn-secondary px-8 py-4 text-sm tracking-[0.2em]">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>
