111 lines
6.5 KiB
PHP
111 lines
6.5 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 px-2">
|
|
<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 align-items-sm-end w-80">
|
|
<div class="d-flex justify-content-sm-end mb-1">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
</div>
|
|
<strong id="no_order_display" class="d-block text-break text-wrap text-start text-sm-end small"></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 Rek.</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.Rek</span>
|
|
<div class="d-flex flex-column align-items-sm-end w-80">
|
|
<div class="d-flex justify-content-sm-end mb-1">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
</div>
|
|
<strong id="noRekText">1234-5678-9101</strong>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Nominal -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Nominal</span>
|
|
<strong id="no_order_price" class=""></strong>
|
|
</li>
|
|
|
|
<!-- Batas Waktu -->
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<span>Waktu Pembayaran</span>
|
|
<strong id="countdownPayment"></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="mb-3">
|
|
<label for="cara_pembayaran" class="form-label fw-semibold">Metode Pembayaran</label>
|
|
<select class="form-select" id="cara_pembayaran" name="cara_pembayaran" onchange="toggleBuktiPembayaran()">
|
|
<option value="transfer">Transfer Bank</option>
|
|
<option value="billing">Billing RS</option>
|
|
</select>
|
|
<input type="hidden" id="no_order_result" name="no_order_result">
|
|
</div>
|
|
|
|
<div id="bukti_section">
|
|
<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/*" onchange="previewBuktiPembayaran()">
|
|
<div id="preview_text" class="text-muted">
|
|
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>
|