@extends('admin.layout')

@section('title', 'إدارة باقات الاشتراك')
@section('header', 'إدارة باقات الاشتراك والميزات')

@section('content')
<div class="space-y-8 animate-fade-in">
    {{-- Header Section --}}
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h3 class="text-2xl font-black text-gray-900">خطط الاشتراك المتاحة</h3>
            <p class="text-gray-500 font-medium">تحكم في الميزات والحدود المتاحة لكل باقة</p>
        </div>
        <a href="{{ route('admin.plans.create') }}" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-2xl shadow-xl shadow-indigo-100 transition-all duration-300 transform hover:-translate-y-1">
            <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 4v16m8-8H4"/></svg>
            إنشاء باقة جديدة
        </a>
    </div>

    {{-- Plans Grid --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach($plans as $plan)
            <div class="group bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-2xl hover:border-indigo-100 transition-all duration-500 overflow-hidden relative">
                @if(!$plan->is_active)
                    <div class="absolute inset-0 bg-gray-50/50 backdrop-blur-[1px] z-10 flex items-center justify-center">
                        <span class="bg-gray-800 text-white text-xs font-black px-4 py-1.5 rounded-full shadow-lg transform -rotate-12">معطلة</span>
                    </div>
                @endif

                {{-- Card Header --}}
                <div class="p-6 pb-4">
                    <div class="flex justify-between items-start mb-4">
                        <div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                            @if($plan->slug === 'ultimate')
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.9L10 .3l7.834 4.6a1 1 0 01.5 1.15l-1.5 5.5a1 1 0 01-.8.75L10 14.3l-5.834-2a1 1 0 01-.8-.75l-1.5-5.5a1 1 0 01.5-1.15zM4.5 6.136V10.73l5.5 1.886 5.5-1.886V6.136L10 2.899 4.5 6.136z" clip-rule="evenodd"/></svg>
                            @elseif($plan->slug === 'pro')
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            @else
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"/></svg>
                            @endif
                        </div>
                        <span class="text-xs font-black text-gray-400 uppercase tracking-widest">{{ $plan->slug }}</span>
                    </div>
                    <h4 class="text-xl font-black text-gray-900">{{ $plan->name }}</h4>
                    <p class="text-3xl font-black text-indigo-600 mt-2">
                        ${{ number_format($plan->price, 0) }}
                        <span class="text-xs text-gray-400 font-bold">/ {{ $plan->duration_months }} شهر</span>
                    </p>
                </div>

                {{-- Card Body: Limits --}}
                <div class="px-6 py-4 bg-gray-50/50 border-y border-gray-100 space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-gray-500 flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                            الطلاب المسموحين
                        </span>
                        <span class="text-sm font-black text-gray-900">{{ $plan->max_students == 0 ? '♾️ غير محدود' : number_format($plan->max_students) }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs font-bold text-gray-500 flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            المعلمين المسموحين
                        </span>
                        <span class="text-sm font-black text-gray-900">{{ $plan->max_teachers == 0 ? '♾️ غير محدود' : number_format($plan->max_teachers) }}</span>
                    </div>
                </div>

                {{-- Card Body: Features --}}
                <div class="p-6 space-y-2">
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-3">الميزات المدرجة</p>
                    @php 
                        $features = is_array($plan->features) ? $plan->features : []; 
                    @endphp
                    @forelse($features as $feature)
                        <div class="flex items-center gap-2 text-xs font-bold text-gray-600">
                            <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                            {{ str_replace(['-', '_'], ' ', ucfirst($feature)) }}
                        </div>
                    @empty
                        <p class="text-xs text-gray-400 italic">لا توجد ميزات خاصة</p>
                    @endforelse
                </div>

                {{-- Action Buttons --}}
                <div class="p-4 bg-gray-50/30 border-t border-gray-100 flex gap-2">
                    <a href="{{ route('admin.plans.edit', $plan->id) }}" class="flex-1 bg-white border border-gray-200 hover:border-indigo-600 hover:text-indigo-600 text-gray-600 font-bold py-2.5 rounded-xl text-xs text-center transition-all duration-300">
                        تعديل الباقة
                    </a>
                    <form action="{{ route('admin.plans.destroy', $plan->id) }}" method="POST" class="inline" onsubmit="return confirm('هل أنت متأكد من حذف هذه الباقة؟');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-10 h-10 bg-white border border-gray-200 hover:border-red-600 hover:text-red-600 text-gray-400 rounded-xl flex items-center justify-center transition-all duration-300">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-4v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection