@extends('layouts.dashboard')

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

@section('content')
<div class="grid gap-6 lg:grid-cols-2">
    <div class="rounded-lg bg-white p-6 shadow-sm">
        <h2 class="font-black">Instruksi Pembayaran</h2>
        <div class="mt-4 grid gap-3 text-sm">
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Kode Order:</span> {{ $order->order_code }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Kode Pembayaran:</span> {{ $order->payment?->payment_code }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Nominal:</span> {{ \App\Support\LocaleFormat::money($order->total_price) }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Rekening:</span> {{ $bankAccount }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">QRIS:</span> {{ $qrisText }}</p>
            <p class="rounded-lg bg-slate-50 p-3"><span class="font-bold">Status:</span> <x-status-badge :status="$order->payment_status" /></p>
        </div>
    </div>
    <div class="rounded-lg bg-white p-6 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <h2 class="font-black">Bukti Pembayaran</h2>
                <p class="mt-1 text-sm font-semibold text-slate-500">Upload gambar transfer/QRIS untuk diverifikasi admin.</p>
            </div>
            <x-status-badge :status="$order->payment_status" />
        </div>

        @if($order->payment?->proof_image)
            <div class="mt-5 rounded-lg border border-slate-200 bg-slate-50 p-3">
                <img src="{{ route('payments.proof', $order->payment) }}" alt="Bukti pembayaran {{ $order->order_code }}" class="max-h-72 w-full rounded-md object-contain">
                <a href="{{ route('payments.proof', $order->payment) }}" target="_blank" class="mt-3 inline-flex items-center gap-2 text-sm font-black text-sky-700 hover:text-slate-950">
                    <i data-lucide="external-link" class="h-4 w-4"></i>
                    Buka bukti asli
                </a>
            </div>
        @endif

        @if(! in_array($order->payment_status, ['diterima'], true))
            <form method="POST" action="{{ route('user.tickets.upload-payment', $order) }}" enctype="multipart/form-data" class="mt-5 grid gap-4">
                @csrf
                <input type="file" name="proof_image" accept="image/*" class="rounded-lg border border-slate-300 px-3 py-2" required>
                <button class="rounded-lg bg-sky-700 px-4 py-2 font-bold text-white">Upload Bukti</button>
            </form>
        @else
            <p class="mt-5 rounded-lg bg-emerald-50 p-3 text-sm font-bold text-emerald-700">
                Pembayaran sudah diterima. Bukti pembayaran disimpan sebagai arsip transaksi.
            </p>
        @endif

        @if($order->payment?->note)
            <p class="mt-4 rounded-lg bg-red-50 p-3 text-sm font-semibold text-red-700">Catatan admin: {{ $order->payment->note }}</p>
        @endif
    </div>
</div>
@endsection