@extends('backend.layouts.master-admin')

@section ('stylesheet')

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>

<link href='https://api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />

<style>

</style>

@endsection

@section ('content')

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">

    <!-- Content Header (Page header) -->
    <section class="content-header">

      <h1>
        Alta propiedad
        <small>Optional description</small>
      </h1>

      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content">

      <form method="post" action="/properties" enctype="multipart/form-data">

        {{ csrf_field() }}

        <fieldset>

          <legend>Ubicación</legend>

          <div class="row">


            <div class="col-md-6">

              <div class="row">

                  <div class="col-lg-8">


                    <div class="input-group">

                      <span class="input-group-addon">Ciudad</span>
                      <input autocomplete="off" class="textinput textInput form-control" id="city_name" maxlength="100" name="city_name" type="text">

                    </div><!-- /.input-group -->

                  </div><!-- /.col-lg-8 -->

                  <div class="col-lg-3 col-lg-offset-1">

                        <div class="input-group form-group">

                          <span class="input-group-addon">C.P.</span>

                          <input class="textinput textInput form-control" id="zip_code" name="zip_code" placeholder="Opcional" type="text">

                        </div>

                  </div><!-- /.col-lg-3 -->

              </div><!-- /.row -->

              <div class="row">

                <div class="col-lg-8">

                  <div class="input-group">

                      <span class="input-group-addon">Calle</span>
                      <input autocomplete="off" class="textinput textInput form-control" id="street_name" maxlength="100" name="street_name" type="text">

                  </div>

                </div><!-- /.col-lg-8 -->


                <div class="col-lg-3 col-lg-offset-1">

                    <div class="input-group form-group">

                        <span class="input-group-addon">N°</span>
                        <input class="numberinput form-control" id="street_number" name="street_number" type="number" required="">

                    </div>

                </div><!-- /.col-lg-3 -->


              </div><!-- /.row -->

              <div class="col-lg-12 text-center">

                  <input type="button" name="search" value="Buscar" class="btn btn btn-primary" id="search" style="margin-bottom: 15px;">

                  <div class="well" id="address-result-box" >

                    <p id="address">Utiliza el buscador para localizar tu inmueble</p>


                  </div>

              </div>

            </div><!-- /.col-md-6 -->


            <div class="col-md-6">
              <div id="mapid"></div>

              <div id='map' style='width: 100%; height: 300px;'></div>

            </div>

          </div><!-- /.row -->

        </fieldset>

        <fieldset>

          <legend>Caracteristicas del inmueble</legend>

          <div class="form-group">
            <label for="title">Titulo:</label>
              <input type="text" class="form-control" id="title" name="title" required>
          </div>

          <div class="form-group">
            <label for="description">Descripción:</label>
            <textarea name="description" id="description" class="form-control" cols="30" rows="10" required></textarea>
          </div>


          <div class="form-group">
            <label for="price">Precio:</label>
                <div class="input-group">
                  <input type="text" class="form-control col-sm-3" id="price" name="price" required>
                  <div class="input-group-addon">€</div>
                </div>
          </div>


          <div class="form-group">
            <label for="exampleInputFile">Foto:</label>
            <input type="file" class="form-control-file" id="photo" name="photo" aria-describedby="fileHelp" required>
            <small id="fileHelp" class="form-text text-muted">Se recomienda que la imagen no ocupe más de 200KB.</small>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary">Publicar</button>
          </div>

        </fieldset>

        <fieldset>

          <legend>Documentación del inmueble</legend>

        </fieldset>

      </form>

    </section>
    <!-- /.content -->

  </div>
  <!-- /.content-wrapper -->

@endsection


@section ('script')





<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

<script src='https://api.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>



<script>

  $(document).ready(function(){


            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
              }

            });

            /*function obtenerDireccion (calle, numero, ciudad) {


                var direccion = calle + ', ' + numero + ', ' + ciudad;
                alert (direccion);
                document.getElementById("address").innerHTML="La direccion es:" + direccion;

            }*/

            $("#search").click(function(){
                var city = jQuery('#city_name').val();
                var street_name = jQuery('#street_name').val();
                var street_number = jQuery('#street_number').val();
                var address = street_name + ', ' + street_number + ', ' + city;
                alert(address);
                /// Aqui podemos enviarle alguna variable a nuestro script PHP
                //var variable_post="Mi texto recargado";

                /*$.get('geo', function(data){

                  console.log(data);
                });*/


                $.ajax({
                  type: "POST",
                  // En data puedes utilizar un objeto JSON, un array o un query string
                  data: {"address" : address},
                  //dataType: "string",
                  url: "geolocate",
                  //data: dataString,
                  success: function(data){
                    console.log("vuelve");
                    console.log(data);
                  }

                });





                   /*$("#address").html(data[0] + ' , ' + data[1]);
                   map.remove();
                   var map2 = L.map('map').setView([data[0], data[1]], 13);
                   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                   }).addTo(map2);
                   L.marker([data[0], data[1]]).addTo(map2);
                   */
              });



            /*var mymap = L.map('mapid').setView([51.505, -0.09], 13);
            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                maxZoom: 18,
                id: 'your.mapbox.project.id',
                accessToken: 'your.mapbox.public.access.token'
            }).addTo(mymap);*/

            var map = L.map('map').setView([51.505, -0.09], 1);

            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
  });

</script>

@endsection