From 51a5631b744504446a4992009cfad7ec759d31d8 Mon Sep 17 00:00:00 2001
From: Baghiz Zuhdi Adzin <74885652+baghizzhd@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:19:24 +0700
Subject: [PATCH] fix layout pembayaran

---
 .../default/student/cart/index.blade.php      |   4 +-
 resources/views/payment/va_show.blade.php     | 131 +++++++++++++-----
 2 files changed, 95 insertions(+), 40 deletions(-)

diff --git a/resources/views/frontend/default/student/cart/index.blade.php b/resources/views/frontend/default/student/cart/index.blade.php
index bba49c8..86f524f 100644
--- a/resources/views/frontend/default/student/cart/index.blade.php
+++ b/resources/views/frontend/default/student/cart/index.blade.php
@@ -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>
diff --git a/resources/views/payment/va_show.blade.php b/resources/views/payment/va_show.blade.php
index 9c66edb..21a39ab 100644
--- a/resources/views/payment/va_show.blade.php
+++ b/resources/views/payment/va_show.blade.php
@@ -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)