@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;
    }
    .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 shippingaddressdiv">
                <div class="card-body p-3">

                    <form action="{{ route('checkout-edit-address-v2',$id) }}" id="shippingForm" method="post">
                        @csrf



                    <div class="mt-3">
                        <h5 class="m-0 font-weight-600"> @if($id == 0) Add @else Edit @endif Address</h5>
                    </div>

                        <div class="row shippingFormRow">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" class="form-control"
                                        aria-describedby="country" onChange="getCountryWiseState(this.value)">
                                        @foreach ($countries as $c)
                                            @if(!empty($userAddress->country) && ($userAddress->country == $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="country-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="shippingfirstname">First Name</label>
                                    <input type="text" class="form-control" value="{{ (!empty($firstname) ? $firstname : '') }}" name="firstname" id="firstname"
                                        aria-describedby="firstname" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="lastname">Last Name</label>
                                    <input type="text" class="form-control" value="{{ (!empty($lastname) ? $lastname : '') }}" name="lastname" id="lastname"
                                        aria-describedby="lastname" placeholder="">
                                </div>
                            </div>

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

                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="streetadress2">Apt/Unit#</label>
                                    <input type="text" class="form-control" value="{{ (!empty($userAddress->street_app_unit) ? $userAddress->street_app_unit : '') }}" name="streetadress2" id="streetadress2"
                                        aria-describedby="streetadress2" placeholder="">
                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <input type="text" class="form-control" value="{{ (!empty($userAddress->city) ? $userAddress->city : '') }}" name="city" id="city"
                                        aria-describedby="city" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="state">State/Region</label>
                                    <select name="state" id="state" class="form-control"
                                        aria-describedby="state">
                                        <option value="" selected>State/Region</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="zipcode">Zip/Postal Code</label>
                                    <input type="text" class="form-control" value="{{ (!empty($userAddress->zip) ? $userAddress->zip : '') }}" name="zipcode" id="zipcode"
                                        aria-describedby="zipcode" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">Phone Number</label>
                                    <input type="text" class="form-control" value="{{ (!empty($userAddress->phone) ? $userAddress->phone : '') }}" name="phone" id="phone"
                                        aria-describedby="phone" placeholder="">
                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="form-check m-1">
                                    <input type="checkbox" name="is_primary" value="1" class="form-check-input" id="is_primary">
                                    <label class="form-check-label" for="is_primary" {{ (!empty($userAddress->is_primary) ? "checked" : '') }}>IS Primary</label>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-12 text-center">

                                <button type="submit"  class="btn btn-primary shippingOptionBtn" style="width: 17rem;font-size: 18px;padding: 10px;">@if($id == 0) Add @else Update @endif</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 id="subtotal">$22.00</b>
                        </div>
                    </div>
                    <div class="row mb-2 discountPriceDiv" style="display: none">
                        <div class="col-7 fs-6 text-success">
                            <b>Discount <span id="couponDiscountDiv"></span></b>
                        </div>
                        <div class="col-5 fs-6 text-end">
                            <b class="discountPrice text-success">$0.00</b>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6 fs-6">
                            <b>Estimated Shipping</b>
                        </div>
                        <div class="col-6 fs-6 text-end">
                            <b id="shippingEstPrice">$9.98</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 id="taxEst"><span style="color: #7d7d7d;">Calculated In Checkout</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-6 fs-6">
                            <b>Order Total</b>
                        </div>
                        <div class="col-6 fs-6 text-end">
                            <b id="total">$31.98</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();
        });
    });
    $("#country").on("select2:close", function (e) {
        $(this).valid();
    });
    $("#state").on("change", function (e) {
        $(this).valid();
    });
    $(document).ready(function() {

        $('#phone').inputmask("(999) 999-9999",{ "clearIncomplete": true});
        $('#subtotal').text('$' + $.session.get("subtotal"));
        $('#EstPrice').text('$' + $.session.get("shippingEstPrice"));
        $('#taxEst').text('$' + $.session.get("taxEst"));
        $('#total').text('$' + $.session.get("total"));
        discountPrice = $.session.get("discountPrice");
        if(discountPrice > 0){
            $('.discountPriceDiv').show();
            $('.discountPrice').text('- $'+discountPrice);
            //$('#couponDiscountDiv').text('(' + $.session.get("couponDiscount") + ')');
            $('#couponDiscountDiv').text('('+$.session.get("couponCode") +')');

        }else{
            $('.discountPriceDiv').hide();
        }


        $("#country").select2({
            placeholder: "Select a country"
        });
        @if(!empty($userAddress->country))
            getCountryWiseState("{{ $userAddress->country }}");
        @endif

        $('#shippingForm').validate({
            rules: {
                email: {
                    required: true
                },
                country: {
                    required: true
                },
                firstname: {
                    required: true
                },
                lastname: {
                    required: true
                },
                streetadress: {
                    required: true
                },
                city: {
                    required: true
                },
                state: {
                    required: true
                },
                zipcode: {
                    required: true
                },
                phone: {
                    required: true
                }
            },
            messages: {
                email: {
                    required: "Please enter email"
                },
                country: {
                    required: "Please select country"
                },
                firstname: {
                    required: "Please enter first name"
                },
                lastname: {
                    required: "Please enter last name"
                },
                streetadress: {
                    required: "Please enter street adress"
                },
                city: {
                    required: "Please enter city"
                },
                state: {
                    required: "Please enter state"
                },
                zipcode: {
                    required: "Please enter zipcode"
                },
                phone: {
                    required: "Please enter phone"
                }
            },
            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($userAddress->street_name))
            $("#shippingForm").validate().form();
        @endif
    });

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

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

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

                    });


                },
            });
    }

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

    function initAutocomplete() {



        address1Field = document.querySelector("#streetadress");
        address2Field = document.querySelector("#streetadress");
        postalField = document.querySelector("#zipcode");

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

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

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

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

    postalField.value = postcode;
    if($('#streetadress').val() != ""){
        $("#city").valid();
        $("#zipcode").valid();
    }
  }

</script>
@endsection