@extends('layouts.app')

@section('content')
<!-- Require css -->
<style>
    button:disabled,
    button[disabled]{
    background-color: #9fb5ff;
    }

    button:disabled:hover{
    color: #d1d5db;
    }

  .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-image: url('../images/Fidget-spinner.gif');
        background-repeat: no-repeat; 
        background-color: #FFF;
        background-position: center;
    }

    
    .loader-body {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.7;
        background-color: #28282b;
        z-index: 99;
    }

    .loader {
        border-top-color: #0e4792;
        -webkit-animation: spinner 1.5s linear infinite;
        animation: spinner 1.5s linear infinite;
    }

    @-webkit-keyframes spinner {
        0% {
        -webkit-transform: rotate(0deg);
        }
        100% {
        -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spinner {
        0% {
        transform: rotate(0deg);
        }
        100% {
        transform: rotate(360deg);
        }
    } 
</style>



<h1 class="md:mt-24 bg-slate-100 mx-3 p-4 rounded-md mt-20 text-center md:text-2xl text-xl text-gray-600 leading-normal">Nice 👍🏽, next step is to select your preferred investment amount classified under <span class="bg-fuchsia-400/40 whitespace-nowrap rounded-md px-2 py-1 text-violet-900">{{ $plan->name }}</span></h1>

<div class="px-5">
    <div class="bg-slate-100 w-fit mt-10 mb-5 rounded-lg p-2">
        <button class="rounded-lg bg-white px-6 py-2 font-medium text-blue-700">Start your journey, select preferred amount</button>
    </div>
</div>

<div class="grid gap-1 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 p-2 md:px-10 mb-16">
    
    
        

    
            @for($i=$plan->min_amount; $i<=$plan->max_amount; $i+=$amt_to_add)


            @if($plan->max_amount == 990000 && $iterator_1 > 0)
                @if($i%100000 != 0)
                    @continue
                @endif
            @endif
    <!-- Start card -->
    <div class="bg-slate-100 w-fit mx-auto m-5 rounded-2xl p-4">
      <button type="button" class="pay-method" data-amount="{{$i}}">
        <div class="rounded-2xl bg-white p-4">
            <div class="flex items-center">
            <span class="relative rounded-md bg-purple-200 p-2">
                <p class="font-bold text-purple-500">&#8358;</p>
            </span>
            <p class="text-md ml-1 text-black">Invest With</p>
            </div>
            <div class="flex flex-col justify-start">
            <p class="my-4 text-center text-md font-bold text-gray-700">
                &#8358;{{ curr_form($i) }}<br>
                <span class="text-sm text-gray-400">To earn</span><br>
                &#8358;{{ curr_form(($plan->percent_profit/100)*$i) }} daily
                <br>
                <span class="text-xs text-gray-400">To give a total of</span><br>
                &#8358;{{ curr_form(((($plan->percent_profit/100)*$i)*$plan->profit_days)+$i) }}<br>
            </p>
            <div class="flex items-center text-sm text-green-500">
                <svg width="20" height="20" fill="currentColor" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"></path>
                </svg>
                <span> {{ $plan->percent_profit }}% </span>
                <span class="ml-2 text-gray-400"> {{ $plan->profit_days }} days </span>
            </div>
            </div>
        </div>
      </button>
    </div>
    <!-- End card -->

        @endfor


</div>





<!--Modal-->
<div id="shrink" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    
    <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto shadow-lg z-50 overflow-y-auto mt-8 md:mt-10">
      
      <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
        <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
          <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
        </svg>
        <span class="text-sm">(Esc)</span>
      </div>

      <!-- Modal From -->
      <!-- Add margin if you want to see some of the overlay behind the modal-->
      <div class="modal-content py-4 text-left px-3">
        <!--Title-->
        <div class="flex justify-between items-center pb-3">
          <p class="text-2xl text-dark font-bold">Payment Method</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
          </div>
        </div>

        <!--Body-->
        
            
            <p class="font-medium mb-1 text-gray-500">Select preferred payment method.</p>
            <div class="flex gap-x-4 mt-6">

            <!--with transfer -->
            <div class="relative pay-now flex w-56 items-center justify-center rounded-xl bg-gray-50 px-2 py-2 font-medium text-gray-700">
                <input class="peer hidden" type="radio" name="radio" id="radio1" class="invisible"/>
                <label class="peer-checked:border-blue-400 peer-checked:bg-blue-200 absolute top-0 h-full w-full cursor-pointer rounded-xl border" for="radio1"> </label>
                <span class="pointer-events-none z-10 flex">

                <svg class="h-4 w-4 text-dark mr-2 mt-1"  width="24" height="24" viewBox="0 0 24 24" stroke-width="2" 
                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  
                    <path stroke="none" d="M0 0h24v24H0z"/>  <rect x="3" y="3" width="6" height="6" rx="1" />  
                    <rect x="15" y="15" width="6" height="6" rx="1" />
                    <path d="M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3" />  
                    <path d="M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3" />
                </svg>
                <span class="text-sm">Via Bank Transer</span>
                </span>
            </div>

            <!--with card -->
            <div class="relative proceed-pay flex w-56 items-center justify-center rounded-xl bg-gray-50 px-4 py-3 font-medium text-gray-700">
                <input class="peer hidden" type="radio" name="radio" id="radio3" class="invisible"/>
                <label class="peer-checked:border-blue-400 peer-checked:bg-blue-200 absolute top-0 h-full w-full cursor-pointer rounded-xl border" for="radio3"> </label>
                <span class="pointer-events-none z-10 flex">

                    <svg class="h-4 w-4 text-dark mr-2 mt-1"  fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                    <span class="text-sm">Pay With Card</span>
                </span>
            </div>
            </div>
        
      </div>
      <!-- Modal content end -->



      <!-- Modal Details -->
      <!-- Add margin if you want to see some of the overlay behind the modal-->
      <div class="modal-details py-4 text-left px-6">
        <!--Title-->
        <div class="flex justify-between items-center pb-3 mt-10 md:mt-16">
          <p class="text-2xl text-dark font-bold">Pay With Card</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
              <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
          </div>
        </div>

        <!--Body-->
    
        <div class="mt-2 mx-auto">
            <a href="" class="text-gray-500 flex">
            <span class="mt-2 mx-auto">Powered by <i><b>Mastercard</b></i></span> 
            <img class="h-10 mx-auto" src="{{ asset('images/mastercard.png') }}"/></a>
        </div>

        <!-- Card Payment Form -->
        <form>

        <div class="mt-3 mb-3">
            <input class="require border border-gray-300 p-4 rounded w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="email" value="{{ Auth::user() ? Auth::user()->email : null }}" id="" placeholder="Email" />
        </div>

        <label class="mt-8 text-base leading-4 text-gray-800">Card details</label>
        <div class="mt-2 flex-col">
            <div>
                <input class="cc-number border rounded-tl rounded-tr border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="card_number" id="card_number" x-autocompletetype="cc-number" placeholder="0000 0000 0000 0000" />
            </div>
            <div class="flex-row flex">
                <input class="cc-exp require border rounded-bl border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="expiry" id="expiry" pattern="\d*" x-autocompletetype="cc-exp" placeholder="MM/YY" maxlength="9"/>
                
                <input class="cc-cvc require border rounded-br border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="cvv" id="cvv" pattern="\d*" x-autocompletetype="cc-csc" placeholder="CVV" autocomplete="off"/>
            </div>
        </div>

        <label class="mt-8 text-base leading-4 text-gray-800">Card Name</label>
        <div class="mt-2 flex-col">
            <div>
                <input class="require border rounded border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="text" name="card_name" id="card_name" placeholder="Name on card" />
            </div>
        </div>

        <div class="mt-2 flex-col">
            <input class="require border rounded-bl rounded-br border-gray-300 p-4 w-full text-base leading-4 placeholder-gray-600 text-gray-600" type="number" name="card_pin" id="card_pin" placeholder="4-Digit Pin"  data-numeric/>
        </div>

        <button type="button" disabled="disabled" class="card-pay t-8 mt-4 border border-transparent text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 shadow-lg shadow-blue-500/50 flex justify-center items-center py-4 rounded w-full">
        <div>
            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 
                15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
            </svg>
            </div>
            <div>
                <p class="text-base leading-4 ml-2 card-amount"></p>
            </div>
        </button>
        <small class="text-xsm text-gray-400 mt-8 mx-auto">Your Card is protected against fraud for purchases in stores, in apps or over the phone.</small>
        </form> 
        <!-- Body end -->
      </div>
      <!-- Modal Details page end -->

    </div>
  </div> 





 <script src="{{ asset('js/payment.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var J = Payment.J,
  numeric = document.querySelector('[data-numeric]'),
  number = document.querySelector('.cc-number'),
  exp = document.querySelector('.cc-exp'),
  cvc = document.querySelector('.cc-cvc'),
  validation = document.querySelector('.validation');
Payment.restrictNumeric(numeric);
// Payment.formatCardNumber(number);
Payment.formatCardExpiry(exp);
Payment.formatCardCVC(cvc);
document.querySelector('form').onsubmit = function(e) {
  e.preventDefault();
  J.toggleClass(document.querySelectorAll('input'), 'invalid');
  J.removeClass(validation, 'passed failed');
  var cardType = Payment.fns.cardType(J.val(number));
//   J.toggleClass(number, 'invalid', !Payment.fns.validateCardNumber(J.val(number)));
  J.toggleClass(exp, 'invalid', !Payment.fns.validateCardExpiry(Payment.cardExpiryVal(exp)));
  J.toggleClass(cvc, 'invalid', !Payment.fns.validateCardCVC(J.val(cvc), cardType));
  if (document.querySelectorAll('.invalid').length) {
    J.addClass(validation, 'failed');
  } else {
    J.addClass(validation, 'passed');
  }
}



//Card Number Formatting
const cardNumber = document.getElementById("card_number");

cardNumber.oninput = (e) => {
  e.target.value = patternMatch({
      input: e.target.value,
      template: "xxxx xxxx xxxx xxxx",
   });
};

function patternMatch({
  input,
  template
}) {
  try {
    

    let j = 0;
    let plaintext = "";
    let countj = 0;
    while (j < template.length) {
      // code block to be
      
      if (countj > input.length - 1) {
        template = template.substring(0, j);
        break;
      }

      if (template[j] == input[j]) {
        j++;
        countj++;
        continue;
      }

      if (template[j] == "x") {
        template = template.substring(0, j) + input[countj] + template.substring(j + 1);
        plaintext = plaintext + input[countj];
        countj++;
      }
      j++;
    }

    return template
 
  } catch {
    return ""
  }
}
//End of Card Number Formatting




    $( document ).ready(function() {
    //hide payment form
    $(".modal-details").hide();

    //Pay with card
    $('.require').on('keyup', function() {
            let empty = false;
        
            $('.require').each(function() {
                if ($(this).val().length == 0) {
                    empty = true;
                }
            });
        
            if (empty)
            $('.card-pay').attr('disabled', 'disabled');
            else
            $('.card-pay').attr('disabled', false);
        });
    });

    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
        //console.log('done');
    }

    $(document).bind("ajaxSend", function() {
        $("#loader-body").removeClass("invisible");
    }).bind("ajaxComplete", function() {
        $("#loader-body").addClass("invisible");
    });




    // user with ongoing plan info
    var ongoing_plan_name = null;
    var new_plan_name = null;
    var ongoing_plan_amount = null;
    var has_ongoing_plan = false;
    var html_ = null;
   



    //Payment method modal
    $('.pay-method').click(function(){
        var amount = $(this).data('amount');
        let currency = Intl.NumberFormat('en-US');
        var user_log = "{{Auth::user()}}";

        if(user_log){
            $(".pay-now").data('amount', amount);
            $(".card-amount").html('Pay &#8358;'+currency.format(amount));

            toggleModal()

        }
        else{
            Swal.fire({
            title: 'OOPS!',
            text: 'Seems you\'re not logged in. Do login to proceed with the investment process',
            icon: 'error',
            confirmButtonText: 'Okay'
            }).then(function() {
                window.location.href = " {{route('login')}} ";
            });
        } 
    });

    let closeIcon = document.getElementById("closeIcon");
    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)
    
    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal);
    }
    
    document.onkeydown = function(evt) {
      evt = evt || window.event
      var isEscape = false
      if ("key" in evt) {
    	isEscape = (evt.key === "Escape" || evt.key === "Esc")
      } else {
    	isEscape = (evt.keyCode === 27)
      }
      if (isEscape && document.body.classList.contains('modal-active')) {
    	toggleModal()
      }
    };
      
    function toggleModal () {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }

    //On clicking of proceed to pay
    $(".proceed-pay").click(function(e) {
        e.preventDefault();

        $(".modal-content").hide();

        $(".modal-details").show();
    });
    
    //On clicking of overlay
    $(".modal-overlay").click(function(e) {
        e.preventDefault();

        $(".modal-content").show();

        $(".modal-details").hide();
    });
    
    //On clicking of modal-close
    $(".modal-close").click(function(e) {
        e.preventDefault();

        $(".modal-content").show();

        $(".modal-details").hide();
    });


    // PAYMENT PROCESSING INITIALIZER
    $(".card-pay").click(function() {
        var card_name = $('#card_name').val();
        var card_number = $('#card_number').val();
        var expiry = $('#expiry').val();
        var cvv = $('#cvv').val();
        var card_pin = $('#card_pin').val();
        var token = "{{ csrf_token() }}";

    let data_obj = {
      _token:token,
      card_name:card_name,
      card_number:card_number,
      expiry:expiry,
      cvv:cvv,
      card_pin:card_pin
    };

    $.ajax({
        url: "{{ route('card_pay') }}",
        method: "POST",
        data: data_obj,
        success:function(data) {
            if(data == 1) {
                Swal.fire({
                  title: '',
                  text: 'Your payment could not be authorized, please try another payment method', 
                  icon: 'error', 
                  confirmButtonText: 'Okay'
                }).then(function() {
                    location.reload();
                });
            }
            else {
                Swal.fire('', 'An unknown error occured and we were unable to process your request, please try again', 'error');
            }
        }
    });
  });

  //Second Payment with transfer
    $(".pay-now").click(function() {
        var plan_id = "{{$plan->id}}";
        var amount = $(this).data('amount');
        var plan_name = "{{$plan->name}}";
        var user_id = "@if(auth()->user() != null) {{auth()->user()->id}} @endif";
        var token = "{{ csrf_token() }}";

        $.ajax({
            url: "{{ route('user.val_invest') }}",
            method: "POST",
            data: {_token:token,user_id:user_id,plan_id:plan_id,amount:amount,plan_name:plan_name}, 
            success:function(data) {
                if(data == 1) {

                    deposit(plan_id, amount, plan_name, user_id, token);
 
                }
                else if(data == 100) {
                    Swal.fire({
                    title: 'OOPS!',
                    text: 'Seems you\'re not logged in. Do login to proceed with the investment process',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " {{route('home')}} ";
                    });
                }
                else if(data == 300) {
                    Swal.fire({
                    title: '',
                    text: 'Hmm, seems you already have a pending investment plan. Please be patient till it\'s attended to.',
                    icon: 'warning',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " {{route('home')}} ";
                    });
                }
                else {
                    Swal.fire({
                    title: 'error!',
                    text: 'An unknown error occoured and you were unable to apply to invest in this plan, please try again.',
                    icon: 'error',
                    confirmButtonText: 'Okay'
                    }).then(function() {
                        window.location.href = " {{route('home')}} ";
                    });
                }
            }
        });
    });



    // Deposit modal function
    function deposit(plan_id, amount, plan_name, user_id, token) {

        // check if user have ongoing investment or not
        $.ajax({
            url: "{{ route('user.check_ongoing_investment') }}",
            method: "POST",
            dataType: "JSON",
            data: {_token:token,user_id:user_id},
            success:function(data) {
                if(data.ongoing_plan_amount > 0) {
                    getPlanFromEntry(parseFloat(amount)+parseFloat(data.ongoing_plan_amount), token, data.ongoing_plan_amount, data.ongoing_plan_name, plan_id, amount, user_id);
                    //populate(true, data.ongoing_plan_name, data.ongoing_plan_amount, plan_id, amount, plan_name, user_id, token);
                }
                else if(data == 0) {
                    populate(false, null, null, plan_id, amount, plan_name, user_id, token);
                }
            }
        });

    }



    // Ajax investment function
    // This fuction interacts with the DB upon user investment.
    // ie. it populates the deposit and the investment table respectively.
    // So i guess your payment processor should call this function upon success and this will in 
    function invest(plan_id, amount, plan_name, user_id, token, reference, has_investment) {
        let data_obj = (has_investment == 1)? {_token:token,user_id:user_id,plan_id:plan_id,amount:amount,plan_name:plan_name,reference:reference,has_investment:has_investment} : {_token:token,user_id:user_id,plan_id:plan_id,amount:amount,plan_name:plan_name,reference:reference};
        console.log(has_investment);
        $.ajax({
            url: "{{ route('user.invest') }}",
            method: "POST",
            data: data_obj,
            success:function(data) {
                if(data == 1) {
                    Swal.fire('', 'Great 😉👍🏽, Your deposit request has been submitted. Failure to make payment after 30 minutes will incure a decline. Submit proof of payment on the next page.', 'success')
                    .then(function() {
                        window.location.href = " {{route('pop')}} ";
                    });
                }
                else {
                    Swal.fire('', 'An unknown error occured and we were unable to process your request, please try again', 'error');
                }
            }
        });
    }


    function populate(has_plan, name, amt, plan_id, amount, plan_name, user_id, token) {
        
        var bank = '{{ $bank->description }}';
        var account_name = '{{ $account_name->description }}';
        var account_number = '{{ $account_number->description }}';
        
        let currency = Intl.NumberFormat('en-US');
        // variable to keep track if the user has prev investment or not
        // 0 === no
        // 1 === yes
        let tracker = 0;
        if(has_plan == true) {
           tracker = 1;
           var html_ = '<small class="text-lg"><b>&#8358;'+currency.format(amount)+' <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">-'+plan_name+'</span></b></small><br><br>'+
                    '<small>Hey {{ Auth::user() ? auth()->user()->first_name : null }} 👋🏽, you\'ve finally selected your preferred amount. <br>Now Make a fund transfer of the above amount to: </small><br><br>'+
                    '<table align="center"><tr>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400"><b>ACCOUNT NAME</b></small> </td>'+
                    '<td align="right"><small>'+account_name+'</small> </td>'+
                    '</tr><tr>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400"><b>ACCOUNT NUMBER</b></small> </td>'+
                    '<td align="right"><small id="copy-text">'+account_number+'</small> &nbsp;<i onclick="copyToClipboard(\'#copy-text\')" class="material-icons cursor-pointer hover:text-green-600 copy-icon">content_copy</i></td>'+
                    '</tr><tr>'+

                    '<small class="text-dark text-center my-3">Click on&nbsp;<i onclick="copyToClipboard(\'#copy-text\')" class="material-icons cursor-pointer h-2 w-2 mt-3 hover:text-blue-600 copy-icon">content_copy</i>&nbsp;&nbsp;&nbsp;&nbsp; to copy our Account Number </small>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400"><b>BANK</b></small> </td>'+
                    '<td align="right"><small>'+bank+'</small> </td>'+
                    '</tr>'+
                    
                    '</table><br><hr>'+
                    '<small><b>Note you are attempting to increase your investment capital</b><br>'+
                    '<b>WITH: </b> '+currency.format(amount)+' ('+plan_name+')<br><hr>'+
                    '<small>Click the <b class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">I\'m Done</b> button below if you successfully made the fund transfer</small> <br>'+
                    '<div class="bg-blue-100 text-blue-800 font-semibold px-2.5 py-0.5 rounded"><small><i>Your money will reflect on your dashboard upon system confirmation of the deposit. </i></small></div>';
        }
        else {
           var html_ = '<small class="text-lg"><b>&#8358;'+currency.format(amount)+' <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">-'+plan_name+'</span></b></small><br><br>'+
                    '<small>Hey {{ Auth::user() ? auth()->user()->first_name : null }} 👋🏽, you\'ve finally selected your preferred amount. <br>Now Make a fund transfer of the above amount to: </small><br><br>'+
                    '<table align="center"><tr>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400"><b>ACCOUNT NAME</b></small> </td>'+
                    '<td align="right"><small>'+account_name+'</small></td>'+
                    '</tr><tr>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400 "><b>ACCOUNT NUMBER</b></small> </td>'+
                    '<td align="right" class="flex ml-2 mt-1"><small id="copy-text">'+account_number+'</small> &nbsp;<i onclick="copyToClipboard(\'#copy-text\')" class="material-icons cursor-pointer h-4 w-4 hover:text-blue-600 copy-icon">content_copy</i></td>'+
                    '</tr><tr>'+

                    '<small class="text-dark text-center my-3">Click on&nbsp;<i onclick="copyToClipboard(\'#copy-text\')" class="material-icons cursor-pointer h-2 w-2 mt-3 hover:text-blue-600 copy-icon">content_copy</i>&nbsp;&nbsp;&nbsp;&nbsp; to copy our Account Number </small>'+

                    '<td align="left"><small class="underline underline-offset-3 decoration-8 decoration-blue-400"><b>BANK</b></small> </td>'+
                    '<td align="right"><small>'+bank+'</small> </td>'+
                    '</tr>'+
                    
                    '</table><br><hr>'+
                    '<small>Click the <b class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">I\'m Done</b> button below if you successfully made the fund transfer</small> <br>'+
                    '<div class="bg-blue-100 text-blue-800 font-semibold px-2.5 py-0.5 rounded"><small><i>Your money will reflect on your dashboard upon system confirmation of the deposit. </i></small></div>';
        }

        Swal.fire({
        //title: '<small><b>&#8358;'+amount+'</b></small>',

        html: html_,
        iconHtml: '<img src="{!! asset("images/logo1.png") !!}" class="h-10"> ',
        showDenyButton: true,
        allowOutsideClick: false,
        allowEscapeKey: false,
        confirmButtonText: 'I\'m Done',
        denyButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // Start the investment process
                invest(plan_id, amount, plan_name, user_id, token, '', tracker);
            } else if (result.isDenied) {
                Swal.fire('', 'Process cancelled by initiator', 'info');
            }
        });
        
    }



    // Calculate reinvestment and process
    function process_reinvestment(new_name, on_amount, on_name, plan_id, amount, user_id, token) {
        populate(true, on_name, on_amount, plan_id, amount, new_name, user_id, token);
    }



    // This function returns the plan name where out of range preffered amount can be found
    function getPlanFromEntry(amount, token, on_amount, on_name, plan_id, amount, user_id) {
        // check up the plan name from arg amount
        $.ajax({
            url: "{{ route('user.check_plan_name') }}",
            method: "POST",
            data: {_token:token,amount:amount},
            success:function(data) {
                process_reinvestment(data, on_amount, on_name, plan_id, amount, user_id, token);
            }
        });
    }
    
</script>

@endsection