<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>Detail Pesanan</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gradient-to-br from-blue-400 to-white min-h-screen flex items-center justify-center p-6 font-sans">
    <div class="w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden border border-blue-100">
        <div class="p-8">
            <h2 class="text-3xl font-bold text-blue-800 mb-6 border-b-2 border-blue-200 pb-2 flex items-center">
                🧾 <span class="ml-2">Detail Pesanan</span>
            </h2>

            @if (session('success'))
                <div class="bg-green-100 text-green-800 p-4 rounded-lg mb-6 border border-green-300 shadow-sm">
                    ✅ {{ session('success') }}
                </div>
            @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
                <div>
                    <p class="text-gray-600 font-semibold">👤 Nama Pemesan:</p>
                    <p class="text-gray-900 text-lg">{{ $booking->user->name }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-semibold">📌 Status Pemesanan:</p>
                    <p class="text-indigo-700 font-bold text-lg">{{ $booking->status_booking }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-semibold">📅 Tanggal Check-In:</p>
                    <p class="text-gray-900">{{ $booking->tanggal_checkin }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-semibold">📅 Tanggal Check-Out:</p>
                    <p class="text-gray-900">{{ $booking->tanggal_checkout }}</p>
                </div>
            </div>

            @if ($pembayaran)
                <div class="bg-gray-50 p-5 rounded-xl shadow-inner mb-6 border border-gray-200">
                    <h3 class="text-xl font-semibold text-gray-800 mb-3">💳 Informasi Pembayaran</h3>
                    <p class="mb-1"><strong>Metode:</strong> {{ $pembayaran->metode_pembayaran }}</p>
                    <p><strong>Jumlah:</strong> Rp{{ number_format($pembayaran->jumlah_pembayaran, 0, ',', '.') }}</p>

                    @if ($pembayaran->bukti_pembayaran)
                        <div class="mt-4">
                            <p class="font-semibold text-gray-700 mb-2">🖼️ Bukti Pembayaran:</p>
                            <img src="{{ asset($pembayaran->bukti_pembayaran) }}"
                                 alt="Bukti Pembayaran"
                                 class="w-full max-h-[400px] object-contain rounded-lg border border-gray-300 shadow-md">
                        </div>
                    @endif
                </div>
            @else
                <div class="bg-red-100 text-red-700 p-4 rounded-lg mb-6 border border-red-300">
                    ❌ <strong>Belum ada pembayaran</strong> untuk pesanan ini.
                </div>
            @endif

            <div class="text-right">
                <a href="{{ route('users.peta') }}"
                   class="inline-flex items-center bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white px-6 py-2 rounded-full transition-all shadow-md hover:shadow-lg">
                    ← Kembali ke Beranda
                </a>
            </div>
        </div>
    </div>
</body>

</html>
