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

<style>
    .timezoneDiv .select2-selection__arrow
   {
      display: none;
   }
   .newBusinessDetailsPage .top-pading{ 
      margin-top: 0.25rem !important; 
   }
   .sidebar-menu {
    display: none;
   }
   body.grey-bg {
    background: #f7f7f7;
   }
   .nav-link{
    pointer-events: none;
   }
   i.latpay-credit-card-brand {
        right: 11%;
        margin-top: -48px;
        display: none;
    }

    .term_condition{
        font-size: 17px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        color: #24303F !important;
    }

    .term_condition_text{
        color: #24303F !important;
        white-space: normal;
        word-break: break-all;
    }
    .term_condition_a{
        color: #457379 !important;
    }
    #conditionsPopup .modal-dialog {
		max-width: 650px;
	}

</style>
<div class="online_payment_loader" style="display:none;z-index: 1066 !important;">
    <img class="img-fluid" src='{{asset("assets/images/online_payment_loader.gif")}}'>
 </div>
    <input type="hidden" name="step" value="amount_tab">
   <div class="voucher-main">
       <div class="voucher-header">
        <div class="container-fluid">
            <nav class="navbar navbar-light invoice-page-menu notes-menu w-100">
                <a class="p-0 cursor-pointer" id="backButton"><img src="{{asset('assets/images/Voucher/Back-button-grey.svg')}}" alt="" class="img-fluid" style="min-width: 40px"></a>          
             </nav>
        </div>
       </div>

       <div class="select-voucher-main">
        <div class="purchase-box">
            <div class="form-tabing">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="amount-tab" data-toggle="tab" href="#amount" role="tab" aria-controls="amount" aria-selected="true">AMOUNT</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">DETAILS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="confirmation-tab" data-toggle="tab" href="#confirmation" role="tab" aria-controls="confirmation" aria-selected="false">CONFIRMATION</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="amount" role="tabpanel" aria-labelledby="amount-tab">
                        <div class="voucher-box">
                            <div class="purchase-voucher">

                                <div class="section-title">
                                    <h2>Purchase Gift Voucher</h2>
                                </div>

                                @if($giftVouchers->pricing_type == 'customer')
                                <div class="voucher-block">
                                    <div class="row">
                                        <div class="col-sm-7 col-md-7">
                                            <h6>Enter custom amount</h6>
                                            {{-- <span>Redeemable on all services at {{$businessProfile->name}}</span>--}}
                                            <span>{{$giftVouchers->custom_price_description}}</span>
                                        </div>
                                        <div class="col-sm-5 col-md-5">
                                            <div class="right input-block">
                                                <div class="icon-input">
                                                    <div class="icon">
                                                        <img src='{{asset("assets/images/Voucher/dolar.svg")}}' alt="" class="img-fluid">
                                                    </div>
                                                    <input type="number" name="custom_amount" class="form-control" onkeypress="return isNumberKey(event,this)" onkeydown="return preventArrowKeys(event)" 
                                                    onwheel="return preventWheelScroll(event)" placeholder="0.00">
                                                </div>
                                                <a class="btn buy-btn buy_gift">Buy</a>
                                            </div>
                                        </div>      
                                        {{-- <div class="col-sm-12 col-md-5">
                                            <div class="right input-block">
                                                <input type="number" name="custom_amount" class="form-control" onkeypress="return isNumberKey(event,this)" placeholder="$100">
                                                <a class="btn buy-btn">Buy</a>
                                            </div>
                                        </div> --}}
                                    </div>
                                </div>
                                @elseif($giftVouchers->pricing_type == 'fixed')
                                    @foreach($priceArray as $val)
                                    <div class="voucher-block">
                                        <div class="row">
                                            <div class="col-sm-12 col-7 col-md-7">
                                                <h6>${{$val['price']}} Voucher</h6>
                                                <span>{{$val['description']}}</span>                                            
                                                {{-- <span>Redeemable on all services at {{$businessProfile->name}}</span> --}}
                                            </div>
                                            <div class="col-sm-12 col-5 col-md-5">
                                                <div class="right">
                                                    <a data-id="{{$val['price']}}" class="btn buy-btn buy_gift">Buy</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach 
                                @else 
                                    @foreach($priceArray as $val)
                                    <div class="voucher-block">
                                        <div class="row">
                                            <div class="col-sm-12 col-7 col-md-7">
                                                <h6>${{$val['price']}} Voucher</h6>
                                                <span>{{$val['description']}}</span> 
                                                {{-- <span>Redeemable on all services at {{$businessProfile->name}}</span>   --}}
                                            </div>
                                            <div class="col-sm-12 col-5 col-md-5">
                                                <div class="right">
                                                    <a data-id="{{$val['price']}}" class="btn buy-btn buy_gift">Buy</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach 
                                    <div class="voucher-block">
                                        <div class="row">
                                            <div class="col-sm-7 col-md-7">
                                                <h6>Enter custom amount</h6>
                                                <span>{{$giftVouchers->custom_price_description}}</span>                                            
                                                {{-- <span>Redeemable on all services at {{$businessProfile->name}}</span>  --}}
                                            </div>
                                            <div class="col-sm-5 col-md-5">
                                                <div class="right input-block">
                                                    <div class="icon-input">
                                                        <div class="icon">
                                                            <img src='{{asset("assets/images/Voucher/dolar.svg")}}' alt="" class="img-fluid">
                                                        </div>
                                                        <input type="number" name="custom_amount" class="form-control" onkeypress="return isNumberKey(event,this)" onkeydown="return preventArrowKeys(event)" 
                                                        onwheel="return preventWheelScroll(event)"  placeholder="0.00">
                                                    </div>
                                                    <a class="btn buy-btn buy_gift">Buy</a>
                                                </div>
                                            </div>      
                                            {{-- <div class="col-sm-12 col-md-5">
                                                <div class="right input-block">
                                                    <input type="number" name="custom_amount" class="form-control" onkeypress="return isNumberKey(event,this)" placeholder="$100">
                                                    <a class="btn buy-btn buy_gift">Buy</a>
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                @endif
                                <span id="amount_error" class="invalid-feedback d-block float-center"></span>
                             
                            </div>
                            <div class="tab-footer">
                                <a class="back"></a>
                                <a class="btn goto_next d-none" data-flag="amount_tab" id="amount_tab_next">Next</a>
                            </div>
                        </div>                          
                    </div>
                    <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
                        <div class="voucher-box">
                            <div class="purchase-voucher">
                                <div class="voucher-form">
                                    <div class="voucher-tabs">
                                        <ul>
                                            <li>
                                                <a class="identity active" data-id="someone_else">
                                                    <div class="icon">
                                                        <img src="{{asset('assets/images/Voucher/Gift.svg')}}" alt="" class="img-fluid">
                                                    </div>
                                                    <span>Someone else</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="identity" data-id="self">
                                                    <div class="icon">
                                                        <img src="{{asset('assets/images/Voucher/Yourself.svg')}}" alt="" class="img-fluid">
                                                    </div>
                                                    <span>Yourself</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>                
                                    <form action="" method="post" id="store_details">
                                        <input type="hidden" name="identity" value="someone_else">
                                        <input type="hidden" name="voucher_price">
                                        <input type="hidden" name="practitioner_id" value="{{$giftVouchers->practitioner_id}}">
                                        <input type="hidden" name="voucher_id" value="{{$giftVouchers->id}}">
                                        <input type="hidden" name="voucher_expiry_date" value="{{$giftVouchers->voucher_expiry_date}}">
                                        <input type="hidden" name="serial_number" value="{{$giftVouchers->serial_number}}">
                                        <input type="hidden" name="client_voucher_id">
                                        <div class="form-group" id="recipient_name">
                                            <label for="">Recipient name</label>
                                            <input type="text" class="form-control" name="recipient_name" placeholder="Enter recipients full name">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group" id="sender_name">
                                            <label for="">Voucher from</label>
                                            <input type="text" class="form-control" name="sender_name" placeholder="Enter name">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group" id="message">
                                            <label for="">Message (optional)</label>
                                            <textarea name="message" cols="5" rows="5" id="" placeholder="e.g. Happy Birthday..." class="form-control"></textarea>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group" id="recipient_email">
                                            <label for="">Recipient email for voucher delivery (optional)</label>
                                            <input type="email" class="form-control" name="recipient_email" placeholder="Enter email address">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group d-none" id="your_name">
                                            <label for="">Your name</label>
                                            <input type="text" class="form-control" name="your_name" placeholder="Enter your full name">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group">
                                            <label for="">Your email</label>
                                            <input type="email" class="form-control" name="sender_email" placeholder="Enter email address">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group d-none" id="your_message">
                                            <label for="">Message (optional)</label>
                                            <textarea name="your_message" cols="5" rows="5" id="" placeholder="e.g. Happy Birthday..." class="form-control"></textarea>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        @if (!empty($giftVouchers->terms_and_condition_link))
                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="terms_and_conditions" value="1" id="remember" class="custom-control-input">
                                                <label for="remember" class="custom-control-label">I have read and accept
                                                @if((filter_var($giftVouchers->terms_and_condition_link, FILTER_VALIDATE_URL)) )
                                                    <a target="new" href="{{ $giftVouchers->terms_and_condition_link ?? "" }}" id="create-password-popup">terms and conditions</a></label>
                                                @else
                                                    <a href="#" data-value="{{$giftVouchers->terms_and_condition_link}}" id="openTermsConditionPopup">terms and conditions</a></label>
                                                @endif
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        @endif
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="tab-footer">
                            <a class="back"></a>
                            <a class="btn goto_next" data-flag="details_tab" id="details_tab_next">Next</a>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="confirmation" role="tabpanel" aria-labelledby="confirmation-tab">
                        <div class="purchase-complete">
                            <div class="voucher-box">
                                <div class="p-icon">
                                    <img src="{{asset('assets/images/Voucher/Purchase.svg')}}" alt="" class="img-fluid">
                                </div>
                                <h2>Purchase complete</h2>
                                {{-- <p>Thank you for your order! The voucher has been sent to [purchaser <br> email]. If it’s a gift for someone else, they will also receive the voucher.</p> --}}
                                <p>Thank you for your order! The voucher has been sent to <span id="purchaser_email"></span>. If it’s a gift for someone else, they will also receive the voucher.</p>
                                <div class="purchase-btn">
                                    <ul>
                                        <li>
                                            <a id="setDownloadLink" target="_blank" class="download">
                                                <img src="{{asset('assets/images/Voucher/download_voucher.svg')}}" alt="" class="img-fluid">
                                                Download voucher
                                            </a>
                                        </li>
                                        <li>
                                            <a id="setBookingLink">
                                                <img src="{{asset('assets/images/Voucher/Make-booking.svg')}}" alt="" class="img-fluid">
                                                Make a booking
                                            </a>
                                        </li>
                                    </ul>
                                    
                                </div>
                            </div>
                        </div>
                        {{-- <div class="tab-footer">
                            <a class="back"></a>
                            <a class="btn goto_next" data-flag="purchase_complete_tab" id="purchase_complete_tab_next">Next</a>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>    
   </div>


   <div class="client-follow-popup login-modal clientintakeModal customscroll clientabpopup invoicemodal">
    <div class="modal fade AddCardModalPopup" id="PayNowNew" tabindex="-1" role="dialog">
       <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
             <div class="popup-marg">
                <div class="modal-header">
                   <h5 class="modal-title text-center eagle-font paytitle ">Pay now</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
                   </button>
                </div>
                <div class="modal-body p-0">
                   <form id="latpay_from">
                      <div id="payment-meth-main" class="external-payment-method-main">
                         <div class="shipping-method-area comm-form">
 
                            <div class="payment-meth-box ">
                               <p class="payment-amount"></p>
                            </div>
                            <h2 class="sub-title mb-1 mt-30">Secured payment</h2>
                            <p class="hidewhennomerchantid mb-3">All transactions are secured & encrypted</p>
                            <hr />
 
                            <div id="paymentsunavailablesection" class="payment-meth-box acti-pay-proce merchantIdNotExists">
                               <p class="">Online payments unavailable. Your application is still under review by our payment provider. Expect a response within 24 business hours.</p>
                            </div>
 
 
                            <input type="hidden" name="invoiceeditmode">
                            <input type="hidden" name="payment_option_type" value="2">
                            <input type="hidden" name="selectedinvoiceid" data-amount="">
                            <input type="hidden" name="LatPayclient_id">
                            <input type="hidden" name="LatPayflag"> 
                            <input type="hidden" name="invoiceNumber" id="invoiceNumber" value="{{$invoiceNumber}}"> 
                            
 
                            <div class="onlinePaymentDiv">
                               <div class="payment-card-main" id="ifNoCardFound">
                                  <input type="hidden" name="latpayAmount">
                                  <input type="hidden" name="latpayUserFirstName">
                                  <input type="hidden" name="latpayUserLastName">
                                  <input type="hidden" name="latpayUserEmail">
                                  <input type="hidden" name="merchant_id">
                                  <input type="hidden" name="is_credit_purchase">
                                  <input type="hidden" name="merchant_password">
                                  <input type="hidden" name="merchant_public_key">
                                  <input type="hidden" name="pre_id" id="pre_id" value="0">
                                  <input type="hidden" name="cardHolderName">
                                  <input type="hidden" name="previousInvoiceType" id="previousInvoiceType"> 
                                  @csrf
                                  <div id="latpay-element"> </div>
                                  <center><input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay"></center>
                                  <div id="custom-store-label" class="showwheninvoice d-none">
                                     <input type="hidden" name="forClientadd" />
                                     <input type="hidden" name="forClientid" />
                                     <input type="checkbox" class="custom-control-input " value="1" name="save_card" id="save_card1">
                                     <label class="custom-control-label " for="save_card1">Save card for faster payment next time?</label>
                                  </div>
                               </div>
 
                               <div class="choose-saved-card" style="display:none" id="ifCardFound">
                                  <p class="removeforinvoice">Choose payment method</p>
                                  <div id="appendPaymentCard"></div>
                               </div>
 
                               <a href="#" class="add-new-cart-link" role="button">Add a new card</a>
                              
                            </div>
                         
                         </div>
                      </div>
                   </form>
                </div>
                <div class="modal-footer">
                   <button data-credit="0" id="customButton" type="button" class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer">Record payment</button>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>


 <div class="modal fade pr-0" id="conditionsPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="term_condition">Terms and conditions</span>
            </div>
          <div class="modal-body">         
               <p class="term_condition_text" id="terms_condition"></p>
          </div>
          <div class="modal-footer">
            <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>
  </div>

@endsection


@section('import-scripts')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>

<script type="text/javascript">

    var businessId = @json($businessProfile->id);
    var baseUrl = "{{route('home')}}";
    var bookinglinkUrl = baseUrl + "/get-embeded-code?" + 'business_id=' + btoa(businessId);

    $(document).on('click','.buy_gift', function() {
        $('input[name="voucher_price"]').val($(this).data('id'));
        $("input[name='latpayAmount']").val($(this).data('id'));
        $("#amount_error").text('');
        $(".buy_gift").removeClass('active');
        $(this).toggleClass('active');
        const element = document.querySelector('.goto_next'); // Update with the correct selector
        // Set the data-flag attribute
        element.setAttribute('data-flag', 'amount_tab');
        // Trigger the click event
        element.click();
    });

    function isNumberKey(evt, element) {
		var charCode = (evt.which) ? evt.which : window.event.keyCode;
		//console.log(charCode);
		if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
			return false;
		else {
			var len = $(element).val().length;
			//console.log(len);
			if(len==10){
				return false;
			}
			var index = $(element).val().indexOf('.');
			if (index > 0 && charCode == 46) {
			return false;
			}
			if (index > 0) {
			var CharAfterdot = (len + 1) - index;
			if (CharAfterdot > 5) {
				return false;
			}
			}

		}
		return true;
	}

    function preventArrowKeys(evt) {
        var charCode = evt.which || evt.keyCode;

        // Prevent up (38) and down (40) arrow keys
        if (charCode === 38 || charCode === 40) {
            evt.preventDefault();  // Prevent the default action (value change)
            return false;
        }
        return true;
    }

    function preventWheelScroll(evt) {
        // Prevent scrolling up or down (mouse wheel)
        evt.preventDefault();
        return false;
    }

    $(document).on('click','.goto_next', function() {
        var giftDetails = @json($giftVouchers);
        if($(this).data('flag') == 'amount_tab')
        {  
            var flag = giftDetails.pricing_type;
            var custom_amount = $("input[name='custom_amount']").val();
            if(flag == 'customer')
            {
                if(custom_amount =='')
                {
                    $("#amount_error").text('Please enter amount');
                    return false;
                }

                custom_amount = parseFloat(custom_amount);
                var minAmount = parseFloat(giftDetails.customer_minimum_amount);
                var maxAmount = parseFloat(giftDetails.customer_maximum_amount);

                if (custom_amount < minAmount || custom_amount > maxAmount) {
                    $("#amount_error").text('The amount must be between $'+minAmount + ' and $'+maxAmount + '.');
                    return false;
                }
                $("input[name='voucher_price']").val(custom_amount);
            }else if(flag == 'fixed')
            {
                if($("input[name='voucher_price']").val() =='')
                {
                    $("#amount_error").text('Please select amount');
                    return false;
                }
            }else{
                var voucher_price = $("input[name='voucher_price']").val();
                if(custom_amount =='' && voucher_price =='')
                {
                    $("#amount_error").text('Please select or enter amount');
                    return false;
                }         
                
                if(custom_amount !='')
                {
                    custom_amount = parseFloat(custom_amount);
                    var minAmount = parseFloat(giftDetails.customer_minimum_amount);
                    var maxAmount = parseFloat(giftDetails.customer_maximum_amount);

                    if (custom_amount < minAmount || custom_amount > maxAmount) {
                        $("#amount_error").text('The amount must be between $'+minAmount + ' and $'+maxAmount + '.');
                        return false;
                    }
                    $("input[name='voucher_price']").val(custom_amount);
                }
            }     
            
            $("input[name='latpayAmount']").val($("input[name='voucher_price']").val());
            $("#amount-tab").removeClass('active show');
            $("#amount-tab").attr('aria-selected',false);
            $("#amount").removeClass('active show');

            $("#details").addClass('active show');
            $("#details-tab").addClass('active show');
            $("#details-tab").attr('aria-selected',true);
            $('input[name="step"]').val('details_tab');
        }
    });

    $(document).on('click','.identity', function() {
        $('input[name="identity"]').val($(this).data('id'));
        $(".identity").removeClass('active');
        $(this).toggleClass('active');
        if($(this).data('id') == 'self')
        {
            $("#your_message").removeClass('d-none');
            $("#your_name").removeClass('d-none');
            $("#recipient_name").addClass('d-none');
            $("#sender_name").addClass('d-none');
            $("#message").addClass('d-none');
            $("#recipient_email").addClass('d-none');
        }else{
            $("#your_message").addClass('d-none');
            $("#your_name").addClass('d-none');
            $("#recipient_name").removeClass('d-none');
            $("#sender_name").removeClass('d-none');
            $("#message").removeClass('d-none');
            $("#recipient_email").removeClass('d-none');
        }     
    });

    $(document).on('click','#details_tab_next', function() {
       // openLatpay();
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.settings.my_voucher.saveDetails') }}",
          data: new FormData($('#store_details')[0]),
          dataType: "JSON",
          cache: false,
          processData: false,
          contentType: false,
          beforeSend: function(msg) {
            $(".loading").addClass("d-block");
          }
        }).done( function(response) {
          $(".loading").removeClass("d-block");
          if( response.status == 'success' ) {
            $("input[name='client_voucher_id']").val(response.data.id);
            openLatpay();
            // Swal.fire({
            // icon: response.status,
            // title: response.msg,
            // showClass: {
            //   popup: 'animate__animated animate__fadeInDown'
            //   },
            //   hideClass: {
            //     popup: 'animate__animated animate__fadeOutUp'
            //   }
            // });            
          }else{
            $('.invalid-feedback').text('');
            $.each(response.errors, function(key, value) {
                
                if(key == 'terms_and_conditions')
                {
                    var input = $('input[name=' + key + ']');
                    input.parent().next('.invalid-feedback').text(value[0]).addClass('is-invalid');
                }else{
                    var input = $('input[name=' + key + ']');
                    input.next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                    var input = $('textarea[name=' + key + ']');
                    input.next('.invalid-feedback').text(value[0]);
                    input.addClass('is-invalid');
                }
            });
          }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });  
    
    
    function openLatpay() {
        $(".loading").hide();
        var voucher_price = Number($("input[name='voucher_price']").val()).toFixed(2);
        $('.payment-amount').text("Gift voucher purchase: $" +voucher_price+"");
        //$('.payment-amount').text("Gift voucher purchase: $" + $("input[name='voucher_price']").val()+"");
        $('#latpay-element').empty();
        var user = @json($practitioner);
        console.log(user);
        var setting = @json($settings);
        var first_name = '';
        var last_name = '';
        var email = $("input[name='sender_email']").val();

        var identity = $("input[name='identity']").val();
        if(identity == 'self')
        {
            first_name = $("input[name='your_name']").val();
        }else{
            first_name = $("input[name='sender_name']").val();
        }
    
        var merchant_id = user.merchant_id;
        var merchant_password = user.merchant_password;
        var merchant_public_key = user.merchant_public_key;
        if(user.merchant_id == null || user.merchant_id =='')
        {
            // merchant_id = setting.merchant_id;
            // merchant_password = setting.merchant_password;
            // merchant_public_key = setting.merchant_public_key;
            merchant_id = @json(env('MERCHANT_ID'));
            merchant_password = @json(env('MERCHANT_PASSWORD'));
            merchant_public_key = @json(env('MERCHANT_PUBLIC_KEY'));            
        }

        if (merchant_id == null || merchant_id == '') {
            var planid = "{{ $data['myPlan'] ?? '' }}";
            if (planid != '' && planid == 0) {
                $(".merchantIdNotExists").removeClass('d-none');
            }
            $("#ifCardFound").addClass('d-none');
            $(".add-new-cart-link").addClass('d-none');
            $(".hidewhennomerchantid").addClass('d-none');
            $('#PayNowNew').modal('show');
        } else {
            $(".add-new-cart-link").addClass('d-none');
            $(".merchantIdNotExists").addClass('d-none');
        }

      //$("input[name='latpayAmount']").val($(this).data('amount'));
        $("input[name='latpayUserFirstName']").val(first_name);
        $("input[name='latpayUserLastName']").val(last_name);
        $("input[name='latpayUserEmail']").val(email);
    //if ($("input[name='LatPayflag']").val() == 'create_invoice_new') {
        $("input[name='merchant_id']").val(merchant_id);
        $("input[name='merchant_password']").val(merchant_password);
        $("input[name='merchant_public_key']").val(merchant_public_key);
        $("input[name='pre_id']").val(user.id);
        $("input[name='forClientid']").val($("input[name='LatPayclient_id']").val());
        $("input[name='forClientadd']").val("forclient");
       // var latpayclietid = $("input[name='LatPayclient_id']").val();
       // var url = baseUrl + '/practitioner/patient/card/' + latpayclietid;
    // } else {
    //     $("input[name='merchant_id']").val(setting.merchant_id);
    //     $("input[name='merchant_password']").val(setting.merchant_password);
    //     $("input[name='merchant_public_key']").val(setting.merchant_public_key);
    //     var url = "{{route('practitioner.getPaymentCard')}}";
    // }

      // if ($(this).data('plan_id')) {
      //    var plan_id = $(this).data('plan_id');
      //    $.session.set('plan_id', plan_id);
      // }
      var merchantId = $("input[name='merchant_id']").val();
      var pre_id = btoa($("input[name='pre_id']").val());
      // LatpayCheckout.open({
      //    publickey: 'querygfdsazar',
      //   latpay public key : hjEn1GmfEjcxchD
      //    merchantuserid: 'test_hps',
      // });
      LatpayCheckout.open({
         merchantid: merchantId,
         publickey: $("input[name='merchant_public_key']").val(),
         merchantuserid: merchantId,
         'status': function(status) {
            if (status == 'success') {
                $('#PayNowNew').modal('show');
               // $('#openLatpayModal').modal('show');
               //$('#PayNowNew').modal('show');
            //    $.ajax({
            //       url: url,
            //       type: 'get',
            //       data:{practitioner_id:pre_id},
            //    }).done(function(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 type="radio" class="custom-control-input shipping_charge payment_option" value="' + value.card_token + '" name="choose-card" id="' + value.card_token + '"><span class="name_on_card hide">' + value.name_on_card + '</span> <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);
            //          });
            //         //  if ($("input[name='LatPayflag']").val() == 'create_invoice_new') {
            //         //     $(".removeclientcard").removeClass('d-none');
            //         //  }
            //          $('#ifNoCardFound').css('display', 'none');
            //          //$('#ifCardFound').css('display', 'block');
            //          // $('.add-new-cart-link').css('display', 'block');
            //          $("#ifCardFound").removeClass('d-none');
            //          $('#ifCardFound').css('display', 'block');
            //          $(".add-new-cart-link").removeClass('d-none');
            //       } else {
            //          $('#ifNoCardFound').css('display', 'block');
            //          $('#ifCardFound').css('display', 'none');
            //          $("#ifCardFound").addClass('d-none');
            //          $('.add-new-cart-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
      });
    }


    $(document).on('click', '#customButton', function(e) {
        var practitioner = @json($practitioner ?? '');
        var invoiceNumber = $("#invoiceNumber").val();
        var reference = practitioner.id + 'INV' + invoiceNumber;
        
        //var checkval = $('input[name="payment_option_type"]').val();
        $("#customButton").attr('disabled', true);
        $("input[name='cardHolderName']").val($("#lpscardcardholder").val());
       // var val = $("input[name='choose-card']:checked").val();

        var name_on_card = $("input[name='choose-card']:checked").next('.name_on_card').text();
        if (name_on_card) {
            const myArray = name_on_card.split(" ");
            var first_name = $("input[name='latpayUserFirstName']").val(myArray[0]);
            var last_name = $("input[name='latpayUserLastName']").val(myArray[1]);
        }

        //  return false;
        // if (val) {
        // callLatpayForCard(val);

        // } else {
        try{
            $.ajax({
            url: "{{route('validate.latpay_details')}}",
                data :{
                    'number':$("#customer_cc_number").val(),
                    'name':$("#lpscardcardholder").val(),
                    'dd':$("#customer_cc_expmo").val(),
                    'code':$("#customer_cc_cvc").val(),
                    '_token': "{{ csrf_token() }}",
                    'client_id': $("input[name='client_id']").val()
                },
                type: 'POST',
            }).done(function(response) {
            });
        }catch(err) {
        }
        var name = $("input[name='cardHolderName']").val();
        if (name) {
            const myArray = name.split(" ");
            var first_name = myArray[0];
            var last_name = myArray[1];
        } else {
            var first_name = $("input[name='latpayUserFirstName']").val();
            var last_name = $("input[name='latpayUserLastName']").val();
        }

        LatpayCheckout.processpayment({
            "amount": $("input[name='latpayAmount']").val(),
            "currency": "AUD",
            "reference": reference,
            "description": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
            "firstname": first_name,
            "lastname": last_name,
            "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) {
                        console.log("enter",TransToken);
                        callLatpayForNew();
                    }
                } else {
                    $("#customButton").attr('disabled', false);
                    if (isCreditPayment == 0 && $("#appendPaymentCard").html() !== "" && $('input[name="payment_option_type"]').val() == '') {
                        Swal.fire({
                        title: '',
                        text: "Please select a payment method",
                        icon: 'warning',
                        showCancelButton: false,
                        confirmButtonText: 'Ok',
                        });
                    }
                    return false;
                    $(".loading").hide();
                    $("#button-confirm").val('Submit Payment')
                    e.preventDefault();
                }
            }
        });        
    });

    function callLatpayForNew() {
        $('.online_payment_loader').show();
        // var modal = $("#openLatpayModal");
        //  var form = $('#latpay_from').serialize();
        var form = $('#latpay_from').serializeArray();
        
        var invoiceNumber = $("#invoiceNumber").val();
        var uniquekey = {
            name: "invoice_number",
            value: invoiceNumber
        };
        var client_id = {
            name: "client_id",
            value: $("input[name='client_id']").val()
        };
        var _token = {
            name: "_token",
            value: "{{ csrf_token() }}"
        };      
        form.push(uniquekey);
        form.push(client_id);
        form.push(_token);
        var modal = $("#PayNowNew");
        $.ajax({
            url: "{{route('practitioner.voucher.latpayPayment')}}",
            // data: $('#latpay_from').serialize(),
            data :form,
            type: 'POST',
        }).done(function(response) {
            //$('.online_payment_loader').hide();
            if (response.status == "success") {
               
                // modal.modal("hide");
                // if ($.session.get("plan_id") == '2') {
                //    $("#submit25plan").trigger('click');
                // }
                callFunctionAfterLatpaySuccess();
            } else {
                $('.online_payment_loader').hide();
                $("#customButton").attr('disabled', false);
                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'
                            }
                        });
                    }
                }
                }
            }
        });
    }

    function callLatpayForCard(val) {

        var practitioner = @json($practitioner ?? '');
        var invoiceNumber = $("#invoiceNumber").val();
        var reference = practitioner.id + 'INV' + invoiceNumber;
        $('.online_payment_loader').show();
        var modal = $("#PayNowNew");
        var formData = new FormData();
        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('is_credit_purchase', $('input[name="is_credit_purchase"').val());
        formData.append('merchant_password', $('input[name="merchant_password"').val());
        formData.append('merchant_public_key', $('input[name="merchant_public_key"').val());
        formData.append('pre_id', $('input[name="pre_id"').val());
        formData.append('cardToken', val);
        formData.append('reference', reference);
        formData.append('invoice_number', invoiceNumber);
        formData.append('client_id', $("input[name='client_id']").val());
        formData.append('_token',  "{{ csrf_token() }}");
        $.ajax({
            url: "{{route('practitioner.voucher.latpayPayment')}}",
            data: formData,
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS

        }).done(function(response) {
            
            if (response.status == "success") {
                modal.modal("hide");
                
                callFunctionAfterLatpaySuccess();
            } else {
                $('.online_payment_loader').hide();
                $("#customButton").attr('disabled', false);
                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'
                        }
                    });
                }
                }
            }
        });
    }

    function callFunctionAfterLatpaySuccess() {
        addInvoiceAppointment();
    }

    function addInvoiceAppointment() {
        // return false; 
        // $(".loading").show(); 
        var invoiceamt = $('input[name="voucher_price"]').val();
        var formData = new FormData();
        formData.append('client_voucher_id', $("input[name='client_voucher_id']").val());
        formData.append('amount_paid', invoiceamt);
        formData.append('payment_type', 2);
        formData.append('submit_type', 'submitwithpay');
        formData.append('practitioner_id', $("input[name='practitioner_id']").val());
        formData.append('invoice_number', $("#invoiceNumber").val());
        formData.append('from','patient'); 
        //formData.append('payment_date', $("#payment-date").val());

        $.ajax({
            url: "{{ route('practitioner.store.voucherInvoice')}}",
            method: 'POST',
            data: formData,
            processData: false, // Important: Don't let jQuery try to process the FormData
            contentType: false, // Important: Don't set contentType to avoid issues with FormData
            success: function(response) {
                $("#customButton").attr('disabled', false);
                $('.online_payment_loader').hide();
                $(".loading").hide();
                $("input[name='payment_option_type']").val(2);

                if (response.status == 'success') {
                    $('#PayNowNew').modal('hide');
                    if (response.data.invoice_pay_status == 'paid' || response.data.invoice_pay_status == 'credit') {
                        // Swal.fire({
                        //     icon: 'success',
                        //     title: 'Voucher purchased successfully',
                        //     showClass: {
                        //         popup: 'animate__animated animate__fadeInDown'
                        //     },
                        //     hideClass: {
                        //         popup: 'animate__animated animate__fadeOutUp'
                        //     }
                        // });

                       // setTimeout(function() {
                            var client_voucher_id = $("input[name='client_voucher_id']").val();
                            var url = '{{ route("practitioner.my.voucher.download", ":id") }}';
                            var purchaseFor = response.data.purchase_details.purchased_for;
                            var recipientEmail = "";
                            // if(purchaseFor=='someone_else'){
                            //     recipientEmail = response.data.purchase_details.recipient_email;
                            // }else{
                            //     recipientEmail = response.data.purchase_details.sender_email;
                            // }
                            recipientEmail = response.data.purchase_details.sender_email;
                            if (recipientEmail && recipientEmail.trim() !== "") {
                                $("#purchaser_email").text(recipientEmail);
                            } else {
                                $("#purchaser_email").text(""); 
                            }
                            url = url.replace(':id',btoa(client_voucher_id));
                            $("#setDownloadLink").attr("href",url);
                            $("#setBookingLink").attr("href",bookinglinkUrl);
                            $("#details").removeClass('active show');
                            $("#details-tab").removeClass('active show');
                            $("#details-tab").attr('aria-selected', false);
                            $("#confirmation").addClass('active show');
                            $("#confirmation-tab").addClass('active show');
                            $("#confirmation-tab").attr('aria-selected', true);
                            $('input[name="step"]').val('confirmation_tab');
                       // }, 2000);

                    } else if (response.status == 'warning') {
                        Swal.fire({
                            icon: response.status,
                            text: response.text,
                            title: response.title,
                            showClass: {
                                popup: 'animate__animated animate__fadeInDown'
                            },
                            hideClass: {
                                popup: 'animate__animated animate__fadeOutUp'
                            }
                        });
                        return false;
                    }
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                Swal.fire({
                    icon: 'error',
                    title: 'Something went wrong!',
                    text: 'Please try again later.',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                });
                $(".loading").hide();
            }
        });
    }


    // function addInvoiceAppointment() {
    //     // return false;
    //    // $(".loading").show(); 
    //     var invoiceamt = $('input[name="voucher_price"]').val();
    //     var formData = new FormData();
    //     formData.append('client_voucher_id', $("input[name='client_voucher_id']").val());
    //     formData.append('amount_paid', invoiceamt);
    //     formData.append('payment_type', 2);
    //     formData.append('submit_type', 'submitwithpay');
    //     formData.append('payment_date', $("#payment-date").val());

    //     $.ajax({
    //         url: "{{ route('practitioner.store.voucherInvoice')}}",
    //         method: 'POST',
    //         data: formData,
    //         success: function(response) {
    //             $("#customButton").attr('disabled', false);
    //             $('.online_payment_loader').hide();
    //             $(".loading").hide();
    //             $("input[name='payment_option_type']").val(2);
    //             if (response.status == 'success') {                  
    //                 if (response.data.invoiceadd.invoice_pay_status == 'paid' || response.data.invoiceadd.invoice_pay_status == 'credit') {
    //                     var title = response.data.successMessage;
    //                     Swal.fire({
    //                         icon: 'success',
    //                         //text: 
    //                         title: 'Voucher purchased successfully',
    //                         showClass: {
    //                             popup: 'animate__animated animate__fadeInDown'
    //                         },
    //                         hideClass: {
    //                             popup: 'animate__animated animate__fadeOutUp'
    //                         }
    //                     });

    //                     setTimeout(function() {
    //                         $("#details").addClass('active show');
    //                         $("#details-tab").addClass('active show');
    //                         $("#details-tab").attr('aria-selected',false);
                            
    //                         $("#confirmation").removeClass('active show');
    //                         $("#confirmation-tab").removeClass('active show');
    //                         $("#confirmation-tab").attr('aria-selected',true);
    //                     }, 2000);
                        
                    
    //                 } else if (response.status == 'warning') {
    //                     Swal.fire({
    //                     icon: response.status,
    //                     text: response.text,
    //                     title: response.title,
    //                     showClass: {
    //                         popup: 'animate__animated animate__fadeInDown'
    //                     },
    //                     hideClass: {
    //                         popup: 'animate__animated animate__fadeOutUp'
    //                     }
    //                     });
    //                     return false;
    //                 }
    //             }
    //         }
    //     });
    // }

    $(document).on('click', '.add-new-cart-link', function(e) {
        $('#latpay-element').empty();
        $("input[name='choose-card']:checked").prop('checked', false);
        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-cart-link").addClass('d-none');
                $(".showoption").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'
                    }
                });
            }
        }
        });
    });

    $(document).on('click', '#backButton', function(e) {
        if($('input[name="step"]').val() == 'amount_tab')
        {
            var is_from_booking_link = @json($is_from_booking_link);
            if(is_from_booking_link == 1)
            {
                window.location.href = bookinglinkUrl;
            }else{
                window.location.reload();
            }            
        }else if($('input[name="step"]').val() == 'confirmation_tab')
        {
            window.location.reload();
        }
        else{
            $("#amount-tab").addClass('active show');
            $("#amount-tab").attr('aria-selected',true);
            $("#amount").addClass('active show');

            $("#details").removeClass('active show');
            $("#details-tab").removeClass('active show');
            $("#details-tab").attr('aria-selected',false);            
            $('input[name="step"]').val('amount_tab');
        }
    });

    $(document).on('click', '#openTermsConditionPopup', function(e) {
        // $("#terms_condition").text($(this).data('value'));
        var termsContent = $(this).data('value');

        // Regular expression to match full URLs (http:// or https://) and partial URLs (starting with www)
        var urlPattern = /(https?:\/\/[^\s]+|www\.[^\s]+)/g;

        // Replace the URLs with anchor tags
        var updatedContent = termsContent.replace(urlPattern, function(url) {
            // If the URL doesn't start with http:// or https://, prepend it
            if (!/^https?:\/\//i.test(url)) {
                url = 'http://' + url; // Prepend http:// if missing
            }
            return '<a class="term_condition_a" href="' + url + '" target="_blank">' + url + '</a>';
        });

        // Set the content with clickable URLs in the modal, use .html() to render the anchor tags
        $("#terms_condition").html(updatedContent);
        $("#conditionsPopup").modal('show');
    });
    
    
</script>
@endsection