@extends('admin.layout')
@section('title', 'Reset Password')
@section('header')
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="">
                <h3 class="page-top-heading">Reset Password</h3>
            </div>
        </div>
        <div class="row d-flex justify-content-center mt-4">
            <div class="col-lg-7">
                <div class="card basic-card">
                    <div class="p-3 card-header mb-2">
                        <h4 class="card-title">Change Password</h4>
                    </div>
                    <div class="card-body pt-0">
                        <form action="{{ route('reset_password') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group mb-3">
                                        <label for="current-password" class="form-label">Current Password</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="current-password" name="current_pwd" placeholder="Enter Current Password" required>
                                            <span class="input-group-text toggle-password" data-target="#current-password" style="cursor: pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="col-lg-12">
                                    <div class="form-group mb-3">
                                        <label for="new-password" class="form-label">New Password</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="new-password" name="new_pwd" placeholder="Enter New Password" required>
                                            <span class="input-group-text toggle-password" data-target="#new-password" style="cursor: pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="col-lg-12">
                                    <div class="form-group mb-3">
                                        <label for="confirm-new-password" class="form-label">Confirm New Password</label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" id="confirm-new-password" name="new_pwd_confirmation" placeholder="Re-enter New Password" required>
                                            <span class="input-group-text toggle-password" data-target="#confirm-new-password" style="cursor: pointer;">
                                                <i class="fa fa-eye"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                        
                                <div class="col-lg-12">
                                    <button type="submit" class="btn btn-primary full-width-btn">Reset Password</button>
                                </div>
                            </div>
                        </form>
                        
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        document.querySelectorAll('.toggle-password').forEach(span => {
            span.addEventListener('click', () => {
                const target = document.querySelector(span.dataset.target);
                const type = target.getAttribute('type') === 'password' ? 'text' : 'password';
                target.setAttribute('type', type);
                span.innerHTML = type === 'password' ?
                    '<i class="fa fa-eye"></i>' :
                    '<i class="fa fa-eye-slash"></i>';
            });
        });
    </script>
@endsection
@section('footer')
@endsection