@extends('template.auth.index')
@section('title', trans('auth.inicio_sesion_title'))

@section('content')
  <div class="container-fluid">
    <div class="row align-items-center justify-content-md-center">
      <div class="col-md-4">
        <div class="content_login">
          <form id="formLogin" method="post" action="{{ route('loginPost') }}">
            @csrf
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="documento">{{  trans('auth.documento') }}</label>
                  <input type="text" name="documento" class="form-control" id="documento" autocomplete="off" placeholder="{{  trans('auth.documento') }}" value="{{Request::get('documento') == null ? old('documento') : Request::get('documento')}}">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="password">{{  trans('auth.contra') }}</label>
                  <div class="input-group">
                    <input type="password" name="password" class="form-control" id="password" placeholder="{{  trans('auth.contra') }}" value="{{Request::get('password') == null ? old('password') : Request::get('password')}}">
                    <div class="input-group-append">
                      <button class="btn btn-light" id="btnShowPassword" onclick="showOrHidePassword()" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 text-center">
                <a href="{{route('getForgotPassword')}}" class="btnForgotPassword"><i class="fa fa-lock"></i>{{  trans('auth.olvide_contra') }}</a>
              </div>
            </div>
            <br>
            <button type="submit" class="btn btn-light btn-block">{{  trans('auth.iniciar_sesion') }}</button>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
  <script type="text/javascript">
    const showOrHidePassword = () => {
      const password = document.getElementById('password');
      if (password.type === 'password') {
        password.type = 'text';
        $("#btnShowPassword i").removeClass('fa fa-eye-slash');
        $("#btnShowPassword i").addClass('fa fa-eye');
      } else {
        password.type = 'password';
        $("#btnShowPassword i").removeClass('fa fa-eye');
        $("#btnShowPassword i").addClass('fa fa-eye-slash');
      }
    };

    $(document).ready(function() {
      var document = "{!!Request::get('documento')!!}"
      var password = "{!!Request::get('password')!!}"
      if(document != "" && password != ""){
        $("#formLogin").submit()
      }
    });
  </script>
@endsection