@extends('layouts.app')

@section('title', 'الصفحة الرئيسية')

@section('content')
<!-- Hero Section -->
<section class="min-h-screen flex items-center pt-20">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Content - Right Side -->
            <div class="order-2 lg:order-1">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass text-primary-400 text-sm mb-6">
                    <span class="w-2 h-2 rounded-full bg-primary-400 animate-pulse"></span>
                    2025 - منطقة عسير
                </div>
                
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight mb-6">
                    <span class="text-gradient">الحفل الموحد</span>
                    <br>
                    لخريجي وخريجات المنشآت التدريبية
                </h1>
                
                <p class="text-lg text-gray-400 leading-relaxed mb-8 max-w-xl">
                    نحتفي معكم بتخريج الدفعة الجديدة من خريجي وخريجات المنشآت التدريبية بمنطقة عسير. نظام متكامل لإدارة التذاكر والحضور.
                </p>
                
                <!-- Stats -->
                <div class="grid grid-cols-3 gap-4 mb-8">
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-2xl font-bold text-gradient">{{ number_format($stats['totalTickets']) }}</div>
                        <div class="text-sm text-gray-400">إجمالي التذاكر</div>
                    </div>
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-2xl font-bold text-green-400">{{ number_format($stats['checkedIn']) }}</div>
                        <div class="text-sm text-gray-400">تم الحضور</div>
                    </div>
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-2xl font-bold text-gold-400">{{ number_format($stats['availableSeats']) }}</div>
                        <div class="text-sm text-gray-400">مقاعد متاحة</div>
                    </div>
                </div>
                
                <!-- CTA Buttons -->
                <div class="flex flex-wrap gap-4">
                    <a href="#search" class="gradient-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:opacity-90 transition-opacity flex items-center gap-2">
                        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        البحث عن تذكرتك
                    </a>
                    <a href="#hall" class="glass text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-dark-200 transition-colors flex items-center gap-2">
                        <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                        </svg>
                        خريطة القاعة
                    </a>
                </div>
            </div>
            
            <!-- Image - Left Side -->
            <div class="order-1 lg:order-2 relative">
                <div class="relative animate-float">
                    <div class="absolute -inset-4 bg-gradient-to-r from-primary-500/20 to-gold-500/20 rounded-3xl blur-2xl"></div>
                    <img src="{{ asset('images/event-poster.jpg') }}" alt="حفل التخرج" class="relative rounded-2xl shadow-2xl w-full max-w-lg mx-auto">
                </div>
                
                <!-- Floating Badge -->
                <div class="absolute -bottom-4 -right-4 glass rounded-2xl p-4 hidden lg:block">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-full gradient-gold flex items-center justify-center">
                            <svg class="w-6 h-6 text-dark" 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>
                            <div class="font-bold text-white">موعد الحفل</div>
                            <div class="text-sm text-gray-400">15 يونيو 2025 - 7:00 م</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Search Section -->
<section id="search" class="py-20">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-black text-white mb-4">البحث عن تذكرتك</h2>
            <p class="text-gray-400 max-w-2xl mx-auto">ابحث عن تذكرتك باستخدام الاسم أو رقم الجوال أو رقم التذكرة</p>
        </div>
        
        <div class="max-w-3xl mx-auto">
            <form id="searchForm" action="{{ route('search') }}" method="GET" class="glass rounded-2xl p-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1 relative">
                        <input type="text" name="query" id="searchInput" placeholder="أدخل الاسم أو رقم الجوال أو رقم التذكرة..." 
                               class="w-full bg-dark-50 border border-dark-200 rounded-xl px-5 py-4 text-white placeholder-gray-500 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 outline-none transition-all">
                        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <button type="submit" class="gradient-primary text-white px-8 py-4 rounded-xl font-bold hover:opacity-90 transition-opacity whitespace-nowrap">
                        بحث
                    </button>
                </div>
            </form>
            
            <!-- Search Results -->
            <div id="searchResults" class="mt-6 hidden">
                <!-- Results will be loaded here via AJAX -->
            </div>
        </div>
    </div>
</section>

<!-- Hall Map Section -->
<section id="hall" class="py-20">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-black text-white mb-4">خريطة القاعة</h2>
            <p class="text-gray-400 max-w-2xl mx-auto">تعرف على موقع مقعدك ومخارج الطوارئ القريبة منك</p>
        </div>
        
        <div class="glass rounded-2xl p-8">
            <!-- Stage -->
            <div class="gradient-primary rounded-xl py-6 text-center text-white font-bold text-xl mb-8">
                خشبة المسرح
            </div>
            
            <!-- Seats Layout -->
            <div class="relative">
                <!-- VIP Section -->
                <div class="flex justify-center mb-6">
                    <div class="gradient-gold rounded-xl px-8 py-4 text-center">
                        <div class="font-bold text-dark text-lg">VIP</div>
                        <div class="text-sm text-dark/70">
                            {{ $sectionStats['VIP']['available'] ?? 0 }} / {{ $sectionStats['VIP']['total'] ?? 0 }} متاح
                        </div>
                    </div>
                </div>
                
                <!-- Main Sections Grid -->
                <div class="grid grid-cols-4 md:grid-cols-8 gap-3">
                    @foreach(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] as $section)
                        @php
                            $stats = $sectionStats[$section] ?? ['total' => 0, 'available' => 0];
                            $percentage = $stats['total'] > 0 ? round(($stats['available'] / $stats['total']) * 100) : 0;
                            $bgColor = $percentage > 50 ? 'bg-green-500/20 border-green-500' : ($percentage > 20 ? 'bg-yellow-500/20 border-yellow-500' : 'bg-red-500/20 border-red-500');
                        @endphp
                        <div class="glass border {{ $bgColor }} rounded-xl p-4 text-center hover:scale-105 transition-transform cursor-pointer">
                            <div class="font-bold text-white text-2xl">{{ $section }}</div>
                            <div class="text-xs text-gray-400 mt-1">{{ $stats['available'] ?? 0 }} / {{ $stats['total'] ?? 0 }}</div>
                            <div class="mt-2 h-1 bg-dark-200 rounded-full overflow-hidden">
                                <div class="h-full {{ $percentage > 50 ? 'bg-green-500' : ($percentage > 20 ? 'bg-yellow-500' : 'bg-red-500') }}" style="width: {{ $percentage }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <!-- Emergency Exits -->
                <div class="flex justify-between mt-8">
                    <div class="flex items-center gap-2 text-green-400 text-sm">
                        <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        مخرج 2 - يسار
                    </div>
                    <div class="flex items-center gap-2 text-green-400 text-sm">
                        <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        مخرج 4 - يمين
                    </div>
                </div>
                
                <!-- Main Entrance -->
                <div class="text-center mt-8">
                    <div class="inline-flex items-center gap-2 glass px-6 py-3 rounded-xl text-primary-400">
                        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                        </svg>
                        المدخل الرئيسي
                    </div>
                </div>
            </div>
            
            <!-- Legend -->
            <div class="flex flex-wrap justify-center gap-6 mt-8 pt-6 border-t border-dark-200">
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-green-500"></div>
                    <span class="text-sm text-gray-400">متاح (أكثر من 50%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-yellow-500"></div>
                    <span class="text-sm text-gray-400">محدود (20-50%)</span>
                </div>
                <div class="flex items-center gap-2">
                    <div class="w-4 h-4 rounded bg-red-500"></div>
                    <span class="text-sm text-gray-400">ممتلئ (أقل من 20%)</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Instructions Section -->
<section id="instructions" class="py-20">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Image -->
            <div class="relative">
                <div class="absolute -inset-4 bg-gradient-to-r from-primary-500/20 to-gold-500/20 rounded-3xl blur-2xl"></div>
                <img src="{{ asset('images/event-poster.jpg') }}" alt="تعليمات الحفل" class="relative rounded-2xl shadow-2xl w-full">
            </div>
            
            <!-- Content -->
            <div>
                <h2 class="text-3xl md:text-4xl font-black text-white mb-6">
                    ليبقى هذا الحفل <span class="text-gradient">ذكرى خالدة</span>
                </h2>
                <p class="text-gray-400 mb-8">يرجى من الجميع الالتزام بالتعليمات التالية:</p>
                
                <div class="space-y-4">
                    @php
                        $instructions = [
                            'الحضور في الوقت المخصص لكم من قبل منشأتك التدريبية.',
                            'إبراز بطاقة الدعوة عند الدخول لمقر الحفل.',
                            'الالتزام بكافة تعليمات السلامة والاطلاع على باركود مخارج السلامة الموضح على تذكرة الدخول.',
                            'التعاون مع أعضاء اللجان المنظمة والحراسات الأمنية وتقبل توجيهاتهم.',
                            'الجلوس في المقعد المخصص لك حسب المجموعة الظاهرة في بطاقة الدعوة.',
                            'يوجد مكان مخصص لإقامة الصلاة كما يوجد لوحات إرشادية لدورات المياه.',
                            'يجب المحافظة على كافة مرافق المسرح.',
                            'الالتزام بجميع ما ورد في لائحة الذوق العام.',
                        ];
                    @endphp
                    
                    @foreach($instructions as $instruction)
                        <div class="flex items-start gap-3 glass rounded-xl p-4">
                            <div class="w-6 h-6 rounded-full gradient-primary flex items-center justify-center flex-shrink-0 mt-0.5">
                                <svg class="w-4 h-4 text-white" 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>
                            <span class="text-gray-300">{{ $instruction }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    // Live search functionality
    const searchForm = document.getElementById('searchForm');
    const searchInput = document.getElementById('searchInput');
    const searchResults = document.getElementById('searchResults');
    let searchTimeout;
    
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 2) {
            searchResults.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(() => {
            fetch(`{{ route('search') }}?query=${encodeURIComponent(query)}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.tickets.length > 0) {
                    searchResults.innerHTML = data.tickets.map(ticket => `
                        <a href="/ticket/${ticket.barcode}" class="block glass rounded-xl p-4 mb-3 hover:bg-dark-200 transition-colors">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background: ${ticket.typeColor}20; border: 1px solid ${ticket.typeColor}">
                                        <span class="font-bold" style="color: ${ticket.typeColor}">${ticket.typeName.charAt(0)}</span>
                                    </div>
                                    <div>
                                        <div class="font-bold text-white">${ticket.attendeeName}</div>
                                        <div class="text-sm text-gray-400">${ticket.typeName} - ${ticket.seatLabel}</div>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="text-sm text-gray-400">${ticket.ticketNumber}</div>
                                    ${ticket.isCheckedIn ? '<span class="text-xs text-green-400">تم الحضور</span>' : '<span class="text-xs text-yellow-400">في الانتظار</span>'}
                                </div>
                            </div>
                        </a>
                    `).join('');
                    searchResults.classList.remove('hidden');
                } else {
                    searchResults.innerHTML = '<div class="glass rounded-xl p-4 text-center text-gray-400">لم يتم العثور على نتائج</div>';
                    searchResults.classList.remove('hidden');
                }
            })
            .catch(error => {
                console.error('Search error:', error);
            });
        }, 300);
    });
    
    searchForm.addEventListener('submit', function(e) {
        if (searchInput.value.trim().length < 2) {
            e.preventDefault();
        }
    });
</script>
@endpush