@extends('layouts.admin')

@section('title', 'تفاصيل التذكرة')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <!-- Back Button -->
    <a href="{{ route('admin.tickets.index') }}" class="inline-flex items-center gap-2 text-gray-400 hover:text-white transition">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        العودة للقائمة
    </a>

    <!-- Ticket Card -->
    <div class="bg-[#1e293b]/50 backdrop-blur-xl rounded-2xl border border-[#334155] overflow-hidden">
        @php
            $typeColors = [
                'vip' => 'from-amber-500 to-yellow-600',
                'excellent' => 'from-purple-500 to-indigo-600',
                'march' => 'from-blue-500 to-cyan-600',
                'regular' => 'from-emerald-500 to-teal-600',
                'companion' => 'from-gray-500 to-slate-600',
            ];
            $typeLabels = [
                'vip' => 'VIP',
                'excellent' => 'متفوقين',
                'march' => 'مسيرة',
                'regular' => 'عادي',
                'companion' => 'مرافقين',
            ];
        @endphp
        
        <!-- Header with gradient -->
        <div class="bg-gradient-to-r {{ $typeColors[$ticket->type] ?? $typeColors['regular'] }} p-6">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-white/80 text-sm">رقم التذكرة</span>
                    <h1 class="text-2xl font-bold text-white font-mono">{{ $ticket->ticket_number }}</h1>
                </div>
                <div class="text-left">
                    <span class="px-4 py-2 bg-white/20 backdrop-blur rounded-full text-white font-bold">
                        {{ $typeLabels[$ticket->type] ?? $ticket->type }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Details -->
        <div class="p-6 space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="text-sm text-gray-400">الاسم</label>
                    <p class="text-xl font-bold text-white mt-1">{{ $ticket->name }}</p>
                </div>
                <div>
                    <label class="text-sm text-gray-400">رقم الجوال</label>
                    <p class="text-xl font-mono text-white mt-1" dir="ltr">{{ $ticket->phone }}</p>
                </div>
                <div>
                    <label class="text-sm text-gray-400">رقم الهوية</label>
                    <p class="text-xl font-mono text-white mt-1">{{ $ticket->national_id ?? '-' }}</p>
                </div>
                <div>
                    <label class="text-sm text-gray-400">الجهة</label>
                    <p class="text-xl text-white mt-1">{{ $ticket->institute ?? '-' }}</p>
                </div>
                <div>
                    <label class="text-sm text-gray-400">المقعد</label>
                    <p class="text-xl font-bold text-[#2dd4bf] mt-1">{{ $ticket->seat?->label ?? 'غير محدد' }}</p>
                </div>
                <div>
                    <label class="text-sm text-gray-400">حالة الحضور</label>
                    <div class="mt-1">
                        @if($ticket->is_checked_in)
                            <span class="px-4 py-2 rounded-full bg-green-500/20 text-green-400 border border-green-500/30">
                                تم تسجيل الحضور - {{ $ticket->checked_in_at?->format('H:i') }}
                            </span>
                        @else
                            <span class="px-4 py-2 rounded-full bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
                                لم يتم تسجيل الحضور
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Barcode -->
            <div class="bg-white rounded-xl p-6 text-center">
                <svg id="barcode"></svg>
                <p class="mt-2 font-mono text-gray-600">{{ $ticket->barcode }}</p>
            </div>

            <!-- Actions -->
            <div class="flex flex-wrap gap-3">
                @if(!$ticket->is_checked_in)
                <form action="{{ route('admin.tickets.checkin', $ticket) }}" method="POST">
                    @csrf
                    <button type="submit" class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition font-medium 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        تسجيل الحضور
                    </button>
                </form>
                @endif
                <a href="{{ route('ticket.print', $ticket) }}" target="_blank"
                   class="px-6 py-3 bg-[#2dd4bf] text-[#0f172a] rounded-lg hover:bg-[#14b8a6] transition font-medium 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>
                    طباعة التذكرة
                </a>
                <a href="{{ route('admin.tickets.edit', $ticket) }}"
                   class="px-6 py-3 bg-[#334155] text-white rounded-lg hover:bg-[#475569] transition font-medium 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    تعديل
                </a>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script>
    JsBarcode("#barcode", "{{ $ticket->barcode }}", {
        format: "CODE128",
        width: 2,
        height: 80,
        displayValue: false
    });
</script>
@endsection