@extends('auth.contenido')

@section('login')
    @php
    $equivalencias = new App\Helpers\Equivalencias();
    @endphp
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper">
            <div class="content-wrapper d-flex align-items-center auth auth-img-bg">
                <div class="row flex-grow">
                    <div class="auth-form-transparent text-left p-3" style="background-color:#0E6237 !important"
                        id="login_cont">
                        <div class="brand-logo text-center">
                            <img src="{{ $equivalencias::urlProduccion() }}images/sw-trazabilidad/logo-white.png"
                                alt="logo" style="height: 30% !important">
                        </div>
                        @if (session('error'))
                            <div class="text-center">
                                <div class="alert alert-danger" role="alert" style="color: #b52c2c;
                                                                background-color: #c1a8a8;
                                                                border-color: #b52c2c;">
                                    <p class="mb-0">{!! session()->get('error') !!}</p>
                                </div>
                            </div>
                        @endif
                        @if (session('error_token'))
                            <div class="text-center">
                                <div class="alert alert-danger" role="alert" style="color: #b52c2c;
                                                      background-color: #c1a8a8;
                                                      border-color: #b52c2c;">
                                    <p class=" mb-0">{!! session()->get('error_token') !!}</p>
                                </div>
                            </div>
                        @endif
                        @if (session('ingreso_incorrecto'))
                            <div class="text-center">
                                <div class="alert alert-danger" role="alert" style="color: #b52c2c;
                                                                background-color: #c1a8a8;
                                                                border-color: #b52c2c;">
                                    <p class="mb-0">{!! session()->get('ingreso_incorrecto') !!}</p>
                                </div>
                            </div>
                        @endif
                        @if (isset($_GET['token']))
                            <div class="text-center">
                                <div class="alert alert-danger" role="alert" style="color: #b52c2c;
                                                                background-color: #c1a8a8;
                                                                border-color: #b52c2c;">
                                    <p class="mb-0">Error en el token de seguridad para Acceder</p>
                                </div>
                            </div>
                        @endif
                        @if (session('sesion_finalizada'))
                            <div class="text-center">
                                <div class="alert alert-info" role="alert" style="color: #01468d;
                                                                background-color: #c5e2ff;
                                                                border-color: #01468d;">
                                    <p class="mb-0">{!! session()->get('sesion_finalizada') !!}</p>
                                </div>
                            </div>
                        @endif
                        <form class="pt-2" method="POST" action="{{ route('login') }}"
                            style="padding: 0px 20px;">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <div class="input-group{{ $errors->has('usuario' ? 'is-invalid' : '') }}">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text border-right-4" style="background-color: #7EB18E">
                                            <i class="fa fa-user-circle fa-2x" style="color:#ffffff" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <input type="text" class="input-group-text form-control"
                                        style="background-color: #7EB18E; color: white !important" autocomplete="off"
                                        id="usuario" name="usuario" value="{{ old('usuario') }}" required autofocus
                                        placeholder="Usuario / Correo Electrónico">
                                    {!! $errors->first('usuario', '<span class="invalid-feedback">:message</span>') !!}
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('password' ? 'is-invalid' : '') }}"
                                onclick="cambiarIcono()">
                                <div class="input-group">
                                    <div class="input-group-prepend bg-transparent">
                                        <span class="input-group-text border-right-0" style="background-color: #7EB18E">
                                            <i id="candado" class="fa fa-lock fa-2x" style="color:#ffffff"
                                                aria-hidden="true"></i>
                                            <i id="ojoText" class="fa fa-eye fa-2x" style="color:#ffffff" aria-hidden="true"
                                                hidden onclick="mostrarContrasena()"></i>
                                            <i id="ojoPass" class="fa fa-eye-slash fa-2x" style="color:#ffffff"
                                                aria-hidden="true" hidden onclick="mostrarContrasena()"></i>
                                        </span>
                                    </div>

                                    <input type="password" class="input-group-text form-control"
                                        style="background-color: #7EB18E; color: white !important" id="password"
                                        name="password" required autocomplete="off" placeholder="Contraseña">


                                    {!! $errors->first('password', '<span class="invalid-feedback">:message</span>') !!}
                                </div>
                            </div>
                            <div class="my-3">
                                <button type="submit" class="btn btn-info btn-md btn-block"
                                    id="btn_ingresar">Ingresar</button>
                            </div>
                            @if (session('exito'))
                                <div class="alert alert-success" role="alert">
                                    <p class="mb-0">Se ha cambiado la contraseña con exito.</p>
                                </div>
                            @endif
                            <div class="text-center mt-4 font-weight-light">
                                <a class="text-info" style="color: #ffffff !important;"
                                    href="{{ route('recovery') }}">Recuperar Contraseña</a>
                            </div>
                            <br>
                            {{-- <div class="text-center">
                <div class="alert alert-info" role="alert">
                  <p class="mb-0">
                    Consulta Ciudadana de información <a href="{{$equivalencias::urlFondo()}}informes/cne#/">Aqui</a>
                   <!--  <button class="btn btn-info btn-sm">Consultar</button> -->
                  </p>
                </div>
              </div> --}}
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
    </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        function cambiarIcono() {
            document.getElementById("candado").setAttribute("hidden", "");
            document.getElementById("ojoText").removeAttribute("hidden", "");
        }

        function mostrarContrasena() {
            var tipo = document.getElementById("password");
            if (tipo.type == "password") {
                tipo.type = "text";
                document.getElementById("ojoPass").removeAttribute("hidden", "");
                document.getElementById("ojoText").style.display = 'none';
            } else {
                tipo.type = "password";
                document.getElementById("ojoPass").setAttribute("hidden", "");
                document.getElementById("ojoText").style.display = 'block';
            }
        }

        toastr.options = {
            closeButton: true,
            progressBar: true,
            positionClass: "toast-top-center",
            timeOut: 3000
        };

        // Escuchar cambios de estado de CapsLock
        document.addEventListener('keydown', function(event) {
            if (event.code === 'CapsLock') {
                if (event.getModifierState('CapsLock')) {
                    toastr.warning('Mayúsculas activadas', '¡Atención!');
                }
            }
        });


    </script>
@endsection