@extends('layouts.app')

@section('title', 'الرئيسية - حفل التخرج')

@section('content')
    <!-- Hero Section -->
    <section class="relative bg-navy-900 text-white overflow-hidden">
        <div class="absolute inset-0">
            <img src="{{ asset('images/hero-bg.jpg') }}" alt="خلفية حفل التخرج" class="w-full h-full object-cover opacity-30">
            <div class="absolute inset-0 bg-gradient-to-l from-navy-900 via-navy-900/90 to-navy-900/70"></div>
        </div>
        
        <div class="container mx-auto px-4 py-20 lg:py-32 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div class="text-center lg:text-right">
                    <div class="inline-block px-4 py-2 bg-gold-500/20 rounded-full mb-6">
                        <span class="text-gold-400 font-medium">{{ $eventInfo['event_subtitle'] }}</span>
                    </div>
                    <h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
                        {{ $siteContent['hero_title'] }}
                    </h1>
                    <p class="text-xl text-gray-300 mb-8 leading-relaxed">
                        {{ $siteContent['hero_subtitle'] }}
                    </p>
                    <div class="flex flex-wrap gap-4 justify-center lg:justify-start">
                        <a href="#search" class="px-8 py-4 bg-gold-500 text-navy-900 font-bold rounded-lg hover:bg-gold-400 transition-colors">
                            ابحث عن تذكرتك
                        </a>
                        <a href="{{ route('hall.view') }}" class="px-8 py-4 border-2 border-white/30 text-white font-bold rounded-lg hover:bg-white/10 transition-colors">
                            عرض القاعة
                        </a>
                    </div>
                </div>
                
                <div class="hidden lg:block">
                    <img src="{{ asset('images/graduation-cap.png') }}" alt="قبعة التخرج" class="w-full max-w-md mx-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Event Info Bar -->
    <section class="bg-white shadow-lg -mt-6 relative z-20 mx-4 lg:mx-auto max-w-5xl rounded-2xl">
        <div class="grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x md:divide-x-reverse">
            <div class="p-6 text-center">
                <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-navy-900 mb-1">المكان</h3>
                <p class="text-gray-600">{{ $eventInfo['event_location'] }}</p>
            </div>
            <div class="p-6 text-center">
                <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="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>
                <h3 class="font-bold text-navy-900 mb-1">التاريخ</h3>
                <p class="text-gray-600">{{ \Carbon\Carbon::parse($eventInfo['event_date'])->locale('ar')->translatedFormat('l j F Y') }}</p>
            </div>
            <div class="p-6 text-center">
                <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <h3 class="font-bold text-navy-900 mb-1">الموعد</h3>
                <p class="text-gray-600">{{ $eventInfo['event_time'] }} مساءً</p>
            </div>
        </div>
    </section>

    <!-- Search Section -->
    <section id="search" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center mb-12">
                <h2 class="text-3xl font-bold text-navy-900 mb-4">ابحث عن تذكرتك</h2>
                <p class="text-gray-600">أدخل اسمك أو رقم جوالك للعثور على تذكرتك</p>
            </div>
            
            <div class="max-w-xl mx-auto">
                <form action="{{ route('search') }}" method="GET" class="relative">
                    <input 
                        type="text" 
                        name="query" 
                        placeholder="الاسم أو رقم الجوال..."
                        class="w-full px-6 py-4 pr-14 rounded-xl border-2 border-gray-200 focus:border-navy-500 focus:outline-none text-lg"
                        required
                        minlength="2"
                    >
                    <button type="submit" class="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 bg-navy-900 text-white rounded-lg hover:bg-navy-800 transition-colors 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </section>

    <!-- Hall View Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-navy-900 mb-4">خريطة القاعة</h2>
                <p class="text-gray-600">عرض تفاعلي لمقاعد القاعة</p>
            </div>
            
            <div class="bg-white rounded-2xl shadow-lg p-8 overflow-x-auto">
                <!-- Stage -->
                <div class="w-full max-w-3xl mx-auto mb-8">
                    <div class="bg-gradient-to-b from-navy-800 to-navy-900 text-white text-center py-4 rounded-t-3xl">
                        <span class="text-lg font-bold">المنصة</span>
                    </div>
                </div>
                
                <!-- VIP Section -->
                <div class="mb-8">
                    <h3 class="text-center text-gold-600 font-bold mb-4 flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path 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>
                        منطقة VIP
                    </h3>
                    @for($row = 1; $row <= $seatingConfig['vip_rows']; $row++)
                        <div class="flex justify-center gap-2 mb-2">
                            @for($seat = 1; $seat <= $seatingConfig['vip_seats_per_row']; $seat++)
                                @php
                                    $seatNumber = 'V' . (($row - 1) * $seatingConfig['vip_seats_per_row'] + $seat);
                                    $ticket = $tickets->get($seatNumber);
                                    $isAttended = $ticket && $ticket->attendance_status;
                                @endphp
                                <div 
                                    class="w-8 h-8 rounded-lg flex items-center justify-center text-xs font-bold cursor-pointer transition-transform hover:scale-110 {{ $isAttended ? 'bg-green-500 text-white' : ($ticket ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-500') }}"
                                    title="{{ $ticket ? $ticket->name . ' - ' . ($isAttended ? 'حضر' : 'غائب') : 'متاح' }}"
                                >
                                    {{ $seat }}
                                </div>
                            @endfor
                        </div>
                    @endfor
                </div>
                
                <!-- Normal Section -->
                <div>
                    <h3 class="text-center text-navy-600 font-bold mb-4">المقاعد العادية</h3>
                    @for($row = 1; $row <= min($seatingConfig['normal_rows'], 5); $row++)
                        <div class="flex justify-center gap-1 mb-2">
                            @for($seat = 1; $seat <= $seatingConfig['normal_seats_per_row']; $seat++)
                                @php
                                    $seatNumber = chr(64 + $row) . $seat;
                                    $ticket = $tickets->get($seatNumber);
                                    $isAttended = $ticket && $ticket->attendance_status;
                                @endphp
                                <div 
                                    class="w-6 h-6 rounded flex items-center justify-center text-xs cursor-pointer transition-transform hover:scale-110 {{ $isAttended ? 'bg-green-500 text-white' : ($ticket ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-400') }}"
                                    title="{{ $ticket ? $ticket->name . ' - ' . ($isAttended ? 'حضر' : 'غائب') : 'متاح' }}"
                                >
                                </div>
                            @endfor
                        </div>
                    @endfor
                </div>
                
                <!-- Legend -->
                <div class="flex justify-center gap-6 mt-8 text-sm">
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 bg-green-500 rounded"></div>
                        <span>حضر</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 bg-red-500 rounded"></div>
                        <span>غائب</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <div class="w-4 h-4 bg-gray-200 rounded"></div>
                        <span>متاح</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    @if($partners->count() > 0)
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-navy-900 mb-4">شركاء النجاح</h2>
                <p class="text-gray-600">نشكر شركاءنا على دعمهم</p>
            </div>
            
            <div class="flex flex-wrap justify-center items-center gap-12">
                @foreach($partners as $partner)
                    <div class="grayscale hover:grayscale-0 transition-all opacity-60 hover:opacity-100">
                        @if($partner->website)
                            <a href="{{ $partner->website }}" target="_blank" rel="noopener">
                                <img src="{{ asset('storage/' . $partner->logo) }}" alt="{{ $partner->name }}" class="h-16 object-contain">
                            </a>
                        @else
                            <img src="{{ asset('storage/' . $partner->logo) }}" alt="{{ $partner->name }}" class="h-16 object-contain">
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Notes Section -->
    @if($eventInfo['event_notes'])
    <section class="py-12 bg-gold-50 border-y border-gold-200">
        <div class="container mx-auto px-4 text-center">
            <div class="flex items-center justify-center gap-3 text-gold-800">
                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-lg font-medium">{{ $eventInfo['event_notes'] }}</p>
            </div>
        </div>
    </section>
    @endif
@endsection