@extends('layouts.dashboard')

@section('title', isset($offer) ? 'تعديل العرض' : 'إضافة عرض')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="flex items-center gap-4 mb-6">
        <a href="{{ route('offers.index') }}" class="text-gray-500 hover:text-gray-700">→</a>
        <h1 class="text-2xl font-bold text-gray-800">🎁 {{ isset($offer) ? 'تعديل العرض' : 'إضافة عرض جديد' }}</h1>
    </div>

    <form action="{{ isset($offer) ? route('offers.update', $offer) : route('offers.store') }}" method="POST" enctype="multipart/form-data"
          class="bg-white rounded-xl shadow-sm p-6 space-y-6">
        @csrf
        @if(isset($offer)) @method('PUT') @endif

        <!-- Image Upload -->
        <div>
            <label class="block font-medium text-gray-700 mb-2">صورة العرض</label>
            @if(isset($offer) && $offer->image_url)
                <div class="mb-3">
                    <img src="{{ asset($offer->image_url) }}" alt="Offer Image" class="h-32 w-auto object-cover rounded shadow-sm">
                </div>
            @endif
            <input type="file" name="image" accept="image/*"
                   class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
            @error('image') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            <p class="text-xs text-gray-500 mt-2">اترك الحقل فارغاً إذا كنت لا تريد تغيير الصورة الحالية.</p>
        </div>

        <div>
            <label class="block font-medium text-gray-700 mb-2">عنوان العرض *</label>
            <input type="text" name="title" value="{{ old('title', $offer->title ?? '') }}" required
                   class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                   placeholder="مثال: عمرة رمضان 2025">
            @error('title') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block font-medium text-gray-700 mb-2">الوصف *</label>
            <textarea name="description" rows="4" required
                      class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                      placeholder="وصف تفصيلي للعرض...">{{ old('description', $offer->description ?? '') }}</textarea>
            @error('description') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700 mb-2">نوع العرض</label>
                <select name="type" class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">اختر النوع</option>
                    <option value="umrah" {{ old('type', $offer->type ?? '') === 'umrah' ? 'selected' : '' }}>🕌 عمرة</option>
                    <option value="hajj" {{ old('type', $offer->type ?? '') === 'hajj' ? 'selected' : '' }}>🕋 حج</option>
                    <option value="tourism" {{ old('type', $offer->type ?? '') === 'tourism' ? 'selected' : '' }}>✈️ سياحة</option>
                </select>
            </div>
            <div>
                <label class="block font-medium text-gray-700 mb-2">الوجهة</label>
                <input type="text" name="destination" value="{{ old('destination', $offer->destination ?? '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                       placeholder="مثال: مكة المكرمة">
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700 mb-2">السعر من (دج)</label>
                <input type="number" name="price_from" value="{{ old('price_from', $offer->price_from ?? '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                       placeholder="280000">
            </div>
            <div>
                <label class="block font-medium text-gray-700 mb-2">السعر إلى (دج)</label>
                <input type="number" name="price_to" value="{{ old('price_to', $offer->price_to ?? '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                       placeholder="450000">
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700 mb-2">تاريخ البداية</label>
                <input type="date" name="start_date" value="{{ old('start_date', isset($offer) ? $offer->start_date?->format('Y-m-d') : '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
            </div>
            <div>
                <label class="block font-medium text-gray-700 mb-2">تاريخ النهاية</label>
                <input type="date" name="end_date" value="{{ old('end_date', isset($offer) ? $offer->end_date?->format('Y-m-d') : '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
            </div>
        </div>

        <div class="flex items-center gap-3">
            <input type="checkbox" name="active" id="active" value="1" {{ old('active', $offer->active ?? true) ? 'checked' : '' }}
                   class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
            <label for="active" class="font-medium text-gray-700">العرض نشط</label>
        </div>

        <div class="flex gap-3 pt-4 border-t">
            <button type="submit" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-2 rounded-lg font-bold shadow hover:shadow-lg transition">
                💾 حفظ
            </button>
            <a href="{{ route('offers.index') }}" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200 transition">إلغاء</a>
        </div>
    </form>
</div>
@endsection