@extends('layouts.admin')

@section('title', 'لوحة التحكم')
@section('page-title', 'لوحة المعلومات')

@section('content')
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">إجمالي التذاكر</p>
                    <h3 class="text-3xl font-bold text-navy-900 mt-1">{{ $stats['total_tickets'] }}</h3>
                </div>
                <div class="w-12 h-12 bg-navy-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-navy-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                    </svg>
                </div>
            </div>
            <div class="mt-4 flex items-center gap-4 text-sm">
                <span class="text-gray-500">VIP: {{ $stats['total_vip'] }}</span>
                <span class="text-gray-500">عادي: {{ $stats['total_normal'] }}</span>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">الحضور</p>
                    <h3 class="text-3xl font-bold text-green-600 mt-1">{{ $stats['attended'] }}</h3>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <div class="mt-4">
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-green-500 h-2 rounded-full" style="width: {{ $stats['attendance_percentage'] }}%"></div>
                </div>
                <p class="text-sm text-gray-500 mt-2">{{ $stats['attendance_percentage'] }}% من الإجمالي</p>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-500 text-sm">الغياب</p>
                    <h3 class="text-3xl font-bold text-red-600 mt-1">{{ $stats['not_attended'] }}</h3>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-gold-500 to-gold-600 rounded-xl shadow-sm p-6 text-navy-900">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-navy-900/70 text-sm">حضور VIP</p>
                    <h3 class="text-3xl font-bold mt-1">{{ $stats['vip_attended'] }}/{{ $stats['total_vip'] }}</h3>
                </div>
                <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-6">
        <!-- Event Info -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-bold text-navy-900 mb-4">معلومات الحفل</h3>
            <div class="space-y-4">
                <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                    <div class="w-10 h-10 bg-navy-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-navy-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">التاريخ</p>
                        <p class="font-medium text-navy-900">{{ \Carbon\Carbon::parse($eventInfo['event_date'])->locale('ar')->translatedFormat('l j F Y') }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                    <div class="w-10 h-10 bg-navy-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-navy-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">الموعد</p>
                        <p class="font-medium text-navy-900">{{ $eventInfo['event_time'] }} مساءً</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                    <div class="w-10 h-10 bg-navy-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-5 h-5 text-navy-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        </svg>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">المكان</p>
                        <p class="font-medium text-navy-900">{{ $eventInfo['event_location'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Attendance -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-navy-900">آخر الحضور</h3>
                <a href="{{ route('admin.attendance') }}" class="text-sm text-navy-600 hover:text-navy-900">عرض الكل</a>
            </div>
            
            @if($recentAttendance->count() > 0)
                <div class="space-y-3">
                    @foreach($recentAttendance as $ticket)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center {{ $ticket->type === 'vip' ? 'bg-gold-100 text-gold-700' : 'bg-navy-100 text-navy-700' }}">
                                    {{ mb_substr($ticket->name, 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-medium text-navy-900">{{ $ticket->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $ticket->seat_number }} - {{ $ticket->type_arabic }}</p>
                                </div>
                            </div>
                            <span class="text-xs text-gray-500">{{ $ticket->attended_at->diffForHumans() }}</span>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                    <p>لا يوجد سجل حضور بعد</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route('admin.tickets.normal.create') }}" class="bg-white rounded-xl shadow-sm p-6 text-center hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-navy-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6 text-navy-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
            </div>
            <span class="font-medium text-navy-900">إضافة تذكرة عادية</span>
        </a>
        <a href="{{ route('admin.tickets.vip.create') }}" class="bg-white rounded-xl shadow-sm p-6 text-center hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-gold-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6 text-gold-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                </svg>
            </div>
            <span class="font-medium text-navy-900">إضافة تذكرة VIP</span>
        </a>
        <a href="{{ route('admin.scanner') }}" class="bg-white rounded-xl shadow-sm p-6 text-center hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h2M4 12h2m14 0h2M6.343 17.657l1.414-1.414"/>
                </svg>
            </div>
            <span class="font-medium text-navy-900">فتح الماسح</span>
        </a>
        <a href="{{ route('admin.attendance.export') }}" class="bg-white rounded-xl shadow-sm p-6 text-center hover:shadow-md transition-shadow">
            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <span class="font-medium text-navy-900">تصدير Excel</span>
        </a>
    </div>
@endsection