@extends('front.inner-layout.app')

@section('content')

<style>
	#latpay-element i.latpay-credit-card-brand {
      display: none !important;
   }
</style>


<div class="page-content dashboard-wrapper credit-wrapper">
    <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
        <a class="back" href="{{ url('practitioner/settings/show') }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-fluid" style="min-width: 40px"></a>
        
        <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> credits</h1>
    </nav>
   <div class="brdr-bttm"></div>
   @php
		$data = Common::getMyPlan();
		$showPaymentSectionClass = $data['isBankDetailsFilled'] == 1 ? 'd-none' : '';
		$showOnlinePaymentsUnavailableClass = $data['myPlan'] == 2 ? 'd-none' : '';
		if($data['isBankDetailsFilled'] == 0) {
			$showOnlinePaymentsUnavailableClass = 'd-none';
		}
		

   @endphp



   <div class="credit-balance-main">
        <div class="container">
            <div class="boxwhite credit-box">
                <div class="credit-block">
					@if( $user->parent_id == '')
                    <h3>Credit balance <span>
						@if($user->credit_balance || $user->credit_balance === 0)
							{{ round($user->credit_balance, 2) }}
						@else
							0
						@endif </span></h3>
					@endif
                    <p>Use credits to send SMS messages and/or host video consultations. 18c each for purchases under $100 or 11c for purchases above. Custom pricing for orders over $1000.</p>
                </div>
            </div>
            <div class="boxwhite credit-table credit-box">
                <div class="">
                   <table class="table">
                     <thead>
                        <tr>
                            <th>Credit costs</th>
                            <th>Starter Plan</th>
                            <th>
								<span><img src="{{asset('assets/images/Premium-plan.svg')}}" width="30" alt="" class="img-fluid">Premium Plan</span></th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                            <td>
                                <span>
                                    2 way SMS 

                                </span>
                        
                            <span class="tooltip">
                                    <span><img src="{{asset('assets/images/information-icon-new.svg')}}" width="15" alt="" class="img-fluid"></span>
                                    <span class="tooltiptext">
                                       <div class="media">
                                          <img src="{{asset('assets/images/bg-info-icon-black.png')}}" class="img-fluid mr-2" width="19" alt="...">
                                          <div class="media-body">
                                             <h5 class="mt-0 text-left">2 way SMS allows patients to respond to sent messages. There is no charge to receive an inbound SMS</h5>
                                          </div>
                                       </div>
                                    </span>
                                 </span></td>
                            <td>1 credit</td>
                            <td>75 free per month, 1 credit <br> thereafter</td>
                        </tr>
                        <tr>
                            <td>Telehealth</td>
                            <td>2 credits per 15 minutes</td>
                            <td>Included</td>
                        </tr>
                     </tbody>
                   </table>
                </div>
            </div>

            <div class="credit-purchase credit-box">
                <div class="boxwhite">
                    <h3>Purchase credits</h3>
                    <hr>

                    <form action="">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <label for="">Purchase amount</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
                                    <div class="input-box">
                                        <div class="icon">
                                            $
                                        </div>
                                        {{-- <input type="text" class="form-control" placeholder="25.00"> --}}
                                        <input type="number" id="purchase_amount" name="purchase_amount" class="form-control text-left float_number_validation" onkeypress="return isNumberKey(event,this)" placeholder="0.00">
                                    </div>
									<span class="invalid-feedback d-block"></span>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <label for="">Coupon code</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
                                    <div class="input-box">
                                        <div class="icon">
                                        +
                                        </div>
                                        <input type="text" name="coupon_code" class="form-control text-left coupon_code" placeholder="Enter Code">
                                        {{-- <button  class="link verify_code">Apply</button> --}}
										
                                    	<a class="link verify_code" href="javascript:void(0)">Apply</a>
                                    </div>
									<span id="wrongcouponcode" style="color:#e3342f"></span>
                                </div>
                            </div>
                        </div>

                        {{-- <hr> --}}

                        <div class="form-group main_credits">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <label for="">Credits</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
									<label for=""><span id="no_of_credits"></span> <label >                               
                                    {{-- <input readonly type="text"  id="no_of_credits" name="no_of_credits" class="form-control " placeholder="000"> --}}
                                </div>
                            </div>
                        </div>

                        <div class="form-group credits_hide_show">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <label for="">Bonus credits applied</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
									<label for=""><span id="bonus_credits"></span> <label >
                                </div>
                            </div>
                        </div>

                        <div class="form-group total-credit credits_hide_show">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <label for="">Total credits</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
                                    <label for=""><span id="total_credits"></span> <label >                                    
                                </div>
                            </div>
                        </div>

						<span  id="topup_not_apply" style="color:#e3342f"></span>
						<input type ="hidden" id="cards_details_get" value="{{ $card_details }}">
						
                        <button type="button" class="cardDetailsModal btn-fill w-100 mt-10">Purchase</button>
                    </form>
                </div>
            </div>

			<div class="credit-purchase credit-box">
                <div class="boxwhite">
                    <form action="">
                        <h3>Automatically top up account (optional)</h3>
                        <p>We will automatically top up your account. Cancel anytime.</p>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <label for="">When my credit balance is</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
                                    <div class="input-box">
                                        <div class="icon">
                                        =
                                        </div>
                                        <input type="number" id="auto_topup_credit_balance" name='auto_topup_credit_balance' class="form-control float_number_validation" onkeypress="return isNumberKey(event,this)" placeholder="0">
										
                                    </div>
									<span id="credit_required" style="color:#e3342f"></span>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-12 col-md-5">
                                    <label for="">Top up my account by</label>
                                </div>
                                <div class="col-sm-12 col-md-5">
                                    <div class="input-box">
                                        <div class="icon">
                                        $
                                        </div>
                                        <input type="number" id="auto_topup_amount" name='auto_topup_amount', class="form-control float_number_validation" onkeypress="return isNumberKey(event,this)" placeholder="0.00">
										<a href="javascript:void(0)" class="link auto_topup_apply show_if_save"><span id="auto_status" value="cancel"></span>Cancel</a>
										{{-- <a href="javascript:void(0)" class="link auto_topup_apply" role="button"><span id="auto_status"></span></a> --}}
                                        {{-- <button class="link" onclick="auto_topup_apply()">Apply</button> --}}
                                    </div>
									<span id="wrong_topup" style="color:#e3342f"></span>
									
                                </div>
                            </div>
							
                        </div>
						{{-- <a href="javascript:void(0)" class="link auto_topup_apply" role="button"><span id="auto_status"></span></a> --}}
						<button type="button" class="auto_topup_apply btn-fill w-100 mt-10 saveautotopup"><span id="auto_status" value="save"></span>Save</button>
                    </form>
                </div>
            </div>

			@if($dedicated_number_flag == 'expire_number')
				<div class="credit-purchase credit-purchase-new credit-box">
					<div class="boxwhite">
						<form action="">
							<h3>Purchase dedicated number</h3>
							<p>A dedicated virtual number allows you to send SMS from the same mobile number, enabling you to receive replies anytime. Without this, you will be using a shared number service, which limits replies to 48 hours and uses a different number for every message sent to below.</p>
							<p> Virtual numbers can only send and receive SMS; they cannot make or receive calls.<br></p>
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-12">
										<input type="radio" id="select_dedicated_plan" name="select_dedicated_plan" value="monthly">
										<label for="select_dedicated_plan">Purchase a dedicated virtual number for 6 months - $75</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-12">
										<input type="radio" id="select_dedicated_yearly" name="select_dedicated_plan" value="yearly">
										<label for="select_dedicated_plan">Purchase a dedicated virtual number for 12 months - $120</label>
										<span class="invalid-feedback d-block select_dedicated_yearly_error"></span>
									</div>
								</div>
								
							</div>
							{{-- <a href="javascript:void(0)" class="link auto_topup_apply" role="button"><span id="auto_status"></span></a> --}}
							<button type="button" class="dedicated_plan_button btn-fill w-100 mt-10">Purchase</button>                    </form>
					</div>
				</div>
			@endif
			@if($dedicated_number_flag == 'not_assign_number')
				<div class="credit-purchase credit-purchase-new credit-box">
					<div class="boxwhite">
						<form action="">
							<h3>Purchase dedicated number</h3>
							<p>Thank you for your purchase. It can take up to 48 business hours for a number to be assigned to you. We’ll be in contact shortly.</p>
							<div class="form-group">
								<div class="row">
									
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									
								</div>
								
							</div>                 
						</form>
					</div>
				</div>
			@endif
			@if($dedicated_number_flag == 'assign_number')
				<div class="credit-purchase credit-purchase-new credit-box">
					<div class="boxwhite">
						<form action="">
							<h3>Purchase dedicated number</h3>
							<p>Thank you for your purchase. Your dedicated number has been assigned.</p>
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-12">
									
										<label for="select_dedicated_plan">Your number: {{$dedicated_number->allow_dedicated_number}}</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<div class="row">
									<div class="col-sm-12 col-md-12">
										
										<label for="select_dedicated_plan">Expiry date: {{\Carbon\Carbon::parse($dedicated_number->dedicated_number_expiry_date)->format('d/m/Y') }}</label>
										
									</div>
								</div>
								
							</div>             
						</form>
					</div>
				</div>
			@endif



            <!-- <div class="payment-amount-main">
                <div class="boxwhite">
                    <div class="amount">
                        Payment amount $25.00
                    </div>
    
                    <div class="secured-payment">
                        <h3>Secured payment</h3>
                        <p>All transactions are secured & encrypted</p>
    
                        <hr>
    
                        <div class="card-block">
                            <div class="select-card">
                                <div class="card-radio">
                                    <input type="radio" name="payment">
                                    <label for=""></label>
                                </div>
                                <div class="card-input">
                                    <div class="icon">
                                        <img src="{{asset('assets/images/mastercard.png')}}" width="38" alt="" class="img-fluid">
                                    </div>
                                    <input type="text" class="form-control" placeholder="•••• •••• •••• 5678">
                                </div>
                            </div>
                        </div>
                        <div class="card-block">
                            <div class="select-card">
                                <div class="card-radio">
                                    <input type="radio" name="payment">
                                    <label for=""></label>
                                </div>
                                <div class="card-input">
                                    <div class="icon">
                                        <img src="{{asset('assets/images/visa.png')}}" width="38" alt="" class="img-fluid">
                                    </div>
                                    <input type="text" class="form-control" placeholder="•••• •••• •••• 5678">
                                </div>
                            </div>
                        </div>
    
                        <a  href="#add-new-card-collapse"  data-toggle="collapse" role="button" class="link">Add a new card</a>

						<div class="collapse" id="add-new-card-collapse">
							<div class="card card-body">
							   <div class="payment-card-main">
								  <div class="form-group usericon">
									 <label>Name on card</label>
									 <input type="text" name="card_holder" class="form-control" placeholder="Name">
									 <span class="invalid-feedback d-block"></span>
								  </div>
								  <div class="form-group usercardicon">
									 <label>Card Number</label>
									 <input type="text" name="card_number" class="form-control" placeholder="0000 0000 0000 0000">
									 <span class="invalid-feedback d-block"></span>
								  </div>
								  <div class="row">
									 <div class="col-lg-6 col-md-6">
										<div class="form-group expiryicon" id="open_from_date">
										   <label>Expiry</label>
										   <input type="text" class="form-control" placeholder="MM/YYYY" name="card_expiry">
										   <span class="invalid-feedback d-block"></span>
										</div>
									 </div>
									 <div class="col-lg-6 col-md-6">
										<div class="form-group expiryicon cvv-icon">
										   <label>CCV</label>
										   <input type="number" length="3" name="cvv" class="form-control" placeholder="000">
										   <span class="invalid-feedback d-block"></span>
										</div>
									 </div>
								  </div>
							   </div>
							</div>
						 </div>
						 <div class="popup-more-filter mb-0">
							<div class="popup-label">
							   <div class="custom-control custom-checkbox">
								  <input type="radio" class="custom-control-input shipping_charge" name="save-card1" id="save-card1">
								  <label class="custom-control-label" for="save-card1">Store card encrypted for faster processing next time</label>
							   </div>
							</div>
						 </div>
                    </div>
                </div>

                <button type="submit" id="customButton" class="btn-fill w-100 mt-10">Process payment</button>
            </div> -->
        </div>
   </div>
</div>

<!-- Serviceprovider popup -->
<div class="client-follow-popup customscroll openclickmodal quickaddModal addpaymentmethod processpayModal radiobutton-custom">
	<div class="modal fade show" id="cardDetailsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
	   <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-left eagle-font font-600" id="exampleModalLabel2">Choose Payment Method</h5>
				   <div class="appendPaymentCardlatest"></div>
				   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					  <span aria-hidden="true"><img style="margin-right: 16px !important;margin-top: 22px;" src='{{asset("assets/images/close-img.png")}}' alt="" class="img-fluid"></span>
				   </button>
				</div>
				<div class="modal-body p-0">
				   <div class="mCustomScrollbar">
					  <div class="comm-marg waitlist-modal small-bullet buttonradio-area">
						 <div class="mt-30 card_details_append">
							<!-- @foreach($cards as $card)
 
							@endforeach
							@if(count($cards) == 0)
							   <span>No Cards found</span>
							 @endif -->
 
 
						 </div>
						 <div class="addplus-icon text-center mt-10 mb-20">
							<a href="#" data-toggle="modal" data-dismiss="Modal" data-target="#AddCardModal">
							   <img style="width: 11% !important;" src="{{asset('assets/images/plus-img.svg')}}" alt="" class="img-fluid"></a>
						 </div>
					  </div>
				   </div>
				</div>
				<div class="modal-footer">
				   @if(count($cards) >= 1)
				   <a href="javascript:" class="yellow-btn mt-0 text-white save-btn-bg cursor-pointer puchaseCredit">Process Payment</a>
				   @endif
				</div>
			 </div>
		  </div>
	   </div>
	</div>
</div>

<div class="loading" style="z-index: 1066 !important;">Loading&#8230;</div>
 <!-- Serviceprovider Popup-->

 <div class="client-follow-popup login-modal clientintakeModal customscroll clientabpopup invoicemodal payment-method-modal">
	<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="mCustomScrollbar">
							<div class="shipping-method-area comm-form payment-amount-main">
								<div class="boxwhite">
									{{-- <div class="amount">
										Payment amount $25.00
									</div> --}}
									<div class="payment-meth-box ">
										<p class="payment-amount"></p>
									 </div>
					
									<div class="secured-payment">
										<h3>Secured payment</h3>

										<div id="paymentsunavailablesection" class="payment-meth-box acti-pay-proce merchantIdNotExists {{ $showOnlinePaymentsUnavailableClass }}">
											<p class="">Online payments unavailable. Your application is still under review by our payment provider. Expect a response within 24 business hours.</p>
										 </div>

										<p class="hidewhennomerchantid">All transactions are secured & encrypted</p>
					
										<hr>

										<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">

										<div class="onlinePaymentDiv">
											<div class="payment-card-main save-card-div" style="display:none" 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="cardHolderName">
												<input type="hidden" name="credit_invoiceNumber" id="credit_invoiceNumber" value="0">
												<input type="hidden" name="previousInvoiceType" id="previousInvoiceType">
												<input type="hidden" name="is_purchase_dedicated">
												<input type="hidden" name="dedicated_plan">
										
				
												@csrf
												<div id="latpay-element-olddiv">
													<div id="latpay-element" class="latpay-element-old"> </div>
												</div>
												<center><input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay"></center>
												<div class="popup-more-filter mb-0 hidewheninvoice ">
													<div class="popup-label">
														<div class="custom-control custom-checkbox">
															<input type="hidden" name="forClientadd" />
															<input type="hidden" name="forClientid" />
															<input type="checkbox" class="custom-control-input " value="1" name="save_card" id="save_card">
				
															<label class="custom-control-label " for="save_card">Store card encrypted for faster processing next time</label>
														</div>
													</div>
												</div>
												<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">
												<div id="appendPaymentCardlatest"></div>
											 </div>

											

											
												
											

											{{-- <div class="card-block">
											<div class="select-card">
												<div class="card-radio">
													<input type="radio" name="payment">
													<label for=""></label>
												</div>
												<div class="card-input">
													<div class="icon">
														<img src="{{asset('assets/images/visa.png')}}" width="38" alt="" class="img-fluid">
													</div>
													<input type="text" class="form-control" placeholder="•••• •••• •••• 5678">
												</div>
											</div>
										</div> --}}

			
											<a href="#" class="add-new-cart-link" role="button">Add a new card</a>
											<div id="appendwhennomerchantid" class="{{ $showPaymentSectionClass }}">
												<div class="plandetail-box d-grid">
													<p id="planRenew" class="font-15 text-left text-grey text-center">To process online payments, please activate your payment gateway. Our payments partners take up to 24 business hours to process your application.</p>
													<input type="hidden" name="is_bank_details_filled" id="is_bank_details_filled" value="{{ $data['isBankDetailsFilled'] }}">
													<a href="{{ $data['redirect'] }}" class="btn btn-unfill font-15" style="font-weight: unset;">{{ $data['title'] }}</a>
												</div>
											</div>
										</div>
					
										
										{{-- <div class="card-block">
											<div class="select-card">
												<div class="card-radio">
													<input type="radio" name="payment">
													<label for=""></label>
												</div>
												<div class="card-input">
													<div class="icon">
														<img src="{{asset('assets/images/visa.png')}}" width="38" alt="" class="img-fluid">
													</div>
													<input type="text" class="form-control" placeholder="•••• •••• •••• 5678">
												</div>
											</div>
										</div> --}}

										<div class="choose-saved-card d-none external_payment_div">

											<div class="popup-more-filter external_payment_box">
											   <div class="col-12">
												  <div class="payment-box-new label-input ">
													 <div class="row " id="cash-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Cash </label>
														<div class="col-md-6 col-6 pr-0">
														   <div class="form-group brdrfull">
															  <input type="hidden" name="payment_option[]" value="4">
															  <span class="dollar-icon">$</span>
															  <input type="text" name="payment_value[]" id="cash-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
												  <div class="payment-box-new label-input ">
													 <div class="row " id="credit_card-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Credit Card </label>
														<div class="col-md-6 col-6 pr-0">
														   <div class="form-group brdrfull">
															  <input type="hidden" name="payment_option[]" value="1">
															  <span class="dollar-icon">$</span>
															  <input type="text" name="payment_value[]" id="credit-card-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
												  <div class="payment-box-new label-input ">
													 <div class="row " id="eftpos-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Eftpos </label>
														<div class="col-md-6 col-6 pr-0">
														   <input type="hidden" name="payment_option[]" value="3">
														   <div class="form-group brdrfull">
															  <span class="dollar-icon">$</span> <input type="text" name="payment_value[]" id="eftpos-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
												  <div class="payment-box-new label-input ">
													 <div class="row " id="HICAPS-terminal-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">HICAPS terminal </label>
														<div class="col-md-6 col-6 pr-0">
														   <div class="form-group brdrfull">
															  <input type="hidden" name="payment_option[]" value="10">
															  <span class="dollar-icon">$</span> <input type="text" name="payment_value[]" id="terminal-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
												  <div class="payment-box-new label-input ">
													 <div class="row " id="direct-deposit-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Direct deposit</label>
														<div class="col-md-6 col-6 pr-0">
														   <div class="form-group brdrfull">
															  <span class="dollar-icon">$</span>
															  <input type="hidden" name="payment_option[]" value="7">
															  <input type="text" name="payment_value[]" id="direct-deposit-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
												  <div class="payment-box-new label-input ">
													 <div class="row " id="other-amount">
														<label class="col-md-6 col-6 px-0 mb-0 align-items-center d-flex">Other</label>
														<div class="col-md-6 col-6 pr-0">
														   <div class="form-group brdrfull">
															  <input type="hidden" name="payment_option[]" value="6">
															  <span class="dollar-icon">$</span> <input type="text" name="payment_value[]" id="other-amount" class="numeric-dot-only form-control other_payment_option" placeholder="0.00">
														   </div>
														</div>
													 </div>
												  </div>
											   </div>
			  
											</div>
			  
											<div class="payment-meth-box mb-3 d-none total_paid_display_div">
											   <p class="total_paid"></p>
											</div>
										 </div>
					
										{{-- <a  href="#add-new-card-collapse"  data-toggle="collapse" role="button" class="link">Add a new card</a> --}}

										<div class="collapse" id="add-new-card-collapse">
											<div class="card card-body">
											<div class="payment-card-main">
												<div class="form-group usericon">
													<label>Name on card</label>
													<input type="text" name="card_holder" class="form-control" placeholder="Name">
													<span class="invalid-feedback d-block"></span>
												</div>
												<div class="form-group usercardicon">
													<label>Card Number</label>
													<input type="text" name="card_number" class="form-control" placeholder="0000 0000 0000 0000">
													<span class="invalid-feedback d-block"></span>
												</div>
												<div class="row">
													<div class="col-lg-6 col-md-6">
														<div class="form-group expiryicon" id="open_from_date">
														<label>Expiry</label>
														<input type="text" class="form-control" placeholder="MM/YYYY" name="card_expiry">
														<span class="invalid-feedback d-block"></span>
														</div>
													</div>
													<div class="col-lg-6 col-md-6">
														<div class="form-group expiryicon cvv-icon">
														<label>CCV</label>
														<input type="number" length="3" name="cvv" class="form-control" placeholder="000">
														<span class="invalid-feedback d-block"></span>
														</div>
													</div>
												</div>
											</div>
											</div>
										</div>
										{{-- <div class="popup-more-filter mb-0">
											<div class="popup-label">
											<div class="custom-control custom-checkbox">
												<input type="radio" class="custom-control-input shipping_charge" name="save-card1" id="save-card1">
												<label class="custom-control-label" for="save-card1">Store card encrypted for faster processing next time</label>
											</div>
											</div>
										</div> --}}
									</div>
								</div>

								<!-- <button type="submit" id="customButton" class="btn-fill w-100 mt-10">Process payment</button> -->
							</div>
						</div>
					</form>
				
				  
				</div>
				<div class="modal-footer">
				    <button type="submit" id="customButton" class="btn-fill w-100 mt-10">Process payment</button>
				</div>
			 </div>
		  </div>
		
	   </div>
	</div>
 </div>

 <div class=" login-modal clientintakeModal customscroll clientabpopup invoicemodal">
    <div class="modal fade AddCardModalPopup" id="PayNowForCaledarPurchaseModal" 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 today</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_button">
                <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="paid_plan_latpay_from">
                <div id="payment-meth-main" class="mCustomScrollbar">
                  <div class="shipping-method-area comm-form">
                    <div class="payment-meth-box mt-30" id="display_amount">
                      <p class="payment-amount"></p>
                    </div>

                    <hr class="payment_hr" />

                    <p class="hidewhennomerchantid mb-3" id="payment_text">Today's payment will be calculated on a pro-rata basis to take you up to your next billing cycle. You have <span id="number_of_days_left"></span> days before your next billing date</p>

                    <input type="hidden" name="payment_option_type" value="">
                    <div class="payment-card-main" style="display:none" id="ifNoCardFound">
                      {{-- <input type="hidden" name="calendarRequested" id="calendarRequested" value=""> --}}
                      <input type="hidden" name="paid_amount" id="paid_amount" value="">
                      {{-- <input type="hidden" name="total_calendars" id="total_calendars" value="1"> --}}
                      {{-- <input type="hidden" name="is_calendar" id="is_calendar" value="1"> --}}
                      {{-- <input type="hidden" name="isSubscribed" id="isSubscribed" value=""> --}}
                      <input type="hidden" name="paybleAmount" id="paybleAmount" value="">
                      {{-- <input type="hidden" name="renewal" id="renewal" value="1"> --}}
                      <input type="hidden" name="is_add_card" id="is_add_card" value="0">
                      <input type="hidden" name="latpayAmountNewCard" id="latpayAmountNewCard" value="">
                      <input type="hidden" name="latpayUserFirstNameNewCard" value="{{ $practitioner->first_name }}">
                      <input type="hidden" name="latpayUserLastNameNewCard" value="{{ $practitioner->last_name }}">
                      <input type="hidden" name="latpayUserEmailNewCard" value="{{ $practitioner->email }}">
                      <input type="hidden" name="merchant_id_new_card" value="{{ $settings->merchant_id }}">
                      <input type="hidden" name="merchant_password_new_card" value="{{ $settings->merchant_password }}">
                      <input type="hidden" name="merchant_public_key_new_card" value="{{ $settings->merchant_public_key }}">
                      <input type="hidden" name="cardHolderName" value="{{ $practitioner->first_name.' '.$practitioner->last_name }}">
                      <input type="hidden" name="practitioner_id" value="{{ $practitioner->id }}">
					  <input type="hidden" name="new_card_auto_topup" value="new_card_auto_topup">

                      @csrf
					 
                    
                      <center><input style="display: none;" type="submit" id="button-confirm" class="btn btn-success" value="Pay"></center>
                    </div>
					<div id="latpay-element-newdiv">
						<div id="latpay-element"  class="latpay-element-new"> </div>
					</div>
					

                    <div class="choose-saved-card" style="display:none" id="ifCardFound">
                      <p class="removeforinvoice">Choose payment method</p>
                      <div id="appendPaymentCard"></div>
                    </div>

                    {{-- <div id="custom-store-label" class="showwheninvoice hidewheninvoice save_card_primary d-none" >
                      <input type="hidden" name="forClientadd" />
                      <input type="hidden" name="forClientid" />
                      <input type="checkbox" class="custom-control-input" name="save_card_primary" value="1" id="save_card_primary1" checked>
                      <label class="custom-control-label " for="save_card_primary1">Save card as Primary payment method</label>
                    </div> --}}

                    <a href="#" class="addNewCartForSubscription add-new-cart-link" role="button">Add a new card</a>
                    
                  </div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button id="planPaymentButton" type="button" class=" mt-0 btn-fill cursor-pointer w-100 d-block">Process payment</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 

 
 


<script src='{{ URL::asset("assets/js/jquery-3.2.1.slim.min.js")}}'></script>
<script src='{{ URL::asset("assets/js/jquery.min.js")}}'></script>
<script src='{{ asset("assets/js/toastr.min.js")}}'></script>
<script src="https://lateralpayments.com/checkout/scripts/latpay2.js"></script>
<script src='{{ asset("assets/js/medipass_partner-sdk.min.js")}}'></script>

<script>
	var practitioner_id = "{{ $practitioner->id }}";

    $(document).ready(function() {
        $('.credits_hide_show').hide();
		$('.main_credits').hide();
	
		var auto_status = @json($practitioner ?? '');

		if(auto_status['auto_topup_status'] == '1'){
			//$('#auto_status').text('Cancel');
			$('.show_if_save').show();
			$('#auto_topup_credit_balance').val(auto_status['auto_topup_credit_balance']);
			$('#auto_topup_amount').val(auto_status['auto_toup_amount']);
		}else{
			$('.show_if_save').hide();
			//$('#auto_status').text('Save');
		}
		

		
		// var auto_blance =  $('#auto_topup_credit_balance').val();
		// var auto_amount =  $('#auto_topup_amount').val();
        
        // if(auto_blance)
    });

// 	$(document).on('keyup', '.float_number_validation', function() {
//       this.value = this.value
//          .replace(/[^\d.]/g, '') // numbers and decimals only
//          .replace(/(^[\d]{10})[\d]/g, '$1') // not more than 2 digits at the beginning
//          .replace(/(\..*)\./g, '$1') // decimal can't exist more than once
//          .replace(/(\.[\d]{2})./g, '$1'); // not more than 4 digits after decimal

//    });

   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;
	}

   

	$(document).on('click', '.cardDetailsModal', function() {
      $('#customButton').attr('data-credit', 1);
      $("#appendwhennomerchantid").addClass('display-none');
      $("#paymentsunavailablesection").addClass('display-none');

      if ($('#purchase_amount').val() >= 20) {
         $("#addcreditsmodal").modal("hide");
         $(".showoption").addClass('d-none');
         $("#payment-amount").parent().addClass('d-none');
         $("input[name='latpayAmount']").val($("input[name='purchase_amount']").val());
         $('.payment-amount').text("Payment amount : $" + $("input[name='purchase_amount']").val() + "");
         $("input[name='LatPayflag']").val('credit_purchase');
         $("input[name='is_credit_purchase']").val(1);
		  
		
		 $('#latpay-element-newdiv').empty();
         openLatpay();
		
         //$("#cardDetailsModal").modal("show");
         //  getCardDetails();
      } else {
         $('#purchase_amount').parent().next().text('Purchase minimum $20');
         $('#no_of_credits').text('');
         setTimeout(function() {
            $('.invalid-feedback').text('');
         }, 2000);
      }
   });
   $(document).on('click', '.dedicated_plan_button', function() {
	  var dedicated_plan_Value = $('input[name="select_dedicated_plan"]:checked').val();

      if (dedicated_plan_Value == 'monthly' || dedicated_plan_Value == 'yearly') {
         $("#addcreditsmodal").modal("hide");
         $(".showoption").addClass('d-none');
         $("#payment-amount").parent().addClass('d-none');
		 if(dedicated_plan_Value == 'monthly'){
			$("input[name='latpayAmount']").val(75);
			$('.payment-amount').text("Payment amount : $75");
			$("input[name='LatPayflag']").val('purchase_dedicated');
			$("input[name='is_purchase_dedicated']").val(1);
			$("input[name='dedicated_plan']").val(dedicated_plan_Value);
			$('#latpay-element-newdiv').empty();
		 }else if(dedicated_plan_Value == 'yearly'){
			$("input[name='latpayAmount']").val(120);
			$('.payment-amount').text("Payment amount : $120");
			$("input[name='LatPayflag']").val('purchase_dedicated');
			$("input[name='is_purchase_dedicated']").val(1);
			$("input[name='dedicated_plan']").val(dedicated_plan_Value);
			$('#latpay-element-newdiv').empty();
		 }
         openLatpay();
		
         //$("#cardDetailsModal").modal("show");
         //  getCardDetails();
      } else {
         $('.select_dedicated_yearly_error').text('Please select any one dedicated number plan');
		 setTimeout(function() {
            $('.select_dedicated_yearly_error').text('');
         }, 2000);
      }
   });

   $(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'
					}
				});
			}
		}
		});
	});

    function openLatpay() {
		
		$(".loading").hide();

		$('#latpay-element').empty();
		var user = @json($user);
		var client = @json($newclient ?? '');
		var setting = @json($settings);
		var first_name = '';
		var last_name = '';
		var email = '';
		if (client != '') {
		first_name = client.name;
		last_name = client.last_name;
		email = client.email;
		} else {
		first_name = user.first_name;
		last_name = user.last_name;
		email = user.email;
		}

		if ($("input[name='LatPayflag']").val() == 'create_invoice_new') {
		//added 24-07-2022
		// $(".paytitle").text('Select Payment Type');
		$(".hidewheninvoice").addClass('d-none');
		$(".removeforinvoice").addClass('d-none');
		$(".showwheninvoice").removeClass('d-none');
		$(".removeclientcard").removeClass('d-none');
		}

		if (user.merchant_id == null || user.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');
			/*$("#appendwhennomerchantid").html('<hr><div id="payment-meth-main"><div class="shipping-method-area comm-form"><p class="payment-title-15">Online payment</p><div class="online-payment-contain text-center" ><p>Online payments unavailable. Your application is still under review by our payment provider. Expect a response within 24 business hours.</p></div><hr></div></div>');*/
			$('#PayNowNew').modal('show');

		} else {
			$(".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(user.merchant_id);
			$("input[name='merchant_password']").val(user.merchant_password);
			$("input[name='merchant_public_key']").val(user.merchant_public_key);
			$("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;

		//var url = "{{route('practitioner.getPaymentCard')}}";

		//alert(url)
		} 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();
			
		//alert(merchantId)
		
		// 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') {
				
				// $('#openLatpayModal').modal('show');
				//$('#PayNowNew').modal('show');
				$.ajax({
					url: url,
					type: 'get',
				}).done(function(response) {
					$('#PayNowNew').modal('show');
					$('#latpay-element-newdiv').append('<div id="latpay-element"  class="latpay-element-new">');
					
					if (response.status == 'success') {
						
					$("#appendPaymentCardlatest").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>';
						$("#appendPaymentCardlatest").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
		});
	}

	$(function() {
      // $('#openLatpayModal').on('hidden.bs.modal', function(e) {
      //    $(this).find('#latpay-element').empty();
      // });
      $('#PayNowNew').on('hidden.bs.modal', function(e) {
         $(this).find('#latpay-element').empty();
      });
      $('#mydetailmodalplan').on('hidden.bs.modal', function(e) {
         $(this).find(".modal-footer").find("button[type='button']").attr('disabled', false);
      });
   });

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

		//$('#latpay-element-newdiv').empty();

	//	$('.payment-amount-main').show();
		console.log("hiii11");
		var practitioner = @json($practitioner ?? '');
		var invoiceNumber = $("#invoice_number").val();
		var reference = practitioner.id + 'INV' + invoiceNumber;

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

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

		if (checkval == 2) {
			console.log("hiii444");
			$("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) {
				console.log("hiii555");
				callLatpayForCard(val);

			} else {
				console.log("hiii666");
				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();
						console.log("TransToken",TransToken);
						//Once you got the transtoken, submit the latpay_from by using jquery.
						if (TransToken) {
							console.log("enter",TransToken);
							callLatpayForNew();
							// $("#latpay_from").submit();
						}
						} else {
						if (isCreditPayment == 0 && $("#appendPaymentCardlatest").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();
						}
					}
				});
			}

		} else {
		addInvoiceAppointment();
		// $("#PayNowNew").modal('hide');
		// var amt = $("input[name='payble-amount']").val();
		// $(".addPaymentinvoice").text(Number(amt).toFixed(2));
		}
	});

	function callLatpayForCard(val) {

		var practitioner = @json($practitioner ?? '');
		var invoiceNumber = $("#invoice_number").val();
		var reference = practitioner.id + 'INV' + invoiceNumber;

		$(".loading").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('is_purchase_dedicated', $('input[name="is_purchase_dedicated"').val());
		formData.append('dedicated_plan', $('input[name="dedicated_plan"').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('reference', reference);
		formData.append('invoice_number', invoiceNumber);
		formData.append('client_id', $("input[name='client_id']").val());
		$.ajax({
		url: "{{route('practitioner.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) {
			$(".loading").hide();
			if (response.status == "success") {
				// modal.modal("hide");
				if(response.invoiceNumber != ''){
					$('#credit_invoiceNumber').val(response.invoiceNumber);
				}
				callFunctionAfterLatpaySuccess();
			} 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'
						}
						});
					}
				}
			}
		});
	}

	function callLatpayForNew() {
		$(".loading").show();
		// var modal = $("#openLatpayModal");
		console.log("hiii1234");
	//  var form = $('#latpay_from').serialize();
		var form = $('#latpay_from').serializeArray();

		var invoiceNumber = $("#invoice_number").val();
		var uniquekey = {
			name: "invoice_number",
			value: invoiceNumber
		};
		var client_id = {
			name: "client_id",
			value: $("input[name='client_id']").val()
		};
		form.push(uniquekey);
		form.push(client_id);
		var modal = $("#PayNowNew");
		$.ajax({
			url: "{{route('practitioner.latpayPayment')}}",
		// data: $('#latpay_from').serialize(),
		data :form,
			type: 'POST',
		}).done(function(response) {
			$(".loading").hide();
			if (response.status == "success") {
			if(response.invoiceNumber != ''){
				$('#credit_invoiceNumber').val(response.invoiceNumber);
			}
			// modal.modal("hide");
			// if ($.session.get("plan_id") == '2') {
			//    $("#submit25plan").trigger('click');
			// }
			callFunctionAfterLatpaySuccess();
			} 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'
						}
						});
					}
				}
			}
			}
		});
	}

	function callFunctionAfterLatpaySuccess() {
		var flag = $("input[name='LatPayflag'").val();
		if (flag == 'credit_purchase') {
			puchaseCredit();
		} else if (flag == 'create_invoice_new') {
		
			// $("#PayNowNew").modal('hide');
			// var amt1 = $("input[name='payble-amount']").val();
			// $(".addPaymentinvoice").text(Number(amt1).toFixed(2));

			addInvoiceAppointment();
		}else if(flag == 'purchase_dedicated'){
			Swal.fire({
                  icon: 'Success',
                  // title: 'Success!',
                  html: '<b>Dedicated number purchased.</b>',
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
               $("#cardDetailsModal").modal("hide");
			   $(".loading").hide();
               setTimeout(function() {
                  location.reload();
               }, 3000);
		}

	}

	function puchaseCredit() {

		$(".loading").show();

		var bonus_credits = $('#bonus_credits').text();
		var final_total_credits = 0;
		if(bonus_credits != '' || bonus_credits != 0){
			final_total_credits = $('#total_credits').text();
		}else{
			final_total_credits = $('#no_of_credits').text();
		}
		
      $.ajax({
         url: "{{ route('practitioner.purchase_token')}}",
         method: 'POST',
         data: {
            'card_token': $("input[name='card_token']:checked").val(),
            'amount': $('#purchase_amount').val(),
            //'credits': $('#no_of_credits').text(),
			'credits': final_total_credits,
            'coupon_code': $("input[name='coupon_code']").val(),
            'topup': 0,
            'credit_invoiceNumber':$('#credit_invoiceNumber').val(),
			'flag':"credit_purchase_notification_link",
         },
         success: function(response) {
            if (response.status == 'success') {
               Swal.fire({
                  icon: response.status,
                  // title: 'Success!',
                  html: '<b>' + response.msg + '</b>',
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
               $('#purchase_amount').val('');
               $('#no_of_credits').text('')
               $("input[name='coupon_code']").val('');
               $("#cardDetailsModal").modal("hide");
			   $(".loading").hide();

               setTimeout(function() {
                  location.reload();
               }, 3000);
            }
         }
      });
   }

   $("body").on('input', '#purchase_amount', function() {

		$("#no_of_credits").empty();
		//$('#bonus_credits').empty()
		var input = $(this);
		$.ajax({
			url: "{{ route('practitioner.only_get_purchase_credit_without_coupon')}}",
			method: 'POST',
			data: {
			'amount': input.val(),
			// 'coupon_code': $("input[name='coupon_code']").val(),
			},
			success: function(data) {
			if (data.status == 'success') {
				$('.main_credits').show();
				$("#no_of_credits").empty();
				 $('#no_of_credits').append(data.data.toFixed(2));
				
				if($('#bonus_credits').text() != ''){
					purchase_amount_changed_when_coupon_apply();
				}
			} else {
				$('.main_credits').hide();
				$('.credits_hide_show').hide();
				
				//input.parent().next().text(data.msg);
				$('#no_of_credits').append('');
			}
			// setTimeout(function() {
			//    $('.invalid-feedback').text('');
			// }, 2000);
			}
		});
	});

	function purchase_amount_changed_when_coupon_apply(){
		$('#total_credits').empty();
		var total_credits = 0;
		var no_of_credits = $('#no_of_credits').text();
		var bonus_credits =	$('#bonus_credits').text();
		total_credits = parseFloat(no_of_credits) + parseFloat(bonus_credits);
		$('#total_credits').append(total_credits.toFixed(2));
	}


    $(document).on('click', '.verify_code', function() {

		$("#bonus_credits").empty();
		$("#total_credits").empty();

		$.ajax({
		url: "{{route('practitioner.verify_coupon')}}",
		data: {
			coupon_code: $('input[name="coupon_code"]').val(),
			amount: $('input[name="purchase_amount"]').val(),
		},
		type: 'POST',
		}).done(function(response) {
		var input = $('input[name="coupon_code"]');

		if (response.status == 'success') {
			console.log(response);
			Swal.fire({
				icon: response.status,
				title: 'Code Applied',
				//text: response.msg,
				showClass: {
					popup: 'animate__animated animate__fadeInDown'
				},
				hideClass: {
					popup: 'animate__animated animate__fadeOutUp'
				}
			});
			// $("#no_of_credits").empty();
			// $('#no_of_credits').append(response.data.toFixed(2));
			$('.credits_hide_show').show();

			var total_credits = 0;

			var no_of_credits = $('#no_of_credits').text();

			var credit_applied = response.credit_applied;

			var bonus_calc = response.credit_applied / 100;

			total_credits = parseFloat($('#purchase_amount').val()) / parseFloat(bonus_calc);

			if(total_credits > no_of_credits){
				var get_bonus = parseFloat(total_credits) - parseFloat(no_of_credits);
			}else{
				var get_bonus = parseFloat(no_of_credits) - parseFloat(total_credits);
			}

			$('#bonus_credits').append(get_bonus.toFixed(2));

			//total_credits = parseFloat(credit_applied) + parseFloat(no_of_credits);

			$('#total_credits').append(total_credits.toFixed(2));

			$('#wrongcouponcode').text('');

			if($('#no_of_credits').text() == ''){

				Swal.fire({
					icon: 'error',
					title: 'Please purchase minimum $20.',
					//text: response.msg,
					showClass: {
						popup: 'animate__animated animate__fadeInDown'
					},
					hideClass: {
						popup: 'animate__animated animate__fadeOutUp'
					}
				});
				$('.credits_hide_show').hide();
			}

			

			//input.removeClass('is-invalid');
			//var parent = input.next('.invalid-feedback').text('');
		} else {

			$('.credits_hide_show').hide();
			$('#wrongcouponcode').text(response.msg);
			$("#topup_not_apply").text('');
			//input.addClass('is-invalid');
			//var parent = input.next('.invalid-feedback').text(response.msg);
		}
		});
	});

	$(document).on('click', '.auto_topup_apply', function(e) {
		e.preventDefault();

		$('#latpay-element-olddiv').empty();

		var status = $(this).find('#auto_status').attr('value');

		//var status = $('#auto_status').text();

		$(".loading").show();

		//if ($('#auto_topup_amount').val() >= 20) {

			if($('input[name="auto_topup_credit_balance"]').val() == ''){
				$('#credit_required').text('Credit Balance Is Required');
				$(".loading").hide();
				return false;
			}else{
				$('#credit_required').text('');
			}

			if(status=='save'){
				var auto_topup_status = '1';
				if( $("#bonus_credits").text() != ''){
					$("#topup_not_apply").text('Coupons cannot be applied to auto-top-ups Click purchase to continue.');
				}else{
				
					$("#topup_not_apply").text('');
				}
				var card = $('#cards_details_get').val();
				if ( card == 0) {
					$(".loading").hide();
					if ($('input[name="auto_topup_amount"]').val() < 20) {
						$('#wrong_topup').text('Purchase minimum $20');
						return false;
					}else{
						$('#wrong_topup').text('');
					}
					addnewcard();
					return false;
				}
			}else{
				var auto_topup_status = '0';
				$("#topup_not_apply").text('');
			}

			$.ajax({
			url: "{{route('practitioner.auto_topup_apply')}}",
			data: {
				auto_topup_credit_balance: $('input[name="auto_topup_credit_balance"]').val(),
				auto_topup_amount: $('input[name="auto_topup_amount"]').val(),
				credit_invoiceNumber:$('#credit_invoiceNumber').val(),
				auto_topup_status: auto_topup_status,
			},
			type: 'POST',
			}).done(function(response) {
				$(".loading").hide();
				var input = $('input[name="auto_topup_credit_balance"]');
				
				if (response.status == 'success') {
					console.log(response);
					Swal.fire({
						icon: response.status,
						title: response.msg,
						//text: response.msg,
						showClass: {
							popup: 'animate__animated animate__fadeInDown'
						},
						hideClass: {
							popup: 'animate__animated animate__fadeOutUp'
						}
					}).then((result) => {
						if (result.isConfirmed) {
							location.reload();
						}
               		});

					if(auto_topup_status == '1'){
						
						 $('.show_if_save').show();
						// $('#auto_status').text('Cancel');
					}else{
						//$('#auto_status').text('Save');
						$('.show_if_save').hide();
						$('#auto_topup_credit_balance').val('');
						$('#auto_topup_amount').val('');
					}

					$('#wrong_topup').text('');
					//$('#credit_required').text('');

					//input.removeClass('is-invalid');
					var parent = input.next('.invalid-feedback').text('');
				} else {
					$(".loading").hide();
					$('#wrong_topup').text(response.msg);
					
					//input.addClass('is-invalid');
					//var parent = input.next('.invalid-feedback').text(response.msg);
				}
			});
		// }else{
		// 	$('#auto_topup_amount').parent().next().text('Purchase minimum $20');
		// 	//$('#no_of_credits').text('');
		// 	setTimeout(function() {
		// 		$('.invalid-feedback').text('');
		// 	}, 2000);
		// }
	});


	//For new card details save
	function addnewcard(){
		
		$('#PayNowForCaledarPurchaseModal').modal('show');
		$('#display_amount').addClass('d-none');
		//$('.save_card_primary').removeClass('d-none');
		$('#payment_text').text('All transactions are secured & encrypted');
		$('.paytitle').text('Add new card');
		$('#close_button').addClass('close_button');
		// $('.payment_hr').remove();
		$('#planPaymentButton').text('Save card')
		$('#paid_amount').val(0);
		$("#paybleAmount").val(0);
		$("#latpayAmountNewCard").val(0);
		$('#is_add_card').val(1);
		$('#latpay-element').empty();
		var merchantId = $("input[name='merchant_id_new_card']").val();
		$("input[name='choose-card']").prop('checked', false);

		//alert(merchantId);

		LatpayCheckout.open({
		merchantid: merchantId,
		publickey: $("input[name='merchant_public_key_new_card'").val(),
		merchantuserid: merchantId,
		
		'status': function(status) {
			if (status == 'success') {
				

			$('#ifNoCardFound').css('display', 'block');
			$(".addNewCartForSubscription").addClass('d-none');
			$('#ifCardFound').css('display', 'none');
			$("#payment-online").prop('checked', true);
			$("input[name='payment_option_type']").val(2);

			$('#latpay-element-olddiv').append('<div id="latpay-element"  class="latpay-element-old">');

			} 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', '#planPaymentButton', function(e) {
		$('#latpay-element-olddiv').empty();
        if ($("input[name='paybleAmount']").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();

		//alert(val)

       // var reference = makeid(8);
        if (val) {
          callLatpayForCardSubscription(val);
        } else {
          $(".loading").show();
          LatpayCheckout.processpayment({
            "amount": $("input[name='latpayAmountNewCard']").val(),
            "currency": "AUD",
            "reference": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
            "description": "3811b2a16309ba9f20d8e51ebce782b8a09962eb",
            "firstname": $("input[name='latpayUserFirstNameNewCard']").val(),
            "lastname": $("input[name='latpayUserLastNameNewCard']").val(),
            "email": $("input[name='latpayUserEmailNewCard']").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();
              }
            }
          });
        }
      });

	  // If card already saved and choosen from saved card
	function callLatpayForCardSubscription(val) {
        $(".loading").show();
        var formData = new FormData();
        // formData.append('is_calendar', $('input[name="is_calendar"').val());
        
        formData.append('renewal', $('input[name="renewal"').val());
        formData.append('is_add_card', $('input[name="is_add_card"').val());
        formData.append('save_card_primary', $('input[name="save_card_primary"').val());
        formData.append('paid_amount', $('input[name="paid_amount"').val());
        formData.append('total_calendars', $('input[name="total_calendars"').val());
        formData.append('isSubscribed', $('input[name="isSubscribed"').val());
        formData.append('calendarRequested', $('input[name="calendarRequested"').val());
        formData.append('latpayAmount', $('input[name="latpayAmount"').val());
        formData.append('latpayUserFirstName', $('input[name="latpayUserFirstNameNewCard"').val());
        formData.append('latpayUserLastName', $('input[name="latpayUserLastNameNewCard"').val());
        formData.append('latpayUserEmail', $('input[name="latpayUserEmailNewCard"').val());
        formData.append('merchant_id', $('input[name="merchant_id_new_card"').val());
        formData.append('merchant_password', $('input[name="merchant_password_new_card"').val());
        formData.append('merchant_public_key', $('input[name="merchant_public_key_new_card"').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'
                  }
                });
              }
            }
          }
        });
    }

	// Payment with new card and save it as default card to make monthly payment
	 function callLatpayForNewSubscription() {
		//$('#latpay-element-olddiv').empty();
        $(".loading").show();
        var modal = $("#PayNowNew");

        $.ajax({
          url: "{{route('practitioner.latpayPaymentUpgradePlan')}}",
          data: $('#paid_plan_latpay_from').serialize(),
          type: 'POST',
        }).done(function(response) {
          $(".loading").show();
		
          if (response.status == "success") {
			// Swal.fire({
            //     icon: 'success',
            //     title: response.msg,
            //     timer: 2000,
            //     showClass: {
            //       popup: 'animate__animated animate__fadeInDown'
            //     },
            //     hideClass: {
            //       popup: 'animate__animated animate__fadeOutUp'
            //     },
            //     confirmButtonText: 'Ok',
            //   });
			$('#PayNowForCaledarPurchaseModal').modal('hide');
			//var status = $('#auto_status').text();
			var status =  $('.saveautotopup').find('#auto_status').attr('value');

			if(status=='save'){
				var auto_topup_status = '1';
			}else{
				var auto_topup_status = '0';
			}

			$.ajax({
			url: "{{route('practitioner.auto_topup_apply')}}",
			data: {
				auto_topup_credit_balance: $('input[name="auto_topup_credit_balance"]').val(),
				auto_topup_amount: $('input[name="auto_topup_amount"]').val(),
				credit_invoiceNumber:$('#credit_invoiceNumber').val(),
				auto_topup_status: auto_topup_status,
			},
			type: 'POST',
			}).done(function(response) {
				$(".loading").hide();
				var input = $('input[name="auto_topup_credit_balance"]');
				
				if (response.status == 'success') {
					console.log(response);
					Swal.fire({
						icon: response.status,
						title: response.msg,
						//text: response.msg,
						showClass: {
							popup: 'animate__animated animate__fadeInDown'
						},
						hideClass: {
							popup: 'animate__animated animate__fadeOutUp'
						}
					}).then((result) => {
						if (result.isConfirmed) {
							location.reload();
						}
               		});

					if(auto_topup_status == '1'){
						 //$('#auto_status').text('Cancel');
						 $('.show_if_save').show();
					}else{
						//$('#auto_status').text('Save');
						$('.show_if_save').hide();
						$('#auto_topup_credit_balance').val('');
						$('#auto_topup_amount').val('');
					}
					$(".loading").hide();

				} else {
					$(".loading").hide();
					$('#wrong_topup').text(response.msg);
					
					//input.addClass('is-invalid');
					//var parent = input.next('.invalid-feedback').text(response.msg);
				}
			});

          } else {
			$(".loading").hide();
            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'
                    }
                  });
                }
              }
            }
          }
        });
    }

</script>
@endsection