@extends('admin.layout')

@section('title', 'مدیریت آگهی‌ها')

@section('admin')
<div class="grid lg:grid-cols-3 gap-6">

    {{-- ============ فرم آپلود آگهی جدید ============ --}}
    <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 sticky top-6">
            <h2 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
                <span class="w-6 h-6 rounded-lg bg-brand text-white flex items-center justify-center text-sm">+</span>
                افزودن آگهی جدید
            </h2>
            <form action="{{ route('admin.ads.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">عنوان آگهی</label>
                    <input type="text" name="title" value="{{ old('title') }}" required
                           class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand"
                           placeholder="مثلاً: استخدام حسابدار | تهران">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">لینک آگهی (URL مقصد)</label>
                    <input type="url" name="link" value="{{ old('link') }}" dir="ltr"
                           class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand"
                           placeholder="https://example.com/ad/123">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">متن دکمه اصلی</label>
                    <input type="text" name="button_text" value="{{ old('button_text') }}"
                           class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand"
                           placeholder="مشاهده آگهی (پیش‌فرض)">
                </div>

                <div class="border-t border-slate-100 pt-3">
                    <p class="text-xs font-semibold text-slate-500 mb-2">دکمه دوم (اختیاری)</p>
                    <div class="space-y-2">
                        <input type="text" name="second_button_text" value="{{ old('second_button_text') }}"
                               class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand"
                               placeholder="متن دکمه دوم (مثلاً: ثبت‌نام آزمون)">
                        <input type="url" name="second_link" value="{{ old('second_link') }}" dir="ltr"
                               class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand"
                               placeholder="https://example.com/register">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">کاور آگهی</label>
                    <input type="file" name="image" accept="image/*" required
                           class="w-full text-sm text-slate-500 file:ml-3 file:rounded-lg file:border-0 file:bg-brand file:px-4 file:py-2 file:text-white file:font-medium hover:file:bg-brand-700 file:cursor-pointer cursor-pointer">
                    <p class="text-xs text-slate-400 mt-1">فرمت: JPG, PNG, WEBP — حداکثر ۴ مگابایت — نسبت پیشنهادی ۴:۵</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">ترتیب نمایش</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" min="0"
                           class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand">
                    <p class="text-xs text-slate-400 mt-1">عدد کوچک‌تر = نمایش بالاتر</p>
                </div>

                <label class="flex items-center gap-2 text-sm text-slate-600">
                    <input type="checkbox" name="is_published" value="1" checked class="rounded text-brand focus:ring-brand">
                    منتشر شود
                </label>

                <button type="submit"
                        class="w-full bg-brand hover:bg-brand-700 text-white font-bold py-2.5 rounded-xl transition-colors shadow-sm shadow-brand/30">
                    ذخیره آگهی
                </button>
            </form>
        </div>
    </div>

    {{-- ============ لیست آگهی‌ها ============ --}}
    <div class="lg:col-span-2">
        <div class="flex items-center justify-between mb-4">
            <h2 class="font-bold text-slate-800">آگهی‌های موجود</h2>
            <span class="text-sm text-slate-400">{{ $ads->count() }} آگهی</span>
        </div>

        @if($ads->isEmpty())
            <div class="bg-white rounded-2xl border border-dashed border-slate-300 p-12 text-center text-slate-400">
                هنوز آگهی‌ای اضافه نشده است. از فرم کنار شروع کن.
            </div>
        @else
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                @foreach($ads as $ad)
                    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
                        <div class="relative aspect-[4/5] overflow-hidden bg-slate-100">
                            <img src="{{ $ad->image_url }}" alt="{{ $ad->title }}" class="w-full h-full object-cover">
                            @unless($ad->is_published)
                                <span class="absolute top-2 right-2 text-[11px] font-bold px-2 py-0.5 rounded-full bg-slate-700 text-white">پیش‌نویس</span>
                            @endunless
                        </div>
                        <div class="p-3 flex flex-col gap-2 flex-1">
                            <h3 class="text-sm font-semibold text-slate-800 line-clamp-2 flex-1">{{ $ad->title }}</h3>
                            <div class="flex items-center gap-2">
                                <a href="{{ route('admin.ads.edit', $ad) }}"
                                   class="flex-1 text-center text-xs font-medium py-1.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-brand hover:border-brand hover:text-white transition-colors">
                                    ویرایش
                                </a>
                                <form action="{{ route('admin.ads.destroy', $ad) }}" method="POST"
                                      onsubmit="return confirm('این آگهی حذف شود؟');" class="flex-1">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="w-full text-xs font-medium py-1.5 rounded-lg border border-red-200 text-red-600 hover:bg-red-500 hover:border-red-500 hover:text-white transition-colors">
                                        حذف
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

</div>
@endsection