@extends('layouts.front')

@section('content')
    <style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        .infos {
            height: 10vh;
        }
        #map {
            height: 60vh;
        }
    </style>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <section class="container-fluid header-top">
        <div class="container">
            <div class="row text-white ">
                <div class="col-md-12 text-left">
                    <h1>MON BORNAGE</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Praesent cursus efficitur lectus sed finibus.<br/>Integer nec tristique felis, vel ornare leo.
                    </p>
                    <a class="btn btn-bornage-lgreen rounded-0">Besoin d'un devis ?</a>
                </div>

            </div>
        </div>
    </section>

    <section class="container-fluid appel-geometre">
        <div class="container">
            <div class="row">
            <div class="col-md-6">
                <div id="map"></div>
            </div>
            <div class="col-md-6">
            <h2 class="text-bornage-orange text-center">Demander un devis</h2>
                <form method="POST" action="{{ route('bornage') }}">
                    @csrf

                    <!-- <div class="form-group row">
                        <label for="name" class="col-md-2 col-form-label text-md-right">Info</label>

                        <div class="col-md-10">
                            <input id="name" type="text" class="form-control bg-bornage-lgrey text-bornage-dgrey border-0{{ $errors->has('info') ? ' is-invalid' : '' }}" name="info" value="{{ old('info') }}"  autofocus>

                            @if ($errors->has('info'))
                                <span class="invalid-feedback">
                                                <strong>{{ $errors->first('info') }}</strong>
                                            </span>
                            @endif
                        </div>
                    </div>-->
                    <div class="form-group row">
                        <label for="name" class="col-md-2 col-form-label text-md-right">Adresse</label>

                        <div class="col-md-10">
                            <div id="locationField">
                                <input id="autocomplete" placeholder="Enter your address"
                                       onFocus="geolocate()" type="text" class="form-control bg-bornage-lgrey text-bornage-dgrey border-0"/>
                            </div>

                            <table id="address">
                                <tr>
                                    <td class="label">Street address</td>
                                    <td class="slimField"><input class="field" id="street_number"
                                                                 disabled="true"></input></td>
                                    <td class="wideField" colspan="2"><input class="field" id="route"
                                                                             disabled="true"></input></td>
                                </tr>
                                <tr>
                                    <td class="label">City</td>
                                    <!-- Note: Selection of address components in this example is typical.
                                         You may need to adjust it for the locations relevant to your app. See
                                         https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
                                    -->
                                    <td class="wideField" colspan="3"><input class="field" id="locality"
                                                                             disabled="true"></input></td>
                                </tr>
                                <tr>
                                    <td class="label">State</td>
                                    <td class="slimField"><input class="field"
                                                                 id="administrative_area_level_1" disabled="true"></input></td>
                                    <td class="label">Zip code</td>
                                    <td class="wideField"><input class="field" id="postal_code"
                                                                 disabled="true"></input></td>
                                </tr>
                                <tr>
                                    <td class="label">Country</td>
                                    <td class="wideField" colspan="3"><input class="field"
                                                                             id="country" disabled="true"></input></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="form-group row">


                        <div class="col-md-12">
                            Nous avons détecté <span class="near-parcels" data-neighbours-count="0">0</span> parcelles dans votre voisinage, si ce nombre ne correspond pas à votre nombre réel de voisin, merci de préciser le nombre correct dans la case ci-dessous

                        </div>
                    </div>
                    <div class="form-group row">

                        <div class="col-md-4"><label for="neighbours">Nombre de voisins<br/> à contacter : </label> </div>
                        <div class="col-md-3">
                            {{ Form::text('neighbours', old('neighbours', 0), ['class' => 'form-control text-bornage-dgrey border-0' . ($errors->has('neighbours') ? ' is-invalid' : '') . ($inputBackgroundClass??''), 'required'=> true, 'data-neighbours-count'=>0]) }}
                            @if ($errors->has('neighbours'))
                                <span class="invalid-feedback">
                                                <strong>{{ $errors->first('neighbours') }}</strong>
                                            </span>
                            @endif

                        </div>
                    </div>
                        <div class="form-group row">

                        <div class="col-md-4"><label for="neighbours">Type d'entourage: </label> </div>
                        <div class="col-md-3">
                            {{ Form::select('type_entourage', $tarificationFields['bornage']['type_entourage']['inputs'],old('type_entourage'), ['class' => 'form-control text-bornage-dgrey border-0' . ($errors->has('type_entourage') ? ' is-invalid' : '') . ($inputBackgroundClass??''), 'required'=> true]) }}
                            @if ($errors->has('type_entourage'))
                                <span class="invalid-feedback">
                                                <strong>{{ $errors->first('type_entourage') }}</strong>
                                            </span>
                            @endif

                        </div>
                    </div>
                    <div class="form-group row">

                        <div class="col-md-4"><label for="neighbours">Nombre de voisins <br/> (visible pour les test): </label> </div>
                        <div class="col-md-3">
                            {{ Form::text('totalNeighbours', old('neighbours', 0), ['class' => 'form-control text-bornage-dgrey border-0' . ($errors->has('totalNeighbours') ? ' is-invalid' : '') . ($inputBackgroundClass??''), 'required'=> true, 'data-total-neighbours-count'=>0]) }}
                            @if ($errors->has('totalNeighbours'))
                                <span class="invalid-feedback">
                                                <strong>{{ $errors->first('totalNeighbours') }}</strong>
                                            </span>
                            @endif

                        </div>
                    </div>

                    <div class="form-group row">

                        <div class="col-md-4"><label for="neighbours">Metre linéaire <br/>(visible pour test): </label> </div>
                        <div class="col-md-3">
                            {{ Form::text('ml_entourage', old('ml_entourage', 0), ['class' => 'form-control text-bornage-dgrey border-0' . ($errors->has('ml_entourage') ? ' is-invalid' : '') . ($inputBackgroundClass??''), 'required'=> true, 'data-distance' => 0]) }}
                            @if ($errors->has('ml_entourage'))
                                <span class="invalid-feedback">
                                                <strong>{{ $errors->first('ml_entourage') }}</strong>
                                            </span>
                            @endif

                        </div>
                    </div>

                    <div class="form-group row mb-5">
                        <button type="submit" class="btn col-md-6 offset-md-3 btn-bornage-orange text-white text-hide">
                            Soumettre le devis
                        </button>
                    </div>
                </form>
            </div>
            </div>
        </div>

    </section>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6ENZDKeb6y9kyLh14ksPuCe1L6iEqGME&callback=initMap&libraries=geometry,places">
    </script>

    <script>

      function CenterValidControl(controlDiv, map) {

        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = '#F5951E';
        //controlUI.style.border = '2px solid #d67b0a';
        controlUI.style.borderRadius = '3px';
        //controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '22px';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Valider la selection';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = 'rgb(255,255,255)';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '0.9rem';
        controlText.style.lineHeight = '38px';
        controlText.style.paddingLeft = '15px';
        controlText.style.paddingRight = '15px';
        controlText.innerHTML = 'Valider la selection';
        controlUI.appendChild(controlText);

        // Setup the click event listeners: simply set the map to Chicago.
        controlUI.addEventListener('click', function() {

          var parcelPoly = [];

          for (var i = 0; i < parcelDataStorage.point.length; i++) {
            parcelPoly.push([parcelDataStorage.point[i].lng, parcelDataStorage.point[i].lat])
          }
          console.log(parcelPoly)
          var poly1 = turf.polygon([parcelPoly]);
          console.log('parcel area', turf.area(poly1))


          var points = []
          var selection = []
          for(var i = 0; i < selectedPoints.length; i++) {
            points.push({lat:selectedPoints[i].lat, lng: selectedPoints[i].lng})
            selection.push([selectedPoints[i].lng, selectedPoints[i].lat])
          }


          /** creation de la ligne pour trouver les voisin */
          var data = new FormData();
          console.log(selectedPoints)
          var points = []
          for(var i = 0; i < selectedPoints.length; i++) {
            points.push({lat:selectedPoints[i].lat, lng: selectedPoints[i].lng})
          }
          /** fin de creation de la ligne pour trouver les voisin */


          selection[selection.length] = selection[0]
          selectedPoints[selectedPoints.length] = selectedPoints[0]

          data.append( "points", JSON.stringify( points ) );

          console.log(data)
          fetch('/getNearWithLine',{
            headers: {

              "X-Requested-With": "XMLHttpRequest",
              "X-CSRF-Token": "{{csrf_token()}}"
            },
            method: "POST",
            body: data,
            credentials: "same-origin",
          })
            .then(function(response) {
              return response.json();
            }).then(function (parcelData) {
            console.log(parcelData);
            BornageUtils.setDataInfos('neighbours-count',parcelData.nears.length - 1);
            for(var i= 0; i < parcelData.nears.length; i++){
              drawElements.push(BornageUtils.drawPolygon(map, parcelData.nears[i], {color:'#1673ff'}))
            }

          })
        });

      }


      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
          {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();


        console.log(place)
        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
        map.setCenter({lat: place.geometry.location.lat(), lng: place.geometry.location.lng()})
        map.setZoom(20)
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }


      // This example creates a simple polygon representing the Bermuda Triangle.

      var parcelDataStorage = false;
      var selectedPoint = false;
      var selectedPoints = [];
      var map;
      var centerControlDiv = document.createElement('div');
      var centerControl
      var bornageLine
      var drawElements = []
      var selectedBornagePolygon;

      //var response = {"point":[{"lat":49.4404548,"lng":1.1465392},{"lat":49.4404572,"lng":1.1464821},{"lat":49.4404593,"lng":1.1463983},{"lat":49.4404235,"lng":1.1463994},{"lat":49.4404262,"lng":1.1465106},{"lat":49.440418,"lng":1.1465104},{"lat":49.4403986,"lng":1.1465103},{"lat":49.4403987,"lng":1.1465317},{"lat":49.4403911,"lng":1.1465827},{"lat":49.440413,"lng":1.1465864},{"lat":49.4404539,"lng":1.1465936},{"lat":49.4404548,"lng":1.1465392}],"nears":[[{"lat":49.4405732,"lng":1.146534},{"lat":49.4405692,"lng":1.1463915},{"lat":49.4405689,"lng":1.1463917},{"lat":49.4404593,"lng":1.1463983},{"lat":49.4404572,"lng":1.1464821},{"lat":49.4404548,"lng":1.1465392},{"lat":49.4405732,"lng":1.146534}],[{"lat":49.4403517,"lng":1.1466155},{"lat":49.4403847,"lng":1.1466275},{"lat":49.4403911,"lng":1.1465827},{"lat":49.4403987,"lng":1.1465317},{"lat":49.4403986,"lng":1.1465103},{"lat":49.440418,"lng":1.1465104},{"lat":49.4404262,"lng":1.1465106},{"lat":49.4404235,"lng":1.1463994},{"lat":49.4403559,"lng":1.1464054},{"lat":49.4403612,"lng":1.1465118},{"lat":49.4403623,"lng":1.146533},{"lat":49.4403517,"lng":1.1466155}],[{"lat":49.4405855,"lng":1.1465337},{"lat":49.4405732,"lng":1.146534},{"lat":49.4404548,"lng":1.1465392},{"lat":49.4404539,"lng":1.1465936},{"lat":49.4404532,"lng":1.1466209},{"lat":49.4404486,"lng":1.1466754},{"lat":49.4404441,"lng":1.1467255},{"lat":49.4404147,"lng":1.1467858},{"lat":49.4403986,"lng":1.1468421},{"lat":49.4403967,"lng":1.1468497},{"lat":49.4405451,"lng":1.1469864},{"lat":49.4405702,"lng":1.1469253},{"lat":49.4405764,"lng":1.1468955},{"lat":49.4405804,"lng":1.1468752},{"lat":49.4405834,"lng":1.1468442},{"lat":49.4405617,"lng":1.1468165},{"lat":49.4405686,"lng":1.1467139},{"lat":49.4405655,"lng":1.1466522},{"lat":49.4405728,"lng":1.146651},{"lat":49.4405868,"lng":1.1466088},{"lat":49.4405855,"lng":1.1465337}],[{"lat":49.4403074,"lng":1.1466019},{"lat":49.4402999,"lng":1.1466573},{"lat":49.4404059,"lng":1.1466846},{"lat":49.4404077,"lng":1.1466665},{"lat":49.4404486,"lng":1.1466754},{"lat":49.4404532,"lng":1.1466209},{"lat":49.4404539,"lng":1.1465936},{"lat":49.440413,"lng":1.1465864},{"lat":49.4403911,"lng":1.1465827},{"lat":49.4403847,"lng":1.1466275},{"lat":49.4403517,"lng":1.1466155},{"lat":49.4403074,"lng":1.1466019}]]}
      var parcelPoints;


      var lastSelectedPointIndex;
/*
      function findDistance(point, parcelData) {

      }
      function findIndex(parcelData, circle) {
        for(var circlePointIndex=0; circlePointIndex < parcelData.point.length -1; circlePointIndex++){

          //console.log( point, point.circle)
          //console.log(index)

          if(parcelData.point[circlePointIndex].circle == circle) {
            break;
          }
        }
        return circlePointIndex;
      }*/


      function setParcelOnMap(parcelData) {
        selectedPoints = []

        BornageUtils.setDataInfos('total-neighbours-count',parcelData.nears.length);


        for(var i= 0; i < parcelData.nears.length; i++){
          drawElements.push(BornageUtils.drawPolygon(map, parcelData.nears[i], {color:'#50ff8a', clickable: true}))
        }
        var parcelPoly = BornageUtils.drawPolygon(map, parcelData.point, {color:'#FF0000', clickable: true})
        drawElements.push(parcelPoly);
        parcelPoints = parcelData.point;

        map.fitBounds(parcelPoly.getBounds());

        parcelData.point.map(function (point, index) {

          point.clicked = false;
          point.index = index
          var circle = BornageUtils.drawCircle(map, point, '#878787', 0, '#76f086');
          drawElements.push(circle);
          point.circle = circle

          circle.addListener('click', function (event) {
            circleClick(this, parcelData, point, event)
          });


        })
        console.log('draw elements', drawElements);



        /*parcelPoly.addListener('mousemove', function(event) {
          var point = turf.point([event.latLng.lng(), event.latLng.lat()]);
        });*/


        //var poly = turf.polygon([[[0,29],[3.5,29],[2.5,32],[0,29]]]);
        var poly = parcelData.point.map(function (point) {
          return [point.lng, point.lat]
        })
        /*
        var scaledPoly = turf.transformScale(turf.polygon([poly]), 1.5);
        console.log(scaledPoly);
        BornageUtils.drawPolygon(map, scaledPoly.geometry.coordinates[0].map(function (point) {
          return {lat:point[1], lng: point[0]}
        }), '#436cff')
        */


      }
/*
      function BornageUtils.drawPolygon(map, points, color) {
        bermudaTriangle = new google.maps.Polygon({
          paths: points,
          strokeColor: color,
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: color,
          fillOpacity: 0.35,
          zIndex: 1
        });
        bermudaTriangle.setMap(map)
        return bermudaTriangle;
      }
      function BornageUtils.drawCircle(map, point, color, fill, fillColor) {
        var circle = new google.maps.Circle({
          center: point,
          strokeColor: color,
          strokeOpacity: 1,
          strokeWeight: 2,
          fillColor: fillColor,
          fillOpacity: (fill) ? 1 : 0,
          radius: 0.5,
          zIndex: 999
        });
        circle.setMap(map)
        return circle;
      }*/
      function circleClick(thisCircle, parcelData, point, event) {
        var circlePointIndex = point.index
        /*for(var circlePointIndex=0; circlePointIndex < parcelData.point.length -1; circlePointIndex++){

          //console.log( point, point.circle)
          //console.log(index)

          if(parcelData.point[circlePointIndex].circle == circle) {
            point.index = circlePointIndex;
            break;
          }
        }*/


        if(!point.clicked) {
          point.clicked = true;


          if(selectedPoints.length == 0) {
            selectedPoints.push(parcelData.point[circlePointIndex])
            lastSelectedPointIndex = circlePointIndex
            console.log('first point selected')
          } else if(circlePointIndex == selectedPoints[selectedPoints.length -1].index +1) {
            //if(circlePointIndex > selectedPoints[0].index) {
            selectedPoints.push(parcelData.point[circlePointIndex])
            console.log('add to last point')
            //} else {

            //}

          } else if(circlePointIndex == selectedPoints[0].index -1) {
            selectedPoints.unshift(parcelData.point[circlePointIndex])
            console.log('add to start')
          } else {

            var offset = circlePointIndex;
            var distanceAsc = 0;
            var distanceDesc = 0;

            //console.log('taille du tableau'  + parcelData.point.length)

            for (var i = 0; i < parcelData.point.length; i++) {
              var pointer = (i + selectedPoints[selectedPoints.length - 1].index) % parcelData.point.length;
              // parcelData.point[pointer].circle.setOptions({'fillOpacity': 0.7})
              var nextIndex = (parcelData.point[pointer + 1] == undefined) ? 0 : pointer + 1
              distanceAsc += turf.distance(turf.point([parcelData.point[pointer].lng, parcelData.point[pointer].lat]), turf.point([parcelData.point[nextIndex].lng, parcelData.point[nextIndex].lat]))

              if (pointer == circlePointIndex) {
                console.log('block on point')
                break;
              }
            }


            for (indexDesc = parcelData.point.length - 1; indexDesc > 0; indexDesc--) {
              pointer = (indexDesc + selectedPoints[0].index) % parcelData.point.length;
              //parcelData.point[pointer].circle.setOptions({'fillOpacity': 0.4})
              nextIndex = (parcelData.point[pointer - 1] == undefined) ? 0 : pointer - 1
              console.log('ponter: ' + pointer)
              distanceDesc += turf.distance(turf.point([parcelData.point[pointer].lng, parcelData.point[pointer].lat]), turf.point([parcelData.point[nextIndex].lng, parcelData.point[nextIndex].lat]))

              if (pointer == circlePointIndex) {
                console.log('block on point')
                break;
              }
            }
            console.log(distanceAsc + '<'+ distanceDesc)
            if (distanceAsc < distanceDesc) {
              var ascStartIndex = selectedPoints[selectedPoints.length - 1].index;
              for (var i = 0; i < parcelData.point.length; i++) {
                pointer = (i + ascStartIndex) % parcelData.point.length;
                parcelData.point[pointer].clicked = true;
                console.log(1 * (pointer / parcelData.point.length))
                parcelData.point[pointer].circle.setOptions({
                  //fillOpacity: (1 * (pointer / parcelData.point.length) )* 2,
                  fillOpacity: 1,
                  fillColor: "#000"
                })

                selectedPoints.push(parcelData.point[pointer])

                if (pointer == circlePointIndex) {
                  console.log('block on point')
                  break;
                }
              }

            } else {
              var descStartIndex = selectedPoints[0].index;
              for (indexDesc = parcelData.point.length - 1; indexDesc > 0; indexDesc--) {
                pointer = (indexDesc + descStartIndex) % parcelData.point.length;
                selectedPoints.unshift(parcelData.point[pointer])
                parcelData.point[pointer].clicked = true;
                parcelData.point[pointer].circle.setOptions({
                  fillOpacity: 1,
                  fillColor: "#df1c41"
                })

                if (pointer == circlePointIndex) {
                  console.log('block on point')
                  break;
                }
              }

            }
          }
          /*
          console.log(selectedPoints[selectedPoints.length -1].index )
          console.log(parcelData.point.length)
          for( var i=0; i < parcelData.point.length; i--) {
            var pointer = (i + selectedPoints[0].index) % parcelData.point.length;
            console.log('neg pointer' + pointer);
            parcelData.point[pointer].circle.setOptions({'fillOpacity': 0.2})
            var prevIndex = (parcelData.point[pointer -1] == undefined) ? parcelData.point.length -1 : pointer-1
            distanceDesc += turf.distance(turf.point([parcelData.point[pointer].lng, parcelData.point[pointer].lat]), turf.point([parcelData.point[prevIndex].lng, parcelData.point[prevIndex].lat]))
            if(pointer == circlePointIndex) {
              console.log('block on point')
              break;
            }

          }
*/

        } else {
          alert('point already clicked')
        }

        lastSelectedPointIndex = circlePointIndex;
        console.log(selectedPoints)
        //selectedPoints.push(circle.getCenter());

        thisCircle.setOptions({
          fillOpacity: 1,
        })


        /** Calcul distance metrage **/

        var distance = 0;
        for (var pointIndex = 1; pointIndex < selectedPoints.length; pointIndex++) {
          //parcelData.point[pointer].circle.setOptions({'fillOpacity': 0.4})
            distance += turf.distance(turf.point([selectedPoints[pointIndex].lng, selectedPoints[pointIndex].lat]), turf.point([selectedPoints[pointIndex - 1].lng, selectedPoints[pointIndex - 1].lat]))
        }
        BornageUtils.setDataInfos('distance', Math.round(distance * 1000 * 100) / 100)

        /** Fin calcul **/
        bornageLine = new google.maps.Polyline({
          path: selectedPoints,
          geodesic: true,
          strokeColor: '#0034ff',
          strokeOpacity: 1.0,
          strokeWeight: 3,
          zIndex: 998
        });

        bornageLine.setMap(map);

        if(selectedPoints.length > 1) {
          centerControlDiv.style.opacity = 1;
        }


      }
      function initMap() {
        initAutocomplete();
        google.maps.Polygon.prototype.getBounds = function() {
          var bounds = new google.maps.LatLngBounds();
          var paths = this.getPaths();
          var path;
          for (var i = 0; i < paths.getLength(); i++) {
            path = paths.getAt(i);
            for (var ii = 0; ii < path.getLength(); ii++) {
              bounds.extend(path.getAt(ii));
            }
          }
          return bounds;
        }
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lng:2.43896484375, lat:46.52863469527167},
          mapTypeId: 'satellite',
          tilt: 0,
          rotateControl: false,
          streetViewControl: false,
        });


        // Create the DIV to hold the control and call the CenterControl()
        // constructor passing in this DIV.
        centerControl = new  CenterValidControl(centerControlDiv, map);
        centerControlDiv.style.opacity = 0;

        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);

        // Define the LatLng coordinates for the polygon's path.


        // Construct the polygon.
        var bermudaTriangle
        //var aire = google.maps.geometry.spherical.computeArea(bermudaTriangle.getPath());
        //console.log(aire );
        /*
                        let coords =


                          [{"lat":49.4404548,"lng":1.1465392},{"lat":49.4404571,"lng":1.1464821},{"lat":49.4404594,"lng":1.1463983},{"lat":49.4404235,"lng":1.1463995},{"lat":49.4404262,"lng":1.1465106},{"lat":49.440418,"lng":1.1465104},{"lat":49.4403986,"lng":1.1465102},{"lat":49.4403987,"lng":1.1465316},{"lat":49.4403911,"lng":1.1465827},{"lat":49.440413,"lng":1.1465864},{"lat":49.4404539,"lng":1.1465936},{"lat":49.4404548,"lng":1.1465392}]
                        ;
                        bermudaTriangle = new google.maps.Polygon({
                          paths: coords,
                          strokeColor: '#2b3fff',
                          strokeOpacity: 0.8,
                          strokeWeight: 2,
                          fillColor: '#2b3fff',
                          fillOpacity: 0.35
                        });

                        bermudaTriangle.setMap(map);


        */


        /** DEBUG STUFF **/





        //parcelDataStorage = response
        //response.nears = [];
        //setParcelOnMap(response);

        google.maps.event.addListener(map,'click',function(event) {


          console.log(event)
          fetch('/getPointAndNear?lat='+ event.latLng.lat()+'&lng='+event.latLng.lng())
            .then(function(response) {
              return response.json();
            }).then(function (parcelData) {
            console.log(parcelData);
            for(var elementI = 0; elementI < drawElements.length-1; elementI++) {
              drawElements[elementI].setMap(null)
            }
            parcelDataStorage = parcelData
            setParcelOnMap(parcelDataStorage)


            /*var bounds = new google.maps.LatLngBounds();
            for (i = 0; i < parcelData.coords.length; i++) {
              bounds.extend(parcelData.coords[i]);
            }
            console.log(bounds.getCenter().lat(), bounds.getCenter().lng());*/

          })

        });
/*        document.querySelector('.valid-selection').addEventListener('click', function (event) {


        })*/
      }


    </script>
@endsection