111 lines
6.2 KiB
PHP
111 lines
6.2 KiB
PHP
<div class="form-step card shadow-sm border-0 p-4 d-none">
|
|
<h5 class="section-title mb-4 text-center">Langkah 3: Selesaikan Pembayaran</h5>
|
|
|
|
<div class="card shadow-sm border-0 p-4 mb-4">
|
|
<div class="row justify-content-center text-center mb-3">
|
|
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
|
|
<img src="/logo/qris.jpg" alt="Pembayaran" class="img-fluid rounded shadow" style="max-width: 360px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center px-md-3">
|
|
<div class="col-12 col-lg-10">
|
|
<div class="summary-card card shadow-sm border-0 mb-4">
|
|
<div class="card-body">
|
|
<h6 class="fw-semibold text-success mb-3 text-center text-md-start">Detail Pembayaran</h6>
|
|
<div class="row g-3 align-items-center mb-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">No. Order</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end">
|
|
<div class="d-flex flex-wrap justify-content-between justify-content-md-end align-items-center gap-2">
|
|
<strong id="no_order_display" class="small text-break"></strong>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoOrder()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Bank</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end">Bank BRI</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Nama Rekening</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end">RPL 182 RSAB HARKIT OPR BLU PENERIMAAN</div>
|
|
</div>
|
|
|
|
<div class="row g-3 align-items-center mb-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">No. Rekening</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end">
|
|
<div class="d-flex flex-wrap justify-content-between justify-content-md-end align-items-center gap-2">
|
|
<strong id="noRekText" class="text-break">096201000073308</strong>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyNoRek()">
|
|
<i class="fa fa-copy me-1"></i> Salin
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Nominal</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end fw-semibold text-success" id="no_order_price">Rp 0</div>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-5 col-sm-12 text-muted fw-semibold">Batas Waktu Pembayaran</div>
|
|
<div class="col-md-7 col-sm-12 text-md-end text-danger fw-semibold" id="countdownPayment"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-muted small text-center px-2">
|
|
Lakukan pembayaran sebelum batas waktu berakhir, kemudian unggah bukti transfer untuk mempercepat verifikasi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-10">
|
|
<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" class="mb-3">
|
|
<label for="bukti_pembayaran" class="form-label fw-semibold">Upload Bukti Pembayaran</label>
|
|
<div class="drop-zone position-relative text-center p-4">
|
|
<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 tarik file ke area ini untuk mengunggah<br>
|
|
<small>Format: JPG, PNG | Maksimal: 2MB</small>
|
|
</div>
|
|
<img id="bukti_preview" class="img-fluid rounded mt-3 d-none" style="max-height: 280px; object-fit: contain;" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3" id="billing_section" style="display:none;">
|
|
<label class="form-label fw-semibold">No. Medical Record</label>
|
|
<input type="text" class="form-control" name="medical_record" id="medical_record" placeholder="Masukkan No. Medical Record">
|
|
</div>
|
|
|
|
<div class="alert alert-warning text-muted small text-center mt-3 mb-4" role="alert">
|
|
<strong>Perhatian:</strong> Makanan yang sudah dipesan tidak dapat dibatalkan dan tidak ada pengembalian dana.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column flex-md-row justify-content-between gap-2 mt-2">
|
|
<button type="button" class="btn btn-outline-secondary px-4 prev-step">
|
|
<i class="fa fa-arrow-left me-2"></i>Kembali
|
|
</button>
|
|
<button type="submit" class="btn btn-success px-4">Selesaikan Pesanan</button>
|
|
</div>
|
|
</div>
|