@extends('layouts.app')

@section('content')
<section class="payment-page"><p class="eyebrow">RESERVASI {{ $booking->reference }}</p><h1>Satu langkah terakhir.</h1><p class="lede">Pilih QRIS, transfer virtual account, atau dompet digital di halaman pembayaran aman Midtrans.</p><div class="payment-summary"><div><span>{{ $booking->car->name }}</span><small>{{ $booking->total_days }} hari · {{ $booking->pickup_at->translatedFormat('d M') }} - {{ $booking->return_at->translatedFormat('d M Y') }}</small></div><strong>Rp {{ number_format($booking->total_amount, 0, ',', '.') }}</strong></div><button class="button primary wide" id="pay-button">Pilih metode pembayaran</button><p class="fine-print">Status reservasi diperbarui otomatis setelah pembayaran diterima.</p></section>
<script src="{{ config('services.midtrans.environment') === 'production' ? 'https://app.midtrans.com/snap/snap.js' : 'https://app.sandbox.midtrans.com/snap/snap.js' }}" data-client-key="{{ config('services.midtrans.client_key') }}"></script>
<script>document.getElementById('pay-button').addEventListener('click', function () { window.snap.pay(@json($booking->payment->snap_token), { onSuccess: function () { window.location = @json(route('bookings.complete', $booking)); }, onPending: function () { window.location.reload(); }, onError: function () { alert('Pembayaran belum dapat diproses. Silakan coba lagi.'); } }); });</script>
@endsection