@extends('layout.mainlisting')
@section('page-css')
    <style>
    .modal-c {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* 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 */
.modal-content-c {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 100%;
  overflow: auto;
}

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

.close-c:hover,
.close-c:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
      #fname {
        //position: absolute;
        top: 0px;
        left: 0px;
        width: 30%;
      }
      
      
/* The Modal (background) */
.modal-iframe {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* 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 */
.modal-content-iframe {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: 1px solid #888;
  width: 30%;
   height: 100%;
}

/* The Close Button */
.close-iframe {
  color: #aaaaaa;
  right:10px;
  top:0px;
  font-size: 28px;
   position: absolute;
  font-weight: bold;
}

.close-iframe:hover,
.close-iframe:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
@endsection


@section('main')

<input type="text" id="fname" name="place" autofill="off"  autocomplete="new-password" placeholder="Search">
<button type="button" onclick="loadDoc()">Request data</button>
                        {{ Form::open(['id'=>'adsPostForm','route'=>'geneio', 'class' => 'form-horizontal', 'files' => true]) }}
                                                        <label><input type="text" value="regular" name="first_name" data-price="{{ get_ads_price() }}"  />@lang('app.regular') </label> <br />
                                {!! $errors->has('first_name')? '<p class="help-block">'.$errors->first('first_name').'</p>':'' !!}

                                                        <button type="submit" >submit</button>

                        {{ Form::close() }}
                        
                        
                        <form method="post" action="https://kupeza.co.zm/api/signup" style="border:1px solid #ccc">
  <div class="container">
    <h1>Sign Up</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>
    
        <label for="first_name"><b>first_name</b></label>
    <input type="text" placeholder="firstname" name="first_name" required>
    
            <label for="last_name"><b>last_name</b></label>
    <input type="text" placeholder="lastname" name="last_name" required>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="password" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

    <label>
        
        <span class="user_type">
                                    <input type="radio" name="user_type" id="Personal" value="customer" checked=""> <label class="col-md-6" for="Personal">Personal</label>
                                    <input type="radio" name="user_type" id="Commercial" value="agent"> <label class="col-md-6" for="Commercial">Agent</label>
                                </span>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

<p id="demo"></p>

<button id="myBtn">Open Modal</button>

<!-- The Modal -->

<div id="myModal" class="modal-iframe">

  <!-- Modal content -->
  <div class="modal-content-iframe">
    <span class="close-iframe">&times;</span>
    <p> 
    <div class="single-at-a-glance">
        <ul class="list-group ">
        <li class="list-group-item col-ls-4 col-xs-6"><h3 class="display-text"><i class="fas fa-home"></i><br> Mortgage</h3><h4 class="mortgageamount expense-amount">143</h3></li>
       
        </ul></div></p>
  </div>

</div>

<script>

function loadapi(token) {
     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);
              

    }
    else  {
      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.setRequestHeader('Authorization', "Bearer" + " " + token);
  xhttp.send();
    
}
function loadDoc() {
    
 var value =document.getElementById("fname").value;
  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);
                     //loadapi(obj.Authorization); 

      
    }
    else  {
      document.getElementById("demo").innerHTML = "bbvvn "+this.responseText;
    }
  };
  xhttp.open("POST", "https://kupeza.co.zm/newsearcher2", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.setRequestHeader("X-CSRF-TOKEN","{{ csrf_token() }}");
  xhttp.send("lat=-15.3875259&long=28.3228165&min_price=0&max_price=100000000000");
}


</script>

    <script>

var placeSearch, autocomplete;



function initAutocomplete() {

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

  autocomplete.setFields(['address_component']);

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

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



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

// 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-iframe")[0];

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQuDQmtiHkS7CcriyEiYXWja3ODrG4vFI&libraries=places&callback=initAutocomplete"
        async defer></script>
@endsection

