@extends('layouts.app')

@section('extend_head')
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<link href="{{ asset('css/login.css?v2') }}" rel="stylesheet">
<title>V2M | Inicio de sesión</title>
@endsection


@section('content')
    <header>
        <div class="contenedor-logos">
            <div class="logos">
                <div class="logo-quik">
                    <img src="img/logo-quik.png" alt="Logo de Quik S.A.S.">
                </div>

                <div class="logo-v2m">
                    <img src="img/v2m.jpg" alt="Logo de V2M">
                </div>
                <h2>Verification and Validation Method</h2>
            </div>
            <nav>
                <a href="https://quik.com.co/contacto/" rel="noopener" target="_blank">Contáctenos</a>
            </nav>    
        </div>
    </header>

    <main>
        <div class="cont-fondo">
            <div class="cont-fondo-interno cont-fondo-1"></div>
        </div>

        <div class="cont-form">

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div class="form-group">
                    <label for="nom_usuario" class="py-3 col-form-label font-weight-bold text-md-right">{{ __('Nombre de usuario') }}</label>

                    <div class="">
                        <input id="nom_usuario" type="nom_usuario" class="form-control @error('nom_usuario') is-invalid @enderror" name="nom_usuario" placeholder='ej: pedro.perez' value="{{ old('nom_usuario') }}" required autocomplete="nom_usuario" autofocus>

                        @error('nom_usuario')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="py-3 col-form-label font-weight-bold text-md-right">{{ __('Contraseña') }}</label>

                    <div class="">
                        <div style="position: relative;">
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder='******' required autocomplete="current-password">

                        <button class="btn showPassword" type="button" id="togglePassword">
                            <i class="fas fa-eye"></i>
                        </button>
                        </div>
                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="form-group">
                    <div class="form-group form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" checked>
                        <label class="form-check-label" for="remember">
                            {{ __('Mantener sesión iniciada') }}
                        </label>
                    </div>
                </div>

                <div class="form-group mb-0">
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">
                            {{ __('Iniciar sesión') }}
                        </button>
                    </div>
                </div>
                
            </form>

        </div>
    </main>

    <footer>
        <p>Copyright &copy; <a href="https://www.quik.com.co" rel="noopener" target="_blank">Quik S.A.S </a> 2020 - {{ date("Y") }}</p>
    </footer>
@endsection

<script>
    window.onload = function() {
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#password');

        togglePassword.addEventListener('click', function (e) {
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            this.querySelector('i').classList.toggle('fa-eye-slash');
        });
    }
</script>