@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="#">
                    @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="password"
                                placeholder="Current Password" aria-describedby="password" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </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="password"
                                placeholder="New Password" aria-describedby="password" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </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="password"
                                placeholder="Confirm Password" aria-describedby="password" required>
                            <span class="input-group-text cursor-pointer">
                                <i class="icon-base ti tabler-eye-off"></i>
                            </span>

                        </div>

                    </div>



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

            </div>


        </div>
    </div>

@endsection