@extends('layouts.app')

@section('title', 'لوحة القبولات')

@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-50"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">APPLICATIONS</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">لوحة القبولات</h1>
            <p class="text-white/70 text-sm mt-1">نظرة شاملة على جميع التقديمات</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-5 mb-6">
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-secondary-600"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">إجمالي الطلاب</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $totalStudents }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-secondary-500/10 flex items-center justify-center text-lg shrink-0">📊</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-accent-500"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">إجمالي التقديمات</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $totalApplications }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-accent-500/10 flex items-center justify-center text-lg shrink-0">📋</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-amber-500"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">مستندات ناقصة</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $pendingDocs }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center text-lg shrink-0">📎</div>
        </div>
    </div>
    <div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm relative overflow-hidden">
        <div class="absolute top-0 left-0 right-0 h-1 bg-green-500"></div>
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-semibold text-muted tracking-wide">مقبولة</p>
                <p class="text-2xl font-display font-extrabold text-primary-900 mt-0.5">{{ $accepted }}</p>
            </div>
            <div class="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center text-lg shrink-0">✅</div>
        </div>
    </div>
</div>

<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h2 class="font-display font-bold text-primary-900 text-base flex items-center gap-2"><span class="w-6 h-6 rounded-md bg-accent-500/10 flex items-center justify-center text-xs">📄</span> آخر التقديمات</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">الطالب</th>
                    <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">البريد</th>
                    <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">الهاتف</th>
                    <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">الحالة</th>
                    <th class="px-5 py-3.5 text-xs font-semibold text-muted tracking-wide">التاريخ</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($recentApplications as $app)
                    <tr class="hover:bg-surface/50 transition-colors">
                        <td class="px-5 py-4 font-semibold text-primary-900">{{ $app->student_name ?? $app->name ?? '—' }}</td>
                        <td class="px-5 py-4 text-muted">{{ $app->email ?? '—' }}</td>
                        <td class="px-5 py-4 text-muted">{{ $app->phone ?? '—' }}</td>
                        <td class="px-5 py-4">
                            @php
                                $statusColors = [
                                    'not_started' => 'bg-gray-50 text-gray-600 border-gray-100',
                                    'docs_missing' => 'bg-amber-50 text-amber-600 border-amber-100',
                                    'submitted' => 'bg-blue-50 text-blue-600 border-blue-100',
                                    'conditional_acceptance' => 'bg-purple-50 text-purple-600 border-purple-100',
                                    'final_acceptance' => 'bg-green-50 text-green-600 border-green-100',
                                    'rejected' => 'bg-red-50 text-red-600 border-red-100',
                                ];
                                $color = $statusColors[$app->status] ?? 'bg-gray-50 text-gray-600 border-gray-100';
                            @endphp
                            <span class="text-xs px-2.5 py-1 rounded-full font-medium {{ $color }}">{{ $app->status_label ?? $app->status }}</span>
                        </td>
                        <td class="px-5 py-4 text-muted">{{ \Carbon\Carbon::parse($app->created_at)->format('Y-m-d') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-5 py-12 text-center">
                            <div class="text-4xl mb-3">📂</div>
                            <p class="text-muted text-sm font-semibold">لا توجد تقديمات حديثة</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection