@extends('layouts.index')
@section('contenido')
    <style>
        #map {
            min-height: 600px;
        }
    </style>
    <div class="content">
        <div class="row">
            <div class="col-md-6">
                <!-- Simple list -->
                <div class="card">
                    <div class="card-header header-elements-inline">
                        <h5 class="card-title">STATUS VISITADORES</h5>
                        <div class="header-elements">
                            <div class="list-icons">
                                <a class="list-icons-item" data-action="collapse"></a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <table id="tablaProducto1" class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre</th>
                                    <th>Línea</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($apms as $apm)
                                    <tr>
                                        <td>{{ $apm['id'] }}</td>
                                        <td>{{ $apm['primer_nombre'] }} {{ $apm['segundo_nombre'] }}
                                            {{ $apm['primer_apellido'] }} {{ $apm['segundo_apellido'] }}</td>
                                        <td>{{ $apm->linea['descripcion_linea'] }}</td>
                                        <td>
                                            <div class="list-icons list-icons-extended">
                                                <!-- border-danger -->
                                                @if ($apm->status)
                                                    <span class="badge badge-mark border-success"></span>
                                                @else
                                                    <span class="badge badge-mark border-danger"></span>
                                                @endif

                                                <span class="text-success">
                                                    @if (@$socios->id_apm == $apm['id_user'])
                                                        <i data-logitud="{{ $socios->coordenada_log }}"
                                                            data-latiud="{{ $socios->coordenada_lat }}"
                                                            data-nombre="{{ $socios->primer_nombre_socio }} {{ $socios->primer_apellido_socio }}"
                                                            class="mapaUbicacion icon-pin-alt font-size-base mr-1"></i>
                                                    @endif
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
                <!-- /simple list -->

            </div>
            <div class="col-md-6">
                <div id="map"></div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvrv5r9q9VqybgrO0Vg6Qd_6AqVgOm2HU&callback=initMap"
        defer></script>
    <script>
        // JSON simulado con las ubicaciones
        const locations = [{
                "name": "IRVING VILLEDA",
                "lat": 14.634915,
                "lng": -90.506882
            },
            {
                "name": "IRVING VILLEDA",
                "lat": 14.609053,
                "lng": -90.499411
            },
            {
                "name": "CARLOS MARROQUIN",
                "lat": 14.589546,
                "lng": -90.551444
            }
        ];

        let map;

        function initMap() {
            const center = {
                lat: 14.634915,
                lng: -90.506882
            };
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: center,
            });

            // Iterar sobre cada ubicación en el JSON y crear un marcador y una InfoWindow
            locations.forEach(function(location) {
                const marker = new google.maps.Marker({
                    position: {
                        lat: location.lat,
                        lng: location.lng
                    },
                    map: map,
                    title: location.name
                });

                const infoWindow = new google.maps.InfoWindow({
                    content: `<h3>${location.name}</h3>`
                });

                // Mostrar la InfoWindow inmediatamente
                infoWindow.open(map, marker);

                // Añadir listener para abrir la InfoWindow al hacer clic en el marcador
                marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });
            });
        }
    </script>
@endsection