@extends('layouts.pruebaplantilla')
<!--Titulo de página-->
@section('titulo', $data->INF_TITULO)
<!--Barra de navegación-->
@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('contacto') }}" 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 pagina-->
@section('contenido')
    <style>
        .video-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
        }

        iframe {
            width: 100%;
            max-width: 640px;
            height: 360px;
        }
    </style>
    <div class="header-img">
        <img src="https://drive.google.com/thumbnail?id={{ $data->INF_URL_IMAGEN }}" class="img-fluid" alt="">
    </div>
    <!--Filtrado de busqueda-->
    <h2 class="text-center">{{ $data->INF_TITULO }}</h2>
    <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="row" id="tamanio">
        <!-- Columna izquierda: Previsualización del video -->
        <div class="col-sm-6">
            <div class="video-container">
                @php
                    // Función para convertir enlaces a formato embebido
                    function convertirLinkVideo($link)
                    {
                        if (empty($link)) {
                            return false;
                        }

                        if (strpos($link, 'youtube.com') !== false || strpos($link, 'youtu.be') !== false) {
                            parse_str(parse_url($link, PHP_URL_QUERY), $query);
                            $videoId = $query['v'] ?? null;

                            if (!$videoId && strpos($link, 'youtu.be') !== false) {
                                $videoId = basename(parse_url($link, PHP_URL_PATH));
                            }

                            return $videoId ? "https://www.youtube.com/embed/{$videoId}" : false;
                        }

                        if (strpos($link, 'drive.google.com') !== false) {
                            preg_match('/\/file\/d\/([a-zA-Z0-9_-]+)\//', $link, $matches);
                            return isset($matches[1]) ? "https://drive.google.com/file/d/{$matches[1]}/preview" : false;
                        }

                        return false;
                    }

                    $videoEmbedLink = convertirLinkVideo($data->INF_URL_VIDEO);
                @endphp

                @if ($videoEmbedLink)
                    <iframe src="{{ $videoEmbedLink }}" frameborder="0" allow="autoplay; fullscreen; encrypted-media"
                        sandbox="allow-same-origin allow-scripts allow-popups" allowfullscreen>
                    </iframe>
                @else
                    <p>Formato de video no compatible o enlace inválido.</p>
                @endif
            </div>

            <p class="text-center"><strong>Acciones:</strong></p>
            <div class="w-100 d-flex justify-content-center align-items-center">
                <div>
                    <!-- Botón para visualizar el video -->
                    <a class="btn btn-primary" target="blank" href="{{ $data->INF_URL_VIDEO }}"
                        title="Video de demostración">
                        <i class="fa-solid fa-video"></i> Video de demostración
                    </a>
                    <!-- Botón para visualizar el documento -->
                    <a class="btn btn-primary" href="{{ $data->INF_URL_EXTENSO }}" title="Visualizar documento">
                        <i class="fa-solid fa-eye"></i> Ver Extenso
                    </a>
                    <!-- Columna derecha: Información -->
                    <div class="col-sm-6">
                        <strong>Descripción</strong>
                        <p style="text-align: justify;">
                            {{ $data->INF_DESCRIPCION }}
                        </p>
                        <strong>Tipo de información</strong>
                        <p>{{ $data->INF_TIPO }}</p>
                        <strong>Tema</strong>
                        <p>{{ $data->INF_TEMA }}</p>
                    </div>
                </div>

            @endsection

            <script>
                function adjustFormSize(size) {
                    document.getElementById('tamanio').style.fontSize = size + 'px';
                }
            </script>
            <script src="https://code.responsivevoice.org/responsivevoice.js?key=R4Pk7EUJ"></script>