	<script>
	    window.scrollTo(0,0);
	</script>
<div class="mtop-cls1" id="filter-sticky">
<?php $this->renderPartial('//listings/_listing_filter');?>
</div>  
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAuq0074pFpCc_GKeTNEIpLTrNbQWTFRBQ&language=en&callback=initMapView"></script>    

  <style>.header { 
    box-shadow: unset !important;
}.header {
    background: #fff !important;
    position: fixed;
    width: 100%;
}#filter-sticky{ position:unset; }
      #map-load { height:100%;background: #eee;}
        #map-load1 { height:calc(100vh - 150px); } 
        body#paege-sect {
    overflow: hidden;
} body{height: 100vh;
   overflow-x: hidden;
}
.mapColumn {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index:11;}
#map-sect { position: relative;}
#map-sect {
    position: relative;
    z-index: 1111;
    height: 100% !important;
    background: red;
    position: absolute;
    right: 0;
}#filter-sticky {
    position: fixed;
    top: 65px;
}
#page-start{padding-top: 173px;}
#map-sect { position:fixed;}
  </style>
  <script>
      $('article').on('hover',function(){
          
          
      })
  </script>
  <script>var zoom =10; </script>
  <script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
   <div class="row" id="page-start">
       <div class="col-sm-12 row" id="paege-sect">
              <section id="blog" class="blog list-project pt-0 col-sm-6" style="padding-left:30px">
      <div class=" "  >

        <div class="row ">
            
            <div class="d-flex w-100">
                    <div class="flex1">
                    <h2 class="title"><?php echo $pageTitle;?></h2>
                    <?php
                    if(!empty($ads)){ ?>
                    <p class="mt-0"><?php echo $adsCount;?> Results</p>
                    <?php  } ?> 
                    </div>
                     <?php
                    if(!empty($ads)){ ?>
                    <div class="flex1 action-grid d-flex">
                        <a href="javascript:void(0)" data-val='grid' onclick="setthisvalview(this)"  class="<?php echo $view=='grid' ? 'active':'';?>">
                        <i class="bi bi-grid active"></i> Grid
                        </a>
                        <a href="javascript:void(0)"  data-val='list' onclick="setthisvalview(this)" class="<?php echo $view=='list' ? 'active':'';?>">
                        <i class="bi bi-list"></i> List
                        </a>
                          <a href="javascript:void(0)" data-val='map'   class="<?php echo $view=='map' ? 'active':'';?>">
                        <i class="bi bi-grid active"></i> Map
                        </a>
                    </div>
                    <?php } ?> 
          </div>
            <?php
            if(!empty($ads)){ ?>
        <ul id="clearfrm"></ul> 
          
          <?php } ?> 
      
        
          <div class="col-lg-12 mt-0">
               
            <?php
            if(!empty($ads)){ ?>
            <div class="row gy-4 posts-list list">
            <?php
            foreach($ads as $k=>$v){ 
            $image =  $this->asset_parent('uploads/images/'.$v->ad_image);
            ?>
              <div class="col-lg-6">
                <article class="d-flex flex-column" data-id="<?php echo $k;?>" >

                  <div class="post-img">
                      <ul class="attrribute-ul">
                          <?php echo $v->AtttributePropertyDetails;?>
                      </ul>
                       <a href="<?php echo $v->DetailUrlOffplan;?>">
                    <img data-src="<?php echo  $image ;?>" alt="" class="img-fluid lozad"></a>
                  </div>
                  <div class="contentcls">
                     <div class="row">
                         <div class="col-sm-8"> 
                                 <h2 class="title"><a href="<?php echo $v->DetailUrlOffplan;?>"><?php echo $v->adTitle;?></a>   </h2>
                                 <div class="row mt-1 mb-1 spl-margin-list">
                                         <div class="col-sm-12 loc-txt">
                                              <i class="bi bi-geo-alt"></i> <?php echo $v->LocationTitleNew;?></li> 
                                         </div>
                                 
                                 </div>
                        </div>
                        <div class="col-sm-4" style="margin:20px 0 0 0">  
                        <span class="dev_logo d-logo-s" title="<?php echo $v->developer_name;?>"><img src="<?php echo $v->bgImage;?>" alt="<?php echo $v->developer_name;?>"></span> 
                        </div>
                    </div>
                  
                  
                      <div class="row">
                        <div class="col-sm-12"> 
                       <div class="price-text  at-latest"><?php if($v->p_o_r !='1'){ ?> <span class="startingfrom">Starting From</span> <?php }  echo $v->PriceTitleDetail;?>  </div>
                      </div>
                      <div class="col-sm-4" style="    display: none;    align-items: center;    justify-content: center;"> <div class="read-more w-100 align-center" style="    justify-content: flex-end;    display: flex;"><a href="<?php echo $v->DetailUrlOffplan;?>">View Details</a> </div></div>  </div>
                  
                 </div>

                </article>
              </div><!-- End post list item -->
            <?php } ?> 
            </div><!-- End blog posts list -->
<div class="blog-pagination" style="margin-top: 50px;">
									<?php $this->widget('CLinkPager', array(
									'pages'         => $pages,
									'htmlOptions'   => array('class' => 'justify-content-center'),
									'header'        => false,
									'cssFile'       => false                
									)); ?>
									</div>
									<?php
									if(!empty($pages->pageCount>1)){
									    ?>
									     <div class="d-block text-center mt-4"><?php echo Yii::t('app',$this->tag->getTag('viewing_page_{c}_of_{t}','Viewing Page {c} of {t}'),array('{c}'=>$pages->currentPage+1,'{t}'=>'<strong>'.$pages->pageCount.'</strong>'));?>
									     </div>
                
									    <?php
									}
           } 
            else{
                $this->renderPartial('_empty_result');
            }
            
            
            ?>

          </div>

          
        </div>

      </div>
    </section>
           
           
       </div>
        <div class="col-sm-6"  id="map-sect"> <div class="mapColumn" data-im="" id="map-load"    ></div></div>
   </div>
   
	<?php 
	$locations = array();
	$avg_latitude ='';
	$avg_longitude ='';
	$count = 0; 
 
	foreach($ads  as $k=>$v){
	   if(empty($v->location_latitude) or empty($v->location_longitude)) { continue; }
	      	//if(   $k>= 200 ){ continue; } 
	     	
	    //	echo $k; echo '<br />';
		if($k==0){
			$latitude =   $v->location_latitude ;
			$longitude = $v->location_longitude; 
		}
	 
	   	if($v->section_id == '1'){
			$color =  'labels sale';
		}
		else if($v->section_id == '2'){			 
				$color =  'labels rent';
		}
		else{
			$color =  'labels';
		}
		$image =  $this->asset_parent('uploads/images/'.$v->ad_image);
		$price = ''; if($v->p_o_r !='1'){ $price = '<span class="startingfrom">Starting From</span>';  }  $price .= $v->PriceTitleDetail; 
		$html = '<div><div class="d-flex-itm"><div class="cardPhoto backgroundPulse" style="  background-image:url('.$image.') ;"></div><div class="cardDetails man pts pbn phm h6 typeWeightNormal"><div><span class="cardPrice h5 man pan typeEmphasize noWrap typeTruncate">'.$price.'</span></div><div data-reactid="61"> <ul class="listInline typeTruncate mvn" data-reactid="62"><i class="bi bi-geo-alt"></i> '.  $v->LocationTitleNew .' </ul></div><div class=" man pts pbn phm h6 typeWeightNormal"><div><span class="cardPrice h5 man pan typeEmphasize noWrap typeTruncate dep-text">'.$v->adTitle.'</span></div></div></div></div></div>';
		//$locations[] = array($v->MapHtml,empty($v->location_latitude) ? $v->c_cation_latitude : $v->location_latitude,empty($v->location_longitude) ? $v->c_location_longitude : $v->location_longitude,$k+1,$color,$v->detailUrl);	 
		//$locations[] = array('lat' => floatval($v->location_latitude), 'lng' => floatval($v->location_longitude) );
			$locations[] = array($html, $v->location_latitude, $v->location_longitude,$k+1,$color,$v->DetailUrlOffplan);	 
			 	 
		 
	}
  
  
 // exit; 
	?>

<style>
  div{outline:none !important;border:0px !important;}
    .labels{width: 15px;
height: 15px;
line-height: 11px;
border-radius: 50%;
border-width: 2px;
border-style: solid;
border-color: #fff;
transform: translate(0,2px);
box-shadow: 0 2px 2px rgba(0,0,0,.5);
color: #fff;
font-size: 10px;
text-align: center;
pointer-events: auto;  background: rgb(252, 56, 74) none repeat scroll 0% 0%; }
    .labels.rent{ background:var(--rent-color) }
    .labels.sale{ background:var(--sale-color) }
    .labels.sale:hover,.labels.rent:hover{ background:#eee !important}
</style>	
<style>
.d-flex-itm { display:flex; }
.d-flex-itm .cardPhoto{ width:80px;height:80px; background-position:center center;background-size:cover; background-repeat:no-repeat;}
.d-flex-itm  .cardDetails { width:calc(100% - 90px);padding-left:10px;}
.d-flex-itm .card_propertyamenity-area span svg{ display:none; }
.d-flex-itm .card_propertyamenity-area span{ white-space:nowrap;}
.d-flex-itm .dep-text{ width:100%;font-size:14px;}
.gm-style .gm-style-iw-t { 
    visibility: visible !important;
}.gm-style .gm-style-iw-c { 
    max-width: unset !important;
}.cardDetails ul { 
    margin-bottom: 20px;
}.cardDetails ul { 
    margin-bottom: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.cardDetails ul { 
    margin-left: 0px !important;
    margin-bottom: 15px !important;
    padding-left: 0px;
}
</style> 
<script>
	 var locations =  <?php echo json_encode($locations);?>;
 	 var my_latitude2 = parseFloat('<?php echo $latitude;?>');
	 var my_logitude1 = parseFloat('<?php echo $longitude;?>');
    var markerData = [];
    var infowindow;
    var n ; 
 function initMapView() {
    var e, t, i, o = new google.maps.LatLngBounds;
        n = new google.maps.Map(document.getElementById("map-load"), {
            zoom: zoom,
             
            center: {
                lat: my_latitude2,
                lng: my_logitude1
            },
             mapTypeId: 'terrain',
            disableDefaultUI: !0,
               mapTypeControl: false,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR ,
      mapTypeIds: ['roadmap','satellite'],
    },
            scaleControl: !0,
            zoomControl: !0,
            fullScreenControl: !1,
            draggable: !0,
            gestureHandling: "greedy"
        });
    for (n.addListener("idle", function() {
        
           var a_old_val = $("#a").val();
            var t = n.getBounds(),
                i = (t.getCenter(), t.getCenter().lat()),
                o = t.getCenter().lng();
            boundsNeLatLng = t.getNorthEast(), boundsSwLatLng = t.getSouthWest(), boundaries = {
                a: boundsSwLatLng.lat(),
                b: boundsSwLatLng.lng(),
                c: boundsNeLatLng.lat(),
                d: boundsNeLatLng.lng()
            };
            var s = t.getNorthEast(),
                a = t.getSouthWest();
           if(a_old_val != boundsSwLatLng.lat()){     
              
          ///////////////  new google.maps.LatLng(s.lat(), a.lng()), new google.maps.LatLng(a.lat(), s.lng()), e ? ($("#a").val(boundsSwLatLng.lat()), $("#b").val(boundsSwLatLng.lng()), $("#c").val(boundsNeLatLng.lat()), $("#d").val(boundsNeLatLng.lng()), $("#lt").val(i), $("#lg").val(o), $("#zoom").val(n.getZoom()), search_byAjax()) : e = 1
           }
               
           }), infowindow = new google.maps.InfoWindow({
            maxWidth: 200,
            disableAutoPan: !1
        }), i = 0; i < locations.length; i++) t =   new markerWithLabel.MarkerWithLabel({
          position:  new google.maps.LatLng(locations[i][1], locations[i][2]),
      
          map: n,
           icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 0
        },
          labelContent: "", 
          
          labelAnchor: new google.maps.Point(-5, 13),
          labelClass: locations[i][4], // the CSS class for the label
      
        }) , markerData.push(t), o.extend(t.position), google.maps.event.addListener(t, "click", function(e, t) {
        return function() {
              window.open(locations[t][5], '_blank');
             
        }
    }(t, i)), google.maps.event.addListener(t, "mouseover", function(e, t) {
        return function() {
               ltlg = 	 new google.maps.LatLng(locations[t][1], locations[t][2]); 
	 
             
             	infowindow.setContent( locations[t][0]);
             		infowindow.setPosition(ltlg);
			infowindow.open(n, e);
            
              
        }
    }(t, i)), google.maps.event.addListener(t, "mouseout", function() {})
    n.fitBounds(o);
    /*
    new MarkerClusterer(n, markerData, {
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    })
    */
     
}
$(function(){
	initMapView();
	
	  
	onhoverShowProp();
	 
	
	})
	
	

function onhoverShowProp(){ 
    
	  $("article").mouseover(function() {
 
		var i = $(this).attr('data-id');
		var marker = markerData[i];
        ltlg = 	 new google.maps.LatLng(locations[i][1], locations[i][2]); 
	 
	 	var imgsrc = $(this).find('img.img-fluid').attr('data-src');
		 
		
		var imgalt =  'Alt';
		
		var price = $(this).find('.price-text').text();
		var ad_title = $(this).find('h2.title').find('a').text();
		var li_title = $(this).find('.loc-txt').html();
		
		
		var locationHTML = '<div class="d-flex-itm"><div class="cardPhoto backgroundPulse" style="  background-image:url('+imgsrc+') ;"></div><div class="cardDetails man pts pbn phm h6 typeWeightNormal"><div><span class="cardPrice h5 man pan typeEmphasize noWrap typeTruncate">' + price + '</span></div><div data-reactid="61"> <ul class="listInline typeTruncate mvn" data-reactid="62">'+li_title+'</ul></div><div class=" man pts pbn phm h6 typeWeightNormal"  ><div ><span class="cardPrice h5 man pan typeEmphasize noWrap typeTruncate dep-text" >'+ad_title+'</span></div></div></div>';		
		
		
		//console.log(i);
		if(marker && locations[i]) {
		 n.setCenter(ltlg);
			infowindow.setContent(locationHTML);
			infowindow.open(n, marker);
		}        
      });
}
</script>
<style>
#map-load .gm-style {
    top: 0px !important;
    bottom: 0 !important;
    
}.man .h5 {
    font-weight: var(--weight-600);
    font-size: 13px !important;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    width: 100% !important;
}.cardDetails ul {
    display: flex;
    margin-bottom: 5px;
    font-size: 12px !important;
}.cardDetails ul  li{  font-size: 14px !important;
line-height: 1.2 !important;
}.cardDetails.h6 { margin:2px 0px ; }
</style> 