@extends('layouts.user.app')


@section('content')
<div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl font-bold text-[#8B0000] mb-8">Detail Transaksi</h1>

        @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
        @endif

        @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
        @endif

        <!-- Detail Reservasi -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">Detail Reservasi</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-gray-600">Nomor Meja:</p>
                    <p class="font-medium">Meja {{ $reservasi->meja->nomor_meja }} ({{ ucfirst($reservasi->meja->kategori) }} - {{ $reservasi->meja->kapasitas }} Orang)</p>
                </div>
                <div>
                    <p class="text-gray-600">Tanggal:</p>
                    <p class="font-medium">{{ \Carbon\Carbon::parse($reservasi->date)->format('d M Y') }}</p>
                </div>
                <div>
                    <p class="text-gray-600">Jam:</p>
                    <p class="font-medium">{{ \Carbon\Carbon::parse($reservasi->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($reservasi->end_time)->format('H:i') }}</p>
                </div>
                <div>
                    <p class="text-gray-600">Kode Transaksi:</p>
                    <p class="font-medium">{{ $transaksi->transaction_code }}</p>
                </div>
            </div>
        </div>

        <!-- Detail Pesanan -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4">Detail Pesanan</h2>
            <div class="space-y-4">
                @foreach($items as $item)
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-medium">{{ $item->menu_name }}</p>
                        <p class="text-sm text-gray-600">{{ $item->quantity }}x @ Rp {{ number_format($item->price, 0, ',', '.') }}</p>
                    </div>
                    <p class="font-medium">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</p>
                </div>
                @endforeach

                <div class="border-t pt-4 mt-4">
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <p class="text-gray-600">Subtotal</p>
                            <p class="font-medium">Rp {{ number_format($transaksi->total_amount, 0, ',', '.') }}</p>
                        </div>
                        <div class="flex justify-between items-center font-bold text-lg pt-2 border-t">
                            <p>Total</p>
                            <p class="text-[#8B0000]">Rp {{ number_format($transaksi->final_amount, 0, ',', '.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status Pembayaran -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Status Pembayaran</h2>
            <div class="mb-6">
                <p class="text-gray-600">Status:</p>
                <p class="font-medium">
                    @if($transaksi->status === 'pending')
                        <span class="text-yellow-600">Menunggu Pembayaran</span>
                    @elseif($transaksi->status === 'paid')
                        <span class="text-green-600">Pembayaran Berhasil</span>
                    @else
                        <span class="text-red-600">Pembayaran Dibatalkan</span>
                    @endif
                </p>
            </div>

            @if($transaksi->status === 'pending' && isset($snapToken))
                <!-- Midtrans Payment Button -->
                <div class="text-center">
                    <button id="pay-button" class="bg-[#8B0000] text-white py-3 px-6 rounded-lg hover:bg-[#660000] transition">
                        Bayar Sekarang
                    </button>
                </div>

                <!-- Midtrans Scripts -->
                <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}"></script>
                <script type="text/javascript">
                    document.getElementById('pay-button').onclick = function() {
                        snap.pay('{{ $snapToken }}', {
                            onSuccess: function(result) {
                                window.location.href = '{{ route('transaksi.finish') }}?order_id=' + result.order_id;
                            },
                            onPending: function(result) {
                                window.location.href = '{{ route('transaksi.unfinish') }}?order_id=' + result.order_id;
                            },
                            onError: function(result) {
                                window.location.href = '{{ route('transaksi.error') }}?order_id=' + result.order_id;
                            },
                            onClose: function() {
                                alert('Anda menutup popup tanpa menyelesaikan pembayaran');
                            }
                        });
                    };
                </script>
            @endif

            <!-- Tombol Kembali -->
            <div class="mt-6">
                <a href="{{ route('transaksi.index') }}" class="block w-full bg-gray-500 text-white text-center py-3 rounded-lg hover:bg-gray-600 transition">
                    Kembali ke Daftar Transaksi
                </a>
            </div>
        </div>
    </div>
</div>
@endsection