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

<div class="row justify-content-center">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <form id="resetPasswordForm" method="POST" action="{{ route('reset_password_form') }}">
                    @csrf
                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="password" class="form-control p-3" name="oldpassword"
                                placeholder="Current Password" aria-describedby="password" value="{{ old('oldpassword') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>
                        @error('oldpassword')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="password" class="form-control p-3" name="newpassword"
                                placeholder="New Password" aria-describedby="password" value="{{ old('newpassword') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>
                        @error('newpassword')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="mb-6 form-password-toggle fv-plugins-icon-container">
                        <div class="input-group input-group-merge has-validation">
                            <span class="input-group-text">
                                <span class="lock-icon menu-icon icon-base ti tabler-lock me-2"></span>
                            </span>

                            <input type="password" id="password" class="form-control p-3" name="confirmpassword"
                                placeholder="Confirm Password" aria-describedby="password" value="{{ old('confirmpassword') }}" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>
                        @error('confirmpassword')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>



                    <button type="submit" id="submit_btn"
                        class="btn btn-primary d-grid w-100 waves-effect waves-light mt-6">Reset Password</button>
                </form>
            </div>

        </div>


    </div>
</div>
<script>
    document.getElementById('submit_btn').addEventListener('click', function () {
      let btn = this;
      btn.disabled = true;
      btn.innerText = 'Processing...';
      document.getElementById('resetPasswordForm').submit();
    });
</script>
@endsection