@extends('web.layout.master')

@section('content')
<style>


    @media (max-width: 766px) {

        .contPayBtnMobile{
            display: block !important;
        }
        .contPayBtnDesktop{
            display: none !important;
        }

        .shippingOptionMobile{
            display: block !important;
        }
        .shippingOptionDesktop{
            display: none !important;
        }

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

        .shipaddre-body{
            margin-bottom: 20px !important;
        }
    }

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

    .btn-success {
        background: #409b5e;
        border: 0px;
    }
    .shippingFormRow>*{
        padding: 10px;
    }
    input,select{
        border:1.2px solid #3A3A3A !important;
        margin-top: 5px;
        height: 38px;
     }
     .btn-primary {
        background: #04458f;
        border: 0px;
    }
    .contPayBtnMobile{
        display: none;
    }
    .contPayBtnDesktop{
        display: initial;
    }

    .shippingOptionMobile{
        display: none;
    }
    .shippingOptionDesktop{
        display: initial;
    }
    .shipaddre{
        border-radius: 10px 10px 0px 0px;
        border-bottom: 0px;
    }
    .shipaddre-body{
        padding-bottom: 0px !important;
        margin-bottom: 5px;
    }
    .custshipadd{
        margin-top: 0px;
        border-radius: 0px 0px 10px 10px;
        border-top: 0px;
    }
    .custshipadd-body{
        padding-top: 0px !important;
    }

    .radio-main .custom-radio01 input{
        top: 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;
    }


 /* 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);
  }

  .rotate { transform: rotate(180deg);transition: all 0.5s ease;}

</style>

@include('web.checkout-header-v2')

<div class="container mt-4 mb-2 custom-container">

    <div class="row">
        <div class="col-md-8">
            <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;" id="totalb">$0.00</p>
                        </div>

                    </div>
                    <div class="collapse mt-2" id="collapseTotal">
                        <div class="card-body p-1" id="cartItemMobile">
                            <div class="text-center">
                                <p>Loading....</p>
                            </div>
                        </div>

                        <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">$0.00</b>
                                    </div>
                                </div>

                                <div class="row mb-2 discountPriceDiv" @if(!empty(session()->get('discountPrice')) && 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">- ${{ (!empty(session()->get('discountPrice')) ? str_replace(',','',(session()->get('discountPrice'))) : "") }}</b>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-4 fs-6">
                                        <b>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-8 fs-6 text-end">
                                        <b class="shippingEst"><span style="color: #7d7d7d;">Provide Shipping Address</span></b>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-4 fs-6">
                                        <b>Tax</b>
                                    </div>
                                    <div class="col-8 fs-6 text-end">
                                        <b class="taxEst"><span style="color: #7d7d7d;">Provide Shipping Address</span></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-4 fs-6">
                                        <b>Order Total</b>
                                    </div>
                                    <div class="col-8 fs-6 text-end">
                                        <b class="total"><span style="color: #7d7d7d;">Provide Shipping Address</span></b>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-none-border shippingaddressdiv">
                <div class="card-body p-3">
                    @if(!auth()->check())
                    <div class="card card-body p-3 border-0" style="background: #f8f8f9">
                        <div class="row">
                            <div class="col-8 col-md-10">
                                <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-2 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>
                    @endif

                    <form action="{{ route('checkout-shipping-v2') }}" id="shippingForm" method="post">
                        @csrf
                        <input type="hidden" name="subtotal" id="subtotaltxt" value="0">
                        <input type="hidden" name="ShippingCharges" id="ShippingChargestxt" value="0">

                        <input type="hidden" name="total" id="totaltxt" value="0">
                        <input type="hidden" name="discountPrice" id="discountPricetxt" value="0">
                        <input type="hidden" name="couponDiscount" id="couponDiscounttxt" value="0">
                        <input type="hidden" name="couponCode" id="couponCodetxt" value="">


                    <div class="mt-3">
                        <h5 class="m-0 font-weight-600"> Shipping Address</h5>
                    </div>

                        <div class="row shippingFormRow">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="shippingcountry">Country</label>
                                    <select name="shippingcountry" id="shippingcountry" class="form-control"
                                        aria-describedby="shippingcountry" onChange="getCountryWiseState(this.value)">
                                        @foreach ($countries as $c)
                                            @if(!empty(\Session::get('shippingcountry')) && (\Session::get('shippingcountry') == $c->name))
                                                <option data-id="{{ $c->id }}" data-shortname="{{ $c->shortname }}" value="{{ $c->name }}" selected>{{ $c->name }}</option>
                                            @else
                                               <option data-id="{{ $c->id }}" data-shortname="{{ $c->shortname }}" value="{{ $c->name }}">{{ $c->name }}</option>
                                            @endif

                                        @endforeach
                                    </select>
                                    <span id="shippingcountry-error" class="error valid"><i class="fa fa-check"></i></span>
                                </div>
                            </div>
                            <div class="col-md-6 d-none d-lg-block">
                            </div>


                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="shippingstreetadress">Street Address</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('shippingstreetadress')) ? \Session::get('shippingstreetadress') : '') }}" name="shippingstreetadress" id="shippingstreetadress"
                                        aria-describedby="shippingstreetadress" placeholder="">
                                </div>

                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="shippingstreetadress2">Apt/Unit#</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('shippingstreetadress2')) ? \Session::get('shippingstreetadress2') : '') }}" name="shippingstreetadress2" id="shippingstreetadress2"
                                        aria-describedby="shippingstreetadress2" placeholder="">
                                </div>
                                <div class="form-check m-1">
                                    <input type="checkbox" name="po_box" class="form-check-input" id="po_box">
                                    <label class="form-check-label" for="po_box">PO BOX</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="shippingcity">City</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('shippingcity')) ? \Session::get('shippingcity') : '') }}" name="shippingcity" id="shippingcity"
                                        aria-describedby="shippingcity" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="shippingstate">State/Region</label>
                                    <select name="shippingstate" id="shippingstate" class="form-control"
                                        aria-describedby="shippingstate">
                                        <option value="" selected>State/Region</option>
                                    </select>

                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="shippingzipcode">Zip/Postal Code</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('shippingzipcode')) ? \Session::get('shippingzipcode') : '') }}" name="shippingzipcode" id="shippingzipcode"
                                        aria-describedby="shippingzipcode" placeholder="">


                                </div>
                                <span style="color: red;display: none;" id="shippingzipcodeerror">Invalid Zip Code</span>
                            </div>

                        </div>
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button type="submit" href="{{ route('checkout-shipping-method-v2') }}" type="button" class="btn btn-success shippingOptionMobile shippingOptionBtn" style="width: 100%;font-size: 18px;padding: 10px;">Calculate Shipping & Tax</button>
                                <button type="submit" href="{{ route('checkout-shipping-method-v2') }}" type="button" class="btn btn-success shippingOptionDesktop shippingOptionBtn" style="width: 17rem;font-size: 18px;padding: 10px;">Calculate Shipping & Tax</button>
                            </div>
                            <div class="col-12 text-center mt-3">

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

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

        </div>


        <div class="col-md-4 ">
            <div class="d-none d-lg-block">
                <div class="row">
                    <div class="col-md-6"><h5>ORDER SUMMARY</h5></div>

                </div>
            </div>
            <div class="card d-none d-lg-block mb-3">
                <div class="card-body p-3 d-none d-lg-block" id="cartItem">
                    <div class="text-center">
                        <p>Loading....</p>
                    </div>
                </div>
            </div>
            <div class="card d-none d-lg-block">
                <div class="card-body p-2 d-none d-lg-block">
                    <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 faicon1"></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()" 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">$22.00</b>
                        </div>
                    </div>
                    <div class="row mb-2 discountPriceDiv" @if(!empty(session()->get('discountPrice')) && 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">- ${{ (!empty(session()->get('discountPrice')) ? str_replace(',','',(session()->get('discountPrice'))) : "") }}</b>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-5 fs-6">
                            <b>Shipping</b>
                        </div>
                        <div class="col-7 fs-6 text-end">

                            <b id="shippingEstPrice"><span style="color: #7d7d7d;">Provide Shipping Address</span></b>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4 fs-6">
                            <b>Tax</b>
                        </div>
                        <div class="col-8 text-end">
                            <b id="taxEst"><span style="color: #7d7d7d;">Provide Shipping Address</span></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-4 fs-6">
                            <b>Order Total</b>
                        </div>
                        <div class="col-8 fs-6 text-end">

                            <b class="total"><span style="color: #7d7d7d;">Provide Shipping Address</span></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! <a href="tel:866.243.2721" class="text-decoration-none">866.243.2721</a> </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD49-9cDFYapIud25ZR0bqw8My06CM3zQg&libraries=places&v=weekly" defer></script>

<script>








$('#shippingzipcode').keyup(function () {
    $('#shippingzipcodeerror').hide();

});

    $(document)
    .ajaxStart(function () {
      $('#qtyloader').show();
    })
    .ajaxStop(function () {
      $('#qtyloader').hide();
    });
    var ispaysstatetax =  "{{ (auth()->check()) ? auth()->user()->paysstatetax : '' }}";
    $.session.set("ispaysstatetax",ispaysstatetax);
    function collapseContent(){
        $('#collapsePromoCode').collapse('toggle');
    }
    $('#collapsePromoCode').on('shown.bs.collapse', function () {
            $('.faicon1').addClass('rotate');
            $('.showorderlabel').text('Hide order summary');
     });

     $('#collapsePromoCode').on('hidden.bs.collapse', function () {
        $('.faicon1').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() {
       // $('#collapseTotal').collapse('toggle');
       $('#cartItemMobile').load('{{ route("checkout-item-list-v2") }}');
        @if (Session::has('alert-danger'))

            $('#shippingzipcode').focus();
            $('#shippingzipcodeerror').show();

        @endif

      //  $('#collapsePromoCode').collapse('toggle');


    });

    $('.form-group input').each(function(){
        $(this).bind("change", function() {
            $(this).valid();
            $('#shippingemail').valid();
        });

    });
    $("#shippingcountry").on("select2:close", function (e) {
        $(this).valid();


    });
    $("#shippingstate").on("change", function (e) {
        $(this).valid();


    });

   // $('#shippingemail,#shippingfirstname,#shippinglastname,#shippingphone').blur(function(){
    //    $('#qtyloader').hide();
     //   addAbandonedCart();
     // });
    //   function paypalBtnClick(){
    //     $('.paypal-button-number-0').trigger('click');
    //   }


    $('#shippingForm').on('blur keyup change', 'input', function(event) {
        validateForm('#shippingForm');
      });

      function validateForm(id) {
        var valid = $(id).validate().checkForm();

          if (valid) {
           // $('.shippingOptionBtn').prop('disabled', false);
            //  $('.shippingOptionBtn').removeClass('isDisabled');
          } else {
            //$('.shippingOptionBtn').prop('disabled', 'disabled');
            //$('.shippingOptionBtn').addClass('isDisabled');
          }
      }

      function removeCouponCodeError(){
        $('#couponError2').hide();
      }
      var iscouponinvalid = 0;
    $(document).ready(function() {


        $('#shippingphone').inputmask("(999) 999-9999",{ "clearIncomplete": true});
        $('.subtotal').text('$' + $.session.get("subtotal"));
        $('#totalb').text('$' + $.session.get("subtotal"));
        if($.session.get("couponCode")){
            $('#coupon_code').val($.session.get("couponCode"));
        }
        @if(!empty(session()->get('discountPrice')))
        discountPrice = "{{ session()->get('discountPrice') }}";
        $.session.set("discountPrice",discountPrice);
        @else
        discountPrice = 0;
        $.session.set("discountPrice",0);
        @endif

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

        if(discountPrice > 0){
            $('.discountPriceDiv').show();
            $('.discountPrice').text('- $'+discountPrice);
            $.session.set("couponCode",$('#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();
        }




        $("#shippingcountry").select2({
            placeholder: "Select a country"
        });
        @if(!empty(session()->get('shippingcountry')))
            $('#shippingcountry').val('{{ session()->get("shippingcountry") }}').change();
        @else
            $('#shippingcountry').val('United States').change();
        @endif


        $('#subtotaltxt').val($.session.get("subtotal"));



        $('#discountPricetxt').val(discountPrice);
        $('#couponCodetxt').val($.session.get("couponCode"));
        $('#couponDiscounttxt').val($.session.get("couponDiscount"));

        $('#shippingForm').validate({
            rules: {
                shippingcountry: {
                    required: true
                },
                shippingstreetadress: {
                    required: true
                },
                shippingcity: {
                    required: true
                },
                shippingstate: {
                    required: true
                },
                shippingzipcode: {
                    required: true
                }
            },
            messages: {
                shippingcountry: {
                    required: "Please select country"
                },
                shippingstreetadress: {
                    required: "Please enter street adress"
                },
                shippingcity: {
                    required: "Please enter city"
                },
                shippingstate: {
                    required: "Please enter state"
                },
                shippingzipcode: {
                    required: "Please enter zipcode"
                }
            },
            success: function(label,element) {
                label.addClass("valid");
                label.append("<i class='fa fa-check'></i>");

              },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                $(element).parents('.form-group').append(error)
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function (form) {
               // $('#qtyloader').attr('data-wordLoad','Loading shipping options');
               // $('#qtyloader').show();
                form.submit();
            }
        });

        @if(!empty(\Session::get('shippingstreetadress')))
            $("#shippingForm").validate().form();
        @endif

    });

    function getCountryWiseState(val,state="") {

        @if(\Session::get('shippingstate'))
            if(state == ""){
                state = "{{ \Session::get('shippingstate') }}";
            }
        @endif
        var country_name = val;
        if(country_name == "United States"){
             initAutocomplete();
         }else{
             disableGoogleAutocomplete();
         }

        $.ajax({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                url: "{{ route('shipping-countrywise-state') }}",
                dataType: "json",
                type: "GET",
                data: {
                    'Country_name': country_name
                },

                success: function(data) {
                    $('#shippingstate').html('');
                    $('#shippingstate').append($("<option selected value=''>State/Region</option>"));

                    var sflag = 0;
                    $.each(data, function(key, value) {
                            if(state == value.state_code){
                                sflag = 1;
                            }

                            if((country_name == "United States") || (country_name == "Canada")){
                                if(state == value.state_code){
                                    $('#shippingstate').append('<option value="'+ value.state_code +'" selected>'+ value.name +'</option>');
                                }else{
                                    $('#shippingstate').append('<option value="'+ value.state_code +'">'+ value.name +'</option>');
                                }

                            }else{
                                if(state == value.name){
                                    $('#shippingstate').append('<option value="'+ value.name +'" selected>'+ value.name +'</option>');
                                }else{
                                    $('#shippingstate').append('<option value="'+ value.name +'">'+ value.name +'</option>');
                                }

                            }

                    });
                    if(state){
                        $('#shippingstate').valid();
                        validateForm('#shippingForm');
                    }


                },
            });
    }

    let autocomplete;
    let address1Field;
    let address2Field;
    let postalField;
    var autocompleteListener;

    function initAutocomplete() {



        address1Field = document.querySelector("#shippingstreetadress");
        address2Field = document.querySelector("#shippingstreetadress");
        postalField = document.querySelector("#shippingzipcode");

        // Create the autocomplete object, restricting the search predictions to
        // addresses in the US and Canada.

            autocomplete = new google.maps.places.Autocomplete(address1Field, {
                componentRestrictions: { country: ["us"] },
                fields: ["address_components", "geometry",],
                types: ["address"],
              });



        // When the user selects an address from the drop-down, populate the
        // address fields in the form.
        autocompleteListener = google.maps.event.addListener(autocomplete,"place_changed", fillInAddress);


}

function disableGoogleAutocomplete() {
    if (autocomplete !== undefined) {
            google.maps.event.removeListener(autocompleteListener);
            google.maps.event.clearInstanceListeners(autocomplete);
            $(".pac-container").remove();

            console.log('disable autocomplete to GOOGLE');
     }
}


function fillInAddress() {

    // Get the place details from the autocomplete object.
    const place = autocomplete.getPlace();
    let address1 = "";
    let address2 = "";
    let postcode = "";
    let state = "";
    let country = "";

    // Get each component of the address from the place details,
    // and then fill-in the corresponding field on the form.
    // place.address_components are google.maps.GeocoderAddressComponent objects
    // which are documented at http://goo.gle/3l5i5Mr

    for (const component of place.address_components) {

      // @ts-ignore remove once typings fixed
      const componentType = component.types[0];

      switch (componentType) {
        case "street_number": {
          address2 = component.long_name;
          break;
        }

        case "route": {
          address1 = component.short_name;
          break;
        }

        case "postal_code": {
          postcode = `${component.long_name}${postcode}`;
          break;
        }

        case "postal_code_suffix": {
          postcode = `${postcode}-${component.long_name}`;
          break;
        }
        case "sublocality_level_1":
          document.querySelector("#shippingcity").value = component.long_name;
          break;
        case "locality":
          document.querySelector("#shippingcity").value = component.long_name;
          break;
        case "administrative_area_level_1": {
          state = component.short_name;

          break;
        }
        case "country":
          country = component.long_name;
       //   $('#shippingcountry').val(component.long_name).change();

         // document.querySelector("#country").value = component.long_name;
          break;
      }
    }
    $('#shippingzipcodeerror').hide();
    getCountryWiseState(country,state);

    $('#shippingstreetadress').val(address2 + ' ' + address1);
   // $('#street_app_unit').val();

    postalField.value = postcode;

    if($('#shippingstreetadress').val() != ""){
        $("#shippingcity").valid();
        $("#shippingzipcode").valid();
    }

  }

  var subtotal = $.session.get("subtotal");
  $.session.set("subtotal",parseFloat(subtotal).toFixed(2));
  var affectAmount = 0;
  var discountPrice = $.session.get("discountPrice");
  function totalcal(){


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

      var total = subtotal - discountPrice;
    $('#totalb').text(total);
      if(discountPrice > 0){
        $('.discountPriceDiv').show();
        $('.discountPrice').text('- $'+discountPrice);
        $.session.set("couponCode",$('#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();
    }
      total = parseFloat(total);







      $.session.set("shipping-option-value", $('.shipping-option:checked').next('label').clone().children().remove().end().text());


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

            $.session.set("subtotal",parseFloat(subtotal).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"));



      $('#couponCodetxt').val($.session.get("couponCode"));
      $('#couponDiscounttxt').val($.session.get("couponDiscount"));
     // $('#subtotaltxt').val($.session.get("subtotal"));
     // $('#ShippingChargestxt').val(ShippingCharges);
     // $('#ShippingTaxtxt').val(ShippingTax);
     // $('#totaltxt').val(total);
     // $('#discountPricetxt').val(discountPrice);
     // $('#ShippingSurchargestxt').val(ShippingSurcharges);

  }


  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;
    totalcal();

}

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


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

    var totalam = $.session.get("subtotal");
    $.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){
                $('#couponError2').hide();
                $('#couponError').show();
                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;
                totalcal();
                //checkoutOrderLog('{{ $cart_id }}', 'couponcode_applied', "{{ date('Y-m-d H:i') }}");
            }else{
                $('#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;
                totalcal();
                $('#coupon_code').attr('readonly', false);
                setTimeout(function() {
                    $('#couponError').hide();
                }, 4000);
            }
        }
    });

}



</script>
@endsection