@extends('template.auth.index')
@section('title', trans('auth.olvide_contra_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 method="post" action="{{ route('postResetPassword') }}">
            @csrf
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="password">{{  trans('auth.contra') }}</label>
                  <input type="password" name="password" class="form-control" id="password" autocomplete="off" placeholder="{{  trans('auth.contra') }}">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="repeat_password">{{  trans('auth.repetir_contra') }}</label>
                  <input type="password" name="repeat_password" class="form-control" id="repeat_password" autocomplete="off" placeholder="{{  trans('auth.repetir_contra') }}">
                </div>
              </div>
            </div>
            <input type="hidden" name="email" value="{{$userData->email}}">
            <input type="hidden" name="confirm_token" value="{{$userData->confirmToken}}">
            <br>
            <button type="submit" class="btn btn-light btn-block">{{  trans('auth.resta_contraseña') }}</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');
      }
    };
  </script>
@endsection