@extends('admin.layout')

@section('title', 'إضافة باقة جديدة')
@section('header', 'إنشاء باقة اشتراك جديدة')

@section('content')
<div class="max-w-5xl mx-auto animate-fade-in">
    <form action="{{ route('admin.plans.store') }}" method="POST" class="space-y-6">
        @csrf
        
        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></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') }}" 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" placeholder="مثلاً: الباقة الاحترافية" 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') }}" 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" placeholder="pro-plan" 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', 0) }}" 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', 1) }}" 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">
                        @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 }}" 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">
                                الحد الأقصى للطلاب
                                <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">(0 = غير محدود)</span>
                            </label>
                            <input type="number" name="max_students" value="{{ old('max_students', 0) }}" 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">
                                الحد الأقصى للمعلمين
                                <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">(0 = غير محدود)</span>
                            </label>
                            <input type="number" name="max_teachers" value="{{ old('max_teachers', 0) }}" 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', true) ? '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