@extends('layouts.app')

@section('title', 'نتائج البحث')

@section('content')
<div class="min-h-screen py-12">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <!-- العنوان -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-white mb-2">نتائج البحث</h1>
                <p class="text-gray-400">عن: "{{ $query }}"</p>
            </div>

            @if($tickets->isEmpty())
                <div class="glass rounded-2xl p-12 text-center">
                    <svg class="w-16 h-16 text-gray-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <h3 class="text-xl text-white mb-2">لم يتم العثور على نتائج</h3>
                    <p class="text-gray-400">جرب البحث باسم آخر أو رقم الجوال أو رقم التذكرة</p>
                    <a href="{{ route('home') }}" class="inline-block mt-6 px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary/80 transition">
                        العودة للرئيسية
                    </a>
                </div>
            @else
                <div class="space-y-4">
                    @foreach($tickets as $ticket)
                        <a href="{{ route('ticket.show', $ticket) }}" class="block glass rounded-2xl p-6 hover:border-primary/50 transition group">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="w-14 h-14 rounded-xl flex items-center justify-center text-white font-bold text-xl
                                        @if($ticket->ticket_type === 'vip') bg-gradient-to-br from-yellow-400 to-yellow-600
                                        @elseif($ticket->ticket_type === 'excellent') bg-gradient-to-br from-purple-400 to-purple-600
                                        @elseif($ticket->ticket_type === 'march') bg-gradient-to-br from-blue-400 to-blue-600
                                        @elseif($ticket->ticket_type === 'companion') bg-gradient-to-br from-gray-400 to-gray-600
                                        @else bg-gradient-to-br from-teal-400 to-teal-600
                                        @endif">
                                        {{ $ticket->section }}
                                    </div>
                                    <div>
                                        <h3 class="text-white font-bold text-lg group-hover:text-primary transition">{{ $ticket->attendee_name }}</h3>
                                        <p class="text-gray-400 text-sm">{{ $ticket->type_name }} - {{ $ticket->seat_label }}</p>
                                    </div>
                                </div>
                                <div class="text-left">
                                    <div class="text-sm text-gray-400">{{ $ticket->ticket_number }}</div>
                                    @if($ticket->is_checked_in)
                                        <span class="inline-flex items-center gap-1 text-green-400 text-sm">
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                            </svg>
                                            تم التسجيل
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>

<style>
    .glass {
        background: rgba(26, 31, 53, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(79, 209, 197, 0.2);
    }
</style>
@endsection