{% extends 'core/base.html' %}
{% load static %}
{% block content %}
<div class="container mt-1">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header  bg-success text-danger bg-gradient">
                    <h4 class="mb-0 m-auto text-center">Mpesa Payment</h4>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <img src="{% static 'mobilepay/lipanampesa.png' %}" alt="Mpesa Logo" class="img-fluid mb-1">
                        <p class="text-muted mb-4">You will receive an STK push request on your Mpesa number. Please confirm the payment.</p>
                         <!-- SVG icon mimicking mobile payment -->
                         <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-currency-dollar" viewBox="0 0 16 16">
                            <path d="M10.5 0a.5.5 0 0 1 .5.5V4h-2a.5.5 0 0 1-.5-.5V0zM5 8a3 3 0 0 1 3-3h2a.5.5 0 0 1 0 1H8a2 2 0 0 0-2 2v1h2a.5.5 0 0 1 0 1H6a3 3 0 0 1-3-3zm8 0a3 3 0 0 0-3 3v1H8a.5.5 0 0 1 0-1h2a2 2 0 0 0 2-2v-1h-2a.5.5 0 0 1 0-1h2zM.5 12a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1H.5z"/>
                        </svg>
                    </div>
                    <form method="post" action="{% url 'lipa_na_mpesa' %}" class="mt-2" id="mpesaPaymentForm">
                        {% csrf_token %}
                        <div class="form-group">
                            {{ form }}
                        </div>
                        <button type="submit" class="btn btn-primary btn-block" id="submitBtn">Confirm Payment (KES: {{amount}}) Invoice #{{invoice_id}}</button>
                        <!-- Add a separate button for initiating the AJAX request -->
                        <button id="ajaxSubmitBtn" class="btn btn-primary btn-block" style="display: none;">AJAX Request</button>
                        <div id="loadingSpinner" class="mt-3" style="display: none;">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p class="mt-2">Processing payment...</p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block custom_js %}
<script>
    $(document).ready(function() {
        $('#mpesaPaymentForm').submit(function(event) {
            event.preventDefault();
            $('#submitBtn').attr('disabled', true);
            $('#loadingSpinner').show();

            // Submit the form to the STK push URL
            //this.submit();

            // Simulate an AJAX request to the Mpesa callback URL
            $.ajax({
                url: '{% url 'lipa_na_mpesa' %}',
                type: 'POST',
                data: $('#mpesaPaymentForm').serialize(),
                success: function(response) {
                    if (response.message === 'Accepted') {
                        setTimeout(function() {
                            triggerAjaxRequest();
                        }, 15000); // Delay of 10 seconds (10000 milliseconds)
                    } else {
                        showErrorAlert();
                    }
                },
                error: function() {
                    showErrorAlert();
                }
            });
        });

        function triggerAjaxRequest() {
            $('#submitBtn').attr('disabled', true);
            $('#loadingSpinner').show();

            // Simulate an AJAX request to the Mpesa callback URL
            $.ajax({
                url: '{% url 'mpesa_callback' %}',
                type: 'GET',
                //data:{'ResultCode':1},
                success: function(response) {
                     console.log(response);
                    $('#loadingSpinner').hide();
                    //$('#submitBtn').attr('disabled', false);
                    if (response.status==200) {
                        console.log(response);
                        showSuccessAlert(response.message);
                    } else {
                        showErrorAlert(response.message);
                    }
                },
                error: function(response) {
                    console.log(response.responseJSON);
                    showErrorAlert(response.responseJSON.message);
                }
            });
        }

        function showSuccessAlert(message) {
            Swal.fire({
                icon: 'success',
                title: 'Payment Successful!',
                text: message,
            });
        }

        function showErrorAlert(message) {
            $('#loadingSpinner').hide();
            $('#submitBtn').attr('disabled', false);
            Swal.fire({
                icon: 'error',
                title: 'Payment Failed',
                text: message,
            });
        }
    });
</script>
{% endblock custom_js %}