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

$ref = 'MGD_trx' . mt_rand(1, 100000000000000);
$_SESSION['ref'] =$ref;

?>


<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-cyan-700 border border-cyan-200 rounded-lg bg-cyan -50 dark:bg-cyan-800 dark:border-cyan-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="dark: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-purple-800 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" action="" id="paymentForm" >
                <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-sky-100 placeholder-gray-400 focus:ring-primary-500 focus:border-primary-500"
                            placeholder="₦2999" required="">
                            <input type="hidden" name="temp" id="temp"  value="<?php echo $ref;?>"  required>
                         <input type="hidden" name="email" id="email" value="<?php echo $user->email;?>"> 
                    </div>

                </div>

                <button id="pay" type="submit" onclick="payWithPaystack()"
                    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-purple-900 bg-blue-900">Fund
                    Wallet
                </button>

            </form>
            <script src="https://js.paystack.co/v1/inline.js"></script>

        </div>

        <div
            class="block max-w-max p-4 border flex flex-col items-center justify-center rounded-lg shadow bg-purple-950 border-gray-700 hover:bg-gray-700 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">Hassan Abdullahi</span></span>
                <span>Account Number: <span class="font-bold">1473509258</span></span>
                <span>Bank: <span class="font-bold">Access Bank</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">2012735750</span></span>
                <span>Bank: <span class="font-bold">KUDA BANK</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>
</div>
    
</div>
</section>
</div>

<script type="text/javascript">
    const userEmail = "<?php echo $_SESSION['email']; ?>";
</script>

<script type="text/javascript">
        const paymentForm = document.getElementById('paymentForm');

        let paymentReference;

        paymentForm.addEventListener("submit", payWithPaystack, false);

        function payWithPaystack(e) {
            e.preventDefault();

            let handler = PaystackPop.setup({
                key: 'pk_live_83e37468085362f3ae611ba8c1a841190b91340b', // Replace with your public key
                email: document.getElementById('email').value,
                amount: document.getElementById("amount").value * 100,
                ref: document.getElementById('temp').value,
                // label: "Optional string that replaces customer email"
                onClose: function() {
                    window.location = 'https://magadata.com.ng/user/pages_content/wallet';
                    alert('Transaction cancelled');

                },
                callback: function(response) {
                    paymentReference = response.reference;
                    document.getElementById("temp").value = paymentReference;

                    let message = 'Payment Sucessful! Reference: ' + response.reference;

                    //alert(message);
                    window.location = "https://magadata.com.ng/user/pages_content/verifypay?reference=" + response.reference;
                }
            });

            handler.openIframe();
        }
    </script>
    
    <script>
        const text = document.getElementById('amount');
        const btn = document.getElementById('pay');

        text.addEventListener('input', function() {
    if (text.value >= 500) {
        btn.disabled = false;
        btn.style.backgroundColor = 'blue'; // White background
        btn.style.color = '#555555'; // Gray text color
    } else {
        btn.disabled = true;
        btn.style.backgroundColor = '#bbbbbb'; // Grayish background
        btn.style.color = '#999999'; // Light gray text color
    }
});
    </script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    
    <!-- <script type="text/javascript">
        function payonline() {

            document.getElementById('transfer').style.display = "none";
            document.getElementById('virtual').style.display = "none";
            document.getElementById('online').style.display = "block";
        }

        function payvirtual() {

            document.getElementById('transfer').style.display = "none";
            document.getElementById('virtual').style.display = "block";
            document.getElementById('online').style.display = "none";
        }

        function transfer() {

            document.getElementById('transfer').style.display = "block";
            document.getElementById('virtual').style.display = "none";
            document.getElementById('online').style.display = "none";
        }

        const text = document.getElementById('amount');
        const btn = document.getElementById('pay');

        text.addEventListener('input', function() {
            if (text.value >= 500) {
                document.getElementById('pay').disabled = false;
            } else {

                document.getElementById('pay').disabled = true;
            }
        });
    </script> -->

<!-- <script src="https://js.paystack.com/v1/inline.js"></script>

<script>
  const form = document.getElementById('paymentForm');

  form.addEventListener('submit', async function (event) {
    event.preventDefault();

    // Get the amount from the input field
    const amount = document.getElementById('amount').value;

    // Call your server to create a Paystack transaction
    const response = await fetch('/create-paystack-transaction.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        amount: amount * 100, // Paystack uses amounts in kobo (1 NGN = 100 kobo)
      }),
    });

    const data = await response.json();

    // If the transaction was created successfully, initiate Paystack payment
    if (data.success) {
      const paystackOptions = {
        key: 'pk_test_4e45ee7cda140404a75b24236550478b6d9f8695', // Replace with your Paystack public key
        // email: 'customer@email.com', // Replace with the customer's email
        amount: data.amount,
        currency: 'NGN',
        ref: data.reference,
        callback: function (response) {
          // Handle successful payment (you can update the UI, record the payment, etc.)
          console.log(response);
        },
        onClose: function () {
          // Handle when the Paystack modal is closed
          console.log('Payment closed');
        },
      };

      const paymentModal = PaystackPop.setup(paystackOptions);
      paymentModal.openIframe();
    } else {
      // Handle the case where the Paystack transaction creation failed
      console.error('Error creating Paystack transaction');
    }
  });
</script> -->