@extends('front.practitioner.import.template.import')
@section('content')

<div class="container-fluid">
   <div class="row">
      <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
         {{-- <a class=" p-0" href="{{ URL::previous() }}">
            <img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px">
         </a> --}}
         <a class="navbar-brand p-0 " href="{{ URL::previous() }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
         <h1 class="page-title eagle-font font-400 "></h1>
         @if( Auth::guard('practitioner')->check() )
            <a href="{{ route('practitioner.logout') }}" id="" class="btn text-green mb-3 ml-auto my-auto" >Logout</a>
         @endif
      </nav>
      <!-- @include( 'front.practitioner.import.include.navbar' ) -->
      <div class="brdr-bttm w-100"></div>
   </div>
</div>
<div class="header"></div>
<div class="page-content dashboard-wrapper mdashboard-wrapper" id="pay-now-content" style="margin: 0 auto;margin-top: -103px;">
   <div>
      <div class="dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper ">
         <div class="container">
            <div class="row d-flex justify-content-center">
               <form id="paid_plan_latpay_from">
                  @csrf
                  <input type="hidden" name="is_from_upgrade_plan" value="1">
                  <input type="hidden" name="payble-amount" id="payble-amount" value="{{ $planMasters->price }}">
                  <input type="hidden" name="payment_option_type" value="2">
                  <input type="hidden" name="LatPayclient_id">
                  <input type="hidden" name="LatPayflag" value="pay_for_plan_upgrade">
                  <input type="hidden" name="latpayAmount" id="latpayAmount" value="">
                  <input type="hidden" name="latpayUserFirstName" value="{{ $practitioner->first_name }}">
                  <input type="hidden" name="latpayUserLastName" value="{{ $practitioner->last_name }}">
                  <input type="hidden" name="latpayUserEmail" value="{{ $practitioner->email }}">
                  <input type="hidden" name="merchant_id" value="{{ $settings->merchant_id }}">
                  <input type="hidden" name="merchant_password" value="{{ $settings->merchant_password }}">
                  <input type="hidden" name="merchant_public_key" value="{{ $settings->merchant_public_key }}">
                  <input type="hidden" name="cardHolderName" value="">
                  <input type="hidden" name="practitioner_id" value="{{ $practitioner->id }}">

                  <center>
                     <input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay">
                  </center>

                  <div id="pay-now-content" class="">
                     <div class="card" id="payment-meth-main">
                        <a href="{{ URL::previous() }}" class="back"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude " /></a>
                        <div class=" comm-form">
                           <div class="payment-meth-box">
                              {{-- Payment amount ${{ number_format( $planMasters->price, 2 ) }} --}}
                              <p class="payment-amount mb-0"></p>
                           </div>
                           <h6 class="mb-3 font-weight-bold">Secured payment</h6>
                           <p class="font-13">All transactions are secured & encrypted</p>
                           <hr/>

                           <input type="hidden" name="flaglatpay">
                           <div class="payment-card-main" style="" id="ifNoCardFound">
                              <!-- Add a new card start -->
                              <div id="latpay-element"></div>

                              <center>
                                 <input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay">
                              </center>
                           </div>
                           <!-- Add a new card design end -->

                           <!-- card design start -->
                           <div class="choose-saved-card mt-5" style="" id="ifCardFound">
                              <!-- <p>Choose payment method</p> -->
                              <div class="" id="appendPaymentCard">

                              </div>
                              <span class="invalid-feedback d-block" id="displayError"></span>
                              <br>
                              <!-- card design end -->
                           </div>
                           <input type="hidden" name="paymentTypeNotSelected" value="0">
                           <a href="#" class="add-new-card-link" role="button" style="color:#45747a">Add a new card</a>
                        </div>
                     </div>

                     <div class="pay-now-btn payment payment-space-box">
                        <a id="planPaymentButton" class="paynow1-btn cursor-pointer">Process payment</a>
                     </div>
                  </div>
               </form>
               
            </div>
         </div>
         
      </div>
      
   </div>
</div>
<div id="thaks-content" class="d-none" style="margin-top: -103px;">
   <div class="card thaks-content " style="margin: 0 auto;">
     <img src="{{asset('assets/images/thank-you-for-payment-icon.svg')}}" alt="" class="img-fluid" />
     <h1>Thank you</h1>
     <p>Your payment has been processed</p>
   </div>
</div>
@endsection

@section('modals')
@endsection

@section('css')

<style>
   div.latpay-elements-field {padding: 10px 5px;}
   #latpay-element div.latpay-elements-field>label {font-size: 14px !important;color: #24303f !important;}
   div.latpay-elements-field > input {width: 100%;margin-top: 5px;border: 1px solid #d9d9d9;background: #fff !important;padding: 6px;font-size: 18px !important;color: grey !important;}
   i.latpay-credit-card-brand {position: absolute;right: 8%;margin-top: -37px;display: block;width: 30px;height: 24px;background: no-repeat url(https://www.latpay.com/wp-content/uploads/2020/06/credit-card.svg);}
   #latpay-element div.latpay-elements-field::before {content:"";position:absolute;top: 48px;left: 15px;}
   div#latpay-exp-element, div#latpay-cvc-element {width: 50%;}
   div.latpay-flex {display: flex;justify-content: space-between;padding-bottom: 5%;}
   #main-section{display: none;}
   .navbar{padding: 0rem 1rem;}
   .brdr-bttm{margin-bottom:10px;}
   .page-content {padding: 0;transition: .4s ease all;}
   .welcome-page-menu a.navbar-brand img{max-width:49px;margin: 8px 20px;}
   .welcome-page-menu a.btn{color:#457379;font-size: 16px;letter-spacing: 1px;margin:0px 20px 0px;}
   .dashspace-area .page-content{padding: 0;}
   .welcome-page-menu button{color:#457379;font-size:16px;background-color:transparent;}
</style>
@endsection

@section('import-scripts')
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script type="text/javascript">

   var practitioner_id = "{{ $practitioner->id }}";
       
   function openLatpay()
   {
      
      // $('#latpay-element').empty();

      // var user = @json($practitioner);
      // var setting = @json($settings);
      $.ajax({
            type: "POST",
            dataType: "JSON",
            url: "{{ route('practitioner.team.mybillingcalculation') }}",
            data: {
              _token: "{{ csrf_token() }}"
            },
            success: function(response) {
              if (response.status == "success") {
                var val = response.monthlyCost;
                // var diffInDays = response.diffInDays;

                var user = @json($practitioner);
                var setting = @json($settings);

                $('.payment-amount').text("Payment amount : $" + val + "");
                $('#paid_amount').val(val);
                $(".loading").hide();
                $("#paybleAmount").val(val);
                $("#latpayAmount").val(val);

                $('#latpay-element').empty();
                var merchantId = $("input[name='merchant_id']").val();
               var url = "{{route('get.practitioner.getPaymentCard',':id')}}";
               url = url.replace(':id', user.id);
               var merchantId = $("input[name='merchant_id']").val();

               LatpayCheckout.open({
                  merchantid: merchantId,
                  publickey: $("input[name='merchant_public_key']").val(),
                  merchantuserid: merchantId,
                  'status': function(status) {
                     if (status == 'success') {
                        $.ajax({
                           url: url,
                           type: 'get',
                        }).done(function(response) {
                           console.log( response );
                           $('#PayNowNew').modal('show');
                           if (response.status == 'success') {
                              $("#appendPaymentCard").empty();
                              $.each(response.data, function(key, value) {
                                 var html = '';
                                 var src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                                 if (value.card_type == 'MASTERCARD') {
                                    src = '{{asset("assets/images/credit-img/master-card.png")}}';
                                 } else if (value.card_type == 'VISA') {
                                    src = '{{asset("assets/images/credit-img/visa-card.png")}}';
                                 }
                                 html += '<div class="popup-more-filter "> <div class="popup-label position-relative"> <div class="custom-control custom-checkbox"> <input required type="radio" class="custom-control-input shipping_charge payment_option" value="' + value.card_token + '" name="choose-card" id="' + value.card_token + '"> <label class="custom-control-label" for="' + value.card_token + '"> <span><img class="img-fluid" src="' + src + '"></span> •••• •••• •••• ' + value.card_no + ' </label> </div> <button type="button" class="close d-none removeclientcard" data-cardid='+value.id+' aria-label="Close"><span aria-hidden="true">&times;</span></button> </div> </div>';
                                 $("#appendPaymentCard").append(html);
                              });

                              $('#ifNoCardFound').css('display', 'none');
                              $('#ifCardFound').css('display', 'block');
                              $('.add-new-card-link').css('display', 'block');
                           } else {
                              $('#ifNoCardFound').css('display', 'block');
                              $('#ifCardFound').css('display', 'none');
                              $('.add-new-card-link').css('display', 'none');
                           }
                        });
                     } else {
                        if (merchantId) {
                           var title = 'Invalid merchant id, please contact administrator.';
                        } else {
                           if($("input[name='LatPayflag']").val() != 'create_invoice_new'){
                              title = 'Details not found for this merchant, please contact administrator.';
                           }
                        }
                        if(title){
                        Swal.fire({
                           icon: "error",
                           title: title,
                           // text: response.msg,
                           showClass: {
                              popup: 'animate__animated animate__fadeInDown'
                           },
                           hideClass: {
                              popup: 'animate__animated animate__fadeOutUp'
                           }
                        });
                        }else{
                           $('#PayNowNew').modal('show');
                        }
                     }
                  }
               });
            }
         }
         //merchat can write custom logic to get alerted
      });
   }

   function callLatpayForNewSubscription()
   {
      $(".loading").show();
      $("#planPaymentButton").prop( 'disabled', true );
      var modal = $("#PayNowNew");

      $.ajax({
         url: "{{route('practitioner.latpayPaymentUpgradePlan')}}",
         data: $('#paid_plan_latpay_from').serialize(),
         type: 'POST',
      }).done(function(response) {
         
         if (response.status == "success") {
            callAfterLatpaySubscriptionSuccess();
         } else {
            if(response.status_code == "1003") {
               Swal.fire({
                  icon: 'warning',
                  title: 'Transaction limit exceeded',
                  text: "Amount cannot exceed $1000",
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
               if( response.msg == "Prescreen Failed" ) {
                  Swal.fire({
                     icon: "error",
                     title: "Invalid Card",
                      text: "Please check the card details and try again",
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });
               } else {
                   if(response.status_code == "14" || response.status_code == "54" || response.status_code == "82"){
                       $(".latpay-error").html('<span style="color:red">'+ response.msg +'</span>');
                   } else {
                       Swal.fire({
                           icon: response.status,
                           //title: 'Error!',
                           //text: response.msg,
                           title: 'Unable to process card payment',
                           text: 'Please check card details & try again',
                           showClass: {
                               popup: 'animate__animated animate__fadeInDown'
                           },
                           hideClass: {
                               popup: 'animate__animated animate__fadeOutUp'
                           }
                       });
                   }

                  if( response.redirect && response.redirect != '' ) {
                     setInterval( function() {
                        window.location.href = response.redirect;
                     }, 2000 );
                  }
               }
            }
         }
      });
   }

   function callAfterLatpaySubscriptionSuccess()
   
   {
      var paid_amount = $('input[name="latpayAmount"').val();
      $.ajax({
         type: "POST",
         url: "{{ route('practitioner.latpayPaymentUpgradeSuccess') }}",
         data: { id:practitioner_id,paid_amount:paid_amount },
         success: function( response )
         {
            console.log( response );

            if( response.error == false ) {
               console.log(response.redirect);
               $(".loading").hide();
               $("#pay-now-content").addClass("d-none");
               $("#thaks-content").removeClass("d-none");
               if( response.redirect && response.redirect != '' ) {
                  window.setTimeout( function() {
                     window.location.href = response.redirect;
                  }, 2000 );
               }
               // window.location.href = response.redirect;
               // Swal.fire({
               //    icon: 'success',
               //    title: 'Thank you for your payment. Your plan will automatically renew on:',
               //    text: response.message,
               //    showClass: {
               //       popup: 'animate__animated animate__fadeInDown'
               //    },
               //    hideClass: {
               //       popup: 'animate__animated animate__fadeOutUp'
               //    }
               // });

               // window.setInterval( function() {
               //    window.location.href = response.redirect;
               // },2000);
            } else {
               Swal.fire({
                  icon: 'error',
                  title: 'Error!',
                  text: response.message,
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            }
         }
      });
   }

   // If card already saved and choosen from saved card
   function callLatpayForCardSubscription(val)
   {
      $(".loading").show();
      var formData = new FormData();
      formData.append('is_from_upgrade_plan', $('input[name="is_from_upgrade_plan"').val());
      formData.append('latpayAmount', $('input[name="latpayAmount"').val());
      formData.append('latpayUserFirstName', $('input[name="latpayUserFirstName"').val());
      formData.append('latpayUserLastName', $('input[name="latpayUserLastName"').val());
      formData.append('latpayUserEmail', $('input[name="latpayUserEmail"').val());
      formData.append('merchant_id', $('input[name="merchant_id"').val());
      formData.append('merchant_password', $('input[name="merchant_password"').val());
      formData.append('merchant_public_key', $('input[name="merchant_public_key"').val());
      formData.append('cardToken', val);
      formData.append('practitioner_id', practitioner_id);

      $.ajax({
         url: "{{route('practitioner.latpayPaymentUpgradePlan')}}",
         data: formData,
         type: 'POST',
         contentType: false,
         processData: false,
      }).done(function(response) {
         // $(".loading").hide();
         if (response.status == "success") {
            callAfterLatpaySubscriptionSuccess();
         } else {
            if( response.status_code == "1003" ) {
               Swal.fire({
                  icon: 'warning',
                  title: 'Transaction limit exceeded',
                  text: "Amount cannot exceed $1000",
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            } else {
                if(response.status_code == "14" || response.status_code == "54" || response.status_code == "82"){
                    $(".latpay-error").html('<span style="color:red">'+ response.msg +'</span>');
                } else {
                    Swal.fire({
                        icon: response.status,
                        //title: 'Error!',
                        //text: response.msg,
                        title: 'Unable to process card payment',
                        text: 'Please check card details & try again',
                        showClass: {
                            popup: 'animate__animated animate__fadeInDown'
                        },
                        hideClass: {
                            popup: 'animate__animated animate__fadeOutUp'
                        }
                    });
                }

               if( response.redirect && response.redirect != '' ) {
                  setInterval( function() {
                     window.location.href = response.redirect;
                  }, 2000 );
               }
            }
         }
      });
   }

   $(document).ready( function() {

      openLatpay();

      $(document).on('click', '#planPaymentButton', function(e) {

         if( $("input[name='payble-amount']").val() == '' ) {
            Swal.fire({
               title: '',
               text: "Please add amount to pay",
               icon: 'warning',
               showCancelButton: false,
               confirmButtonText: 'Ok',
            });
            return false;
         }

         var checkval = $('input[name="payment_option_type"]').val();

         if($('input[name="payment_option_type"]').val() == '' && $("input[name='choose-card']:checked").val() == undefined && $("#appendPaymentCard").html() !== "") {
            Swal.fire({
               title: '',
               text: "Please select a payment method",
               icon: 'warning',
               showCancelButton: false,
               confirmButtonText: 'Ok',
            });
            return false;
         }

         $("input[name='cardHolderName']").val($("#lpscardcardholder").val());
         var val = $("input[name='choose-card']:checked").val();

         var reference = makeid(8);
         if (val) {
            // alert("IF");
            callLatpayForCardSubscription(val);
         } else {
            // alert("ELSE");
            LatpayCheckout.processpayment({
               "amount": $("input[name='latpayAmount']").val(),
               "currency": "AUD",
               "reference": reference ?? "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
               "description": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
               "firstname": $("input[name='latpayUserFirstName']").val(),
               "lastname": $("input[name='latpayUserLastName']").val(),
               "email": $("input[name='latpayUserEmail']").val(),
               "status": function(status) {
                  if( status == "success" ) {
                     $(".loading").show();
                     var TransToken = $('#TransToken').val();

                     //Once you got the transtoken, submit the latpay_from by using jquery.
                     if( TransToken ) {
                        callLatpayForNewSubscription();
                     }
                  } else {
                     $(".loading").hide();
                     $("#button-confirm").val('Submit Payment');
                     e.preventDefault();
                  }
               }
            });
         }
      });

      $(document).on('click', '.add-new-card-link', function(e) {

         $('#latpay-element').empty();
         var merchantId = $("input[name='merchant_id']").val();

         LatpayCheckout.open({
            merchantid: merchantId,
            publickey: $("input[name='merchant_public_key'").val(),
            merchantuserid: merchantId,
            'status': function(status) {
               if( status == 'success' ) {
                  $('#ifNoCardFound').css('display', 'block');
                  // $(".add-new-card-link").addClass('d-none');
                  $('#ifCardFound').css('display', 'none');
                  $("#payment-online").prop('checked', true);
                  $("input[name='payment_option_type']").val(2);
                  $("input[name='invoice_payment_option']").not("#payment-online").prop('checked',false);
               } else {
                  if( merchantId ) {
                     var title = 'Invalid merchant id, please contact administrator.';
                  } else {
                     title = 'Details not found for this merchant, please contact administrator.';
                  }
                  Swal.fire({
                     icon: "error",
                     title: title,
                     showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                     },
                     hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                     }
                  });
               }
            }
         });
      });
   });
</script>
@endsection