@php

    $carpeta = Str::slug(config('app.name'), '');

@endphp

@extends('coopdigital::diseños.cabecera')

{{-- Título --}}
@section('tituloCabecera', 'Inicio de Sesión')

{{-- Estilos --}}
@section('cssCabecera')

    <!-- CSS -->
    <link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/css/vista/inicioSesion.css') }}">

@endsection

{{-- Contenido --}}
@section('contenidoCabecera')

    {{-- Cuerpo --}}

    <body>

        {{-- Contenedor --}}
        <div id="contenedor">

            {{-- Fila contenedor --}}
            <div class="row h-100">

                {{-- Contenedor izquierdo --}}
                <div class="col-lg-5 col-12">

                    {{-- Contenedor --}}
                    <div id="contenedorIzquierdo">

                        {{-- Logo --}}
                        <div class="logotipo">
                            <a tabindex="-1"><img src="https://www.daite.com.do/archivos/imagenes/{{ $carpeta }}/logotipo.png" alt="{{ config('app.name') }}"></a>
                        </div>

                        {{-- Título --}}
                        <h1 class="titulo">Inicio de Sesión</h1>
                        {{-- <p class="auth-subtitle mb-5">Log in with your data that you entered during registration.</p> --}}

                        {{-- Formulario --}}
                        <form action="{{ route('iniciarSesion') }}" method="POST" id="formulario">

                            {{-- Mensaje de validación sobre el inicio de sesión fallido --}}
                            <div class="alert alert-danger" @if (Session::get('fail')) style="display: block" @endif>{{ Session::get('fail') }}</div>

                            {{-- Clave única de verificación para el formulario --}}
                            @csrf

                            {{-- Campo usuario --}}
                            <label class="form-group position-relative has-icon-left">
                                <input type="text" class="form-control form-control-xl" placeholder="Usuario" id="usuario"
                                    name="usuario" value="{{ old('usuario') }}" tabindex="1">
                                <div class="form-control-icon">
                                    <i class="bi bi-person"></i>
                                </div>
                            </label>

                            {{-- Mensaje de validación para el campo usuario --}}
                            {{-- <label class="text-danger" id="etiquetaValidacionUsuario"></label> --}}

                            {{-- Campo contraseña --}}
                            <label class="form-group position-relative has-icon-left">
                                <input type="password" class="form-control form-control-xl" placeholder="Contraseña"
                                    id="contrasena" name="contrasena" value="{{ old('contrasena') }}" tabindex="2">
                                <div class="form-control-icon">
                                    <i class="bi bi-shield-lock"></i>
                                </div>
                            </label>

                            {{-- Mensaje de validación para el campo contraseña --}}
                            {{-- <label class="text-danger" id="etiquetaValidacionContrasena"></label> --}}

                            {{-- Casilla mantener inicio de sesión --}}
                            <div class="form-check form-check-lg d-flex align-items-center">
                                <input class="form-check-input me-2" type="checkbox" value="" id="flexCheckDefault"
                                    name="mantenerInicioSesion">
                                <label class="form-check-label text-gray-600" for="flexCheckDefault">
                                    Mantener Inicio de Sesión
                                </label>
                            </div>

                            {{-- Botón iniciar sesión --}}
                            <button class="btn btn-primary btn-block btn-lg" id="botonIniciarSesion">Iniciar Sesión</button>

                            <hr class="form-group">

                            <div class="form-group d-flex justify-content-between">

                                <div class="col-auto d-none">
                                    <a class="btn btn-primary" href="{{ route('afiliar') }}">Afiliarse</a>
                                </div>

                                <div class="col-auto">
                                    <a class="btn btn-primary" href="{{ route('registroSesion') }}">Obtener Acceso</a>
                                </div>

                                <div class="col-auto">
                                    <a class="btn btn-primary" href="{{ route('recuperacionContrasena') }}">Recu. Contraseña</a>
                                </div>

                            </div>

                        </form>

                    </div>
                </div>

                {{-- Contenedor derecho --}}
                <div class="col-lg-7 d-none d-lg-block">

                    {{-- Contenido --}}
                    <div id="contenedorDerecho"></div>

                </div>

            </div>

        </div>

        <!-- jQuery v3.6.0 -->
        <script src="{{ asset('vendor/daite/coopdigital/src/public/librerias/jquery/3.6.0/jquery.min.js') }}"></script>

        <script src="{{ asset('vendor/daite/coopdigital/src/public/js/vista/inicioSesion.js') }}"></script>

    </body>

@endsection
