@extends('layouts_ext.app',[
    'class' => '',
    'elementActive' => 'inmuebles'
])
@push('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>
<style type="text/css" media="screen">
      #map { width: 100%; height: 36vh; }
</style>
@endpush
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
    <div class="row mb-2">      
      <div class="col-sm-12">
        <ol class="breadcrumb float-sm-left">
          
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
  </div>
  <section class="content">
      <div class="container-fluid">        
        <div class="card">
          <div class="card-header">
            <h6>DETALLE DEL INMUEBLE</h6>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-12">
                <h4 class="text-center"><strong>{{$inmueble->inmu_tipo}}</strong></h4>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group row">
                  <label class="col-sm-3 text-left">Tipo:</label>
                  <div class="col-sm-9">
                    {{ $inmueble->inmu_tipo }}
                  </div>

                  <label class="col-sm-3 text-left">Informacion:</label>
                  <div class="col-sm-9 text-left">
                    {{ $inmueble->inmu_informacion }}
                  </div>

                  <label class="col-sm-3 text-left">Departamento:</label>
                  <div class="col-sm-9">
                    {{ $inmueble->inmu_departamento }}
                  </div>

                  <label class="col-sm-3 text-left">Ciudad:</label>
                  <div class="col-sm-9">
                    {{ $inmueble->inmu_ciudad }}
                  </div>

                  <label class="col-sm-3 text-left">Superficie:</label>
                  <div class="col-sm-3">
                    {{ $inmueble->inmu_superficie }}
                  </div>
                  <label class="col-sm-3 text-left">Precio referencial:</label>
                  <div class="col-sm-3">
                    {{ $inmueble->inmu_precio_venta }}
                  </div>

                </div>
                <br>
                
              </div>
              <div class="col-md-6">
                <div class="row" style="background: #d8d8d8; padding: 10px">
                  <div class="col-sm-12">
                    <div id="map"></div>
                  </div>
                </div>
                
                <div class="row text-center" style="background: #36312d; padding: 10px">
                  <h6 style="color:white"><strong>FOTOGRAFÍAS</strong></h6>
                  <div class="col-sm-12">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">         
                      <div class="carousel-inner">
                        @foreach($ifotos as $key => $item)
                        <div class="carousel-item {{ $key == 0 ? 'active':''}} ">
                          @if($item->ifoto_path)
                          <img src="{{ asset('/img/inmuebles/'.$item->ifoto_path) }}" class="w-50" alt="...">
                          @endif                          
                        </div>
                        @endforeach
                      </div>
                      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <a href="{{url('/')}}" type="submit" class="btn btn-primary float-right btn-lg">Volver</a>
          </div>
        </div>
      </div>
  </section>
</div>
<!-- /.content-wrapper -->
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin="">
</script>
<script>
  var url = '{{ url("/") }}';
  //creacion de mapa
    const map = L.map('map',{
      center: [-17.243460, -64.035296],
      zoom: 6,
      zoomControl: true,
      attributionControl: true,
      keyboard: true,
      minZoom:10,
      maxZoom:19,
      maxBounds: [
        [-7.01366792756663, -53.74511718750001],
        [-26.92206991673281, -74.31152343750001]
      ]
    });
    //mapa base
     /*const openstreetmap = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 21,
        maxNativeZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);*/

     const googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        maxNativeZoom: 18,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map);

    var datosmapa = null;
    var latitud = {!! $inmueble->ifoto_latitud  !!};
    var longitud = {!! $inmueble->ifoto_longitud !!};
    //var mapadpto = null;
    //var mapageo = L.geoJson(mapadpto).addTo(map);

    /*var mapageo = L.geoJson((mapadpto), {
        style: function (feature) {
          //color = color + simbolos[Math.floor(Math.random() * 16)];
          //return { color: '#000', weight: 2, fillOpacity: 0};
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.nom_dep);
            //layer.bindTooltip(feature.properties.division);
            // zoom a centrace mapy po přidání feature
            map.fitBounds(layer.getBounds());
        }
    }).addTo(map);*/
    var iconoBase = L.Icon.extend({
      options: {
        iconSize: [40, 45],
        iconAnchor: [45, 45],
      }
    });
    var iconoInmueble = new iconoBase({iconUrl: url+'/img/marker-icon-2x.png'});
    var marcador = L.marker([latitud, longitud],{icon: iconoInmueble}).addTo(map);
    //console.log(marcador);
    map.fitBounds([[latitud,longitud]]);
    /*function actualiza(){
      mapageo.clearLayers();
      datosmapa = document.getElementById("datageojson").value;
      mapadpto = JSON.parse(datosmapa);
      mapageo.addData(mapadpto).addTo(map);
    };*/

    //LAYERS
    const baseMaps = {
      "Google Satelital": googleSat     
    }

    /*const wms = {
        "G_U_C": guc,
        "inmuebles dgbpie": inmuebles_dgbpie
    }*/

    /*const overlays = {
      "Marcador 1": marcador,
      "Marcador 2": marcador2
    };*/
    /*const controlLayers = L.control.layers(baseMaps,undefined,{
      collapsed: true,
      hideSingleBase: true,
      sortLayers: true,
      position: 'topleft'
    }).addTo(map);*/
</script>
@endpush