@extends('layouts.estimationlayout')
@section('title')
{!! trans('valuation.page_title') !!}@stop
@section('description')
{!! trans('home.meta_desc') !!}@stop
@section('styles')
	<link rel="stylesheet preload" href="{{ url('/css/estimation_valuation.css') }}?v={{ env('ASSET_VERSION') }}" as="style" />
	
@endsection
@section('bodyClass', 'noscroll')
@section('content')

@include('popups.estimation_popup')

@include('popups.video_popup')
@stop
@section('scripts')
    
<script src="https://www.youtube.com/iframe_api"></script>   
<script async type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyASGuJdL2QoExIs5yBgswwGBQA-h-R2hkA&callback=initAddress" defer></script>
<script async type="text/javascript" src="{{ url('./js/estimation-valuation.min.js')}}?v={{ env('ASSET_VERSION') }}" defer></script>
<script>
    var shopAddress = [
        {
            address : "Avenue des Cerisiers",
            number: "02 736 67 92",
            city: 'Woluwe-Saint-Lambert',
            lat : 50.8457026,
            lng: 4.4171648,
            value: '',
        },
        {
            address : "Chaussée de Haecht",
            number: '02 733 76 26',
            city: 'Schaerbeek',
            lat : 50.8715658,
            lng: 4.394360800000001,
            value: '',
        }
    ]
    function initAddress() {
        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('estimate_street'), {
            componentRestrictions: { country: ["be"] },
            fields: ["address_components","geometry"],
            types: ['address']
        });

        autocomplete.addListener('place_changed', function(e) {
            $('#other_fields').addClass('hide')
            $('#other_fields').find('input').removeClass('valid').val('')
            $('#other_fields').parent().next('.form-btn').addClass('hide')
            var place = autocomplete.getPlace();
            if(place.geometry){
                shopAddress.map((item) => {
                    item.value = checkdistance(item, place);
                })
                if(parseFloat(shopAddress[0].value) > parseFloat(shopAddress[1].value)){
                    setHtml(shopAddress[1])
                }else{
                    setHtml(shopAddress[0])
                }
            }
            if(place.address_components){
                for (const component of place.address_components) {
                    const componentType = component.types[0];
                    $('#other_fields').removeClass('hide')
                    $('#other_fields').parent().next('.form-btn').removeClass('hide')
                    switch (componentType) {
                        case "street_number": {
                            $('#estimate_street_no').val(component.long_name).addClass('valid').removeClass('invalid')
                            break;
                        }

                        case "route": {
                            $('#estimate_street').val(component.long_name).addClass('valid').removeClass('invalid')
                            break;
                        }

                        case "postal_code": {
                            $('#estimate_postCode').val(component.long_name).addClass('valid').removeClass('invalid')
                            break;
                        }

                        case "locality": {
                            $('#estimate_city').val(component.long_name).addClass('valid').removeClass('invalid')
                            break;
                        }
                        
                    }
                }
            }
            
            return false;
        
        });
    }
    function setHtml(data){
        $('.nearest-address').html(`
            <h5>${data.address}</h5>
            <p>${data.city}
                <span><img src="{{url('images/call-icon.svg')}}">${data.number}</span>
            </p>`
        )
    }
    function checkdistance(item, place){
        var R = 6378137; // Earth’s mean radius in meter
        var dLat = rad(item.lat - place.geometry.location.lat());
        var dLong = rad(item.lng - place.geometry.location.lng());
        var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(rad(item.lat)) * Math.cos(rad(place.geometry.location.lat())) *
            Math.sin(dLong / 2) * Math.sin(dLong / 2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        var d = R * c;
        return d;
    }
    var rad = function(x) {
        return x * Math.PI / 180;
    };
</script>	
	
@stop