@extends('web.layout.master')

@section('content')
<style>


    @media (max-width: 766px) {

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

        .billingOptionMobile{
            display: block !important;
        }
        .billingOptionDesktop{
            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;
    }
    .billingFormRow>*{
        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;
    }

    .billingOptionMobile{
        display: none;
    }
    .billingOptionDesktop{
        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;
    }
    .valid{

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

    }
    .form-group{
        position: relative;
    }
</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 billingaddressdiv">
                <div class="card-body p-3">

                    <form action="{{ route('checkout-billing-save-v2') }}" id="billingForm" method="post">
                        <input type="hidden" name="prev_url" value="{{ $backurl }}">
                        @csrf




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

                        <div class="row billingFormRow">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="billingcountry">Country</label>
                                    <select name="billingcountry" id="billingcountry" class="form-control"
                                        aria-describedby="billingcountry" onChange="getCountryWiseState(this.value)">
                                        @foreach ($countries as $c)

                                            @if(!empty(\Session::get('billingcountry')) && (\Session::get('billingcountry') == $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="billingcountry-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-6">
                                <div class="form-group">
                                    <label for="billingfirstname">First Name</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingfirstname')) ? \Session::get('billingfirstname') : '') }}" name="billingfirstname" id="billingfirstname"
                                        aria-describedby="billingfirstname" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="billinglastname">Last Name</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billinglastname')) ? \Session::get('billinglastname') : '') }}" name="billinglastname" id="billinglastname"
                                        aria-describedby="billinglastname" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="billingcompany">Company</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingcompany')) ? \Session::get('billingcompany') : '') }}" name="billingcompany" id="billingcompany"
                                        aria-describedby="billingcompany" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="billingstreetadress">Street Address</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingstreetadress')) ? \Session::get('billingstreetadress') : '') }}" name="billingstreetadress" id="billingstreetadress"
                                        aria-describedby="billingstreetadress" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="billingstreetadress2">Apt/Unit#</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingstreetadress2')) ? \Session::get('billingstreetadress2') : '') }}" name="billingstreetadress2" id="billingstreetadress2"
                                        aria-describedby="billingstreetadress2" 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="billingcity">City</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingcity')) ? \Session::get('billingcity') : '') }}" name="billingcity" id="billingcity"
                                        aria-describedby="billingcity" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="billingstate">State/Region</label>
                                    <select name="billingstate" id="billingstate" value="{{ (!empty(\Session::get('billingstate')) ? \Session::get('billingstate') : '') }}" class="form-control"
                                        aria-describedby="billingstate">
                                        <option value="" selected>State/Region</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="billingzipcode">Zip/Postal Code</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingzipcode')) ? \Session::get('billingzipcode') : '') }}" name="billingzipcode" id="billingzipcode"
                                        aria-describedby="billingzipcode" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="billingphone">Phone Number</label>
                                    <input type="text" class="form-control" value="{{ (!empty(\Session::get('billingphone')) ? \Session::get('billingphone') : '') }}" name="billingphone" id="billingphone"
                                        aria-describedby="billingphone" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button type="submit" type="button" class="btn btn-success billingOptionMobile billingOptionBtn" style="width: 100%;font-size: 18px;padding: 10px;" disabled>Save</button>
                                <button type="submit" type="button" class="btn btn-primary billingOptionDesktop billingOptionBtn" style="width: 17rem;font-size: 18px;padding: 10px;" disabled>Save</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="card 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>Discount <span class="couponDiscountDiv">({{ session()->get('couponCode') }})</span></b>
                        </div>
                        <div class="col-6 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(',','',round(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! <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>

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

    $('.form-group input').each(function(){
        $(this).bind("change", function() {
            $(this).valid();
        });
    });
    $("#billingcountry").on("select2:close", function (e) {
        $(this).valid();
    });
    $("#billingstate").on("change", function (e) {
        $(this).valid();
    });

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

      function validateForm(id) {
        var valid = $(id).validate().checkForm();
          if (valid) {
            $('.billingOptionBtn').prop('disabled', false);
              $('.billingOptionBtn').removeClass('isDisabled');
          } else {
            $('.billingOptionBtn').prop('disabled', 'disabled');
            $('.billingOptionBtn').addClass('isDisabled');
          }
      }

    $(document).ready(function() {
        $('#billingphone').inputmask("(999) 999-9999",{ "clearIncomplete": true});

        $("#billingcountry").select2({
            placeholder: "Select a country"
        });
        $('#billingcountry').val('United States').change();

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

        $('#billingForm').validate({
            rules: {
                billingemail: {
                    required: true
                },
                billingcountry: {
                    required: true
                },
                billingfirstname: {
                    required: true,
                    noHtmlTags: true
                },
                billinglastname: {
                    required: true,
                    noHtmlTags: true
                },
                billingstreetadress: {
                    required: true
                },
                billingcity: {
                    required: true
                },
                billingstate: {
                    required: true
                },
                billingzipcode: {
                    required: true
                },
                billingphone: {
                    required: true
                },
                billingcompany:{
                    noHtmlTags: true
                }
            },
            messages: {
                billingemail: {
                    required: "Please enter email"
                },
                billingcountry: {
                    required: "Please select country"
                },
                billingfirstname: {
                    required: "Please enter first name",
                    noHtmlTags: "First name cannot contain HTML tags"
                },
                billinglastname: {
                    required: "Please enter last name",
                    noHtmlTags: "Last name cannot contain HTML tags"
                },
                billingstreetadress: {
                    required: "Please enter street adress"
                },
                billingcity: {
                    required: "Please enter city"
                },
                billingstate: {
                    required: "Please enter state"
                },
                billingzipcode: {
                    required: "Please enter zipcode"
                },
                billingphone: {
                    required: "Please enter phone"
                },
                billingcompany:{
                    noHtmlTags: "Company name cannot contain HTML tags"
                }
            },
            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) {
                form.submit();
            }
        });
        @if(!empty(\Session::get('billingstreetadress')))
            $("#billingForm").validate().form();
        @endif

    });

    function getCountryWiseState(val,state="") {
        @if(\Session::get('billingstate'))
        if(state != ""){
            state = state;
        }else{
            state = "{{ \Session::get('billingstate') }}";
        }
    @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) {
                    $('#billingstate').html('');
                    $('#billingstate').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){
                                    $('#billingstate').append('<option value="'+ value.state_code +'" selected>'+ value.name +'</option>');
                                }else{
                                    $('#billingstate').append('<option value="'+ value.state_code +'">'+ value.name +'</option>');
                                }
                            }else{
                                if(state == value.state_code){
                                    $('#billingstate').append('<option value="'+ value.name +'" selected>'+ value.name +'</option>');
                                }else{
                                    $('#billingstate').append('<option value="'+ value.name +'">'+ value.name +'</option>');
                                }
                            }
                            if(state){
                                $('#billingstate').valid();
                            }


                    });
                },
            });
    }



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

    function initAutocomplete() {



        address1Field = document.querySelector("#billingstreetadress");
        address2Field = document.querySelector("#billingstreetadress");
        postalField = document.querySelector("#billingzipcode");

        // 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("#billingcity").value = component.long_name;
          break;
        case "locality":
          document.querySelector("#billingcity").value = component.long_name;
          break;
        case "administrative_area_level_1": {
          state = component.short_name;

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

         // document.querySelector("#country").value = component.long_name;
          break;
      }
    }

    getCountryWiseState(country,state)
    $('#billingstreetadress').val(address2 + ' ' + address1);
   // $('#street_app_unit').val();

    postalField.value = postcode;
    if($('#billingstreetadress').val() != ""){
        $("#billingcity").valid();
        $("#billingzipcode").valid();
    }
  }

</script>
@endsection