@extends('layouts.pruebaplantilla')
<!--Seccion de titulo-->
@section('titulo', 'CARTOGRAFÍA INTERACTIVA')
<!--Seccion de barra-->
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between align-item-center w-100">
            <div class="d-flex justify-conten-evenly align-items-center">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="https://i.postimg.cc/x19ch1vw/logo.png" alt="logo-CEI" width="50" height="50"
                            class="bg-light roundend rounded-pill">
                    </a>
                </span>
                <a href="{{ route('habitat.index') }}" class="nav-link">
                    HÁBITAT
                </a>

            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('calendario') }}" class="nav-link">CALENDARIO</a>
                </li>
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('calendario') }}" class="nav-link">CONTÁCTANOS</a>
                </li>
            </div>
            <div class="dropdown d-flex align-items-center">
                <li class="nav-item mx-3 border border-0 fs-6" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">IDIOMAS</li>
                <ul class="dropdown-menu mt-2">
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/mexico.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">ESPAÑOL</a>
                    </li>
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/usa.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="">
                            INGLÉS
                        </a>
                    </li>
                    <li class="mb-2 d-flex">
                        <img src="{{ Vite::asset('resources/svg/indigena.svg') }}" alt="" width="30">
                        <a class="dropdown-item fs-6 h6" href="{{ route('contacto') }}">
                            HÑÄHÑU
                        </a>
                    </li>
                </ul>
            </div>
            <div class="dropdown nav-item   d-flex align-items-center">
                @if (Auth::check())
                    <button class="border border-0 fs-6 h6 btn btn-primary" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        {{ Auth::user()->US_NOMBRE }}
                    </button>
                    <div class="dropdown-menu mt-2">
                        <a class="dropdown-item " href="{{ route('myprofile') }}">Mi perfil</a>
                        <a class="dropdown-item " href="{{ route('join.logout') }}">Cerrar
                            sesión</a>
                        @if (Auth::user()->US_ROL == 'INVESTIGADOR')
                            <a class="dropdown-item " href="{{ route('Admin.index') }}">Administración</a>
                        @endif
                    @else
                        <li class="border border-0 nav-item mx-3 nav-link" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">INICIA SESIÓN</li>
                        <div class="dropdown-menu mt-2">
                            <form class="px-4 py-3" action="{{ route('join.login') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="text_user" class="form-label">Correo electrónico</label>
                                    <input type="email" class="form-control  form-control-sm" id="text_user"
                                        name="text_user" placeholder="Ingrese aquí" required>
                                </div>
                                <div class="mb-3">
                                    <label for="login_password" class="form-label">Contraseña</label>
                                    <input type="password" class="form-control form-control-sm" id="login_password"
                                        name="login_password" placeholder="Contraseña" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                        <label class="form-check-label" for="remember">
                                            Recuerdame
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">INICIAR SESIÓN</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('join.index') }}">
                                ¿Eres nuevo? Registrate aquí.
                            </a>
                            <a class="dropdown-item " href="{{ route('join.recovery') }}">¿Olvidaste la
                                Contraseña?
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa-solid fa-bars"></span>
    </button>
    <!--Contenedor de logos-->
    <div class="d-flex justify-content-end align-items-center w-80">
        <div>
            <img src="https://i.postimg.cc/QNR74DnD/conacyt.png" alt="" width="80" id="conacyt-logo">
        </div>
        <div>
            <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="" width="80" id="tecnm-logo">
        </div>
        <div>

        </div>
    </div>
@endsection
<!--Contenido de la pagina-->
@section('contenido')
    <!---Imagen de encabezado-->
    <div class="header-img">
        <img src="https://images.unsplash.com/photo-1518231365576-99dafdedcd69?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Q0FSVE9HUkFGJUMzJThEQSUyMElOVEVSQUNUSVZBfGVufDB8fDB8fHww"
            alt="" class="img-fluid">
    </div>
    <h4 class="text-center">CARTOGRAFÍA INTERACTIVA</h4>
    <div class="container" style="display: flex; justify-content: center; align-items: center;">
        <div class="tam" style="width: 400px;">
            <div class="mb-3">
                <label for="form-size-slider" class="form-label">Tamaño Texto:</label>
                <input type="range" class="form-range" id="form-size-slider" min="12" max="24"
                    value="5" step="1" oninput="adjustFormSize(this.value)">
            </div>
        </div>
    </div>
    <div class="w-100 mt-5 row d-flex justify-content-center" id="tamanio">
        <!--Muestra los datos con un foreach-->
        @foreach ($data as $dato)
            <div class="card mb-3 col-md-4" style="max-width: 540px;">
                <div class="row g-0">
                    <div class="col-md-4">
                        <!-- Imprimimos la información de la imagen -->
                        <img src="https://drive.google.com/thumbnail?id={{ $dato->CAR_LINK_IMAGEN }}"
                            class="img-fluid rounded-start" alt="">
                    </div>

                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">{{ $dato->CAR_NOMBRE }}</h5>
                            <p class="card-text card-text-overflow">{{ $dato->CAR_DESCRIPCION }} </p>
                            <!-- Botón que abre el modal -->
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" 
                                    data-bs-target="#modalCartografia{{ $dato->CAR_ID }}">
                                Ver más
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal con el contenido completo (sin la imagen grande) -->
            <div class="modal fade" id="modalCartografia{{ $dato->CAR_ID }}" tabindex="-1" 
                 aria-labelledby="modalCartografiaLabel{{ $dato->CAR_ID }}" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalCartografiaLabel{{ $dato->CAR_ID }}">
                                {{ $dato->CAR_NOMBRE }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <!-- Contenido sin la imagen grande -->
                            <div class="row mt-4" id="tamanioModal{{ $dato->CAR_ID }}">
                                <div class="col-sm-6">
                                    <div id="map-container-{{ $dato->CAR_ID }}" style="width: 100%; height:500px;"
                                        class="d-flex justify-content-center align-items-center w-100 mb-5"></div>
                                    <!-- Script del mapa para este modal -->
                                    <script>
                                        (g => {
                                            var h, a, k, p = "The Google Maps JavaScript API",
                                                c = "google",
                                                l = "importLibrary",
                                                q = "__ib__",
                                                m = document,
                                                b = window;
                                            b = b[c] || (b[c] = {});
                                            var d = b.maps || (b.maps = {}),
                                                r = new Set,
                                                e = new URLSearchParams,
                                                u = () => h || (h = new Promise(async (f, n) => {
                                                    await (a = m.createElement("script"));
                                                    e.set("libraries", [...r] + "");
                                                    for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                                                    e.set("callback", c + ".maps." + q);
                                                    a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                                                    d[q] = f;
                                                    a.onerror = () => h = n(Error(p + " could not load."));
                                                    a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                                                    m.head.append(a)
                                                }));
                                            d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
                                                d[l](f, ...n))
                                        })({
                                            key: "AIzaSyAuli5N4nhEuFh1R1Www_EYUK-ar5D46FE",
                                            map_ids: "fc52ced33562ec84",
                                        });
                                    </script>

                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            var coords = [{
                                                lat: {{ $dato->CAR_LAT }},
                                                lng: {{ $dato->CAR_LONG }},
                                                title: "Descripción del Lugar"
                                            }];

                                            async function initMap{{ $dato->CAR_ID }}() {
                                                const {
                                                    Map
                                                } = await google.maps.importLibrary("maps");

                                                map = new Map(document.getElementById("map-container-{{ $dato->CAR_ID }}"), {
                                                    center: coords[0],
                                                    zoom: 16,
                                                    mapId: "fc52ced33562ec84",
                                                });

                                                const infoWindow = new google.maps.InfoWindow();

                                                coords.forEach((coord) => {
                                                    const marker = new google.maps.Marker({
                                                        position: {
                                                            lat: coord.lat,
                                                            lng: coord.lng
                                                        },
                                                        map,
                                                        title: `{{ $dato->CAR_DESCRIPCION }}`,
                                                        label: "Marcador",
                                                        optimized: false,
                                                    });

                                                    marker.addListener("click", () => {
                                                        infoWindow.close();
                                                        infoWindow.setContent(marker.getTitle());
                                                        infoWindow.open(marker.getMap(), marker);
                                                    });
                                                });
                                            }

                                            // Inicializar el mapa cuando el modal se abre
                                            var modalElement = document.getElementById('modalCartografia{{ $dato->CAR_ID }}');
                                            modalElement.addEventListener('shown.bs.modal', function() {
                                                initMap{{ $dato->CAR_ID }}();
                                            });
                                        });
                                    </script>
                                </div>

                                <div class="col-sm-6">
                                    <strong>Descripción</strong>
                                    <p style="text-align: justify;">
                                        {{ $dato->CAR_DESCRIPCION }}
                                    </p>
                                    <strong>Latitud</strong>
                                    <p>{{ $dato->CAR_LAT }}</p>
                                    <strong>Longitud</strong>
                                    <p>{{ $dato->CAR_LONG }}</p>

                                    <!--<p class="text-center">Acciones:</p>--->

                                    <div class="w-100 d-flex justify-content-center align-items-center">
                                        <div>
                                            <a class="btn btn-primary" href="{{ $dato->CAR_LINK }}" title="Ver extenso" target="_blank">
                                                <i class="fa-solid fa-eye">Ver Mapa</i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="d-flex justify-content-center mt-4">
    {{ $data->links() }}
</div>
        <script>
            function adjustFormSize(size) {
                document.getElementById('tamanio').style.fontSize = size + 'px';
            }
        </script>
        <script src="https://code.responsivevoice.org/responsivevoice.js?key=R4Pk7EUJ"></script>
    </div>
@endsection