@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">ADMISSION</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="overflow-x-auto pb-4">
    <div class="flex gap-4" style="min-width: max-content;">
        @foreach ($statuses as $status)
            @php
                $count = $statusCounts[$status] ?? 0;
                $applications = $applicationsByStatus[$status] ?? collect();
            @endphp
            <div class="flex-shrink-0 w-72 bg-white rounded-[16px] border border-gray-200 shadow-sm p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-display font-bold text-sm text-primary-900">{{ $statusLabels[$status] ?? $status }}</h3>
                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-accent-500/10 text-accent-600 text-xs font-bold">{{ $count }}</span>
                </div>
                <div class="space-y-2.5 min-h-[200px]">
                    @forelse ($applications as $app)
                        <div class="bg-surface rounded-[12px] p-3.5 shadow-sm border border-gray-100 hover:border-accent-500/30 hover:shadow-md transition-all">
                            <div class="flex items-start justify-between gap-2">
                                <div>
                                    <p class="font-semibold text-sm text-primary-900">{{ $app->student_name ?? $app->name ?? '—' }}</p>
                                    @if ($app->phone)
                                        <p class="text-xs text-muted mt-0.5">{{ $app->phone }}</p>
                                    @endif
                                    @if ($app->email)
                                        <p class="text-xs text-muted">{{ $app->email }}</p>
                                    @endif
                                </div>
                            </div>
                            @if ($app->university)
                                <p class="text-xs text-secondary-600 mt-2 font-semibold">{{ $app->university }} — {{ $app->major ?? '' }}</p>
                            @endif
                            @if ($app->passport_file ?? false)
                                <a href="#" class="text-xs text-accent-500 font-semibold">🪪 جواز السفر</a>
                            @endif
                            <p class="text-[10px] text-muted mt-2">{{ \Carbon\Carbon::parse($app->created_at)->format('Y-m-d') }}</p>
                        </div>
                    @empty
                        <p class="text-xs text-muted text-center py-6">لا توجد عناصر</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection