<?php

$transactions = MyTransaction::find_by_query("SELECT * FROM transaction WHERE user_id =$user->id");
$transactions = array_reverse($transactions);
?>

<div class="p-2 sm:ml-64 mb-14">

    <!-- Breadcrumb -->

    <nav class="md:max-w-max flex px-5 py-2 mt-20 mx-2 text-teal-700 border border-teal-200 rounded-lg bg-teal-50 dark:bg-teal-800 dark:border-teal-700"
        aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="<?= BASE_URL ?>"
                    class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                    <svg class="w-3 h-3 mr-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                    </svg>
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 9 4-4-4-4" />
                    </svg>
                    <a href="#"
                        class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Wallet</a>
                </div>
            </li>

        </ol>
    </nav>
    <section class="bg-gray- mt">
        <div class="grid grid-cols-1 md:grid-cols-2">
            <div class="py-8 px-2  lg:py-5">
                <!-- <div class="py-8 px-4 mx-auto max-w-2xl lg:py-5"> -->

                <div
                    class="flex items-center justify-between p-4 rounded max-h-full bg-emerald-500 shadow-slate-950 shadow-lg mb-5">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24"
                            style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                            <path
                                d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-7.5 12a2.5 2.5 0 1 1 0-5 2.47 2.47 0 0 1 1.5.512c-.604.456-1 1.173-1 1.988s.396 1.532 1 1.988a2.47 2.47 0 0 1-1.5.512zm4 0a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z">
                            </path>
                        </svg>
                        <p class="font-bold text-2xl text-white">₦
                            <?= number_format($wallet->balance) ?>
                        </p>
                    </div>
                    <div class="flex items-center rounded-xl h-28 ">

                        <span class="text-white font-extrabold text-lg">Min Fund: N500</span>
                    </div>
                </div>
                <!--<form method="post" id="initialize_payment">-->
                <!--    <div class="grid gap-4 ">-->



                <!--        <div class="w-full">-->
                <!--            <label for="amount"-->
                <!--                class="block mb-2 text-sm font-medium text-gray-900">Input Amount</label>-->
                <!--            <input type="number" name="amount" id="amount"-->
                <!--                class="border-2 border-gray-800 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 bg-emerald-100 placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500"-->
                <!--                placeholder="₦2999" required="">-->
                <!--        </div>-->

                <!--    </div>-->

                <!--    <button type="submit"-->
                <!--        class="inline-flexw w-full md:max-w-max items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:ring-primary-900  hover:bg-teal-900 bg-teal-700">Initiate-->
                <!--        funding-->
                <!--    </button>-->
                <!--</form>-->
            </div>



            <!--<div class="p-2">-->
            <!--    <h3 class="text-gray-700 text-sm">Unfinished Transactions</h3>-->


            <!--    <ul id="init_tran" class="max-w-full mt-2 divide-y divide-teal-200 divide-teal-700">-->
            <!--        <?php if (empty($transactions)): ?>-->
            <!--            <center>-->

            <!--                <h3 class="text-gray-400 text-sm">Empty</h3>-->
            <!--            </center>-->
            <!--        <?php endif ?>-->



            <!--        <?php foreach ($transactions as $transaction): ?>-->
            <!--            <li id="<?= $transaction->id ?>" class="py-3 sm:py-4 p-2 border rounded mb-2 bg-emerald-300">-->
            <!--                <div class="flex items-center space-x-4">-->
            <!--                    <div class="flex-shrink-0">-->
            <!--                        <span class="w-8 h-8 rounded-full">-->
            <!--                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"-->
            <!--                                style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">-->
            <!--                                <path-->
            <!--                                    d="M12 15c-1.84 0-2-.86-2-1H8c0 .92.66 2.55 3 2.92V18h2v-1.08c2-.34 3-1.63 3-2.92 0-1.12-.52-3-4-3-2 0-2-.63-2-1s.7-1 2-1 1.39.64 1.4 1h2A3 3 0 0 0 13 7.12V6h-2v1.09C9 7.42 8 8.71 8 10c0 1.12.52 3 4 3 2 0 2 .68 2 1s-.62 1-2 1z">-->
            <!--                                </path>-->
            <!--                                <path d="M5 2H2v2h2v17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4h2V2H5zm13 18H6V4h12z">-->
            <!--                                </path>-->
            <!--                            </svg>-->
            <!--                        </span>-->
            <!--                    </div>-->
            <!--                    <div class="flex-1 min-w-0">-->
            <!--                        <p class="text-sm font-medium text-gray-900 truncate">-->
            <!--                            TRX--->
            <!--                            <?= $transaction->reference ?>-->
            <!--                        </p>-->
            <!--                        <p class="text-sm text-gray-800 truncate">-->
            <!--                            <?= $transaction->date_created ?>-->
            <!--                        </p>-->
            <!--                    </div>-->
            <!--                    <div class="inline-flex items-center text-xl font-semibold text-gray-900">-->
            <!--                        ₦-->
            <!--                        <?= number_format($transaction->amount) ?>-->
            <!--                    </div>-->
            <!--                    <div class="inline-flex items-center text-base font-semibold text-white">-->
            <!--                        <button data-id="<?= $transaction->id ?>"-->
            <!--                            class="delete p-2 rounded text-xs bg-red-500 hover:scale-105 hover:bg-red-600">Delete</button>-->
            <!--                        &nbsp;&nbsp;-->
            <!--                        <button data-id="<?= $transaction->id ?>"-->
            <!--                            class="pay py-2 px-5 rounded text-xs bg-teal-600 hover:scale-105 hover:bg-teal-700">Pay</button>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </li>-->

            <!--        <?php endforeach ?>-->
            <!--    </ul>-->

            <!--</div>-->

            <div
                class="block max-w-max p-4 border flex flex-col items-center justify-center rounded-lg shadow bg-emerald-800 border-gray-700 hover:bg-emerald-900 m-2">
                <h5 class="mb-2 text-2xl font-bold tracking-tight text-white">
                    Bank Transfer
                </h5>
                <p class="font-normal text-center text-gray-400">
                    To add funds to your wallet, kindly transfer the desired amount to the account details provided
                    below and send proof of payment with email address to our WhatsApp group.
                </p>
                
                <br>
                <h5 class="mb-2 flex flex-col text-center text-lg font- tracking-tight text-white">
                    <span>Account Name: <span class="font-bold">Abdulrazak idris yahaya</span></span>
                    <span>Account Number: <span class="font-bold">8061529434</span></span>
                    <span>Bank: <span class="font-bold">OPAY</span></span>

                </h5>
                
                <br>
                <!--<h5 class="mb-2 flex flex-col text-center text-lg font- tracking-tight text-white">-->
                <!--    <span>Account Name: <span class="font-bold">Mustapha Lawan Aji</span></span>-->
                <!--    <span>Account Number: <span class="font-bold">6116523656</span></span>-->
                <!--    <span>Bank: <span class="font-bold">Opay</span></span>-->

                <!--</h5>-->
                
                <!-- <br>-->
                <!--<h5 class="mb-2 flex flex-col text-center text-lg font- tracking-tight text-white">-->
                <!--    <span>Account Name: <span class="font-bold">Hassan Abdullahi</span></span>-->
                <!--    <span>Account Number: <span class="font-bold">8062774062</span></span>-->
                <!--    <span>Bank: <span class="font-bold">Opay</span></span>-->

                <!--</h5>-->

                
                
                
            </div>

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


<script>

    var initialize_payment = $('#initialize_payment');
    var init_tran = $('#init_tran');

    initialize_payment.on('submit', function (e) {
        e.preventDefault();
        var amount = $("#amount").val();

        // $this = $(this).find("");

        // init_tran.append('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh')

        // console.log(init_tran);
        // return false

        if (amount < 500) {
            iziToast.warning({
                title: 'Error',
                message: "Minimum Funding amount is ₦500",
                // color: "yellow",
                position: "topRight",
                balloon: true
            });

            return false
        }

        initialize_payment[0].reset()

        $.ajax({
            method: "POST",
            dataType: 'json',
            data: { amount },
            url: "<?= ROOT_URL . '/payment/components/initialize_payment.php' ?>",
            success: function (response) {
                console.log(response);


                $html = `<li id='${response.id}' class="py-3 sm:py-4 p-2 border rounded mb-2 bg-emerald-300">
                            <div class="flex items-center space-x-4">
                                <div class="flex-shrink-0">
                                    <span class="w-8 h-8 rounded-full">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                            style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                                            <path
                                                d="M12 15c-1.84 0-2-.86-2-1H8c0 .92.66 2.55 3 2.92V18h2v-1.08c2-.34 3-1.63 3-2.92 0-1.12-.52-3-4-3-2 0-2-.63-2-1s.7-1 2-1 1.39.64 1.4 1h2A3 3 0 0 0 13 7.12V6h-2v1.09C9 7.42 8 8.71 8 10c0 1.12.52 3 4 3 2 0 2 .68 2 1s-.62 1-2 1z">
                                            </path>
                                            <path d="M5 2H2v2h2v17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V4h2V2H5zm13 18H6V4h12z">
                                            </path>
                                        </svg>
                                    </span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 truncate">
                                        TRX-${response.reference}
                                    </p>
                                    <p class="text-sm text-gray-500 truncate text-gray-400">
                                    
                                    ${response.date_created}
                                    </p>
                                </div>
                                <div class="inline-flex items-center text-xl font-semibold text-gray-900">
                                    ₦
                                    ${response.amount}
                                </div>
                                <div class="inline-flex items-center text-base font-semibold text-gray-900">
                                    <button data-id="${response.id}"
                                        class="delete p-2 rounded text-xs bg-red-500 hover:scale-105 hover:bg-red-600">Delete</button>
                                    &nbsp;&nbsp;
                                    <button data-id="${response.id}"
                                        class="pay py-2 px-5 rounded text-xs bg-blue-500 hover:scale-105 hover:bg-blue-600">Pay</button>
                                </div>
                            </div>
                        </li>`
                init_tran.prepend($html)

                iziToast.success({
                    title: 'Done',
                    message: "Payment initialized successfuly",
                    // color: "yellow",
                    position: "topRight",
                    balloon: true
                });
            }
        });

    })




    init_tran.on('click', '.delete', function () {
        var id = $(this).data('id')

        $.ajax({
            method: "POST",
            dataType: 'json',
            data: { id },
            url: "<?= ROOT_URL . '/payment/components/delete_init.php' ?>",
            success: function (response) {
                console.log(response)
                $(`#${response}`).remove();
            }

        });
    })



    init_tran.on('click', '.pay', function () {
        var id = $(this).data('id')


        var $form = $("<form method='POST' action='<?= ROOT_URL ?>/payment/flutterwave.php'>");

        // $form.append("<input type='number' id='amount11' name='amount'><br>");
        $form.append(`<input type='hidden' id='transaction_id' name='transaction_id' value='${id}'><br>`);

        // Append the form to the body of the document
        $("body").append($form);
        $form.submit()

        // var a = document.createElement('a')
        // a.target = 'blank'
        // a.href = ""
        // a.click()


    })



    function mama() {

        var amount = parseInt($('#amount').val())
        console.log(amount)
        if (!isNaN(amount)) {
            if (amount < 100) {

                $('#pay_btn').prop('disabled', true)
                $('#pay_btn_flutterwave').prop('disabled', true)
            } else {
                $('#pay_btn').prop('disabled', false)
                $('#pay_btn_flutterwave').prop('disabled', false)

            }
        } else {

            $('#pay_btn').prop('disabled', true)
            $('#pay_btn_flutterwave').prop('disabled', true)
        }

    }
</script>
<script>
    $(document).ready(function () {

        $('#pay_btn').click(function () {
            $('#formm').prop('action', '../payment/index.php')
            $('#formm').submit()

        })
        $('#pay_btn_flutterwave').click(function () {
            $('#formm').prop('action', '../payment/flutterwave.php')
            $('#formm').submit()
            console.log('assasas');
        })

    })
</script>