@extends('layouts.app')

@section('title', 'تذكرة ' . $ticket->name)

@push('styles')
<style>
    @media print {
        body * { visibility: hidden; }
        #ticket-card, #ticket-card * { visibility: visible; }
        #ticket-card { position: absolute; left: 0; top: 0; width: 100%; }
        .no-print { display: none !important; }
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-b from-navy-900 to-navy-800 py-12">
    <div class="container mx-auto px-4">
        <!-- Back Button -->
        <a href="{{ route('home') }}" class="inline-flex items-center gap-2 text-white/70 hover:text-white mb-8 no-print">
            <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="M15 19l-7-7 7-7"/>
            </svg>
            <span>العودة للرئيسية</span>
        </a>
        
        <!-- Ticket Card -->
        <div id="ticket-card" class="max-w-2xl mx-auto">
            @if($ticket->type === 'vip')
                <!-- VIP Ticket -->
                <div class="bg-gradient-to-br from-gold-500 via-gold-400 to-gold-600 rounded-3xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-navy-900/20 to-transparent p-8">
                        <div class="flex items-center justify-between mb-6">
                            <div>
                                <span class="text-navy-900/70 text-sm font-medium">{{ $eventInfo['event_title'] }}</span>
                                <h1 class="text-2xl font-bold text-navy-900">تذكرة VIP</h1>
                            </div>
                            <div class="w-16 h-16 bg-navy-900 rounded-full flex items-center justify-center">
                                <svg class="w-10 h-10 text-gold-400" 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 class="bg-white/90 backdrop-blur rounded-2xl p-6 mb-6">
                            <div class="text-center mb-6">
                                <h2 class="text-3xl font-bold text-navy-900 mb-2">{{ $ticket->name }}</h2>
                                <p class="text-gold-700 font-medium">{{ $ticket->job_title }}</p>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div class="bg-navy-50 rounded-xl p-4">
                                    <span class="text-sm text-gray-500 block mb-1">رقم التذكرة</span>
                                    <span class="text-xl font-bold text-navy-900">{{ $ticket->ticket_number }}</span>
                                </div>
                                <div class="bg-navy-50 rounded-xl p-4">
                                    <span class="text-sm text-gray-500 block mb-1">رقم الكرسي</span>
                                    <span class="text-xl font-bold text-navy-900">{{ $ticket->seat_number }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Barcode -->
                        <div class="bg-white rounded-xl p-4 text-center">
                            <img src="{{ $ticket->generateBarcodeImage() }}" alt="باركود التذكرة" class="mx-auto mb-2">
                            <span class="text-sm text-gray-500 font-mono">{{ $ticket->barcode }}</span>
                        </div>
                        
                        <!-- Event Info -->
                        <div class="mt-6 flex items-center justify-between text-navy-900/70 text-sm">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ \Carbon\Carbon::parse($eventInfo['event_date'])->format('Y/m/d') }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ $eventInfo['event_time'] }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ $eventInfo['event_location'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <!-- Normal Ticket -->
                <div class="bg-white rounded-3xl shadow-2xl overflow-hidden">
                    <div class="bg-gradient-to-r from-navy-900 to-navy-800 p-8 text-white">
                        <div class="flex items-center justify-between">
                            <div>
                                <span class="text-white/70 text-sm">{{ $eventInfo['event_title'] }}</span>
                                <h1 class="text-2xl font-bold">تذكرة حضور</h1>
                            </div>
                            <div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center">
                                <svg class="w-10 h-10" 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>
                    
                    <div class="p-8">
                        <div class="text-center mb-8">
                            <h2 class="text-3xl font-bold text-navy-900 mb-2">{{ $ticket->name }}</h2>
                            <p class="text-gray-600">{{ $ticket->college }} - {{ $ticket->major }}</p>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mb-8">
                            <div class="bg-gray-50 rounded-xl p-4 text-center">
                                <span class="text-sm text-gray-500 block mb-1">رقم التذكرة</span>
                                <span class="text-xl font-bold text-navy-900">{{ $ticket->ticket_number }}</span>
                            </div>
                            <div class="bg-gray-50 rounded-xl p-4 text-center">
                                <span class="text-sm text-gray-500 block mb-1">رقم الكرسي</span>
                                <span class="text-xl font-bold text-navy-900">{{ $ticket->seat_number }}</span>
                            </div>
                        </div>
                        
                        <!-- Barcode -->
                        <div class="bg-gray-50 rounded-xl p-6 text-center mb-8">
                            <img src="{{ $ticket->generateBarcodeImage() }}" alt="باركود التذكرة" class="mx-auto mb-2">
                            <span class="text-sm text-gray-500 font-mono">{{ $ticket->barcode }}</span>
                        </div>
                        
                        <!-- Event Info -->
                        <div class="border-t pt-6 flex items-center justify-between text-gray-500 text-sm">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ \Carbon\Carbon::parse($eventInfo['event_date'])->format('Y/m/d') }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ $eventInfo['event_time'] }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4" 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>
                                <span>{{ $eventInfo['event_location'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        
        <!-- Action Buttons -->
        <div class="flex justify-center gap-4 mt-8 no-print">
            <button onclick="window.print()" class="px-6 py-3 bg-white text-navy-900 font-bold rounded-lg hover:bg-gray-100 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                </svg>
                طباعة التذكرة
            </button>
            <button onclick="downloadTicket()" class="px-6 py-3 bg-gold-500 text-navy-900 font-bold rounded-lg hover:bg-gold-400 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
                تحميل التذكرة
            </button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    async function downloadTicket() {
        const ticket = document.getElementById('ticket-card');
        const canvas = await html2canvas(ticket, { scale: 2, useCORS: true });
        const link = document.createElement('a');
        link.download = 'ticket-{{ $ticket->ticket_number }}.png';
        link.href = canvas.toDataURL();
        link.click();
    }
</script>
@endpush