@extends('layouts.admin')
@section('title','Geovisor Educacion')
@section('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
   integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
   crossorigin=""/>
   <link rel="stylesheet" href="css/Leaflet.AnimatedSearchBox.css">
   <link rel="stylesheet" href="js/leaflet-search.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {!! Html::style('melody/vendors/iconfonts/font-awesome/css/all.min.css') !!}
    {!! Html::style('melody/vendors/css/vendor.bundle.base.css') !!}
    {!! Html::style('melody/vendors/css/vendor.bundle.addons.css') !!}
    {!! Html::style('melody/css/style.css') !!}
<style type="text/css">
    #map {    
    height: 700px; 
    border: 1px solid #ccc;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
   integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
   crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/fuse.js@5.0.10-beta/dist/fuse.min.js"></script>
    <script src="js/Leaflet.AnimatedSearchBox.js"></script>
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
<script src="js/leaflet-search.js"></script>
@endsection
@section('options')
@endsection
@section('preference')
@endsection
@section('content')
  <div id="map">
        
  </div>
@endsection
@section('scripts')
{!! Html::script('melody/js/data-table.js') !!}
<script>
  //init map
  var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {maxZoom: 50, attribution: osmAttrib});

  var map = L.map('map')
            .setView([-15.898893, -64.872554], 6)
            .addLayer(osm);


  var markersLayer = new L.LayerGroup();  //layer contain searched elements
  
  map.addLayer(markersLayer);

  var controlSearch = new L.Control.Search({
    position:'topright',    
    layer: markersLayer,
    initial: false,
    zoom: 18,
    marker: false
  });

  map.addControl( controlSearch );
  $(document).ready(function(){
    $.getJSON('datos', function (data) {
      data = JSON.parse(data);
      $.each(data, function(index){

        $idue = parseInt(data[index].id);
        var url = '{{ route("certificado", ":id") }}';
        url = url.replace(':id', $idue);
        var url1 = '{{ route("editar", ":id") }}';
        url1 = url1.replace(':id', $idue);
        
        var content = '<div style="font-size: 16px;text-align:center;font-weight: bold;">DATOS DEL RECONOCIMIENTO</div><br>'+
            '<table border="0" style="border-collapse:collapse;" cellpadding="2">' +
            '<tr><th>ID:</th><td>' + data[index].id + '</td></tr>' +
            '<tr><th>Comandante:</th><td>' + data[index].comandante + '</td></tr>' +
            '<tr><th>GUC:</th><td>' + data[index].guc + '</td></tr>' +
            '<tr><th>PUC:</th><td>' + data[index].puc + '</td></tr>' +
            '<tr><th>Depatamento:</th><td>' + data[index].departamento + '</td></tr>' +
            '<tr><th>Provincia:</th><td>' + data[index].provincia + '</td></tr>' +
            '<tr><th>Municipio:</th><td>' + data[index].municipio + '</td></tr>' +
            '<tr><th>Localidad:</th><td>' + data[index].localidad + '</td></tr>' +
            '<td><br><a href=""><span class="btn btn-success">ACEPTAR</span></a></td>' + 
            '</tr>' +
            '<table>';
        
        
            var title = data[index].nombre,  //value searched
            loc = [parseFloat(data[index].lat), parseFloat(data[index].lon)],    //position found
            marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
            marker.bindPopup(content);
            markersLayer.addLayer(marker);        
      })
      // body...
    
    });
  });

  

</script>
@endsection