@extends('layouts.app',[
    'class' => '',
    'elementActive' => 'inmuebleform'
])
@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: 70vh; }
    </style>
@endpush
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="app">
<!-- 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">
          <!--<li class="breadcrumb-item"><a href="{{ url('inmuebleform') }}"><i class="fas fa-dot-circle"></i> PROYECTOS</a></li>-->
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
  </div>
  <section class="content">
      <div class="container-fluid">        
        <inmuebleform-component url='{{url('/')}}' csrf='{!! csrf_field('POST') !!}' :categorias='{{$categorias}}' :tinmuebles='{{$tinmuebles}}' :estados='{{$estados}}' :zonas='{{$zonas}}'></inmuebleform-component>      
      </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>
  
    /*//creacion de mapa
    const map = L.map('map',{
      center: [-17.243460, -64.035296],
      zoom: 6,
      zoomControl: true,
      attributionControl: true,
      keyboard: true,
      minZoom:6,
      maxZoom:21,
      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);

   
    var datosmapa = null;
    var mapadpto = null;
    var divisonesgeojson = L.geoJson((mapadpto), {
        style: function (feature) {
          return { color: '#000', weight: 2, fillOpacity: 0};
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.nom_dep);
            map.fitBounds(layer.getBounds());
        }
    }).addTo(map);


    function aleatorio(inferior, superior) {
      let numPosibilidades = superior - inferior;
      let aleatorio = Math.random() * numPosibilidades;
      aleatorio = Math.floor(aleatorio);
      return parseInt(inferior) + aleatorio;
    }

    function colorAleatorio() {
      let hexadecimal = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
      let color_aleatorio = "#";
      for (i = 0; i < 6; i++) {
        let posarray = aleatorio(0, hexadecimal.length)
        color_aleatorio += hexadecimal[posarray]
      }
      return color_aleatorio
    }

    var datosmapa = null;
    var datogeosjonprovi = JSON.parse('{"type": "FeatureCollection","features": []}');
    var mapageo = L.geoJson(datogeosjonprovi).addTo(map);
    function actualiza(){
      mapageo.clearLayers();
      datosmapaprovi = document.getElementById("datageojson").value;
      mapadptoprovi = JSON.parse(datosmapaprovi);
      mapageo.addData(mapadptoprovi).addTo(map);
    };

    //LAYERS
    const baseMaps = {
      "OpenStreetMap": openstreetmap     
    }

    const controlLayers = L.control.layers(baseMaps,undefined,{
      collapsed: true,
      hideSingleBase: true,
      sortLayers: true,
      position: 'topleft'
    }).addTo(map);*/

</script>
@endpush