@extends('layouts.plantilla')

@section('title', 'Yacimientos')

@section('donde')
  /<a href="{{route('yacimientos.index')}}" class="hover:text-red-800">
  Yacimientos</a> / Mapa de Yacimientos
@endsection

@section('content')
 
@php
    $marcadores = [];

@endphp

<h1 class="text-4xl uppercase text-red-900 text-center">Yacimientos</h1>
<hr class="w-64 h-1 mx-auto my-4 bg-red-900 border-0 rounded dark:bg-gray-700">
<p class="text-gray-500 text-xl dark:text-gray-400 p-5">
    En este mapa puede ver los yacimientos que tienen datos de posicionamiento, que son <b>{{ $count2 }}</b> de los {{ $count1}} yacimientos recogidos en la Base Documental Iberiagraeca.<br>
    Puede ver todos los yacimeintos utilizando el menú de la parte superiior o clicando en <a class="text-red-800 hover:underline"  href="{{route('yacimientos.index')}}" >VER TODOS LOS YACIMIENTOS</a>

</p>    
       






<x-section-border></x-section-border>


<div class="text-size-md bg-red-800  p-1 rounded my-2">

   <!-- API LEAFLET -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="    crossorigin=""></script>


    <div id="map" style="height: 800px; width: 100%;"></div>
         @foreach ($yacimientos as $yac)
            @php      
                    $url_topnimo = '<a href="'.$yac->id. '">'. $yac->toponimo .'</a>';
                    array_push($marcadores, [$url_topnimo, $yac->latitud, $yac->longitud]);
            @endphp
        @endforeach

       
    <script>
        var map = L.map('map').setView([40, -2], 6); // Reemplaza estas coordenadas con las de tu ubicación
 
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,
          attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
        }).addTo(map);       
   
        @php
            $marcadores = json_encode($marcadores);
        @endphp
        var markers = {!! $marcadores !!};
        for (var i = 0; i < markers.length; i++) {
            marker = new L.marker([markers[i][1],markers[i][2]])
            .bindPopup(markers[i][0])
            .addTo(map);
        }  
      </script>

</div>

@endsection