@extends('layouts.dashboard')

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

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

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

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700 mb-2">عنوان الرحلة *</label>
                <input type="text" name="title" value="{{ old('title', $trip->title ?? '') }}" required
                       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="text" name="destination" value="{{ old('destination', $trip->destination ?? '') }}" required
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
            </div>
        </div>

        <div class="grid grid-cols-3 gap-4">
            <div>
                <label class="block font-medium text-gray-700 mb-2">المدة (أيام) *</label>
                <input type="number" name="duration_days" value="{{ old('duration_days', $trip->duration_days ?? '') }}" required min="1"
                       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="number" name="price" value="{{ old('price', $trip->price ?? '') }}" required min="0"
                       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="number" name="available_seats" value="{{ old('available_seats', $trip->available_seats ?? '') }}" required min="0"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
            </div>
        </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', $trip->type ?? '') === 'umrah' ? 'selected' : '' }}>🕌 عمرة</option>
                    <option value="hajj" {{ old('type', $trip->type ?? '') === 'hajj' ? 'selected' : '' }}>🕋 حج</option>
                    <option value="tourism" {{ old('type', $trip->type ?? '') === 'tourism' ? 'selected' : '' }}>✈️ سياحة</option>
                </select>
            </div>
            <div>
                <label class="block font-medium text-gray-700 mb-2">تصنيف الفندق</label>
                <select name="hotel_rating" class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                    <option value="">اختر التصنيف</option>
                    @for($i = 1; $i <= 5; $i++)
                        <option value="{{ $i }}" {{ old('hotel_rating', $trip->hotel_rating ?? '') == $i ? 'selected' : '' }}>
                            {{ str_repeat('⭐', $i) }}
                        </option>
                    @endfor
                </select>
            </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="departure_date" value="{{ old('departure_date', isset($trip) ? $trip->departure_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="text" name="departure_city" value="{{ old('departure_city', $trip->departure_city ?? '') }}"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                       placeholder="مثال: الجزائر العاصمة">
            </div>
        </div>

        <div>
            <label class="block font-medium text-gray-700 mb-2">ما يشمله العرض</label>
            <textarea name="includes" rows="3"
                      class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                      placeholder="تذكرة طيران - إقامة - نقل...">{{ old('includes', $trip->includes ?? '') }}</textarea>
        </div>

        <div class="flex items-center gap-3">
            <input type="checkbox" name="active" id="active" value="1" {{ old('active', $trip->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('trips.index') }}" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200 transition">إلغاء</a>
        </div>
    </form>
</div>
@endsection