{{-- Extends layout --}}
@extends('layout.default')
@section('styles')
{{-- <link rel="stylesheet" href="{{asset('css/pages/style.css')}}"> --}}
<link rel="stylesheet" href="https://labs.os.uk/public/os-api-branding/v0.2.0/os-api-branding.css" />
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" />
<style type="text/css">
#mapCanvas {
    height: 500px;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 290px;
  top: 143px;
  width: 24%;
  height: 500px;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  /* margin: 15% auto;*/ /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
  height: 500px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-left: 325px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
@endsection
{{-- Content --}}
@section('content')
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Info Panel</h2>
    <p id="modalContent">No data available.</p>
</div>
</div>
<div id="mapCanvas"></div>
@endsection

{{-- Scripts Section --}}
@section('scripts')

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuxRvdzyzw6wxycesT5QrnAQ0ByjHpq1g"></script>
<script>
    function initMap() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };
    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    var markers = [
    @php
    if($probateProperties)
    {
        foreach($probateProperties as $row)
        {
            echo '["'.$row['address_1'].'", '.$row['latitude'].', '.$row['longitude'].'],';
        }
    }
    @endphp
    ];  
    // Place each marker on the map  
    for(var i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);

        var marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
        });
        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
             popWindow(markers[i][0]);
           }
       })(marker, i));
        // Center the map to fit all markers on the screen
        map.fitBounds(bounds);
    }
    // Set zoom level
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(7);
        google.maps.event.removeListener(boundsListener);
    });

}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);

var modal = document.getElementById("myModal");

function popWindow(content)
{    
    modal.style.display = "block";
    $("#modalContent").html(content);
}
// When the user clicks on <span> (x), close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
// window.onclick = function(event) {
//   if (event.target == modal) {
//     modal.style.display = "none";
//   }
// }





</script>

@endsection