<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="card shadow-lg p-4">
            <h3 class="text-center mb-3">Make a Payment</h3>
            <form id="paymentForm">
                <input type="hidden" id="transactionId" name="transactionId" value="">

                <div class="mb-3">
                    <label for="phone" class="form-label">Phone Number</label>
                    <input type="text" id="phone" name="msisdn" class="form-control" required placeholder="Enter your phone number">
                </div>
                <div class="mb-3">
                    <label for="amount" class="form-label">Amount</label>
                    <input type="text" id="amount" name="amount" class="form-control" value="5000" readonly>
                </div>
                <button type="submit" class="btn btn-primary w-100">Pay Now</button>
            </form>
            <div id="responseMessage" class="mt-3"></div>
        </div>
    </div>

    <script>
        // Function to get query parameters from URL
        function getQueryParam(param) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        // Prefill the hidden transaction ID field from URL
        document.getElementById("transactionId").value = getQueryParam("transactionId");

        document.getElementById("paymentForm").addEventListener("submit", function(event) {
            event.preventDefault();

            const phone = document.getElementById("phone").value;
            const amount = document.getElementById("amount").value;
            const transactionId = document.getElementById("transactionId").value;

            axios.post("/deposit/custom", { msisdn: phone, amount: amount, transactionId: transactionId })
                .then(response => {
                    document.getElementById("responseMessage").innerHTML = 
                        `<div class="alert alert-success">Transaction Started: ${response.data.transactionId}</div>`;
                })
                .catch(error => {
                    document.getElementById("responseMessage").innerHTML = 
                        `<div class="alert alert-danger">Error: ${error.response.data.message}</div>`;
                });
        });
    </script>
</body>
</html>
