@extends('layouts.app')

@section('title', 'My Tickets')

@section('content')
    <h1 class="text-2xl font-bold mb-6">My Tickets</h1>

    <div class="space-y-4">
        @forelse ($orders as $order)
            <a href="{{ route('orders.show', $order) }}" class="block bg-white rounded-xl shadow-sm p-5 hover:shadow-md transition">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-semibold">{{ $order->event->title }}</p>
                        <p class="text-sm text-gray-500">Order #{{ $order->order_number }} · {{ $order->created_at->format('M j, Y') }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold text-brand">${{ number_format($order->total, 2) }}</p>
                        <span class="text-xs uppercase font-medium text-green-600">{{ $order->status }}</span>
                    </div>
                </div>
            </a>
        @empty
            <p class="text-gray-500">You haven't bought any tickets yet. <a href="{{ route('home') }}" class="text-brand font-medium">Browse events</a>.</p>
        @endforelse
    </div>
@endsection