@extends('layouts.dashboard')

@section('title', 'Detail Tiket')

@section('content')
<div class="grid gap-6 lg:grid-cols-[1fr_.8fr]">
    <div class="rounded-lg bg-white p-6 shadow-sm">
        <h2 class="text-xl font-black">{{ $order->order_code }}</h2>
        <div class="mt-5 grid gap-3 md:grid-cols-2">
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Tanggal:</span> {{ $order->visit_date->format('d/m/Y') }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Jumlah:</span> {{ $order->total_ticket }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Total:</span> {{ \App\Support\LocaleFormat::money($order->total_price) }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Status:</span> <x-status-badge :status="$order->status" /></p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Pembayaran:</span> <x-status-badge :status="$order->payment_status" /></p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Check-in:</span> {{ $order->checkin?->status ?? 'belum_masuk' }}</p>
        </div>
        <table class="mt-6 w-full text-left text-sm">
            <thead class="text-slate-500"><tr><th class="py-2">Jenis</th><th>Qty</th><th>Harga</th><th>Subtotal</th></tr></thead>
            <tbody>
                @foreach($order->details as $detail)
                    <tr class="border-t"><td class="py-3">{{ $detail->ticketType?->name }}</td><td>{{ $detail->quantity }}</td><td>{{ \App\Support\LocaleFormat::money($detail->price) }}</td><td>{{ \App\Support\LocaleFormat::money($detail->subtotal) }}</td></tr>
                @endforeach
            </tbody>
        </table>
        <div class="mt-6 flex flex-wrap gap-3">
            <a href="{{ route('user.tickets.payment', $order) }}" class="rounded-lg bg-sky-700 px-4 py-2 text-sm font-bold text-white">Pembayaran</a>
            @if(in_array($order->status, ['aktif','digunakan']))
                <a href="{{ route('user.tickets.download', $order) }}" class="rounded-lg bg-emerald-700 px-4 py-2 text-sm font-bold text-white">Download Tiket PDF</a>
            @endif
        </div>
    </div>
    <div class="rounded-lg bg-white p-6 text-center shadow-sm">
        <h2 class="font-black">QR Code Tiket</h2>
        @if(in_array($order->status, ['aktif','digunakan'], true))
            <img src="{{ route('user.tickets.qr', $order) }}" alt="QR Code {{ $order->order_code }}" class="mx-auto mt-5 h-64 w-64 rounded-lg border border-slate-200 bg-white p-3">
            <p class="mt-3 text-xs font-bold text-slate-500">{{ $order->order_code }}</p>
        @else
            <div class="mt-5 rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-sm font-semibold text-slate-500">
                QR Code akan muncul setelah pembayaran diverifikasi admin.
            </div>
        @endif
        <p class="mt-4 text-sm text-slate-600">Tunjukkan QR Code ini kepada admin saat check-in.</p>
    </div>
</div>
@endsection