@extends('auth.base')

@section('title') San Patricio | Restablecer clave @endsection

@section('menu_title') SISTEMA<br>DE ALTAS @endsection

@section('menu_descripcion') 
    Coloca tu nueva clave, recorda que no puede tener<br> menos de 8 caracteres.
@endsection

@section('content')

    <script>    

        function check_password() {
            $iClave = $('#iClave').val();
            $passwordAlert = $('#passwordAlert');
            
            if($iClave.length < 8) {
                $passwordAlert.html('<strong>La clave debe contener al menos 8 caracteres.</strong>')
                $passwordAlert.show();
            } else {
                $passwordAlert.hide();
            }
        }

        function check_password_repeat() {
            $iClave = $('#iClave').val();
            $iClaveConfirmation = $('#iClaveConfirmation').val();
            $passwordRepeatAlert = $('#passwordRepeatAlert');

            if($iClaveConfirmation != $iClave) {
                $('#iClaveConfirmation').css('border', '1px solid red');
                $passwordRepeatAlert.html('<strong>Las claves no coinciden.</strong>')
                $passwordRepeatAlert.show();
            } else if ($iClave == ''){
                $passwordRepeatAlert.hide();
            } else {
                $('#iClaveConfirmation').css('border', '1px solid #00B99F');
                $passwordRepeatAlert.hide();
            }
        }

    </script>

    <form class="white_container" action="{{ route('password.update') }}" method="POST">

        <div class="form-group col-12">
            <input type="text" name="email" id="iUsuario" class="form-control @error('email') is-invalid @enderror" placeholder="email@email.com" value="{{ $email ?? old('email') }}" autocomplete="username" readonly required>
            @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="form-group col-12">
            <input type="password" name="password" id="iClave" class="form-control @error('password') is-invalid @enderror" placeholder="clave"  onkeyup="check_password()" autocomplete="password" required>
            <span class="invalid-feedback" id="passwordAlert" role="alert" style="display: none">
                    
                </span>
            @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="form-group col-12">
            <input type="password" name="password_confirmation" id="iClaveConfirmation" class="form-control" placeholder="repetir clave" onkeyup="check_password_repeat()" onfocusout="check_password()" autocomplete="new-password" required>
                <span class="invalid-feedback" id="passwordRepeatAlert" role="alert" style="display: none">
                    
                </span>
        </div>



        <input type="hidden" name="token" value="{{ $token }}">
        @csrf
        <button name="submit" id="bSubmit" class="button_submit">RESTABLECER CLAVE</button>
    </form>
    <div class="boton_container">
        <a href="/" id="bAtras" class="boton_atras">Volver al login</a>
    </div>
    
@endsection