@extends('layouts.app')

@section('title', 'Checkout — ' . $event->title)

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

        <form method="POST" action="{{ route('checkout.store', $event) }}" class="space-y-4">
            @csrf

            @foreach ($event->ticketTypes as $type)
                <div class="flex items-center justify-between border rounded-lg px-4 py-3">
                    <div>
                        <p class="font-medium">{{ $type->name }}</p>
                        <p class="text-sm text-gray-500">
                            ${{ number_format($type->price, 2) }} · {{ $type->remaining }} left
                        </p>
                    </div>
                    <input type="number" name="quantities[{{ $type->id }}]" min="0" max="{{ min(20, $type->remaining) }}"
                           value="0" {{ $type->remaining === 0 ? 'disabled' : '' }}
                           class="w-20 border rounded-lg px-2 py-1 text-center">
                </div>
            @endforeach

            <button class="w-full bg-brand text-white rounded-lg py-2.5 font-medium hover:bg-indigo-700 mt-4">
                Confirm & Get Tickets
            </button>

            <p class="text-xs text-gray-400 text-center">
                This is a student demo — no real payment is processed.
            </p>
        </form>
    </div>
@endsection