@extends('layouts.user.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-[#8B0000]">Detail Transaksi</h1>
        <a href="{{ route('transaksi.index') }}" class="text-[#8B0000] hover:text-[#660000]">
            Kembali ke Daftar Transaksi
        </a>
    </div>

    <!-- Detail Reservasi -->
    <div class="space-y-6">
        <div class="bg-white rounded-lg p-6">
            <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 Pemesan -->
        <div class="bg-white rounded-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Detail Pemesan</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-gray-600">Nama:</p>
                    <p class="font-medium">{{ $reservasi->name }}</p>
                </div>
                <div>
                    <p class="text-gray-600">Email:</p>
                    <p class="font-medium">{{ $reservasi->user->email }}</p>
                </div>
                <div>
                    <p class="text-gray-600">No. Telepon:</p>
                    <p class="font-medium">{{ $reservasi->phone }}</p>
                </div>
                @if($reservasi->notes)
                <div>
                    <p class="text-gray-600">Catatan:</p>
                    <p class="font-medium">{{ $reservasi->notes }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Detail Pesanan -->
        <div class="bg-white rounded-lg p-6">
            <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 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')
                <!-- Payment Section -->
                <div class="flex justify-between items-center mt-4">
                    @if(isset($snapToken))
                        <!-- Cancel Button -->
                        <form action="{{ route('transaksi.cancel', $transaksi->id) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin ingin membatalkan pesanan ini?');">
                            @csrf
                            @method('PUT')
                            <button type="submit" class="bg-[#8B0000] text-white py-3 px-6 rounded-lg hover:bg-[#660000] transition">
                                Batalkan Pesanan
                            </button>
                        </form>

                        <!-- Midtrans Payment Button -->
                        <button id="pay-button" class="bg-green-500 text-white py-3 px-6 rounded-lg hover:bg-green-600 transition">
                            Bayar Sekarang
                        </button>

                        <!-- Midtrans Scripts -->
                        <script type="text/javascript" src="https://app.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>
                    @else
                        <a href="{{ route('transaksi.show', $transaksi->id) }}" class="bg-[#8B0000] text-white py-3 px-6 rounded-lg hover:bg-[#660000] transition inline-block">
                            Lanjutkan ke Halaman Pembayaran
                        </a>
                    @endif
                </div>
            @elseif($transaksi->status === 'paid')
                <div class="text-center">
                    <div class="bg-green-50 text-green-800 p-4 rounded-lg">
                        <p class="font-medium">Pembayaran telah berhasil dilakukan pada {{ $transaksi->paid_at ? $transaksi->paid_at->format('d M Y H:i') : '-' }}</p>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection