@extends('layout.mainlisting')
@section('title') @if( ! empty($title)) {{ $title }} | @endif @parent @endsection

@section('main')

<div class="container-fluid" style="height:100%">
    <div class="row"> 
        <div class="col-md-12">
            <div class="row">
                <div class="col-sm-12 search-nav-container">
                    <?php
                        $allAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'all'])));
                        $personalAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'personal'])));
                        $businessAdTab = route('listing').str_replace('/', '', str_replace(route('listing'), '', request()->fullUrlWithQuery(['adType'=>'business'])));

                        ?>

                    <div class="">
                        <nav class="navbar search-nav ">
                            <div class="container-fluid">
                                <ul class="nav navbar-nav">                                
                                <div class ='navbar-form navbar-left'>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="places"placeholder="Enter Search" name="q">
                                </div>
                                <a class="btn btn-default navbar-btn" onclick="searchDrops('#dropdown-rentals')">Rent Or Sale <span class="caret"></span></a>
                                <div class="drop-search" id="dropdown-rentals" >
                                    <div class="search-radio-container">
                                        <label for="purpose_buy" class="radio-inliner">
                                            <input type="radio" value="buy" id="purpose_buy" name="purpose"
                                                {{ request('type') == 'apartment'? 'checked="checked"' : '' }}>
                                            All
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="purpose_rent" class="radio-inliner">
                                            <input type="radio" value="rent" id="purpose_rent" name="purpose"
                                                {{ request('type') == 'condos'? 'checked="checked"' : '' }}>
                                           For  Rent
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    
                                      <div class="search-radio-container">
                                        <label for="purpose_sale" class="radio-inliner">
                                            <input type="radio" value="rent" id="purpose_sale" name="purpose"
                                                {{ request('type') == 'condos'? 'checked="checked"' : '' }}>
                                            For Sale
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div> 
                                <a class="btn btn-default navbar-btn" onclick="searchDrops('#dropdown-propertytype')">Property Type <span class="caret"></span></a>
                                <div class="drop-search" id="dropdown-propertytype" >
                                    <div class="search-radio-container">
                                        <label for="type_all" class="radio-inliner">
                                            <input type="radio" value="apartment" id="type_all" name="type"
                                                {{ request('type') == 'apartment'? 'checked="checked"' : '' }}>
                                           All
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_apartment" class="radio-inliner">
                                            <input type="radio" value="apartment" id="type_apartment" name="type"
                                                {{ request('type') == 'apartment'? 'checked="checked"' : '' }}>
                                            @lang('app.apartment')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_condos" class="radio-inliner">
                                            <input type="radio" value="condos" id="type_condos" name="type"
                                                {{ request('type') == 'condos'? 'checked="checked"' : '' }}>
                                            @lang('app.condos')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_house" class="radio-inliner">
                                            <input type="radio" value="house" id="type_house" name="type"
                                                {{ request('type') == 'house'? 'checked="checked"' : '' }}>
                                            @lang('app.house')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_land" class="radio-inliner">
                                            <input type="radio" value="land" id="type_land" name="type"
                                                {{ request('type') == 'land'? 'checked="checked"' : '' }}>
                                            @lang('app.land')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_commercial_space" class="radio-inliner">
                                            <input type="radio" value="commercial_space" id="type_commercial_space" name="type"
                                                {{ request('type') == 'commercial_space'? 'checked="checked"' : '' }}>
                                            @lang('app.commercial_space')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="type_villa" class="radio-inliner">
                                            <input type="radio" value="villa" id="type_villa" name="type"
                                                {{ request('type') == 'villa'? 'checked="checked"' : '' }}>
                                            @lang('app.villa')
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    
                                </div> 
                                
                                <!-- {{--<a class="btn btn-default navbar-btn" onclick="searchDrops('#dropdown-location')">Location</a>
                                <div class="drop-search" id="dropdown-location">
                                    <div class="input-container ">
                                        <i class="fas fa-globe-africa icon"></i>
                                        <select class="form-control select2 ad-search" name="country">
                                            <option value="">@lang('app.select_a_country')</option>
                                    
                                            @foreach($countries as $country)
                                            <option value="{{ $country->id }}" {{ request('country') == $country->id ? 'selected' :'' }}>
                                                {{ $country->country_name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="input-container ">
                                        <i class="fas fa-city icon"></i>
                                        <select class="form-control select2 ad-search" id="state_select" name="state">
                                            <option value=""> @lang('app.select_state') </option>
                                            @if($selected_countries)
                                            @foreach($selected_countries->states as $state)
                                            <option value="{{ $state->id }}" {{ request('state') ==  $state->id ? 'selected':'' }}>
                                                {{ $state->state_name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    
                                    <div class="input-container ">
                                        <i class="fas fa-city icon"></i>
                                        <select class="form-control select2 ad-search" id="city_select" name="city">
                                            <option value=""> @lang('app.select_city') </option>
                                            @if($selected_states)
                                            @foreach($selected_states->cities as $city)
                                            <option value="{{ $city->id }}" {{ request('city') ==  $city->id ? 'selected':'' }}>
                                                {{ $city->city_name }}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>

                                </div>--}} -->
                                <a class="btn btn-default navbar-btn" onclick="searchDrops('#dropdown-price')">Price <span class="caret"></span></a>
                                <div class="drop-search" id="dropdown-price">
                                    <p>Min Price</p>
                                    <div class="input-container ">
                                        <i class="fas fa-minus-circle icon"></i>
                                        <input type="number" class="form-control advanced-search" id="min_price" name="min_price" value="0"
                                            placeholder="@lang('app.min_price')" />
                                    </div>
                                    <p>Max Price</p>
                                    <div class="input-container ">
                                        <i class="fas fa-plus-circle icon"></i>
                                        <input type="number" class="form-control advanced-search" id="max_price" name="max_price" value="100000000"
                                            placeholder="@lang('app.max_price')" />
                                    </div>

                                </div>
                                <a class="btn btn-default navbar-btn" onclick="searchDrops('#dropdown-beds')">Beds <span class="caret"></span></a>
                                <div class="drop-search" id="dropdown-beds" >
                                    
                                      <div class="search-radio-container">
                                        <label for="bedrooms_0" class="radio-inliner">
                                            <input type="radio" value="1" id="bedrooms_0" name="beds"
                                                {{ request('beds') == '1'? 'checked="checked"' : '' }}>
                                             All
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                   
                                    <div class="search-radio-container">
                                        <label for="bedrooms_1" class="radio-inliner">
                                            <input type="radio" value="1" id="bedrooms_1" name="beds"
                                                {{ request('beds') == '1'? 'checked="checked"' : '' }}>
                                            1 Bedrooms
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="bedrooms_2" class="radio-inliner">
                                            <input type="radio" value="2" id="bedrooms_2" name="beds"
                                                {{ request('beds') == 'condos'? 'checked="checked"' : '' }}>
                                            2 Bedrooms
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="bedrooms_3" class="radio-inliner">
                                            <input type="radio" value="3" id="bedrooms_3" name="beds"
                                                {{ request('beds') == 'house'? 'checked="checked"' : '' }}>
                                            3 Bedrooms
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="bedrooms_4" class="radio-inliner">
                                            <input type="radio" value="4" id="bedrooms_4" name="beds"
                                                {{ request('beds') == 'land'? 'checked="checked"' : '' }}>
                                            4 Bedrooms
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    <div class="search-radio-container">
                                        <label for="bedrooms_5" class="radio-inliner">
                                            <input type="radio" value="5" id="bedrooms_5" name="beds"
                                                {{ request('beds') == 'commercial_space'? 'checked="checked"' : '' }}>
                                            5+ Bedrooms
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                    
                                    
                                </div>
                                <button class="btn btn-primary navbar-btn" id="searchbutton"type="submit">Search</button>
                                </div>
                             
                                </ul>
                                
                                                               
                            </div>
                        </nav>                                                
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ad-box-wrap" >
        <div class="col-lg-7 map-area" style="padding-right:0;">
            <!--Here is the map div-->
            <!--Here is the map div-->
            <!--Here is the map div-->
            <!--Here is the map div-->
            <!--Here is the map div-->
            <div id="map" style="height:100%;">
                
            </div>            
        </div>

    
        <div class="col-lg-5" style="box-shadow: -2px 0px 7px 0px rgba(0,0,0,0.2);height: 100%;overflow:hidden;">
            <div class="listing-sort-nav">
                <div class="sort-nav-left" id="notices">
                    
                    <p class="" style="margin-top: 15px;">{!! $cods['myres']? : 'Listings  ' !!} <strong> {{  $ads->total() }}</strong>
                    </p>
                    
                </div>
                <div class="sort-nav-right">
                    <div class="dropdown">
                        <p class="" data-toggle="dropdown" href="#" style="margin-top: 15px;margin-left: 10px;">
                            Sort By
                            <span class="caret"></span></p>
                        <ul class="dropdown-menu">
                            <li><a
                                    href="{{ request()->fullUrlWithQuery(['shortBy'=>'price_high_to_low']) }}">@lang('app.price_high_to_low')</a>
                            </li>
                            <li><a
                                    href="{{ request()->fullUrlWithQuery(['shortBy'=>'price_low_to_high']) }}">@lang('app.price_low_to_high')</a>
                            </li>
                            <li><a href="{{ request()->fullUrlWithQuery(['shortBy'=>'latest']) }}">@lang('app.latest')</a></li>
                        </ul>
                    </div>
                </div>
                
            </div>
            <div class="k-ad-area">
            @foreach ($ads as $ad)
            
            <a href="{{ route('single_ad', $ad->slug) }}">
                <div class="k-property-card">
                    <div class="k-property-image">
                        <img itemprop="image" src="{{ media_url($ad->feature_img) }}" class="img-responsive" alt="{{ $ad->title }}">
                    </div>
                    <div class="k-details">
                        <div class="row k-row-1" >
                            <div class="col-xs-8" style="margin-bottom: -10px;">
                                <p class="k-price">K{{number_format($ad->price, 2)}}
                                </p>
                            </div>
                            
                        </div>
                        <div class="row" >
                            
                            <div class="col-xs-12 " style="margin-bottom: -10px;">
                                
                                <p class="k-address"><span style="font-weight:bold">{{$ad->city->city_name}}</span>, {{$ad->address}} </p>
                            </div>
                            
                        </div>
                        <div class="row">
                            <div class="col-xs-2" style="padding-right:0px;">
                                <i class="fa fa-bed"></i>
                                {{ $ad->beds}}
                            </div>
                            <div class="col-xs-2" style="padding-right:0px;">
                                <i class="fas fa-bath"></i>
                                {{ $ad->attached_bath}}
                            </div>                        
                            <div class="col-xs-2"  >
                                <p class="k-purpose"> {{ $ad->purpose }}</p>
                            </div>
                        </div>
                        
                    </div>

                </div>
            </a>
            
            @endforeach
            </div>
            <div class="row">
                <div class="col-xs-12">
                    {{ $ads->appends(request()->input())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>





@endsection


@section('page-js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
    integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<!--Here is the map SCRIPT-->

<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQuDQmtiHkS7CcriyEiYXWja3ODrG4vFI&amp;libraries=common,util,map,overlay,onion,controls,stats&amp;v=3.37">
</script>
<script>
 function myScript() { 

        var max_price = document.getElementById('max_price').value;
        var min_price = document.getElementById('min_price').value;
        var type_apartment = document.getElementById('type_apartment').checked;
        var type_condos = document.getElementById('type_condos').checked;
        var type_house= document.getElementById('type_house').checked;
        var type_land = document.getElementById('type_land').checked;
        var type_commercial_space = document.getElementById('type_commercial_space').checked;
        var type_villa = document.getElementById('type_villa').checked;
        var purpose_buy = document.getElementById('purpose_buy').checked;
                var type_all = document.getElementById('type_all').checked;

        var purpose_rent = document.getElementById('purpose_rent').checked;
        var purpose_sale = document.getElementById('purpose_sale').checked;
        var bedrooms_0 = document.getElementById('bedrooms_0').checked;
        var bedrooms_1 = document.getElementById('bedrooms_1').checked;
        var bedrooms_2 = document.getElementById('bedrooms_2').checked;
        var bedrooms_3 = document.getElementById('bedrooms_3').checked;
        var bedrooms_4 = document.getElementById('bedrooms_4').checked;
        var bedrooms_5 = document.getElementById('bedrooms_5').checked;


        var purpose = null;
        var bedrooms = null;
        var house_type = null;
                if(purpose_buy){ purpose =null; }
        else if(purpose_rent){ purpose ="rent" }
                else if(purpose_sale){ purpose ="sale" }
        
        if(bedrooms_0){ bedrooms= null }
        else if(bedrooms_1){ bedrooms = 1 }
        else if(bedrooms_2){ bedrooms = 2}
        else if(bedrooms_3){ bedrooms = 3 }
        else if(bedrooms_4){ bedrooms = 4 }
        else if(bedrooms_5){ bedrooms = 5 }
        if(type_all){ house_type = null; }
        else if(type_apartment){ house_type ="apartment" ;}
        else if(type_condos){ house_type ="condos" ;}
        else if(type_house){ house_type ="house"; }
        else if(type_land){ house_type ="land" ;}
        else if(type_commercial_space){ house_type ="commercial_space" ;}
        else if(type_villa){ house_type ="villa" ;}
        
        var paramz = ""
        
        if(unilong && purpose && bedrooms && house_type){ paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && bedrooms && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong &&  bedrooms && house_type){ paramz ='lat='+ unilat+'&long='+unilong+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && bedrooms ){ paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if(purpose && bedrooms && house_type){ paramz ='purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price;}
        else if(unilong && purpose ){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && bedrooms ){paramz ='lat='+ unilat+'&long='+unilong+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose && bedrooms){'purpose='+purpose+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose && house_type){paramz = 'purpose='+purpose+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(bedrooms && house_type){paramz ='bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong ){paramz ='lat='+ unilat+'&long='+unilong +'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose) {paramz = 'purpose='+purpose+'&min_price='+min_price+'&max_price='+max_price; }
        else if( bedrooms){paramz ='bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( house_type){paramz ='house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        
        loadsearch(paramz);

        
        console.log(paramz);}


// document.getElementById('max_price').addEventListener("change", myScript);;
// document.getElementById('min_price').addEventListener("change", myScript);;
//document.getElementById('type_apartment').addEventListener("change", myScript);;
//document.getElementById('type_condos').addEventListener("change", myScript);;
//document.getElementById('type_house').addEventListener("change", myScript);;
//document.getElementById('type_land').addEventListener("change", myScript);;
//.getElementById('type_commercial_space').addEventListener("change", myScript);;
//document.getElementById('type_villa').addEventListener("change", myScript);;
//document.getElementById('purpose_buy').addEventListener("change", myScript);;
//document.getElementById('type_all').addEventListener("change", myScript);;
//document.getElementById('purpose_rent').addEventListener("change", myScript);;
// document.getElementById('purpose_sale').addEventListener("change", myScript);;
//  document.getElementById('bedrooms_0').addEventListener("change", myScript);;
//  document.getElementById('bedrooms_1').addEventListener("change", myScript);;
// document.getElementById('bedrooms_2').addEventListener("change", myScript);;
// document.getElementById('bedrooms_3').addEventListener("change", myScript);;
// document.getElementById('bedrooms_4').addEventListener("change", myScript);;
//  document.getElementById('bedrooms_5').addEventListener("change", myScript);;
var currentId = 0;
var uniqueId = function() {
    return ++currentId;
}

function CloseInfoWin(id) {
    
    //markerleave(id);
    //infowindowz.close();
      // var infowindow = infowindows[id];
             //infowindow.close();
             //if(infowindow){ infowindow.close();};
             console.log(id);
   
};

var markers = {};
var infowindows = {};

    var myzoom = {!! $cods['zoom'] !!};
    var unilat = null;
    var unilong = null;
    var searchadd = null;


    var map;
    var mycenter = { lat: {!! $cods['lat'] !!}, lng: {!! $cods['lng'] !!} };
    var maptype = "roadmap";
    var satswitch = 18;
    var contentString = '' ;
    


    var infowindowz = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 200
        });
            var CloseInfoWindow = function() {
    infowindow.close();
    console.log("hii ");
};


function markerleave(id) {
            var marker = markers[id]; 
            var infowindow = infowindows[id];
             infowindow.close();

            // find the marker by given id
                      //infowindow.open(map, marker);


    //console.log(marker);

   
};



function markerfindme(id) {
            var marker = markers[id]; 
            var infowindow = infowindows[id];

            // find the marker by given id
                      infowindow.open(map, marker);


    //console.log(marker);

   
};



    var loaded = false;
    
    // Each marker is labeled with a single alphabetical character.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;
    var searcher = document.getElementById('places');
        var btnsbmt = document.getElementById('searchbutton');
btnsbmt.addEventListener('click',
    function () { 

        var max_price = document.getElementById('max_price').value;
        var min_price = document.getElementById('min_price').value;
        var type_apartment = document.getElementById('type_apartment').checked;
        var type_condos = document.getElementById('type_condos').checked;
        var type_house= document.getElementById('type_house').checked;
        var type_land = document.getElementById('type_land').checked;
        var type_commercial_space = document.getElementById('type_commercial_space').checked;
        var type_villa = document.getElementById('type_villa').checked;
        var purpose_buy = document.getElementById('purpose_buy').checked;
                var type_all = document.getElementById('type_all').checked;

        var purpose_rent = document.getElementById('purpose_rent').checked;
        var purpose_sale = document.getElementById('purpose_sale').checked;
        var bedrooms_0 = document.getElementById('bedrooms_0').checked;
        var bedrooms_1 = document.getElementById('bedrooms_1').checked;
        var bedrooms_2 = document.getElementById('bedrooms_2').checked;
        var bedrooms_3 = document.getElementById('bedrooms_3').checked;
        var bedrooms_4 = document.getElementById('bedrooms_4').checked;
        var bedrooms_5 = document.getElementById('bedrooms_5').checked;


        var purpose = null;
        var bedrooms = null;
        var house_type = null;
                if(purpose_buy){ purpose =null; }
        else if(purpose_rent){ purpose ="rent" }
                else if(purpose_sale){ purpose ="sale" }
        
        if(bedrooms_0){ bedrooms= null }
        else if(bedrooms_1){ bedrooms = 1 }
        else if(bedrooms_2){ bedrooms = 2}
        else if(bedrooms_3){ bedrooms = 3 }
        else if(bedrooms_4){ bedrooms = 4 }
        else if(bedrooms_5){ bedrooms = 5 }
        if(type_all){ house_type = null; }
        else if(type_apartment){ house_type ="apartment" ;}
        else if(type_condos){ house_type ="condos" ;}
        else if(type_house){ house_type ="house"; }
        else if(type_land){ house_type ="land" ;}
        else if(type_commercial_space){ house_type ="commercial_space" ;}
        else if(type_villa){ house_type ="villa" ;}
        
        var paramz = ""
        
        if(unilong && purpose && bedrooms && house_type){ paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && bedrooms && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong &&  bedrooms && house_type){ paramz ='lat='+ unilat+'&long='+unilong+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && bedrooms ){ paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if(purpose && bedrooms && house_type){ paramz ='purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && purpose && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price;}
        else if(unilong && purpose ){paramz ='lat='+ unilat+'&long='+unilong+'&purpose='+purpose+'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && house_type){paramz ='lat='+ unilat+'&long='+unilong+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong && bedrooms ){paramz ='lat='+ unilat+'&long='+unilong+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose && bedrooms){'purpose='+purpose+'&bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose && house_type){paramz = 'purpose='+purpose+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(bedrooms && house_type){paramz ='bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if(unilong ){paramz ='lat='+ unilat+'&long='+unilong +'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose) {paramz = 'purpose='+purpose+'&min_price='+min_price+'&max_price='+max_price; }
        else if( bedrooms){paramz ='bedrooms='+bedrooms+'&min_price='+min_price+'&max_price='+max_price; }
        else if( house_type){paramz ='house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        
        loadsearch(paramz);

        
        console.log(paramz);})
    console.log(searcher);
    


  function findCity(name) {
      markers = {};
           currentId = 0;
infowindows = {};


      
        var http = new XMLHttpRequest();
        var url = 'https://kupeza.co.zm/api/maps';
        var params = 'city='+name;
        console.log(params);
        http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            var myObj = JSON.parse(this.responseText);
         
            //alert(http.responseText);
          
            divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
var notices = document.getElementById('notices'); 
 
notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings    <strong>'+ myObj.data.length+'</strong></p>';
     if(unilong){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to '+ searchadd+'   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
            for ( var i = 0; i < myObj.data.length; i++) {
                
                 bangalore = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
               if(i == 0){
                        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: bangalore,
                              streetViewControl: false,

                                        fullscreenControl: false,

        });
                 google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
                        loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          console.log(event.latLng);
        });
        google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });
    

         }
         
              var price =  "K" +String(Math.ceil(myObj.data[i].price));
                             var address = String(myObj.data[i].address);
                             var bathrooms = String(myObj.data[i].bathrooms);
                                                          var route = String(myObj.data[i].route);

                             var state = String(myObj.data[i].purpose);
                             var title = String(myObj.data[i].title);
                                                          var bedrooms = String(myObj.data[i].bedrooms);
                                                          
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                                         var id = uniqueId();

            var contentString =  '<a href="'+route+'" ><div class="infowindow" onmouseleave="markerleave('+id+')"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';

            addMarker(mycenter, map ,contentString ,myObj.data[i].purpose,id);
            if(!myObj.data[i].route){}



              divs.innerHTML +='<a href="'+route+'" onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"   ><div class="k-property-card"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';
               
            }
            
                  var classname = document.getElementsByClassName("infowindow");
              console.log(classname)
              for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseout', CloseInfoWindow, false);
    console.log("jim");
}

            //console.log(myObj.longitude,myObj.latitude);
            }
        }
    http.send(params);  
      
      
  }
  searcher.addEventListener('mouseleave',
    function () {
        
                document.getElementById("searchbutton").disabled = true;

        
        var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         var myObj = JSON.parse(this.responseText);
           
        if(myObj.status=="OK")
        
        {
           var gh = myObj.results[0].geometry; 
           //google.maps.event.trigger(map, 'resize');
           //map.setCenter(gh.location);
           var uniloc = gh.location
            unilat = uniloc.lat;
            unilong = uniloc.lng;
            searchadd =  searcher.value;
                    document.getElementById("searchbutton").disabled = false;

           //uniparams +='lat' 
           console.log(unilat,unilong )
  
            
            
        }
      
      console.log(myObj.status);
              //findCity(searcher.value);

    }
  };
  xhttp.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address="+searcher.value +"&key=AIzaSyCQuDQmtiHkS7CcriyEiYXWja3ODrG4vFI", true);
  xhttp.send();
        
        
    }
);
    // Add marker to the map.
    


    function addMarker(location, map ,contentString ,purpose,id) {
        
             var renticon = {
    path: 'M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0',
    //fillColor: '#811fd3',
    fillColor: '#fc8d04',
    fillOpacity: 1,
    scale: 0.9,
    strokeColor: '#fff',
    strokeWeight: 3
    
    
  };
  
          var saleicon = {
    path: 'M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0',
    fillColor: '#811fd3',
    //fillColor: '#2FED88',
    fillOpacity: 1,
    scale: 0.9,
    strokeColor: '#fff',
    strokeWeight: 3
    
    
  };
  
  
          var oicon = {
    path: 'M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0',
    fillColor: 'gold',
    //fillColor: '#2FED88',
    fillOpacity: 1,
    scale: 0.9,
    strokeColor: '#fff',
    strokeWeight: 3
    
    
  };
  
  
  if(purpose =="rent") { 
      
         var marker = new google.maps.Marker({
          position: location,
                  id: id,

        icon: renticon,
          map: map
        });
        
      
  } else if(purpose =="sale") {  
      
      var marker = new google.maps.Marker({
          position: location,
                  id: id,

        icon: saleicon,
          map: map
        });
        
      
  }
  
  else {  
      
      var marker = new google.maps.Marker({
          position: location,
        id: id,
        icon: oicon,
          map: map
        });
        
      
  }
  
   var infowindow = new google.maps.InfoWindow({
          content: contentString,
          maxWidth: 200
        });
        
  markers[id] = marker; 
infowindows[id] = infowindow;
//infowindowz = infowindow;
//console.log(purpose);
     
       
    
    
        google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                //var content = contentString;
                //infowindow.setContent(content );
                infowindowz = infowindow;
                infowindow.open(map, marker);
                                infowindow.setPosition(location);

                }
              })(marker));
              
                     google.maps.event.addListener(marker, 'mouseout', (function(marker) {
            return function() {
                  setTimeout(function(){infowindow.close();}, 1000);

                         
                        console.log("john");
               }
              })(marker));
              
                 google.maps.event.addListener(infowindow, 'mouseover', (function() {
            //infowindow.close();
                  //infowindowz = infowindow;
                infowindow.open(map, marker);
                infowindow.setPosition(location);

   
    
})(infowindow));
              
        google.maps.event.addListener(infowindow, 'mouseout', (function() {
            infowindow.close();
   
    
})(infowindow));
              
              
        
              
              
               // google.maps.event.addListener(marker, 'mouseout', function(){
          //infowindow.close();
       //});
    }
      
    //loads marker locations  
    function loadLoc(long , lat) {
              markers = {};
                   currentId = 0;
                   infowindows = {};



        var http = new XMLHttpRequest();
        var url = 'https://kupeza.co.zm/api/maps';
        var params = 'longitude='+long+'&latitude='+lat;
        console.log(params);
        http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            var myObj = JSON.parse(this.responseText);
              var myObj = JSON.parse(this.responseText);
         
            //alert(http.responseText);
          
            divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
            var notices = document.getElementById('notices'); 
       
notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings    <strong>'+ myObj.data.length+'</strong></p>';
     if(unilong){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to '+ searchadd+'   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
                            // bangalore = { lat: lat, lng: long };

            
            //       map = new google.maps.Map(document.getElementById('map'), {
          //zoom: 12,
          //center: bangalore
        //});
        //         google.maps.event.addListener(map, 'click', function(event) {
         //              let myLat = event.latLng.lat();
         //   let myLng = event.latLng.lng();
         //               loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
         // console.log(event.latLng);
        //});

            for ( var i = 0; i < myObj.data.length; i++) {
                
                 bangalore = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                 
                   if (i==0){
                     
                     
                     
            
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: bangalore,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });
                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
                        loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          console.log(event.latLng);
        });
                 }
                 
                 var urls =  String(myObj.data[i].media_url);
      
         
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
             var price =  "K" +String(Math.ceil(myObj.data[i].price));
                             var address = String(myObj.data[i].address);
                             var bathrooms = String(myObj.data[i].bathrooms);
                             var state = String(myObj.data[i].purpose);
                             var title = String(myObj.data[i].title);
                                                          var bedrooms = String(myObj.data[i].bedrooms);
                                                                                       var route = String(myObj.data[i].route);

                                                          
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                           var id = uniqueId();

            var contentString = '<a href="'+route+'"><div class="infowindow" onmouseleave="markerleave('+id+')"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';;

            addMarker(mycenter, map ,contentString ,myObj.data[i].purpose,id);
            if(!myObj.data[i].route){}



              divs.innerHTML +='<a href="'+route+'" onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"  ><div class="k-property-card"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';
               
            }
            
                  var classname = document.getElementsByClassName("infowindow");
              console.log(classname)
              for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseout', CloseInfoWindow, false);
    console.log("jim");
}

            //console.log(myObj.longitude,myObj.latitude);
            }
        }
    http.send(params);
    }
    
    
         function loadsearch(paramz) {
                   markers = {};
                        currentId = 0;
                        infowindows = {};



        var http = new XMLHttpRequest();
        var url = 'https://kupeza.co.zm/api/searchmp';
        //var params = 'longitude='+long+'&latitude='+lat;
       // console.log(params);
        http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            var myObj = JSON.parse(this.responseText);
              var myObj = JSON.parse(this.responseText);
         
            //alert(http.responseText);
          
            divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
            var notices = document.getElementById('notices'); 
notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings    <strong>'+ myObj.data.length+'</strong></p>';
     if(unilong){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to '+ searchadd+'   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
            console.log(myObj);
                            // bangalore = { lat: lat, lng: long };

           

            for ( var i = 0; i < myObj.data.length; i++) {
                
                 bangalore = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                 console.log(myObj.data);
                 
                 if (i==0){
                     google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });
                     
                     
            
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: bangalore,
                              streetViewControl: false,
                              fullscreenControl: false,

        });
                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
                        loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          console.log(event.latLng);
        });
                 }
                 
                 var urls =  String(myObj.data[i].media_url);
      
         
            //mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
             var price =  "K" +String(Math.ceil(myObj.data[i].price));
                             var address = String(myObj.data[i].address);
                             var bathrooms = String(myObj.data[i].bathrooms);
                             var state = String(myObj.data[i].purpose);
                             var title = String(myObj.data[i].title);
                             var route = String(myObj.data[i].route);
                                                          var bedrooms = String(myObj.data[i].bedrooms);
                                                          
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            var id = uniqueId();
            var contentString =  '<a href="'+route+'"><div class="infowindow" onmouseleave="markerleave('+id+')"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';;
            addMarker(mycenter, map ,contentString ,myObj.data[i].purpose,id);
            if(!myObj.data[i].route){}
              divs.innerHTML +='<a href="'+route+'" onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"  ><div class="k-property-card"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';
            }
            
                  var classname = document.getElementsByClassName("infowindow");
              console.log(classname)
              for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseout', CloseInfoWindow, false);
    console.log("jim");
}

            //console.log("gene",myObj.data[i].latitude,myObj.data[i].latitude);
            }
        }
    http.send(paramz);
    }
    
     function loadInfo() {
     markers = {};
     infowindows = {};

     currentId = 0;


        var http = new XMLHttpRequest();
        var url = 'https://kupeza.co.zm/api/allmaps';
        //var params = 'longitude='+long+'&latitude='+lat;
       // console.log(params);
        http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            var myObj = JSON.parse(this.responseText);
              var myObj = JSON.parse(this.responseText);
         
            //alert(http.responseText);
          
            divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
            var notices = document.getElementById('notices'); 
notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings    <strong>'+ myObj.data.length+'</strong></p>';
     if(unilong){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to '+ searchadd+'   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
                            // bangalore = { lat: lat, lng: long };

           

            for ( var i = 0; i < myObj.data.length; i++) {
                
                 bangalore = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                 console.log(myObj.data);
                 
                 if (i==0){
                     
                     
                     
            
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: bangalore,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });
                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
                        loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          console.log(event.latLng);
        });
                 }
                 
                 var urls =  String(myObj.data[i].media_url);
      
         
            //mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
             var price =  "K" +String(Math.ceil(myObj.data[i].price));
                             var address = String(myObj.data[i].address);
                             var bathrooms = String(myObj.data[i].bathrooms);
                             var state = String(myObj.data[i].purpose);
                             var title = String(myObj.data[i].title);
                             var route = String(myObj.data[i].route);
                                                          var bedrooms = String(myObj.data[i].bedrooms);
                                                          
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            var id = uniqueId();
            var contentString =  '<a href="'+route+'"><div class="infowindow" onmouseleave="markerleave('+id+')"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';;

            addMarker(mycenter, map ,contentString ,myObj.data[i].purpose,id);
            if(!myObj.data[i].route){}
              divs.innerHTML +='<a href="'+route+'" onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"  ><div class="k-property-card"><div class="k-property-image"><img itemprop="image" src="'+myObj.data[i].media_url+'" class="img-responsive" alt="'+title+'"><div class="k-details"></div>   <div class="row k-row-1">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row"><div class="col-xs-12 " style="margin-bottom: -10px;"><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div></div>'
            +'<div class="row"><div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div><div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div><div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';
               
            }
            
                  var classname = document.getElementsByClassName("infowindow");
              console.log(classname)
              for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseout', CloseInfoWindow, false);
    console.log("jim");
}

            //console.log("gene",myObj.data[i].latitude,myObj.data[i].latitude);
            }
        }
    http.send();
    }
    
    function initialize() {  loadInfo() ;}
    function loadDoc() {
              markers = {};

        var xhttp = new XMLHttpRequest();
            map = new google.maps.Map(document.getElementById('map'), {
            zoom: myzoom,
            center: mycenter,
            gestureHandling: 'greedy',
            mapTypeId: maptype
            });
        xhttp.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200){
              //document.getElementById("demo").innerHTML =
              //this.responseText;
              
        var myObj = JSON.parse(this.responseText);
            for ( var i = 0; i < myObj.length; i++) {
              
            if(i == 0){
            map = new google.maps.Map(document.getElementById('map'), {
              zoom: myzoom,
              center: mycenter,
              gestureHandling: 'greedy',
              mapTypeId: maptype
              });
            
        google.maps.event.addListener(map, 'mouseup', function(event) {
            //addMarker(event.latLng, map);
            let myLat = map.center.lat();
            let myLng = map.center.lng();
            mycenter = { lat: myLat , lng: myLng };
            myzoom = map.zoom;
            loadLoc(myLng ,myLat);
            console.log(myLat, myLng);
            });
        }
                             
        var contentString = '<div id="content" width="300">'+
                          '<div id="siteNotice" width="300">'+
                          '</div>'+
                          '<img src="'+myObj[i].media_url+'" alt="Paris" height="100">' +
                          '<h3 id="firstHeading" class="firstHeading">'+myObj[i].title+'</h3>'+
                          '<div id="bodyContent">'+
                          '<p>'+myObj[i].description+'.</p>'+
                          '<p><b>'+myObj[i].purpose+'</b></p>'+
                          '</div>'+
                          '</div>';
                    console.log(mycenter);
            }
        }
      };
      xhttp.open("GET", "https://kupeza.co.zm/mapview", true);
      xhttp.send();
    }
    loadDoc();
    google.maps.event.addDomListener(window, 'load', initialize);
    
    $(document).ready(function() {
        $('#shortBySelect').change(function(){
            var form_input = $('#listingFilterForm').serialize();
            location.href = '{{ route('listing') }}?' + form_input + '&shortBy=' + $(this).val();
        });
    });
        
        var contain;
        function searchDrops(modalId){
            contain = modalId
            switch(modalId){
                case "#dropdown-propertytype":
                    $(modalId).toggle();
                    break;
                case "#dropdown-location":
                    $(modalId).toggle();
                    break;
                case "#dropdown-price":
                    $(modalId).toggle();
                    break;
                case "#dropdown-beds":
                    $(modalId).toggle();
                    break;
                case "#dropdown-rentals":
                    $(modalId).toggle();
                    break;
                default:
                    console.log("invalid click")
            }
        }
        
        $(document).mouseup(function(e)
        {
            var container = $(contain);
            
            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0)
            {
                container.hide();
            }
        });

        // setTimeout(function(){
        //     $("#map").css("height","100%");
        // },10000);
        function generate_option_from_json(jsonData, fromLoad){
            //Load Category Json Data To Brand Select
            if (fromLoad === 'category_to_sub_category'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> <?php echo trans('app.select_a_sub_category') ?> </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].category_name +' </option>';
                    }
                    $('#sub_category_select').html(option);
                    $('#sub_category_select').select2();
                }else {
                    $('#sub_category_select').html('<option value="">@lang('app.select_a_sub_category')</option>');
                    $('#sub_category_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }else if (fromLoad === 'category_to_brand'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> <?php echo trans('app.select_a_brand') ?> </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].brand_name +' </option>';
                    }
                    $('#brand_select').html(option);
                    $('#brand_select').select2();
                }else {
                    $('#brand_select').html('<option value="">@lang('app.select_a_brand')</option>');
                    $('#brand_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }else if(fromLoad === 'country_to_state'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> @lang('app.select_state') </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].state_name +' </option>';
                    }
                    $('#state_select').html(option);
                    $('#state_select').select2();
                }else {
                    $('#state_select').html('<option value="" selected> @lang('app.select_state') </option>');
                    $('#state_select').select2();
                }
                $('#loaderListingIcon').hide('slow');

            }else if(fromLoad === 'state_to_city'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> @lang('app.select_city') </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].city_name +' </option>';
                    }
                    $('#city_select').html(option);
                    $('#city_select').select2();
                }else {
                    $('#city_select').html('<option value="" selected> @lang('app.select_city') </option>');
                    $('#city_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }
        }

        $(function(){

            $('[name="country"]').change(function(){
                var country_id = $(this).val();
                $('#loaderListingIcon').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('get_state_by_country') }}',
                    data : { country_id : country_id,  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        generate_option_from_json(data, 'country_to_state');
                    }
                });
            });
            $('[name="state"]').change(function(){
                var state_id = $(this).val();
                $('#loaderListingIcon').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('get_city_by_state') }}',
                    data : { state_id : state_id,  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        generate_option_from_json(data, 'state_to_city');
                    }
                });
            });
        });
        $(function(){
            $('#showGridView').click(function(){
                $('.ad-box-grid-view').hide();
                $('.ad-box-list-view').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('switch_grid_list_view') }}',
                    data : { grid_list_view : 'grid',  _token : '{{ csrf_token() }}' },
                });
            });
            $('#showListView').click(function(){
                $('.ad-box-grid-view').show();
                $('.ad-box-list-view').hide();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('switch_grid_list_view') }}',
                    data : { grid_list_view : 'list',  _token : '{{ csrf_token() }}' },
                });
            });
        });
</script>

<script>
    @if(session('success'))
            toastr.success('{{ session('success') }}', '<?php echo trans('app.success') ?>', toastr_options);
        @endif
</script>
@endsection