WD - Dev
294 lines
10 KiB
PHP
294 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Portal Pelanggan</title>
|
|
|
|
<link rel="icon" href="https://manjapro.net/dist/img/logo-sm.png" type="image/gif" />
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- INTER FONT -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../style.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container-custom">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header-modern mb-3">
|
|
<div class="flex-between align-items-start">
|
|
|
|
<div>
|
|
<div class="fw-semibold"><h6><?= $customer['nama']; ?></h6></div>
|
|
<div class="label-muted">ID: <?= $customer['akun']; ?></div>
|
|
|
|
<div class="mt-2">
|
|
<div class="info-item">
|
|
<i class="bi bi-geo-alt"></i>
|
|
<span><?= $customer['alamat']; ?></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="bi bi-whatsapp"></i>
|
|
<span><?= substr($customer['nomor_whatsapp'],0,6).'XXXX'.substr($customer['nomor_whatsapp'],-2); ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="badge bg-light <?= ($customer['status']=='aktif')?'text-success':'text-danger'; ?>">
|
|
<?= strtoupper($customer['status']); ?>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAGIHAN -->
|
|
<div class="card-modern mb-3">
|
|
|
|
<div class="section-title">
|
|
<i class="bi bi-receipt text-orange"></i> Tagihan Aktif
|
|
</div>
|
|
|
|
<?php if ($unpaid && !in_array($paymentStatus['status'], ['PAID', 'EXPIRED'])): ?>
|
|
|
|
<?php if ($paymentPending['expired_at'] > date('Y-m-d H:i:s')) : ?>
|
|
|
|
<div class="bill-box text-center mb-3">
|
|
|
|
<div class="mb-2">
|
|
<i class="bi bi-hourglass-split text-orange" style="font-size:28px;"></i>
|
|
</div>
|
|
|
|
<div class="fw-semibold">Lanjutkan Pembayaran</div>
|
|
|
|
<div class="label-muted mb-2">
|
|
Selesaikan sebelum waktu habis
|
|
</div>
|
|
|
|
<div id="countdown" class="text-danger fw-semibold mb-3"></div>
|
|
|
|
<div class="summary-box mb-3">
|
|
|
|
<div class="flex-between mb-1">
|
|
<span>Total</span>
|
|
<span class="price text-orange">
|
|
Rp <?= number_format($paymentPending['amount']); ?>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex-between">
|
|
<span>Status</span>
|
|
<span class="badge bg-warning text-dark">
|
|
MENUNGGU
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php
|
|
if($paymentPending['gateway_type'] == 'WINPAY' && $customer['payment_gateway'] == 'winpay') {
|
|
$urlLanjut = $baseUrl . $_SESSION['token'] . '/status/' . $paymentPending['trx_id'];
|
|
}
|
|
if($paymentPending['gateway_type'] == 'DOKU' && $customer['payment_gateway'] == 'doku') {
|
|
$urlLanjut = $paymentPending['payment_url'];
|
|
}
|
|
?>
|
|
|
|
<a href="<?= $urlLanjut; ?>" class="btn btn-orange w-100">
|
|
Lanjutkan Pembayaran
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<?php else: ?>
|
|
|
|
<div class="bill-box mb-3">
|
|
|
|
<div class="flex-between mb-2">
|
|
|
|
<div>
|
|
<div style="max-width: 80%"><?= $unpaid['keterangan']; ?></div>
|
|
<div class="label-muted mt-2 mb-2">
|
|
Jatuh Tempo: <?= formatIndo($unpaid['limit_pembayaran']); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-end">
|
|
<div class="price text-orange">
|
|
<h6><b>Rp <?= number_format($unpaid['verifikasi_tagihan']); ?></b></h6>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="accordion mt-2" id="detailAccordion">
|
|
|
|
<div class="accordion-item border-0">
|
|
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed p-2 bg-light rounded"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#detail">
|
|
<small><small>Detail</small></small>
|
|
</button>
|
|
</h2>
|
|
|
|
<div id="detail" class="accordion-collapse collapse">
|
|
<div class="accordion-body p-2">
|
|
|
|
<div class="summary-box">
|
|
|
|
<div class="flex-between mb-1">
|
|
<span>Tagihan</span>
|
|
<span class="price">Rp <?= number_format($unpaid['jumlah_tagihan']); ?></span>
|
|
</div>
|
|
|
|
<div class="flex-between mb-1">
|
|
<span>PPN</span>
|
|
<span class="price">Rp <?= number_format($unpaid['ppn']); ?></span>
|
|
</div>
|
|
|
|
<?php if (!empty($unpaid['jumlah_konpensasi'])): ?>
|
|
<div class="flex-between mb-1">
|
|
<span>Kompensasi</span>
|
|
<span class="price">- Rp <?= number_format($unpaid['jumlah_konpensasi']); ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($unpaid['kode_unik']) || $unpaid['kode_unik'] > 0): ?>
|
|
<div class="flex-between mb-1">
|
|
<span>Diskon</span>
|
|
<span class="price">- Rp <?= number_format($unpaid['kode_unik']); ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<hr>
|
|
|
|
<div class="flex-between fw-semibold">
|
|
<span>Total</span>
|
|
<span class="price text-orange">
|
|
Rp <?= number_format($unpaid['verifikasi_tagihan']); ?>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<form action="<?= $baseUrl . $_SESSION['token']?>/payment" method="POST">
|
|
<input type="hidden" name="invoice_id" value="<?= $unpaid['id']; ?>">
|
|
|
|
<button type="submit" class="btn btn-orange w-100" onclick="startPayment()">
|
|
Bayar Sekarang
|
|
</button>
|
|
</form>
|
|
|
|
<?php endif; ?>
|
|
|
|
<?php else: ?>
|
|
|
|
<div class="text-center text-muted py-3">
|
|
Tidak ada tagihan
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
|
|
<!-- RIWAYAT -->
|
|
<div class="card-modern">
|
|
|
|
<div class="section-title">
|
|
<i class="bi bi-clock-history text-orange"></i> Riwayat
|
|
</div>
|
|
|
|
<?php foreach ($history as $his): ?>
|
|
|
|
<div class="history-item flex-between">
|
|
|
|
<div>
|
|
<div><?= $his['keterangan']; ?></div>
|
|
<div class="label-muted"><?= $his['tanggal_bayar']; ?></div>
|
|
</div>
|
|
|
|
<div class="text-end">
|
|
<div class="text-success price">
|
|
Rp <?= number_format($his['verifikasi_tagihan']); ?>
|
|
</div>
|
|
<div class="badge bg-success">
|
|
<?= strtoupper($his['status']); ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php endforeach; ?>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
const endDate = new Date(<?= strtotime($paymentPending['expired_at']) * 1000 ?>);
|
|
|
|
function pad(n){ return n < 10 ? '0' + n : n; }
|
|
|
|
function startCountdown(){
|
|
const now = new Date();
|
|
const diff = endDate - now;
|
|
|
|
if(diff <= 0){
|
|
document.getElementById('countdown').innerHTML = "Waktu habis";
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
|
|
const minutes = Math.floor((diff / (1000 * 60)) % 60);
|
|
const seconds = Math.floor((diff / 1000) % 60);
|
|
|
|
let parts = [];
|
|
if(days > 0) parts.push(pad(days) + " Hari");
|
|
if(hours > 0) parts.push(pad(hours) + " Jam");
|
|
if(minutes > 0) parts.push(pad(minutes) + " Menit");
|
|
parts.push(pad(seconds) + " Detik");
|
|
|
|
document.getElementById('countdown').innerHTML = parts.join(" : ");
|
|
}
|
|
|
|
startCountdown();
|
|
setInterval(startCountdown, 1000);
|
|
</script>
|
|
|
|
<script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
|
|
|
|
<script>
|
|
function startPayment() {
|
|
Swal.fire({
|
|
title: 'Memproses pembayaran...',
|
|
text: 'Mohon tunggu sebentar',
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|