<html>
  <head>
      <title>Check Status</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
    <style>
      body {
        text-align: center;
        padding: 40px 0;
        background: #EBF0F5;
      }
        h1 {
          color: #88B04B;
          font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
          font-weight: 900;
          font-size: 40px;
          margin-bottom: 10px;
        }
        p {
          color: #404F5E;
          font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
          font-size:20px;
          margin: 0;
        }
      i {
        color: #9ABC66;
        font-size: 100px;
        line-height: 200px;
        margin-left:-15px;
      }
      .card {
        background: white;
        padding: 60px;
        border-radius: 4px;
        box-shadow: 0 2px 3px #C8D0D8;
        display: inline-block;
        margin: 0 auto;
      }
      
      .loader {
          -webkit-animation: spin 2s linear infinite; /* Safari */
          animation: spin 2s linear infinite;
        }
    
    /* Safari */
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .button {
      background-color: #04AA6D; /* Green */
      border: none;
      border-radius: 5px;
      color: white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
    
    .button1 {padding: 10px 24px;}
    </style>
    <body>
      <div class="card">
      <div id="icon_div">
        <i class="fa fa-spinner loader" style="font-size: 215px;color:green;"></i>
      </div>
        <h1 id="status" style="color:#dc7929;">Processing</h1> 
        <p id="message">Please wait few seconds.</p>
        <a class="button button1" href="index.php">Back To Home</a>
      </div>
    </body>
<script>
    // Check the status every 5 seconds
    setInterval(checkStatus, 5000);

    function checkStatus() {
        var orderId = '<?php echo $_POST['order_id'] ?>';
        if (!orderId) {
            displayError("Order ID is missing");
            return;
        }

        $.ajax({
            url: 'instant_add_money_callback.php',
            method: 'POST',
            data: { order_id: orderId },
            success: function(response) {
                try {
                    var res = JSON.parse(response);

                    if (res.status === "Success") {
                        displaySuccess(res.error_msg);
                    } else if (res.status === "Failed") {
                        displayFailure(res.error_msg);
                    } else {
                        displayPending();
                    }
                } catch (e) {
                    displayError("Invalid response from server");
                }
            },
            error: function() {
                displayError("Network or server error");
            }
        });
    }

    function displaySuccess(message) {
        $('#status').html("Success");
        $('#message').html(message);
        $('#icon_div').html('<i class="fa fa-check-circle" style="font-size: 200px;color:green;"></i>');
        document.getElementById("status").style.color = "green";
        setTimeout(function () {
            window.location.replace("index.php");
        }, 5000);
    }

    function displayFailure(message) {
        $('#status').html("Failed");
        $('#message').html(message);
        $('#icon_div').html('<i class="fa fa-times-circle" style="font-size: 200px;color:red;"></i>');
        document.getElementById("status").style.color = "red";
        setTimeout(function () {
            window.location.replace("index.php");
        }, 5000);
    }

    function displayPending() {
        $('#status').html("Pending");
        $('#message').html("Processing your request...");
        $('#icon_div').html('<i class="fa fa-spinner loader" style="font-size: 215px;color:#dc7929;"></i>');
        document.getElementById("status").style.color = "#dc7929";
    }

    function displayError(message) {
        $('#status').html("Error");
        $('#message').html(message);
        $('#icon_div').html('<i class="fa fa-times-circle" style="font-size: 200px;color:red;"></i>');
        document.getElementById("status").style.color = "red";
    }
</script>


</html>