@if (session('success'))
    <script>
        alert("{{ session('success') }}");
    </script>
@endif

@if (session('error'))
    <script>
        alert("{{ session('error') }}");
    </script>
@endif


@extends('layouts.pruebaplantilla')

<!--Se agrega por variedad de rutas-->
@section('css', '../../resources/css/estilos.css')

<!--Seccion de barra-->
@section('titulo', 'Administraciò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="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('patrimonio.index') }}" class="nav-link">
                    PATRIMONIO
                </a>
            </div>
            <li class="nav-item mx-3">
                <a href="{{ route('calendario') }}" class="nav-link"> CALENDARIO</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 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>
@endsection
@section('contenido')
    <div class="header-img">
        <img src="https://www.questionpro.com/blog/wp-content/uploads/2022/09/Portada-administracion-de-personal.jpg"
            alt="" class="img-fluid">
    </div>
    <div class="row">
        <div class="col-sm-2">
            <div class="d-flex flex-column">
                <a href="{{ route('admin.filter', 'User') }}" class="btn btn-light">Listar Investigadores</a>
                <a href="" class="btn btn-light" data-bs-target="#agregar-inv" data-bs-toggle="modal">Agregar
                    investigador</a>
            </div>
            <div class="dropdown-divider my-2"></div>
            
            <div class="col-sm">
                <div class="d-flex flex-column">
                    <a href="{{ route('admin.filter', 'Lugar') }}" class="btn btn-light">Listar Lugares</a>
                    <a class="btn btn-light" data-bs-toggle="modal" data-bs-target="#agregar-patrimonio">Agregar
                        lugar</a>
                </div>

                <div class="modal fade" id="agregar-patrimonio" data-bs-backdrop="static" data-bs-keyboard="false"
                    tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                    <span class="fa-solid fa-add"></span>
                                    Agregar patrimonio
                                </h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form class="px-4 py-3" action="{{ route('admin.agregarPatrimonio') }}" method="POST">
                                    @csrf
                                    <label for="text-nombre-patri" class="form-label">Nombre</label>
                                    <input type="text" class="form-control" id="text-nombre-patri"
                                        name="text-nombre-patri" placeholder="Ingrese nombre de ubicacion" required>

                                    <label for="text-latitud-patri" class="form-label">Latitud</label>
                                    <input type="text" class="form-control" id="text-latitud-patri"
                                        name="text-latitud-patri" placeholder="Agregue Latitud" required>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const inputCorreo = document.querySelector('#text-latitud-patri');

                                            inputCorreo.addEventListener('blur', function() {
                                                const regex = /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?)$/;
                                                if (!regex.test(inputCorreo.value)) {
                                                    alert('Latitud incorrecta');
                                                }
                                            });
                                        });
                                    </script>
                                    <label for="text-longuitud-patri" class="form-label">Longitud</label>
                                    <input type="text" class="form-control" id="text-longuitud-patri"
                                        name="text-longuitud-patri" placeholder="Agregue Longitud" required>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const inputCorreo = document.querySelector('#text-longuitud-patri');

                                            inputCorreo.addEventListener('blur', function() {
                                                const regex = /^[-+]?((180(\.0+)?)|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/;
                                                if (!regex.test(inputCorreo.value)) {
                                                    alert('Longuitud incorrecta');
                                                }
                                            });
                                        });
                                    </script>
                                    <label for="select-ubicacion-patri" class="form-label">Ubicación</label>
                                    <select name="select-ubicacion-patri" id="select-ubicacion-patri"
                                        class="form-select">
                                        <option value="1">Seleccione un municipio</option>
                                        @foreach ($municipios as $municipio)
                                            <option value="{{ $municipio->MUN_ID }}">{{ $municipio->MUN_NOMBRE }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label for="select-categoria-patri" class="form-label">Categoría</label>
                                    <select name="select-categoria-patri" id="select-categoria-patri"
                                        class="form-select">
                                        <option value="">Seleccione una categoría</option>
                                        <option value="Inmaterial">Inmaterial</option>
                                        <option value="Cultural">Cultural</option>
                                        <option value="Natural">Natural</option>
                                    </select>

                                    <label for="text-subcategoria-patri" class="form-label">SubCategoría</label>
                                    <input name="text-subcategoria-patri" id="text-subcategoria-patri"
                                        class="form-control" placeholder="Ingrese una subcategoria" required>

                                    <label for="text-clima-patri" class="form-label">Clima</label>
                                    <input type="text" class="form-control" id="text-clima-patri"
                                        name="text-clima-patri" placeholder="Ingrese temperatura"required>
                                    <label for="text-temperatura-patri" class="form-label">Temperatura</label>
                                    <input type="text" class="form-control" id="text-temperatura-patri"
                                        name="text-temperatura-patri" placeholder="Ingrese temperatura" required>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const inputCorreo = document.querySelector('#text-temperatura-patri');

                                            inputCorreo.addEventListener('blur', function() {
                                                const regex = /^[0-9]+$/;
                                                if (!regex.test(inputCorreo.value)) {
                                                    alert('Solo números');
                                                }
                                            });
                                        });
                                    </script>
                                    <label for="text-precipitacion-patri" class="form-label">Precipitación
                                        Pluvial</label>
                                    <input type="text" class="form-control" id="text-precipitacion-patri"
                                        name="text-precipitacion-patri" placeholder="Agregue Precepitacion" required>
                                    <label for="text-uso-patri" class="form-label">Uso</label>
                                    <input type="text" class="form-control" id="text-uso-patri" name="text-uso-patri"
                                        placeholder="Ingrese uso" required>
                                    <div class="mb-3">
                                        <label for="text-descripcion-patri" class="form-label">Sintesís</label>
                                        <textarea name="text-descripcion-patri" id="text-descripcion-patri" cols="20" rows="3"
                                            class="form-control" placeholder="Agregue la sintesis del sitio" required></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <div class="mb-3">
                                            <label for="form-imagen-patri" class="form-label">Imagen de lugar (1440 x
                                                420)</label>
                                            <input class="form-control" type="text" id="form-imagen-patri"
                                                name="form-imagen-patri" placeholder="Agruegue el link de la imagen"
                                                required>
                                        </div>

                                        <script>
                                            // Función para extraer ID de Google Drive
                                            function extractDriveId(url) {
                                                // Expresión regular para buscar el ID de la URL de Google Drive
                                                const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                const match = url.match(regex);
                                                return match ? match[1] : null;
                                            }

                                            // Evento para capturar el valor y modificar el campo de entrada
                                            document.getElementById("form-imagen-patri").addEventListener("blur", function() {
                                                const urlInput = this.value; // Obtener el valor actual del input
                                                const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                if (driveId) {
                                                    this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                }
                                            });

                                            document.addEventListener("DOMContentLoaded", function() {
                                                // Validar latitud
                                                document.querySelector('#text-latitud-patri').addEventListener('blur', function() {
                                                    const regex = /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?)$/;
                                                    if (!regex.test(this.value)) alert('Latitud incorrecta');
                                                });

                                                // Validar longitud
                                                document.querySelector('#text-longuitud-patri').addEventListener('blur', function() {
                                                    const regex = /^[-+]?((180(\.0+)?)|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/;
                                                    if (!regex.test(this.value)) alert('Longitud incorrecta');
                                                });

                                                // Validar solo números
                                                document.querySelector('#text-temperatura-patri').addEventListener('blur', function() {
                                                    if (!/^[0-9]+$/.test(this.value)) alert('Solo números permitidos');
                                                });
                                            });
                                        </script>


                                        <div class="mb-3">
                                            <label for="form-link-patri" class="form-label">Extenso</label>
                                            <input class="form-control" type="text" id="form-link-patri"
                                                name="form-link-patri" placeholder="Agregue el link del extenso" required>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Cancelar</button>
                                            <button type="submit" class="btn btn-primary">Guardar</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="dropdown-divider my-2"></div>
            <div class="d-flex flex-column">
                <a href="{{ route('admin.filter', 'Informacion') }}" class="btn btn-light">Listar contenido publicado</a>
                <div class="dropdown">
                    <a class="btn btn-light dropdown-toggle w-100" href="#" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Listar por categoría
                    </a>
                    <ul class="dropdown-menu">
                        <li> <a href="{{ route('admin.filter', 'v') }}" class="btn btn-light dropdown-item">Vídeos</a>
                        </li>
                        <li> <a href="{{ route('admin.filter', 't') }}" class="btn btn-light dropdown-item">Talleres</a>
                        </li>
                        <li><a href="{{ route('admin.filter', 'p') }}"
                                class="btn btn-light dropdown-item">Publicaciones</a>
                        </li>
                        <li><a href="{{ route('admin.filter', 'tr') }}" class="btn btn-light dropdown-item">Tradiciones y
                                costumbres</a></li>
                        <li><a href="{{ route('admin.filter', 'bfn') }}" class="btn btn-light dropdown-item">Biblioteca,
                                fonoteco, Hemeroteca</a></li>
                    </ul>

                    <a href="" class="btn btn-light w-100" data-bs-target="#agregar-publ"
                        data-bs-toggle="modal">Agregar
                        contenido</a>
                </div>
            </div>

            <div class="dropdown-divider my-2"></div>
            <div class="d-flex flex-column">
                <a href="{{ route('admin.filter', 'Colaborador') }}" class="btn btn-light">Listar colaboradores</a>
                <a href="" class="btn btn-light" data-bs-target="#agregar-red" data-bs-toggle="modal">Agregar
                    Colaborador</a>
            </div>
            <div class="dropdown-divider my-2"></div>
            <div class="d-flex flex-column">
                <a href="{{ route('admin.filter', 'Servicio') }}" class="btn btn-light">Listar actividades</a>
                <a class="btn btn-light" data-bs-target="#agregar-ser" data-bs-toggle="modal">Agregar
                    actividades</a>
            </div>
            <div class="dropdown-divider my-2"></div>
            <div class="d-flex flex-column">
                <a href="{{ route('admin.filter', 'Mapa') }}" class="btn btn-light">Listar Cartografía interactiva</a>
                <a href="" class="btn btn-light" data-bs-target="#agregar-maps" data-bs-toggle="modal">Agregar
                    cartografía interactiva</a>
            </div>
        </div>

        <div class="col-sm-10">
            @if ($tabla == '1')
                <h2 class="text-center p-1">Investigadores</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombres:</th>
                            <th style="text-align: center;">Apellido paterno:</th>
                            <th style="text-align: center;">Apellido materno</th>
                            <th style="text-align: center;">Rol</th>
                            <th style="text-align: center;">Email</th>
                            <th style="text-align: center;">Nombre usuario</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $user)
                            <tr>

                                <td style="text-align: center;">{{ $user->US_NOMBRE }}</td>
                                <td style="text-align: center;">{{ $user->US_APE_PA }}</td>
                                <td style="text-align: center;">{{ $user->US_APE_MA }}</td>
                                <td style="text-align: center;">{{ $user->US_ROL }}</td>
                                <td style="text-align: center;">{{ $user->email }}</td>
                                <td style="text-align: center;">{{ $user->US_USERNAME }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyUser', $user) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $user->id }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-user-{{ $user->id }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-user-{{ $user->id }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar investigador
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{ route('admin.updateUser', $user->id) }}"
                                                            class="px-4 py-3" method="POST">

                                                            @csrf
                                                            @method('PUT') <label
                                                                for="text_nombre_inv_{{ $user->id }}"
                                                                class="form-label">Nombre</label>
                                                            <input type="text" class="form-control"
                                                                id="text_nombre_inv_{{ $user->id }}"
                                                                name="text_nombre_inv_{{ $user->id }}"
                                                                placeholder="Ingrese  Nombre(s)" required
                                                                value="{{ $user->US_NOMBRE }}">
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#text_correo');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        // Regex para validar el formato de un correo electrónico general
                                                                        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: no es un correo electrónico válido');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <label for="text_app_inv_{{ $user->id }}"
                                                                class="form-label">Apellido
                                                                paterno</label>
                                                            <input type="text" class="form-control"
                                                                id="text_app_inv_{{ $user->id }}"
                                                                name="text_app_inv_{{ $user->id }}"
                                                                value="{{ $user->US_APE_PA }}"
                                                                placeholder="Ingrese el Apellido paterno" required>
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#text_correo');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        // Regex para validar el formato de un correo electrónico general
                                                                        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: no es un correo electrónico válido');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <label for="text-apeliido_apm_inv_{{ $user->id }}"
                                                                class="form-label">Apellido
                                                                materno</label>
                                                            <input type="text" class="form-control"
                                                                id="text_apm_inv_{{ $user->id }}"
                                                                name="text_apm_inv_{{ $user->id }}"
                                                                value="{{ $user->US_APE_MA }}"
                                                                placeholder="Ingrese el Apellido materno" required>
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#text_correo');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        // Regex para validar el formato de un correo electrónico general
                                                                        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: no es un correo electrónico válido');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="text_correo_{{ $user->id }}"
                                                                    class="form-label">Correo
                                                                    electrónico</label>
                                                                <input type="text" class="form-control"
                                                                    id="text_correo_{{ $user->id }}"
                                                                    name="text_correo_{{ $user->id }}"
                                                                    placeholder="Ingrese el Correo"
                                                                    value="{{ $user->email }}" required>

                                                            </div>
                                                            <!-- Script de JavaScript para validar el correo electrónico -->
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#text_correo');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        // Regex para validar el formato de un correo electrónico general
                                                                        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: no es un correo electrónico válido');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="text_nombreusuario_{{ $user->id }}"
                                                                    class="form-label">Nombre
                                                                    de usuario</label>
                                                                <input type="text" class="form-control"
                                                                    id="text_nombreusuario_{{ $user->id }}"
                                                                    name="text_nombreusuario_{{ $user->id }}"
                                                                    placeholder="Ingrese el nombre de usuario"
                                                                    value="{{ $user->US_USERNAME }}" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="text_rol_{{ $user->id }}"
                                                                    class="form-label">Rol</label>
                                                                <select class="form-control"
                                                                    id="text_rol_{{ $user->id }}"
                                                                    name="text_rol_{{ $user->id }}">

                                                                    <option value="{{ $user->US_ROL }}">
                                                                        {{ $user->US_ROL }}
                                                                    </option>

                                                                    <option value="VISITANTE">VISITANTE</option>
                                                                    <option value="INVESTIGADOR">INVESTIGADOR</option>

                                                                </select>

                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '2')
                <h2 class="text-center p-1">Colaboradores</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre:</th>
                            <th style="text-align: center;">Tipo colaborador:</th>
                            <th style="text-align: center;">Email</th>
                            <th style="text-align: center;">Teléfono</th>
                            <!---<th style="text-align: center;">Descripción</th>-->
                            <th style="text-align: center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $colaborador)
                            <tr>

                                <td style="text-align: center;">{{ $colaborador->COL_NOMBRE }}</td>
                                <td style="text-align: center;">{{ $colaborador->tipoColaborador->TI_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $colaborador->COL_EMAIL }}</td>
                                <td style="text-align: center;">{{ $colaborador->COL_TELEFONO }}</td>
                                <!--  <td style="text-align: center;">{{ $colaborador->COL_DESCRIPCION }}</td>-->
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admincolaborador.destroy', $colaborador) }}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent"
                                                id="btn-eliminar-{{ $colaborador->COL_ID }}" style="color: red;"
                                                type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $colaborador->COL_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $colaborador->COL_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Colaborador
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admincolaborador.update', $colaborador->COL_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label
                                                                for="text_nombre_colaborador_{{ $colaborador->COL_ID }}"
                                                                class="form-label">Nombre colaborador</label>
                                                            <input type="text" class="form-control"
                                                                id="text_nombre_colaborador_{{ $colaborador->COL_ID }}"
                                                                name="text_nombre_colaborador_{{ $colaborador->COL_ID }}"
                                                                placeholder="Ingrese el Nombre del investigador, asociacion, especialista o grupo"
                                                                value="{{ $colaborador->COL_NOMBRE }}" required>

                                                            <label for="select_tipo_col_{{ $colaborador->COL_ID }}"
                                                                class="form-label">Tipo de colaborador</label>
                                                            <select name="select_tipo_col_{{ $colaborador->COL_ID }}"
                                                                id="select_tipo_col_{{ $colaborador->COL_ID }}"
                                                                class="form-select">
                                                                <option value="{{ $colaborador->COL_TIPO }}" SELECTED>
                                                                    {{ $colaborador->tipoColaborador->TI_DESCRIPCION }}
                                                                </option>
                                                                @foreach ($tipocolaborador as $tipo)
                                                                    <option value="{{ $tipo->TI_ID }}">
                                                                        {{ $tipo->TI_DESCRIPCION }}</option>
                                                                @endforeach
                                                            </select>

                                                            <div class="mb-3">
                                                                <label for="form_correo_col_{{ $colaborador->COL_ID }}"
                                                                    class="form-label">Correo</label>
                                                                <input class="form-control" type="text"
                                                                    id="form_correo_col_{{ $colaborador->COL_ID }}"
                                                                    name="form_correo_col_{{ $colaborador->COL_ID }}"
                                                                    value="{{ $colaborador->COL_EMAIL }}"
                                                                    placeholder="Ingrese el Correo">
                                                            </div>
                                                            <!-- Script de JavaScript para validar el correo electrónico -->
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#form_correo_col_{{ $colaborador->COL_ID }}');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        const regex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: No es un correo valido');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form_imagen_col_{{ $colaborador->COL_ID }}"
                                                                    class="form-label">Imagen Colaborador (1440 x
                                                                    420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form_imagen_col_{{ $colaborador->COL_ID }}"
                                                                    name="form_imagen_col_{{ $colaborador->COL_ID }}"
                                                                    value="{{ $colaborador->COL_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form_imagen_col_{{ $colaborador->COL_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form_telefono_col_{{ $colaborador->COL_ID }}"
                                                                    class="form-label">Teléfono</label>
                                                                <input class="form-control" type="text"
                                                                    id="form_telefono_col_{{ $colaborador->COL_ID }}"
                                                                    name="form_telefono_col_{{ $colaborador->COL_ID }}"
                                                                    value="{{ $colaborador->COL_TELEFONO }}" required
                                                                    minlength="10">
                                                            </div>

                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '3')
                <h2 class="text-center p-1">Actividades</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Responsable</th>
                            <th style="text-align: center;">Teléfono</th>
                            <th style="text-align: center;">Email</th>
                            <th style="text-align: center;">Categoria</th>
                            <th style="text-align: center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $ser)
                            <tr>
                                <td style="text-align: center;">{{ $ser->SER_TITULO }}</td>
                                <td style="text-align: center;">{{ $ser->SER_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $ser->SER_RESPONSABLE }}</td>
                                <td style="text-align: center;">{{ $ser->SER_TELEFONO }}</td>
                                <td style="text-align: center;">{{ $ser->SER_EMAIL }}</td>
                                <td style="text-align: center;">{{ $ser->categoria->CAT_DESCRIPCION }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('adminContenido.destroyServicio', $ser) }}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $ser->SER_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-servicio-{{ $ser->SER_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-servicio-{{ $ser->SER_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar actividad
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('adminContenido.updateServicio', $ser->SER_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-ac-{{ $ser->SER_ID }}"
                                                                class="form-label">Nombre de la incidencia</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-ac-{{ $ser->SER_ID }}"
                                                                name="text-nombre-ac-{{ $ser->SER_ID }}"
                                                                placeholder="Nombre de la incidencia"
                                                                value="{{ $ser->SER_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-ac-{{ $ser->SER_ID }}" id="text-descripcion-ac-{{ $ser->SER_ID }}"
                                                                    cols="20" rows="3" class="form-control" required>{{ $ser->SER_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Imagen de la incidencia (1440 x
                                                                    420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-ac-{{ $ser->SER_ID }}"
                                                                    name="form-link-ac-{{ $ser->SER_ID }}"
                                                                    value="{{ $ser->SER_LINK_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-ac-{{ $ser->SER_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="text-nombrer-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Nombre del responsable</label>
                                                                <input type="text" class="form-control"
                                                                    id="text-nombrer-ac-{{ $ser->SER_ID }}"
                                                                    name="text-nombrer-ac-{{ $ser->SER_ID }}"
                                                                    placeholder="Nombre del responsable"
                                                                    value="{{ $ser->SER_RESPONSABLE }}" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="text-dir-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Dirección</label>
                                                                <input type="text" class="form-control"
                                                                    id="text-dir-ac-{{ $ser->SER_ID }}"
                                                                    name="text-dir-ac-{{ $ser->SER_ID }}"
                                                                    placeholder="Dirección" value="{{ $ser->SER_DIR }}"
                                                                    required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="text-email-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Correo</label>
                                                                <input class="form-control" type="text"
                                                                    id="text-email-ac-{{ $ser->SER_ID }}"
                                                                    name="text-email-ac-{{ $ser->SER_ID }}"
                                                                    value="{{ $ser->SER_EMAIL }}"
                                                                    placeholder="Ingrese el Correo">
                                                            </div>
                                                            <!-- Script de JavaScript para validar el correo electrónico -->
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', function() {
                                                                    const inputCorreo = document.querySelector('#text-email-ac-{{ $ser->SER_ID }}');

                                                                    inputCorreo.addEventListener('blur', function() {
                                                                        const regex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
                                                                        if (!regex.test(inputCorreo.value)) {
                                                                            alert('Error: no es un correo del dominio itsoeh.edu.mx');
                                                                        }
                                                                    });
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="text-tel-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Teléfono</label>
                                                                <input class="form-control" type="text"
                                                                    id="text-tel-ac-{{ $ser->SER_ID }}"
                                                                    name="text-tel-ac-{{ $ser->SER_ID }}"
                                                                    value="{{ $ser->SER_TELEFONO }}"
                                                                    placeholder="Teléfono" required min="10">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-ac-{{ $ser->SER_ID }}"
                                                                    class="form-label">Categoría</label>
                                                                <select name="select-cat-ac-{{ $ser->SER_ID }}"
                                                                    id="select-cat-ac-{{ $ser->SER_ID }}"
                                                                    class="form-select">
                                                                    <option
                                                                        value="{{ $ser->categoria->CAT_DESCRIPCION }}"
                                                                        SELECTED>
                                                                        {{ $ser->SER_CAT }}</option>
                                                                    @foreach ($categoriaServicio as $tipo)
                                                                        <option value="{{ $tipo->CAT_ID }}">
                                                                            {{ $tipo->CAT_DESCRIPCION }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>


                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '4')
                <h2 class="text-center p-1">Contenido General</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-con-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-con-{{ $con->INF_ID }}"
                                                                name="text-nombre-con-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-con-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    cols="20" rows="3" class="form-control" required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbres">Tradiciones y
                                                                        costumbres</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Sistemas constructivos">Sistemas
                                                                        constructivos</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Municipios">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido (1440 x 420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agregue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == 'contenido')
                <h2 class="text-center p-1">Contenido </h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control" required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido (1440 x 420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '6')
                <h2 class="text-center p-1">Videos</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción:</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control" required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo:</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Videos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema:</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnías</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido (1440 x 420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '7')
                <h2 class="text-center p-1">Talleres</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control"
                                                                    required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido (1440 x 420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '8')
                <h2 class="text-center p-1">Publicaciones</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripciónes</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción:</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control"
                                                                    required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo:</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema:</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido (1440 x 420)</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '9')
                <h2 class="text-center p-1">Tradiciones y Costumbres</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control"
                                                                    required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '10')
                <h2 class="text-center p-1">Biblioteca, fonoteco, Hemeroteca</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Tipo</th>
                            <th style="text-align: center;">Tema</th>
                            <th style="text-align:  center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $con)
                            <tr>
                                <td style="text-align: center;">{{ $con->INF_TITULO }}</td>
                                <td style="text-align: center;">{{ $con->INF_DESCRIPCION }}</td>
                                <td style="text-align: center;">{{ $con->INF_TIPO }}</td>
                                <td style="text-align: center;">{{ $con->INF_TEMA }}</td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyContenido', $con) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $con->INF_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $con->INF_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $con->INF_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar Contenido
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updateContenido', $con->INF_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-{{ $con->INF_ID }}"
                                                                class="form-label">Nombre del
                                                                contenido</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-{{ $con->INF_ID }}"
                                                                name="text-nombre-{{ $con->INF_ID }}"
                                                                placeholder="Nombre del contenido"
                                                                value="{{ $con->INF_TITULO }}" required>
                                                            <div class="mb-3">
                                                                <label for="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion-{{ $con->INF_ID }}" id="text-descripcion-con-{{ $con->INF_ID }}"
                                                                    name="text-descripcion-con-{{ $con->INF_ID }}" cols="20" rows="3" class="form-control"
                                                                    required>{{ $con->INF_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tipo</label>
                                                                <select name="select-cat-con-{{ $con->INF_ID }}"
                                                                    id="select-cat-con-{{ $con->INF_ID }}"
                                                                    class="form-select"
                                                                    value="{{ $con->INF_DESCRIPCION }}">
                                                                    <option value="{{ $con->INF_TIPO }}" selected>
                                                                        {{ $con->INF_TIPO }}</option>
                                                                    <option value="Talleres">Talleres</option>
                                                                    <option value="Vídeos">Vídeos</option>
                                                                    <option value="Publicaciones">Publicaciones</option>
                                                                    <option value="Manuales">Manuales</option>
                                                                    <option value="Tradiciones y costumbre">Tradiciones y
                                                                        costumbre</option>
                                                                    <option value="Biblioteca, fonoteco, Hemeroteca">
                                                                        Biblioteca, fonoteco, Hemeroteca
                                                                    </option>

                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Tema</label>
                                                                <select name="select-tema-con-{{ $con->INF_ID }}"
                                                                    id="select-tema-con-{{ $con->INF_ID }}"
                                                                    class="form-select">
                                                                    <option value="{{ $con->INF_TEMA }}" selected>
                                                                        {{ $con->INF_TEMA }}</option>
                                                                    <option value="Estados">Estados</option>
                                                                    <option value="Ecotecnias">Ecotecnias</option>
                                                                    <option value="Sistemas agropecuarios">Sistemas
                                                                        agropecuarios</option>
                                                                    <option value="Municipos">Municipios</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Imagen del
                                                                    contenido:</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-con-{{ $con->INF_ID }}"
                                                                    name="form-link-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_IMAGEN }}"
                                                                    placeholder="Agruegue el link de la imagen" required>
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-con-{{ $con->INF_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-video-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    video</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-video-con-{{ $con->INF_ID }}"
                                                                    name="form-link-video-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_VIDEO }}"
                                                                    placeholder="Agruegue el link del video" required>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    class="form-label">Link de
                                                                    extenso</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    name="form-link-extenso-con-{{ $con->INF_ID }}"
                                                                    value="{{ $con->INF_URL_EXTENSO }}"
                                                                    placeholder="Agruegue el link del extenso" required>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit" class="btn btn-primary"
                                                                    onclick="confirmar()">Guardar</button>
                                                                <script>
                                                                    function confirmar() {
                                                                        const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                        if (confirmar) {
                                                                            window.alert('!Operación realizada con exito¡');
                                                                        }
                                                                    }
                                                                </script>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '11')
                <h2 class="text-center p-1">Patrimonios</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Lugar</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $lugar)
                            <tr>
                                <td style="font-size: 14px; text-align: center; " class="limitar-alto">
                                    {{ $lugar->LU_NOMBRE }}
                                </td>
                                <td class="limitar-alto" style="font-size: 14px; text-align: center;">
                                    {{ $lugar->LU_SINTESIS }}
                                </td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyPatrimonio', $lugar) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent" id="btn-eliminar-{{ $lugar->LU_ID }}"
                                                style="color: red;" type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-patrimonio-{{ $lugar->LU_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-patrimonio-{{ $lugar->LU_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar patrimonio
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updatePatrimonio', $lugar->LU_ID) }}"
                                                            class="px-4 py-3" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <label for="text-nombre-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Nombre</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre-lu-{{ $lugar->LU_ID }}"
                                                                name="text-nombre-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Ingrese nombre de ubicacion"
                                                                value="{{ $lugar->LU_NOMBRE }}">

                                                            <label for="text-latitud-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Latitud</label>
                                                            <input type="text" class="form-control"
                                                                id="text-latitud-lu-{{ $lugar->LU_ID }}"
                                                                name="text-latitud-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Agregue Latitud"
                                                                value="{{ $lugar->LU_LAT }}">
                                                            <label for="text-longuitud-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Longitud</label>
                                                            <input type="text" class="form-control"
                                                                id="text-longuitud-lu-{{ $lugar->LU_ID }}"
                                                                name="text-longuitud-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Agregue Longitud"
                                                                value="{{ $lugar->LU_LONG }}">

                                                            <label for="text-ubicacion-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Ubicación</label>
                                                            <select name="text-ubicacion-lu-{{ $lugar->LU_ID }}"
                                                                id="text-ubicacion-lu-{{ $lugar->LU_ID }}"
                                                                class="form-control">
                                                                <option value="{{ $lugar->LU_MUN }}" selected>
                                                                    {{ $lugar->Municipio->MUN_NOMBRE }}</option>
                                                                @foreach ($municipios as $municipio)
                                                                    <option value="{{ $municipio->MUN_ID }}">
                                                                        {{ $municipio->MUN_NOMBRE }}</option>
                                                                @endforeach
                                                            </select>

                                                            <label for="select-categoria-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Categoria</label>
                                                            <select id="select-categoria-lu-{{ $lugar->LU_ID }}"
                                                                name="select-categoria-lu-{{ $lugar->LU_ID }}"
                                                                class="form-select">
                                                                <option value="{{ $lugar->LU_CATEGORIA }}" selected>
                                                                    {{ $lugar->LU_CATEGORIA }}</option>
                                                                <option value="Inmaterial">Inmaterial</option>
                                                                <option value="Cultural">Cultural</option>
                                                                <option value="Natural">Natural</option>
                                                                <option value="Trad. y costumbres">Trad. y costumbres
                                                                </option>
                                                            </select>

                                                            <label for="select-subcategoria-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">SubCategoria</label>
                                                            <input id="select-subcategoria-lu-{{ $lugar->LU_ID }}"
                                                                name="select-subcategoria-lu-{{ $lugar->LU_ID }}"
                                                                class="form-control" type="text"
                                                                value="{{ $lugar->LU_SUBCATEGORIA }}">
                                                            <label for="text-clima-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Clima</label>
                                                            <input type="text" class="form-control"
                                                                id="text-clima-lu-{{ $lugar->LU_ID }}"
                                                                name="text-clima-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Ingrese temperatura"
                                                                value="{{ $lugar->LU_CLIMA }}">
                                                            <label for="text-temperatura-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Temperatura</label>
                                                            <input type="text" class="form-control"
                                                                id="text-temperatura-lu-{{ $lugar->LU_ID }}"
                                                                name="text-temperatura-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Ingrese temperatura"
                                                                value="{{ $lugar->LU_TEMPERATURA }}">

                                                            <label for="text-precipitacion-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Precipitacion
                                                                Pluvial</label>
                                                            <input type="text" class="form-control"
                                                                id="text-precipitacion-lu-{{ $lugar->LU_ID }}"
                                                                name="text-precipitacion-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Agregue Precepitacion"
                                                                value="{{ $lugar->LU_PRECIPITACION }}">
                                                            <label for="text-uso-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Uso</label>
                                                            <input type="text" class="form-control"
                                                                id="text-uso-lu-{{ $lugar->LU_ID }}"
                                                                name="text-uso-lu-{{ $lugar->LU_ID }}"
                                                                placeholder="Ingrese uso"
                                                                value="{{ $lugar->LU_USO }}">
                                                            <label for="text-sintesis-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Descripción:</label>
                                                            <textarea name="text-sintesis-lu-{{ $lugar->LU_ID }}" id="text-sintesis-lu-{{ $lugar->LU_ID }}" cols="20"
                                                                rows="3" class="form-control">{{ $lugar->LU_SINTESIS }}</textarea>
                                                            <label for="form-link-lu-{{ $lugar->LU_ID }}"
                                                                class="form-label">Extenso</label>
                                                            <input class="form-control" type="text"
                                                                id="form-link-lu-{{ $lugar->LU_ID }}"
                                                                name="form-link-lu-{{ $lugar->LU_ID }}"
                                                                value="{{ $lugar->LU_LINK }}">
                                                            <div class="my-3">
                                                                <label for="form-imagen-lu-{{ $lugar->LU_ID }}"
                                                                    class="form-label">Imagen</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-imagen-lu-{{ $lugar->LU_ID }}"
                                                                    name="form-imagen-lu-{{ $lugar->LU_ID }}"
                                                                    value="{{ $lugar->LU_IMAGEN }}">
                                                                <script>
                                                                    function extractDriveId(url) {
                                                                        // Expresión regular para buscar el ID de la URL de Google Drive
                                                                        const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                        const match = url.match(regex);
                                                                        return match ? match[1] : null;
                                                                    }

                                                                    // Evento para capturar el valor y modificar el campo de entrada
                                                                    document.getElementById("form-imagen-lu-{{ $lugar->LU_ID }}").addEventListener("blur", function() {
                                                                        const urlInput = this.value; // Obtener el valor actual del input
                                                                        const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                        if (driveId) {
                                                                            this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                        }
                                                                    });
                                                                </script>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary"
                                                                        data-bs-dismiss="modal">Cancelar</button>
                                                                    <button type="submit" class="btn btn-primary"
                                                                        onclick="confirmar()">Guardar</button>
                                                                    <script>
                                                                        function confirmar() {
                                                                            const confirmar = window.confirm('¿Desea realizar esta operación?');
                                                                            if (confirmar) {
                                                                                window.alert('!Operación realizada con exito¡');
                                                                            }
                                                                        }
                                                                    </script>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @elseif ($tabla == '12')
                <h2 class="text-center p-1">Cartografia</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Nombre</th>
                            <th style="text-align: center;">Descripción</th>
                            <th style="text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($data as $cartografia)
                            <tr>
                                <td style="font-size: 14px; text-align: center; " class="limitar-alto">
                                    {{ $cartografia->CAR_NOMBRE }}
                                </td>
                                <td style="font-size: 14px; text-align: center; " class="limitar-alto">
                                    {{ $cartografia->CAR_DESCRIPCION }}
                                </td>
                                <td>
                                    <div class="d-flex">
                                        <form action="{{ route('admin.destroyMapa', $cartografia->CAR_ID) }}"
                                            method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-transparent"
                                                id="btn-eliminar-{{ $cartografia->CAR_ID }}" style="color: red;"
                                                type="submit" onclick="confirmar()">
                                                <span class="fa-solid fa-trash"></span>
                                            </button>
                                        </form>
                                        <button type="button" class="btn btn-transparent" id="btn_editar"
                                            style="color:gold;" data-bs-toggle="modal"
                                            data-bs-target="#editar-cartografia-{{ $cartografia->CAR_ID }}">
                                            <span class="fa-solid fa-edit"></span>
                                        </button>
                                        <div class="modal fade" id="editar-cartografia-{{ $cartografia->CAR_ID }}"
                                            data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                                                            <span class="fa-solid fa-edit"></span>
                                                            Editar cartografías
                                                        </h1>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form
                                                            action="{{ route('admin.updateMapa', $cartografia->CAR_ID) }}"
                                                            class="px-4 py-3" method="POST"
                                                                onsubmit="return prepararFormulario({{ $cartografia->CAR_ID }})">
                                                            @csrf
                                                            @method('PUT')

                                                            @if ($errors->any())
                                                                <div class="alert alert-danger">
                                                                    <ul>
                                                                        @foreach ($errors->all() as $error)
                                                                            <li>{{ $error }}</li>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            @endif

                                                            <label for="text-nombre" class="form-label">Nombre</label>
                                                            <input type="text" class="form-control"
                                                                id="text-nombre" name="text-nombre"
                                                                placeholder="Nombre de la Región" required
                                                                value="{{ $cartografia->CAR_NOMBRE }}">

                                                            <div class="mb-3">
                                                                <label for="text-descripcion"
                                                                    class="form-label">Descripción</label>
                                                                <textarea name="text-descripcion" id="text-descripcion" cols="20" rows="3" class="form-control"
                                                                    placeholder="Agregue una descripción para la región" required>{{ $cartografia->CAR_DESCRIPCION }}</textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-latitud"
                                                                    class="form-label">Latitud</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-latitud" name="form-latitud"
                                                                    placeholder="Agregue latitud" required
                                                                    pattern="-?\d+(\.\d+)?"
                                                                    title="Ingrese una latitud válida"
                                                                    value="{{ $cartografia->CAR_LAT }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-longitud"
                                                                    class="form-label">Longitud</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-longitud" name="form-longitud"
                                                                    placeholder="Agregue longitud" required
                                                                    pattern="-?\d+(\.\d+)?"
                                                                    title="Ingrese una longitud válida"
                                                                    value="{{ $cartografia->CAR_LONG }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link" class="form-label">Link del
                                                                    mapa</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link" name="form-link"
                                                                    placeholder="Agregue el link del mapa" required
                                                                    value="{{ $cartografia->CAR_LINK }}">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="form-link-image" class="form-label">Link de
                                                                    la imagen</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-image-{{ $cartografia->CAR_ID }}"
                                                                    name="form-link-image"
                                                                    placeholder="Agregue el link de la imagen" required
                                                                    value="{{ $cartografia->CAR_LINK_IMAGEN }}">
                                                            </div>
                                                            <script>
                                                                function extractDriveId(url) {
                                                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                                                    const match = url.match(regex);
                                                                    return match ? match[1] : null;
                                                                }

                                                                // Evento para capturar el valor y modificar el campo de entrada
                                                                document.getElementById("form-link-image-{{ $cartografia->CAR_ID }}").addEventListener("blur", function() {
                                                                    const urlInput = this.value; // Obtener el valor actual del input
                                                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                                                    if (driveId) {
                                                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                                                    }
                                                                });
                                                            </script>
                                                            <div class="mb-3">
                                                                <label for="form-link-externo" class="form-label">Link
                                                                    externo</label>
                                                                <input class="form-control" type="text"
                                                                    id="form-link-externo" name="form-link-externo"
                                                                    placeholder="Agregue el link externo" required
                                                                    value="{{ $cartografia->CAR_LINK_EXTERNO }}">
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancelar</button>
                                                                <button type="submit"
                                                                    class="btn btn-primary">Guardar</button>
                                                            </div>
                                                        </form>

                                                        <script>
  function extractDriveId(url) {
    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
    const match = url.match(regex);
    return match ? match[1] : null;
  }

  function prepararFormulario(id) {
    const input = document.getElementById("form-link-image-" + id);
    const url = input.value;
    const driveId = extractDriveId(url);

    if (driveId) {
      input.value = driveId;
    }

    return confirmar(); // ya existente
  }

  function confirmar() {
    return window.confirm("¿Desea realizar esta operación?");
  }
</script>


                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        {{ $data->links() }}
        <!--Mapas-->
        <div class="modal fade" id="agregar-maps" data-bs-backdrop="static" data-bs-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                            <span class="fa-solid fa-add"></span>
                            Agregar cartografía interactiva
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="px-4 py-3" action="{{ route('admin.addMapa') }}" method="POST"
                            onsubmit="var long = document.getElementById('form-longuitud').value;
                            var lat = document.getElementById('form-latitud').value;
                            return validarCartografia(lat, long)">
                            @csrf
                            <label for="text-nombre" class="form-label">Nombre</label>
                            <input type="text" class="form-control" id="text-nombre" name="text-nombre"
                                placeholder="Nombre de la Región" required>

                            <div class="mb-3">
                                <label for="text-descripcion" class="form-label">Descripción</label>
                                <textarea name="text-descripcion" id="text-descripcion" cols="20" rows="3" class="form-control"
                                    placeholder="Agregue una descripción para la región" required></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="form-longitud" class="form-label">Longitud</label>
                                <input class="form-control" type="text" id="form-longitud" name="form-longitud"
                                    placeholder="Agregue longitud" required>
                            </div>

                            <div class="mb-3">
                                <label for="form-latitud" class="form-label">Latitud</label>
                                <input class="form-control" type="text" id="form-latitud" name="form-latitud"
                                    placeholder="Agregue latitud" required>
                            </div>

                            <div class="mb-3">
                                <label for="form-link" class="form-label">Link del mapa</label>
                                <input class="form-control" type="text" id="form-link" name="form-link"
                                    placeholder="Agregue el link del mapa" required>
                            </div>

                            <div class="mb-3">
                                <label for="form-link-image" class="form-label">Link de la imagen</label>
                                <input class="form-control" type="text" id="form-link-imagea"
                                    name="form-link-image" placeholder="Agregue el link de la imagen" required>
                            </div>

                            <script>
                                function extractDriveId(url) {
                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                    const match = url.match(regex);
                                    return match ? match[1] : null;
                                }

                                // Evento para capturar el valor y modificar el campo de entrada
                                document.getElementById("form-link-imagea").addEventListener("blur", function() {
                                    const urlInput = this.value; // Obtener el valor actual del input
                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                    if (driveId) {
                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                    }
                                });
                            </script>

                            <div class="mb-3">
                                <label for="form-link-externo" class="form-label">Enlace externo relacionado</label>
                                <input class="form-control" type="text" id="form-link-externo"
                                    name="form-link-externo" placeholder="Ingrese el enlace externo relacionado"
                                    required>
                            </div>


                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-bs-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!--Contenido-->
        <div class="modal fade" id="agregar-publ" data-bs-backdrop="static" data-bs-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                            <span class="fa-solid fa-add"></span>
                            Agregar Contenido
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="px-4 py-3" action="{{ route('admin.addContenido') }}" method="POST">
                            @csrf
                            <label for="text-nombre-con" class="form-label">Nombre del contenido</label>
                            <input type="text" class="form-control" id="text-nombre-con" name="text-nombre-con"
                                placeholder="Nombre del contenido" required>
                            <div class="mb-3">
                                <label for="text-descripcion-con" class="form-label">Descripción:</label>
                                <textarea name="text-descripcion-con" id="text-descripcion-con" cols="20" rows="3"
                                    class="form-control" placeholder="Agrega una desscripcion del contenido" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="select-cat-con" class="form-label">Tipo:</label>
                                <select name="select-cat-con" id="select-cat-con" class="form-select" required>
                                    <option value="">Seleccione un tipo</option>
                                    <option value="Talleres">Talleres</option>
                                    <option value="Vídeos">Vídeos</option>
                                    <option value="Publicaciones">Publicaciones</option>
                                    <option value="Manuales">Manuales</option>
                                    <option value="Tradiciones y costumbre">Tradiciones y costumbre</option>
                                    <option value="Biblioteca, fonoteco, Hemeroteca">Biblioteca, fonoteco, Hemeroteca
                                    </option>

                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="select-tema-con" class="form-label">Tema:</label>
                                <select name="select-tema-con" id="select-tema-con" class="form-select" required>
                                    <option value="">Seleccione un tema</option>
                                    <option value="Sistemas constructivos">Sistemas constructivos</option>
                                    <option value="Sistemas agropecuarios">Sistemas agropecuarios</option>
                                    <option value="Ecotecnias">Ecotecnias</option>
                                    <option value="Estados">Estados</option>
                                    <option value="Municipos">Municipios</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="form-link-con" class="form-label">Imagen del contenido: (1440 x 420)</label>
                                <input class="form-control" type="text" id="form-link-con" name="form-link-con"
                                    placeholder="Agruegue el link de la imagen" required>
                            </div>
                            <script>
                                function extractDriveId(url) {
                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                    const match = url.match(regex);
                                    return match ? match[1] : null;
                                }
                                // Evento para capturar el valor y modificar el campo de entrada
                                document.getElementById("form-link-con").addEventListener("blur", function() {
                                    const urlInput = this.value; // Obtener el valor actual del input
                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                    if (driveId) {
                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                    }
                                });
                            </script>
                            <div class="mb-3">
                                <label for="form-link-video-con" class="form-label">Link de video</label>
                                <input class="form-control" type="text" id="form-link-video-con"
                                    name="form-link-video-con" placeholder="Agruegue el link del video" required>
                            </div>
                            <div class="mb-3">
                                <label for="form-link-extenso-con" class="form-label">Link de extenso</label>
                                <input class="form-control" type="text" id="form-link-extenso-con"
                                    name="form-link-extenso-con" placeholder="Agregue el link del extenso" required>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-bs-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--Actividades de incidencia-->
        <div class="modal fade" id="agregar-ser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                            <span class="fa-solid fa-add"></span>
                            Agregar actividades de incidencia
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="px-4 py-3" action="{{ route('admin.addServicio') }}" method="POST"
                            onsubmit="var correo = document.getElementById('text-email-ac').value; 
                         var telefono = document.getElementById('text-tel-ac').value; return validarActividad(correo, telefono);">
                            @csrf
                            <label for="text-nombre-ac" class="form-label">Nombre de la actividad</label>
                            <input type="text" class="form-control" id="text-nombre-ac" name="text-nombre-ac"
                                placeholder="Nombre de la actividad" required>
                            <div class="mb-3">
                                <label for="text-descripcion-ac" class="form-label">Descripción:</label>
                                <textarea name="text-descripcion-ac" id="text-descripcion-ac" cols="20" rows="3"
                                    class="form-control"placeholder="Agrega una desscripcion del contenido" required></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="form-link-ac" class="form-label">Imagen de la actividad (1440 x 420)</label>
                                <input class="form-control" type="text" id="form-link-ac" name="form-link-ac"
                                    placeholder="Agruegue el link de la imagen" required>
                            </div>
                            <script>
                                function extractDriveId(url) {
                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                    const match = url.match(regex);
                                    return match ? match[1] : null;
                                }
                                // Evento para capturar el valor y modificar el campo de entrada
                                document.getElementById("form-link-ac").addEventListener("blur", function() {
                                    const urlInput = this.value; // Obtener el valor actual del input
                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                    if (driveId) {
                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                    }
                                });
                            </script>
                            <div class="mb-3">
                                <label for="text-nombrer-ac" class="form-label">Nombre del responsable:</label>
                                <input type="text" class="form-control" id="text-nombrer-ac"
                                    name="text-nombrer-ac" placeholder="Nombre del responsable" required>
                            </div>
                            <div class="mb-3">
                                <label for="text-dir-ac" class="form-label">Dirección:</label>
                                <input type="text" class="form-control" id="text-dir-ac" name="text-dir-ac"
                                    placeholder="Dirección" required>
                            </div>
                            <div class="mb-3">
                                <label for="text-email-ac" class="form-label">Correo:</label>
                                <input class="form-control" type="text" id="text-email-ac" name="text-email-ac"
                                    placeholder="Ingrese el Correo" required>
                            </div>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const inputCorreo = document.querySelector('#text-email-ac');

                                    inputCorreo.addEventListener('blur', function() {
                                        const regex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
                                        if (!regex.test(inputCorreo.value)) {
                                            alert('Error: no es un correo valido');
                                        }
                                    });
                                });
                            </script>
                            <div class="mb-3">
                                <label for="text-tel-ac" class="form-label">Teléfono:</label>
                                <input class="form-control" type="text" id="text-tel-ac" name="text-tel-ac"
                                    required placeholder="Teléfono" minlength="10">
                            </div>
                            <div class="mb-3">
                                <label for="select-cat-ac" class="form-label">Categoria:</label>
                                <select name="select-cat-ac" id="select-cat-ac" class="form-select">
                                    <option value="">Seleccione categoría</option>
                                    @foreach ($categoriaServicio as $tipo)
                                        <option value="{{ $tipo->CAT_ID }}">{{ $tipo->CAT_DESCRIPCION }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-bs-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--red-->
        <div class="modal fade" id="agregar-red" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                            <span class="fa-solid fa-add"></span>
                            Agregar Colaboradores
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <form class="px-4 py-3" action="{{ route('admincolaborador.add') }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <label for="text_nombre_colaborador" class="form-label">Nombre colaborador</label>
                            <input type="text" class="form-control" id="text_nombre_colaborador"
                                name="text_nombre_colaborador"
                                placeholder="Ingrese el Nombre del investigador, asociacion, especialista o grupo"
                                required>
                            <label for="select_tipo_col" class="form-label">Tipo de colaborador:</label>
                            <select name="select_tipo_col" id="select_tipo_col" class="form-select" required>
                                <option value="">Seleccione un tipo</option>
                                @foreach ($tipocolaborador as $tipo)
                                    <option value="{{ $tipo->TI_ID }}">{{ $tipo->TI_DESCRIPCION }}</option>
                                @endforeach
                            </select>
                            <div class="mb-3">
                                <label for="form_telefono_col" class="form-label">Teléfono</label>
                                <input class="form-control" type="text" id="form_telefono_col"
                                    name="form_telefono_col" required placeholder="Teléfono" minlength="10">
                            </div>
                            <div class="mb-3">
                                <label for="form_correo_col" class="form-label">Correo</label>
                                <input class="form-control" type="text" id="form_correo_col"
                                    name="form_correo_col" placeholder="Ingrese el Correo" required>
                            </div>
                            <div class="mb-3">
                                <label for="form_imagen_col" class="form-label">Imagen
                                    Colaborador (1440 x
                                    420)</label>
                                <input class="form-control" type="text" id="form_imagen_col"
                                    name="form_imagen_col" placeholder="Agruegue el link de la imagen" required>
                            </div>
                            <script>
                                function extractDriveId(url) {
                                    // Expresión regular para buscar el ID de la URL de Google Drive
                                    const regex = /https:\/\/drive\.google\.com\/file\/d\/([\w-]+)\/?.*/;
                                    const match = url.match(regex);
                                    return match ? match[1] : null;
                                }

                                // Evento para capturar el valor y modificar el campo de entrada
                                document.getElementById("form_imagen_col").addEventListener("blur", function() {
                                    const urlInput = this.value; // Obtener el valor actual del input
                                    const driveId = extractDriveId(urlInput); // Extraer el ID de la URL
                                    if (driveId) {
                                        this.value = driveId; // Asignar el ID extraído de vuelta al input
                                    }
                                });
                            </script>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                        </div>
                    </form>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const inputCorreo = document.querySelector('#form_correo_col');

                            inputCorreo.addEventListener('blur', function() {
                                const regex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
                                if (!regex.test(inputCorreo.value)) {
                                    alert('Error: no es un correo valido');
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!--Investigador-->
    <div class="modal fade" id="agregar-inv" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        <span class="fa-solid fa-add"></span>
                        Agregar Investigador
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form class="px-4 py-3" action="{{ route('admin.addInvestigador') }}" method="POST"
                        onsubmit="return validaContrasena();">
                        @csrf
                        <label for="text_nombre_inv" class="form-label">Nombre(s)</label>
                        <input type="text" class="form-control" id="text_nombre_inv" name="text_nombre_inv"
                            placeholder="Ingrese  Nombre(s)" required>
                        <label for="text_app_inv" class="form-label">Apellido Paterno</label>
                        <input type="text" class="form-control" id="text_app_inv" name="text_app_inv"
                            placeholder="Ingrese el Apellido paterno" required>
                        <label for="text_apm_inv" class="form-label">Apellido Materno</label>
                        <input type="text" class="form-control" id="text_apm_inv" name="text_apm_inv"
                            placeholder="Ingrese el Apellido materno" required>
                        <div class="mb-3">
                            <label for="text_correo" class="form-label">Correo</label>
                            <input type="text" class="form-control" id="text_correo" name="text_correo"
                                placeholder="Ingrese el Correo" required>
                        </div>
                        <!-- Script de JavaScript para validar el correo electrónico -->
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                const inputCorreo = document.querySelector('#text_correo');

                                inputCorreo.addEventListener('blur', function() {
                                    // Regex para validar el formato de un correo electrónico general
                                    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                                    if (!regex.test(inputCorreo.value)) {
                                        alert('Error: no es un correo electrónico válido');
                                    }
                                });
                            });
                        </script>
                        <div class="mb-3">
                            <label for="text_nombreusuario" class="form-label">Nombre de usuario</label>
                            <input type="text" class="form-control" id="text_nombreusuario"
                                name="text_nombreusuario" placeholder="Ingrese el nombre de usuario" required>
                        </div>
                        <div class="mb-3">
                            <label for="text_contra" class="form-label">Contraseña</label>
                            <input type="password" class="form-control" type="text" id="text_contra"
                                name="text_contra" placeholder="Ingrese su contraseña" required minlength="8">
                        </div>
                        <div class="mb-3">
                            <label for="text_contra2" class="form-label">Confirmar Contraseña</label>
                            <input type="password" class="form-control" type="text" id="text_contra2"
                                name="text_contra2" placeholder="Ingrese otra vez la contraseña" required
                                minlength="8">
                        </div>
                        <div class="alert alert-warning">
                            <ul>
                                <li>
                                    Al menos una letra mayúscula (A-Z).
                                </li>
                                <li>
                                    Al menos una letra minúscula (a-z).
                                </li>
                                <li>
                                    Al menos un dígito (0-9).
                                </li>
                                <li>
                                    Al menos un carácter especial (@$!%*?&).
                                </li>
                                <li>
                                    Longitud mínima de 8 caracteres.
                                </li>
                            </ul>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary">Guardar</button>
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                            const inputCorreo = document.querySelector('#form_correo_col');

                                            function validaContrasena() {
                                                var pass = document.getElementById('text_contra').value;
                                                var pass2 = document.getElementById('text_contra2').value;

                                                var nombre = document.getElementById('text_nombre_inv').value;
                                                var app = document.getElementById('text_app_inv').value;
                                                var apm = document.getElementById('text_apm_inv').value;

                                                if (!validateNombre(nombre, app, apm)) {
                                                    alert('Los nombres o apellidos no debe contener símbolos especiales');
                                                    return false;
                                                }

                                                if (pass !== pass2) {
                                                    alert('Las contraseñas no coinciden');
                                                    return false; // Detener el envío del formulario
                                                }

                                                if (!passwordValidate(pass)) {
                                                    alert('La contraseña no cumple con los requisitos');
                                                    return false; // Detener el envío del formulario
                                                }

                                                return true; // Continuar con el envío del formulario
                                            }

                                            function validaEdicion(id) {
                                                console.log(id)
                                                var pass = document.getElementById('text_contra_' + id).value;
                                                var pass2 = document.getElementById('text_contra2_' + id).value;

                                                var nombre = document.getElementById('text_nombre_inv_' + id).value;
                                                var app = document.getElementById('text_app_inv_' + id).value;
                                                var apm = document.getElementById('text_apm_inv_' + id).value;

                                                if (!validateNombre(nombre, app, apm)) {
                                                    alert('Los nombres o apellidos no debe contener símbolos especiales');
                                                    return false;
                                                }

                                                if (pass !== pass2) {
                                                    alert('Las contraseñas no coinciden');
                                                    return false; // Detener el envío del formulario
                                                }

                                                if (!passwordValidate(pass)) {
                                                    alert('La contraseña no cumple con los requisitos');
                                                    return false; // Detener el envío del formulario
                                                }

                                                return true; // Continuar con el envío del formulario
                                            }

                                            function confirmar(mensaje) {
                                                return window.confirm(mensaje);
                                            }

                                            function validateNombre(nombre, app, apm) {
                                                const expresion = /^[a-zA-ZáéíóúüÁÉÍÓÚÜñÑ\s]+$/;
                                                return expresion.test(nombre) && expresion.test(app) && expresion.test(apm);
                                            }
                            </script>

                        </div>
                    </form>

                </div>
            </div>
        </div>
        <!--Investigador-->
        <div class="modal fade" id="agregar-inv" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="staticBackdropLabel">
                            <span class="fa-solid fa-add"></span>
                            Agregar Investigador
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="px-4 py-3" action="{{ route('admin.addInvestigador') }}" method="POST"
                            onsubmit="return validaContrasena();">
                            @csrf
                            <label for="text_nombre_inv" class="form-label">Nombre(s)</label>
                            <input type="text" class="form-control" id="text_nombre_inv" name="text_nombre_inv"
                                placeholder="Ingrese  Nombre(s)" required>
                            <label for="text_app_inv" class="form-label">Apellido Paterno</label>
                            <input type="text" class="form-control" id="text_app_inv" name="text_app_inv"
                                placeholder="Ingrese el Apellido paterno" required>
                            <label for="text_apm_inv" class="form-label">Apellido Materno</label>
                            <input type="text" class="form-control" id="text_apm_inv" name="text_apm_inv"
                                placeholder="Ingrese el Apellido materno" required>
                            <div class="mb-3">
                                <label for="text_correo" class="form-label">Correo</label>
                                <input type="text" class="form-control" id="text_correo" name="text_correo"
                                    placeholder="Ingrese el Correo" required>
                            </div>
                            <!-- Script de JavaScript para validar el correo electrónico -->
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const inputCorreo = document.querySelector('#text_correo');

                                    inputCorreo.addEventListener('blur', function() {
                                        const regex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/;
                                        if (!regex.test(inputCorreo.value)) {
                                            alert('Error: no es un correo del dominio itsoeh.edu.mx');
                                        }
                                    });
                                });
                            </script>
                            <div class="mb-3">
                                <label for="text_nombreusuario" class="form-label">Nombre de usuario</label>
                                <input type="text" class="form-control" id="text_nombreusuario"
                                    name="text_nombreusuario" placeholder="Ingrese el nombre de usuario" required>
                            </div>
                            <div class="mb-3">
                                <label for="text_contra" class="form-label">Contraseña</label>
                                <input type="password" class="form-control" type="text" id="text_contra"
                                    name="text_contra" placeholder="Ingrese su contraseña" required minlength="8">
                            </div>
                            <div class="mb-3">
                                <label for="text_contra2" class="form-label">Confirmar Contraseña</label>
                                <input type="password" class="form-control" type="text" id="text_contra2"
                                    name="text_contra2" placeholder="Ingrese otra vez la contraseña" required
                                    minlength="8">
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-bs-dismiss="modal">Cancelar</button>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                                <script>
                                    function passwordValidate(pass) {
                                        const expresion = /^(?=.*[A-Za-z])(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
                                        return expresion.test(pass);
                                    }

                                    function validaContrasena() {
                                        var pass = document.getElementById('text_contra').value;
                                        var pass2 = document.getElementById('text_contra2').value;

                                        var nombre = document.getElementById('text_nombre_inv').value;
                                        var app = document.getElementById('text_app_inv').value;
                                        var apm = document.getElementById('text_apm_inv').value;

                                        if (!validateNombre(nombre, app, apm)) {
                                            alert('Los nombres o apeliidos no debe contener símbolos especiales');
                                            return false;
                                        }

                                        if (pass !== pass2) {
                                            alert('Las contraseñas no coinciden');
                                            return false; // Detener el envío del formulario
                                        }

                                        if (!passwordValidate(pass)) {
                                            alert('La contraseña no cumple con los requisitos');
                                            return false; // Detener el envío del formulario
                                        }

                                        return true; // Continuar con el envío del formulario
                                    }

                                    function confirmar(mensaje) {
                                        return window.confirm(mensaje);
                                    }

                                    function validateNombre(nombre, app, apm) {
                                        const expresion = /^[a-zA-ZáéíóúüÁÉÍÓÚÜñÑ\s]+$/;
                                        return expresion.test(nombre) && expresion.test(app) && expresion.test(apm);
                                    }
                                </script>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('svg_footer')
    <div class="w-100"> <img src="../resources/svg/footer.svg"></div>
@endsection