fix layout pembayaran

This commit is contained in:
Baghiz Zuhdi Adzin 2026-01-22 10:19:24 +07:00
parent 79dfbd79a3
commit 51a5631b74
2 changed files with 95 additions and 40 deletions

View File

@ -168,14 +168,14 @@
</div>
</div>
<div class="mt-20 send_gift_check">
<!-- <div class="mt-20 send_gift_check">
<div class="form-check">
<input class="form-check-input mt-0" type="checkbox" name="is_gift" value="1" id="send_gift">
<label class="form-check-label" for="send_gift">{{ get_phrase('Send as a gift') }}</label>
</div>
<input type="email" class="form-control mt-15 gifted_user d-none" name="" placeholder="{{ get_phrase('Enter user email') }}">
</div>
</div> -->
<div class="mt-20">
<input type="submit" class="form-control eBtn gradient text-white" value="{{ get_phrase('Continue to payment') }}" @if ($count_items_price == 0) disabled @endif>

View File

@ -112,6 +112,21 @@
Rp {{ number_format($vaPayment->total_amount, 0, ',', '.') }}
</td>
</tr>
<tr>
<th class="bg-light">{{ get_phrase('Time Remaining') }}</th>
<td>
<div id="countdownWrapper" class="d-flex align-items-center">
<i class="bi bi-hourglass-split me-2 text-warning"></i>
<span id="countdown" class="fs-5 fw-semibold text-black">
--:--:--
</span>
<span class="badge bg-warning text-white ms-3">
{{ get_phrase('Waiting for payment') }}
</span>
</div>
</td>
</tr>
<tr>
<tr>
<th class="bg-light">{{ get_phrase('Expired At') }}</th>
<td class="{{ \Carbon\Carbon::now()->gt($vaPayment->expired_at) ? 'text-danger' : '' }}">
@ -126,7 +141,7 @@
<th class="bg-light">{{ get_phrase('Status') }}</th>
<td>
@if ($vaPayment->status == 0)
<span class="badge bg-warning">
<span class="badge bg-warning text-black">
<i class="bi bi-clock-history me-1"></i> {{ get_phrase('UNPAID') }}
</span>
@elseif ($vaPayment->status == 1)
@ -185,49 +200,89 @@
<script src="{{ asset('assets/payment/style/js/sweetalert2@11.js') }}"></script>
<!-- toster file -->
@include('frontend.default.toaster')
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
Swal.fire({
icon: 'success',
title: 'Copied!',
text: 'VA number copied to clipboard',
timer: 2000,
showConfirmButton: false
});
});
}
function checkPaymentStatus() {
Swal.fire({
title: 'Checking Payment Status',
text: 'Please wait...',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
// Simulate API call - replace with actual API endpoint
setTimeout(() => {
window.location.reload();
}, 1500);
}
});
}
// Auto refresh page every 60 seconds if payment is still unpaid
@if($vaPayment->status == 0 && \Carbon\Carbon::now()->lt($vaPayment->expired_at))
setTimeout(function() {
window.location.reload();
}, 60000); // 60 seconds
@endif
</script>
</body>
</html>
<<script>
document.addEventListener('DOMContentLoaded', function () {
const expiredAt = new Date("{{ \Carbon\Carbon::parse($vaPayment->expired_at)->toIso8601String() }}").getTime();
const countdownEl = document.getElementById('countdown');
const wrapperEl = document.getElementById('countdownWrapper');
if (!countdownEl || !wrapperEl) return;
function updateCountdown() {
const now = new Date().getTime();
const distance = expiredAt - now;
if (distance < 10 * 60 * 1000) {
countdownEl.classList.remove('text-warning');
countdownEl.classList.add('text-danger');
}
if (distance <= 0) {
countdownEl.innerHTML = "{{ get_phrase('Expired') }}";
countdownEl.className = "fw-bold text-danger";
wrapperEl.innerHTML = `
<i class="bi bi-x-circle-fill me-2 text-danger"></i>
<span class="fw-bold text-danger">{{ get_phrase('Expired') }}</span>
<span class="badge bg-danger ms-3">{{ get_phrase('VA not valid') }}</span>
`;
clearInterval(timer);
return;
}
const hours = Math.floor((distance / (1000 * 60 * 60)));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownEl.innerHTML =
String(hours).padStart(2, '0') + ':' +
String(minutes).padStart(2, '0') + ':' +
String(seconds).padStart(2, '0');
}
updateCountdown();
const timer = setInterval(updateCountdown, 1000);
});
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
Swal.fire({
icon: 'success',
title: 'Copied!',
text: 'VA number copied to clipboard',
timer: 2000,
showConfirmButton: false
});
});
}
function checkPaymentStatus() {
Swal.fire({
title: 'Checking Payment Status',
text: 'Please wait...',
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
// Simulate API call - replace with actual API endpoint
setTimeout(() => {
window.location.reload();
}, 1500);
}
});
}
// Auto refresh page every 60 seconds if payment is still unpaid
@if($vaPayment->status == 0 && \Carbon\Carbon::now()->lt($vaPayment->expired_at))
setTimeout(function() {
window.location.reload();
}, 60000); // 60 seconds
@endif
document.addEventListener('DOMContentLoaded', function () {
const paymentId = {{ $vaPayment->id }};
const CHECK_DELAY = 15000; // 15 detik (sesuai permintaan)