@extends('layouts.app')

@section('title', 'Order #' . $order->order_number)

@section('content')
    <div class="max-w-2xl mx-auto">
        <h1 class="text-2xl font-bold mb-1">{{ $order->event->title }}</h1>
        <p class="text-gray-500 mb-6">Order #{{ $order->order_number }} · {{ $order->event->event_date->format('l, F j, Y \a\t g:i A') }}</p>

        <div class="space-y-4">
            @foreach ($order->items as $item)
                @foreach ($item->tickets as $ticket)
                    <div class="bg-white rounded-xl shadow-sm p-5 flex items-center justify-between">
                        <div>
                            <p class="font-semibold">{{ $item->ticketType->name }}</p>
                            <p class="text-sm text-gray-500 font-mono">{{ $ticket->code }}</p>
                            <span class="inline-block mt-1 text-xs uppercase font-medium
                                {{ $ticket->status === 'valid' ? 'text-green-600' : 'text-gray-400' }}">
                                {{ $ticket->status }}
                            </span>
                        </div>
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data={{ urlencode($ticket->code) }}"
                             alt="QR code for {{ $ticket->code }}" class="w-24 h-24 rounded-lg border">
                    </div>
                @endforeach
            @endforeach
        </div>

        <p class="text-xs text-gray-400 mt-6 text-center">
            Show the QR code at the gate — staff will scan it via the ticket validation page.
        </p>
    </div>
@endsection