@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Pembayaran</h1>

            <div class="mb-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-2">Detail Transaksi</h2>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-600">Kode Transaksi</p>
                            <p class="font-medium">{{ $transaksi->kode_transaksi }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600">Total Pembayaran</p>
                            <p class="font-medium text-[#2C7A7B]">Rp {{ number_format($transaksi->total_pembayaran, 0, ',', '.') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-2">Detail Pengiriman</h2>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="space-y-2">
                        <div>
                            <p class="text-sm text-gray-600">Nama Penerima</p>
                            <p class="font-medium">{{ $transaksi->nama_penerima }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600">No. Telepon</p>
                            <p class="font-medium">{{ $transaksi->no_telp }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600">Alamat</p>
                            <p class="font-medium">{{ $transaksi->alamat }}</p>
                        </div>
                        @if($transaksi->catatan_pengiriman)
                        <div>
                            <p class="text-sm text-gray-600">Catatan Pengiriman</p>
                            <p class="font-medium">{{ $transaksi->catatan_pengiriman }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h2 class="text-lg font-semibold text-gray-700 mb-2">Metode Pembayaran</h2>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-600 mb-4">Silakan pilih metode pembayaran yang tersedia:</p>
                    <button id="pay-button" class="w-full bg-[#2C7A7B] hover:bg-[#1C6B6B] text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
                        Pilih Metode Pembayaran
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.client_key') }}"></script>
<script>
    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() {
                // Handle onClose
            }
        });
    };
</script>
@endpush
@endsection