@extends('layouts.auth')

@section('content')
<style type="text/css">
    .toggle-password {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
</style>
    @if(session('error'))
        <div class="alert alert-error">
            {{ session('error') }}
        </div>
    @endif
    <h5>Add Password</h5>

    <form  action="{{ route('password.set') }}" method="post">
     @csrf
      <div class="form-group has-feedback">
        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('eml', $user_email['email']) }}" readonly>

      </div>
      <div class="form-group has-feedback">
        <input id="password" type="password"  placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" required>

        <span class="input-group-text toggle-password" onclick="togglePasswordVisibility('password')">
            <i class="fa fa-eye-slash" aria-hidden="true"></i>
        </span>
        @error('password')
                <strong>{{ $message }}</strong>
            </span>
        @enderror
      </div>

      <div class="form-group has-feedback">
        <input id="cn_password" type="password"  placeholder="Confirm Password" class="form-control" name="confirm_password" required>

        <span class="input-group-text toggle-password" onclick="togglePasswordVisibility('cn_password')">
            <i class="fa fa-eye-slash" aria-hidden="true"></i>
        </span>
        @error('confirm_password')
                <strong>{{ $message }}</strong>
            </span>
        @enderror
      </div>
      <input id="reg" type="hidden" name="reg" value={{ $reg_no }}>
      <div class="row">

        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat">Add</button>
        </div>
      </div>
    </form>


     @endsection

     <script>
         function togglePasswordVisibility(passwordFieldId) {
                 var passwordInput = document.getElementById(passwordFieldId);
                 var passwordToggle = passwordInput.parentElement.querySelector('.toggle-password');

                 if (passwordInput.type === 'password') {
                     passwordInput.type = 'text';
                     passwordToggle.innerHTML = '<i class="fa fa-eye" aria-hidden="true"></i>';
                 } else {
                     passwordInput.type = 'password';
                     passwordToggle.innerHTML = '<i class="fa fa-eye-slash" aria-hidden="true"></i>';
                 }
             }
     </script>