@extends('components.view')


@section('themeStylesheet')
    <style>
        {{ $themeStylesheet }}
    </style>
@endsection


@section('brandThemeOverrideSettings')
    <style>
        {{ $brandThemeOverrideSettings }}
    </style>
@endsection


@section('brandBackground')
    @if($brandBackground!=='' && !empty($brandBackground))
        style="background-image:url('{{ $brandBackground }}');"
    @endif
@endsection



@section('header')
    @php echo \App\Http\Controllers\Header::index($themeDirectory,$brandLogoSmall) @endphp
    @php echo \App\Http\Controllers\Navigation::index($themeDirectory) @endphp
@endsection



@section('content')
    <div class="scrollable-content"
         x-data=""
         x-init="resizeForScrollableContent(),resizeForScrollableContentOnChange()">
        <div class="row m-0">

            <div class="col-12 text-center font-weight-bold mt-4 mb-2 view-heading">
                {{ \App\Http\Controllers\Translate::translate($heading) }}
            </div>
            <div class="col-12 text-center font-weight-bold mt-2 mb-4 view-subheading">
                {{ \App\Http\Controllers\Translate::translate($subheading) }}
            </div>

            <livewire:DeliveryAddressForm
                directory="{{ $directory }}"
            />

            <div class="row m-0 p-0">
                <div class="col-12 text-center">
                    <hr>
                </div>
            </div>

            @if(count($customerAddressesArr)>=1)
                <div class="row m-0 p-0">
                    <div class="col-12 text-center">
                        <h4>- {{ \App\Http\Controllers\Translate::translate('Saved Addresses') }} -</h4>
                    </div>
                </div>
                @foreach($customerAddressesArr as $customerAddress)
                <div class="row m-0 p-0">
                    <div class="col-12 text-center">
                        <livewire:CustomerAddress
                            :customerAddress="$customerAddress"
                        />
                    </div>
                </div>
                @endforeach
            @else
                <div class="row m-0 p-0">
                    <div class="col-12 text-center">
                        <h4>- {{ \App\Http\Controllers\Translate::translate('No Saved Addresses') }} -</h4>
                    </div>
                </div>
            @endif



        </div>

    </div>

    <script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&callback=initAutocomplete&libraries=places"></script>

    <script>

        $(document).ready(function() {
            $(window).keydown(function(event){ console.log(event.keyCode);
                if(event.keyCode === 13) {
                    event.preventDefault();
                    return false;
                }
            });
        });

        function initAutocomplete() {

            if($("#user_address2").val()!==""){
                $("#deliveryAddress__address2").show();
            }
            if($("#user_address_city").val()!==""){
                $("#deliveryAddress__city").show();
            }
            if($("#user_address_zip").val()!==""){
                $("#deliveryAddress__state_zip").show();
            }

            address1Field = document.querySelector("#user_address");
            address2Field = document.querySelector("#user_address2");
            postalField = document.querySelector("#user_address_zip");
            // 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", "ca"] },
                fields: ["address_components", "geometry", "place_id"],
                types: ["address"]
            });
            address1Field.focus();
            // When the user selects an address from the drop-down, populate the
            // address fields in the form.
            autocomplete.addListener("place_changed", fillInAddress);
        }


        function fillInAddress() {

            // Fill in Full Address
            var fullAddress = $("#user_address").val();
            $("#full_address").val(fullAddress);


            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address: fullAddress
            }, function(results, status){ console.log(results);
                if (status === 'OK') {
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();

                    // 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
                    $.each(results[0].address_components,function(i,component){
                        const componentType = component.types[0];

                        switch (componentType) {
                            case "street_number": {
                                address1 = component.long_name;
                                break;
                            }
                            case "route": {
                                address1 += ' '+component.short_name;
                                break;
                            }
                            case "postal_code": {
                                postcode = component.long_name;
                                break;
                            }
                            case "locality":
                                $("#user_address_city").val(component.long_name);
                                city = component.long_name;
                                break;
                            case "administrative_area_level_1": {
                                $("#user_address_state").val(component.short_name);
                                state = component.short_name;
                                break;
                            }
                        }
                    });

                    $("#user_address_google_place_id").val(results[0].place_id);
                    $("#user_address_lat").val(lat);
                    $("#user_address_lng").val(lng);

                    address1Field.value = address1;
                    postalField.value = postcode;
                    // After filling the form with address components from the Autocomplete
                    // prediction, set cursor focus on the second address line to encourage
                    // entry of subpremise information such as apartment, unit, or floor number.
                    address2Field.focus();


                }else{
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });




            // Get the place details from the autocomplete object.
            /*const place = autocomplete.getPlace();
            var address1 = "";
            var postcode = "";

            if(place.place_id===""){
                bootbox.alert({
                    title: '<i class="fas fa-exclamation-triangle mr-2" style="color:#ff4949;"></i> Hmmm..',
                    message: 'The address entered was not found by Google Maps. Please check the address and try again.'
                });
                return false;
            }

            console.log(place);

            // 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
            $.each(place.address_components,function(i,component){
                const componentType = component.types[0];

                switch (componentType) {
                    case "street_number": {
                        address1 = component.long_name;
                        break;
                    }
                    case "route": {
                        address1 += ' '+component.short_name;
                        break;
                    }
                    case "postal_code": {
                        postcode = component.long_name;
                        break;
                    }
                    case "locality":
                        $("#user_address_city").val(component.long_name);
                        city = component.long_name;
                        break;
                    case "administrative_area_level_1": {
                        $("#user_address_state").val(component.short_name);
                        state = component.short_name;
                        break;
                    }
                }
            });

            $("#deliveryAddress__address2").fadeIn();
            $("#deliveryAddress__city").fadeIn();
            $("#deliveryAddress__state_zip").fadeIn();
            $("#user_address_google_place_id").val(place.place_id);

            address1Field.value = address1;
            postalField.value = postcode;
            // After filling the form with address components from the Autocomplete
            // prediction, set cursor focus on the second address line to encourage
            // entry of subpremise information such as apartment, unit, or floor number.
            address2Field.focus();

            // Get Lat/Lng
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                address: address1+'+'+city+'+'+state+'+'+postcode
            }, function(results, status){ console.log(results);
                if (status === 'OK') {
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    $("#user_address_lat").val(lat);
                    $("#user_address_lng").val(lng);
                }else{
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });*/

        }
    </script>
@endsection



@section('footer')
    @php echo \App\Http\Controllers\DeliveryAddressFooter::index($themeDirectory) @endphp
@endsection