@extends('layouts.pruebaplantilla')
<!--Aquí van los cdn de los mapas-->
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js"></script>
<!--Se agrega en cada página, por variación de rutas-->
@section('css', '../../../resources/css/estilos.css')
<!--Titulo de página-->
@section('titulo', $data->LU_NOMBRE)
<!--Barra de navegación-->
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between w-100">
            <div class="d-flex justify-conten-evenly">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="../../../resources/svg/logo.svg" alt="logo-CEI" width="50" height="50"
                            class="bg-light roundend rounded-pill">
                    </a>
                </span>
                <a href="{{ route('patrimonio.index') }}" class="nav-link">
                    PATRIMONIO
                </a>

            </div>
            <li class="nav-item mx-3">
                <a href="{{ route('calendario') }}" class="nav-link"> CALENDARIO</a>
            </li>
            <li class="nav-item mx-3">
                <a href="{{ route('contacto') }}" class="nav-link">CONTÁCTANOS</a>
            </li>
            <div class="dropdown nav-item">
                <li class="nav-item mx-3 border border-0 fs-6 nav-link" 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="../../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="../../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="../../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">
                @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>
        <img src="../../../resources/images/conacyt.png" alt="" width="80" id="conacyt-logo">
    </div>
    <div>
        <img src="../../../resources/images/TecNM.png" alt="" width="80" id="tecnm-logo">
    </div>

@endsection
<!--Contenido de información de patrimonio-->
@section('contenido')

    <img src="https://drive.google.com/thumbnail?id={{ $data->LU_IMAGEN }}" class="d-block w-100" alt=""
        height="500">
    <h2 class="text-center">{{ $data->LU_NOMBRE }}</h2>
    <!-- <div style="display: flex; justify-content: center; align-items: center;">
                            <div style="display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; padding: 10px;">
                                <img src="{{ $data->LU_IMAGEN }}" alt="Placeholder Image" style="max-width: 100%; height: auto;">
                            </div>
                        </div> -->

    <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="30"
                    value="7" step="1" oninput="adjustFormSize(this.value)">
            </div>
        </div>
    </div>
    <div class="row " id="tamanio">
        <div class="col-sm-6">
            <div id="map-container" style="height:500px;"
                class="d-flex justify-content-center align-items-center w-100 mb-5"></div>
            <!--Llama a la api mapas-->
            <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>
                var coords = [{
                    lat: {{ $data->LU_LAT }},
                    lng: {{ $data->LU_LONG }},
                    title: "Descripción del Lugar"
                }];

                async function initMap() {
                    const {
                        Map
                    } = await google.maps.importLibrary("maps");

                    map = new Map(document.getElementById("map-container"), {
                        center: coords[0], // Asumiendo que solo hay una ubicación
                        zoom: 16,
                        mapId: "fc52ced33562ec84",
                    });

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

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

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

                initMap();
            </script>

        </div>
        <div class="col-sm-6">
            <div class="row-sm-6">
                <p><small>
                        <h6>Descripción</h6>{{ $data->LU_SINTESIS }}
                    </small></p>
                <p><small>
                        <h6>Ubicación</h6>{{ $data->Municipio->MUN_NOMBRE }}
                    </small></p>
                <p><small>
                        <h6>Categoría</h6>{{ $data->LU_CATEGORIA }}
                    </small></p>
                <p><small>
                        <h6>Subcategoría</h6>{{ $data->LU_SUBCATEGORIA }}
                    </small></p>
                <p><small>
                        <h6>Uso</h6>{{ $data->LU_USO }}
                    </small></p>
                <p><small>
                        <h6>Clima</h6>{{ $data->LU_CLIMA }}
                    </small></p>
                <p><small>
                        <h6>Precipitación</h6>{{ $data->LU_PRECIPITACION }}
                    </small></p>
                <p><small>
                        <h6>Temperatura</h6>{{ $data->LU_TEMPERATURA }}
                    </small></p>
            </div>
            <div class="row-sm-6">
                <div class="w-100 d-flex justify-content-center align-items-center">

                    <a class="btn btn-primary" href="{{ $data->LU_LINK }}" target="_blank"><i class="fa-solid fa-eye"
                            title="Ver extenso">Ver Extenso</i></a>
                </div>
            </div>
        </div>
    </div>
    <!--Responsive speech-->
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=R4Pk7EUJ"></script>
    <script>
        function adjustFormSize(size) {
            document.getElementById('tamanio').style.fontSize = size + 'px';
        }
    </script>
@endsection
<!--Se agrega en cada página, por variación de rutas-->
@section('svg-footer', '../../../resources/svg/footer.svg')
@section('script', '../../../resources/js/modoDaltonico.js')