79 lines
4.7 KiB
PHP
79 lines
4.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pembayaran {{ $transaction->transaction_code }}</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; padding: 28px 16px; background: #f1f5f9; color: #172033; font-family: Inter, system-ui, sans-serif; }
|
|
.shell { width: min(920px, 100%); margin: auto; }
|
|
.back { display: inline-block; margin-bottom: 18px; color: #475569; text-decoration: none; font-weight: 700; }
|
|
.grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; }
|
|
.card { padding: 26px; background: white; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 14px 36px rgba(15,23,42,.07); }
|
|
.car-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; }
|
|
h1 { margin: 0 0 8px; font-size: 1.6rem; } h2 { margin-top: 18px; font-size: 1.1rem; }
|
|
.muted { color: #64748b; } .price { font-size: 1.45rem; font-weight: 800; color: #4338ca; }
|
|
.timer { margin: 16px 0 22px; padding: 16px; text-align: center; border-radius: 14px; background: #fff7ed; color: #9a3412; }
|
|
.timer strong { display: block; margin-top: 5px; font-size: 2rem; font-variant-numeric: tabular-nums; }
|
|
label { display: block; margin: 13px 0; font-weight: 700; }
|
|
input, select, textarea { width: 100%; margin-top: 7px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
|
|
textarea { min-height: 85px; resize: vertical; }
|
|
button { width: 100%; padding: 14px; border: 0; border-radius: 11px; background: #4f46e5; color: white; font-size: 1rem; font-weight: 800; cursor: pointer; }
|
|
.alert { margin-bottom: 15px; padding: 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; }
|
|
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<a class="back" href="{{ route('mobil-bekas.detail', $transaction->category) }}">← Kembali ke detail mobil</a>
|
|
<div class="grid">
|
|
<section class="card">
|
|
<img class="car-image" src="{{ $transaction->category->image_url }}" alt="{{ $transaction->category->name }}">
|
|
<h2>{{ $transaction->category->name }}</h2>
|
|
<p class="muted">Kode transaksi: {{ $transaction->transaction_code }}</p>
|
|
<p class="price">Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}</p>
|
|
</section>
|
|
<section class="card">
|
|
<h1>Selesaikan Pembayaran</h1>
|
|
<p class="muted">Mobil telah dikunci khusus untuk Anda. Unggah bukti sebelum waktunya habis.</p>
|
|
<div class="timer">Sisa waktu pembayaran<strong id="countdown">10:00</strong></div>
|
|
@if($errors->any())
|
|
<div class="alert">{{ $errors->first() }}</div>
|
|
@endif
|
|
<form action="{{ route('transactions.upload', $transaction) }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<label>Nama Pembeli<input type="text" name="customer_name" value="{{ old('customer_name', $transaction->customer_name) }}" required></label>
|
|
<label>No. Telepon<input type="text" name="customer_phone" value="{{ old('customer_phone', $transaction->customer_phone) }}"></label>
|
|
<label>Email<input type="email" name="customer_email" value="{{ old('customer_email', $transaction->customer_email) }}"></label>
|
|
<label>Metode Pembayaran<select name="payment_method" required><option value="transfer">Transfer Bank</option><option value="cash">Tunai</option></select></label>
|
|
<label>Bukti Pembayaran<input type="file" name="payment_proof" accept=".jpg,.jpeg,.png,.pdf" required></label>
|
|
<label>Catatan<textarea name="note">{{ old('note') }}</textarea></label>
|
|
<button id="submitButton" type="submit">Kirim Bukti Pembayaran</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const expiresAt = new Date(@json($transaction->expires_at->toIso8601String())).getTime();
|
|
const countdown = document.getElementById('countdown');
|
|
const submitButton = document.getElementById('submitButton');
|
|
const expiredUrl = @json(route('semua-mobil-bekas'));
|
|
function updateCountdown() {
|
|
const remaining = Math.max(0, expiresAt - Date.now());
|
|
const totalSeconds = Math.ceil(remaining / 1000);
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const seconds = totalSeconds % 60;
|
|
countdown.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
if (remaining <= 0) {
|
|
submitButton.disabled = true;
|
|
submitButton.textContent = 'Waktu Pembayaran Habis';
|
|
window.location.replace(expiredUrl);
|
|
}
|
|
}
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|