@extends('layouts.auth')

<title>Reset Password</title>
<meta charset="UTF-8">
<meta name="description" content="Login">
<meta name="keywords" content="login, sign">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

@section('content')
<div id="wrapper" class="login">
        <header class="header">
            <div class="container">
                <div class="row ">
                    <div class="col-12 d-flex align-items-center justify-content-between">
                        <a href="#" title=""><img src="{{ asset('images/logo-werehouse.png') }}" alt="" width="141" height="141"></a>
                       
                    </div>
                    
                   
                </div>
            </div>
        </header>
        <section class="login-section">
            <div class="container">
                <div class="row justify-content-center ">
                    <div class="col-12 col-lg-4 col-md-6 text-center">
                        <h1 class="h1">Reset Password</h1>
                        <form  class="login-form my-5" method="POST" action="{{ URL::to('/reset-new-password') }}">
                        @csrf
                        <input type="hidden" name="userId" value="{{$userId}}"/>
                            <div class="alert alert-danger password_error hide_me"></div>
                            <div class="input-group">
                                 <input type="password" name="password" placeholder="Password" class="password" minlength="5" required >
                                <label for="input">Password</label>
                            </div>
                           
                            <div class="input-group">
                                <input type="password" name="conf_password" placeholder="Password" class="conf_password" minlength="5" required >
                                <label for="input">Confirm Password</label>
                            </div>
                            
                                
                            
                            <div class="input-group submit">
                                <button id="reset_password_button" type="submit" class="btn btn-block ">Reset</button>
                            </div>  
                        <div class="form-footer">
                            
                        </form>
                          
                        </div>
                    
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection

@section("style")
<style>
.hide_me{
    display:none;
}
</style>
@endsection

@section('scripts')
<script>
  /*  const togglePassword = document.querySelector('#togglePassword');
    const passwordInput = document.querySelector('input[name="password"]');

    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.classList.toggle('fa-eye-slash');
        this.classList.toggle('fa-eye');
    });
    */

   $("#reset_password_button").click(function(){
      var password =  $(".password").val();
      var conf_password =  $(".conf_password").val();
      if(password != "" && conf_password != ""){
        if(password != conf_password){
            $(".password_error").text("Password not matched").removeClass("hide_me");
            return false;
        }
        
      }
      
   })
</script>
@endsection