@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>

<form id="resetPasswordForm" action="{{ route('reset_password_store') }}" method="POST">
    @csrf

    <div class="row d-flex justify-content-center">
        <div class="col-lg-6">
            <div class="card">
                <h4 class="text-center">Reset Password</h4>

                <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"
                           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 d-block">{{ $message }}</div>
                @enderror

                <div class="input-group mt-3">
                    <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"
                           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 d-block">{{ $message }}</div>
                @enderror

                <div class="input-group mt-3">
                    <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"
                           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 d-block">{{ $message }}</div>
                @enderror

                <button type="submit" id="resetBtn" class="btn btn-primary w-100 mt-3">
                    Reset Password
                </button>

            </div>
        </div>
    </div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('resetPasswordForm');
    const btn = document.getElementById('resetBtn');

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

    document.querySelectorAll('.toggle-password').forEach(function(toggle){

        toggle.addEventListener('click', function(){

            const input = document.getElementById(this.dataset.target);

            if(input.type === 'password'){
                input.type = 'text';
                this.classList.replace('tabler-eye','tabler-eye-off');
            }else{
                input.type = 'password';
                this.classList.replace('tabler-eye-off','tabler-eye');
            }

        });

    });

});
</script>

@endsection