@extends('admin.layout')

@section('title', 'تعديل الباقة')
@section('header', 'تعديل باقة: ' . $plan->name)

@section('content')
<div class="max-w-5xl mx-auto animate-fade-in">
    <form action="{{ route('admin.plans.update', $plan->id) }}" method="POST" class="space-y-6">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Main Setup --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Basic Information Card --}}
                <div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </div>
                        <h4 class="text-xl font-black text-gray-900">تعديل معلومات الباقة</h4>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700">اسم الباقة (العرض)</label>
                            <input type="text" name="name" value="{{ old('name', $plan->name) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 font-bold transition-all duration-200" required>
                            @error('name') <span class="text-red-500 text-xs font-bold">{{ $message }}</span> @enderror
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700">الاسم البرمجي (Slug)</label>
                            <input type="text" name="slug" value="{{ old('slug', $plan->slug) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 font-bold transition-all duration-200" required>
                            @error('slug') <span class="text-red-500 text-xs font-bold">{{ $message }}</span> @enderror
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700">السعر الشهري ($)</label>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-black">$</span>
                                <input type="number" step="0.01" name="price" value="{{ old('price', $plan->price) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 pl-8 font-bold transition-all duration-200" required>
                            </div>
                            @error('price') <span class="text-red-500 text-xs font-bold">{{ $message }}</span> @enderror
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700">مدة الاشتراك (أشهر)</label>
                            <input type="number" name="duration_months" value="{{ old('duration_months', $plan->duration_months) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 font-bold transition-all duration-200" required>
                            @error('duration_months') <span class="text-red-500 text-xs font-bold">{{ $message }}</span> @enderror
                        </div>
                    </div>
                </div>

                {{-- Features Selection Card --}}
                <div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-xl bg-emerald-50 flex items-center justify-center text-emerald-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <h4 class="text-xl font-black text-gray-900">الميزات النشطة</h4>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @php $currentFeatures = is_array($plan->features) ? $plan->features : []; @endphp
                        @foreach($availableFeatures as $slug => $label)
                            <label class="relative flex items-center p-4 rounded-2xl bg-gray-50 hover:bg-indigo-50 border-2 border-transparent hover:border-indigo-200 cursor-pointer transition-all duration-200 group">
                                <input type="checkbox" name="features[]" value="{{ $slug }}" {{ in_array($slug, $currentFeatures) ? 'checked' : '' }} class="w-6 h-6 text-indigo-600 border-gray-300 rounded-lg focus:ring-indigo-500 transition-all duration-200">
                                <span class="mr-4 text-sm font-bold text-gray-700 group-hover:text-indigo-900 leading-tight">
                                    {{ $label }}
                                </span>
                            </label>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Sidebar Layout / Limits --}}
            <div class="space-y-6">
                {{-- Limits Card --}}
                <div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm space-y-6">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-10 h-10 rounded-xl bg-orange-50 flex items-center justify-center text-orange-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        </div>
                        <h4 class="text-xl font-black text-gray-900">حدود الاستخدام</h4>
                    </div>

                    <div class="space-y-6">
                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700 flex justify-between">
                                الحد الأقصى للطلاب
                            </label>
                            <input type="number" name="max_students" value="{{ old('max_students', $plan->max_students) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 font-bold transition-all duration-200">
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-black text-gray-700 flex justify-between">
                                الحد الأقصى للمعلمين
                            </label>
                            <input type="number" name="max_teachers" value="{{ old('max_teachers', $plan->max_teachers) }}" class="w-full bg-gray-50 border-transparent focus:bg-white focus:ring-2 focus:ring-indigo-500 rounded-2xl p-3.5 font-bold transition-all duration-200">
                        </div>

                        <div class="pt-4 border-t border-gray-50">
                            <label class="flex items-center gap-3 cursor-pointer group">
                                <div class="relative">
                                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $plan->is_active) ? 'checked' : '' }} class="sr-only peer">
                                    <div class="w-12 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                </div>
                                <span class="text-sm font-black text-gray-700 group-hover:text-indigo-600 transition-colors">الباقة متاحة حالياً للمدارس</span>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="flex flex-col gap-3">
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-black py-4 rounded-2xl shadow-xl shadow-indigo-100 transition-all duration-300 transform hover:-translate-y-1">
                        تحديث وحفظ التغييرات
                    </button>
                    <a href="{{ route('admin.plans.index') }}" class="w-full bg-white border border-gray-200 hover:bg-gray-50 text-gray-600 font-black py-4 rounded-2xl text-center transition-all">
                        إلغاء والعودة
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection