@extends('layouts.index')
@section('titulo', 'Dashboard')
@section('titulo2', 'Usuarios')
@section('link2', false)

@section('body')
    <div class="container pt-2">
        {{-- <h5 class="titulo fs-3 fw-bolder red">Usuarios</h5> --}}
        <div id="alertContainer"></div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="usuarios-tab" data-bs-toggle="tab" data-bs-target="#usuarios"
                    type="button" role="tab" aria-controls="usuarios" aria-selected="true">Usuarios Activos</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="inhabilitados-tab" data-bs-toggle="tab" data-bs-target="#inhabilitados"
                    type="button" role="tab" aria-controls="inhabilitados" aria-selected="false">Usuarios
                    Inhabilitados</button>
            </li>
        </ul>

        <!-- Tab content -->
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="usuarios" role="tabpanel" aria-labelledby="usuarios-tab">
                <div class="container-fluid shadow rounded bg-cajas p-3 mt-3">
                    <div class="table-responsive">
                        <table id="tablaUsuarios" class="table table-white">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre Completo</th>
                                    <th>Email</th>
                                    <th>Teléfono</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos serán llenados por DataTables -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="inhabilitados" role="tabpanel" aria-labelledby="inhabilitados-tab">
                <div class="container-fluid shadow rounded bg-cajas p-3 mt-3">
                    <div class="table-responsive">
                        <table id="tablaInhabilitados" class="table table-white">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nombre Completo</th>
                                    <th>Email</th>
                                    <th>Teléfono</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos serán llenados por DataTables -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @component('usuarios.modals.modals')
    @endcomponent
@endsection

@section('js')
    <script src="{{ mix('/js/usuarios/principal.js') }}"></script>
    <script>
        function initMap() {
            var uid = $('#usuarioDetalle').attr('data-uid');

            fetch(`/mapa/${uid}`)
                .then(response => response.json())
                .then(data => {
                    $('#container_mapa').css('display', 'block');
                    if (data.length > 0) {
                        $('#msg_no_mapa').css('display', 'none');
                        pintarMapa(data);
                    } else {
                        $('#caja_mapa').css('display', 'none');
                        $('#msg_no_mapa').css('display', 'flex');
                    }
                })
                .catch(error => {
                    console.error('Error al obtener datos:', error);
                    $('#caja_mapa').css('display', 'none');
                    $('#msg_no_mapa').css('display', 'flex');
                });
        }
    
        function pintarMapa(coordenadas) {
            const center = coordenadas[0].ubicacion;
            const mapOptions = {
                center: center,
                zoom: 12
            };
            // Corregir el error pasando el nodo DOM nativo a google.maps.Map
            const map = new google.maps.Map(document.getElementById('map'), mapOptions);
            let contentString = "";
            coordenadas.forEach(function(coordinate) {
                const ubicacion = coordinate.ubicacion;
                if (ubicacion) {
                    const marker = new google.maps.Marker({
                        position: ubicacion,
                        map: map,
                        title: coordinate.nombre
                    });
    
                    // Crear un contenido para el infoWindow
                    contentString += `
                        <div class="info-window">
                            <h4>${coordinate.nombre}</h4>
                        </div>`;

                    // Crear el infoWindow
                    const infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
    
                    marker.addListener('click', function() {
                        infowindow.open(map, marker);
                    });
                }
            });
        }
    
        // Inicialización del mapa en el modal
        $('#modalEditarUsuario').on('shown.bs.modal', function () {
            $('#container_mapa').css('display', 'none');
            setTimeout(function() {
                initMap();
            }, 500);  // Usar un pequeño retraso para asegurar que el DOM esté listo
        });
    </script>
    
    <!-- Carga asíncrona de la API de Google Maps -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFCa8GvQv49jiVMdNaROFEexyDf32bPtI&callback=initMap">
    </script>
@endsection