@extends('website.layout.master')
<style>
    #map {
        height: 100%;
    }
</style>
@section('content')
    <section class="bluebg">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-9 pt-5 abs">
                <h1 class="my-0 pb-3 text-center text-white">Find the right storage at the right price</h1>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-12 compare-form abs">
                <form id="visitor_search_1" action="{{ route('search_distance') }}" method="POST"
                    class="visitor-search form-inline has-validator" data-fv-no-icon="true">
                    @csrf
                    {{-- <div><input name="visitor_search_1-token" type="hidden" value="67082951762a97bbd7129a6.80820025"><input
                            name="visitor_search_1" type="hidden" value="1"></div> --}}
                    <fieldset>
                        <legend class="text-white text-center">Enter postcode or town</legend>
                        <div class="form-group" style="position: relative;"><input id="postcode" name="postcode"
                                type="text" class="corners-lt postcode form-control fv-group" placeholder="e.g. SW1A"
                                required="" data-fv-not-empty="" data-fv-not-empty___message="Please enter a value"
                                aria-label="e.g. SW1A" autocomplete="off">
                            <div class="test"><select id="distance" name="distance"
                                    class="bootstrap-select btn-white outline distance form-control">
                                    <option value="5">5 Miles</option>
                                    <option value="10">10 Miles</option>
                                    <option value="15">15 Miles</option>
                                    <option value="20">20 Miles</option>
                                </select></div>
                            <input type="hidden" name="langitude" id="langitude" value="">
                            <input type="hidden" name="latitude" id="latitude" value="">
                            <input type="hidden" name="address" id="address" value="">
                            <input type="hidden" name="postalcode" id="postalcode" value="">
                            <div class="form-group"><button type="submit" name="submit" id="submit" value="1"
                                    class="btn btn-orange compare outline corners-rb">Compare Now!</button></div>
                            <div class="pac-container"></div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </section>
    {{-- <header class="illy bg-image-full"><img src="{{ asset('./webassets/imgs/home-bg.JPG') }}"
            class="storage-illy img-fluid" alt="Responsive image">
    </header> --}}
    <section>
        <video width="100%" height="760px" loop="true" autoplay="autoplay" muted>
            <source src="{{ asset('./webassets/imgs/box-storage.mp4') }}" type="video/mp4">
            <source src="{{ asset('./webassets/imgs/box-storage.mp4') }}" type="video/ogg">
            Your browser does not support the video tag.
        </video>
    </section>
    <br>
    {{-- <section class="headroom py-5">
        <div class="container">
            <h1 class="mt-0 text-center">Find My Storage</h1>
            <div class="row mt-4">
                <div class="col-lg-6">
                    <p>Comparethestorage.com is the U.K’s #1 leading and only true independent self storage comparison
                        and directory site with self storage prices and listings for thousands of facilities nationwide.
                    </p>
                    <p>We list and compare self storage prices from all the best self storage brands and also
                        independent stores plus business and household storage or commercial storage units with
                        facilities also offering caravan and motorhome storage.</p>
                </div>
                <div class="col-lg-6">
                    <p>Our site is constantly updated each day from the facilities with current special offers and price
                        checks to ensure that you receive the best possible deals.</p>
                    <p>Using self storage is easy, you've started at the right place comparethestorage.com.</p>
                </div>
            </div>
        </div>
    </section> --}}
    {{-- <section class="green">
        <div class="container stores-form">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="card m-5"><a href="/space-estimator"><img class="card-img-top  lazyloaded"
                                alt="Storage Space Estimator" style="width: 100%;"
                                src="{{ asset('./webassets/imgs/Estimator.JPEG') }}"></a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="m-5">
                        <h1>Space Estimator</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                            aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                            totam amet accusantium optio voluptatem at?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                            aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                            totam amet accusantium optio voluptatem at?</p>
                    </div>
                    <a href="/space-estimator" class="btn btn-orange btn-block" style="width:100%;">Space Estimator</a>
                </div>
            </div>
        </div>
    </section>
    <br>
    <section class="green">
        <div class="container stores-form">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="card m-5"><a href="/space-estimator"><img class="card-img-top  lazyloaded"
                                alt="Storage Space Estimator" style="width: 100%;"
                                src="{{ asset('./webassets/imgs/postcode.JPEG') }}"></a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="m-5">
                        <h1>Find Your PostCode</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                            aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                            totam amet accusantium optio voluptatem at?</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                            aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                            totam amet accusantium optio voluptatem at?</p>
                    </div>
                    <a href="/space-estimator" class="btn btn-orange btn-block" style="width:100%;">Post Code</a>
                </div>
            </div>
        </div>
    </section> --}}
    <section class="py-5">
        <div class="container">
            <h1 class="mt-0 text-center">You can trust us</h1>
            <div class="row mt-4">
                <div class="col-lg-12 ml-md-auto">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                        aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                        totam amet accusantium optio voluptatem at?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur iusto maiores
                        aspernatur praesentium deserunt odio vitae minima assumenda corrupti cumque ut nulla, officia
                        totam amet accusantium optio voluptatem at?</p>
                </div>

            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA&libraries=places&callback=initMap"
        async="async" defer="defer"></script>

    <script>
        $('#submit').prop('disabled', true);

        function fetch_loca(address) {
            return fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + address +
                    '&key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA')
                .then(response => response.json())
                .then(data => {
                    var add = data.results[0];

                    // Converts numeric degrees to radians
                    return add;

                    // new google.maps.fitBounds(antennasCircle)
                })
        }

        var map;

        //Initialise la map
        function initMap() {
            // initialize the map variable
            console.log(navigator.geolocation, "asdfsad");
            navigator.geolocation.getCurrentPosition((lox) => {
                console.log(lox, "currentLcation")
                map = new google.maps.Map(document.getElementById('map'), {
                    scrollwheel: true,
                    mapTypeControl: false,
                    center: {
                        lat: parseInt(lox.coords.latitude),
                        lng: parseInt(lox.coords.longitude)
                    },
                    zoom: 20,
                    streetViewControl: false,
                    zoomControl: true
                });
            })
            const input = document.getElementById("postcode");
            // alert(input);
            var options = {
                componentRestrictions: {
                    country: 'uk'
                } //Turkey only
            };
            const searchBox = new google.maps.places.Autocomplete(input, options);
            var service = new google.maps.places.AutocompleteService()
            var placesService = new google.maps.places.PlacesService(map)
            // google.maps.places.ComponentRestrictions("uk")
            // console.log(searchBox)

            input.addEventListener("change", (e) => {
                // console.log(e.target.value);
                service.getPlacePredictions({
                    input: e.target.value,
                    componentRestrictions: {
                        country: 'uk'
                    },
                }, async (params) => {
                    // console.log(params);
                    if (Array.isArray(params) && params.length > 0) {
                        // console.log(params[0].description);
                        var data = await fetch_loca(params[0].description);
                        var postalcode = data.address_components.length;
                        // console.log(data.data.results);
                        // console.log(post);
                        // console.log();
                        
                        // $.ajax({
                            //     url: `https://maps.googleapis.com/maps/api/place/details/json?placeid=${data.place_id}&key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA`,
                            //     type: "GET",
                            //     success: function(response) {
                                //         console.log(response);
                                //     },
                                //     error: err => console.log(err)
                                // });
                        // console.log(data.lat,data.lng);

                        //   var lat = data.results[0].geometry.location.lat;
                        //   var lon = data.results[0].geometry.location.lng;
                        //   console.log(lat,lon);
                        $("#latitude").val(data.geometry.location.lat);
                        $("#langitude").val(data.geometry.location.lng);
                        $("#address").val(data.formatted_address);
                        $("#postalcode").val(data.address_components[postalcode -1].long_name);
                        $('#submit').prop('disabled', false);
                        //   $("input:text").val("Glenn Quagmire");
                        //   document.getElementById('latitude').value=lat;
                        //   document.getElementById('longitude').value=lon;

                    } else {
                        $('#submit').prop('disabled', true);
                        console.log(params);
                    }

                    // console.log(params[0].place_id);
                    // placesService.getDetails({
                    //     placeId: params[0].place_id
                    // }, (param2) => {
                    //     // console.log(param2);
                    // })
                })
                // console.log("searchBox", searchBox)
                // console.log($(".pac-container .pac-item:eq(0)"))
                // const places = searchBox.getPlace();

                // if (places.length == 0) {
                //     return;
                // }
                // console.log(places)
            })
            searchBox.addListener("place_changed", (e) => {
                // console.log(e, this);
                const places = searchBox.getPlace();

                if (places.length == 0) {
                    return;
                }
                console.log(places)
                console.log(places.geometry.location.lat(), places.geometry.location.lng())
                $("#latitude").val(places.geometry.location.lat(), places.geometry.location.lat());
                $("#langitude").val(places.geometry.location.lng());
                $('#submit').prop('disabled', false);
            })
        }

        function calcCrow(lat1, lon1, lat2, lon2) {
            var R = 6371e3; // km
            var dLat = deg2rad(lat2 - lat1);
            // console.log(dLat)
            // dLat = dLat.toRad();
            var dLon = deg2rad(lon2 - lon1);
            // dLon = dLon.toRad();
            var lat1 = deg2rad(lat1);
            // lat1 = lat1.toRad();
            var lat2 = deg2rad(lat2);
            // lat2 = lat2;

            var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2);
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            var d = R * c;
            return d;
        }

        function deg2rad(deg) {
            return deg * (Math.PI / 180)
        }



        function getCoordinates(address, latitude, longitude, radius) {
            fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + address +
                    '&key=AIzaSyDXjU5ipIQXdtLhqAjJjB3-s9FWcteb0XA')
                .then(response => response.json())
                .then(data => {
                    console.log(data);

                    // Converts numeric degrees to radians

                    const lattitude = data.results[0].geometry.location.lat;
                    const longittude = data.results[0].geometry.location.lng;
                    // console.log(latitude, longitude)
                    var rad = calcCrow(latitude, longitude, lattitude, longittude)
                    console.log(rad, '==>')
                    radius = radius * 1609.34;
                    if (radius > rad) {
                        new google.maps.Marker({
                            position: {
                                lat: lattitude,
                                lng: longittude
                            },
                            map,
                            title: address,
                        });
                    }
                    // new google.maps.fitBounds(antennasCircle)
                })
        }


        if ($("#visitor_search_2").length > 0) {

            // console.log('sda');
            $("#visitor_search_1").validate({
                rules: {
                    postcode: {
                        required: true,
                    },
                    miles: {
                        required: true,
                    },
                },
                messages: {
                    postcode_town: {
                        required: "Please enter postcode or town",
                    },
                    miles: {
                        required: "Please select miles",
                    },

                },
                submitHandler: function(form) {
                    //    var data = $(form);
                    //    console.log(data);
                    var postcode = $('#postcode').val();
                    var distance = $('#distance').val();
                    // console.log(postcode,distance);    

                    // alert('das');
                    // $.ajaxSetup({
                    // headers: {
                    // 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    // }
                    // });
                    // $('#submit').html('Please Wait...');
                    // $("#submit").attr("disabled", true);
                    $.ajax({
                        url: "{{ route('search_distance') }}",
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "data": {
                                'postcode': postcode,
                                'distance': distance
                            },
                        },
                        success: function(response) {
                            var latitude = Number(response.latitude);
                            var longitude = Number(response.longitude);
                            var radius = Number(response.redius);

                            // console.log(response.user);

                            // console.log({
                            //     lat: Number(response.latitude),
                            //     lng: Number(response.longitude),
                            //     radius: Number(response.redius)
                            // });
                            // $('#submit').html('Submit');
                            // $("#submit").attr("disabled", false);

                            if (response.status == true) {
                                var antennasCircle = new google.maps.Circle({
                                    strokeColor: "#FF0000",
                                    strokeOpacity: 0.8,
                                    strokeWeight: 2,
                                    fillColor: "transparent",
                                    fillOpacity: 0.35,
                                    map: map,
                                    center: {
                                        lat: Number(response.latitude),
                                        lng: Number(response.longitude)
                                    },
                                    radius: Number(response.redius) * 1609.34
                                });

                                map.fitBounds(antennasCircle.getBounds(), 0);
                                map.setZoom(map.getZoom() + 2)

                                $.each(response.users, function(key, index) {
                                    if (index.user_detail != null) {
                                        // address

                                        var address = index.user_detail.address_line_1 +
                                            '' + index.user_detail.address_line_2;



                                        getCoordinates(address, latitude, longitude,
                                            radius)




                                    }
                                });

                            }

                        }
                    });
                }
            })
        }
    </script>
@endpush