{% extends 'partials/new_base.html' %}
{% load static %}
{% load humanize %}
{% block content %}
<!--<div class="dep_con">-->
<!--    <div class="container">-->
        <!-- <div class="url">
<!--            https://preciselogs.net/?status=successful&tx_ref=HfMtSFkx2B8Fnr88Lf3b6z&transaction_id=1508567112-->
<!--        </div> -->
<!--        <img src="{% static 'img/flutterwave.png' %}" alt="Flutterwave Logo">-->
<!--        <p class="dep_p">You can deposit funds with Flutterwave. They will be automatically added to your account!</p>-->
<!--        <form id="paymentForm" method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">-->
<!--            {% csrf_token %}-->
<!--            <input type="hidden" name="public_key" value="FLWPUBK-41f24a7b6e186b518f48d5ccee2c90b3-X">-->
<!--            <input type="hidden" name="customer[email]" value="{{ request.user.email }}">-->
<!--            <input type="hidden" name="customer[name]" value="{{ request.user.username }}">-->
<!--            <input type="hidden" name="tx_ref" value="{{ ref }}">-->
<!--            <input type="hidden" name="redirect_url" value="https://preciselogs.net/payment/">-->
<!--            <input type="hidden" name="currency" value="NGN">-->
<!--            <input type="hidden" name="meta[source]" value="Preciselogs">-->
<!--            <div class="dep_in" style="display: flex;">-->
<!--                <input type="number" min="10" max="1000000" name="amount" required id="dep_amount" placeholder="Amount (NGN)">-->
<!--            </div>-->
<!--            <div class="note">-->
<!--                <p class="dep_p">Note:</p>-->
<!--                <ul>-->
<!--                    <li>Minimum Payment: 10</li>-->
<!--                    <li>Maximum Payment: 1,000,000</li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="checkbox">-->
<!--                <input type="checkbox" required id="agree">-->
<!--                <label style="text-align: left;" for="agree">Yes, I understand after the funds added i will not ask fraudulent dispute or Charge-back!</label>-->
<!--            </div>-->
<!--            <button type="button" id="flu_paynow" class="btn">PAY NOW</button>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->

<div class="container">
        <div class="row gy-4 my-5">
            <div class="col-xl-12 col-sm-12">
                <div class="dashboard-widget">
                    <form id="paymentForm" method="POST" action="https://checkout.flutterwave.com/v3/hosted/pay">
            {% csrf_token %}
            <input type="hidden" name="public_key" value="FLWPUBK-41f24a7b6e186b518f48d5ccee2c90b3-X">
            <input type="hidden" name="customer[email]" value="{{ request.user.email }}">
            <input type="hidden" name="customer[name]" value="{{ request.user.username }}">
            <input type="hidden" name="tx_ref" value="{{ ref }}">
            <input type="hidden" name="redirect_url" value="https://preciselogs.net/payment/">
            <input type="hidden" name="currency" value="NGN">
            <input type="hidden" name="meta[source]" value="Preciselogs">
                        <p class="mt-3 p-3">Top up your wallet easily using Bank Transfer or Card</p>

                        <a style="font-weight: bolder" href="https://t.me/Preciselogs/">How to fund your wallet</a>


                        <div class="p-3">
                            <div class="card-body">
                                <h6>Enter Amount (NGN)</h6>
                                <input type="number" id="dep_amount" class="form-control" min="10" max="1000000" name="amount" required placeholder="Amount (NGN)">
                                <!--<input type="number" name="amount" class="form-control" required="">-->
                                <!--<input type="text" hidden="" value="enkpay" name="payment">-->
                            </div>

                        </div>


                        <div class="p-3">

                            <div class="card-body">
                                <h6 class="mb-2">Select Payment Gateway</h6>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="col-12">
                                        <select class="form-control select select-has-icon" name="gateway" required="">
                                                                                            <option value="250">FLUTTERWAVE</option>
                                                                                    </select>
                                    </div>
                                </div>


                            </div>

                        </div>

                        <div class="p-3">

                            <button type="button" style="background: linear-gradient(90deg, #0F0673 0%, #B00BD9 100%); color:#ffffff;" class="btn btn-main btn-lg w-100 pill p-3" id="flu_paynow">Continue

                        </button>
                        </div>


                    </form>
                    

                </div>
            </div>

            <div class="col-xl-12 col-sm-12 p-2">
                <div class="dashboard-widget">
                    <h5 class="mt-4 mb-4">Latest Payments History</h5>

                    <div class="dashboard-body__item">
                        <div class="table-responsive">
                            <table class="table style-two">
                                <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                </tr>
                                </thead>

                                <tbody>
                                    {% for t in trans %}
                                    <tr>

                                        <td>
                                            {{ t.date }}
                                        </td>
                                        <td>

                                                                                            <p class="mb-0">Instant</p>
                                            

                                        </td>
                                        <td>
                                            <p>{{ t.amount|intcomma }}</p>
                                        </td>
                                        <td>

                                                                                            <div class="item-footer">
                                                    <a href="javascript:void(0);" class="item-bookmark">
                                                        
                                                    </a>
                                                    {% if t.status == "Approved" %}
                                                    <a href="#" class="btn btn-success btn-sm">
                                                        {{ t.status }}
                                                    </a>
                                                    {% else %}
                                                    <a href="#" style="background: red;" class="btn btn-success btn-sm">
                                                        {{ t.status }}
                                                    </a>
                                                    {% endif %}
                                                                                                            
                                                </div>
                                            

                                        </td>


                                    </tr>
                                    {% endfor %}
                                                                </tbody>


                            </table>

                            <div class="d-flex justify-content-start my-3">

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination common-pagination mt-0">
                                        <li class="page-item"> </li>
                                        <li class="page-item active"></li>
                                    </ul>
                                </nav>
                            </div>
                </div>
            </div>
        </div>


        <div class="row p-3">
            <div class="col-12">


            </div>
            <div class="col-md-12">


            </div>
        </div>
    </div>
        </div>
        </div>
        
        

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->

<!--<script>-->
<!--document.getElementById('flu_paynow').addEventListener('click', function() {-->
<!--    setTimeout(function() {-->
<!--        document.getElementById('paymentForm').submit();-->
<!--    }, 3000);-->
<!--});-->
<!--</script>-->

<script>
document.getElementById('flu_paynow').addEventListener('click', function() {
    var depAmountField = document.getElementById('dep_amount');

    // Get the value entered in the field
    var depAmount = parseFloat(depAmountField.value);

    // Check if the field is valid (i.e., not empty and meets minimum value requirement)
    if (depAmountField.checkValidity() && depAmount >= 10) {
        setTimeout(function() {
            document.getElementById('paymentForm').submit();
        }, 3000);
    } else {
        // If the input is empty or less than 1000, trigger the required validation
        if (!depAmountField.checkValidity()) {
            depAmountField.reportValidity(); // For empty input
        } else if (depAmount < 10) {
            alert("The minimum deposit amount is 1000.");
            depAmountField.focus();
        }
    }
});
</script>


<!--<script>-->
<!--    $(document).on("click", "#flu_paynow", function() {-->
<!--        console.log("Flutterwave Click");-->
<!--        console.log($('#dep_amount'));-->

<!--        let amount = $("#dep_amount").val()-->

<!--        console.log("This is the amount to pass:", amount);-->
        

<!--        $.ajax({-->
<!--            url: '/deposit-amount/',-->
<!--            data: {-->
<!--                "amount": amount,-->
<!--            }-->
<!--        })-->
        
<!--    })-->
<!--</script>-->

{% endblock content %}