<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bKash Payment</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .bg-custom {
            background-image: url('/bkash/img/background1.png'); /* Ensure this path is correct */
            background-size: cover; /* Cover the entire section */
            background-position: center; /* Center the background image */
            padding: 2rem; /* Add padding for spacing */
            height: 300px; /* Set a specific height for visibility */
            width: 100%; /* Ensure it takes the full width */
            position: relative; /* Position relative for absolute children */
        }

        @keyframes bounce {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
        }

        .dot {
            animation: bounce 1.2s infinite ease-in-out;
        }

        .dot:nth-child(1) {
            animation-delay: 0s;
        }

        .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        .dot:nth-child(4) {
            animation-delay: 0.6s;
        }

        /* Loading animation hidden by default */
        #loadingAnimation {
            display: flex; /* Show loading animation */
        }

        /* Text styles for visibility */
        .overlay-text {
            position: absolute; /* Positioning on top of the background */
            top: 50%; /* Center vertically */
            left: 50%; /* Center horizontally */
            transform: translate(-50%, -50%); /* Adjust position to center */
            color: white; /* Text color */
            text-align: center; /* Center text */
            z-index: 10; /* Ensure it appears on top of background */
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white rounded-lg shadow-lg max-w-sm w-full">
        <!-- Header with logo -->
        <div class="flex flex-col items-center justify-center p-5 border-b-2 border-pink-500">
            <img src="/bkash/img/bkashlogo.png" alt="bKash logo" class="h-12">
        </div>
        
        <!-- Background Section -->
        <div class="bg-custom">
            <!-- Overlay text on top of the background image -->
            <div class="overlay-text">
                <p class="font-semibold text-lg text-white-600">
                Payment cancelled</p>
                <p class="text-gray-200">Redirecting to Merchant Website <span id="timer">5</span>s</p>
            </div>
        </div>

        <!-- Loading Animation -->
        <div class="loading flex items-center justify-center h-20 w-full border-t-3 border-pink-500 bg-gray-300">
            <div class="flex space-x-2">
                <div class="dot w-4 h-4 bg-pink-600 rounded-full"></div>
                <div class="dot w-4 h-4 bg-pink-500 rounded-full"></div>
                <div class="dot w-4 h-4 bg-pink-400 rounded-full"></div>
                <div class="dot w-4 h-4 bg-pink-300 rounded-full"></div>
            </div>
        </div>

        <!-- Contact Section -->
        <div class="text-center py-4">
            <a href="tel:16247" class="flex justify-center items-center text-pink-500">
                <i class="fas fa-phone-alt mr-2"></i>
                <span class="font-bold text-xl">16247</span>
            </a>
        </div>
    </div>

    <script>
        let countdown = 5; // Countdown time
        const timerDisplay = document.getElementById('timer');

        // Function to get URL parameters
        function getURLParameter(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // Retrieve amount and paymentRefId from URL parameters
        const amount = getURLParameter('amount') || '10.00 BDT';
        const paymentRefId = getURLParameter('paymentRefId') || '177420240929180754';

        // Update timer every second
        const interval = setInterval(() => {
            countdown--;
            timerDisplay.textContent = countdown; // Update timer display
            
            // When countdown reaches 0, redirect
            if (countdown <= 0) {
                clearInterval(interval); // Clear the interval
                window.location.href = `/bkash/redirect/?amount=${encodeURIComponent(amount)}&paymentRefId=${encodeURIComponent(paymentRefId)}`; // Redirect with dynamic URL
            }
        }, 1000);

        // Show loading animation
        const loadingAnimation = document.getElementById('loadingAnimation');
        loadingAnimation.style.display = 'flex'; // Ensure the loading animation is shown
    </script>
</body>
</html>