@extends('layouts.pruebaplantilla')
@section('titulo', 'HABITAT')
<!--Barra de navegacion para habitat-->
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between align-items-center w-100">
            <div class="d-flex justify-content-evenly align-items-center">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="https://i.postimg.cc/x19ch1vw/logo.png" alt="logo-CEI" width="50" height="50"
                            class="bg-light rounded rounded-pill">
                    </a>
                </span>
                <a href="{{ route('habitat.index') }}" class="nav-link">
                    HÁBITAT
                </a>
            
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('calendario') }}" class="nav-link">CALENDARIO</a>
                </li>
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('contacto') }}" class="nav-link">CONTÁCTANOS</a>
                </li>
            </div>
            <div class="dropdown nav-item">
                <li class="nav-item mx-3 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="Spanish" 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="English" 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="Hñähñu" width="30">
                        <a class="dropdown-item fs-6 h6" href="{{ route('contacto') }}">HÑÄHÑU</a>
                    </li>
                </ul>
            </div>
            <div class="dropdown nav-item d-flex align-items-center">
                @if (Auth::check())
                    <button class="border-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
                    </div>
                @else
                    <li class="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 input-user" 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 input-user" 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">Recuérdame</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? Regístrate aquí.</a>
                        <a class="dropdown-item" href="{{ route('join.recovery') }}">¿Olvidaste la Contraseña?</a>
                    </div>
                @endif
            </div>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbar" 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="CONACYT" width="80" id="conacyt-logo">
        </div>
        <div>
            <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="TecNM" width="80" id="tecnm-logo">
        </div>
    </div>
@endsection
<!--Contenido-->
@section('contenido')
    <div id="carrusel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://images.adsttc.com/media/images/6123/ba45/f91c/811c/7f00/00c8/newsletter/_MG_1288.jpg?1629731389"
                    class="d-block w-100" alt="img" height="500">
            </div>
            <div class="carousel-item">
                <img src="https://i0.wp.com/coolhuntermx.com/wp-content/uploads/2021/11/Cooluntermx_Produccion_social_del_habitat_Vivienda_Rural_03.jpeg?ssl=1"
                    class="d-block w-100" alt="img" height="500">
            </div>
            <div class="carousel-item">
                <img src="https://zonamexico.com.mx/wp-content/uploads/2023/04/Hidalgo-y-sus-paisajes-miticos-1024x576.jpg"
                    class="d-block w-100" alt="img" height="500">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <h4 class="text-center">HÁBITAT Y VIVIENDA TRADICIONAL</h4>
    <!--Links de habitat-->
    <section>
        <div class="row d-flex justify-content-center align-items-center m-1">
            <!--Redirige a patrimonio natural-->
            <div class="col-sm-3">
                <a href="{{ route('habitat.contenido') }}">
                    <div class="card text-bg-dark">
                        <img src="https://ruizhealytimes.com/wp-content/uploads/2022/04/Aplicaciones-gratuitas-para-creadores-de-contenido.jpg"
                            class="card-img" alt="...">
                        <div class="card-img-overlay">
                            <h5 class="card-title h6 text-center text-dark">CONTENIDO</h5>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-3 mt-1">
                <!--Redirige a cartografia interactiva-->
                <a href="{{ route('habitat.cartografia') }}">
                    <div class="card text-bg-dark">
                        <img src="https://images.unsplash.com/photo-1589170003204-fc2934fc91c7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGNhcnRvZ3JhZmlhfGVufDB8fDB8fHww"
                            class="card-img" alt="...">
                        <div class="card-img-overlay">
                            <h5 class="card-title h6 text-center text-dark">CARTOGRAFÍA INTERACTIVA</h5>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-3 mt-1">
                <!--Redirige a actividades de incidencia-->
                <a href="{{ route('habitat.servicio') }}">
                    <div class="card text-bg-dark">
                        <img src="https://images.unsplash.com/photo-1596066190600-3af9aadaaea1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGFjdGl2aWRhZCUyMGRlJTIwaW5jaWRlbmNpYXxlbnwwfHwwfHx8MA%3D%3D"
                            class="card-img" alt="...">
                        <div class="card-img-overlay">
                            <h5 class="card-title h6 text-center text-dark">ACTIVIDADES DE INCIDENCIA</h5>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-3 mt-1">
                <!--Redirige a red de colaboración -->
                <a href="{{ route('habitat.colaborador') }}">
                    <div class="card text-bg-dark">
                        <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cmVkJTIwZGUlMjBjb2xhYm9yYWNpb258ZW58MHx8MHx8fDA%3D"
                            class="card-img" alt="...">
                        <div class="card-img-overlay">
                            <h5 class="card-title h6 text-center text-dark">RED DE COLABORACIÓN</h5 style>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>
@endsection