100 lines
5.9 KiB
PHP
100 lines
5.9 KiB
PHP
<div class="form-step">
|
|
<h5 class="mb-4 text-center fw-bold">Langkah 3: Lakukan Pembayaran</h5>
|
|
|
|
<div class="card shadow-sm p-4">
|
|
<div class="row justify-content-center text-center">
|
|
<div class="col-12 col-sm-10 col-md-8 col-lg-6 mb-3">
|
|
<img src="gambar/images.jpg" alt="Pembayaran"
|
|
class="img-fluid rounded shadow w-100"
|
|
style="max-width: 500px; height: auto;">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-8">
|
|
<div class="text-center mb-3">
|
|
<h6 class="fw-bold">Detail Pembayaran</h6>
|
|
</div>
|
|
<ul class="list-group list-group-flush mb-3 shadow-sm rounded overflow-hidden">
|
|
<!-- No Order -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
|
|
<span>No Order</span>
|
|
<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2 text-end">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
<strong id="no_order_display" class="text-break"></strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Bank -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Bank</span>
|
|
<strong>Bank BCA</strong>
|
|
</li>
|
|
|
|
<!-- Nama Rekening -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Nama Rekening</span>
|
|
<strong>RSAB Harapan Kita</strong>
|
|
</li>
|
|
|
|
<!-- No Rek -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
|
|
<span>No Rekening:</span>
|
|
<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2 text-end">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoRek()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
<strong id="noRekText">1234-5678-9101</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Nominal -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Nominal yang harus dibayar</span>
|
|
<strong id="no_order_price"></strong>
|
|
</li>
|
|
|
|
<!-- Batas Waktu -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Batas Waktu Pembayaran</span>
|
|
<strong>12/07/2025 15:30</strong>
|
|
</li>
|
|
</ul>
|
|
<p class="text-muted small text-center px-2">
|
|
Mohon untuk melakukan pembayaran sebelum batas waktu yang tertera, lalu unggah bukti pembayaran sebagai konfirmasi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row justify-content-center mt-4">
|
|
<div class="col-md-8">
|
|
<input type="hidden" id="no_order_result" name="no_order_result">
|
|
<label for="bukti_pembayaran" class="form-label fw-semibold">Upload Bukti Pembayaran</label>
|
|
|
|
<div class="card p-3 border-dashed position-relative text-center shadow-sm">
|
|
<input type="file" class="form-control position-absolute top-0 start-0 opacity-0 w-100 h-100"
|
|
id="bukti_pembayaran" name="bukti_pembayaran" accept="image/*" required onchange="previewBuktiPembayaran()">
|
|
<div id="preview_text" class="text-muted" required>
|
|
Klik atau drag file ke sini untuk upload<br>
|
|
<small>Format: JPG, PNG | Max: 2MB</small>
|
|
</div>
|
|
<img id="bukti_preview" class="img-fluid rounded mt-3 d-none" style="max-height: 300px; object-fit: contain;" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center mt-4">
|
|
<button type="submit" class="btn btn-success w-100">Selesaikan Pesanan</button>
|
|
</div>
|
|
</div>
|