@extends('layouts.app')

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

@section('content')
<section class="min-h-screen flex items-center justify-center py-20 px-4">
    <div class="w-full max-w-2xl">
        <!-- Ticket Card -->
        <div class="glass rounded-3xl overflow-hidden">
            <!-- Header -->
            <div class="gradient-primary p-6 text-center text-white">
                <div class="flex items-center justify-center gap-3 mb-3">
                    <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="font-bold text-xl">حفل التخرج الموحد</h1>
                        <p class="text-sm text-white/80">المؤسسة العامة للتدريب التقني والمهني</p>
                    </div>
                </div>
            </div>
            
            <!-- Ticket Type Badge -->
            <div class="flex justify-center -mt-4 relative z-10">
                <div class="px-6 py-2 rounded-full font-bold text-lg" style="background: {{ $ticket->type_color }}; color: {{ in_array($ticket->ticket_type, ['vip', 'excellent']) ? '#000' : '#fff' }}">
                    {{ $ticket->type_name }}
                </div>
            </div>
            
            <!-- Content -->
            <div class="p-6 space-y-6">
                <!-- Attendee Info -->
                <div class="text-center">
                    <h2 class="text-2xl font-bold text-white mb-2">{{ $ticket->attendee_name }}</h2>
                    @if($ticket->institute)
                        <p class="text-gray-400">{{ $ticket->institute }}</p>
                    @endif
                </div>
                
                <!-- Ticket Details Grid -->
                <div class="grid grid-cols-2 gap-4">
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 mb-1">رقم التذكرة</div>
                        <div class="font-bold text-white">{{ $ticket->ticket_number }}</div>
                    </div>
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 mb-1">المقعد</div>
                        <div class="font-bold text-primary-400 text-xl">{{ $ticket->seat_label }}</div>
                    </div>
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 mb-1">القسم</div>
                        <div class="font-bold text-white text-xl">{{ $ticket->section }}</div>
                    </div>
                    <div class="glass rounded-xl p-4 text-center">
                        <div class="text-xs text-gray-500 mb-1">أقرب مخرج</div>
                        <div class="font-bold text-green-400 text-sm">{{ $ticket->nearest_exit ?? 'المخرج الرئيسي' }}</div>
                    </div>
                </div>
                
                <!-- Barcode -->
                <div class="bg-white rounded-xl p-6 text-center">
                    <div id="barcode" class="mb-3"></div>
                    <div class="text-dark font-mono text-sm">{{ $ticket->barcode }}</div>
                </div>
                
                <!-- Status -->
                @if($ticket->is_checked_in)
                    <div class="flex items-center justify-center gap-2 bg-green-500/20 text-green-400 rounded-xl p-4">
                        <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>تم تسجيل الحضور في {{ $ticket->checked_in_at->format('Y-m-d H:i') }}</span>
                    </div>
                @else
                    <div class="flex items-center justify-center gap-2 bg-yellow-500/20 text-yellow-400 rounded-xl p-4">
                        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>في انتظار تسجيل الحضور</span>
                    </div>
                @endif
                
                <!-- Actions -->
                <div class="flex gap-4">
                    <button onclick="window.print()" class="flex-1 gradient-primary text-white py-3 rounded-xl font-bold hover:opacity-90 transition-opacity flex items-center justify-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>
                    <a href="{{ route('home') }}" class="flex-1 glass text-white py-3 rounded-xl font-bold hover:bg-dark-200 transition-colors flex items-center justify-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="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>
                        العودة للرئيسية
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const barcodeContainer = document.getElementById('barcode');
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        barcodeContainer.appendChild(svg);
        
        JsBarcode(svg, "{{ $ticket->barcode }}", {
            format: "CODE128",
            width: 2,
            height: 80,
            displayValue: false,
            margin: 0
        });
    });
</script>
@endpush