@extends('web.layout.master')

@section('content')
<style>
    header {
        display: none;
    }

    .stepwizard-step p {
        margin-top: 5px;
        font-size: 14px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
        margin-top: 35px
    }

    .stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }

    .stepwizard-step:not(:last-child):before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 26%;
        height: 1.5px;
        background-color: #409b5e;
        z-order: 0;
        margin-left: 38px;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        width: 200px;

            {
                {
                -- text-align: center;
                position: relative;
                --
            }
        }
    }

    .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 1px 0;
        font-size: 18px;
        line-height: 1.428571429;
        border-radius: 15px;
        color: #d9ebdf;
        border: 2px solid #d9ebdf;
        font-weight: 700;
    }

    .btn-selecetd {
        background: #409b5e;
        border: 2px solid #409b5e !important;
    }





    @media (max-width: 766px) {
        .logoHeader {
            padding: 0px !important;
            margin: 0px !important;
            margin-top: 20px !important;
        }

        img.main-logo {
            width: 100px !important;
        }


        .shipinglabel{
            font-size: 17px;
        }


        .custom-container{
            padding: 0px !important;
            margin-top: 3px !important;
        }
        .card-none-border{
            border-radius: 0px !important;
            border: 0px;
        }

        .card-form-control{
            font-size: 1.3rem !important;
            width: 110% !important;
        }

    }

    #app {
        background: #f1f1f1;
        min-height: 600px;
    }

    .btn-success {
        background: #409b5e;
        border: 0px;
    }
    .paymentFormRow>*{
        padding: 10px;
    }
    input,select{
        border:1.2px solid #3A3A3A !important;
        margin-top: 5px;
     }
     .btn-primary {
        background: #04458f;
        border: 0px;
    }

    .form-control {
        margin-top: 5px;
    }

      .rotate { transform: rotate(180deg);transition: all 0.5s ease;})
 /* Dotted red border */
 .hrdash2{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border: none !important;
    height: 1px !important;
    background: #000 !important;
    background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px) !important;
  }

  input[type="radio"]{
    margin-top: 0px !important;
  }
  #card_number.is-invalid{
    background-image: none !important;
  }

   /* Dotted red border */
   .hrdash {
    margin-top: 5px;
    margin-bottom: 5px;
    border: none;
  height: 1px;
  background: #000;
  background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
  }

  .borderstaylenone{
    border-radius: 0px 0px 0px 0px !important;
  }
  .borderstayle{
    border-radius: 0px 0px 10px 10px !important;
  }
  .form-control.is-invalid{
    border-color: #dc3545 !important;
}

input#password {
    height: auto !important;
}
input#email {
    height: auto !important;
}

.valid{

position: absolute;
top: 70%;
transform: translateY(-50%);
right: 15px;
color: #409b5e;

}
.form-group{
    position: relative;
}

.paymentcardborderupdate{
    border-radius: 0px 0px 10px 10px !important;
}
.card-field {
    border: 1.2px solid #3A3A3A !important;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
}

.card-field:focus {
    border-color: #4A90E2;
    outline: none;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

#authorizenet-payment-iframe {

    border: 1px solid #ddd;
    border-radius: 5px;
}
.authorizenet-loading {
    text-align: center;
    padding: 50px;
}

</style>

@include('web.checkout-header-v2')
<div class="container mt-4 mb-2 custom-container">
    @if(!empty(request()->isaffirmfailed))
    <div class="alert alert-danger mt-2"><p>Affirm Payment Failed</p>
    </div>
    @endif
    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

        <div class="alert alert-{{ $msg }} mt-2"><p>{{ Session::get('alert-' . $msg) }}</p>
            <p>There was an issue charging your card - Please contact us <a href="tel:866.243.2721" class="text-decoration-none">866.243.2721</a></p>
            {{--  <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>  --}}
        </div>
        @endif
        @endforeach
        <div class="mt-2 d-none" id="paypalcarderror">
            <div class="alert alert-danger alert-dismissible fade show customalert" role="alert">
              There was an issue charging your card - Please contact us
              <a href="tel:866.243.2721" class="text-decoration-none">866.243.2721</a>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          </div>

    <div class="card card-none-border mb-1 d-lg-none">
        <div class="card-body p-1">
            <div class="row btn-nav-accordion" onclick="collapseContentTotal()">
                <div class="col-8">


                    <div style="display: flex;">
                        <div class="mt-1 m-1" style="margin-top: 6px !important;">
                            <img src="{{ asset('assets/web') }}/images/cart-mobile.svg" alt="cart-logo" width="20px" class="mt-1">
                        </div>
                         <p class="mt-2 showorderlabeltotal" style="margin-left: 5px;margin-bottom: 10px;color: #dc3545;font-size: 18px;">Show order summary </p><p class="m-auto" style="font-size: 18px;margin-top: 10px !important;color:#dc3545;"><i class="fas fa-chevron-down faicon"></i></p></div>

                </div>
                <div class="col-4 text-end">
                    <p style="margin-bottom: 0px;margin-top: 4px;font-weight: 700;font-size: 22px;margin-right: 13px;">${{ str_replace(',','',round(session()->get('total'),2)) }}</p>
                </div>

            </div>
            <div class="collapse mt-2" id="collapseTotal">
                <div class="card card-none-border">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-6 fs-6">
                                <b>Subtotal</b>
                            </div>
                            <div class="col-6 fs-6 text-end">
                                <b class="subtotal">${{ str_replace(',','',round(session()->get('subtotal'),2)) }}</b>
                            </div>
                        </div>
                        <div class="row mb-2 discountPriceDiv" @if(session()->get('discountPrice') <= 0) style="display: none" @endif>
                            <div class="col-7 fs-6 text-success">
                                <b>Promo Code <span class="couponDiscountDiv">({{ session()->get('couponCode') }} - {{ session()->get('couponDiscount') }})</span></b>
                            </div>
                            <div class="col-5 fs-6 text-end">
                                <b class="discountPrice text-success">- ${{ str_replace(',','',(session()->get('discountPrice'))) }}</b>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-8 fs-6">
                                <b>Estimated Shipping <span id="surchageShippingrright">@if(!empty(session()->get('ShippingSurcharges'))) (+${{ str_replace(',','',number_format(session()->get('ShippingSurcharges'),2)) }} surcharge) @endif</span></b>
                            </div>
                            <div class="col-4 fs-6 text-end">
                                <b class="shippingEst">${{ str_replace(',','',number_format((session()->get('ShippingCharges') + session()->get('ShippingSurcharges')),2)) }}</b>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 fs-6">
                                <b>Estimated Tax</b>
                            </div>
                            <div class="col-6 fs-6 text-end">
                                <b class="taxEst">${{ str_replace(',','',number_format(session()->get('ShippingTax'),2)) }}</b>
                            </div>
                        </div>
                        <hr class="hrdash2 mt-3 mb-3" style="margin-top: 15px !important;margin-bottom: 12px !important;border: none !important;height: 1px !important;background: #000 !important;background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px) !important;">
                        <div class="row mb-2">
                            <div class="col-6 fs-6">
                                <b>Order Total</b>
                            </div>
                            <div class="col-6 fs-6 text-end">
                                <b class="total">${{ str_replace(',','',round(session()->get('total'),2)) }}</b>
                            </div>
                        </div>

                    </div>
                </div>
              </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-2 card-none-border">
                <form action="{{ route('checkout-payment-v2') }}" method="post" id="checkoutPaymentForm">
                    @csrf
                    <input type="hidden" name="subtotal" id="subtotaltxt" value="">
                    <input type="hidden" name="ShippingCharges" id="ShippingChargestxt" value="">
                    <input type="hidden" name="ShippingTax" id="ShippingTaxtxt" value="">
                    <input type="hidden" name="total" id="totaltxt" value="">
                    <input type="hidden" name="discountPrice" id="discountPricetxt" value="">
                    <input type="hidden" name="couponCode" id="couponCodetxt" value="">
                    <input type="hidden" name="ShippingSurcharges" id="ShippingSurchargestxt" value="0">
                    <input type="hidden" id="paypal_vault_id" value="" name="paypal_vault_id">

                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="paypal_card_order_id" id="paypal_card_order_id" />

                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="paypal_order_id" id="paypal_order_id" />
                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="googlepay_order_id" id="googlepay_order_id" />
                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="applepay_order_id" id="applepay_order_id" />
                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="authorizenet_applepay_order_id" id="authorizenet_applepay_order_id" />
                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="authorizenet_googlepay_order_id" id="authorizenet_googlepay_order_id" />
                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="authorizenet_card_order_id" id="authorizenet_card_order_id" />

                    <input aria-labelledby="PartsWarehouse" type="hidden" value="" name="paypal_order_pay_amount" id="paypal_order_pay_amount" />
                    <input aria-labelledby="PartsWarehouseCheckout" type="hidden" value="" name="paypal_fundingSource" id="paypal_fundingSource" />
                    <input aria-labelledby="PartsWarehouseCheckout" type="hidden" value="" name="paypalemail" id="paypalemailtxt" />

                    <input aria-labelledby="PartsWarehouseCheckout" type="hidden" value="" name="cardType" id="cardType" />

                <div class="card-body p-3">
                    <div class="mt-2 mb-2">
                        <h4 class="m-0 font-weight-600"> Contact Details</h4>
                    </div>
                   
                    {{--  <div class="row p-1">
                        <div class="col-md-6 p-2">
                            <div class="form-group">
                                <label for="shippingemail">Email</label>
                                <input type="email" class="form-control contactdetailsform" id="shippingemail" value="{{ (!empty($abandonedCartDetail->customer_email) ? $abandonedCartDetail->customer_email : '') }}" name="shippingemail" aria-describedby="shippingemail"
                                    placeholder="email@domain.com">
                            </div>
                        </div>
                    </div>  --}}
                      <div class="row p-1">
                        <div class="col-md-6 p-2">
                            <div class="form-group">
                                <label for="shippingemail">Email</label>
                                <input type="email" class="form-control contactdetailsform" id="shippingemail" value="{{ (!empty($abandonedCartDetail->customer_email) ? $abandonedCartDetail->customer_email : '') }}" name="shippingemail" aria-describedby="shippingemail"
                                    placeholder="email@domain.com">
                            </div>
                            @if(!auth()->check())
                            <p id="shippingEmailMessage" class="mt-2"></p>
                            @endif
                        </div>
                        @if(!auth()->check())
                        <div class="col-md-6">
                            <div class="card card-body p-3 border-0" style="background: #f8f8f9">
                                <div class="row">
                                    <div class="col-8 col-md-8">
                                        <span style="font-size: 18px;font-weight: 600;" class="d-lg-none">Already have an Account?</span>
                                        <span style="font-size: 18px;font-weight: 600;" class="d-none d-lg-block">Already have an Account?</span>
                                        <p style="color:#797979;" class="m-0">Sign in checkout faster</p>
                                    </div>
                                    <div class="col-4 col-md-4 text-end m-auto">
                                        <button type="button" onclick="loginModel()" class="btn btn-primary d-lg-none">Sign In</button>
                                        <button type="button" class="btn btn-primary d-none d-lg-block" onclick="loginModel()" style="width: 95%;">Sign In</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                        @endif
                    </div>

                        <div class="row shippingFormRow mb-2 p-1">

                            <div class="col-md-6 p-2">
                                <div class="form-group">
                                    <label for="shippingfirstname">First Name</label>
                                    <input type="text" class="form-control contactdetailsform" value="{{ (!empty($abandonedCartDetail->shipfirstname) ? $abandonedCartDetail->shipfirstname : '') }}" name="shippingfirstname" id="shippingfirstname"
                                        aria-describedby="shippingfirstname" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6 p-2">
                                <div class="form-group">
                                    <label for="shippinglastname">Last Name</label>
                                    <input type="text" class="form-control contactdetailsform" value="{{ (!empty($abandonedCartDetail->shiplastname) ? $abandonedCartDetail->shiplastname : '') }}" name="shippinglastname" id="shippinglastname"
                                        aria-describedby="shippinglastname" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12 p-2">
                                <div class="form-group">
                                    <label for="shippingcompany">Company</label>
                                    <input type="text" class="form-control" value="{{ (!empty($abandonedCartDetail->shipcompanyname) ? $abandonedCartDetail->shipcompanyname : '') }}" name="shippingcompany" id="shippingcompany"
                                        aria-describedby="shippingcompany" placeholder="">
                                </div>
                            </div>

                            <div class="col-md-6 p-2">
                                <div class="form-group">
                                    <label for="shippingphone">Phone Number</label>
                                    <input type="text" class="form-control contactdetailsform" value="{{ (!empty($abandonedCartDetail->customer_phone) ? $abandonedCartDetail->customer_phone : '') }}" name="shippingphone" id="shippingphone"
                                        aria-describedby="shippingphone" placeholder="">
                                </div>
                            </div>
                        </div>
                        {{--  <div class="row">
                            <div class="col-12 text-center">
                                <button type="button" class="btn btn-success" id="paymentBtn" style="width: 17rem;padding: 10px;font-size: 18px;">Continue to payment</button>
                            </div>
                        </div>  --}}
                        <div id="paymentmaindiv" style="display: block;">
                            <h3>Select Payment</h3>
                            <div class="card paymentcard" style="border-radius: 10px 10px 0px 0px;">
                                <div class="card-body">
                                    @php
                                        $is_custom_merchant_type = 1;
                                        if(!empty(\Session::get('billingcountry')) && \Session::get('billingcountry') == 'United States'){
                                            $is_custom_merchant_type = $setting->domestic_payment_process;
                                        }else{
                                            $is_custom_merchant_type = $setting->international_payment_process;
                                        }
                                        $isselect = 0;
                                        if($is_custom_merchant_type == 1){
                                            $isselect = 1;
                                        }
                                        
                                        if($is_custom_merchant_type == 2){
                                            if($setting->is_new_authorizenet_process == 0){
                                                $isselect = 1;
                                            }
                                          
                                        }
                                           
                                       
                                    @endphp
                                    <div class="d-flex">
                                        <div class="" style="width: 30px;padding: 2px;">
                                            <input aria-labelledby="PartsWarehouse"  @if($isselect == 1) checked @endif type="radio" value="1" id="paymentOption0" name="payment_option" class="custom-control-input payment-option">
                                        </div>
                                        <div style="width: 100%;">
                                            <div class="row">
                                                <div class="col-6">
                                                    <label class="custom-control-label clearfix" for="paymentOption0" style="">Credit/Debit Card </label>
                                                </div>
                                                <div class="col-6 text-end">
                                                    <img src="{{ asset('assets/web') }}/images/card-visa.png" alt="" srcset="" width="28px" >
                                                    <img src="{{ asset('assets/web') }}/images/card-master.png" alt="" srcset="" width="28px" >
                                                    <img src="{{ asset('assets/web') }}/images/card-discover.png" alt="" srcset="" width="28px" >
                                                    <img src="{{ asset('assets/web') }}/images/card-amex.png" alt="" srcset="" width="28px" >
                                                </div>
                                            </div>

                                            <div id="cardcontainer">
                                                @foreach ($cardData as $c)
                                                <div class="row mt-2">
                                                    <div class="col-md-4 col-8">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" id="customer_card_id1{{ $c->id }}" onchange="cardIdChange()" data-vault-id="{{ $c->paypal_vault_id }}" data-card-brand="{{ $c->card_brand }}" data-card-number="{{ $c->card_number }}" name="customer_card_id" value="{{ $c->id }}" @if ($c->is_default == 1) checked @endif style="margin-top: 15px !important;">
                                                            <label class="form-check-label" for="customer_card_id1{{ $c->id }}" style="margin-left: 10px;">
                                                                <p>Card ending in {{ $c->cardNumber }} <br> <b>{{ $c->name_on_card }}</b> {{ $c->expiry_month.'/'.$c->expiry_year }}</p>
                                                            </label>
                                                        </div>
                                                    </div>

                                                </div>


                                                @endforeach
                                                @if(!$cardData->isEmpty())
                                        <div class="row carddiv">
                                            <div class="col-md-1 ">

                                            </div>
                                            <div class="col-md-3 " id="showCvv">

                                            </div>
                                        </div>
                                        <div class="row carddiv  mt-2">
                                            <div class="col-md-4 col-8">
                                                <div class="form-check">
                                                    <input class="form-check-input oppenaddCard" type="radio" id="customer_card_id2" onchange="cardIdChange()" name="customer_card_id" value="0" style="margin-top: 5px !important;">
                                                    <label class="form-check-label " for="customer_card_id2" style="margin-left: 10px;">
                                                        Add New Card
                                                    </label>
                                                </div>
                                            </div>


                                        </div>
                                        @endif
                                                <div class="row mt-2 addNewCard" @if(auth()->check() && !$cardData->isEmpty()) style="display: none;"  @endif>
                                                    <div class="col-md-8">
                                                        
                                                        @if($is_custom_merchant_type == 1)
                                                            @if($setting->is_new_paypal_process == 1)
                                                            <div class="row paymentFormRow">
                                                                <!-- Card Number -->
                                                                <div class="col-12 mb-3">
                                                                    <label for="card-number">Card Number</label>
                                                                    <div id="card-number" class="card-field form-control"></div>

                                                                    <span id="card_number_dummy-error" class="error" style="display: none;">Please enter card</span>

                                                                </div>

                                                                <!-- Expiration and CVV -->
                                                                <div class="col-6 mb-3">
                                                                    <label for="expiration-date">Expiration</label>
                                                                    <div id="expiration-date" class="card-field form-control"></div>
                                                                    <span id="expiry_dummy-error" class="error" style="display: none;">Please enter expiry</span>

                                                                </div>
                                                                <div class="col-4 mb-3">
                                                                    <label for="cvv">CVV</label>
                                                                    <div id="cvv" class="card-field form-control"></div>
                                                                    <span id="cvv_dummy-error" class="error" style="display: none;">Please enter cvv</span>

                                                                </div>


                                                                 <input type="hidden" id="card_number_dummy" name="card_number_dummy" value="1">
                                                                <input type="hidden" id="cvv_dummy" name="cvv_dummy" value="1">
                                                                <input type="hidden" id="expiry_dummy" name="expiry_dummy" value="1">
                                                                <input  type="hidden" value="" name="card_brand" id="card_brand" />
                                                                <input  type="hidden" value="" name="card_last4" id="card_last4" />
                                                                <input  type="hidden" value="" name="card_type" id="card_type" />
                                                                <input  type="hidden" value="" name="card_exp_month" id="card_exp_month" />
                                                                <input  type="hidden" value="" name="card_exp_year" id="card_exp_year" />

                                                            </div>
                                                            @else
                                                            <div class="row paymentFormRow">
                                                                <div class="col-12 inputgroup">
                                                                    <label for="card_number">Card Number</label>
                                                                    <div class="input-group mb-1">
                                                                        <input type="text" class="form-control card-form-control" value="{{ (!empty(session()->get('card_number'))) ? \Crypt::decryptString(session()->get('card_number')) : '' }}" name="card_number" id="card_number" aria-label="card_number" aria-describedby="card_number" onchange="return checkDigit(event,this.value)" onkeyup="return checkDigit(event,this.value)" style="border-radius: 5px;">
                                                                        <span id="basic-addon2"><span class="card-type" style="padding-left:10px;margin-top: 3px;z-index: 9"></span></span>
                                                                    </div>

                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="form-group">
                                                                        <label for="expiry_month">Month</label>
                                                                            <select name="expiry_month" id="expiry_month" class="form-control card-form-control">
                                                                                <option value="">Month</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '01') ? "selected" : "") }} value="01">01</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '02') ? "selected" : "") }} value="02">02</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '03') ? "selected" : "") }} value="03">03</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '04') ? "selected" : "") }} value="04">04</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '05') ? "selected" : "") }} value="05">05</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '06') ? "selected" : "") }} value="06">06</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '07') ? "selected" : "") }} value="07">07</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '08') ? "selected" : "") }} value="08">08</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '09') ? "selected" : "") }} value="09">09</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '10') ? "selected" : "") }} value="10">10</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '11') ? "selected" : "") }} value="11">11</option>
                                                                                <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '12') ? "selected" : "") }} value="12">12</option>
                                                                            </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="form-group">
                                                                        <label for="expiry_year">Year</label>
                                                                        <select name="expiry_year" id="expiry_year" class="form-control card-form-control">
                                                                            <option value="">Year</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2025">2025</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2026">2026</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2027">2027</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2028">2028</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2029">2029</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2030">2030</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2031">2031</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2032">2032</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2033">2033</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2034">2034</option>
                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2035">2035</option>
                                                                            
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-4">
                                                                    <div class="form-group">
                                                                        <label for="cvv">CVV</label>
                                                                        <input type="text" value="{{ !empty(session()->get('cvv')) ? session()->get('cvv') : '' }}" class="form-control card-form-control" name="cvv" id="cvv"
                                                                            aria-describedby="cvv" placeholder="">

                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endif
                                                        @else
                                                            @if($setting->is_new_authorizenet_process == 1)
                                                                <div class="col-md-12">
                                                                    <div class="row paymentFormRow">
                                                                           <input type="hidden" id="card_number_dummy" name="card_number_dummy">
                                                                            <input type="hidden" id="cvv_dummy" name="cvv_dummy">
                                                                            <input type="hidden" id="expiry_dummy" name="expiry_dummy">
                                                                            <input  type="hidden" value="" name="card_brand" id="card_brand" />
                                                                            <input  type="hidden" value="" name="card_last4" id="card_last4" />
                                                                            <input  type="hidden" value="" name="card_type" id="card_type" />
                                                                            <input  type="hidden" value="" name="card_exp_month" id="card_exp_month" />
                                                                            <input  type="hidden" value="" name="card_exp_year" id="card_exp_year" />

                                                                         <div id="authorizenet-loading" class="authorizenet-loading">
                                                                            <div class="spinner-border text-primary" role="status">
                                                                                <span class="visually-hidden">Loading...</span>
                                                                            </div>
                                                                            <p class="mt-3">Loading secure payment form...</p>
                                                                        </div>
                                                                        <!-- Payment Form -->
                                                                        <form id="authorizenet-payment-form" method="POST" target="authorizenet-payment-iframe">
                                                                            <input type="hidden" name="token" value="{{ $authorizeNetToken }}">
                                                                        </form>

                                                                        <!-- Payment Iframe -->
                                                                        <div id="authorizenet-container" >
                                                                        <iframe id="authorizenet-payment-iframe" name="authorizenet-payment-iframe" frameborder="0" scrolling="no"></iframe>
                                                                         </div>
                                                                    </div>


                                                                </div>
                                                            @else
                                                                <div class="col-md-8">
                                                                    <div class="row paymentFormRow">
                                                                        <div class="col-12 inputgroup">
                                                                            <label for="card_number">Card Number</label>
                                                                            <div class="input-group mb-1">
                                                                                <input type="text" class="form-control card-form-control" value="{{ (!empty(session()->get('card_number'))) ? session()->get('card_number') : '' }}" name="card_number" id="card_number" aria-label="card_number" aria-describedby="card_number" onchange="return checkDigit(event,this.value)" onkeyup="return checkDigit(event,this.value)" style="border-radius: 5px;">
                                                                                <span id="basic-addon2"><span class="card-type" style="padding-left:10px;margin-top: 3px;z-index: 9"></span></span>
                                                                            </div>

                                                                        </div>
                                                                        <div class="col-4">
                                                                            <div class="form-group">
                                                                                <label for="expiry_month">Month</label>
                                                                                    <select name="expiry_month" id="expiry_month" class="form-control card-form-control">
                                                                                        <option value="">Month</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '01') ? "selected" : "") }} value="01">01</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '02') ? "selected" : "") }} value="02">02</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '03') ? "selected" : "") }} value="03">03</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '04') ? "selected" : "") }} value="04">04</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '05') ? "selected" : "") }} value="05">05</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '06') ? "selected" : "") }} value="06">06</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '07') ? "selected" : "") }} value="07">07</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '08') ? "selected" : "") }} value="08">08</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '09') ? "selected" : "") }} value="09">09</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '10') ? "selected" : "") }} value="10">10</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '11') ? "selected" : "") }} value="11">11</option>
                                                                                        <option {{ ((!empty(session()->get('expiry_month')) && session()->get('expiry_month') == '12') ? "selected" : "") }} value="12">12</option>
                                                                                    </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <div class="form-group">
                                                                                <label for="expiry_year">Year</label>
                                                                                <select name="expiry_year" id="expiry_year" class="form-control card-form-control">
                                                                                    <option value="">Year</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2025">2025</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2026">2026</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2027">2027</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2028">2028</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2029">2029</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2030">2030</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2031">2031</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2032">2032</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2033">2033</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2034">2034</option>
                                                                                                                                                                        <option {{ ((!empty(session()->get('expiry_year')) && session()->get('expiry_year') == $ie)) ? "selected" : '' }} value="2035">2035</option>
                                                                                    
                                                                                </select>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-4">
                                                                            <div class="form-group">
                                                                                <label for="cvv">CVV</label>
                                                                                <input type="text" value="{{ !empty(session()->get('cvv')) ? session()->get('cvv') : '' }}" class="form-control card-form-control" name="cvv" id="cvv"
                                                                                    aria-describedby="cvv" placeholder="">

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="form-check mb-2 mt-4">
                                                    <input type="checkbox" class="form-check-input" name="sameAsBilling" value="1" id="sameAsBilling" @if(!empty(session()->get('sameAsBilling'))) checked @endif>
                                                    <label class="form-check-label" for="sameAsBilling"><b>Use shipping address as billing address</b></label>
                                                </div>

                                                <div class="row p-2 mt-2 mb-1">
                                                    <div class="card" id="billingAddressCard">
                                                        <div class="p-3 pb-0">
                                                            <h5 class="shipinglabel">Billing Address</h5>
                                                        </div>
                                                        @include('web.checkout-payment-billing-new')


                                                    </div>
                                                </div>
                                               
                                                <div class="card d-none">
                                                    <div class="card-body p-2">
                                                            <b>{{ session()->get('billingfirstname') }} {{ session()->get('billinglastname') }}</b>
                                                            @if(!empty(session()->get('billingcompany')))
                                                                <b>{{ session()->get('billingcompany') }}</b>
                                                            @endif
                                                            <p class="mb-0">{{ session()->get('billingstreetadress') }}</p>
                                                            @if(!empty(session()->get('billingstreetadress2')))
                                                                <p class="mb-0">{{ session()->get('billingstreetadress2') }}</p>
                                                            @endif
                                                            <p class="mb-0">{{ session()->get('billingcity') }} {{ session()->get('billingstate') }} {{ session()->get('billingzipcode') }}</p>
                                                            <p>{{ session()->get('billingcountry') }}</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card bt-0 paymentcard" style="border-radius: 0px 0px 0px 0px;">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="2" id="paymentOption1" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <div class="row">
                                                    <div class="col-6 text-start">
                                                        <label for="paymentOption1">Paypal</label>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <img src="{{ asset('assets/web') }}/images/paypal-payment.png" alt="cart-logo" width="80px">
                                                    </div>
                                            </div>
                                                <span id="paypalemail" style="display: none;"></span>
                                                <div id="paypal-button-container" style="width:300px;display:none;" class="mt-2"></div>
                                                <p style="color: red;display: none;" class="mt-2" id="paypalerror">Paypal Authorization Invalid</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if($setting->is_google_pay == 1 || $setting->is_googlepay_authorizenet == 1)
                            <div class="card bt-0 paymentcard" style="border-radius: 0px 0px 0px 0px;">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="5" id="paymentOption4" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <div class="row">
                                                    <div class="col-6 text-start">
                                                        <label for="paymentOption4">Google Pay</label>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <img src="{{ asset('assets/web') }}/images/google-pay-v2.png" alt="cart-logo" width="50px">

                                                    </div>
                                            </div>
                                                <span id="googlepaypaypalemail" style="display: none;"></span>

                                                <div id="googlepay-button-container" style="width:300px;" class="mt-2"></div>
                                                <p style="color: red;display: none;" class="mt-2" id="googlepaypaypalerror">Paypal Authorization Invalid</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if($setting->is_applepay == 1 || $setting->is_applepay_authorizenet == 1)
                            <div class="card bt-0 borderstayle paymentcard" style="border-radius: 0px 0px 0px 0px;" id="applepaydiv">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="6" id="paymentOption5" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <div class="row">
                                                    <div class="col-6 text-start">
                                                        <label for="paymentOption5">Apple Pay</label>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <img src="{{ asset('assets/web') }}/images/apple-pay.png" alt="cart-logo" width="40px">
                                                    </div>
                                            </div>
                                                <span id="applepayemail" style="display: none;"></span>
                                                <div id="applepay-button-container" style="width:300px;display:none;" class="mt-2"></div>
                                                <p style="color: red;display: none;" class="mt-2" id="applepayerror">Paypal Authorization Invalid</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if($setting->is_venmo == 1)
                            <div class="card bt-0 paymentcard" style="border-radius: 0px 0px 0px 0px;" id="venmodivdis">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="3" id="paymentOption2" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <div class="row">
                                                    <div class="col-6 text-start">
                                                        <label for="paymentOption2">Venmo</label>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <img src="{{ asset('assets/web') }}/images/venmo.png" alt="cart-logo" width="70px">
                                                    </div>
                                            </div>
                                                <span id="venmopaypalemail" style="display: none;"></span>
                                                <div id="venmo-button-container" style="width:300px;display:none;" class="mt-2"></div>
                                                <p style="color: red;display: none;" class="mt-2" id="paypalerror">Paypal Authorization Invalid</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if($setting->is_paylater == 1)
                            <div class="card bt-0 paymentcard" style="border-radius: 0px 0px 0px 0px;" id="paylaterdivdis">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="4" id="paymentOption3" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <div class="row">
                                                    <div class="col-6 text-start">

                                                        <label for="paymentOption3">PayLater</label>
                                                    </div>
                                                    <div class="col-6 text-end">
                                                        <img src="{{ asset('assets/web') }}/images/pay-later.png" alt="cart-logo" width="80px">
                                                    </div>
                                            </div>
                                                <span id="paylaterpaypalemail" style="display: none;"></span>
                                                <div id="paylater-button-container" style="width:300px;display:none;" class="mt-2"></div>
                                                <p style="color: red;display: none;" class="mt-2" id="paypalerror">Paypal Authorization Invalid</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <div class="card bt-0 paymentcard" style="border-radius: 0px 0px 10px 10px;display: none;" id="affirmdiv">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="d-flex">
                                            <div class="" style="width: 30px;padding: 2px;">
                                                <input aria-labelledby="PartsWarehouse" type="radio" value="6" id="paymentOption56" name="payment_option" class="custom-control-input payment-option">

                                            </div>
                                            <div style="width: 100%;">
                                                <img src="{{ asset('assets/web') }}/images/affirm-logo.png" alt="cart-logo" style="cursor: pointer;" width="200px">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="row mt-4">
                        <div class="col-12 text-center">
                            @php
                            $useragent = $_SERVER['HTTP_USER_AGENT'];
                            $isshowreviewbtn = 1;
                            if($is_custom_merchant_type == 2){
                                if($setting->is_new_authorizenet_process == 1){
                                    $isshowreviewbtn = 0;
                                }
                            }
                            @endphp
                             @if($isshowreviewbtn == 1)
                                @if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $useragent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($useragent, 0, 4)))
                                    <button type="submit" class="btn btn-success mt-4 cardReviewBtnMobile reviewOrderBtn" style="width: 100%;padding: 10px;font-size: 18px;">Review Your Order</button>
                                @else
                                    <button type="submit" class="btn btn-success cardReviewBtnDesktop reviewOrderBtn" style="width: 17rem;padding: 10px;font-size: 18px;">Review Your Order</button>

                                @endif
                            @endif    

                        </div>
                        <div class="col-12 text-center mt-3">

                            <a href="{{ route('home') }}" class="text-danger">Continue Shopping</a>

                        </div>

                    </div>

                </div>
            </form>
            </div>
        </div>


        <div class="col-md-4">
            <div class="card d-none d-lg-block">
                <div class="card-body p-2">
                    <div class="row" onclick="collapseContent()">
                        <div class="col-7">
                            <label class="fs-55"  >Have a Promo Code? </label>
                        </div>
                        <div class="col-5 text-end">
                            <i class="fas fa-chevron-down faicon"></i>
                        </div>

                    </div>
                    <div class="collapse mt-3 show" id="collapsePromoCode">
                        <div id="couponError2" style="display: none;border: 1px solid #EB6B43;margin-bottom: 5px;color:#F07F43;padding: 10px;background: #FFFAF5;border-radius: 5px;">
                            <div class="d-flex">
                                <span>The coupon code you entered is invalid</span>
                                <a href="#" onclick="removeCouponCodeError()" id="removeCouponCode1" style="margin-left: 100px;color:#F07F43;"><i class="fa fa-times" aria-hidden="true"></i></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-9">
                                <div class="form-group">
                                    <input type="text" name="coupon_code" value="{{ (!empty(\Session::get('couponCode')) ? \Session::get('couponCode') : '') }}" class="form-control" id="coupon_code" aria-describedby="coupon_code" placeholder="PROMO CODE" style="height: 50px;" oninput="this.value = this.value.toUpperCase()">
                                    @if(!empty(\Session::get('couponCode')))
                                        <span id="couponError" class="text-success">Coupon code applied.</span>&nbsp;&nbsp;<a href="#" onclick="removeCouponCode()" id="removeCouponCode">Remove</a>
                                    @else
                                        <span id="couponError" style="display: none"></span>&nbsp;&nbsp;<a href="#" onclick="removeCouponCode(1)" id="removeCouponCode" style="display: none">Remove</a>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3 p-1" style="">
                                <button type="button" class="btn btn-primary btn-lg" onclick="applyCouponCode()">APPLY</button>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 5px;margin-bottom: 0px;">

                <hr class="hrdash d-none d-lg-block">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-6 fs-6">
                            <b>Subtotal</b>
                        </div>
                        <div class="col-6 fs-6 text-end">
                            <b class="subtotal">${{ str_replace(',','',round(session()->get('subtotal'),2)) }}</b>
                        </div>
                    </div>
                    <div class="row mb-2 discountPriceDiv" @if(session()->get('discountPrice') <= 0) style="display: none" @endif>
                        <div class="col-7 fs-6 text-success">
                            <b>Promo Code <span class="couponDiscountDiv">({{ session()->get('couponCode') }} - {{ session()->get('couponDiscount') }})</span></b>
                        </div>
                        <div class="col-5 fs-6 text-end">
                            <b class="discountPrice text-success">- ${{ str_replace(',','',(session()->get('discountPrice'))) }}</b>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-8 fs-6">
                            <b>Estimated Shipping <span id="surchageShippingrright">@if(!empty(session()->get('ShippingSurcharges'))) (+${{ str_replace(',','',number_format(session()->get('ShippingSurcharges'),2)) }} surcharge) @endif</span></b>
                        </div>
                        <div class="col-4 fs-6 text-end">
                            <b class="shippingEst">${{ str_replace(',','',number_format((session()->get('ShippingCharges') + session()->get('ShippingSurcharges')),2)) }}</b>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6 fs-6">
                            <b>Estimated Tax</b>
                        </div>
                        <div class="col-6 text-end ">
                           <b class="taxEst">${{ str_replace(',','',number_format(session()->get('ShippingTax'),2)) }}</b>
                        </div>
                    </div>
                    <hr class="d-none d-lg-block">
                    <hr class="hrdash mt-4 mb-4 d-lg-none">
                    <div class="row mb-2">
                        <div class="col-6 fs-6">
                            <b>Order Total</b>
                        </div>
                        <div class="col-6 fs-6 text-end">
                            <b class="total">${{ str_replace(',','',round(session()->get('total'),2)) }}</b>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <a href="{{ route('checkout') }}" type="button" class="btn btn-secondary btn-lg w-100 mb-4 mt-2 disabled" aria-label="Proceed to Checkout">Place Order</a>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card mt-2 mb-2">
                <div class="card-body pb-0">
                    <div class="row">
                        <div class="col-12 fs-6">
                            <p>Cart ID # {{ (!empty(\Cookie::get('cart')) ? \Cookie::get('cart') : "") }}</p>
                        </div>
                        <hr>
                        <div class="col-12 fs-6">
                            <p>Having trouble? Contact us! 866.243.2721 </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="https://www.paypal.com/sdk/js?client-id={{ $client_id }}&enable-funding=venmo,paylater&currency=USD&commit=false&components=buttons,messages,hosted-fields,googlepay,applepay" data-client-token="{{ $clientToken }}"></script>
<script async src="https://pay.google.com/gp/p/js/pay.js" ></script>
<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
<script>
$(document).ready(function () {

        // Default: same as billing checked → show summary only
        @if(!empty(session()->get('sameAsBilling')))
            $("#billingAddressCard").hide();
            $("#billingaddressDisplay").show();
        @else
            $("#billingAddressCard").show();
            $("#billingaddressDisplay").hide();
        @endif
       // $("#billingAddressCard").hide();
        //$("#billingaddressDisplay").show();

        $("#sameAsBilling").on("change", function () {
            if ($(this).is(":checked")) {
                $("#billingAddressCard").hide();
                $("#billingaddressDisplay").show();
            } else {
                $("#billingAddressCard").show();
                $("#billingaddressDisplay").hide();
               // $('#billingAddressCard').load("{{ route('checkout-billing-v2') }}")
            }
        });

    });
    // Function to add/remove rules based on selected payment option
    function togglePaymentValidation() {
         const isPayPal = $('input[name="payment_option"]:checked').val() == '1';

        if (isPayPal) {
            // Add rules for PayPal fields
            var isPayPalmer = 0;
            @if($is_custom_merchant_type == 1)
                    @if($setting->is_new_paypal_process == 1)
                         isPayPalmer = 1;
                    @endif
            @endif
            console.log(isPayPalmer);
            if(isPayPalmer == 1){
                $('#card_number_dummy').rules('add', { required: true, messages: { required: 'Please enter a valid card number' } });
                $('#cvv_dummy').rules('add', { required: true, messages: { required: 'Please enter a valid CVV' } });
                $('#expiry_dummy').rules('add', { required: true, messages: { required: 'Please enter a valid expiration date' } });
            }else{
                 $('#card_number_dummy').rules('remove');
                $('#cvv_dummy').rules('remove');
                $('#expiry_dummy').rules('remove');
            }

        } else {
            // Remove PayPal rules


            $('#card_number_dummy').rules('remove');
            $('#cvv_dummy').rules('remove');
            $('#expiry_dummy').rules('remove');
        }
    }

    // Listen to payment option changes
    $('input[name="payment_option"]').on('change', function() {
        togglePaymentValidation();
        let payment_option = $(this).val();


            @if($is_custom_merchant_type == 1)
                @if($setting->is_new_paypal_process == 1)
                initHostedFields(payment_option); 
                @endif
            @endif


    });




    let hostedFieldsInstance = null;
    let hostedFieldsRenderPromise = null;
    let originalSubmitHandler = null;

    /**
    * Fallback cleanup — ensures DOM + validator reset
    */
    function fallbackCleanup() {
        // Remove leftover iframes from HostedFields
        $('#card-number iframe, #expiration-date iframe, #cvv iframe').remove();
        $('#card-number, #expiration-date, #cvv').empty();

        // Restore original validator submit handler
        const validator = $('#checkoutPaymentForm').data('validator');
        if (validator && typeof originalSubmitHandler === 'function') {
            validator.settings.submitHandler = originalSubmitHandler;
        }

        hostedFieldsInstance = null;
        hostedFieldsRenderPromise = null;
    }

    /**
    * Safe destroy with teardown + fallback
    */
    function safeDestroyHostedFields() {
        console.log("safeDestroyHostedFields called", { hostedFieldsInstance, hostedFieldsRenderPromise });

        const doTeardown = () => {
            if (!hostedFieldsInstance || typeof hostedFieldsInstance.teardown !== 'function') {
                console.warn("No HostedFields instance — running fallback cleanup");
                fallbackCleanup();
                return Promise.resolve();
            }
            return hostedFieldsInstance.teardown().then(() => {
                console.log("HostedFields teardown success");
                fallbackCleanup();
            }).catch(err => {
                console.error("HostedFields teardown failed — running fallback cleanup", err);
                fallbackCleanup();
            });
        };

        if (hostedFieldsRenderPromise) {
            return hostedFieldsRenderPromise
                .then(() => doTeardown())
                .catch(() => doTeardown());
        }
        return doTeardown();
    }

    /**
    * Initialize HostedFields
    */
    function initHostedFields(payment_option) {
       
        if (payment_option != 1) {
            safeDestroyHostedFields();
            return;
        }
        if (typeof paypal === 'undefined' || !paypal.HostedFields) {
            console.error("PayPal SDK not loaded or HostedFields unavailable");
            return;
        }
        if (hostedFieldsInstance || hostedFieldsRenderPromise) {
            console.log("HostedFields already active — skipping init");
            return;
        }

        hostedFieldsRenderPromise = paypal.HostedFields.render({
            createOrder: () => {
                $('#qtyloader').show();
                return fetch('/checkout/paypal-order-create', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ "_token": '{{ csrf_token() }}' })
                })
                .then(res => res.json())
                .then(data => data.id);
            },
            styles: {
                'input': { 'font-size': '16px', 'color': '#3a3a3a' },
                ':focus': { color: 'black' },
                '.valid': { color: 'green' },
                '.invalid': { color: 'red' }
            },
            fields: {
                number: { selector: '#card-number', placeholder: '**** **** **** ****' },
                expirationDate: { selector: '#expiration-date', placeholder: 'MM/YY' },
                cvv: { selector: '#cvv', placeholder: '123' }
            }
        }).then(hf => {
            hostedFieldsInstance = hf;
            hostedFieldsRenderPromise = null;

            // 🔹 hook into validator
            const validator = $("#checkoutPaymentForm").data("validator");
        
            if (validator) {
                originalSubmitHandler = validator.settings.submitHandler;
                validator.settings.submitHandler = function(form) {
                    $("#paypalcarderror").addClass("d-none");

                    const selectedCard = $('input[name="customer_card_id"]:checked');
                    const vaultId = selectedCard.data('vault-id') || null;

                    if (vaultId) {
                          $('#card_number_dummy').val('1');
                        $('#cvv_dummy').val('1');
                        $('#expiry_dummy').val('1');

                        // Hide any old error messages
                        $('#card_number_dummy-error, #cvv_dummy-error, #expiry_dummy-error').hide();
                        $('#paypal_vault_id').val(vaultId);
                        $('#card_last4').val(selectedCard.data('card-number'));
                        $('#card_brand').val(selectedCard.data('card-brand'));
                        form.submit();
                        return true;
                    }

                    if (!$(form).valid()) {
                        $('#qtyloader').hide();

                       
                        
                        return false;
                    }

                    hostedFieldsInstance.submit({
                        cardholderName: $('#shippingfirstname').val()
                    }).then(payload => {
                        console.log("HF Payload:", payload);

                        const cardBrand = payload.card?.brand || '';
                        const last4     = payload.card?.last_digits || '';
                        const cardType  = payload.card?.type || '';
                        let expMonth    = '';
                        let expYear     = '';

                        if (payload.card?.expiry) {
                            const parts = payload.card.expiry.split('-');
                            if (parts.length === 2) {
                                expYear  = parts[0];
                                expMonth = parts[1];
                            }
                        }

                        $('#paypal_card_order_id').val(payload.orderId || payload.orderID);
                        $('#card_brand').val(cardBrand);
                        $('#card_last4').val(last4);
                        $('#card_type').val(cardType);
                        $('#card_exp_month').val(expMonth);
                        $('#card_exp_year').val(expYear);

                        let orderAmount = 0;
                        if (payload.purchase_units?.length > 0) {
                            orderAmount = payload.purchase_units[0].amount?.value || '';
                        } else if (payload.amount?.value) {
                            orderAmount = payload.amount.value;
                        }
                        $('#paypal_order_pay_amount').val(orderAmount);

                        form.submit();
                    }).catch(err => {
                         $('#qtyloader').hide();
                        console.error("HF error:", err);
                        $("#paypalcarderror").removeClass("d-none");
                        $('html, body').animate({
                            scrollTop: $("#paypalcarderror").offset().top - 100
                        }, 500);
                    });
                    
                    return false;
                };
            }

            // 🔹 validity change updates
            hf.on('validityChange', function(event) {
                if (event.fields?.number) {
                    $('#card_number_dummy').val(event.fields.number.isValid ? '1' : '');
                    if (event.fields.number.isValid) $('#card_number_dummy-error').hide();
                }
                if (event.fields?.cvv) {
                    $('#cvv_dummy').val(event.fields.cvv.isValid ? '1' : '');
                    if (event.fields.cvv.isValid) $('#cvv_dummy-error').hide();
                }
                if (event.fields?.expirationDate) {
                    $('#expiry_dummy').val(event.fields.expirationDate.isValid ? '1' : '');
                    if (event.fields.expirationDate.isValid) $('#expiry_dummy-error').hide();
                }
            });
        }).catch(err => {
             $('#qtyloader').hide();
            hostedFieldsRenderPromise = null;
            $("#paypalcarderror").removeClass("d-none");
            console.error("HostedFields render error:", err);
        });
    }
    $(document).ready(function () {
        @if($is_custom_merchant_type == 1)
                @if($setting->is_new_paypal_process == 1)
               initHostedFields(1);
                @endif
            @endif

       
    });

</script>
<script>
    $('#paymentBtn').click(function(){
        if ($('#checkoutPaymentForm').valid()) {
            $('#paymentmaindiv').show();
            $('#paymentBtn').hide();
            $('.reviewOrderBtn').show();
            $('.reviewOrderBtn').prop("disabled", false);
        }else{
            $('#paymentBtn').show();
            $('.reviewOrderBtn').hide();
            $('.reviewOrderBtn').prop("disabled", true);
        }
    });
    function removeCouponCodeError(){
        $('#couponError2').hide();
      }

      $('.contactdetailsform').keyup(function(){
        var is_new_authorizenet_process = 0;
        @if($is_custom_merchant_type == 2)
            @if($setting->is_new_authorizenet_process == 1)
                is_new_authorizenet_process = 1;
            @endif
        @endif
       if(($('input[name="payment_option"]:checked').val() != 1) || is_new_authorizenet_process == 1) {
            if ($('#checkoutPaymentForm').valid()) {
                var rval = $('input[name="payment_option"]:checked').val();
                $('input[name="payment_option"]').attr('checked', false);

                $("input[name=payment_option][value='"+ rval +"']").prop("checked",true).trigger("change");

            }
        }

      });

     $(document)
  .ajaxStart(function () {
    $('#qtyloader').show();
  })
  .ajaxStop(function () {
    $('#qtyloader').hide();
  });

  var ShippingTax = $.session.get("taxEst");
  var subtotal = $.session.get("subtotal");
  var affectAmount = 0;
  var ShippingCharges = $.session.get("shippingEstPrice");
  var ShippingSurcharges = '{{ session()->get("ShippingSurcharges") }}';
  var discountPrice = $.session.get("discountPrice");
  var iscouponinvalid = 0;
  var maintotal = 0;
  function totalcal(){


    var discountPrice = $.session.get("discountPrice");

      var total = subtotal - discountPrice;
      if(discountPrice > 0){
        $('.discountPriceDiv').show();
        $('.discountPrice').text('- $'+discountPrice);

        $.session.set("couponCode",$('#coupon_code').val());
        $('#couponCodetxt').val($('#coupon_code').val());
    }else{
      $.session.set("couponCode",'');
        if(iscouponinvalid == 0){
            $('#couponError2').hide();
            $('#couponError').hide();
        }
      $('#removeCouponCode').hide();
      $('#coupon_code').val('');
      $('#coupon_code_new').val('');
      $('.discountPriceDiv').hide();
      $('#couponCodetxt').val('');
    }
      total = parseFloat(total)+parseFloat(ShippingCharges)+parseFloat(ShippingSurcharges)+parseFloat(ShippingTax);
      if(ShippingSurcharges > 0){
          $('#surchageShippingrright').text('( +$' + parseFloat(ShippingSurcharges).toFixed(2) +' surcharge)');
      }

      if(ShippingTax > 0){
          $('.taxEst').text('$'+parseFloat(ShippingTax).toFixed(2));
      }
      $('.shippingEst').text('$'+(parseFloat(ShippingCharges)+parseFloat(ShippingSurcharges)).toFixed(2));

      $('.total').text('$'+parseFloat(total).toFixed(2));
      maintotal = parseFloat(total).toFixed(2);
      $.session.set("shipping-option-value", $('.shipping-option:checked').next('label').clone().children().remove().end().text());

      $.session.set("subtotal",parseFloat(subtotal).toFixed(2));
      $.session.set("shippingEstPrice",parseFloat(ShippingCharges).toFixed(2));
      $.session.set("discountPrice",parseFloat(discountPrice).toFixed(2));
      $.session.set("taxEst",parseFloat(ShippingTax).toFixed(2));
      $.session.set("total",parseFloat(total).toFixed(2));

      $('#subtotaltxt').val($.session.get("subtotal"));
      $('#ShippingChargestxt').val($.session.get("shippingEstPrice"));
      $('#ShippingTaxtxt').val($.session.get("ShippingTax"));
      $('#totaltxt').val($.session.get("total"));
      $('#discountPricetxt').val($.session.get("discountPrice"));

      $('#ShippingSurchargestxt').val(ShippingSurcharges);

      var is_enable_affirm = "{{ $setting->is_enable_affirm }}";
      var affirm_enable_amount = "{{ $setting->affirm_enable_amount }}";
      if(is_enable_affirm == 1 && total >= parseFloat(affirm_enable_amount)){

        $('#paypaldivstyale').addClass('borderstaylenone');
        $('#paypaldivstyale').removeClass('borderstayle');
        checkoutOrderLog('{{ $cart_id }}', 'affirm-option-appears', "{{ date('Y-m-d H:i') }}");
        $('#affirmdiv').show();
      }else{
        $('#paypaldivstyale').addClass('borderstayle');
        $('#paypaldivstyale').removeClass('borderstaylenone');
        $('#affirmdiv').hide();
      }
     // $('#subtotaltxt').val($.session.get("subtotal"));
     // $('#ShippingChargestxt').val(ShippingCharges);
     // $('#ShippingTaxtxt').val(ShippingTax);
     // $('#totaltxt').val(total);
     // $('#discountPricetxt').val(discountPrice);
     // $('#ShippingSurchargestxt').val(ShippingSurcharges);
  }
  var country = "{{ session()->get('shippingcountry') }}";
  function LookupTax(taxparam) {
    $(".shippingMethodBtn").prop("disabled", true);
   // $('#qtyloader').show();
    var taxprice = subtotal - discountPrice;

    if(affectAmount != 0){
        taxprice = parseFloat(affectAmount);
    }
    //var zeroTaxState = new Array("PR","VI","GU","MP","AP","AA","DE","MT","OR","NH","MS","AE","AS","AK");
   // var zeroTaxState = new Array("VI","GU","MP","AP","AA","DE","MT","OR","NH","MS","AE","AS");
    //var zeroTaxState = new Array("ZZ");
    @if(!empty($setting->zero_tax_states))
        var zeroTaxState = [""];
    @else
        var zeroTaxState = [];
    @endif
    ispaysstatetax = $.session.get("ispaysstatetax");
    var cusTax = taxparam.State;
    if(jQuery.inArray(cusTax, zeroTaxState) === -1 && ispaysstatetax != 'N') {

        //console.log(taxparam);
       // $('#qtyloader').show();
        var settings = {
            "url": "{{ route('taxcloud-lookup') }}",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json",
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            "data": JSON.stringify({
                "apiKey": "4df21049-4318-4ef6-bf1a-76f44236fc66",
                "apiLoginID": "26A4E220",
                "customerID": "{{ auth()->check() ? auth()->user()->customerid : 'guest' }}",
                "deliveredBySeller": false,
                "origin": {
                    "Address1": "2578 State Hwy 276",
                    "City": "Rockwall",
                    "State": "TX",
                    "Zip5": "75032",
                    "Zip4": "",
                    "Address2": ""
                },
                "destination": taxparam,
                "cartItems": [
                    {
                        "Index": "1",
                        "ItemID": "1",
                        "TIC": "30000",
                        "Price": (taxprice + parseFloat(ShippingCharges) + parseFloat(ShippingSurcharges)),
                        "Qty": "1",
                        "Tax": "0"
                    }
                ],
                "cartID": "{{ $uuid }}"
            }),
        };

        $.ajax(settings).done(function(response) {
           // $('#qtyloader').show();
            var message = response.messages;
            var tax = 0;
            if(response.responseType == 3){
                $('#addressTaxFail').hide();
                $('#addressTaxFailLookup').hide();
                $(response.cartItemsResponse).each(function(index, CartItem) {
                    tax += CartItem.taxAmount;
                });
                errortaxstatus = 0;
                $(".shippingMethodBtn").prop("disabled", false);
            }else{
                // error handler in the server payment error logs
                var msg = message[0].message;
                $('#addressTaxFail').show();
                $('#addressTaxFailLookup').show();
                $('#addressTaxFail').text(msg);
                $('#addressTaxFailLookup').text(msg);
                errortaxstatus = 1;
                var serverAdd = '216.73.216.23';
                $.ajax({
                    type: 'post',
                    url: "{{ route('payment-error-log') }}",
                    data: {"_token": '{{ csrf_token() }}', error:msg,serverAdd:serverAdd},
                    dataType: "json",
                    success: function(responce) {

                    }
                });


            }
            ShippingTax = tax;
           // ShippingSurcharge(taxparam.State);


            totalcal();
            $(".shippingMethodBtn").prop("disabled", false);
        });
    }else{
        $(".shippingMethodBtn").prop("disabled", false);
        tax=0;
        ShippingTax = tax;
       // ShippingSurcharge(taxparam.State);

        totalcal();
    }
}
@if(!empty($cardData))
var t = $('input[name="customer_card_id"]:checked').val();
if(t > 0){
    $('#card_number_dummy').val('1');
$('#cvv_dummy').val('1');
$('#expiry_dummy').val('1');
}else{
    $('#card_number_dummy').val('');
$('#cvv_dummy').val('');
$('#expiry_dummy').val('');
}

@endif

  function cardIdChange(){
    @if(auth()->check() && !$cardData->isEmpty())
        var t = $('input[name="customer_card_id"]:checked').val();
    @else
    var t = 0;
    @endif


    if(t == 0){
        var cardType = "";
        if($('#cc').val()){
             cardType = GetCardType($('#cc').val());
        }

        var mind = 3;
        if(cardType == 'amex'){
            mind = 4;
            $('#paycardCVV').inputmask("9999");

        }else{
            $('#paycardCVV').inputmask("999");

        }
        $( "#checkoutForm" ).validate();
        $('#credit_card_name').rules('add',  { required: true,messages :{  required:'Please enter card number' } });
        $('#cc').rules('add',  { required: true,creditcard: true,messages :{  required:'Please enter card number', creditcard: 'Please enter a valid credit card number.' } });
        $('#expiry_date').rules('add',  { required: true,messages :{ required:'Please enter expiry date' } });
        $('#expiry_year').rules('add',  { required: true,CCExp:{month: '#expiry_date', year: '#expiry_year'},messages :{  required:'Please enter expiry year' } });
        $('#paycardCVV').rules('add',  { required: true,digits: true,messages :{  required:'Please enter cvv',digits:'Please enter a valid cvv number.',min:'Please enter a valid cvv number.' } });
     
        $('#card_number_dummy').val('');
        $('#cvv_dummy').val('');
        $('#expiry_dummy').val('');


    }else{

        var cardNum = $("input[name='customer_card_id']:checked").attr('data-card-number');
        if(cardNum){
            var cardType = GetCardType(cardNum);
        }

      //  alert(cardType);
        var mind = 3;
        if(cardType == 'amex'){
            mind = 4;
          //  $('#paycardCVV').inputmask("9999");

        }else{
            //$('#paycardCVV').inputmask("999");

        }
        $( "#checkoutPaymentForm" ).validate();
        $("#credit_card_name").rules("remove", "required");
        $("#cc").rules("remove", "required");
        $("#expiry_date").rules("remove", "required");
        $("#expiry_year").rules("remove", "required");
        $("#paycardCVV").rules("remove", "required");
       
        $('#card_number_dummy').val('1');
        $('#cvv_dummy').val('1');
        $('#expiry_dummy').val('1');


    }




}

$(".oppenaddCard").click(function(){
    $(".addNewCard").toggle();
});

  $("input[name='customer_card_id']").on("click", function() {
    @if(auth()->check())
    var is_checked = $(this).val();
    if(is_checked != "0"){
        $(".addNewCard").hide();
    }


    @else
    $(".addNewCard").show();
    @endif



});

    function checkDigit(event,$t) {

        var code = (event.which) ? event.which : event.keyCode;

        if ((code < 48 || code > 57) && (code > 31)) {
            return false;
        }

        var cardType = GetCardType($t);

        if(cardType == 'amex'){
            mind = 4;
            $('#cvv').inputmask("9999");

        }else{
            $('#cvv').inputmask("999");

        }
        console.log(cardType);
        $('.card-type').html('<i class="fab fa-brands fa-cc-'+cardType+'"></i>');
        $('#cardType').val(cardType);
        return true;
    }

    function GetCardType(number){
        // visa
        var re = new RegExp("^4");
        if (number.match(re) != null)
            return "visa";

        // Mastercard
        // Updated for Mastercard 2017 BINs expansion
        if (/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/.test(number))
            return "mastercard";

        // AMEX
        re = new RegExp("^3[47]");
        if (number.match(re) != null)
            return "amex";

        // Discover
        re = new RegExp("^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)");
        if (number.match(re) != null)
            return "discover";

        // Diners
        re = new RegExp("^36");
        if (number.match(re) != null)
            return "diners-club";

        // Diners - Carte Blanche
        re = new RegExp("^30[0-5]");
        if (number.match(re) != null)
            return "diners-club";

        // JCB
        re = new RegExp("^35(2[89]|[3-8][0-9])");
        if (number.match(re) != null)
            return "jcb";

        // Visa Electron
        re = new RegExp("^(4026|417500|4508|4844|491(3|7))");
        if (number.match(re) != null)
            return "visa";

        return "";
    }

    var total = $.session.get("total");


    $('#shippingemail').bind("change", function() {
        $('#shippingemail').valid();
    });
    $('#shippingfirstname').bind("change", function() {
        $('#shippingfirstname').valid();
    });
    $('#shippinglastname').bind("change", function() {
        $('#shippinglastname').valid();
    });
    $('#shippingphone').bind("change", function() {
        $('#shippingphone').valid();
    });


    $(document).ready(function() {

       // affirm.checkout.open();

        var lastVisibleElement = $('.paymentcard:visible').last();
        lastVisibleElement.addClass('paymentcardborderupdate');
        totalcal();


        $('#shippingphone').inputmask("(999) 999-9999",{ "clearIncomplete": true});

        @if(!empty(session()->get('customer_card_id')))
        var custcartid = "{{ session()->get('customer_card_id') }}";

          $('#customer_card_id1'+custcartid).prop('checked', true).trigger('click');

          $('#card_number').val('');
          $('#expiry_month').val('');
          $('#expiry_year').val('');
          $('#cvv').val('');
      @endif
      @if((session()->get('customer_card_id') == 0))
        $('#customer_card_id2').prop('checked', true).trigger('click');

      @endif


        @if(!empty(session()->get('card_number')))
        checkDigit([],"{{ implode(' ', str_split(session()->get('card_number'), 3)) }}")
        @endif
        $('#card_number').inputmask({
            mask: '(3(4|7)99 9{6} 9{5}|3999 9{4} 9{4} 9{4}|9{4} 9{4} 9{4} 9{4})'
          }).change(function(){
            let value = $(this).val().substr(0,2);
            $('#cvv').inputmask({
              mask: (value==34||value==37)?'9{4}':'9{3}'
            });
          });
      //  $('#cvv').inputmask("999");


        $.validator.addMethod('CCExp', function(value, element, params) {
            var minMonth = new Date().getMonth() + 1;
            var minYear = new Date().getFullYear();

            var expiry_date = $(params.month).val();
            var expiry_year = $(params.year).val();

            // expiry_date = expiry_date.split("/");

            var month = parseInt(expiry_date);
            var year = parseInt(expiry_year);
                return (!month || !year || year > minYear || (year === minYear && month >= minMonth));
          }, 'Your Credit Card Expiration date is invalid.');



        // Custom validation to disallow HTML tags
        $.validator.addMethod("noHtmlTags", function(value, element) {
            return this.optional(element) || !/<[^>]*>/g.test(value);
        }, "Input cannot contain HTML tags");

        $('#checkoutPaymentForm').validate({
            ignore: [], // Do NOT ignore hidden fields
            rules: {
                card_number: {
                    required: true,
                    creditcard: true
                },
                expiry_month: {
                    required: true
                },
                expiry_year: {
                    required: true,
                    CCExp:{month: '#expiry_month', year: '#expiry_year'}
                },
                cvv: {
                    required: true,
                    digits: true
                },
                shippingemail: {
                    required: true
                },
                shippingfirstname: {
                    required: true,
                    noHtmlTags: true
                },
                shippinglastname: {
                    required: true,
                    noHtmlTags: true
                },
                shippingphone: {
                    required: true
                },
                shippingcompany:{
                    noHtmlTags: true
                },
                // Billing fields added with function-based required condition
                billingcountry: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingfirstname: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; },
                    noHtmlTags: true
                },
                billinglastname: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; },
                    noHtmlTags: true
                },
                billingstreetadress: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingcity: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingstate: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingzipcode: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingphone: {
                    required: function () { return $('#sameAsBilling').prop('checked') !== true; }
                },
                billingcompany: {
                    noHtmlTags: true
                }
            },
            messages: {
                card_number: {
                    required:'Please enter card number',
                    creditcard: 'Please enter a valid credit card number.'
                },
                expiry_month: {
                    required:'Please enter expiry date'
                },
                expiry_year: {
                    required:'Please enter expiry year',
                    CCExp:'Your Credit Card Expiration date is invalid.'
                },
                cvv: {
                    required:'Please enter cvv'
                },
                shippingemail: {
                    required: "Please enter email"
                },
                shippingfirstname: {
                    required: "Please enter first name",
                    noHtmlTags: "First name cannot contain HTML tags"
                },
                shippinglastname: {
                    required: "Please enter last name",
                      noHtmlTags: "Last name cannot contain HTML tags"
                },
                shippingphone: {
                    required: "Please enter phone"
                },
                shippingcompany:{
                    noHtmlTags: "Company name cannot contain HTML tags"
                },
                billingcountry: { required: "Please enter billing country" },
                billingfirstname: { required: "Please enter billing first name" },
                billinglastname: { required: "Please enter billing last name" },
                billingstreetadress: { required: "Please enter billing street address" },
                billingcity: { required: "Please enter billing city" },
                billingstate: { required: "Please enter billing state" },
                billingzipcode: { required: "Please enter billing zip" },
                billingphone: { required: "Please enter billing phone" },
                billingcompany:{
                    noHtmlTags: "Company name cannot contain HTML tags"
                }
            },
            success: function(label,element) {

                var inputName = label.attr('id');
                if(inputName == 'shippingfirstname-error' || inputName == 'shippinglastname-error' || inputName == 'shippingphone-error' || inputName == 'shippingemail-error'){
                    label.addClass("valid");
                    label.append("<i class='fa fa-check'></i>");
                }


              },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                 console.log(element);
                $(element).parents('.form-group').append(error)
                $(element).parents('.inputgroup').append(error)
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function (form) {
              
                if($('#paypal_order_id').val() == "" && $('.payment-option:checked').val() == 2){
                    $('#paypalerror').show();
                }else{
                    $('#qtyloader').show();
                    $('#paypalerror').hide();
                    form.submit();
                }

            }
        });
 // Call once on page load in case PayPal is pre-selected
 togglePaymentValidation();

    });
    let paypalButtons;
    function loadPayPalButton(selectedPayment) {

        $('#' + selectedPayment + '-button-container').empty();

        var fundingSource="";
        var fcolor = "gold";
        if (selectedPayment === 'paypal') {

            fundingSource = paypal.FUNDING.PAYPAL;

        } else if (selectedPayment === 'paylater') {

            fundingSource = paypal.FUNDING.PAYLATER;
            if (!paypal.Buttons({ fundingSource: fundingSource }).isEligible()) {
                alert("PayPal Pay Later is not eligible for this transaction.");
                return; // Exit the function if Pay Later is not eligible
            }
        } else if (selectedPayment === 'venmo') {
            fcolor = "blue";
            fundingSource = paypal.FUNDING.VENMO;
            if (!paypal.Buttons({ fundingSource: fundingSource }).isEligible()) {
                alert("Venmo is not eligible for this transaction.");
                return; // Exit the function if Venmo is not eligible
            }
        }

        paypalButtons = paypal.Buttons({
            fundingSource: fundingSource,
            style: {
                color: fcolor,
                shape: "rect",
                layout: "vertical",
            },
            // Sets up the transaction when a payment button is clicked
            onClick: (data) => {
                fundingSource = data.fundingSource;
                $('#paypal_fundingSource').val(fundingSource);
            },
            onInit: function (data, actions) {
                $('.paypalBtnClick').bind("click", function () {
                    document.querySelector('.paypal-button-number-0').click();
                });
            },
            createOrder: (data, actions) => {
                return actions.order.create({
                    purchase_units: [{
                      amount: {
                        currency_code: "USD",
                        value: parseFloat(total).toFixed(2), // Can also reference a variable or function
                        breakdown: {
                            item_total: {
                                currency_code: "USD",
                                value: parseFloat(total).toFixed(2)
                            }
                        }
                      },
                      items: [
                        {
                            name: "Shopping at Partswarehouse.com",
                            description: "Partswarehouse.com",
                            sku: "partwarehouse",
                            unit_amount: {
                                currency_code: "USD",
                                value: parseFloat(total).toFixed(2)
                            },
                            quantity: "1"
                        },

                    ]
                    }]
                  });
            },

            // Finalize the transaction after payer approval
            onApprove: (data, actions) => {
                actions.order.get().then(function(authorization) {
                    var is_countryChanged = 0;
                    // var authorizationID = authorization.purchase_units[0].payments.authorizations[0].id;
                    var authorizationID = authorization.id;
                    $('#paypal_order_id').val(authorizationID);


                    $('#paypal_order_pay_amount').val(authorization.purchase_units[0].amount.value);
                    if(selectedPayment == 'paypal'){
                        $('#paypalemail').show();
                        $('#paypalemail').text('Authorized with ' + authorization.payer.email_address);
                        $('#paypalemailtxt').val(authorization.payer.email_address);
                      //  $('#paypaldiv').show();
                        $('#paypal-button-container').hide();
                    }
                    if(selectedPayment == 'venmo'){
                        $('#venmopaypalemail').show();
                        $('#venmopaypalemail').text('Authorized with ' + authorization.payer.email_address);
                        $('#paypalemailtxt').val(authorization.payer.email_address);
                      //  $('#paypaldiv').show();
                        $('#venmo-button-container').hide();
                    }
                    if(selectedPayment == 'paylater'){
                        $('#paylaterpaypalemail').show();
                        $('#paylaterpaypalemail').text('Authorized with ' + authorization.payer.email_address);
                        $('#paypalemailtxt').val(authorization.payer.email_address);
                      //  $('#paypaldiv').show();
                        $('#paylater-button-container').hide();
                    }



                      $('.reviewOrderBtn').prop("disabled", false);
                        checkoutOrderLog('{{ $cart_id }}', 'paypal_authorize', "{{ date('Y-m-d H:i') }}");
                  });
            },
            onError: (err) => {
                Swal.fire({
                    title: 'Payment Failed!',
                    text: err.message,
                    icon: 'error'
                });
            }
        }).render('#' + selectedPayment + '-button-container');


    }

    async function createOrderCallback() {

        try {
            $.ajax({
                type: 'post',
                url: "{{ route('checkout-paypal-order-create') }}",
                data: { "_token": '{{ csrf_token() }}'},
                dataType: "json",
                success: function(responce) {
                    if(responce.status == true){
                    }
                }
            });
        } catch (error) {
          console.error(error);
          resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
        }
      }


    function collapseContent(){
        $('#collapsePromoCode').collapse('toggle');
    }
    $('#collapsePromoCode').on('shown.bs.collapse', function () {
            $('.faicon').addClass('rotate');
            $('.showorderlabel').text('Hide order summary');
     });

     $('#collapsePromoCode').on('hidden.bs.collapse', function () {
        $('.faicon').removeClass('rotate');
        $('.showorderlabel').text('Show order summary');
     });

     function collapseContentTotal(){
        $('#collapseTotal').collapse('toggle');
    }
    $('#collapseTotal').on('shown.bs.collapse', function () {
            $('.faicon').addClass('rotate');
            $('.showorderlabeltotal').text('Hide order summary');
     });

     $('#collapseTotal').on('hidden.bs.collapse', function () {
        $('.faicon').removeClass('rotate');
        $('.showorderlabeltotal').text('Show order summary');
     });

     $(document).ready(function() {
        //$('#collapsePromoCode').collapse('toggle');
        $('#collapseTotal').collapse('toggle');
            setTimeout(function() {
                $(".alert").not(".customalert").alert('close');
            }, 12000);

            @if($is_custom_merchant_type == 2)
                @if($setting->is_new_authorizenet_process == 1)
                $('#cardcontainer').hide();
                        if(!$('#checkoutPaymentForm').valid()){
                            $('.payment-option').prop('checked', false);
                        }
                @endif
            @endif
    });
    $('.payment-option').change(function(){
        
         @if($is_custom_merchant_type == 2)
            @if($setting->is_new_authorizenet_process == 1)
                    if(!$('#checkoutPaymentForm').valid()){
                        $('.payment-option').prop('checked', false);
                        return false;
                }
            @endif
        @endif

        if($(this).val() == 1){
            $('#cardcontainer').show();
            $('#paypal-button-container').hide();
            $( "#checkoutPaymentForm" ).validate();
            $('#googlepay-button-container').hide();
            $('#applepay-button-container').hide();
            $('#card_number').rules('add',  { required: true,creditcard: true,messages :{  required:'Please enter card number', creditcard: 'Please enter a valid credit card number.' } });
            $('#expiry_month').rules('add',  { required: true,messages :{ required:'Please enter expiry date' } });
            $('#expiry_year').rules('add',  { required: true,CCExp:{month: '#expiry_month', year: '#expiry_year'},messages :{  required:'Please enter expiry year' } });
            $('#cvv').rules('add',  { required: true,digits: true,messages :{  required:'Please enter cvv',digits:'Please enter a valid cvv number.',min:'Please enter a valid cvv number.' } });
            $('#paypalerror').hide();
            $('#paypal_order_id').val('');
            $('.reviewOrderBtn').prop("disabled", false);
            if($('#checkoutPaymentForm').valid()){
                initializePayment();
              }
            abandonedCartSavedConatctDetail();
        }else if($(this).val() == 2){
            $("#card_number").rules("remove", "required");
            $("#expiry_month").rules("remove", "required");
            $("#expiry_year").rules("remove", "required");
            $("#cvv").rules("remove", "required");
            $('#cardcontainer').hide();

            if($('#checkoutPaymentForm').valid()){
                loadPayPalButton('paypal');
                abandonedCartSavedConatctDetail();
                $('#paypal-button-container').show();
                $('#venmo-button-container').hide();
                $('#paylater-button-container').hide();
                $('#googlepay-button-container').hide();
                $('#applepay-button-container').hide();
                $( "#checkoutForm" ).validate();
            }

                $('#paypalerror').hide();
                $('.reviewOrderBtn').prop("disabled", true);

        }else if($(this).val() == 3){
            $("#card_number").rules("remove", "required");
            $("#expiry_month").rules("remove", "required");
            $("#expiry_year").rules("remove", "required");
            $("#cvv").rules("remove", "required");
            $('#cardcontainer').hide();

            if($('#checkoutPaymentForm').valid()){
                loadPayPalButton('venmo');
                abandonedCartSavedConatctDetail();
                $('#venmo-button-container').show();
                $('#paypal-button-container').hide();
                $('#paylater-button-container').hide();
                $('#googlepay-button-container').hide();
                $('#applepay-button-container').hide();
                $( "#checkoutForm" ).validate();
            }

                $('#paypalerror').hide();
                $('.reviewOrderBtn').prop("disabled", true);

        }else if($(this).val() == 4){
            $("#card_number").rules("remove", "required");
                $("#expiry_month").rules("remove", "required");
                $("#expiry_year").rules("remove", "required");
                $("#cvv").rules("remove", "required");
                $('#cardcontainer').hide();
            if($('#checkoutPaymentForm').valid()){

                loadPayPalButton('paylater');
                abandonedCartSavedConatctDetail();
                $('#paylater-button-container').show();
                $('#paypal-button-container').hide();
                $('#venmo-button-container').hide();
                $('#googlepay-button-container').hide();
                $('#applepay-button-container').hide();
                $( "#checkoutForm" ).validate();
            }

                $('#paypalerror').hide();
                $('.reviewOrderBtn').prop("disabled", true);

        }else if($(this).val() == 5){
            $("#card_number").rules("remove", "required");
            $("#expiry_month").rules("remove", "required");
            $("#expiry_year").rules("remove", "required");
            $("#cvv").rules("remove", "required");
            $('#cardcontainer').hide();

            if($('#checkoutPaymentForm').valid()){
                onGooglePayLoaded();
                abandonedCartSavedConatctDetail();
                $('#paylater-button-container').hide();
                $('#paypal-button-container').hide();
                $('#venmo-button-container').hide();
                $('#googlepay-button-container').show();
                $('#applepay-button-container').hide();
                $( "#checkoutForm" ).validate();
            }

                $('#paypalerror').hide();
                $('.reviewOrderBtn').prop("disabled", true);

        }else if($(this).val() == 6){
            $("#card_number").rules("remove", "required");
            $("#expiry_month").rules("remove", "required");
            $("#expiry_year").rules("remove", "required");
            $("#cvv").rules("remove", "required");
            $('#cardcontainer').hide();

            if($('#checkoutPaymentForm').valid()){
                setupApplePay();
                abandonedCartSavedConatctDetail();
                $('#paylater-button-container').hide();
                $('#paypal-button-container').hide();
                $('#venmo-button-container').hide();
                $('#googlepay-button-container').hide();
                $('#applepay-button-container').show();
                $( "#checkoutForm" ).validate();
            }

                $('#paypalerror').hide();
                $('.reviewOrderBtn').prop("disabled", true);

        }else{
            $('#cardcontainer').hide();

            $('#paypal-button-container').hide();
            $( "#checkoutForm" ).validate();
            $("#card_number").rules("remove", "required");
            $("#expiry_month").rules("remove", "required");
            $("#expiry_year").rules("remove", "required");
            $("#cvv").rules("remove", "required");
            $('#paypalerror').hide();
            $('#paypal_order_id').val('');

            $('.reviewOrderBtn').prop("disabled", false);
            abandonedCartSavedConatctDetail();
        }

        $('#paypalemail').hide();
        $('#venmopaypalemail').hide();
        $('#paylaterpaypalemail').hide();
        $('#googlepaypaypalemail').hide();
        $('#card_number').val('');
    });

    function removeCouponCode(){
        $("#qtyloader").show();
        if($('#coupon_code').val() != ""){
            checkoutOrderLog('{{ $cart_id }}', 'couponcode_removed', "{{ date('Y-m-d H:i') }}");
        }
        $('#couponError2').hide();
        $('#couponError').hide();
        $('#removeCouponCode').hide();
        $('#coupon_code').val('');
        $('#coupon_code_new').val('');
        $('.discountPriceDiv').hide();
    $('#coupon_code').attr('readonly', false);

        $.session.set("discountPrice",0);
        discountPrice = 0;
        if(country == 'United States'){

            var taxparam = {"Address1": "{{ session()->get('shippingstreetadress') }}",
            "City": "{{ session()->get('shippingcity') }}",
            "State": "{{ session()->get('shippingstate') }}",
            "Address2": "{{ !empty(session()->get('shippingstreetadress2')) ? session()->get('shippingstreetadress2') : '' }}",
            "Zip5": "{{ session()->get('shippingzipcode') }}",
            "Zip4": ""};
            LookupTax(taxparam);
        //    ShippingSurcharge(taxparam.State);
        }else{
          //  ShippingSurcharge();
        }
    }

    function applyCouponCode(isremove = 0){
        if(isremove == 1){
            var coupon_code = '';
        }else{
            var coupon_code = $('#coupon_code').val();
        }


        $("#qtyloader").show();

        var totalam = "{{ round(session()->get('subtotal'),2) }}";
        $.ajax({
            type: 'post',
            url: "{{ route('apply-coupon') }}",
            data: { "_token": '{{ csrf_token() }}','coupon_code':coupon_code,'price':totalam,'ischekoutreview':1 },
            dataType: "json",
            success: function(responce) {

                if(responce.status == true){
                    $('#couponError').show();
                    $('#couponError2').hide();

                    discountPrice = responce.data.discount;
                    $('.couponDiscountDiv').html('(' + coupon_code +' - '+ responce.data.discountPerAmount +')');
                    $.session.set("couponDiscount",responce.data.discountPerAmount);
                    $.session.set("discountPrice",responce.data.discount);
                    $('#couponError').text(responce.message);
                    $('#couponError').removeClass('text-danger');
                    $('#couponError').addClass('text-success');
                    $('#removeCouponCode').show();
                    $('#coupon_code').attr('readonly', true);
                    iscouponinvalid = 0;
                    if(country == 'United States'){

                        var taxparam = {"Address1": "{{ session()->get('shippingstreetadress') }}",
                        "City": "{{ session()->get('shippingcity') }}",
                        "State": "{{ session()->get('shippingstate') }}",
                        "Address2": "{{ !empty(session()->get('shippingstreetadress2')) ? session()->get('shippingstreetadress2') : '' }}",
                        "Zip5": "{{ session()->get('shippingzipcode') }}",
                        "Zip4": ""};
                        LookupTax(taxparam);
                    //    ShippingSurcharge(taxparam.State);
                    }else{
                      //  ShippingSurcharge();
                    }
                  //  totalcal();
                    //checkoutOrderLog('{{ $cart_id }}', 'couponcode_applied', "{{ date('Y-m-d H:i') }}");
                }else{
                    if ((responce.invalid_type === "category" || responce.invalid_type === "product" || responce.invalid_type === "pricingtype") && Array.isArray(responce.invalid_products) && responce.invalid_products.length > 0) {
                         $('#qtyloader').hide();
                        showInvalidCouponProductsModal(responce.invalid_products, responce.message, responce.offer_type);
                    } else {
                        $('#couponError').hide();
                        $('#couponError2').show();
                        discountPrice = 0;
                        $('.couponDiscountDiv').html('');
                        $('#couponError').text(responce.message);
                        $('#couponError').addClass('text-danger');
                        $('#couponError').removeClass('text-success');
                        $('#coupon_code').val('');
                        $('#removeCouponCode').hide();
                        $.session.set("couponDiscount",'');
                        $.session.set("discountPrice",0);
                        iscouponinvalid = 1;
                        if(country == 'United States'){

                            var taxparam = {"Address1": "{{ session()->get('shippingstreetadress') }}",
                            "City": "{{ session()->get('shippingcity') }}",
                            "State": "{{ session()->get('shippingstate') }}",
                            "Address2": "{{ !empty(session()->get('shippingstreetadress2')) ? session()->get('shippingstreetadress2') : '' }}",
                            "Zip5": "{{ session()->get('shippingzipcode') }}",
                            "Zip4": ""};
                            LookupTax(taxparam);
                        //    ShippingSurcharge(taxparam.State);
                        }
                        $('#coupon_code').attr('readonly', false);
                        setTimeout(function() {
                            $('#couponError').hide();
                        }, 5000);
                    }
                }
            }
        });

    }

    @if($setting->is_applepay == 1)
        /*
        Apple Pay intigration Paypal
        */

        // Function that sets up Apple Pay
        if (!window.ApplePaySession) {
            $('#applepaydiv').hide();
        }
        var applepay = "";

        function setupApplePay() {
            if (!window.ApplePaySession) {
                throw new Error('This device does not support Apple Pay');
            }
            if (!ApplePaySession.canMakePayments()) {
                throw new Error('This device is not capable of making Apple Pay payments');
            }

            applepay = paypal.Applepay();
            applepay.config()
                .then(applepayConfig => {
                    if (applepayConfig.isEligible) {
                        document.getElementById("applepay-button-container").innerHTML =
                            '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en" onclick="onApplePayButtonClicked()">';
                    }
                })
                .catch(applepayConfigError => {
                    throw new Error('Error while fetching Apple Pay configuration: ' + applepayConfigError);
                });
        }

        // Async function for creating a PayPal order
        async function paypal_api_create_order() {
            const url = '/checkout/google-order-create';
            const request_body = {
                "_token": "{{ csrf_token() }}",
                "intent": "CAPTURE"
            };

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(request_body)
                });
                return await response.json();
            } catch (error) {
                console.error('Error creating PayPal order:', error);
            }
        }

        // Function to capture PayPal order
        async function paypal_api_capture_order(id) {
            const url = '/checkout/google-order-capture';
            const order = {
                "_token": "{{ csrf_token() }}",
                "orderid": id
            };

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(order)
                });
                return await response.json();
            } catch (error) {
                console.error('Error capturing PayPal order:', error);
            }
        }

        // Payment authorized event handler
        function ap_payment_authed(event) {
            paypal_api_create_order().then(pp_data => {
                let pp_order_id = pp_data.id;
                applepay.confirmOrder({
                        orderId: pp_order_id,
                        token: event.payment.token,
                        billingContact: event.payment.billingContact
                    })
                    .then(confirmResult => {
                        console.log(confirmResult);
                        current_ap_session.completePayment(ApplePaySession.STATUS_SUCCESS);
                        paypal_api_capture_order(pp_order_id).then(capresp => {
                            if (capresp.status === "COMPLETED") {
                                var authorizationID = pp_order_id;
                                $('#applepay_order_id').val(authorizationID);

                                $('#paypal_order_pay_amount').val(capresp.purchase_units[0].payments.captures[0].amount.value);

                                $('.reviewOrderBtn').prop("disabled", true);
                                checkoutOrderLog('{{ $cart_id }}', 'applepay_authorize', "{{ date('Y-m-d H:i') }}");
                                $('#applepaypaypalemail').show();
                                $('#applepaypaypalemail').text('Authorized Approved');
                                // $('#googlepaypaypalemailtxt').val(authorization.payer.email_address);
                                //  $('#paypaldiv').show();
                                $('#paypal-button-container').hide();
                                $('#qtyloader').show();
                                $('#checkoutPaymentForm').submit();

                            } else {
                                Swal.fire({
                                    title: 'Payment Failed!',
                                    text: 'Invalid Capture',
                                    icon: 'error'
                                });
                            }
                        });
                    })
                    .catch(confirmError => {
                        Swal.fire({
                            title: 'Payment Failed!',
                            text: 'Error confirming order with Apple Pay token:' + confirmError,
                            icon: 'error'
                        });
                        // console.error('Error confirming order with Apple Pay token:', confirmError);
                        current_ap_session.completePayment(ApplePaySession.STATUS_FAILURE);
                    });
            });
        }

        // Merchant validation event handler
        function ap_validate(event) {
            applepay.validateMerchant({
                    validationUrl: event.validationURL,
                    displayName: "Partwarehouse.com"
                })
                .then(validateResult => {
                    current_ap_session.completeMerchantValidation(validateResult.merchantSession);
                })
                .catch(validateError => {
                    Swal.fire({
                        title: 'Payment Failed!',
                        text: 'Error validating Apple Pay merchant:',
                        validateError,
                        icon: 'error'
                    });
                    //console.error('Error validating Apple Pay merchant:', validateError);
                    current_ap_session.abort();
                });
        }

        // Apple Pay button click handler
        function onApplePayButtonClicked() {
            const payment_request = {
                countryCode: "US",
                merchantCapabilities: ["supports3DS"],
                supportedNetworks: ["visa", "masterCard", "amex", "discover"],
                currencyCode: "USD",
                requiredShippingContactFields: ["name", "phone", "email", "postalAddress"],
                requiredBillingContactFields: ["name", "phone", "email", "postalAddress"],
                total: {
                    label: "Partwarehouse.com",
                    type: "final",
                    amount: maintotal
                }
            };

            current_ap_session = new ApplePaySession(4, payment_request);
            current_ap_session.onvalidatemerchant = ap_validate;
            current_ap_session.onpaymentauthorized = ap_payment_authed;
            current_ap_session.begin();
        }
    @endif

    @if($setting->is_applepay_authorizenet == 1)
        /*
            Apple Pay intigration Authorize.net
        */
        // Function that sets up Apple Pay
        if (!window.ApplePaySession) {
            $('#applepaydiv').hide();
        }
        function setupApplePay() {
            if (!window.ApplePaySession) {
                throw new Error('This device does not support Apple Pay');
            }
            if (!ApplePaySession.canMakePayments()) {
                throw new Error('This device is not capable of making Apple Pay payments');
            }

            applepay = paypal.Applepay();
            applepay.config()
                .then(applepayConfig => {
                    if (applepayConfig.isEligible) {
                        document.getElementById("applepay-button-container").innerHTML =
                            '<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en" onclick="onApplePayButtonClicked()">';
                    }
                })
                .catch(applepayConfigError => {
                    throw new Error('Error while fetching Apple Pay configuration: ' + applepayConfigError);
                });
        }



        function onApplePayButtonClicked() {
            const paymentRequest = {
                countryCode: "US",
                merchantCapabilities: ["supports3DS"],
                supportedNetworks: ["visa", "masterCard", "amex", "discover"],
                currencyCode: "USD",
                requiredShippingContactFields: ["name", "phone", "email", "postalAddress"],
                requiredBillingContactFields: ["name", "phone", "email", "postalAddress"],
                total: {
                    label: "Partwarehouse.com",
                    type: "final",
                    amount: maintotal // Amount to be charged
                }
            };

            const session = new ApplePaySession(4, paymentRequest);
            session.begin();
            session.onvalidatemerchant = function(event) {
                fetchMerchantSession(event.validationURL)
                    .then(merchantSession => {
                        session.completeMerchantValidation(merchantSession);
                    })
                    .catch(error => {
                        console.error('Merchant validation failed:', error);
                        session.abort();
                    });
            };


            session.onpaymentauthorized = function(event) {
                const paymentToken = event.payment;
                var token = paymentToken.token.paymentData;

                var enc =  window.btoa(JSON.stringify(token));
                session.completePayment(ApplePaySession.STATUS_SUCCESS);

                $('#authorizenet_applepay_order_id').val(enc);

                $('#paypal_order_pay_amount').val(maintotal);

                $('.reviewOrderBtn').prop("disabled", true);
                checkoutOrderLog('{{ $cart_id }}', 'applepay_authorize', "{{ date('Y-m-d H:i') }}");
                $('#applepaypaypalemail').show();
                $('#applepaypaypalemail').text('Authorized Approved');
                // $('#googlepaypaypalemailtxt').val(authorization.payer.email_address);
                //  $('#paypaldiv').show();
                $('#paypal-button-container').hide();
                $('#qtyloader').show();
                $('#checkoutPaymentForm').submit();
            };


        }

        // Fetch the merchant session from your server
        async function fetchMerchantSession(validationURL) {
            const response = await fetch('/checkout/authorizenet-applepay-validurl', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ validationUrl: validationURL })
            });

            return await response.json();
        }

        // Process the payment with the payment token
        async function processPayment(token) {
            const response = await fetch('/checkout/create-authorizene-applepay-transaction', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ opaqueData: token })
            });

            return await response.json();
        }

        function base64EncodeBinary(str) {
            // Convert binary string to a Uint8Array
            const uint8Array = new TextEncoder().encode(str);
            // Convert each byte to binary and then to Base64
            let binary = '';
            uint8Array.forEach(byte => {
                binary += String.fromCharCode(byte);
            });
            return btoa(binary);
        }
    @endif

    @if($setting->is_google_pay == 1)
    /*
    Paypal Google Pay Intigration
    * Define the version of the Google Pay API referenced when creating your
    * configuration
    */
    const baseRequest = {
        apiVersion: 2,
        apiVersionMinor: 0,
    };
    let paymentsClient = null,
        allowedPaymentMethods = null,
        merchantInfo = null;
    /* Configure your site's support for payment methods supported by the Google Pay */
    function getGoogleIsReadyToPayRequest(allowedPaymentMethods) {
        return Object.assign({}, baseRequest, {
            allowedPaymentMethods: allowedPaymentMethods,
        });
    }
    /* Fetch Default Config from PayPal via PayPal SDK */
    async function getGooglePayConfig() {
        if (allowedPaymentMethods == null || merchantInfo == null) {
            const googlePayConfig = await paypal.Googlepay().config();
            allowedPaymentMethods = googlePayConfig.allowedPaymentMethods;
            merchantInfo = googlePayConfig.merchantInfo;
        }
        return {
            allowedPaymentMethods,
            merchantInfo,
        };
    }
    /* Configure support for the Google Pay API */
    async function getGooglePaymentDataRequest() {
        const paymentDataRequest = Object.assign({}, baseRequest);
        const {
            allowedPaymentMethods,
            merchantInfo
        } = await getGooglePayConfig();
        paymentDataRequest.allowedPaymentMethods = allowedPaymentMethods;
        paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
        paymentDataRequest.merchantInfo = merchantInfo;
        paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
        return paymentDataRequest;
    }

    function onPaymentAuthorized(paymentData) {
        return new Promise(function (resolve, reject) {
            processPayment(paymentData)
                .then(function (data) {

                    resolve({
                        transactionState: "SUCCESS"
                    });
                })
                .catch(function (errDetails) {
                    resolve({
                        transactionState: "ERROR"
                    });
                });
        });
    }

    function getGooglePaymentsClient() {
        if (paymentsClient === null) {
            paymentsClient = new google.payments.api.PaymentsClient({
                environment: "PRODUCTION",
                paymentDataCallbacks: {
                    onPaymentAuthorized: onPaymentAuthorized,
                },
            });
        }
        return paymentsClient;
    }
    async function onGooglePayLoaded() {
        try {
            const paymentsClient = getGooglePaymentsClient();

            // Get the allowed payment methods configuration
            const {
                allowedPaymentMethods
            } = await getGooglePayConfig();

            // Check if the user is ready to pay with the provided methods
            const isReadyToPayRequest = getGoogleIsReadyToPayRequest(allowedPaymentMethods);

            const response = await paymentsClient.isReadyToPay(isReadyToPayRequest);

            // If the user is ready to pay, display the Google Pay button
            if (response.result) {
                addGooglePayButton();
            }
        } catch (err) {
            // Log any errors that occur during the process
            console.error("Google Pay isReadyToPay check failed:", err);
        }
    }

    function addGooglePayButton() {
        const container = document.getElementById("googlepay-button-container");

        // Check if the button already exists to avoid appending multiple times
        if (!container.querySelector(".google-pay-button")) {
            const paymentsClient = getGooglePaymentsClient();

            // Create the Google Pay button
            const button = paymentsClient.createButton({
                onClick: onGooglePaymentButtonClicked,
            });

            // Add a class to identify the button
            button.classList.add("google-pay-button");

            // Append the button to the container
            container.appendChild(button);
        }
    }

    function getGoogleTransactionInfo() {
        return {

            countryCode: "US",
            currencyCode: "USD",
            totalPriceStatus: "FINAL",
            totalPrice: maintotal,
            totalPriceLabel: "Order Total",
        };
    }
    async function onGooglePaymentButtonClicked() {
        const paymentDataRequest = await getGooglePaymentDataRequest();
        paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
        const paymentsClient = getGooglePaymentsClient();
        paymentsClient.loadPaymentData(paymentDataRequest);
    }
    async function processPayment(paymentData) {
        try {
            const {
                currencyCode,
                totalPrice
            } = getGoogleTransactionInfo();
            const order = {
                "_token": "{{ csrf_token() }}",
                intent: "CAPTURE",
                purchase_units: [{
                    amount: {
                        currency_code: currencyCode,
                        value: totalPrice,
                    },
                }, ],
            };
            /* Create Order */
            const {
                id
            } = await fetch(`/checkout/google-order-create`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(order),
            }).then((res) => res.json());
            const {
                status
            } = await paypal.Googlepay().confirmOrder({
                orderId: id,
                paymentMethodData: paymentData.paymentMethodData,
            });
            console.log(status);
            if (status === "APPROVED") {
                /* Capture the Order */
                const order = {
                    "_token": "{{ csrf_token() }}",
                    "orderid": id
                };
                const captureResponse = await fetch(`/checkout/google-order-capture`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(order)
                });

                const responseData = await captureResponse.json();
                if (responseData.status == "COMPLETED") {
                    var authorizationID = id;
                    // $('#paypal_order_id').val(authorizationID);
                    $('#googlepay_order_id').val(authorizationID);

                    $('#paypal_order_pay_amount').val(responseData.purchase_units[0].payments.captures[0].amount.value);

                    $('.reviewOrderBtn').prop("disabled", true);
                    checkoutOrderLog('{{ $cart_id }}', 'googlepay_authorize', "{{ date('Y-m-d H:i') }}");
                    $('#googlepaypaypalemail').show();
                    $('#googlepaypaypalemail').text('Authorized Approved');
                    // $('#googlepaypaypalemailtxt').val(authorization.payer.email_address);
                    //  $('#paypaldiv').show();
                    $('#paypal-button-container').hide();
                    $('#checkoutPaymentForm').submit();
                    $('#qtyloader').show();
                    return {
                        transactionState: "SUCCESS"
                    };
                } else {
                    return {
                        transactionState: "ERROR"
                    };
                }

            } else {
                return {
                    transactionState: "ERROR"
                };
            }
        } catch (err) {
            console.log(err);
            Swal.fire({
                title: 'Payment Failed!',
                text: err.message,
                icon: 'error'
            });
            return {
                transactionState: "ERROR",
                error: {
                    message: err.message,
                },
            };
        }
    }
    @endif

    @if($setting->is_googlepay_authorizenet == 1)

    /*
    Authorize.net Google Pay Intigration
    * Define the version of the Google Pay API referenced when creating your
    * configuration
    */
    const baseRequest = {
        apiVersion: 2,
        apiVersionMinor: 0,
        environment: "PRODUCTION",
    };

    let paymentsClient = null;
    let allowedPaymentMethods = [
        {
            type: 'CARD',
            parameters: {
                allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
                allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]
            },
            tokenizationSpecification: {
                type: 'PAYMENT_GATEWAY',
                parameters: {
                    gateway: 'authorizenet', // Replace with your payment gateway name
                    gatewayMerchantId: '2617074' // Replace with your merchant ID
                }
            }
        }
    ];


    // Replace this with your actual total price
   // const maintotal = "1.00"; // Example total price

    function getGoogleIsReadyToPayRequest(allowedPaymentMethods) {
        return Object.assign({}, baseRequest, {
            allowedPaymentMethods: allowedPaymentMethods,
        });
    }

    async function getGooglePayConfig() {
        return {
            allowedPaymentMethods
        };
    }

    async function getGooglePaymentDataRequest() {
        const paymentDataRequest = Object.assign({}, baseRequest);
        const { allowedPaymentMethods, merchantInfo } = await getGooglePayConfig();
        paymentDataRequest.allowedPaymentMethods = allowedPaymentMethods;
        paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
        paymentDataRequest.merchantInfo = {
            merchantName: 'Partswarehouse.com',
            merchantId: 'BCR2DN4T2OXK7HQT'
        };
        // paymentDataRequest.merchantInfo = merchantInfo;
        paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];
        console.log(paymentDataRequest);
        return paymentDataRequest;
    }

    function onPaymentAuthorized(paymentData) {
        return new Promise((resolve, reject) => {
            processPayment(paymentData)
                .then(() => {
                    resolve({ transactionState: "SUCCESS" });
                })
                .catch((errDetails) => {
                    console.error("Payment Error:", errDetails);
                    resolve({ transactionState: "ERROR" });
                });
        });
    }

    function getGooglePaymentsClient() {
        if (paymentsClient === null) {
            paymentsClient = new google.payments.api.PaymentsClient({
                environment: "PRODUCTION", // Change to "TEST" for live
                paymentDataCallbacks: {
                    onPaymentAuthorized: onPaymentAuthorized,
                },
            });
        }
        return paymentsClient;
    }

    async function onGooglePayLoaded() {

        try {
            const paymentsClient = getGooglePaymentsClient();
            const { allowedPaymentMethods } = await getGooglePayConfig();
            const isReadyToPayRequest = getGoogleIsReadyToPayRequest(allowedPaymentMethods);
            const response = await paymentsClient.isReadyToPay(isReadyToPayRequest);

            if (response.result) {
                addGooglePayButton();
            }
        } catch (err) {
            console.error("Google Pay isReadyToPay check failed:", err);
        }
    }

    function addGooglePayButton() {

        const container = document.getElementById("googlepay-button-container");

        // Check if the button already exists to avoid appending multiple times
        if (!container.querySelector(".google-pay-button")) {
            const paymentsClient = getGooglePaymentsClient();

            // Create the Google Pay button
            const button = paymentsClient.createButton({
                onClick: onGooglePaymentButtonClicked,
            });

            // Add a class to identify the button
            button.classList.add("google-pay-button");

            // Append the button to the container
            container.appendChild(button);
        }


    }

    function getGoogleTransactionInfo() {
        return {
            countryCode: "US",
            currencyCode: "USD",
            totalPriceStatus: "FINAL",
            totalPrice: maintotal, // Ensure this is defined correctly
            totalPriceLabel: "Order Total",
        };
    }

    async function onGooglePaymentButtonClicked() {
        const paymentDataRequest = await getGooglePaymentDataRequest();
        paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
        const paymentsClient = getGooglePaymentsClient();
        paymentsClient.loadPaymentData(paymentDataRequest);
    }


    async function processPayment(paymentData) {
        try {
            let token = paymentData.paymentMethodData.tokenizationData.token;
            var enc = window.btoa(token);
            var authorizationID = enc;
            // $('#paypal_order_id').val(authorizationID);
            $('#authorizenet_googlepay_order_id').val(enc);

            $('#paypal_order_pay_amount').val(maintotal);

            $('.reviewOrderBtn').prop("disabled", true);
            checkoutOrderLog('{{ $cart_id }}', 'googlepay_authorize', "{{ date('Y-m-d H:i') }}");
            $('#googlepaypaypalemail').show();
            $('#googlepaypaypalemail').text('Authorized Approved');
            // $('#googlepaypaypalemailtxt').val(authorization.payer.email_address);
            //  $('#paypaldiv').show();
            $('#paypal-button-container').hide();
            $('#checkoutPaymentForm').submit();
            $('#qtyloader').show();

           // let token = paymentData.paymentMethodData.tokenizationData.token;
            //var enc = window.btoa(token);
           /* const order = {
                "_token": "{{ csrf_token() }}",
                opaqueData:enc,
                maintotal:maintotal
            };
            const captureResponse = await fetch(`/checkout/create-authorizene-googlepay-transaction`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(order),
            }).then(res => res.json());

            const responseData = await captureResponse.json();
            if (responseData.success == true) {
                var authorizationID = responseData.transactionId;
                // $('#paypal_order_id').val(authorizationID);
                $('#authorizenet_googlepay_order_id').val(authorizationID);

                $('#paypal_order_pay_amount').val(responseData.maintotal);

                $('.reviewOrderBtn').prop("disabled", true);
                checkoutOrderLog('{{ $cart_id }}', 'googlepay_authorize', "{{ date('Y-m-d H:i') }}");
                $('#googlepaypaypalemail').show();
                $('#googlepaypaypalemail').text('Authorized Approved');
                // $('#googlepaypaypalemailtxt').val(authorization.payer.email_address);
                //  $('#paypaldiv').show();
                $('#paypal-button-container').hide();
                $('#checkoutPaymentForm').submit();
                $('#qtyloader').show();
                return {
                    transactionState: "SUCCESS"
                };
            } else {
                return {
                    transactionState: "ERROR"
                };
            } */

            // Simulate order creation without a server call
            console.log("Processing payment:", paymentData);

            // Assuming a successful transaction for demo purposes
            console.log("Transaction successful!");



            return { transactionState: "SUCCESS" };
        } catch (err) {
            console.error("Payment Processing Error:", err);

            return {
                transactionState: "ERROR",
                error: {
                    message: err.message,
                },
            };
        }
    }
    @endif

  $(document).ready(function() {
    $('#checkoutPaymentForm').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        // Show the loader
        console.log($('#checkoutPaymentForm').valid());
        if($('#checkoutPaymentForm').valid()){
        //    $('#qtyloader').show();
        }
    });
});

function abandonedCartSavedConatctDetail(){
    var shippingfirstname = $('#shippingfirstname').val();
    var shippinglastname = $('#shippinglastname').val();
    var shippingemail = $('#shippingemail').val();
    var shippingcompany = $('#shippingcompany').val();
    var shippingphone = $('#shippingphone').val();

    $.ajax({
        type: 'POST',
        url: "{{ route('abandoned-cart-save-contact-details') }}",
        global: false,
        data: {"_token": "{{ csrf_token() }}",shippingfirstname:shippingfirstname,shippinglastname:shippinglastname,shippingemail:shippingemail,shippingcompany:shippingcompany,shippingphone:shippingphone},
        dataType: "json",
        success: function(resultData) {

         }
  });
}

@php
    $is_custom_merchant_type = 1;
    if(!empty(\Session::get('billingcountry')) && \Session::get('billingcountry') == 'United States'){
        $is_custom_merchant_type = $setting->domestic_payment_process;
    }else{
        $is_custom_merchant_type = $setting->international_payment_process;
    }

@endphp
@if($is_custom_merchant_type == 2)
    @if($setting->is_new_authorizenet_process == 1)

            // CommunicationHandler - REQUIRED for official Authorize.net iframe communicator
            window.CommunicationHandler = {
                onReceiveCommunication: function(data) {
                    try {
                        if (!data || !data.qstr) {
                            console.warn('Parent: Empty communication data');
                            return;
                        }

                        const params = new URLSearchParams(data.qstr);
                        const action = params.get('action');

                        console.log('Parent: Received action:', action);

                        if (action === 'resizeWindow') {
                            const width = params.get('width');
                            const height = params.get('height');
                            resizePaymentIframe(width, height);

                        } else if (action === 'cancel') {
                            handlePaymentCancel();

                        } else if (action === 'transactResponse') {
                            const response = params.get('response');
                            if (!response) {
                                console.error('Parent: Missing transaction response');
                                return;
                            }

                            const decodedResponse = decodeURIComponent(response);

                            // Check for incomplete or malformed JSON
                            if (!decodedResponse.trim().endsWith('}')) {
                                console.warn('Parent: Incomplete or malformed JSON response:', decodedResponse);
                                return;
                            }

                            let transactionData = null;
                            try {
                                transactionData = JSON.parse(decodedResponse);
                            } catch (err) {
                                console.error('Parent: JSON parse error:', err, decodedResponse);
                                return;
                            }

                            console.log('Parent: Transaction Data:', transactionData);
                            handleTransactionResponse(transactionData);
                        }
                    } catch (e) {
                        console.error('Parent: Error handling communication:', e);
                    }
                }
            };

            const paymentToken = "{{ $authorizeNetToken }}";
           function initializePayment() {
                try {
                    // Find iframe + loader
                    const iframe = document.getElementById('authorizenet-payment-iframe');
                    const loading = document.getElementById('authorizenet-loading');

                    if (!iframe || !loading) {
                        throw new Error('Required iframe or loader elements not found in DOM.');
                    }

                    // Show loader
                    loading.style.display = 'block';
                    iframe.style.display = 'none';

                    // Determine environment
                    @if($setting->authorizenet_mode == 1)
                        const isProduction = 0;
                    @else
                        const isProduction = 1;
                    @endif

                    const actionUrl = isProduction
                        ? 'https://accept.authorize.net/payment/payment'
                        : 'https://test.authorize.net/payment/payment';

                    // Step 1️⃣: Get token via AJAX



                            // Create form dynamically
                                const form = document.createElement('form');
                                form.method = 'POST';
                                form.action = actionUrl;
                                form.target = 'authorizenet-payment-iframe';
                                form.style.display = 'none'; // hidden form

                                // Add token input
                                const tokenInput = document.createElement('input');
                                tokenInput.type = 'hidden';
                                tokenInput.name = 'token';
                                tokenInput.value = paymentToken;
                                form.appendChild(tokenInput);

                                // Append to DOM before submitting
                                document.body.appendChild(form);

                                // Submit form
                                setTimeout(() => {
                                    try {
                                        form.submit();
                                        console.log('Authorize.Net form submitted successfully.');
                                    } catch (submitError) {
                                        console.error('Form submission failed:', submitError);
                                        loading.style.display = 'none';
                                        alert('Unable to load payment form. Please refresh and try again.');
                                    }
                                }, 500);

                                // Handle iframe events
                                iframe.onload = function () {
                                    loading.style.display = 'none';
                                    iframe.style.display = 'block';
                                    autoResizeAuthorizeIframe();
                                  
                                };

                                iframe.onerror = function () {
                                    loading.style.display = 'none';
                                    alert('Failed to load payment form. Please try again.');
                                };



                } catch (error) {
                    console.error('Error in initializePayment:', error);
                    const loading = document.getElementById('authorizenet-loading');
                    if (loading) loading.style.display = 'none';
                    alert('Unexpected error while initializing payment.');
                }
            }

            // Run after DOM ready
         //   window.addEventListener('load', initializePayment);

            function autoResizeAuthorizeIframe() {
                    const iframe = document.getElementById("authorizenet-payment-iframe");
                    const container = document.getElementById("authorizenet-container"); // your wrapper div

                    if (!iframe) return;

                    // If container exists → use its width
                    if (container) {
                        const containerWidth = container.offsetWidth;
                        iframe.style.width = containerWidth + "px";
                    } else {
                        // fallback
                        iframe.style.width = "100%";
                    }

                    // HEIGHT logic
                    try {
                        const doc = iframe.contentDocument || iframe.contentWindow.document;

                        const height = Math.max(
                            doc.body.scrollHeight,
                            doc.documentElement.scrollHeight,
                            250 // fallback
                        );

                        iframe.style.height = height + "px";
                    } catch (err) {
                        // Cross-domain → fallback
                        iframe.style.height = "250px";
                    }
                }


            function resizePaymentIframe(width, height) {
                const iframe = document.getElementById('authorizenet-payment-iframe');
                iframe.style.width = width + 'px';
                iframe.style.height = height + 'px';
            }

            function handlePaymentCancel() {

                setTimeout(() => {
                    window.location.href = '{{ route("authorize-net-cancel") }}';
                }, 2000);
            }

            function handleTransactionResponse(response) {


                try {
                    console.log(response);
                    const transactionData = (response);

                    console.log('Transaction Data:', transactionData);
                    const transId = transactionData.transId;
                    const responseCode = transactionData.responseCode;

                    if (transId && (responseCode == 1 || responseCode == 4)) {
                        if (!$('#checkoutPaymentForm').valid()) {

                            initializePayment();
                            return;
                        }else{

                             $('#qtyloader').show();

                            const cardBrand = transactionData.accountType || ''; // e.g., "Visa", "MasterCard"
                            const last4     = transactionData.accountNumber
                                ? transactionData.accountNumber.slice(-4)  // get last 4 digits safely
                                : '';
                            const cardType  = ''; // (if you’ll assign it later)

                            $('#authorizenet_card_order_id').val(transId);
                            $('#card_brand').val(cardBrand);
                            $('#card_last4').val(last4);
                            $('#cardType').val(cardType);

                            $('#checkoutPaymentForm').submit();

                        }
                        // Send to server to verify and store
                       // submitTransactionToServer(transactionData);
                    } else {
                        const errorMsg = transactionData.messages?.[0]?.description || transactionData.message || 'Unknown error';
                        if(errorMsg != 'Unknown error'){
                             showError('Payment failed: ' + errorMsg);
                        }

                    }
                } catch (e) {
                    console.log(e);
                    showError('Error processing payment response.'+e.message);
                }
            }

            function submitTransactionToServer(transactionData) {
                 if (!$('#checkoutPaymentForm').valid()) {
                    initializePayment();
                    return;
                 }
                fetch('{{ route("authorize-net-process-transaction") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        response: JSON.stringify(transactionData)
                    })
                })
                .then(response => response.json())
                .then(data => {

                    if (data.status === 'success') {
                        setTimeout(() => {
                            window.location.href = data.redirect_url;
                        }, 1500);
                    } else {
                        showError('Payment verification failed: ' + data.message);
                    }
                })
                .catch(error => {

                    // Fallback: redirect with transaction ID
                    if (transactionData.transId) {

                        setTimeout(() => {
                            window.location.href = '{{ route("authorize-net-success") }}?transId=' + transactionData.transId;
                        }, 1500);
                    } else {
                        showError('Error processing payment. Please contact support.');
                    }
                });
            }

            function showError(message) {
                $('#qtyloader').hide();
                Swal.fire({
                    icon: 'error',
                    title: "Payment couldn't be completed",
                    html: message,
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#d33',
                    allowOutsideClick: true,
                    allowEscapeKey: true
                });

            }


    @endif
@endif
</script>
@endsection