@extends("app")
@section('head_title', (!empty($city->seo_title))? $city->seo_title : 'All Properties | '.getcong('site_name') )
@section('head_keywords', (!empty($city->seo_keywork))? $city->seo_keywork :'' )
@section('head_description', (!empty($city->seo_description))? $city->seo_description : '' )
@section('head_url', Request::url())
@section('canonical_url', @$loca_name)
@section("content")
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
@if((!empty($city->longitude)) && (!empty($city->latitude)))
    <script async defer>
        function initMap() {
          const pyrmont = {lat:,lng:};
          const map = new google.maps.Map(document.getElementById("map"), {
            center: pyrmont,
            zoom: 18,
          });
          ///////////////
          // Create the places service.
          const service = new google.maps.places.PlacesService(map);
          let getNextPage;
		  /*
          const moreButton = document.getElementById("more");
          moreButton.onclick = function () {
            moreButton.disabled = true;
            if (getNextPage) {
              getNextPage();
            }
          };
		  */
          // Perform a nearby search.
          service.nearbySearch(
            {location: pyrmont, radius: 500, type: ['school', 'hospital','hotal', 'train_station', 'bus_station']},
            (results, status, pagination) => {
              if (status !== "OK" || !results) return;
              addPlaces(results, map);
              moreButton.disabled = !pagination || !pagination.hasNextPage;
        
              if (pagination && pagination.hasNextPage) {
                getNextPage = () => {
                  // Note: nextPage will call the same handler function as the initial call
                  pagination.nextPage();
                };
              }
            }
          );
        }
    function addPlaces(places, map) {
      const placesList = document.getElementById("places");
      for (const place of places) {
        if (place.geometry && place.geometry.location) {
          const image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25),
          };
          console.log(place.types);
          
          new google.maps.Marker({
            map,
            icon: image,
            title: place.name,
            position: place.geometry.location,
          });
          const li = document.createElement("li");
          const label = document.createElement("label");
          label.textContent = place.types;
          
          li.textContent = place.name;
          //placesList.appendChild(label);
          placesList.appendChild(li);
          
          li.addEventListener("click", () => {map.setCenter(place.geometry.location);});
        }
      }
    }
  </script>
@endif
<style>
.gray-btn-bg{background: #dee2e6;border-radius: 33px !important;margin-right: 10px;}
html,body {height: 100%;margin: 0;padding: 0;}
#map{float: left;min-height:537px;max-height:537px;height: 100%;width:100% !important;}
/*********************************/
#sidebar {float:left;padding: 0;max-width: 20%;min-width: 20%;height: 550px;box-sizing: border-box;}
#sidebar ul {list-style-type: none;padding: 0;overflow: scroll;margin: 0;min-height: 488px;max-height: 488px;overflow-x: hidden;}
.map_load_place{width: 100%;font-size: 14px;background: #000;color: #fff;border: 0;padding: 8px;}
#sidebar li {background-color: #f1f1f1;padding: 8px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;cursor: pointer;}
#sidebar li:nth-child(odd) {background-color: #fcfcfc;}
.bold{font-weight: bold !important;}
.caps{text-transform:uppercase;}
.pt-5{padding-top:5px;}
.pt-112{padding-top:112px;}
.btn-black{background:#000;}
.pt-54{padding-top: 54px;}
/* End Map */
.head{background: #ffffff;}
.br_title{font-weight: 700 !important;letter-spacing: -0.02em;color: #161616;font-family: 'Playfair Display';font-style: normal;font-size: 48px;line-height: 60px;}
.mt-42{margin-top:42px !important;}
.b_title{font-weight: 500;line-height: 30px;color: #141414;font-family: 'Inter';}
.b_title_1,#PropertyDescription p{font-weight: 400;font-size: 18px;line-height: 28px;color: #545454;font-family: 'Inter';letter-spacing: -0.02em;}
.b_title_2{font-weight:700;font-size: 36px;line-height: 44px;color: #161616;font-family: 'Playfair Display';}
.br_1{background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 4px;}
.b_title_3{font-weight: 600;font-size: 18px;line-height: 32px;color: #151515;}
.pb-24{padding-bottom:24px;}
.pt-24{padding-top:24px;}
.pl-24{padding-left:24px;}
.pr-24{padding-right:24px;}
.h-340{height: 340px !important;}
.h-538{height: 538px !important;}
.bor-0{border-radius: 0px !important;}
.card-border{background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 0px 0px 4px 4px;border-top: 0px solid !important;}
.pr-28{padding-right:28px;}
.card-border strong{font-family: 'Inter';font-style: normal;color: #151515;font-weight: 600;font-size: 22px;line-height: 32px;}
.card-border p{font-family: 'Inter';font-style: normal;font-weight: 500;font-size: 16px;line-height: 24px;color: #585858;}
.p-16{padding:16px;}
.pt-64{padding-top:64px;}.pl-64{padding-left:64px;}.pr-64{padding-right:64px;}.pb-64{padding-bottom:64px;}
.pb-56{padding-bottom:56px;}
.pt-56{padding-top:56px;}
.pl-56{padding-left: 56px;}
#show_info p{margin-bottom:0;}
.loca ul li{font-weight: 400;font-size: 18px;line-height: 28px;color: #141414;}
.h-444{max-height:444px;min-height:444px;}
.crop {
    background-size: cover !important;
    height: 240px;
}
.blog-border {
    padding: 16px 26px 24px 26px;
}
.blog-title1 {
    min-height: 95px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
	
}
@media (max-width:576px){
	.h-444{max-height:197px;min-height:197px;}
	.pt-56{padding-top:40px;}
	.pb-56{padding-bottom:40px;}
}
#h1-header, .heading{min-height: auto;}
.blog_loop .owl-nav {
    display: none !important;
}
</style>
<div class="head">
	<div class="container pl-0 pr-0 pt-56">