@extends('Admin.layout')

@section('content')
<style>
  /* Center the card */
  .card {
    /* width: 400px; */
    margin: 80px auto;
    padding: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    text-align: center;
  }

  input.form-control {
    border-radius: 5px !important;
    border: 1px solid #33B02C1A;
  }

  .eye-icon {
    pointer-events: auto !important;
  }

  /* Input group styling */
  .input-group {
    position: relative;
    width: 100%;
  }

  .input-group input {
    width: 100%;
    padding: 12px 45px;
    /* space for icons */
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  /* Lock icon (left) */
  .input-group .lock-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 18px;
  }



  /* Eye icon (right) */
  .input-group .eye-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
  }

  /* Extra padding for gap after lock icon */
  input#conpass,
  #oldpass,
  #newpass {
    padding-left: 40px;
  }
</style>

<h4>Reset Password</h4>
<form id="resetPasswordForm" method="POST" action="{{ route('reset_password_form') }}" class="mb-6 mt-3 fv-plugins-bootstrap5 fv-plugins-framework">
  @csrf
  <div class="row d-flex justify-content-center">
    <div class="col-lg-6">
      <div class="card">
        <div class="input-group">
          <span class="lock-icon menu-icon icon-base ti tabler-lock"></span>
          <input type="password" class="form-control @error('oldpassword') is-invalid @enderror" id="oldpass" name="oldpassword" value="{{old('oldpassword')}}" placeholder="Current Password">
          <span class="eye-icon menu-icon icon-base ti tabler-eye toggle-password" data-target="oldpass"></span>
        </div>
        @error('oldpassword')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror

        <div class="input-group mt-6">
          <span class="lock-icon menu-icon icon-base ti tabler-lock"></span>
          <input type="password" class="form-control @error('newpassword') is-invalid @enderror" id="newpass" name="newpassword" value="{{old('newpassword')}}" placeholder="New Password">
          <span class="eye-icon menu-icon icon-base ti tabler-eye toggle-password" data-target="newpass"></span>

        </div>
        @error('newpassword')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <div class="input-group mt-6">
          <span class="lock-icon menu-icon icon-base ti tabler-lock"></span>
          <input type="password" class="form-control @error('confirmpassword') is-invalid @enderror" id="conpass" name="confirmpassword" value="{{old('confirmpassword')}}"  placeholder="Confirm Password">
          <span class="eye-icon menu-icon icon-base ti tabler-eye toggle-password" data-target="conpass"></span>

        </div>
        @error('confirmpassword')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <button type="button" id="resetBtn" class="btn btn-primary d-grid w-100 waves-effect waves-light mt-6">Reset Password</button>
      </div>
    </div>
  </div>
</form>
<script>
  document.addEventListener('DOMContentLoaded', function() {

    // Submit button lock
    const form = document.getElementById('resetPasswordForm');
    const btn = document.getElementById('resetBtn');

    btn.addEventListener('click', function() {
      btn.disabled = true;
      btn.innerText = 'Processing...';
      form.submit();
    });

    // Password toggle (robust version)
    document.addEventListener('click', function(e) {

      const toggle = e.target.closest('.toggle-password');
      if (!toggle) return;

      const inputId = toggle.getAttribute('data-target');
      const input = document.getElementById(inputId);
      if (!input) return;

      if (input.type === 'password') {
        input.type = 'text';
        toggle.classList.remove('tabler-eye');
        toggle.classList.add('tabler-eye-off');
      } else {
        input.type = 'password';
        toggle.classList.remove('tabler-eye-off');
        toggle.classList.add('tabler-eye');
      }
    });

  });
</script>


@endsection