@extends('layouts.landing')

@section('title', 'Iniciar Sesión')
@section('content')
    <link rel="stylesheet" href="{{ asset('css/login.css') }}">

    <div class="content">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-md-5 logo-container">
                    <img src="{{ asset('/images/img_login.jpeg') }}" class="img-fluid" alt="Logo DH">
                </div>
                <div class="col-md-8 col-lg-7 col-xl-4 offset-xl-1">
                    <h3 class="text-center mb-4 text-primary">Iniciar sesión</h3>

                    <div class="card-body p-4">
                        <!-- Formulario de login -->
                        <form method="POST" action="{{ route('login.submit') }}">
                            <!-- Contenedor general con el mismo ancho -->
                            <div class="login-container">
                                <!-- Selección de tipo de usuario -->
                                <div class="user-type-container">
                                    {{-- <div class="d-flex justify-content-between w-100"> --}}
                                        <!-- Contenedor de selección de usuario -->
                                        {{-- <div class="user-type-container"> --}}
                                            <!-- Estudiante -->
                                            <input type="radio" class="btn-check" name="user_type" id="estudiante"
                                                value="estudiante" autocomplete="off" checked>
                                            <label class="user-type-btn mb-0" for="estudiante">Alumno</label>

                                            <!-- Docente -->
                                            <input type="radio" class="btn-check" name="user_type" id="docente"
                                                value="docente" autocomplete="off">
                                            <label class="user-type-btn mb-0" for="docente">Docente</label>

                                            <!-- Administrativo -->
                                            <input type="radio" class="btn-check" name="user_type" id="administrativo"
                                                value="administrativo" autocomplete="off">
                                            <label class="user-type-btn mb-0" for="administrativo">Admin</label>

                                            <!-- Auxiliar -->
                                            <input type="radio" class="btn-check" name="user_type" id="auxiliar"
                                                value="auxiliar" autocomplete="off">
                                            <label class="user-type-btn mb-0" for="auxiliar">Auxiliar</label>
                                            {{--
                                        </div> --}}
                                        {{--
                                    </div> --}}
                                </div>
                                <div class="credentials-container">
                                    @csrf

                                    <!-- Usuario -->
                                    <div class="mb-3">
                                        <label for="usuarios" class="form-label">Usuario</label>
                                        <input type="text" name="usuarios" id="usuarios" class="form-control"
                                            placeholder="Usuario" required>
                                    </div>

                                    <!-- Contraseña -->
                                    <div class="mb-3">
                                        <label for="password" class="form-label">Contraseña</label>
                                        <input type="password" name="password" id="password" class="form-control"
                                            placeholder="Contraseña" required>
                                    </div>

                                    <!-- Botón de ingreso -->
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary">Ingresar</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- componetes -->
    <x-alert-request :errors="$errors" />
    <!-- Script para desaparecer los errores después de 5 segundos -->
    <script>
        setTimeout(function () {
            let alertElement = document.querySelector('.alert');
            if (alertElement) {
                alertElement.classList.add('fade'); // La clase 'fade' de Bootstrap hará que la alerta se desvanezca
                alertElement.style.display = 'none'; // Se oculta después de 5 segundos
            }
        }, 5000); // 5000 ms = 5 segundos
    </script>
@endsection