@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;
   }
   .notes-menu {
        background: #E5E5E5 !important;
    }
    i.latpay-credit-card-brand {
        right: 11%;
        margin-top: -48px;
    }
</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>
 <div class="loading" style="z-index: 1066 !important;display: none !important;">Loading&#8230;</div>

    <input type="hidden" name="step" value="amount_tab">
    <input type="hidden" name="payment_method" value="Online">
   <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="voucher-box d-none">
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/Calendar-circle.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">Book appointment</label>
                    </div>
                </div>                       
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/Buy-Gift-Voucher.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">Buy gift voucher</label>
                    </div>
                </div>                       
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/In-person-circle.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">In-Person</label>
                    </div>
                </div>                       
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/Mobile-visit-circle.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">Mobile visit</label>
                    </div>
                </div>                       
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/Phone-consult-circle.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">Phone consultation</label>
                    </div>
                </div>                       
                <div class="col-sm-12 col-md-6">
                    <div class="select-voucher">
                        <input type="radio" value="In-person"  name="service_type" id="service_type" class="radio-btn service_type">
                        <span class="check"></span>
                        <div class="icon">
                            <img src="{{asset('assets/images/Voucher/Telehealth-circle.svg')}}" alt="icon" class="img-fluid">
                        </div>
                        <label for="">Telehealth</label>
                    </div>
                </div>                       
            </div>
        </div>

        <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>
                                    </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>
                                    </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>Existing client</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>                
                                    <form action="" method="post" id="store_details">
                                        <input type="hidden" name="identity" value="someone_else">
                                        <input type="hidden" name="from" value="practitioner">
                                        <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 d-none" id="client_name">
                                            <label for="">Client name</label>
                                            <select  class=" form-control  w-100 client_list" id="client_id" name="client_id">
                                            </select>
                                            <input type="hidden" name="purchase_for_client" id="purchase_for_client" class="form-control">
                                            {{-- <input type="text" class="form-control" name="client_name" placeholder="Select client"> --}}
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                        <div class="form-group">
                                            <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">
                                            <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="">Purchaser email for order confirmation</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>
                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" name="terms_and_conditions" value="1" id="remember" checked class="custom-control-input d-none">
                                                {{-- <label for="remember" class="custom-control-label">I have read and accept
                                                <a href="#" id="create-password-popup">terms and conditions</a></label> --}}
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </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 <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 href="{{route('practitioner.appointments.index')}}">
                                                <img src="{{asset('assets/images/Voucher/Make-booking.svg')}}" alt="" class="img-fluid">
                                                Return to calendar
                                            </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">Choose payment method</h2>
                            <div class="d-flex payment-btns">
                                <a data-flag="Online" class="btn btn-unfill cursor-pointer addPaymentinvoice mr-1">Online</a>
                                <a data-flag="Tap" class="btn btn-unfill cursor-pointer addPaymentinvoice">Tap</a>
                                <a data-flag="External" class="btn btn-unfill cursor-pointer addPaymentinvoice ml-1">Other</a>
                            </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 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>
                                  <input type="hidden" name="total_paid">
                                </div>
                            </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>

@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">
    $(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');
            $("#client_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');
            $("#client_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() {
        $.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);
            var url = '{{ route("practitioner.my.voucher.download", ":id") }}';
            url = url.replace(':id',btoa(response.data.id));
            $("#setDownloadLink").attr("href",url);
            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+"");
        $('#latpay-element').empty();
        var user = @json($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 = $("#client_id").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);
        $("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");
        $("input[name='client_id']").val($("input[name='purchase_for_client']").val());             
        var merchantId = $("input[name='merchant_id']").val();
        var pre_id = btoa($("input[name='pre_id']").val());
     
        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) {
        if($("input[name='payment_method']").val() == 'External')
        {
            var voucher_price = $('input[name="voucher_price"]').val();
            var sum = $('input[name="total_paid"]').val();
            if(sum > voucher_price || sum < voucher_price)
            {
                Swal.fire({
                icon: 'warning',
               // title: 'The entered amount does not match the voucher price of '+voucher_price+'. Please correct it.',
                title: 'The entered amount must match the voucher value.',
                showClass: {
                  popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                    popup: 'animate__animated animate__fadeOutUp'
                  }
                });   
                return false;
            }
            $("#customButton").attr('disabled', true);
            addInvoice();
            $(".loading").show(); 
        } else{
            var practitioner = @json($user ?? '');
            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]);
            }
            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='purchase_for_client']").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='purchase_for_client']").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) {
            //$('.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($user ?? '');
        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='purchase_for_client']").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) {
            
            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() {
        addInvoice();
    }

    function addInvoice() {
        // return false; 
        var payment_option = $("input[name='payment_option[]']")
        .map(function() {
            return $(this).val();
        }).get();
        var payment_value = $("input[name='payment_value[]']")
        .map(function() {
            var amount = 0;
            if ($(this).val() == '') {
                amount = 0;
            } else {
                amount = $(this).val();
            }
            return amount;
        }).get();

        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('payment_method', $("input[name='payment_method']").val());         
        formData.append('payment_option', JSON.stringify(payment_option));         
        formData.append('payment_value', JSON.stringify(payment_value)); 
        formData.append('from','practitioner'); 
        formData.append('client_id', $("input[name='purchase_for_client']").val());
                
        //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 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(""); 
                            }
                            $("#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();
            }
        });
    }

    $(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', '.addPaymentinvoice', function(e) {
        $("input[name='payment_method']").val($(this).data('flag'));
        if($(this).data('flag') =='Online')
        {
            $(".external_payment_div").addClass("d-none");
            $(".onlinePaymentDiv").removeClass("d-none");
            openLatpay();
        }
        if($(this).data('flag') =='External')
        {
            $('#latpay-element').empty();
            $(".onlinePaymentDiv").addClass("d-none");
            $(".external_payment_div").removeClass("d-none");
        }
    });

    $('.other_payment_option').keyup((e) => {
        var payment_value = $("input[name='payment_value[]']")
        .map(function() {
            var amount = 0;
            if ($(this).val() == '' || $(this).val() == '.') {
                amount = 0;
            } else {
                amount = parseFloat($(this).val());
            }
            return amount;
        }).get();

        var sum = payment_value.reduce((x, y) => x + y);
        //var value = e.currentTarget.value;
        if (sum == '') {
        sum = 0;
        }
        // var voucher_price = $('input[name="voucher_price"]').val();
        // if(sum > voucher_price || sum < voucher_price)
        // {
        //     Swal.fire({
        //     icon: 'warning',
        //     title: 'The entered amount does not match the voucher price of '+voucher_price+'. Please correct it.',
        //     showClass: {
        //       popup: 'animate__animated animate__fadeInDown'
        //       },
        //       hideClass: {
        //         popup: 'animate__animated animate__fadeOutUp'
        //       }
        //     });   
        // }

        // var invoiceBalance = $("#finalprice").val();
        // if(invoiceBalance == '')
        // {
        // var invoiceBalance = $("#invoiceBalance").val();
        // }
       // var total_amount = invoiceBalance - sum;
        //$('.payment-amount').text("Balance outstanding $" + Number(total_amount).toFixed(2) + "");
       // $("input[name='payble-amount']").val(Number(sum).toFixed(2));
        $(".total_paid_display_div").removeClass('d-none');
        $(".total_paid").text("Total paid $" + Number(sum).toFixed(2));
        $("input[name='total_paid']").val(sum);
    });

    $('.client_list').select2({
    ajax: {
        url: '{{ route("practitioner.search.getclient") }}',
        data: function (params) {
        $("#purchase_for_client").val('');
        $("input[name='recipient_email']").val('');
        $("input[name='recipient_name']").val('');
        return {
            search: params.term,
            id:2,
        };
        },
        dataType: 'json',
        processResults: function (data) {          
        return {
            results: data.map(function (item) {
            return {
                id: item.id,
                text: item.name,
                name: item.name,
                email: item.email,
                otherfield: item,
            };
            }),
        }                   
        },
        cache: true,
        delay: 250
    },
    placeholder: 'Select client',
    minimumInputLength: 1,
    language: {
        inputTooShort: function(args) {
            return "";
        }
    }
    });  

    $('.client_list').on('select2:select', function (e) {
        var selectedClient = e.params.data;  // Get the selected client data
        var clientEmail = selectedClient.email;  // Extract the email
        var clientName = selectedClient.name; 
        
        console.log('id',selectedClient.id);
        $("#purchase_for_client").val(selectedClient.id);
        $("input[name='recipient_email']").val(clientEmail);
        $("input[name='recipient_name']").val(clientName);
    });

    $(document).on('click', '#backButton', function(e) {
        if($('input[name="step"]').val() == 'amount_tab')
        {
            window.location.href = "{{route('practitioner.settings.my.gift.vouchers')}}";
        }
        if($('input[name="step"]').val() == 'details_tab')
        {
            $("#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');
        }
        if($('input[name="step"]').val() == 'confirmation_tab')
        {
            window.location.reload();
        }
    });
    
    
    
</script>
@endsection