From a189d988d9f05c132d9d6c9de395570eb243c8d9 Mon Sep 17 00:00:00 2001
From: ardhikaxx <ardhikayanuar58@gmail.com>
Date: Mon, 9 Mar 2026 01:20:20 +0700
Subject: [PATCH] fix(booking): samakan fitur pembayaran dengan ticketing

---
 .../views/user/bookings/payment.blade.php     | 147 ++++++++++++++----
 1 file changed, 115 insertions(+), 32 deletions(-)

diff --git a/resources/views/user/bookings/payment.blade.php b/resources/views/user/bookings/payment.blade.php
index 5b8713f..9586c52 100644
--- a/resources/views/user/bookings/payment.blade.php
+++ b/resources/views/user/bookings/payment.blade.php
@@ -4,44 +4,127 @@
 
 @section('content')
 <div class="page-hero mb-4" data-aos="fade-down">
-    <h3 class="mb-1"><i class="fas fa-wallet me-2"></i>Pembayaran Booking</h3>
-    <p class="mb-0">Kode Booking: <strong>{{ $booking->booking_code }}</strong> | Total: <strong>Rp {{ number_format($booking->total_price,0,',','.') }}</strong></p>
-</div>
-
-<div class="row g-4">
-    <div class="col-lg-7" data-aos="fade-right">
-        <div class="card h-100">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="fas fa-building-columns me-2"></i>Rekening Tujuan</h5>
-            </div>
-            <div class="card-body">
-                @foreach($banks as $bank)
-                    <div class="border rounded-3 p-3 mb-3 bg-light-subtle">
-                        <small class="text-muted">{{ $bank->bank_name }} - a/n {{ $bank->account_name }}</small>
-                        <div class="fw-bold fs-5">{{ $bank->account_number }}</div>
-                    </div>
-                @endforeach
-            </div>
+    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+        <div>
+            <h3 class="mb-1"><i class="fas fa-wallet me-2"></i>Pembayaran Booking</h3>
+            <p class="mb-0">Kode Booking: <strong>{{ $booking->booking_code }}</strong></p>
+        </div>
+        <div class="text-lg-end">
+            <small class="d-block">Total Pembayaran</small>
+            <h3 class="mb-0">Rp {{ number_format($booking->total_price, 0, ',', '.') }}</h3>
         </div>
     </div>
+</div>
 
-    <div class="col-lg-5" data-aos="fade-left">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="fas fa-upload me-2"></i>Upload Bukti Transfer</h5>
-            </div>
-            <div class="card-body">
-                <form action="{{ route('user.bookings.upload',$booking->booking_code) }}" method="POST" enctype="multipart/form-data">
-                    @csrf
-                    <div class="border rounded-3 p-4 text-center mb-3" onclick="document.getElementById('proof').click()" style="cursor:pointer; border-style:dashed !important;">
-                        <i class="fas fa-cloud-arrow-up fa-2x text-muted mb-2"></i>
-                        <p class="mb-0">Klik untuk memilih file bukti transfer</p>
-                        <input type="file" class="d-none" id="proof" name="payment_proof" accept="image/*,.pdf" required>
+<div class="card mb-4" data-aos="fade-up">
+    <div class="card-header">
+        <h5 class="mb-0"><i class="fas fa-building-columns me-2"></i>Transfer ke Rekening Berikut</h5>
+    </div>
+    <div class="card-body">
+        <div class="row g-3">
+            @foreach($banks as $bank)
+            <div class="col-md-6">
+                <div class="border rounded-3 p-3 h-100 bg-light-subtle">
+                    <div class="d-flex justify-content-between align-items-start gap-2">
+                        <div>
+                            <h6 class="mb-1">{{ $bank->bank_name }}</h6>
+                            <small class="text-muted">a/n {{ $bank->account_name }}</small>
+                            <div class="h5 mt-2 mb-0 font-monospace">{{ $bank->account_number }}</div>
+                        </div>
+                        <button class="btn btn-outline-primary btn-sm copy-btn" type="button" data-no="{{ $bank->account_number }}">
+                            <i class="fas fa-copy me-1"></i>Salin
+                        </button>
                     </div>
-                    <button class="btn btn-primary w-100" type="submit">Kirim Bukti</button>
-                </form>
+                </div>
             </div>
+            @endforeach
         </div>
     </div>
 </div>
+
+<div class="card" data-aos="fade-up" data-aos-delay="120">
+    <div class="card-header">
+        <h5 class="mb-0"><i class="fas fa-upload me-2"></i>Upload Bukti Pembayaran</h5>
+    </div>
+    <div class="card-body">
+        <form action="{{ route('user.bookings.upload', $booking->booking_code) }}" method="POST" enctype="multipart/form-data">
+            @csrf
+            <div class="border rounded-3 p-4 text-center" id="dropZone" style="cursor:pointer; border-style:dashed !important;">
+                <i class="fas fa-cloud-arrow-up fa-3x mb-2 text-primary"></i>
+                <h6 class="mb-1">Klik atau drag file ke sini</h6>
+                <p class="text-muted mb-2">Format JPG, PNG, PDF (maks 5MB)</p>
+                <input type="file" id="proofFile" name="payment_proof" class="d-none" accept="image/*,.pdf" required>
+                <img id="previewImg" class="mt-3 rounded shadow d-none" style="max-height: 260px; max-width: 100%;">
+            </div>
+
+            <div class="alert alert-info mt-3 mb-0">
+                Verifikasi pembayaran dilakukan maksimal 1x24 jam.
+            </div>
+
+            <button type="submit" class="btn btn-primary w-100 mt-3">Kirim Bukti Pembayaran</button>
+        </form>
+    </div>
+</div>
 @endsection
+
+@push('scripts')
+<script>
+const dropZone = document.getElementById('dropZone');
+const proofFile = document.getElementById('proofFile');
+const previewImg = document.getElementById('previewImg');
+
+dropZone.addEventListener('click', () => proofFile.click());
+
+['dragenter', 'dragover'].forEach((eventName) => {
+    dropZone.addEventListener(eventName, (e) => {
+        e.preventDefault();
+        dropZone.classList.add('bg-light');
+    });
+});
+
+['dragleave', 'drop'].forEach((eventName) => {
+    dropZone.addEventListener(eventName, (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('bg-light');
+    });
+});
+
+dropZone.addEventListener('drop', (e) => {
+    if (e.dataTransfer.files.length) {
+        proofFile.files = e.dataTransfer.files;
+        showPreview();
+    }
+});
+
+proofFile.addEventListener('change', showPreview);
+
+function showPreview() {
+    const file = proofFile.files[0];
+    if (!file) return;
+
+    if (file.type.startsWith('image/')) {
+        previewImg.src = URL.createObjectURL(file);
+        previewImg.classList.remove('d-none');
+    } else {
+        previewImg.classList.add('d-none');
+    }
+}
+
+document.querySelectorAll('.copy-btn').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+        const text = btn.dataset.no;
+        try {
+            await navigator.clipboard.writeText(text);
+        } catch (e) {
+            const tmp = document.createElement('input');
+            tmp.value = text;
+            document.body.appendChild(tmp);
+            tmp.select();
+            document.execCommand('copy');
+            tmp.remove();
+        }
+        Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: 'Nomor rekening disalin', showConfirmButton: false, timer: 1800 });
+    });
+});
+</script>
+@endpush