@extends('layouts.pruebaplantilla')

<!--Se agrega por variación de rutas-->
<!--Seccion de titulo-->
@section('titulo' . 'CONTACTO')
    <!--Seccion de barra-->
@section('barra')
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav d-flex justify-content-between align-item-center w-100">
            <div class="d-flex justify-conten-evenly align-items-center">
                <span class="h2">
                    <a href="{{ route('home') }}" class="navbar-brand">
                        <img src="https://i.postimg.cc/x19ch1vw/logo.png" alt="logo-CEI" width="50" height="50"
                            class="bg-light roundend rounded-pill">
                    </a>
                </span>
                <a href="{{ route('habitat.index') }}" class="nav-link">
                    HÁBITAT
                </a>
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('calendario') }}" class="nav-link">CALENDARIO</a>
                </li>
            </div>
            <div class="d-flex align-items-center">
                <li class="nav-item mx-3">
                    <a href="{{ route('contacto') }}" class="nav-link">CONTÁCTANOS</a>
                </li>
            </div>
            <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   d-flex align-items-center">
                @if (Auth::check())
                    <button class="border border-0 fs-6 h6 btn btn-primary" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        {{ Auth::user()->US_NOMBRE }}
                    </button>
                    <div class="dropdown-menu mt-2">
                        <a class="dropdown-item " href="{{ route('myprofile') }}">Mi perfil</a>
                        <a class="dropdown-item " href="{{ route('join.logout') }}">Cerrar
                            sesión</a>
                        @if (Auth::user()->US_ROL == 'INVESTIGADOR')
                            <a class="dropdown-item " href="{{ route('Admin.index') }}">Administración</a>
                        @endif
                    @else
                        <li class="border border-0 nav-item mx-3 nav-link" type="button" data-bs-toggle="dropdown"
                            aria-expanded="false">INICIA SESIÓN</li>
                        <div class="dropdown-menu mt-2">
                            <form class="px-4 py-3" action="{{ route('join.login') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label for="text_user" class="form-label">Correo electrónico</label>
                                    <input type="email" class="form-control  form-control-sm" id="text_user"
                                        name="text_user" placeholder="Ingrese aquí" required>
                                </div>
                                <div class="mb-3">
                                    <label for="login_password" class="form-label">Contraseña</label>
                                    <input type="password" class="form-control form-control-sm" id="login_password"
                                        name="login_password" placeholder="Contraseña" required>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="remember" name="remember">
                                        <label class="form-check-label" for="remember">
                                            Recuerdame
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">INICIAR SESIÓN</button>
                            </form>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('join.index') }}">
                                ¿Eres nuevo? Registrate aquí.
                            </a>
                            <a class="dropdown-item " href="{{ route('join.recovery') }}">¿Olvidaste la
                                Contraseña?
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa-solid fa-bars"></span>
    </button>
    <!--Contenedor de logos-->
    <div class="d-flex justify-content-end align-items-center w-80">
        <div>
            <img src="https://i.postimg.cc/QNR74DnD/conacyt.png" alt="" width="80" id="conacyt-logo">
        </div>
        <div>
            <img src="https://i.postimg.cc/zGNgNjrP/TecNM.png" alt="" width="80" id="tecnm-logo">
        </div>
        <div>

        </div>
    </div>
@endsection
<!--Contenido de la pagina-->
@section('contenido')
    <!---Imagen de encabezado-->
    <div class="header-img">
        <img src="../resources/images/wallhaven-95r8p8.jpg" alt="" class="img-fluid">
    </div>
    @if (session()->has('success'))
        <div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    @elseif (session()->has('error'))
        <div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive"
            aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('error') }}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    @endif
    <section class="container">
        <div class="w-100 d-flex justify-content-center">
            <form action="{{ route('contactar') }}" method="POST" class="my-5">
                @csrf
                <div class="row my-5">
                    <div class="col d-flex align-items-center justify-content-between">
                        <input type="radio" name="asunto" id="asunto-queja" class="form-check-input me-3"
                            value="queja" required>
                        <label for="asunto-queja">Queja</label>
                    </div>
                    <div class="col d-flex align-items-center justify-content-between">
                        <input type="radio" name="asunto" id="asunto-sugerencia" class="form-check-input me-3"
                            value="sugerencia" required>
                        <label for="asunto-sugerencia">Sugerencia</label>
                    </div>
                    <div class="col d-flex align-items-center justify-content-between">
                        <input type="radio" name="asunto" id="asunto-comentario" class="form-check-input me-3"
                            value="comentario" required>
                        <label for="asunto-comentario">Comentario</label>
                    </div>
                    <div class="col d-flex align-items-center justify-content-between">
                        <input type="radio" name="asunto" id="asunto-duda" class="form-check-input me-3"
                            value="duda" required>
                        <label for="asunto-duda">Duda</label>
                    </div>
                    <div class="col d-flex align-items-center justify-content-between">
                        <input type="radio" name="asunto" id="asunto-contribucion" class="form-check-input me-3"
                            value="contribucion" required>
                        <label for="asunto-contribucion">Contribución</label>
                    </div>
                </div>

                <div>
                    <label for="emailcontactanos" class="form-label">Correo electrónico:</label>
                    <input type="email" name="correo" class="form-control mb-3" id="emailcontactanos" required>
                    <div id="emailmessage" class="form-text mb-3">No compartiremos tu correo con nadie.</div>
                </div>
                <div class="form-floating">
                    <textarea class="form-control" name="mensaje" placeholder="Leave a comment here" id="floatingTextarea"
                        style="height: 200px;" required></textarea>
                    <label for="floatingTextarea">Mensaje</label>
                </div>
                <button class="btn btn-primary mt-5 w-100" type="submit">Enviar</button>
            </form>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        import Swal from 'sweetalert2'
        const Swal = require('sweetalert2')
    </script>

    @if (session('success'))
        <script>
            Swal.fire({
                title: "Correo enviado",
                text: "Se envio el correo exitosamente",
                icon: "success"
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: "Oops...",
                text: "¡Ha ocurrido un problema!",
                icon: "error"
            });
        </script>
    @endif
@endsection