@extends('layouts.admin')
@section('title','Geovisor')
@section('styles')
<style type="text/css">
    .unstyled-button {
        border: none;
        padding: 0;
        background: none;
      }
</style>
<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 {    
    width:  50%; 
    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 class="content-wrapper">
    
    <div class="row">
        
        <div class="col-lg-6 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    
                    <div class="table-responsive">
                        <table id="order-listing" class="table">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>GUC</th>
                                    <th>PUC</th>
                                    <th>PMA</th>
                                    <th>Comandante</th>
                                    <th>Hito</th>
                                    <th>Ver</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($reconocimientos as $reconocimiento)
                                <tr>
                                   <th scope="row">{{$reconocimiento->id}}</th>
                                    <td>{{$reconocimiento->guc}}</td>
                                    <td>{{$reconocimiento->puc}}</td>
                                    <td>{{$reconocimiento->pma}}</td>
                                    <td>{{$reconocimiento->comandante}}</td>
                                    <td>{{$reconocimiento->nombre}}</td>
                                    <td><a class="jsgrid-button jsgrid-edit-button" href="{{route('geo', $reconocimiento)}}" title="Ver">
                                            <i class="far fa-eye"></i>
                                        </a></td>
                                    
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 " id="map">
        </div>
    </div>
</div>
@endsection
@section('scripts')
{!! Html::script('melody/js/data-table.js') !!}
<script>

    const lat = {{ $lat}};
    const lng = {{ $lon}};
    const zoom = {{ $zoom}};
    const dato = {{ $dato}};
    //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([lat, lng], zoom)
            .addLayer(osm);

      if (dato == '1') {

        const arrayDesdeLaravel = @json($reconocimientos); // Conversión directa a JSON
    
    arrayDesdeLaravel.forEach(item => {
        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>HITO:</th><td>' + item.nombre + '</td></tr>' +
            '<tr><th>GUC:</th><td>' + item.guc + '</td></tr>' +
            '<tr><th>PUC:</th><td>' + item.puc + '</td></tr>' +
            '<tr><th>PMA:</th><td>' + item.pma + '</td></tr>' +
            '<tr><th>COMANDANTE:</th><td>' + item.comandante + '</td></tr>' +
            '<tr><th>ARMAMENTO:</th><td>' + item.armamento + '</td></tr>' +
            '<tr><th>INCIDENTES:</th><td>' + item.incidentes + '</td></tr>' +
            '<tr><th>MATERIA:</th><td>' + item.material + '</td></tr>' +
            '<table>'+
            '<img src="' + item.foto1 + '" width =  80px alt="">'+
            '<img src="' + item.foto2 + '" width =  80px alt="">'+
            '<img src="' + item.foto3 + '" width =  80px alt="">';
            L.marker([item.lat, item.lon]).addTo(map).bindPopup(content);
        
    });


      }
      
        



    

  

</script>

@endsection