<?php $__env->startSection('title'); ?> <?php if( ! empty($title)): ?> <?php echo e($title); ?> | <?php endif; ?> ##parent-placeholder-3c6de1b7dd91465d437ef415f94f36afc1fbc8a8## <?php $__env->stopSection(); ?>
<?php $__env->startSection('page-css'); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('main'); ?>

<style>
  #modal-address i,
  #modal-city i,
  #modal-type i,
  #modal-bathrooms i,
  #modal-beds i,
  #modal-agent-email i,
  #modal-agent i,
  #modal-agent-number i,
  #modal-posted i,
  #modal-floors i,
  #modal-common-bath i,
  #modal-attached-bath i,
  #modal-dining-space i,
  #modal-living-room i {
    color: #a27cbf;
    margin-right: 5px;
  }

  .biggerWidth {
    border-radius: 5px;
    cursor: pointer;
    height: auto;
    width: 100%;
    transition: 0.3s;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .biggerHeight {

    border-radius: 5px;
    cursor: pointer;
    height: 100%;
    width: auto;
    transition: 0.3s;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .contact-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000000000;
    /* Sit on top */
    //padding-top: 100px; /* Location of the box */
    left: 0;
    vertical-align: middle;
    //display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }

  /* Modal Content */
  .contact-modal-content {
    background-color: #fefefe;
    margin: auto auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
  }

  /* The Close Button */
  .contact-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .contact-close:hover,
  .contact-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .modalImages {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 100000000000;
    /* Sit on top */
    left: 0;
    top: 0;
    vertical-align: middle;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
  }

  /* Modal Content (image) */
  .modal-images-content {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .second-peace {
    display: block;
    vertical-align: middle;
    position: relative;
    width: 80%;
    max-width: 700px;
    height: 100%;
    margin: auto;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

  }

  .inner-content {

    float: left;
  }

  .one-peace {
    width: 100%;
    height: 100%;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

  }

  .modal-images-content {
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    display: inline-block;

  }

  @-webkit-keyframes zoom {
    from {
      -webkit-transform: scale(0)
    }

    to {
      -webkit-transform: scale(1)
    }
  }

  @keyframes  zoom {
    from {
      transform: scale(0)
    }

    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes example {
    from {
      background-color: #ddd;
    }

    to {
      background-color: #eee;
    }
  }

  /* Standard syntax */
  @keyframes  example {
    from {
      background-color: #ddd;
    }

    to {
      background-color: #eee;
    }
  }

  /* The Close Button */
  .closeimgemodal {
    position: fixed;
    top: 45px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

  .next {
    position: fixed;
    top: 40%;
    right: 5%;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

  .back {
    position: fixed;
    top: 40%;
    left: 5%;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  /* 100% Image Width on Smaller Screens */
  @media  only screen and (max-width: 700px) {
    .modal-content {
      width: 100%;
    }
  }

  .baguetteBox-button {
    background-color: transparent !important;
    border: 0px;
  }

  .servicemodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 10000000;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }

  /* Modal Content */
  .servicemodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    max-width: 400px;
  }

  /* The Close Button */
  .serviceclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .serviceclose:hover,
  .serviceclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  
  .provider-img
  {
    max-height: 250px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 350px;
  }
  
  .provider-title
  {
    text-align: center;
    font-size: large;
    /*That orange colour*/
    color:#fc8d04;
    /*color: #a930bd;*/
  }
  
  .provider-price
  {
    text-align: center;
    color: #a930bd;
    border-bottom: 1px solid;
    padding-bottom: 20px;
  }
  
  .provider-para
  {
      margin-top:30px;
      /**/
  }
  
  .provider-display
  {
    border-top: 1px solid #fc8d04;
    margin-top: 20px;
  }
  .contact-provider
  {
    background-color: #fc8d04;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 15px;
  }
  
  .contact-provider:hover
  {
    background-color: #a930bd;
    color: white!important;
    transition:0.3s;
  }
  
  .expense-row .row:hover{
      cursor:pointer;
  }

</style>
<?php if(count($providers) > 0): ?>
<div id="displayInsurance" class="servicemodal">

  <!-- Modal content -->
  <div class="servicemodal-content">
    <span class="serviceclose">&times;</span>
    <div style="padding-top: 15px;padding-bottom: 5px;">

      <select name="providers" class="form-control" onchange="showModalContent(this);">
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "INSURANCE"): ?>
        <option value="insurance-display-<?php echo e($count); ?>"><?php echo e($provider->name); ?> </option>
        <?php
        $count++;
        ?>
        <?php endif; ?>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>
      <div>
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "INSURANCE"): ?>
        <div id='insurance-display-<?php echo e($count); ?>' class='provider-display' <?php if($count !=0): ?> style="display:none;" <?php endif; ?>>

          <img src="/uploads/images/serviceproviders/<?php echo e($provider->logo); ?>" class="img-responsive provider-img"
             />
          <h5 class='provider-title'><?php echo e($provider->name); ?> </h5>
          <h5 class='provider-price'>ZMK <span class='provider-amount'><?php echo e($provider->price); ?></span> </h5>
          <p class='provider-para'>
            <?php echo e($provider->description); ?>

          </p>
          <a href='#' class='contact-provider'>Contact</a>
        </div>
        <?php
        $count++;
        ?>
        <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </div>
    </div>
  </div>

</div>
<div id="displayWater" class="servicemodal">

  <!-- Modal content -->
  <div class="servicemodal-content">
    <span class="serviceclose">&times;</span>
    <div style="padding-top: 15px;padding-bottom: 5px;">

      <select name="providers" class="form-control" onchange="showModalContent(this);">
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "WATER"): ?>
        <option value="water-display-<?php echo e($count); ?>"><?php echo e($provider->name); ?> </option>
        <?php
        $count++;
        ?>
        <?php endif; ?>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>
      <div>
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "WATER"): ?>
        <div id='water-display-<?php echo e($count); ?>' class='provider-display' <?php if($count !=0): ?> style="display:none;" <?php endif; ?>>
          <img src="/uploads/images/serviceproviders/<?php echo e($provider->logo); ?>" class="img-responsive provider-img"
             />
          <h5 class='provider-title'><?php echo e($provider->name); ?> </h5>
          <h5 class='provider-price'>ZMK <span class='provider-amount'><?php echo e($provider->price); ?></span> </h5>
          <p class='provider-para'>
            <?php echo e($provider->description); ?>

          </p>
          <a href='#' class='contact-provider'>Contact</a>
        </div>
        <?php
        $count++;
        ?>
        <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </div>
    </div>
  </div>

</div>

<div id="displayInternet" class="servicemodal">

  <!-- Modal content -->
  <div class="servicemodal-content">
    <span class="serviceclose">&times;</span>
    <div style="padding-top: 15px;padding-bottom: 5px;">

      <select name="providers" class="form-control" onchange="showModalContent(this);">
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "INTERNET"): ?>
        <option value="internet-display-<?php echo e($count); ?>"><?php echo e($provider->name); ?></option>
        <?php
        $count++;
        ?>
        <?php endif; ?>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>
      <div>
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "INTERNET"): ?>
        <div id='internet-display-<?php echo e($count); ?>' class='provider-display' <?php if($count !=0): ?> style="display:none;" <?php endif; ?>>
          <img src="/uploads/images/serviceproviders/<?php echo e($provider->logo); ?>" class="img-responsive provider-img"
             />
          <h5 class='provider-title'><?php echo e($provider->name); ?> </h5>
          <h5 class='provider-price'>ZMK <span class='provider-amount'><?php echo e($provider->price); ?></span> </h5>
          <p class='provider-para'>
            <?php echo e($provider->description); ?>

          </p>
          <a href='#' class='contact-provider'>Contact</a>
        </div>
        <?php
        $count++;
        ?>
        <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </div>
    </div>
  </div>

</div>
<div id="displayTelevision" class="servicemodal">

  <!-- Modal content -->
  <div class="servicemodal-content">
    <span class="serviceclose">&times;</span>
    <div style="padding-top: 15px;padding-bottom: 5px;">

      <select name="providers" class="form-control" onchange="showModalContent(this);">
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "TELEVISION"): ?>
        <option value="television-display-<?php echo e($count); ?>"><?php echo e($provider->name); ?> </option>
        <?php
        $count++;
        ?>
        <?php endif; ?>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>
      <div>
        <?php
        $count = 0;
        ?>
        <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($provider->type == "TELEVISION"): ?>
        <div id='television-display-<?php echo e($count); ?>' class='provider-display' <?php if($count !=0): ?> style="display:none;" <?php endif; ?>>
          <img src="/uploads/images/serviceproviders/<?php echo e($provider->logo); ?>" class="img-responsive provider-img"
             />
          <h5 class='provider-title'><?php echo e($provider->name); ?> </h5>
          <h5 class='provider-price'>ZMK <span class='provider-amount'><?php echo e($provider->price); ?></span></h5>
          <p class='provider-para'>
            <?php echo e($provider->description); ?>

          </p>
          <a href='#' class='contact-provider'>Contact</a>
        </div>
        <?php
        $count++;
        ?>
        <?php endif; ?>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </div>
    </div>
  </div>

</div>

<?php endif; ?>

<div id="mySeviceModal" class="servicemodal">

  <!-- Modal content -->
  <div class="servicemodal-content">
    <span class="serviceclose">&times;</span>
    <p>

      <!-- Modal content -->

      <div class="contact_agent">
        <?php echo e(Form::open(['route'=>'contact_agent', 'role'=> 'form'])); ?>


        <h2>Contact Bank</h2>
        <div class="form-group <?php echo e($errors->has('name')? 'has-error':''); ?> con_input">
          <i class="fa fa-user icons"></i><input type="text" class="form-control contact_ag_input" name="Contact-name"
            placeholder="Your Name" required="required" />
          <?php echo $errors->has('name')? '<p class="help-block">'.$errors->first('name').'</p>':''; ?>

        </div>
        <div class="form-group <?php echo e($errors->has('name')? 'has-error':''); ?> con_input">
          <i class="fa fa-phone icons"></i><input type="text" class="form-control contact_ag_input" name="Contact-name"
            placeholder="Phone" required="required" />
          <?php echo $errors->has('phone')? '<p class="help-block">'.$errors->first('phone').'</p>':''; ?>

        </div>
        <div class="form-group <?php echo e($errors->has('email')? 'has-error':''); ?> con_input">
          <i class="fa fa-envelope icons"></i><input type="email" class="form-control contact_ag_input"
            placeholder="Email" name="Contact-email" required="required" />
          <?php echo $errors->has('email')? '<p class="help-block">'.$errors->first('email').'</p>':''; ?>

        </div>
        <span>
          <div class="form-group <?php echo e($errors->has('message')? 'has-error':''); ?>">
            <textarea name="Contact-message" id="Contact-message2" class="form-control" value="I am interested in "
              required="required" style="height: 80px;"></textarea>
            <?php echo $errors->has('message')? '<p class="help-block">'.$errors->first('message').'</p>':''; ?>

          </div>
        </span>
        <span>
          <div class="form-group">
            <button type="submit" class="btn btn-primary" id="contact_agent_btn2"><strong>Send Request To
                Bank</strong></button>
          </div>
        </span>
        <span class="button-checkbox">
          <label><input type="checkbox" name="agree" value="1" /> I want financing information</label>
        </span>


        <?php echo e(Form::close()); ?>


        <span>
          <p id="contact_agent_p2">
            By pressing Contact Agent, you agree that the Kupeza Group and real estate professionals may call/text you
            about
            your inquiry, which may involve use of automated means and prerecorded/artificial voices. You don't need to
            consent as a condition of buying any property, goods or services. Message/data rates may apply. You also
            agree
            to our <a href="page/terms-and-condition">Terms of Use</a>. Kupeza does not endorse any real estate
            professionals.
          </p>

      </div>

    </p>
  </div>

</div>
<div id="myModal" class="modal-c">
  <div class="modal-close-big" style="">
    <span class="close-c">&times;</span>
  </div>
  <!-- Modal content -->
  <div class="modal-content-c">
    <div class="modal-close-small" style="">
      <span class="close-c">&times;</span>
    </div>

    <div class="row" style="height:100%;">

      <div class="col-md-8 image-area" id="modal-images-col2">

        <div class="modal-images-col" style="padding: 0 15px;" id="modal-images-col">'<div
            class="zsg-notification-bar zsg-content-item">
            <h3 class="zsg-content_collapsed">Images Loading.........
          </div>
        </div>
      </div>
      <div class="col-md-4 modal-content-area" id="modal-content-area2">
        <div id="anem">
        </div>


        <div class="modal-bottom-half">
          <div class="row desc-row" style="border-bottom: 2px solid #811fd3; padding-bottom:10px;margin:0;">


          </div>






          <div id="mapper" style="max-width: 700px; max-height:  500px;"></div>

          <div class="ads-detail bg-white">
            <legend><b>Monthly Expenses</b> </legend>
            <p><em>Click a legend to toggle expense</em> </p>
            <!--@bookmark3  -->
            <div>
               <canvas id="myChart" width="320" height="400" onclick="openModalChart(event)"></canvas> 
            </div>
            <p><em>Click a slice to get more details</em> </p>

            <div class="expense-row" >
                <h4>Mortgage Monthly Estimate</h4>
                <div class='row'>
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fas fa-home" style="color:rgba(157, 41, 178,1);"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 id="mortgageamount" class="" >
                            <b>Principal and Interest</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <h5 class="mortgageamount expense-amount">
                            <b>143</b>
                        </h5>
                    </div>
                
                </div>
                <div class='row' id="InsuranceService">
                    <div class='col-xs-3' >
                        <h5>
                            <i class="fas fa-house-damage" style="color:rgba(252, 90, 11,1);"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Insurance</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <?php
                        $expense = App\Service_provider::where([['type','=','INSURANCE'],['status','=','0']])->first();
                        ?>
                        <h5 class="expense-amount">
                            K<span id='insurance-price'><?php if(isset($expense)): ?><?php echo e($expense->price); ?><?php else: ?> 500 <?php endif; ?></span>
                        </h5>
                    </div>
                
                </div>
                <div class='row' >
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fa fa-money" aria-hidden="true" style="color:rgba(82, 109, 255,1);"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Mortgage Insurance</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <h5 class="expense-amount" id='mortgage-insurance'>
                            <?php
                            $expense = App\Service_provider::where([['type','=','MORTGAGE INSURANCE'],['status','=','0']])->first();
                            ?>
                            K<span id='mortgage-insurance-price'><?php if(isset($expense)): ?><?php echo e($expense->price); ?><?php else: ?> 500 <?php endif; ?></span>
                        </h5>
                    </div>
                
                </div>
                <div class='row' >
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fa fa-money" aria-hidden="true" style="color:rgba(255, 235, 60,1);"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Property Taxes</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        
                        <?php
                        $property_tax = App\Service_provider::where('type','=','PROPERTY TAXES')->first();
                        ?>
                        <span id='property-tax' style='display:none;'><?php if(isset($property_tax)): ?><?php echo e($property_tax->rate); ?><?php else: ?> 5 <?php endif; ?> </span>
                        <h5 class="expense-amount" id='property-taxes'>
                            K<span id='property-taxes-price'>500</span>
                        </h5>
                    </div>
                
                </div>
                <h4>Housing Expenses</h4>
                <div class='row' id="WaterService">
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fas fa-tint"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Water</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <h5 class="expense-amount">
                            <?php
                            $water_price = App\Service_provider::where([['type','=','WATER'],['status','=','0']])->first();
                            ?>
                            K<span id='water-price'><?php if(isset($water_price)): ?><?php echo e($water_price->price); ?><?php else: ?> 500 <?php endif; ?> </span>
                        </h5>
                    </div>
                
                </div>
                <div class='row' id="InternetService">
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fas fa-wifi"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Internet</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <h5 class="expense-amount">
                            <?php
                            $expense = App\Service_provider::where([['type','=','INTERNET'],['status','=','0']])->first();
                            ?>
                            K<span id='wifi-price'><?php if(isset($expense)): ?><?php echo e($expense->price); ?><?php else: ?> 500 <?php endif; ?></span>
                        </h5>
                    </div>
                
                </div>
                <div class='row' id="TelevisionSrvice">
                    <div class='col-xs-3'>
                        <h5>
                            <i class="fa fa-television"></i>
                        </h5>
                    </div>
                    <div class='col-xs-5'>
                        <h5 class="">
                            <b>Television</b>
                        </h5>
                    </div>
                    <div class='col-xs-4'>
                        <h5 class="expense-amount">
                            <?php
                            $expense = App\Service_provider::where([['type','=','TELEVISION'],['status','=','0']])->first();
                            ?>
                            K<span id='television-price'><?php if(isset($expense)): ?><?php echo e($expense->price); ?><?php else: ?> 500 <?php endif; ?></span>
                        </h5>
                    </div>
                
                </div>


              <!--<div class="expense-col">-->
              <!--  <h1><i class="fas fa-home"></i></h1>-->
              <!--  <h5 class="" id="mortgageamount"><b>Mortgage</b></h5>-->
              <!--  <h4 class="mortgageamount expense-amount"><b>143</b></h4>-->
              <!--</div>-->
              <!--<div class="expense-col" id="InsuranceService">-->
              <!--  <i class="fas fa-house-damage"></i>-->
              <!--  <h5 class="display-text"><b>Insurance</b></h5>-->
              <!--  <h4 class="expense-amount">K750</h4>-->
              <!--</div>-->
              <!--<div class="expense-col" id="WaterService">-->
              <!--  <i class="fas fa-tint"></i>-->
              <!--  <h5 class="display-text"><b>Water</b></h5>-->
              <!--  <h4 class="expense-amount">K500</h4>-->
              <!--</div>-->
              <!--<div class="expense-col" id="InternetService">-->
              <!--  <i class="fas fa-wifi"></i>-->
              <!--  <h5 class="display-text"><b>Internet</b></h5>-->
              <!--  <h4 class="expense-amount">K650</h4>-->
              <!--</div>-->
              <!--<div class="expense-col" id="TelevisionSrvice">-->
              <!--  <i class="fa fa-television"></i>-->
              <!--  <h5 class="display-text"><b>Television</b></h5>-->
              <!--  <h4 class="expense-amount">K900</h4>-->
              <!--</div>-->


            </div>
            
            <div class='row' style="margin-top: 20px;display:none;">
                <div class='col-xs-8'>
                    <h4  class="display-text"><b>Total Monthly Expenses</b> </h4>        
                </div>
                <div class='col-xs-4'>
                    <h4  class="expense-amount"><b><span class="total-expenses"
                  id="total-expenses">35039</span></b></h4>
                </div>
            </div>

            
            
          </div>
          <div class="ads-detail bg-white" id="mortage_calculator">
            <legend><b>Mortgage Calculator</b></legend>
            <div class="">
              <div class="form-group">
                <h4 class="display-text"><b>Select Mortage Provider</b></h4>

                <select name="providers" class="form-control" id="mortgageProvider" onchange="changeRate()">
                  <option value="10">Default Rate </option>
                  <?php if(count($providers) > 0): ?>
                  <?php $__currentLoopData = $providers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $provider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                  <?php if($provider->type == "MORTGAGE"): ?>
                  <option value="<?php echo e($provider->rate); ?>"><?php echo e($provider->name); ?> </option>
                  <?php endif; ?>

                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  <?php endif; ?>
                </select>

              </div>
              <div class="form-group" style="margin-top:10px">
                <h4 class="display-text"><b>Price</b></h4>
                <input type="number" class="form-control" id="principal" onchange="recalculateMortgage()">
              </div>
              <div class="form-group">
                <h4 class="display-text"><b>Interest Rate</b></h4>
                <input type="number" class="form-control" id="rate" min="1" max="100" onchange="recalculateMortgage()">
              </div>
            </div>
            <div class="">
              <div class="form-group">
                <h4 class="display-text"><b>Years</b></h4>
                <input type="text" onchange="recalculateMortgage()" onkeyup="recalculateMortgage()"
                  class="form-control" id="years" min="1" max="20">
              </div>


              <div class="form-group" style="margin-top:10px">
                <h3 class="display-text" style="text-align:center"><b>Mortgage Amount <br>Per Month</b></h3>
                <h3 style="text-align: center;" class="expense-amount"><b>K<span class="mortgageamount"
                      id="mortgageamount2">32,239</span>
                  </b> </h3>
              </div>
              <p><button id="CheckMortage" class="modal-purpose"
                  style="width:100%; color: #24292e;background-color: #eff3f6;background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); padding: 8px 30px;font-size: 16px;line-height: 20px;white-space: nowrap;vertical-align: middle;;display: inline-block;font-weight: bold;user-select: none;background-repeat: repeat-x;background-position: -1px -1px;background-size: 110% 110%;border: 1px solid rgba(27,31,35,.2);    border-radius: .25em">GET
                  PRE-QUALIFIED</button></p>


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

    </div>



  </div>

</div>


<div class="container-fluid" style="height:100%">

  <?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="row listing-search-nav-row">
    <div class="listing-search-nav-container">
      <nav class="navbar " style="margin-top: 15px;">
        <div class="container-fluid">

          <ul class="nav navbar-nav listing-search-nav">
            <li>
              <div class="form-group">
                <?php if(strcmp( $req, 'sale') == 0 ): ?>
                <input type="text" class="form-control" id="places" name="q" value="Lusaka" placeholder="Search Places">
                <?php elseif(strcmp( $req, 'rent') == 0 ): ?>
                <input type="text" class="form-control" id="places" name="q" value="Lusaka" placeholder="Search Places">
                <?php else: ?>
                <input type="text" class="form-control" id="places" placeholder="Search Places" name="q"
                  value="<?php echo e($req); ?>">
                <?php endif; ?>
              </div>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Rent or Sale
                <span class="caret"></span></a>
              <div id='purpose-dropdown' class="dropdown-menu" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="purpose_buy" class="radio-inliner">
                    <input type="radio" value="buy" id="purpose_buy" name="purpose"
                      <?php echo e(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"
                      <?php echo e($req == 'rent'? '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"
                      <?php echo e($req== 'sale'? 'checked="checked"' : ''); ?>>
                    For Sale
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Type
                <span class="caret"></span></a>
              <div id='listing-dropdown' class="dropdown-menu listing-type" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="type_all" class="radio-inliner">
                    <input type="radio" value="apartment" id="type_all" name="type"
                      <?php echo e(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"
                      <?php echo e(request('type') == 'apartment'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('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"
                      <?php echo e(request('type') == 'condos'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('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"
                      <?php echo e(request('type') == 'house'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('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"
                      <?php echo e(request('type') == 'land'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('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"
                      <?php echo e(request('type') == 'commercial_space'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('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"
                      <?php echo e(request('type') == 'villa'? 'checked="checked"' : ''); ?>>
                    <?php echo app('translator')->getFromJson('app.villa'); ?>
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </li>

            <!--BELOW ARE THE DROPDOWNS-->
            <!--BELOW ARE THE DROPDOWNS-->
            <!--HERE ARE THE DROPDOWNS-->
            <!--BELOW ARE THE DROPDOWNS-->
            <!--BELOW ARE THE DROPDOWNS-->
            <!--BELOW ARE THE DROPDOWNS-->
            <!--BELOW ARE THE DROPDOWNS-->

            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Min. Price
                <span class="caret"></span></a>
              <div id='min-price-dropdown' class="dropdown-menu" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="min_price_0" class="radio-inliner">
                    <input type="radio" value="0" id="min_price_0" name="min_price" checked>
                    K0
                    <span class="checkmark"></span>
                  </label>
                </div>

                <div class="search-radio-container">
                  <label for="min_price_1" class="radio-inliner">
                    <input type="radio" value="500" id="min_price_1" name="min_price">

                    K500
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_2" class="radio-inliner">
                    <input type="radio" value="1000" id="min_price_2" name="min_price">
                    K1,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_3" class="radio-inliner">
                    <input type="radio" value="5000" id="min_price_3" name="min_price">

                    K5,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_4" class="radio-inliner">
                    <input type="radio" value="10000" id="min_price_4" name="min_price">

                    K10,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_5" class="radio-inliner">
                    <input type="radio" value="50000" id="min_price_5" name="min_price">

                    K50,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_6" class="radio-inliner">
                    <input type="radio" value="100000" id="min_price_6" name="min_price">

                    K100,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_7" class="radio-inliner">
                    <input type="radio" value="500000" id="min_price_7" name="min_price">

                    K500,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_8" class="radio-inliner">
                    <input type="radio" value="1000000" id="min_price_8" name="min_price">

                    K1,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>

                <div class="search-radio-container">
                  <label for="min_price_9" class="radio-inliner">
                    <input type="radio" value="5000000" id="min_price_9" name="min_price">

                    K5,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="min_price_10" class="radio-inliner">
                    <input type="radio" value="10000000" id="min_price_10" name="min_price">

                    K10,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Max Price
                <span class="caret"></span></a>
              <div id='max-price-dropdown' class="dropdown-menu" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="max_price_1" class="radio-inliner">
                    <input type="radio" value="1000" id="max_price_1" name="max_price">
                    K1,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_2" class="radio-inliner">
                    <input type="radio" value="5000" id="max_price_2" name="max_price">
                    K5,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_3" class="radio-inliner">
                    <input type="radio" value="10000" id="max_price_3" name="max_price">
                    K10,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_4" class="radio-inliner">
                    <input type="radio" value="50000" id="max_price_4" name="max_price">
                    K50,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_5" class="radio-inliner">
                    <input type="radio" value="100000" id="max_price_5" name="max_price">
                    K100,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_6" class="radio-inliner">
                    <input type="radio" value="500000" id="max_price_6" name="max_price">
                    K500,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_7" class="radio-inliner">
                    <input type="radio" value="1000000" id="max_price_7" name="max_price">
                    K1,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_8" class="radio-inliner">
                    <input type="radio" value="5000000" id="max_price_8" name="max_price">
                    K5,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_9" class="radio-inliner">
                    <input type="radio" value="10000000" id="max_price_9" name="max_price">

                    K10,000,000
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="max_price_10" class="radio-inliner">
                    <input type="radio" value="1000000000000" id="max_price_10" name="max_price" checked>

                    K10,000,000+
                    <span class="checkmark"></span>
                  </label>
                </div>


              </div>
            </li>

            <!--END DROPDOWNS-->
            <!--END DROPDOWNS-->
            <!--END DROPDOWNS-->
            <!--END DROPDOWNS-->
            <!--END DROPDOWNS-->
            <!--END DROPDOWNS-->


            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Bedrooms
                <span class="caret"></span></a>
              <div id='bedroom-dropdown' class="dropdown-menu" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="bedrooms_0" class="radio-inliner">
                    <input type="radio" value="1" id="bedrooms_0" name="beds"
                      <?php echo e(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"
                      <?php echo e(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"
                      <?php echo e(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"
                      <?php echo e(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"
                      <?php echo e(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"
                      <?php echo e(request('beds') == 'commercial_space'? 'checked="checked"' : ''); ?>>
                    5+ Bedrooms
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </li>
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->
            <!--Distance Dropdown -->

            <li class="dropdown distance-dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Distance
                <span class="caret"></span></a>
              <div id='bedroom-dropdown' class="dropdown-menu" style="background-color: white;">
                <div class="search-radio-container">
                  <label for="distance_1" class="radio-inliner">
                    <input type="radio" value="ANY" id="distance_1" name="distance">
                    None
                    <span class="checkmark"></span>
                  </label>
                </div>

                <div class="search-radio-container">
                  <label for="distance_2" class="radio-inliner">
                    <input type="radio" value="10" id="distance_2" name="distance" checked>
                    10KMs
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="distance_3" class="radio-inliner">
                    <input type="radio" value="20" id="distance_3" name="distance">
                    20KMs
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="distance_4" class="radio-inliner">
                    <input type="radio" value="50" id="distance_4" name="distance">
                    50KMs
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="distance_5" class="radio-inliner">
                    <input type="radio" value="75" id="distance_5" name="distance">
                    75KMs
                    <span class="checkmark"></span>
                  </label>
                </div>
                <div class="search-radio-container">
                  <label for="distance_6" class="radio-inliner">
                    <input type="radio" value="100" id="distance_6" name="distance">
                    100KMs
                    <span class="checkmark"></span>
                  </label>
                </div>
              </div>
            </li>

            <!-- End Distance Dropdown -->
            <!-- End Distance Dropdown -->
            <!-- End Distance Dropdown -->
            <!-- End Distance Dropdown -->
            <!-- End Distance Dropdown -->

            <li><button class="navbar-btn" id="searchbutton" type="submit">Search</button></li>

          </ul>
        </div>
      </nav>
    </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 render-props" id="overlayedpar"
      style="box-shadow: -2px 0px 7px 0px rgba(0,0,0,0.2);height: 100%;overflow:hidden;">
      <div id="overlayed"></div>


      <div class="listing-sort-nav">
        <div class="sort-nav-left" id="notices">

          </p>

        </div>


      </div>
      <div class="k-ad-area">


      </div>
      
   
   <!-- <div class="sell-info text-center">
        <h3>LOOKING TO SELL YOUR HOME?</h3>
        <p>We offer our clients a wealth of knowledge regarding all aspects of purchasing or selling a home.<br>
             Please feel free to contact us with any questions!</p>
        <a href="https://kupeza.co.zm/contact-us" class="btn btn-lg btn-learn">GET IN TOUCH</a>
    </div> -->


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


<div id="myModalImages" class="modalImages">
  <div class="second-peace">
    <span class="closeimgemodal">&times;</span>
    <div class="one-peace">
      <div onclick="back()" class="baguetteBox-button back"><svg width="44" height="60">
          <polyline points="30 10 10 30 30 50" stroke="rgba(255,255,255,0.8)" stroke-width="4" stroke-linecap="butt"
            fill="none" stroke-linejoin="round"></polyline>
        </svg></div>
      <img id="img01" class="modal-images-content">
      <div onclick="next()" class="baguetteBox-button next"><svg width="44" height="60">
          <polyline points="14 10 34 30 14 50" stroke="rgba(255,255,255,0.8)" stroke-width="4" stroke-linecap="butt"
            fill="none" stroke-linejoin="round"></polyline>
        </svg></div>
    </div>
  </div>
</div>
<div id="mycontactModal" class="contact-modal">

  <!-- Modal content -->
  <div class="contact-modal-content">
    <span class="contact-close">&times;</span>
    <div class="contact_agent">
      <?php echo e(Form::open(['route'=>'contact_agent', 'role'=> 'form'])); ?>


      <h2>Contact Agent</h2>
      <div class="form-group <?php echo e($errors->has('name')? 'has-error':''); ?> con_input">
        <i class="fa fa-user icons"></i><input type="text" class="form-control contact_ag_input" name="Contact-name"
          placeholder="Your Name" required="required" />
        <?php echo $errors->has('name')? '<p class="help-block">'.$errors->first('name').'</p>':''; ?>

      </div>
      <div class="form-group <?php echo e($errors->has('name')? 'has-error':''); ?> con_input">
        <i class="fa fa-phone icons"></i><input type="text" class="form-control contact_ag_input" name="Contact-name"
          placeholder="Phone" required="required" />
        <?php echo $errors->has('phone')? '<p class="help-block">'.$errors->first('phone').'</p>':''; ?>

      </div>
      <div class="form-group <?php echo e($errors->has('email')? 'has-error':''); ?> con_input">
        <i class="fa fa-envelope icons"></i><input type="email" class="form-control contact_ag_input"
          placeholder="Email" name="Contact-email" required="required" />
        <?php echo $errors->has('email')? '<p class="help-block">'.$errors->first('email').'</p>':''; ?>

      </div>
      <span>
        <div class="form-group <?php echo e($errors->has('message')? 'has-error':''); ?>">
          <textarea name="Contact-message" id="Contact-message" class="form-control" value="I am interested in "
            required="required" style="height: 80px;"></textarea>
          <?php echo $errors->has('message')? '<p class="help-block">'.$errors->first('message').'</p>':''; ?>

        </div>
      </span>
      <span>
        <div class="form-group">
          <button type="submit" class="btn btn-primary" id="contact_agent_btn"><strong>Contact Agent</strong></button>
        </div>
      </span>
      <span class="button-checkbox">
        <label><input type="checkbox" name="agree" value="1" /> I want financing information</label>
      </span>


      <?php echo e(Form::close()); ?>


      <span>
        <p id="contact_agent_p">
          By pressing Contact Agent, you agree that the Kupeza Group and real estate professionals may call/text you
          about
          your inquiry, which may involve use of automated means and prerecorded/artificial voices. You don't need to
          consent as a condition of buying any property, goods or services. Message/data rates may apply. You also agree
          to our <a href="page/terms-and-condition">Terms of Use</a>. Kupeza does not endorse any real estate
          professionals.
        </p>
      </span>
    </div>

  </div>

</div>

<?php $__env->stopSection(); ?>


<?php $__env->startSection('page-js'); ?>

<script>
  // ChotScript
    // var slider = document.getElementById("myRange");
    // var output = document.getElementById("slider-output");
    // output.innerHTML = slider.value;
    

    // slider.oninput = function() {
    //     if(this.value == 0){
    //         // output.innerHTML = this.value;
    //         output.innerHTML = 'ANY';
    //     } else{
    //         output.innerHTML = this.value;
    //     }
      
    // } 
    
    
    let clickedMenu;
 
    function disablePriceMenu(){
        $('#' + clickedMenu).removeClass('show-menu');
    }
</script>

<script>
  // var modal = document.getElementById("mycontactModal");

//var btn = document.getElementById("mycontactBtn");

//var span = document.getElementsByClassName("contact-close")[0];
function showus() {
 document.getElementById("mycontactModal").style.display = "flex";
}


document.getElementsByClassName("contact-close")[0].onclick = function() {
  document.getElementById("mycontactModal").style.display = "none";
}


</script>



<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=AIzaSyBv335_B2iABL3br4duZulkby226FJn0L4&amp;libraries=common,util,map,overlay,onion,controls,stats&amp;v=3.37">
</script>
<script>
  var minZoomLevel = 5;
     var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-8.165287172626709 ,31.15727265625003),
     new google.maps.LatLng(-10.435331237627874 ,25.04887421875003)
);

var modal = document.getElementById("myModal");
var allimages = [];
var curr = null;

// Get the button that opens the modal
//var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-c")[0];
var span2 = document.getElementsByClassName("close-c")[1];
// When the user clicks the button, open the modal 
//btn.onclick = function() {
 // modal.style.display = "block";
//}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
  console.log("clicked");
}
span2.onclick = function() {
  modal.style.display = "none";
  console.log("clicked");
}
// When the user clicks anywhere outside of the modal, close it


        var geocoder = new google.maps.Geocoder;

var address =null;
var redflag = null;

 function myScript() { 

    var helperControlDiv = document.createElement('div');
           map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
        
        
        
if(searcher.value.localeCompare('')){
    
    console.log(searcher.value.localeCompare(''));
   
        
               var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         var myObj = JSON.parse(this.responseText);
         console.log(myObj.status);
           
        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;
             //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 low_price = null;
        var high_price = null;
        var min_price_0 = document.getElementById('min_price_0').checked;
        var min_price_1 = document.getElementById('min_price_1').checked;
        var min_price_2 = document.getElementById('min_price_2').checked;
        var min_price_3 = document.getElementById('min_price_3').checked;
        var min_price_4 = document.getElementById('min_price_4').checked;
        var min_price_5 = document.getElementById('min_price_5').checked;
        var min_price_6 = document.getElementById('min_price_6').checked;
        var min_price_7 = document.getElementById('min_price_7').checked;
        var min_price_8 = document.getElementById('min_price_8').checked;
        var min_price_9 = document.getElementById('min_price_9').checked;
        var min_price_10 = document.getElementById('min_price_10').checked;
        
        var max_price_1 = document.getElementById('max_price_1').checked;
        var max_price_2 = document.getElementById('max_price_2').checked;
        var max_price_3 = document.getElementById('max_price_3').checked;
        var max_price_4 = document.getElementById('max_price_4').checked;
        var max_price_5 = document.getElementById('max_price_5').checked;
        var max_price_6 = document.getElementById('max_price_6').checked;
        var max_price_7 = document.getElementById('max_price_7').checked;
        var max_price_8 = document.getElementById('max_price_8').checked;
        var max_price_9 = document.getElementById('max_price_9').checked;
        var max_price_10 = document.getElementById('max_price_10').checked;
        
        if(min_price_0){ low_price = document.getElementById('min_price_0').value ; }
        else if(min_price_1){ low_price = document.getElementById('min_price_1').value ; }
        else if(min_price_2){ low_price = document.getElementById('min_price_2').value ;}
        else if(min_price_3){ low_price = document.getElementById('min_price_3').value ;}
        else if(min_price_4){ low_price = document.getElementById('min_price_4').value ; }
        else if(min_price_5){ low_price = document.getElementById('min_price_5').value ; }
        else if(min_price_6){ low_price = document.getElementById('min_price_6').value ; }
        else if(min_price_7){ low_price = document.getElementById('min_price_7').value ;}
        else if(min_price_8){ low_price = document.getElementById('min_price_8').value ;}
        else if(min_price_9){ low_price = document.getElementById('min_price_9').value ; }
        else if(min_price_10){ low_price = document.getElementById('min_price_10').value ; }
        
        if(max_price_1){ high_price = document.getElementById('max_price_1').value ; }
        else if(max_price_2){ high_price = document.getElementById('max_price_2').value ;}
        else if(max_price_3){ high_price = document.getElementById('max_price_3').value ;}
        else if(max_price_4){ high_price = document.getElementById('max_price_4').value ; }
        else if(max_price_5){ high_price = document.getElementById('max_price_5').value ; }
        else if(max_price_6){ high_price = document.getElementById('max_price_6').value ; }
        else if(max_price_7){ high_price = document.getElementById('max_price_7').value ;}
        else if(max_price_8){ high_price = document.getElementById('max_price_8').value ;}
        else if(max_price_9){ high_price = document.getElementById('max_price_9').value ; }
        else if(max_price_10){ high_price = document.getElementById('max_price_10').value ; }
        
        var max_price = high_price;
        var min_price = low_price;


        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; }
                else { paramz ='min_price='+min_price+'&max_price='+max_price; }

        console.log(paramz +"b");

        loadsearch(paramz);
                    //document.getElementById("searchbutton").disabled = false;

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

  
    else {
        
        
           //  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 low_price = null;
        var high_price = null;
        
        var min_price_0 = document.getElementById('min_price_0').checked;
        var min_price_1 = document.getElementById('min_price_1').checked;
        var min_price_2 = document.getElementById('min_price_2').checked;
        var min_price_3 = document.getElementById('min_price_3').checked;
        var min_price_4 = document.getElementById('min_price_4').checked;
        var min_price_5 = document.getElementById('min_price_5').checked;
        var min_price_6 = document.getElementById('min_price_6').checked;
        var min_price_7 = document.getElementById('min_price_7').checked;
        var min_price_8 = document.getElementById('min_price_8').checked;
        var min_price_9 = document.getElementById('min_price_9').checked;
        var min_price_10 = document.getElementById('min_price_10').checked;
        
        var max_price_1 = document.getElementById('max_price_1').checked;
        var max_price_2 = document.getElementById('max_price_2').checked;
        var max_price_3 = document.getElementById('max_price_3').checked;
        var max_price_4 = document.getElementById('max_price_4').checked;
        var max_price_5 = document.getElementById('max_price_5').checked;
        var max_price_6 = document.getElementById('max_price_6').checked;
        var max_price_7 = document.getElementById('max_price_7').checked;
        var max_price_8 = document.getElementById('max_price_8').checked;
        var max_price_9 = document.getElementById('max_price_9').checked;
        var max_price_10 = document.getElementById('max_price_10').checked;
        
        if(min_price_0){ low_price = document.getElementById('min_price_0').value ; }
        else if(min_price_1){ low_price = document.getElementById('min_price_1').value ; }
        else if(min_price_2){ low_price = document.getElementById('min_price_2').value ;}
        else if(min_price_3){ low_price = document.getElementById('min_price_3').value ;}
        else if(min_price_4){ low_price = document.getElementById('min_price_4').value ; }
        else if(min_price_5){ low_price = document.getElementById('min_price_5').value ; }
        else if(min_price_6){ low_price = document.getElementById('min_price_6').value ; }
        else if(min_price_7){ low_price = document.getElementById('min_price_7').value ;}
        else if(min_price_8){ low_price = document.getElementById('min_price_8').value ;}
        else if(min_price_9){ low_price = document.getElementById('min_price_9').value ; }
        else if(min_price_10){ low_price = document.getElementById('min_price_10').value ; }
        
        if(max_price_1){ high_price = document.getElementById('max_price_1').value ; }
        else if(max_price_2){ high_price = document.getElementById('max_price_2').value ;}
        else if(max_price_3){ high_price = document.getElementById('max_price_3').value ;}
        else if(max_price_4){ high_price = document.getElementById('max_price_4').value ; }
        else if(max_price_5){ high_price = document.getElementById('max_price_5').value ; }
        else if(max_price_6){ high_price = document.getElementById('max_price_6').value ; }
        else if(max_price_7){ high_price = document.getElementById('max_price_7').value ;}
        else if(max_price_8){ high_price = document.getElementById('max_price_8').value ;}
        else if(max_price_9){ high_price = document.getElementById('max_price_9').value ; }
        else if(max_price_10){ high_price = document.getElementById('max_price_10').value ; }
        var max_price = high_price;
        var min_price = low_price;


        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; }
                else { paramz ='min_price='+min_price+'&max_price='+max_price; }

        console.log(paramz +"bxxxx");
                if(myObj.status=="ZERO_RESULTS"){
            
                divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
                            map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

            
                                        var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
              
         
                     // if(address){
                     
                     if(searcher.value.length > 25) {
          string = searcher.value.substring(0,40) + "...";
     }
     
     else{
          string =searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +' </strong>  <strong>(0)</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    //map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   //mapclicker(lat,lng)
                           mapclicker(myLng ,myLat);

            
                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
        
                                    var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
        
         if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
       
       
     notices.innerHTML ='<div style="padding:10px;" > No matching results... For <b> ' + string +'</b></div>';


    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span></span></div>';
                                
            

}


else         if(searcher.value.length > 0 && !unilong ){
               divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
                            map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

            
                                        var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
               if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
              
         
                     // if(address){
                     
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +' </strong>  <strong>(0)</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                   // map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        //removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   //mapclicker(lat,lng)
                           mapclicker(myLng ,myLat);

            
                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
       
        if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
       
     notices.innerHTML ='<div style="padding:10px;"> No matching results... For <b> ' + string +'</b></div>';
                                 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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


    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
            

}

    else if (paramz) {
            
            loadsearch(paramz);
}

else  {
          loadInfo();  
            //loadsearch(paramz);
}
       // loadsearch(paramz);


    }
  };  }
    
  xhttp.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address="+searcher.value +"&key=AIzaSyDgBSoQRTK2fegzJu2mAFKxs5hERQrsqEc", true);
  xhttp.send();
  
}
else { 

console.log("Sean Paul");

     
        
            // 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 low_price = null;
        var high_price = null;
        
        var min_price_0 = document.getElementById('min_price_0').checked;
        var min_price_1 = document.getElementById('min_price_1').checked;
        var min_price_2 = document.getElementById('min_price_2').checked;
        var min_price_3 = document.getElementById('min_price_3').checked;
        var min_price_4 = document.getElementById('min_price_4').checked;
        var min_price_5 = document.getElementById('min_price_5').checked;
        var min_price_6 = document.getElementById('min_price_6').checked;
        var min_price_7 = document.getElementById('min_price_7').checked;
        var min_price_8 = document.getElementById('min_price_8').checked;
        var min_price_9 = document.getElementById('min_price_9').checked;
        var min_price_10 = document.getElementById('min_price_10').checked;
        
        var max_price_1 = document.getElementById('max_price_1').checked;
        var max_price_2 = document.getElementById('max_price_2').checked;
        var max_price_3 = document.getElementById('max_price_3').checked;
        var max_price_4 = document.getElementById('max_price_4').checked;
        var max_price_5 = document.getElementById('max_price_5').checked;
        var max_price_6 = document.getElementById('max_price_6').checked;
        var max_price_7 = document.getElementById('max_price_7').checked;
        var max_price_8 = document.getElementById('max_price_8').checked;
        var max_price_9 = document.getElementById('max_price_9').checked;
        var max_price_10 = document.getElementById('max_price_10').checked;
        
        if(min_price_0){ low_price = document.getElementById('min_price_0').value ; }
        else if(min_price_1){ low_price = document.getElementById('min_price_1').value ; }
        else if(min_price_2){ low_price = document.getElementById('min_price_2').value ;}
        else if(min_price_3){ low_price = document.getElementById('min_price_3').value ;}
        else if(min_price_4){ low_price = document.getElementById('min_price_4').value ; }
        else if(min_price_5){ low_price = document.getElementById('min_price_5').value ; }
        else if(min_price_6){ low_price = document.getElementById('min_price_6').value ; }
        else if(min_price_7){ low_price = document.getElementById('min_price_7').value ;}
        else if(min_price_8){ low_price = document.getElementById('min_price_8').value ;}
        else if(min_price_9){ low_price = document.getElementById('min_price_9').value ; }
        else if(min_price_10){ low_price = document.getElementById('min_price_10').value ; }
        
        if(max_price_1){ high_price = document.getElementById('max_price_1').value ; }
        else if(max_price_2){ high_price = document.getElementById('max_price_2').value ;}
        else if(max_price_3){ high_price = document.getElementById('max_price_3').value ;}
        else if(max_price_4){ high_price = document.getElementById('max_price_4').value ; }
        else if(max_price_5){ high_price = document.getElementById('max_price_5').value ; }
        else if(max_price_6){ high_price = document.getElementById('max_price_6').value ; }
        else if(max_price_7){ high_price = document.getElementById('max_price_7').value ;}
        else if(max_price_8){ high_price = document.getElementById('max_price_8').value ;}
        else if(max_price_9){ high_price = document.getElementById('max_price_9').value ; }
        else if(max_price_10){ high_price = document.getElementById('max_price_10').value ; }
                var max_price = high_price;
        var min_price = low_price;


        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(purpose && bedrooms && house_type){ paramz ='purpose='+purpose+'&bedrooms='+bedrooms+'&house_type='+house_type +'&min_price='+min_price+'&max_price='+max_price; }
        else if( purpose && bedrooms ){ paramz ='lat='+ unilat+'&long='+unilong+'&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( 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; }
                else { paramz ='min_price='+min_price+'&max_price='+max_price; }

        console.log(paramz +"bxxxxzzz");
             if(searcher.value.length > 0 && !unilong ){
               divs = document.getElementsByClassName('k-ad-area')[0];
            divs.innerHTML = '';
                            map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

            
                                        var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
               if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
              
         
                     // if(address){
                     
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings  <strong>'+ string +' </strong>  <strong>(0)</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                   // map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        //removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   //mapclicker(lat,lng)
                           mapclicker(myLng ,myLat);

            
                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
       
        if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
       
     notices.innerHTML ='<div style="padding:10px;"> No matching results... For <b> ' + string +'</b></div>';
                                 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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


    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
            console.log("los");

}

    else if (paramz) {
            
            loadsearch(paramz);
                        console.log("los1");

               //  notices.innerHTML ='<div style="padding:10px;"> No matching results... For <b ' + string +'</b></div>';

            string ="";
}

else  {
          //loadInfo();  
            loadsearch(paramz);
                        console.log("los2");

}
       // loadsearch(paramz);

        
    }    }
 function mapclicker(lng,lat) { 

    var helperControlDiv = document.createElement('div');
           map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;

            searchadd =  searcher.value;
             //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 low_price = null;
        var high_price = null;
        
        
        var min_price_0 = document.getElementById('min_price_0').checked;
        var min_price_1 = document.getElementById('min_price_1').checked;
        var min_price_2 = document.getElementById('min_price_2').checked;
        var min_price_3 = document.getElementById('min_price_3').checked;
        var min_price_4 = document.getElementById('min_price_4').checked;
        var min_price_5 = document.getElementById('min_price_5').checked;
        var min_price_6 = document.getElementById('min_price_6').checked;
        var min_price_7 = document.getElementById('min_price_7').checked;
        var min_price_8 = document.getElementById('min_price_8').checked;
        var min_price_9 = document.getElementById('min_price_9').checked;
        var min_price_10 = document.getElementById('min_price_10').checked;
        
        var max_price_1 = document.getElementById('max_price_1').checked;
        var max_price_2 = document.getElementById('max_price_2').checked;
        var max_price_3 = document.getElementById('max_price_3').checked;
        var max_price_4 = document.getElementById('max_price_4').checked;
        var max_price_5 = document.getElementById('max_price_5').checked;
        var max_price_6 = document.getElementById('max_price_6').checked;
        var max_price_7 = document.getElementById('max_price_7').checked;
        var max_price_8 = document.getElementById('max_price_8').checked;
        var max_price_9 = document.getElementById('max_price_9').checked;
        var max_price_10 = document.getElementById('max_price_10').checked;
        
        if(min_price_0){ low_price = document.getElementById('min_price_0').value ; }
        else if(min_price_1){ low_price = document.getElementById('min_price_1').value ; }
        else if(min_price_2){ low_price = document.getElementById('min_price_2').value ;}
        else if(min_price_3){ low_price = document.getElementById('min_price_3').value ;}
        else if(min_price_4){ low_price = document.getElementById('min_price_4').value ; }
        else if(min_price_5){ low_price = document.getElementById('min_price_5').value ; }
        else if(min_price_6){ low_price = document.getElementById('min_price_6').value ; }
        else if(min_price_7){ low_price = document.getElementById('min_price_7').value ;}
        else if(min_price_8){ low_price = document.getElementById('min_price_8').value ;}
        else if(min_price_9){ low_price = document.getElementById('min_price_9').value ; }
        else if(min_price_10){ low_price = document.getElementById('min_price_10').value ; }
        
        if(max_price_1){ high_price = document.getElementById('max_price_1').value ; }
        else if(max_price_2){ high_price = document.getElementById('max_price_2').value ;}
        else if(max_price_3){ high_price = document.getElementById('max_price_3').value ;}
        else if(max_price_4){ high_price = document.getElementById('max_price_4').value ; }
        else if(max_price_5){ high_price = document.getElementById('max_price_5').value ; }
        else if(max_price_6){ high_price = document.getElementById('max_price_6').value ; }
        else if(max_price_7){ high_price = document.getElementById('max_price_7').value ;}
        else if(max_price_8){ high_price = document.getElementById('max_price_8').value ;}
        else if(max_price_9){ high_price = document.getElementById('max_price_9').value ; }
        else if(max_price_10){ high_price = document.getElementById('max_price_10').value ; }
        
        var max_price = high_price;
        var min_price = low_price;


        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 = ""
        
          unilat = parseFloat(lat);
            unilong =  parseFloat(lng);
            console.log(lat, lng)
        
        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; }
        else { paramz ='min_price='+min_price+'&max_price='+max_price; }
        console.log(paramz +"zzz");

        loadsearch(paramz);
        
     
        }


//document.getElementById('max_price').addEventListener("mouseleave", myScript);;
//document.getElementById('min_price').addEventListener("mouseleave", 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);;
document.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);;
  
  document.getElementById('max_price_1').addEventListener("change", myScript);;
 document.getElementById('max_price_2').addEventListener("change", myScript);;
 document.getElementById('max_price_3').addEventListener("change", myScript);;
 document.getElementById('max_price_4').addEventListener("change", myScript);;
  document.getElementById('max_price_5').addEventListener("change", myScript);;
  document.getElementById('max_price_6').addEventListener("change", myScript);;
 document.getElementById('max_price_7').addEventListener("change", myScript);;
 document.getElementById('max_price_8').addEventListener("change", myScript);;
 document.getElementById('max_price_9').addEventListener("change", myScript);;
  document.getElementById('max_price_10').addEventListener("change", myScript);
  
    document.getElementById('min_price_0').addEventListener("change", myScript);;
  document.getElementById('min_price_1').addEventListener("change", myScript);;
 document.getElementById('min_price_2').addEventListener("change", myScript);;
 document.getElementById('min_price_3').addEventListener("change", myScript);;
 document.getElementById('min_price_4').addEventListener("change", myScript);;
  document.getElementById('min_price_5').addEventListener("change", myScript);;
  document.getElementById('min_price_6').addEventListener("change", myScript);;
 document.getElementById('min_price_7').addEventListener("change", myScript);;
 document.getElementById('min_price_8').addEventListener("change", myScript);;
 document.getElementById('min_price_9').addEventListener("change", myScript);;
  document.getElementById('min_price_10').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 = <?php echo $cods['zoom']; ?>;
    var unilat = null;
    var unilong = null;
    var searchadd = null;


    var map;
    var mycenter = { lat: <?php echo $cods['lat']; ?>, lng: <?php echo $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 removeactions() {
    
    var opt = {
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}


 google.maps.event.addListener(map, 'click', function(event) {});    
  map.setOptions(opt);
 
};



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 string = searcher.value;
        var btnsbmt = document.getElementById('searchbutton');
searcher.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
           map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
  document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;



  //console.log( document.getElementById("overlayed"));

      var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
                removeactions();

   
        
               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;
            // 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 low_price = null;
        var high_price = null;

        var min_price_0 = document.getElementById('min_price_0').checked;
        var min_price_1 = document.getElementById('min_price_1').checked;
        var min_price_2 = document.getElementById('min_price_2').checked;
        var min_price_3 = document.getElementById('min_price_3').checked;
        var min_price_4 = document.getElementById('min_price_4').checked;
        var min_price_5 = document.getElementById('min_price_5').checked;
        var min_price_6 = document.getElementById('min_price_6').checked;
        var min_price_7 = document.getElementById('min_price_7').checked;
        var min_price_8 = document.getElementById('min_price_8').checked;
        var min_price_9 = document.getElementById('min_price_9').checked;
        var min_price_10 = document.getElementById('min_price_10').checked;
        
        var max_price_1 = document.getElementById('max_price_1').checked;
        var max_price_2 = document.getElementById('max_price_2').checked;
        var max_price_3 = document.getElementById('max_price_3').checked;
        var max_price_4 = document.getElementById('max_price_4').checked;
        var max_price_5 = document.getElementById('max_price_5').checked;
        var max_price_6 = document.getElementById('max_price_6').checked;
        var max_price_7 = document.getElementById('max_price_7').checked;
        var max_price_8 = document.getElementById('max_price_8').checked;
        var max_price_9 = document.getElementById('max_price_9').checked;
        var max_price_10 = document.getElementById('max_price_10').checked;
        
        if(min_price_0){ low_price = document.getElementById('min_price_0').value ; }
        else if(min_price_1){ low_price = document.getElementById('min_price_1').value ; }
        else if(min_price_2){ low_price = document.getElementById('min_price_2').value ;}
        else if(min_price_3){ low_price = document.getElementById('min_price_3').value ;}
        else if(min_price_4){ low_price = document.getElementById('min_price_4').value ; }
        else if(min_price_5){ low_price = document.getElementById('min_price_5').value ; }
        else if(min_price_6){ low_price = document.getElementById('min_price_6').value ; }
        else if(min_price_7){ low_price = document.getElementById('min_price_7').value ;}
        else if(min_price_8){ low_price = document.getElementById('min_price_8').value ;}
        else if(min_price_9){ low_price = document.getElementById('min_price_9').value ; }
        else if(min_price_10){ low_price = document.getElementById('min_price_10').value ; }
        
        if(max_price_1){ high_price = document.getElementById('max_price_1').value ; }
        else if(max_price_2){ high_price = document.getElementById('max_price_2').value ;}
        else if(max_price_3){ high_price = document.getElementById('max_price_3').value ;}
        else if(max_price_4){ high_price = document.getElementById('max_price_4').value ; }
        else if(max_price_5){ high_price = document.getElementById('max_price_5').value ; }
        else if(max_price_6){ high_price = document.getElementById('max_price_6').value ; }
        else if(max_price_7){ high_price = document.getElementById('max_price_7').value ;}
        else if(max_price_8){ high_price = document.getElementById('max_price_8').value ;}
        else if(max_price_9){ high_price = document.getElementById('max_price_9').value ; }
        else if(max_price_10){ high_price = document.getElementById('max_price_10').value ; }
        
        var max_price = high_price;
        var min_price = low_price;


        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; }
                else { paramz ='min_price='+min_price+'&max_price='+max_price; }

        loadsearch(paramz);
                    //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=AIzaSyDgBSoQRTK2fegzJu2mAFKxs5hERQrsqEc", true);
  xhttp.send();
        
        
        
        ////////loadsearch(paramz);
  }
});
btnsbmt.addEventListener('click',
    function () { 
        
        

        myScript();
        

  
        
    })
    //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'); 
 
    if(!unilong   &&  ! address){ 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 <strong>'+ searchadd+'   ('+ myObj.data.length+')</strong></p>';
    
     
 }
 
        if(searcher.value){
            
            if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+  string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
 
 
    if(address){
        
         if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
     

       if(myObj.data.length == 0 ){ 
                                 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
               if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
              
         
                     // if(address){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+  string +' </strong>  <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   //mapclicker(lat,lng)
                           mapclicker(myLng ,myLat);

            
                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
       
        var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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


    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
                            }
            for ( var i = 0; i < myObj.data.length; i++) {
                console.log(myObj.data);
                
                 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,
                              mapTypeId: google.maps.MapTypeId.ROADMAP,

                                        fullscreenControl: false,

        });
        
                map.setOptions({scrollwheel:true});
                  map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);

        
             google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //console.log(zoomLevel);
    if (zoomLevel >= 7) {
        map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    } else {
    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
    var ZoomControlDiv = document.createElement('div');
    var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom In To See Specific Properties');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    }
});
        var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
                 google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address);
            }

              searcher.value =address;
              if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
                    //  if(address){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string  +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   
                                       mapclicker(myLng ,myLat);

                       // 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);
  });
    

         }
         
                            document.getElementById("overlayed").style.display = "none";
            
            var currency_symbol = myObj.data[i].currency_type == "kwacha" ? "K" : "$";
            
            
         
               if(parseFloat(myObj.data[i].price.replace(',','').replace(' ','').replace('.','')) > 0){
             var price =  currency_symbol +String(myObj.data[i].price); }
             else 
             {
                  var price = currency_symbol+myObj.data[i].price_per_unit;
                 
             }
                
                             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 addon = '';
                                         if(parseFloat(bedrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };
                                         
                                            if(parseFloat(bathrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div>';
                                             
                                         };
                                         
                                          if(parseFloat(square_feet)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"></i>'+square_feet+' Sqaure feet  </div>';
                                             
                                         };

            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 price">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row address"><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 bedrooms">'+addon+'<div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'</div></div></a>';
            
            // divs.innerHTML +='<a href="'+route+'" onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"   >'
            // +'<div class="card shadow my-3 bg-white rounded">'
            //     +'<div class="card-img-md">'
            //         +'<img src="'+myObj.data[i].media_url+'" class="img-responsive" alt="' + title +'">'
            //     +'</div>'
            //     +'<div class="card-body">'
            //         +'<div class="card-title">'
            //             +'<div class="row">'
            //                 +'<h3 class="col-sm-8 text-muted"><strong>'+ price +'</strong></h3>'
            //                 +'<h3 class="col-sm-4 rent-card">'+state+'</h3>'
            //             +'</div>'
            //         +'</div>'
            //         +'<div class="card-text">'
            //             +'<div class="row"><span class="col-12 text-muted address">'+ address +'</span></div>'
            //             +'<div class="row text-muted b-specs"><span class="col-3">'+ bedrooms +' bdrms</span><span class="col-6">'+ bathrooms +'bthrm</span></div>'
            //         +'</div>'
            //         +'<div class="row card-footer px-0">'
            //             +'<span class="col-sm-6 text-muted"><b>House</b></span>'
            //             +'<span class="col-sm-6 text-muted"><b>564 km away</b></span>'
            //         +'</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=AIzaSyDgBSoQRTK2fegzJu2mAFKxs5hERQrsqEc", true);
  xhttp.send();
        
        
    }
);
    // Add marker to the map.
    
function CenterControl(controlDiv, map) {
//129, 31, 211
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'rgba(252, 141, 4,.7)';
        controlUI.style.border = '2px solid rgba(252, 141, 4,.7)';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(252, 141, 4,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.marginBottom = '22px';
        controlUI.style.textAlign = 'center';
        //controlUI.title = 'Click to recenter the map';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = '#fff';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '14px';
        controlText.style.lineHeight = '10px';
        controlText.style.paddingLeft = '15px';
        controlText.style.padding = '10px';
                controlText.style.fontWeight = 'bold';

        controlText.style.paddingRight = '15px';
        controlText.innerHTML = 'Click Anywhere On The Map To See Properties Close To That Location';
        controlUI.appendChild(controlText);

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

      }
      
function Zoomhelper(controlDiv, map ,num) {
//129, 31, 211
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'rgba(197, 7, 156,.7)';
        controlUI.style.border = '2px solid rgba(197, 7, 156,.7)';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(197, 7, 156,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.margin = '10px';
        controlUI.style.textAlign = 'center';
        //controlUI.title = 'Click to recenter the map';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = '#fff';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '14px';
        controlText.style.lineHeight = '10px';
        controlText.style.paddingLeft = '15px';
        controlText.style.padding = '10px';
                controlText.style.fontWeight = 'bold';

        controlText.style.paddingRight = '15px';
        controlText.innerHTML =num;
        controlUI.appendChild(controlText);

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

      }
      
function Helper(controlDiv, map) {
//129, 31, 211
        // Set CSS for the control border.
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'rgba(197, 7, 156,.7)';
        controlUI.style.border = '2px solid rgba(197, 7, 156,.7)';
        controlUI.style.borderRadius = '3px';
        controlUI.style.boxShadow = '0 2px 6px rgba(197, 7, 156,.3)';
        controlUI.style.cursor = 'pointer';
        controlUI.style.margin = '10px';
        controlUI.style.textAlign = 'center';
        //controlUI.title = 'Click to recenter the map';
        controlDiv.appendChild(controlUI);

        // Set CSS for the control interior.
        var controlText = document.createElement('div');
        controlText.style.color = '#fff';
        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
        controlText.style.fontSize = '14px';
        controlText.style.lineHeight = '10px';
        controlText.style.paddingLeft = '15px';
        controlText.style.padding = '10px';
                controlText.style.fontWeight = 'bold';

        controlText.style.paddingRight = '15px';
        controlText.innerHTML = 'Please Wait, Information Is Loading....';
        controlUI.appendChild(controlText);

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

      }

    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 svg_rent ='<svg xmlns="http://www.w3.org/2000/svg" width="563" height="563" viewBox="0 0 563 563"><defs><style>.cls-1, .cls-3, .cls-4 {fill: orange;}.cls-1, .cls-2 {fill-rule: evenodd;}.cls-2, .cls-5 { fill: #fff;}.cls-4 {stroke: #a200ea;stroke-width: 5px;}.cls-5 {font-size: 70px;text-anchor: middle;font-family: "Arial Black";}</style></defs><path class="cls-1" d="M85,174.727C85,78.219,163.127,0,259.5,0S434,78.219,434,174.727C434,271.211,259.5,563,259.5,563S85,271.211,85,174.727Z"/><g><path class="cls-2" d="M351.973,256.6a3.428,3.428,0,0,1-3.43,3.42H171.456a3.425,3.425,0,0,1-3.429-3.42V165.443c0-3.283,3.429-6.845,3.429-6.845s84.512-83.948,86.12-85.552A3.481,3.481,0,0,1,262.452,73c1.045,1.041,85.56,85.6,85.56,85.6s3.762,3.778,3.961,6.845V256.6Z"/><path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-2" d="M155.781,139.788L250.2,44.7a9.5,9.5,0,0,1,13.483,13.387l-94.415,95.089A9.5,9.5,0,0,1,155.781,139.788Z"/><path id="Rounded_Rectangle_2_copy" data-name="Rounded Rectangle 2 copy" class="cls-2" d="M363.544,139.355l-95.173-94.33A9.5,9.5,0,1,0,255,58.52l95.173,94.33A9.5,9.5,0,0,0,363.544,139.355Z"/><path id="Rounded_Rectangle_3" data-name="Rounded Rectangle 3" class="cls-3" d="M248,220h18a10,10,0,0,1,10,10v31a0,0,0,0,1,0,0H238a0,0,0,0,1,0,0V230A10,10,0,0,1,248,220Z"/></g><rect id="Rounded_Rectangle_4" data-name="Rounded Rectangle 4" class="cls-4" x="229" y="99" width="248" height="110" rx="20" ry="20"/><text id="RENT" class="cls-5" x="353.889" y="179.673"><tspan x="353.889">RENT</tspan></text></svg>';
  
          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 svg_sale='<svg xmlns="http://www.w3.org/2000/svg" width="563" height="563" viewBox="0 0 563 563"><defs><style>.cls-1, .cls-3, .cls-4 {fill: #a200ea;}.cls-1, .cls-2 {fill-rule: evenodd;}.cls-2, .cls-5 {fill: #fff;}.cls-4 {stroke: orange;stroke-width: 5px;}.cls-5 {font-size: 70px;text-anchor: middle;font-family: "Arial Black";}</style></defs><path class="cls-1" d="M85,174.727C85,78.219,163.127,0,259.5,0S434,78.219,434,174.727C434,271.211,259.5,563,259.5,563S85,271.211,85,174.727Z"/><g><path class="cls-2" d="M351.973,256.6a3.428,3.428,0,0,1-3.43,3.42H171.456a3.425,3.425,0,0,1-3.429-3.42V165.443c0-3.283,3.429-6.845,3.429-6.845s84.512-83.948,86.12-85.552A3.481,3.481,0,0,1,262.452,73c1.045,1.041,85.56,85.6,85.56,85.6s3.762,3.778,3.961,6.845V256.6Z"/><path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-2" d="M155.781,139.788L250.2,44.7a9.5,9.5,0,0,1,13.483,13.387l-94.415,95.089A9.5,9.5,0,0,1,155.781,139.788Z"/><path id="Rounded_Rectangle_2_copy" data-name="Rounded Rectangle 2 copy" class="cls-2" d="M363.544,139.355l-95.173-94.33A9.5,9.5,0,1,0,255,58.52l95.173,94.33A9.5,9.5,0,0,0,363.544,139.355Z"/><path id="Rounded_Rectangle_3" data-name="Rounded Rectangle 3" class="cls-3" d="M248,220h18a10,10,0,0,1,10,10v31a0,0,0,0,1,0,0H238a0,0,0,0,1,0,0V230A10,10,0,0,1,248,220Z"/></g><rect id="Rounded_Rectangle_4" data-name="Rounded Rectangle 4" class="cls-4" x="229" y="99" width="248" height="110" rx="20" ry="20"/><text id="SALE" class="cls-5" x="353.889" y="179.673"><tspan x="353.889">SALE</tspan></text></svg>';
  
          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 :{ url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_rent), scaledSize: new google.maps.Size(50, 50) },
          map: map
        });
        
      
  } else if(purpose =="sale") {  
      
      var marker = new google.maps.Marker({
          position: location,
                  id: id,

        icon :{ url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_sale), scaledSize: new google.maps.Size(50, 50) },
          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'); 
       
    if( !unilong   &&  !address){ 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>';
    
     
 }
 
    if(address){
        
         if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
        if(searcher.value){
            
             if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <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);
        //});
        
              if(myObj.data.length == 0 ){ 
                                                 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address);
            }

              searcher.value =address;
                      if(address){
                          
                          if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string  +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
    



            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   
                                       mapclicker(myLng ,myLat);

                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
         // console.log(event.latLng);
        });
       
        var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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


    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
                                  
                            }

            for ( var i = 0; i < myObj.data.length; i++) {
                                console.log(myObj.data);

                
                 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,
                              mapTypeId: google.maps.MapTypeId.ROADMAP,
                                                            fullscreenControl: false,


        });
                map.setOptions({scrollwheel:true});
                  map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);

           google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //console.log(zoomLevel);
    if (zoomLevel >= 7) {
        map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    } else {
    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
    var ZoomControlDiv = document.createElement('div');
    var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom In To See Specific Properties');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    }
});
        
        
        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);
  });
  
  var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });
          map.setOptions({scrollwheel:true});

                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
               if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
              //        if(address){
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string  +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
                               mapclicker(myLng ,myLat);

                        //loadLoc(myLng ,myLat);
                                //removeactions();


          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
                 }
                                    document.getElementById("overlayed").style.display = "none";

                 var urls =  String(myObj.data[i].media_url);
      
         
            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            
            var currency_symbol = myObj.data[i].currency_type == "kwacha" ? "K" : "$";
            
               if(parseFloat(myObj.data[i].price.replace(',','').replace(' ','').replace('.','')) > 0){
             var price =  currency_symbol +String(myObj.data[i].price); }
             else 
             {
                  var price = currency_symbol+myObj.data[i].price_per_unit;
                 
             }
                
                             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 addon = '';
                                         if(parseFloat(bedrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };
                                         
                                            if(parseFloat(bathrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div>';
                                             
                                         };
                                         
                                          if(parseFloat(square_feet)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"></i>'+square_feet+' Sqaure feet  </div>';
                                             
                                         };

            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 price">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row address"><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 bedrooms">'+addon+'<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', "<?php echo e(route('newsearcher2')); ?>", 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'); 
            
    if(!unilong   &&  !address){ 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 <strong>'+ searcher.value+'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
    if(address){
        
         if(address.length > 25) {
          string = searcher.value.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
        if(searcher.value){
            
             if(searcher.value.length > 25) {
          string = string.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+  string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }

 
            console.log(myObj);
                            // bangalore = { lat: lat, lng: long };
                            
                            if(myObj.data.length == 0 ){ 
                                                           var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address);
            }

              searcher.value =address;
                 //     if(address){
                 
                  if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
       
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
// }


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
                              mapclicker(myLng ,myLat);

            
                       // loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
       
       
    var   sic = false;
       
 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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

    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
                               }

           

            for ( var i = 0; i < myObj.data.length; i++) {
                                //console.log(myObj.data);
                                
                               
                                         
                

                
                 bangalore = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
                // console.log(bangalore);
                 
                 if (!sic && ! isNaN(parseFloat(myObj.data[i].latitude)) ){
                     
                      sic = true;
                   
                     
            
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom:  14,
          center: bangalore,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                              fullscreenControl: false,

        });
        
          //if(parseFloat(myObj.latitude)){  
               if(0 == 1){ 
              
                      var distance_1 = document.getElementById('distance_1').checked;
        var distance_2 = document.getElementById('distance_2').checked;
        var distance_3 = document.getElementById('distance_3').checked;
        var distance_4 = document.getElementById('distance_4').checked;
        var distance_5 = document.getElementById('distance_5').checked;
        var distance_6 = document.getElementById('distance_6').checked;
        var distancespan = 0;

        if(distance_1){ distancespan  = 0 }
        else if(distance_2){ distancespan  = 10}
        else if(bedrooms_3){ distancespan  = 20 }
        else if(bedrooms_4){ distancespan  = 50 }
        else if(bedrooms_5){ distancespan  = 75 }
        else if(bedrooms_6){ distancespan  = 100 }
        
                                           bangalorecircle = { lat: parseFloat(myObj.latitude), lng: parseFloat(myObj.longitude) };
                                            var SearchCircle = new google.maps.Circle({
      strokeColor: '#811fd3',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#811fd3',
      fillOpacity: 0.15,
      map: map,
      center: bangalorecircle,
      radius: distancespan * 1000
    });
    
                     google.maps.event.addListener(SearchCircle, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
                  //    if(address){
                  
                  if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+  string+'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
                               mapclicker(myLng ,myLat);

                        //loadLoc(myLng ,myLat);
                        
                        //removeactions();


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

    
    
                                             
                                         };
        
            google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
          map.setOptions({scrollwheel:true});
            map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);

  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, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    ///console.log(zoomLevel);
    if (zoomLevel >= 7) {
        map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        //map.setOptions({ zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT } });
    } else {
    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
    var ZoomControlDiv = document.createElement('div');
    var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom In To See Specific Properties');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
    }
});
        
        var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);
        map.setOptions({scrollwheel:true});

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
             //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
                  //    if(address){
                  
                  if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+  string+'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
                               mapclicker(myLng ,myLat);

                        //loadLoc(myLng ,myLat);
                        
                        //removeactions();


          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
                 } 
                 
                                    document.getElementById("overlayed").style.display = "none";

                 
                 var urls =  String(myObj.data[i].media_url);
      
         
            //mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            
            var currency_symbol = myObj.data[i].currency_type == "kwacha" ? "K" : "$";
            
              if(parseFloat(myObj.data[i].price.replace(',','').replace(' ','').replace('.','')) > 0){
             var price =  currency_symbol +String(myObj.data[i].price); }
             else 
             {
                  var price = currency_symbol+myObj.data[i].price_per_unit;
                 
             }
                
                             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);
                               var type= String(myObj.data[i].type);

            mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            var id = uniqueId();
                            
                                         var addon = '';
                                         var addre = '';
                                         var  anim = '';
                                         //console.log(parseFloat(bedrooms));
                                         //       console.log(parseFloat(bathrooms));
                                          //  console.log(address);


                                         if(parseFloat(bedrooms)){  
                                             addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };
                                         
                                            if(parseFloat(bathrooms)){  
                                             addon+='<div class="col-xs-2" "><i class="fas fa-bath"></i>'+bathrooms+'</div>';
                                             
                                         };
                                         //"null".localeCompare('null')
                                         
                                          if(parseFloat(String(myObj.data[i].square_feet))){  
                                             addon+='<div class="col-xs-4" >'+String(myObj.data[i].square_feet)+' sqft  </div>';
                                             
                                         };
                                         
                                         if(address.localeCompare('null')){  
                                             addre+='<div class="col-xs-12" ><p class="k-address"><span style="font-weight:bold"></span>'+address+' </p></div>';
                                             
                                         };
                                         
                                          
                                         
                                          if(type.localeCompare('')){  
                                             anim+='<div class="col-xs-6">'+changeCaseFirstLetter(type.replace('_', ' ')) +'</div>';
                                              if(parseFloat(String(myObj.data[i].angle))){  
                                             anim +='<div class="col-xs-6" ><small style="font-size:9px;float:right;text-align: right; padding-right:10px;padding-top:5px;"><i><b> '+String(myObj.data[i].angle)+' KM AWAY </b></i></small> </div>';
                                             
                                         };
                                             
                                         };
                                         
                                         
                                         //console.log(anim);
                                         //console.log(parseFloat(String(myObj.data[i].square_feet)));
                                         
            var jonh = '"'+escape(JSON.stringify(myObj.data[i]))+'"';//onclick="modalshow('+jonh+')"
             jonh = jonh.replace(/"/g, "'");

            var contentString =  '<a href="'+myObj.data[i].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 address">'+addre+'</div>'
            +'<div class="row bedrooms">'+addon+'<div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
           +'<div class="row type">'+anim+'</div>'
            +'</div></div></a>';

            addMarker(mycenter, map ,contentString ,myObj.data[i].purpose,id);
            //console.log('eugene ---> '+myObj.data[i].route);
           

            if(!myObj.data[i].route){}



              divs.innerHTML +='<a  onmouseleave="markerleave('+id+')" onmouseover="markerfindme('+id+')"  href="'+myObj.data[i].route+'" style="cursor: pointer;"><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 price">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row address">'+addre+'</div>'
            +'<div class="row bedrooms">'+addon+'<div class="col-xs-2"><p class="k-purpose">'+state+'</p></div></div>'
            +'<div class="row type">'+anim+'</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+"&_token=<?php echo e(csrf_token()); ?>");
    }
    
    function changeCaseFirstLetter(params) {
        if(typeof params === 'string') {
                return params.charAt(0).toUpperCase() + params.slice(1);
        }
        return null;
}

        // });
   
        
function myfavourite(uria){
    
    console.log(uria);
}
function sluger(slug) {
                console.log(44);
                  var xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                   if (this.readyState == 4 && this.status == 200) {
                       

                       
                       var obj = JSON.parse(this.responseText);
                        if(obj.status=== 1){
                                                document.getElementById("save-as-favourite").innerHTML = obj.msg;

                            } 
                            else { 
                                console.log(obj.redirect_url);
                                
                                 //if (obj.redirect_url){
                                 window.location = obj.redirect_url;
                            //}
                            } 

                      console.log(obj.msg);
                       
       // document.getElementById("demo").innerHTML = "bbvvn "+this.responseText;
                    //var obj = JSON.parse(this.responseText);
                     //loadapi(obj.Authorization); 

      
    }
  
  };
  xhttp.open("POST", "https://kupeza.co.zm/save-ad-as-favorite", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("slug="+slug+"&_token=<?php echo e(csrf_token()); ?>" );
                
                
                myfavourite(slug);
                     
                     
                 } ;
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function modalshow(params) {
    //console.log(JSON.parse(unescape(params)));
        var obj = JSON.parse(unescape(params));
            //document.getElementById("modal-address").innerHTML = '';
            //document.getElementById("modal-city").innerHTML = '';
            //document.getElementById("modal-agent").innerHTML = '';
            //document.getElementById("modal-agent-email").innerHTML = '';
            //document.getElementById("modal-agent-number").innerHTML = '';
            //document.getElementById("modal-posted").innerHTML = '';
            //document.getElementById("modal-type").innerHTML = '';
            //document.getElementById("modal-floors").innerHTML = '';
            //document.getElementById("modal-common-bath").innerHTML = '';
            //document.getElementById("modal-attached-bath").innerHTML = '';
            //document.getElementById("modal-bathrooms").innerHTML = '';
            //document.getElementById("modal-dining-space").innerHTML = '';
            //document.getElementById("modal-unitspace").innerHTML = '';
            //document.getElementById("modal-beds").innerHTML = '';
            //document.getElementById("modal-living-room").innerHTML = '';
            //document.getElementById("modal-title").innerHTML = '';
            document.getElementById("anem").innerHTML = '';


            //id=""
    
                  

                 
                 
              
            // document.getElementById("modal-price-plan").innerHTML = '';
            
             //console.log(obj.id);
             // document.getElementById("modal-price-plan").innerHTML = '';
        try {   
            fetch('/add-view/' + obj.id)
              .then((response)=>{
                return response.json();
              })
              .then((myJSON)=>{
                console.log(myJSON);
              });
              
        }
catch(err) {
    console.log(err);
    
}
            
            var jimm ='<div class="ads-detail bg-white">';
          if(obj.purpose == "rent"){ document.getElementById("mortage_calculator").style.display = "none";}
          else{document.getElementById("mortage_calculator").style.display = "block";}

            if(obj.title){  
         if(obj.title.localeCompare('')){  
             jimm +='<h2 class="ad-title"><a href="'+obj.route+'"><b>'+obj.title+'</b></a>  </h2>';
             
             //document.getElementById("modal-title").innerHTML = obj.title;
              document.getElementById("Contact-message").value = 'I am interested in the property ('+ obj.title +').';
             

                                         };};
                                         var price = '';
                                         
                                                                             if(parseFloat(obj.price.replace(',','').replace(' ','').replace('.','')) > 0){
                                             if(!obj.amenities.localeCompare("N;")){
        
        if(obj.purpose =="rent") { 
            jimm +='<h2 class="modern-single-ad-price"> K'+String(obj.price) +' /month (Negotiable)</h2>';
      
            price += '<p><strong><i class="fa fa-money"></i> K </strong>'+String(obj.price)+'</p>';

        
      
  } 
  
  else {  
               jimm +=' <h2 class="modern-single-ad-price"> K'+String(obj.price) +' (Negotiable)</h2>';

            price += '<p><strong><i class="fa fa-money"></i> K </strong>'+String(obj.price)+' (Negotiable)</p>';

  
  }
        
        
    }
    else {
         if(obj.purpose =="rent") { 
      
                  jimm +=' <h2 class="modern-single-ad-price"> K'+String(obj.price) +' /month (Negotiable)</h2>';

            price += '<p><strong><i class="fa fa-money"></i> K </strong>'+String(obj.price)+' /month (Negotiable)</p>';


        
      
  } 
  
  else {  
              jimm +=' <h2 class="modern-single-ad-price"> K'+String(obj.price) +' </h2>';
            price += '<p><strong><i class="fa fa-money"></i> K </strong>'+String(obj.price)+'</p>';


  
  } }}
  else 
  
  {  
               jimm +='<h2 class="modern-single-ad-price"> K'+obj.price_per_unit+' <?php echo e(trans('app.per')); ?> '+ capitalizeFirstLetter(obj.unit_type)+' </h2>';

                        price += '<p><strong><i class="fa fa-money"></i> K </strong>'+obj.price_per_unit+' <?php echo e(trans('app.per')); ?> '+ capitalizeFirstLetter(obj.unit_type)+ '</p>';

  
  }
  
  jimm +='<h3><?php echo app('translator')->getFromJson('app.general_info'); ?></h3>';
  jimm += price;
  
          if(obj.full_address){  
         if(obj.full_address.localeCompare('')){  
             
             jimm +='<p><strong><i class="fa fa-map-marker"></i>  <?php echo app('translator')->getFromJson('app.location'); ?> </strong>'+obj.full_address+'</p>';
             
             //document.getElementById("modal-address").innerHTML = '<i class="fas fa-map-marker"></i> <span class="modal-address" > '+ obj.address +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         if(obj.created_at){ 
                                        if(obj.created_at.localeCompare('')){              
             //document.getElementById("modal-posted").innerHTML = '<i class="fa fa-clock-o"></i> <span class="modal-posted" > '+ obj.created_at +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             jimm +='<p><strong><i class="fa fa-clock-o"></i> Posted </strong>'+ obj.created_at+'</p><p><strong><i class="fa fa-briefcase"></i> '+ capitalizeFirstLetter(obj.purpose) +'</strong> </p>';
                                         };};
                                          var url = obj.route.split("/");
            var finalurl = "report-ad/"+url[url.length - 1];
            slug = JSON.stringify(obj.slug);
                 slug = slug.replace(/"/g, "'");
  jimm +='<div class="modern-social-share-btn-group"><h4><?php echo app('translator')->getFromJson('app.share_this_ad'); ?></h4><a href="javascript:;" class="btn btn-default shareEmbedded"  data-toggle="modal" data-target="#shareEmbedded"><i class="fa fa-code"></i> </a>  <a href="#" class="btn btn-default share s_facebook" id ="modal-fb-link"><i class="fab fa-facebook-f"></i> </a> <a href="#" id="modal-twitter-link" class="btn btn-default share s_twitter"><i class="fab fa-twitter"></i> </a> <a href="#" id="modal-linked-in" class="btn btn-default share s_linkedin"><i class="fab fa-linkedin-in"></i> </a></div> <ul class="ad-action-list"><li><a href="javascript:;" id ="save-as-favourite" onclick="sluger('+slug+')"> <i class="fas fa-star"></i> Save ad as favorite </a></li><li><a href="'+finalurl +'" data-toggle="modal" data-target="#reportAdModal"><i class="fa fa-ban"></i> Report this ad</a></li></ul>'  ;                                     
  
  jimm += '</div>';
   document.getElementById("anem").innerHTML +=  jimm;
                                         var innerg ='<div class="ads-detail bg-white"> <legend><b>Property Details</b></legend><div class="single-at-a-glance"><ul class="list-group ">';
                                         
               if(obj.type){  
         if(obj.type.localeCompare('')){  
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-building"></i> '+capitalizeFirstLetter(obj.type)+' </li>';
             
             //document.getElementById("modal-type").innerHTML = '<i class="fa fa-building"></i> <span class="modal-type"> '+ changeCaseFirstLetter(obj.type .replace('_', ' '))+'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                          if(obj.angle){  
         if(parseFloat(obj.angle)){  
              innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-map-marker"></i> '+obj.angle+' KM Away From Search</li>';
             
             //document.getElementById("modal-attached-bath").innerHTML = '<i class="fa fa-shower"></i> '+ obj.attached_bath+' Attached bath(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                         if(obj.bedrooms){  
         if(parseFloat(String(obj.bedrooms))){  
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-bed"></i> '+obj.bedrooms+' <?php echo e(trans('app.bedrooms')); ?> </li>';
             
             //document.getElementById("modal-beds").innerHTML = '<i class="fa fa-bed"></i> <span class="modal-beds"> '+ obj.bedrooms+'  bedroom(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                         
                                         
                                         
                                        
             if(obj.attached_bath){  
         if(parseFloat(obj.attached_bath)){  
              innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-bath"></i> '+obj.attached_bath+' <?php echo e(trans('app.attached_bath')); ?> </li>';
             
             //document.getElementById("modal-attached-bath").innerHTML = '<i class="fa fa-shower"></i> '+ obj.attached_bath+' Attached bath(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                     if(obj.common_bath){  
         if(parseFloat(obj.common_bath)){  
             
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-shower"></i> '+obj.common_bath+' <?php echo e(trans('app.common_bath')); ?> </li>';
             //document.getElementById("modal-common-bath").innerHTML = '<i class="fa fa-shower"></i> '+ obj.common_bath+' Common bath(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                         
            
   if(obj.floor){  
         if(obj.floor.localeCompare('')){  
             
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-building"></i> '+obj.floor+' <?php echo e(trans('app.floor')); ?> </li>';
             
             //document.getElementById("modal-floors").innerHTML = '<i class="fa fa-bars"></i> <span class="modal-floors"> '+ obj.floor +' FLOOR(S)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};

innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-briefcase"></i> '+ capitalizeFirstLetter(obj.purpose) +' </li>';



if(obj.balcony){  
         if(parseFloat(obj.balcony)){  
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-window-maximize"></i> '+ obj.balcony +' <?php echo e(trans('app.belcony')); ?> </li>';
             
             //document.getElementById("modal-dining-space").innerHTML = '<i class="fas fa-utensils"></i> <span class="modal-dining-space"> '+ obj.dining_space+'  Dining Room(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};


if(obj.dining_space){  
         if(parseFloat(obj.dining_space)){  
             innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-utensils"></i> <?php echo e(trans('app.dining_space')); ?> </li>';
             
             //document.getElementById("modal-dining-space").innerHTML = '<i class="fas fa-utensils"></i> <span class="modal-dining-space"> '+ obj.dining_space+'  Dining Room(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};

 if(obj.living_room){  
         if(parseFloat(String(obj.living_room))){  
           innerg +=  '<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fas fa-tv"></i> <?php echo e(trans('app.living_room')); ?> </li>';
             
             //document.getElementById("modal-living-room").innerHTML = '<i class="fa fa-television "></i><span class="modal-living-room"> '+ obj.living_room+' Living  Room(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};


            
                                         
         if(obj.square_feet){  
         if(parseFloat(String(obj.square_feet))){  
              innerg +=  '<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-arrows-alt "></i> '+ obj.square_feet +' '+ capitalizeFirstLetter(obj.unit_type)+'</li>';
             //document.getElementById("modal-unitspace").innerHTML = '<i class="fa fa-arrows-alt "></i><span class="modal-unitspace"> '+ obj.square_feet+'  sqft</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
            
               
               if(parseFloat(obj.price_per_unit.replace(',','').replace(' ','').replace('.','')) > 0){  
         //if(parseFloat(String(obj.square_feet))){  
              innerg +=  '<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+obj.price_per_unit+' <?php echo e(trans('app.per')); ?> '+ capitalizeFirstLetter(obj.unit_type)+' </li>';
            // document.getElementById("modal-unitspace").innerHTML = '<i class="fa fa-arrows-alt "></i><span class="modal-unitspace"> '+ obj.square_feet+'  sqft</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                        };
            

               if(obj.bathrooms){  
         if(parseFloat(obj.bathrooms)){  
             
            // document.getElementById("modal-bathrooms").innerHTML = '<i class="fa fa-bath "></i> <span class="modal-baths"> '+ obj.bathrooms+'  bathrooms(s)</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                         if(parseFloat(obj.price.replace(',','').replace(' ','').replace('.','')) > 0){
                                             if(!obj.amenities.localeCompare("N;")){
        
        if(obj.purpose =="rent") { 
            innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+String(obj.price) +' /month (Negotiable)</li>';
      
              //document.getElementById("modal-price").innerHTML =   "K" +String(obj.price) +" /month (Negotiable)";;

        
      
  } 
  
  else {  
               innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+String(obj.price) +' (Negotiable)</li>';

            // document.getElementById("modal-price").innerHTML =   "K" +String(obj.price) +" (Negotiable)";;
  
  }
        
        
    }
    else {
         if(obj.purpose =="rent") { 
      
                  innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+String(obj.price) +' /month (Negotiable)</li>';

             // document.getElementById("modal-price").innerHTML =   "K" +String(obj.price) +" /month (Negotiable)";;

        
      
  } 
  
  else {  
               innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+String(obj.price) +' </li>';

             //document.getElementById("modal-price").innerHTML =   "K" +String(obj.price);;
  
  } }}
  else 
  
  {  
              // innerg +='<li class="list-group-item col-xl-4 col-xs-6" style="padding-left: 0px;"><i class="fa fa-money"></i> K'+String(obj.price) +' </li>';

            // document.getElementById("modal-price").innerHTML =   'K'+obj.price_per_unit+' <?php echo e(trans('app.per')); ?> '+ capitalizeFirstLetter(obj.unit_type);;
  
  }

  innerg +='</ul><div class="clearfix"></div><br><legend><b><?php echo app('translator')->getFromJson('app.description'); ?></b></legend><p>'+obj.description+'</p></div>';
console.log(parseFloat(obj.price_per_unit.replace(',','').replace(' ','').replace('.','')));

           document.getElementById("anem").innerHTML += innerg;


         //document.getElementById("save-as-favourite").innerHTML ='<i class="far fa-star"></i> Mark As Favourite';
            document.getElementById("save-as-favourite").onclick =function() {
                  var xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                   if (this.readyState == 4 && this.status == 200) {
                       

                       
                       var obj = JSON.parse(this.responseText);
                        if(obj.status=== 1){
                                                document.getElementById("inner").innerHTML = obj.msg;

                            } 
                            else { 
                                console.log(obj.redirect_url);
                                
                                 //if (obj.redirect_url){
                                 window.location = obj.redirect_url;
                            //}
                            } 

                      console.log(obj.msg);
                       
       // document.getElementById("demo").innerHTML = "bbvvn "+this.responseText;
                    //var obj = JSON.parse(this.responseText);
                     //loadapi(obj.Authorization); 

      
    }
  
  };
  xhttp.open("POST", "https://kupeza.co.zm/save-ad-as-favorite", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("slug="+obj.slug+"&_token=<?php echo e(csrf_token()); ?>" );

                
                
                myfavourite(obj.slug);
                     
                     
                 } ;

     if(obj.fav){ 
                     document.getElementById("save-as-favourite").innerHTML ='<i class="fa fa-star"></i> Remove from favorite'; 
                       
                   }
                   else { 
                     document.getElementById("save-as-favourite").innerHTML ='<i class="far fa-star"></i> Mark As Favourite'; 
                       
                   }

        //<i class="fa fa-clock-o"></i> <span class="modal-posted" >2 weeks ago</span>
        //"modal-type"
         if(obj.gravatar.localeCompare('')){  
        var  niezce = '<div class="ads-detail bg-white"> <legend><b> Agent Information </b></legend><div class="sidebar-user-info"><div class="row"><div class="col-xs-3"><img src="'+obj.gravatar+'" class="img-circle img-responsive"><br/></div><div class="col-xs-9">';

         }
         
         else{  
             
               var  niezce = '<div class="ads-detail bg-white"> <legend><b> Agent Information </b></legend><div class="sidebar-user-info"><div class="row"><div class="col-xs-3"><img src="https://kupeza.co.zm/uploads/avatar/'+obj.agent.photo+'" class="img-circle img-responsive"><br/></div><div class="col-xs-9">';
             
         }
              if(obj.agent.name){  
         if(obj.agent.name.localeCompare('')){  
             
             niezce += ' <h5><i class="fa fa-user"></i> '+obj.agent.name+'</h5>';
             
             if(obj.agent.zeia_badge == 1)
             {
                niezce += '<h6>A member of ZIEA</h6>';
                niezce += '<img src="<?php echo e(asset("assets/img/ziealogo.png")); ?>" style="width:100px;" />';

             }
             
             //document.getElementById("modal-agent").innerHTML = '<i class="fa fa-user"></i> <span class="modal-agent" > '+ obj.agent.name +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
        if(obj.address){  
         if(obj.address.localeCompare('')){  
             
             //document.getElementById("modal-address").innerHTML = '<i class="fas fa-map-marker"></i> <span class="modal-address" > '+ obj.address +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                if(obj.snapped){  

         if(obj.snapped.localeCompare('')){   
             
             niezce += '<p class="text-muted"><i class="fa fa-map-marker"></i> '+obj.snapped+'</p>';
             //document.getElementById("modal-city").innerHTML = '';
             //document.getElementById("modal-city").innerHTML = '<i class="fas fa-map-marker"></i> <span class="modal-city"> '+ obj.city +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                         
                                       
                                           if(obj.agent.email){  

         if(obj.agent.email.localeCompare('')){              
             //document.getElementById("modal-agent-email").innerHTML = '<i class="fas fa-envelope"></i> <span class="modal-agent-email" > '+ obj.agent.email +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                           if(obj.agent.phone){  

         if(obj.agent.phone.localeCompare('')){      
             //niezce  +=  '<p class="text-muted"> <i class="fa fa-phone"></i> '+obj.agent.phone+'</p>';
             niezce  +=  '<br></div><br><p><button onclick="showus()" class="modal-purpose" style="margin-bottom: 5px; background-color: color: #24292e;background-color: #eff3f6;background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); padding: 8px 48px;font-size: 16px;line-height: 20px;white-space: nowrap;vertical-align: middle;;display: inline-block;font-weight: bold;user-select: none;background-repeat: repeat-x;background-position: -1px -1px;background-size: 110% 110%;border: 1px solid rgba(27,31,35,.2);    border-radius: .25em" >Send Message to Agent</button></p>';
             document.getElementById("anem").innerHTML +=  niezce  + '<legend><b> Phone Number </b></legend> <h4 class="phoneme"><b>'+obj.agent.phone+'</b></h4><p><small></small></p><p><button onclick="ShowPhoneNumber()" class="modal-purpose" style="color: #24292e;background-color: #eff3f6;background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); padding: 8px 30px;font-size: 16px;line-height: 20px;white-space: nowrap;vertical-align: middle;;display: inline-block;font-weight: bold;user-select: none;background-repeat: repeat-x;background-position: -1px -1px;background-size: 110% 110%;border: 1px solid rgba(27,31,35,.2);    border-radius: .25em" >Click to Show Phone Number</button></p></div></div></div>';
             var x = document.getElementsByClassName("phoneme");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";;
}

                                         
             
            // document.getElementById("modal-agent-number").innerHTML = '<i class="fa fa-phone"></i> <span class="modal-agent-number" > '+ obj.agent.phone +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         }else{ 
             niezce  +=  '<br></div><br><p><button onclick="showus()" class="modal-purpose" style="margin-bottom: 5px; background-color: color: #24292e;background-color: #eff3f6;background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); padding: 8px 48px;font-size: 16px;line-height: 20px;white-space: nowrap;vertical-align: middle;;display: inline-block;font-weight: bold;user-select: none;background-repeat: repeat-x;background-position: -1px -1px;background-size: 110% 110%;border: 1px solid rgba(27,31,35,.2);    border-radius: .25em" >Send Message to Agent</button></p><p><small>For companies that do respond, the average response time is 0 to 12 hours – well above the one hour timeframe that customers expect – with the slowest response taking longer than 24 hours!</small></p>';
                                                    document.getElementById("anem").innerHTML +=  niezce  + '</div></div></div></div>';
 
                                             
                                         }
                                         
                                         ;}
                                         
                                         else{ 
             niezce  +=  '<br></div><br><p><button onclick="showus()" class="modal-purpose" style="margin-bottom: 5px; background-color: color: #24292e;background-color: #eff3f6;background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); padding: 8px 48px;font-size: 16px;line-height: 20px;white-space: nowrap;vertical-align: middle;;display: inline-block;font-weight: bold;user-select: none;background-repeat: repeat-x;background-position: -1px -1px;background-size: 110% 110%;border: 1px solid rgba(27,31,35,.2);    border-radius: .25em" >Send Message to Agent</button></p><p><small>For companies that do respond, the average response time is 0 to 12 hours – well above the one hour timeframe that customers expect – with the slowest response taking longer than 24 hours!</small></p>';
                                                    document.getElementById("anem").innerHTML +=  niezce  + '</div></div></div></div>';
 
                                             
                                         }
                                         
                                                  
                                         
                                          if(obj.created_at){  

         if(obj.created_at.localeCompare('')){              
            // document.getElementById("modal-posted").innerHTML = '<i class="fa fa-clock-o"></i> <span class="modal-posted" > '+ obj.created_at +'</span>';
                                             //addon+='<div class="col-xs-2" ><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };};
                                         
                                                            if(obj.indore_ammenties.length > 0){ 
                       var inner = '<div class="ads-detail bg-white"><legend><b><?php echo app('translator')->getFromJson('app.indoor_amenities'); ?></b></legend><div class="single-at-a-glance"><ul class="list-group ">';
                       
                       
                     var i;
                     for (i = 0; i < obj.indore_ammenties.length; i++) {
                         inner +='<li class="list-group-item col-ls-4 col-xs-6"><i class="fas fa-check-circle"></i> '+obj.indore_ammenties[i]+'</li>';
                          // text += cars[i] + "<br>";
                       }
                       inner +=' </ul><div class="clearfix"></div></div></div>';
                       document.getElementById("anem").innerHTML += inner;
                   }
                   
                     if(obj.outdoor_ammenties.length > 0){ 
                       
                        var inner = '<div class="ads-detail bg-white"><legend><b><?php echo app('translator')->getFromJson('app.outdoor_amenities'); ?></b></legend><div class="single-at-a-glance"><ul class="list-group ">';
                       
                       
                     var i;
                     for (i = 0; i < obj.outdoor_ammenties.length; i++) {
                         inner +='<li class="list-group-item col-ls-4 col-xs-6"><i class="fas fa-check-circle"></i> '+obj.outdoor_ammenties[i]+'</li>';
                          // text += cars[i] + "<br>";
                       }
                       inner +=' </ul><div class="clearfix"></div></div></div>';
                       document.getElementById("anem").innerHTML += inner;

                   }
                   
                   if(obj.distances.length > 0){ 
                        var i;
                        var inner ='<div class="ads-detail bg-white"><legend><b><?php echo app('translator')->getFromJson('app.distances'); ?></b></legend><div class="single-at-a-glance"><ul class="list-group ">';
                     for (i = 0; i < obj.distances.length; i++) {
                         //console.log(obj.distances[i].brand_name ,obj.distances[i].distance);
                         inner += '<li class="list-group-item col-ls-4 col-xs-6"><i class="fa fa-road"></i> '+obj.distances[i].brand_name+ '<br/>(' +obj.distances[i].distance+')</li>';
                        // inner +='<li class="list-group-item col-sm-4 col-xs-6"><i class="fas fa-check-circle"></i>'+obj.outdoor_ammenties[i]+'</li>';
                          // text += cars[i] + "<br>";
                       }
                       
                       inner +=' </ul><div class="clearfix"></div></div></div>';
                       document.getElementById("anem").innerHTML += inner;
                     
                   }
        
        
    //document.getElementById("modal-city").innerHTML = obj.city;<i class="fas fa-envelope"></i> <span class="modal-agent-email" >admin@demo.com</span>
    //document.getElementById("modal-agent-email").innerHTML = obj.agent.email;
    document.getElementById("modal-fb-link").href= "https://www.facebook.com/sharer/sharer.php?u="+obj.route;
            //document.getElementById("modal-purpose").innerHTML = obj.purpose;
            // document.getElementById("modal-price-plan").innerHTML = '<p class="modal-price-plan">'+obj.price_plan+'</p>';

            var h = document.getElementById("modal-fb-link").offsetWidth;
            var images = document.getElementById("modal-images-col");
            images.scrollTop = 0;
            document.getElementById("modal-images-col2").scrollTop = 0;
            document.getElementById("modal-images-col2").scrollIntoView();
            document.getElementById("mapper").style.width = "300px";
            document.getElementById("mapper").style.height = "300px";
                    var location = { lat: parseFloat(obj.latitude), lng: parseFloat(obj.longitude) };


            var mapper = new google.maps.Map(document.getElementById('mapper'), {
          center:  location,
              zoomControl: false,
                  scaleControl: false,
                  disableDefaultUI:true,



          zoom: 12
        });
        
          var svg_sale='<svg xmlns="http://www.w3.org/2000/svg" width="563" height="563" viewBox="0 0 563 563"><defs><style>.cls-1, .cls-3, .cls-4 {fill: #a200ea;}.cls-1, .cls-2 {fill-rule: evenodd;}.cls-2, .cls-5 {fill: #fff;}.cls-4 {stroke: orange;stroke-width: 5px;}.cls-5 {font-size: 70px;text-anchor: middle;font-family: "Arial Black";}</style></defs><path class="cls-1" d="M85,174.727C85,78.219,163.127,0,259.5,0S434,78.219,434,174.727C434,271.211,259.5,563,259.5,563S85,271.211,85,174.727Z"/><g><path class="cls-2" d="M351.973,256.6a3.428,3.428,0,0,1-3.43,3.42H171.456a3.425,3.425,0,0,1-3.429-3.42V165.443c0-3.283,3.429-6.845,3.429-6.845s84.512-83.948,86.12-85.552A3.481,3.481,0,0,1,262.452,73c1.045,1.041,85.56,85.6,85.56,85.6s3.762,3.778,3.961,6.845V256.6Z"/><path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-2" d="M155.781,139.788L250.2,44.7a9.5,9.5,0,0,1,13.483,13.387l-94.415,95.089A9.5,9.5,0,0,1,155.781,139.788Z"/><path id="Rounded_Rectangle_2_copy" data-name="Rounded Rectangle 2 copy" class="cls-2" d="M363.544,139.355l-95.173-94.33A9.5,9.5,0,1,0,255,58.52l95.173,94.33A9.5,9.5,0,0,0,363.544,139.355Z"/><path id="Rounded_Rectangle_3" data-name="Rounded Rectangle 3" class="cls-3" d="M248,220h18a10,10,0,0,1,10,10v31a0,0,0,0,1,0,0H238a0,0,0,0,1,0,0V230A10,10,0,0,1,248,220Z"/></g><rect id="Rounded_Rectangle_4" data-name="Rounded Rectangle 4" class="cls-4" x="229" y="99" width="248" height="110" rx="20" ry="20"/><text id="SALE" class="cls-5" x="353.889" y="179.673"><tspan x="353.889">SALE</tspan></text></svg>';
 
 var svg_rent ='<svg xmlns="http://www.w3.org/2000/svg" width="563" height="563" viewBox="0 0 563 563"><defs><style>.cls-1, .cls-3, .cls-4 {fill: orange;}.cls-1, .cls-2 {fill-rule: evenodd;}.cls-2, .cls-5 { fill: #fff;}.cls-4 {stroke: #a200ea;stroke-width: 5px;}.cls-5 {font-size: 70px;text-anchor: middle;font-family: "Arial Black";}</style></defs><path class="cls-1" d="M85,174.727C85,78.219,163.127,0,259.5,0S434,78.219,434,174.727C434,271.211,259.5,563,259.5,563S85,271.211,85,174.727Z"/><g><path class="cls-2" d="M351.973,256.6a3.428,3.428,0,0,1-3.43,3.42H171.456a3.425,3.425,0,0,1-3.429-3.42V165.443c0-3.283,3.429-6.845,3.429-6.845s84.512-83.948,86.12-85.552A3.481,3.481,0,0,1,262.452,73c1.045,1.041,85.56,85.6,85.56,85.6s3.762,3.778,3.961,6.845V256.6Z"/><path id="Rounded_Rectangle_2" data-name="Rounded Rectangle 2" class="cls-2" d="M155.781,139.788L250.2,44.7a9.5,9.5,0,0,1,13.483,13.387l-94.415,95.089A9.5,9.5,0,0,1,155.781,139.788Z"/><path id="Rounded_Rectangle_2_copy" data-name="Rounded Rectangle 2 copy" class="cls-2" d="M363.544,139.355l-95.173-94.33A9.5,9.5,0,1,0,255,58.52l95.173,94.33A9.5,9.5,0,0,0,363.544,139.355Z"/><path id="Rounded_Rectangle_3" data-name="Rounded Rectangle 3" class="cls-3" d="M248,220h18a10,10,0,0,1,10,10v31a0,0,0,0,1,0,0H238a0,0,0,0,1,0,0V230A10,10,0,0,1,248,220Z"/></g><rect id="Rounded_Rectangle_4" data-name="Rounded Rectangle 4" class="cls-4" x="229" y="99" width="248" height="110" rx="20" ry="20"/><text id="RENT" class="cls-5" x="353.889" y="179.673"><tspan x="353.889">RENT</tspan></text></svg>';
        

        
           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(obj.purpose =="rent") { 
      
         var marker = new google.maps.Marker({
          position: location,
                //  id: id,

icon :{ url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_rent), scaledSize: new google.maps.Size(50, 50) },
          map: mapper
        });
        
      
  } else if(obj.purpose =="sale") {  
      
      var marker = new google.maps.Marker({
          position: location,
             //     id: id,

icon :{ url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg_sale), scaledSize: new google.maps.Size(50, 50) },
          map: mapper
        });
        
      
  }
  
  else {  
      
      var marker = new google.maps.Marker({
          position: location,
       // id: id,
        icon: oicon,
          map: mapper
        });
        
      
  }
  
          mapper.setOptions({scrollwheel:true});

  
        
             images.innerHTML = '';
              var ims = []; 
              for ( var i = 0; i < obj.gallery_url.length; i++) {
                                    var binz = obj.gallery_url;

                  ims.push(binz[i].media_name);
                  
                  
              }
                 ims = JSON.stringify(ims);
                 ims = ims.replace(/"/g, "'");
              console.log(ims);

             var imk = null;
            //images.innerHTML = '<div class="modal-load-images" style="margin:0;width:100%;cursor: pointer;"><img src="'+obj.media_url+'" class="img-responsive modal-img" style="padding:5px;width:100%;"></div>';
              for ( var i = 0; i < obj.gallery_url.length; i++) {
                  
                  var binz = obj.gallery_url;
                  imk = 1;
                  if(i==0){
                  //console.log(binz[i].media_name);
                              images.innerHTML += '<div class="modal-load-images" style="margin:0;width:100%;cursor: pointer;"><img onclick="showImages(this,'+ims+')" src="https://www.kupeza.co.zm/uploads/images/'+binz[i].media_name+'" class="img-responsive modal-img" style="padding:5px;background-image: url(https://www.kupeza.co.zm/uploads/images/'+binz[i].media_name+');"></div>';
 }
 else {
                  //console.log(binz[i].media_name);
                              images.innerHTML += '<div style="float:left;;padding:2px;;height:300px;width:50%;cursor: pointer;"><div style="float:left;background:#eee;height:100%;width:100%;-webkit-animation-name: example 2s infinite;animation: example 2s infinite;"> <div onclick="showImages(this,'+ims+')"  style="background-image: url(https://www.kupeza.co.zm/uploads/images/'+binz[i].media_name+');height:100%;width:100%;cursor: pointer;"></div></div></div>';
 }
                  
              }
              
              if(!imk){
                
                              images.innerHTML = '<div class="modal-load-images" style="margin:0;width:100%;cursor: pointer;"><img src="'+obj.media_url+'" class="img-responsive modal-img" style="padding:5px;width:100%;"></div>';

              }

            //document.getElementById("modal-desc display-text").innerHTML = obj.description;
            var url = obj.route.split("/");
            var finalurl = "report-ad/"+url[url.length - 1];
                //document.getElementById("modal-report-ad").href= finalurl;

            console.log(obj);
            //var url = jonh.replace(/"/g, "report-ad");
              if(parseFloat(obj.price.replace(',','').replace(' ','').replace('.','')) > 0){
                  var vee = obj.price.replace(',','').replace(',','').replace(',','').replace(',','').replace(',','').replace(' ','').replace('.','');
            document.getElementById("principal").value = parseFloat(vee);
            console.log(vee);
            
              }
              else {
                  var vee = obj.price_per_unit.replace(',','').replace(',','').replace(',','').replace(',','').replace(',','').replace(' ','').replace('.','');
            document.getElementById("principal").value = parseFloat(vee);
            console.log(vee);
            
              }
          
          // @Bookmark1
              
            var propertyTax = parseFloat(document.getElementById('property-tax').textContent)/100;
            console.log(obj.price);
            console.log(propertyTax * parseFloat(vee));
            
            document.getElementById('property-taxes-price').textContent = Math.round((propertyTax * parseFloat(vee))/12);
            
            document.getElementById("rate").value = document.getElementById('mortgageProvider').value;
            document.getElementById("years").value = 20;
            //  var stepOne = 1 + 0.005 ;//this is the rate + 1
            // var stepTwo = Math.pow(stepOne, 240);
            // var stepThree = stepTwo * 0.005;
            // var stepFour = stepTwo -1;
            // var stepFive = stepThree/stepFour;
            // var mortgageAmount = Math.round(Number( obj.price) * stepFive);
            
            // document.getElementById("mortgageamount").value = mortgageAmount;
            // document.getElementById("mortgageamount2").value = mortgageAmount;
            
            
            
            // var insurancePrice = parseFloat(document.getElementById('insurance-price').textContent);
            // var mortgageInsurancePrice = parseFloat(document.getElementById('mortgage-insurance-price').textContent);
            // var propertyTaxesPrice = parseFloat(document.getElementById('property-taxes-price').textContent);
            // var waterPrice = parseFloat(document.getElementById('water-price').textContent);
            // var tvPrice = parseFloat(document.getElementById('television-price').textContent);
            // var netPrice = parseFloat(document.getElementById('wifi-price').textContent);

            // document.getElementById("total-expenses").value = mortgageAmount + insurancePrice + mortgageInsurancePrice + propertyTaxesPrice + waterPrice + tvPrice + netPrice;
            // console.log(mortgageAmount);
            recalculateMortgage();
            // updateChart(mortgageAmount);




    document.getElementById("modal-twitter-link").href= "https://twitter.com/intent/tweet?url="+obj.route;
    document.getElementById("modal-linked-in").href= "https://www.linkedin.com/sharing/share-offsite/?url="+obj.route;

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://kupeza.co.zm/api/whereami?slug="+obj.slug, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send("slug="+obj.slug);
xhr.onreadystatechange = function() { 
      // If the request completed, close the extension popup
      if (this.readyState == 4){
      if (this.status == 200) {
          
          console.log(xhr.responseText);
      }
          
      }
        
    };
    console.log("slug="+obj.slug)

  modal.style.display = "block";
  myFunction();
}

function ShowPhoneNumber() {
              var x = document.getElementsByClassName("phoneme");
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.display = "block";;
}
   

}


function myFunction() {
    
  var elmnt = document.getElementById("modal-images-col2");
  var x = elmnt.scrollLeft;
  var y = elmnt.scrollTop;
  if (y > 0) {
      
       elmnt.scrollTop = 0;
  }
  var elmnt = document.getElementById("modal-content-area2");
  var x = elmnt.scrollLeft;
  var y = elmnt.scrollTop;
  if (y > 0) {
      
       elmnt.scrollTop = 0;
  }
  //console.log("Horizontally: " + x + "px<br>Vertically: " + y + "px")
}
        function changeRate(){
            var mortgageRate= $("#mortgageProvider").val();
            document.getElementById('rate').value = mortgageRate;
            recalculateMortgage();
        }
        
        function recalculateMortgage(){
            // var mortgageRate= $("#rate").val();
            // var mortgageRate= $("#mortgageProvider").val();
            // document.getElementById('rate').value = mortgageRate;
            var mortgageRate = document.getElementById('rate').value;
            var Principal = $("#principal").val();
            var years = $("#years").val();
            mortgageRate = (mortgageRate/100)/12
            years *= 12;

            console.log(mortgageRate);
            console.log(years);

            var stepOne = 1 + mortgageRate ;//this is the rate + 1
            var stepTwo = Math.pow(stepOne, (years));
            var stepThree = stepTwo * mortgageRate;            ;
            var stepFour = stepTwo -1;
            var stepFive = stepThree/stepFour;
            var mortgageAmount = Math.round(Principal * stepFive);
            var mortgageRound = mortgageAmount;
            if(mortgageRate === 0){
                $('.mortgageamount').text("Calculating...");
                $('.total-expenses').text("Calculating...");
            } else{
                $('.mortgageamount').text(numberWithCommas(mortgageRound));
                
                var insurancePrice = parseFloat(document.getElementById('insurance-price').textContent);
                var mortgageInsurancePrice = parseFloat(document.getElementById('mortgage-insurance-price').textContent);
                var propertyTaxesPrice = parseFloat(document.getElementById('property-taxes-price').textContent);
                var waterPrice = parseFloat(document.getElementById('water-price').textContent);
                var tvPrice = parseFloat(document.getElementById('television-price').textContent);
                var netPrice = parseFloat(document.getElementById('wifi-price').textContent);
                $('.total-expenses').text( numberWithCommas(mortgageAmount + insurancePrice + mortgageInsurancePrice + propertyTaxesPrice + waterPrice  + tvPrice + netPrice));
            }
            
            updateChartMortgage(mortgageRound);
        }
        
        function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
    
     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'); 
    if(!unilong  &&  !address){ 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 <strong>'+ searchadd+'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
    if(address){
        
         if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
       if(searcher.value){
           
            if(searcher.value.length > 25) {
          string = searcher.value.substring(0,40) + "...";
     }
     
     else{
          string = searcher.value;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string  +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 }
 
                            // bangalore = { lat: lat, lng: long };
                            
                                  if(myObj.data.length == 0 ){ 
                                                         var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
                                   document.getElementById("overlayed").style.display = "none";
                                   
                    map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center:new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
            google.maps.event.addListener(map, 'click', function(event) {
                              let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
            //console.log("hiii");
              geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

           // console.log(address +"b");
            }

              searcher.value =address;
          //     if(address){
          
           if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string  +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
        removeactions();
        document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
   
                                       mapclicker(myLng ,myLat);

                        //loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
       
       
 var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
                var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'No matching results...');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
          var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

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

    divs.innerHTML +='<div class="zsg-notification-bar zsg-content-item"><h3 class="zsg-content_collapsed">No matching results...</h3><span>Try clicking on some areas to include more results. Or, change your search criteria.</span></div>';
                                
                                  }

           

            for ( var i = 0; i < myObj.data.length; i++) {
                                console.log(myObj.data);

                
                 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,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
                              streetViewControl: false,
                                                            fullscreenControl: false,


        });
        
        map.setOptions({scrollwheel:true});
          map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
        
             google.maps.event.addListener(map, 'zoom_changed', function() {
    zoomLevel = map.getZoom();
    //console.log(zoomLevel);
    if (zoomLevel >= 7) {
        map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
       var ZoomControlDiv = document.createElement('div');
        var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom Out To See All The Loaded Properties ('+myObj.data.length+')');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    } else {
    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
    var ZoomControlDiv = document.createElement('div');
    var helper = new Zoomhelper(ZoomControlDiv, map ,  'Zoom In To See Specific Properties');
        ZoomControlDiv.index = 3;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ZoomControlDiv);
    }
});
        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 centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
                 google.maps.event.addListener(map, 'click', function(event) {
                       let myLat = event.latLng.lat();
            let myLng = event.latLng.lng();
               geocoder.geocode({'location': event.latLng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {

            var done = false ;
            for (var i = 0; i < results[0].address_components.length; i++){

            if(!done && results[0].address_components[i].long_name !="Unnamed Road"){
                      address = results[0].address_components[i].long_name ;
                      done = true;
             }
             if(done &&  i == results[0].address_components.length - 1 ){
             address +=" ,"+results[0].address_components[i].long_name;
              }

            //console.log(address +"b");
            }

              searcher.value =address;
                      ///if(address){
                      
                       if(address.length > 25) {
          string = address.substring(0,40) + "...";
     }
     
     else{
          string = address;
     }
        
     
     notices.innerHTML ='<p class="" style="margin-top: 15px;">Listings closest to <strong>'+ string +'</strong>   <strong>('+ myObj.data.length+')</strong></p>';
    
     
 //}


            } else {
              console.log('No results found');
            }
          } else {
            console.log('Geocoder failed due to: ' + status);
          }
        });
             
                    map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();

               var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
                removeactions();
                document.getElementById("overlayed").style.display = "block";
  document.getElementById('overlayed').style.height= '100%';
    document.getElementById('overlayed').style.width= '110%';
  document.getElementById('overlayed').style.backgroundColor= 'rgba(0, 0, 0, 0.5)';
  document.getElementById('overlayed').style.zIndex = "1000";
  document.getElementById('overlayed').style.position = "absolute";
    document.getElementById('overlayed').style.marginLeft = "-10%";;
                               mapclicker(myLng ,myLat);


                       // loadLoc(myLng ,myLat);

          //addMarker(event.latLng, map);
          //console.log(event.latLng);
        });
                 }
                 
                 var urls =  String(myObj.data[i].media_url);
                   document.getElementById("overlayed").style.display = "none";

      
         
            //mycenter = { lat: parseFloat(myObj.data[i].latitude), lng: parseFloat(myObj.data[i].longitude) };
            var currency_symbol = myObj.data[i].currency_type == "kwacha" ? "K" : "$";
            
            if(parseFloat(myObj.data[i].price.replace(',','').replace(' ','').replace('.','')) > 0){
             var price =  currency_symbol +String(myObj.data[i].price); }
             else 
             {
                  var price = currency_symbol+myObj.data[i].price_per_unit ;
                 
             }
                             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 addon = '';
                                         if(parseFloat(bedrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fa fa-bed"></i>'+bedrooms+'</div>';
                                             
                                         };
                                         
                                            if(parseFloat(bathrooms)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"><i class="fas fa-bath"></i>'+bathrooms+'</div>';
                                             
                                         };
                                         
                                          if(parseFloat(square_feet)){  
                                             addon+='<div class="col-xs-2" style="padding-right:0px;"></i>'+square_feet+' Sqaure feet  </div>';
                                             
                                         };

            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 price">'
            +'<div class="col-xs-8" style="margin-bottom: -10px;"><p class="k-price">'+price+'</p></div></div>'
            +'<div class="row address"><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 bedrooms">'+addon+'<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() {  
        
        myScript();
        
        //loadInfo() ;
        
        
    }
    
    
    function addfav() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = "bbvvn "+this.responseText;
                    var obj = JSON.parse(this.responseText);
                    console.log(obj);
                     //loadapi(obj.Authorization); 

      
    }
    else  {
          var obj = JSON.parse(this.responseText);
                    console.log(obj);
      document.getElementById("demo").innerHTML = "bbvvn "+this.responseText;
    }
  };
  xhttp.open("POST", "https://kupeza.co.zm/save-ad-as-favorite", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("slug=farm-for-sale-in-mazabuka&_token=<?php echo e(csrf_token()); ?>" );
}
function next(){
var modal = document.getElementById("myModalImages");
var modalImg = document.getElementById("img01");
var a = allimages.indexOf(curr);
if(a >= allimages.length-1){
modalImg.src = 'https://www.kupeza.co.zm/uploads/images/'+ allimages[0];
curr = allimages[0];
console.log(curr);
var width = modalImg.clientWidth;
var height = modalImg.clientHeight;
if(height >width){
modalImg.className = "biggerHeight";
} else {
modalImg.className = "biggerWidth modal-images-content";
}

} else {
modalImg.src = 'https://www.kupeza.co.zm/uploads/images/'+allimages[a+1];
console.log(curr);
curr = allimages[a+1];
var width = modalImg.clientWidth;
var height = modalImg.clientHeight;
if(height >width){
modalImg.className = "biggerHeight";
} else {
modalImg.className = "biggerWidth modal-images-content";
}

}
}

function back(){
var modal = document.getElementById("myModalImages");
var modalImg = document.getElementById("img01");
var a = allimages.indexOf(curr);
if(a <= 0){
modalImg.src = 'https://www.kupeza.co.zm/uploads/images/'+allimages[allimages.length-1];
curr = allimages[allimages.length-1];
console.log(a);
var width = modalImg.clientWidth;
var height = modalImg.clientHeight;
if(height >width){
modalImg.className = "biggerHeight";
} else {
modalImg.className = "biggerWidth modal-images-content";
}

} else {
modalImg.src = 'https://www.kupeza.co.zm/uploads/images/'+allimages[a-1];
console.log(a);
curr = allimages[a-1];
var width = modalImg.clientWidth;
var height = modalImg.clientHeight;
if(height >width){
modalImg.className = "biggerHeight";
} else {
modalImg.className = "biggerWidth modal-images-content";
}

}
}
function showImages(el ,b){
var modal = document.getElementById("myModalImages");
var modalImg = document.getElementById("img01");
allimages = b;
var img = el,
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
var javas = bi.split("/");
modal.style.display = "block";
console.log(b);
modalImg.src = 'https://www.kupeza.co.zm/uploads/images/'+javas[javas.length-1];
curr = javas[javas.length-1];
var width = modalImg.clientWidth;
var height = modalImg.clientHeight;
console.log(height);
if(height >width){
modalImg.className = "biggerHeight";
} else {
modalImg.className = "biggerWidth modal-images-content";
}
console.log(javas[javas.length-1]);
}

var span = document.getElementsByClassName("closeimgemodal")[0];

span.onclick = function() {
var modal = document.getElementById("myModalImages");
modal.style.display = "none";
}
    
  
    function loadDoc() {
              markers = {};
               map = new google.maps.Map(document.getElementById('map'), {
     zoom: minZoomLevel,
           streetViewControl: false,
       fullscreenControl: false,
     center: new google.maps.LatLng(-12.937657813284046, 27.81742890625003),
     mapTypeId: google.maps.MapTypeId.ROADMAP
 });
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

var centerControlDiv = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
        var helperControlDiv = document.createElement('div');
    var helper = new Helper(helperControlDiv, map);
        helperControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(helperControlDiv);
                removeactions();

   

 
    }
    loadDoc();
    google.maps.event.addDomListener(window, 'load', initialize);
    
    $(document).ready(function() {
        $('#shortBySelect').change(function(){
            var form_input = $('#listingFilterForm').serialize();
            location.href = '<?php echo e(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=""><?php echo app('translator')->getFromJson('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=""><?php echo app('translator')->getFromJson('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> <?php echo app('translator')->getFromJson('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> <?php echo app('translator')->getFromJson('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> <?php echo app('translator')->getFromJson('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> <?php echo app('translator')->getFromJson('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 : '<?php echo e(route('get_state_by_country')); ?>',
                    data : { country_id : country_id,  _token : '<?php echo e(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 : '<?php echo e(route('get_city_by_state')); ?>',
                    data : { state_id : state_id,  _token : '<?php echo e(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 : '<?php echo e(route('switch_grid_list_view')); ?>',
                    data : { grid_list_view : 'grid',  _token : '<?php echo e(csrf_token()); ?>' },
                });
            });
            $('#showListView').click(function(){
                $('.ad-box-grid-view').show();
                $('.ad-box-list-view').hide();
                $.ajax({
                    type : 'POST',
                    url : '<?php echo e(route('switch_grid_list_view')); ?>',
                    data : { grid_list_view : 'list',  _token : '<?php echo e(csrf_token()); ?>' },
                });
            });
        });
        
        var placeSearch, autocomplete;

        
        function initAutocomplete() {

  autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('places'), {types: ['geocode']});

  autocomplete.setFields(['address_component']);
    autocomplete.setComponentRestrictions(
            {'country': ['zm']});

  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  var place = autocomplete.getPlace();

//->forPage(1, 2)

}








</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script>
  var parentModalId;

document.getElementById("CheckMortage").addEventListener("click", displayMortgage);
document.getElementById("mortgageamount").addEventListener("click", displayMortgage);
document.getElementById("InsuranceService").addEventListener("click", displayInsurance);
document.getElementById("WaterService").addEventListener("click", displayWater);
document.getElementById("InternetService").addEventListener("click", displayInternet);
document.getElementById("TelevisionSrvice").addEventListener("click",displayTelevision );

function displayMortgage() {
var modal = document.getElementById("mySeviceModal");
var span = document.getElementsByClassName("serviceclose")[4];
modal.style.display = "block";

span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

}

function displayInsurance() {
var modal = document.getElementById("displayInsurance");
var span = document.getElementsByClassName("serviceclose")[0];
modal.style.display = "block";
parentModalId = "displayInsurance";
span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}}

function displayWater() {
var modal = document.getElementById("displayWater");
var span = document.getElementsByClassName("serviceclose")[1];
modal.style.display = "block";
parentModalId = "displayWater";
span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}}

function displayInternet() {
var modal = document.getElementById("displayInternet");
var span = document.getElementsByClassName("serviceclose")[2];
modal.style.display = "block";
parentModalId = "displayInternet";
span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}}
function displayTelevision() {
var modal = document.getElementById("displayTelevision");
var span = document.getElementsByClassName("serviceclose")[3];
modal.style.display = "block";
parentModalId = "displayTelevision";
span.onclick = function() {modal.style.display = "none";}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}}

var tvContent = document.getElementById('television-display-0');
var waterContent = document.getElementById('water-display-0');
var internetContent = document.getElementById('internet-display-0');
var insuranceContent = document.getElementById('insurance-display-0');



function showModalContent(contentId)
{
    console.log("change");
    // var parent = document.getElementById(parentModalId);
    var nextContent;
    var priceToChange;
    
    
    
    if(parentModalId == "displayInternet"){
        
        internetContent.style.display = 'none';
        nextContent = document.getElementById(contentId.value);
        nextContent.style.display = 'block';
        priceToChange = nextContent.querySelectorAll(".provider-amount");
        document.getElementById('wifi-price').textContent = parseFloat(priceToChange[0].textContent);
        internetContent = nextContent;
        recalculateTotalExpenses();
        
    } else if(parentModalId == "displayTelevision")
    {
        tvContent.style.display = 'none';
        nextContent = document.getElementById(contentId.value);
        nextContent.style.display = 'block';
        priceToChange = nextContent.querySelectorAll(".provider-amount");
        document.getElementById('television-price').textContent = parseFloat(priceToChange[0].textContent);
        tvContent = nextContent;
        recalculateTotalExpenses();
        
    }else if(parentModalId == "displayWater"){
        
        waterContent.style.display = 'none';
        nextContent = document.getElementById(contentId.value);
        nextContent.style.display = 'block';
        priceToChange = nextContent.querySelectorAll(".provider-amount");
        document.getElementById('water-price').textContent = parseFloat(priceToChange[0].textContent);
        waterContent = nextContent;
        recalculateTotalExpenses();
        
    }else if(parentModalId == "displayInsurance"){
        
        insuranceContent.style.display = 'none';
        nextContent = document.getElementById(contentId.value);
        nextContent.style.display = 'block';
        priceToChange = nextContent.querySelectorAll(".provider-amount");
        document.getElementById('insurance-price').textContent = parseFloat(priceToChange[0].textContent);
        insuranceContent = nextContent;
        recalculateTotalExpenses();
        
    }
}

var mortgagePrice = parseFloat(document.getElementById('mortgageamount2').textContent);
var insurancePrice = parseFloat(document.getElementById('insurance-price').textContent);
var mortgageInsurancePrice = parseFloat(document.getElementById('mortgage-insurance-price').textContent);
var propertyTaxesPrice = parseFloat(document.getElementById('property-taxes-price').textContent);
var waterPrice = parseFloat(document.getElementById('water-price').textContent);
var tvPrice = parseFloat(document.getElementById('television-price').textContent);
var netPrice = parseFloat(document.getElementById('wifi-price').textContent);

function recalculateTotalExpenses()
{
    
    document.getElementById('total-expenses').textContent = numberWithCommas(mortgagePrice + insurancePrice + mortgageInsurancePrice + propertyTaxesPrice + waterPrice + tvPrice + netPrice);
    // chart.update();
    updateChart();
    
}
// @bookmark4
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var ctx = document.getElementById('myChart').getContext('2d');

var data = {
    datasets: [{
        // data: [mortgagePrice, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice, waterPrice,tvPrice,netPrice],
        data: [mortgagePrice, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice],
        // backgroundColor:[
        //     'rgba(255,0,0,0.2)',
        //     'rgba(255,255,0,0.2)',
        //     'rgba(0,0,255,0.2)',
        //     'rgba(0,128,0,0.2)',
        //     'rgba(255,165,0,0.2)',
        //     'rgba(255,0,255,0.2)',
        //     'rgba(75,0,130,0.2)',
             
        // ],
        backgroundColor:[
            'rgba(157, 41, 178,1)',
            'rgba(252, 90, 11,1)',
            'rgba(82, 109, 255,1)',
            'rgba(255, 235, 60,1)',
            // @bookmark6
             
        ],
        // borderColor:[
        //     'rgba(255,0,0,1)',
        //     'rgba(255,255,0,1)',
        //     'rgba(0,0,255,1)',
        //     'rgba(0,128,0,1)',
        //     'rgba(255,165,0,1)',
        //     'rgba(255,0,255,1)',
        //     'rgba(75,0,130,1)',
        // ],
        
        borderColor:[
            'rgba(157, 41, 178,1)',
            'rgba(252, 90, 11,1)',
            'rgba(82, 109, 255,1)',
            'rgba(255, 235, 60,1)',
            
        ],
        borderWidth: 1,
        weight:1,
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    // labels: [
    //     'Mortgage',
    //     'Insurance',
    //     'Mortgage Insurance',
    //     'Property Taxes',
    //     'Water',
    //     'Television',
    //     'Internet',
        
    // ],
    labels: [
        'Principal and Interest',
        'Insurance',
        'Mortgage Insurance',
        'Property Taxes',
        
        
    ],
    
    
};
var options = {
			
	elements: {
		
	}
};


var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
});

function updateChart(mA)
{
    
    mortgagePrice = parseFloat(document.getElementById('mortgageamount2').textContent);
    insurancePrice = parseFloat(document.getElementById('insurance-price').textContent);
    mortgageInsurancePrice = parseFloat(document.getElementById('mortgage-insurance-price').textContent);
    propertyTaxesPrice = parseFloat(document.getElementById('property-taxes-price').textContent);
    waterPrice = parseFloat(document.getElementById('water-price').textContent);
    tvPrice = parseFloat(document.getElementById('television-price').textContent);
    netPrice = parseFloat(document.getElementById('wifi-price').textContent);
    console.log(mA);
    // myPieChart.data.datasets[0].data = [mortgagePrice, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice, waterPrice,tvPrice,netPrice];
    myPieChart.data.datasets[0].data = [mA, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice];
    myPieChart.update();
    
}
// mortgageAmount
function updateChartMortgage(mA)
{
    insurancePrice = parseFloat(document.getElementById('insurance-price').textContent);
    mortgageInsurancePrice = parseFloat(document.getElementById('mortgage-insurance-price').textContent);
    propertyTaxesPrice = parseFloat(document.getElementById('property-taxes-price').textContent);
    waterPrice = parseFloat(document.getElementById('water-price').textContent);
    tvPrice = parseFloat(document.getElementById('television-price').textContent);
    netPrice = parseFloat(document.getElementById('wifi-price').textContent);
    // myPieChart.data.datasets[0].data = [mA, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice, waterPrice,tvPrice,netPrice];
    myPieChart.data.datasets[0].data = [mA, insurancePrice, mortgageInsurancePrice, propertyTaxesPrice];
    myPieChart.update();
    
}


function openModalChart(evt)
{
    var activeElement = myPieChart.getElementAtEvent(evt);
    // console.log(activeElement[0]);
    // console.log(typeof activeElement[0]._model.label);
    
    if(activeElement[0]._model.label == 'Mortgage'){
        displayMortgage();
    } else if(activeElement[0]._model.label == 'Insurance'){
        displayInsurance();
    }  else if(activeElement[0]._model.label == 'Water'){
        displayWater();
    } else if(activeElement[0]._model.label == 'Television'){
        displayTelevision();
    } else if(activeElement[0]._model.label == 'Internet'){
        displayInternet();
    }
}
</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBv335_B2iABL3br4duZulkby226FJn0L4&libraries=places&callback=initAutocomplete"
  async defer></script>


<script src="<?php echo e(asset('assets/plugins/SocialShare/SocialShare.js')); ?>"></script>
<script>


</script>
<script>
  <?php if(session('success')): ?>
            toastr.success('<?php echo e(session('success')); ?>', '<?php echo trans('app.success') ?>', toastr_options);
        <?php endif; ?>
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.newlisting', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>