@extends('admin.layout')

@section('title', 'ویرایش آگهی')

@section('admin')
<div class="max-w-xl mx-auto">
    <a href="{{ route('admin.ads.index') }}" class="text-sm text-slate-500 hover:text-brand transition-colors">→ بازگشت به لیست</a>

    <div class="mt-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
        <h2 class="font-bold text-slate-800 mb-5">ویرایش آگهی</h2>

        <div class="flex gap-5">
            {{-- پیش‌نمایش کاور فعلی --}}
            <div class="w-28 shrink-0">
                <img src="{{ $ad->image_url }}" alt="{{ $ad->title }}" class="w-28 rounded-xl border border-slate-200 object-cover aspect-[4/5]">
                <p class="text-xs text-slate-400 mt-1 text-center">کاور فعلی</p>
            </div>

            <form action="{{ route('admin.ads.update', $ad) }}" method="POST" enctype="multipart/form-data" class="flex-1 space-y-4">
                @csrf
                @method('PUT')

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">عنوان آگهی</label>
                    <input type="text" name="title" value="{{ old('title', $ad->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">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-600 mb-1">لینک آگهی (URL مقصد)</label>
                    <input type="url" name="link" value="{{ old('link', $ad->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">
                </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', $ad->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', $ad->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', $ad->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/*"
                           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">اگر خالی بماند، همان کاور قبلی حفظ می‌شود.</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', $ad->sort_order) }}" 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">
                </div>

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

                <div class="flex gap-3 pt-2">
                    <button type="submit"
                            class="flex-1 bg-brand hover:bg-brand-700 text-white font-bold py-2.5 rounded-xl transition-colors shadow-sm shadow-brand/30">
                        ذخیره تغییرات
                    </button>
                    <a href="{{ route('admin.ads.index') }}"
                       class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 hover:bg-slate-50 transition-colors text-sm font-medium flex items-center">
                        انصراف
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection