@extends('User.layout')

@section('content')

<style>
    .page-title{
        font-weight:700;
        color:var(--bs-body-color);
        letter-spacing:.3px;
    }

    .password-card{
        border:1px solid rgba(255,255,255,.08);
        border-radius:20px;
        background:var(--bs-body-bg);
        box-shadow:0 14px 32px rgba(0,0,0,.08);
        overflow:hidden;

    }

    .card-header-custom{
        background:linear-gradient(135deg,#0d6efd,#4f8cff);
        color:#fff;
        padding:18px 22px;
        font-size:18px;
        font-weight:700;
    }

    .card-body-custom{
        padding:28px;
    }

    .input-group-text{
        background:transparent;
        border:1px solid rgba(128,128,128,.25);
        color:var(--bs-body-color);
    }

    .input-group .form-control{
        border:1px solid rgba(128,128,128,.25);
        background:var(--bs-body-bg);
        color:var(--bs-body-color);

    }



    .input-group-text:last-child{
        cursor:pointer;
    }

    .input-group{
        border-radius:12px;
        overflow:hidden;
    }

    .submit-btn{
        border-radius:12px;
        padding:12px;
        font-weight:600;
        font-size:15px;
        transition:.3s ease;
    }

    .submit-btn:hover{
        transform:scale(1.02);
    }

    .password-note{
        font-size:13px;
        opacity:.75;
        margin-top:-4px;
        margin-bottom:14px;
    }
</style>

<div class="container-fluid">

    <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6">

            <h4 class="page-title mb-4">Reset Password</h4>

            <div class="password-card">

                <div class="card-header-custom">
                    <i class="ti tabler-lock-password me-2"></i>
                    Security Settings
                </div>

                <div class="card-body-custom">

                    <form method="POST" action="#" id="resetPasswordForm">
                        @csrf

                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="ti tabler-lock"></i>
                                </span>
                                <input type="password" class="form-control password-field"
                                    placeholder="Current Password" name="current_password">
                                <span class="input-group-text toggle-password">
                                    <i class="ti tabler-eye-off"></i>
                                </span>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="ti tabler-lock"></i>
                                </span>
                                <input type="password" class="form-control password-field"
                                    placeholder="New Password" name="new_password">
                                <span class="input-group-text toggle-password">
                                    <i class="ti tabler-eye-off"></i>
                                </span>
                            </div>
                        </div>

                        <div class="password-note">
                            Use a strong password with letters, numbers & symbols.
                        </div>

                        <div class="mb-4">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="ti tabler-lock-check"></i>
                                </span>
                                <input type="password" class="form-control password-field"
                                    placeholder="Confirm Password" name="confirm_password">
                                <span class="input-group-text toggle-password">
                                    <i class="ti tabler-eye-off"></i>
                                </span>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 submit-btn">
                            <i class="ti tabler-refresh me-1"></i> Reset Password
                        </button>

                    </form>

                </div>

            </div>

        </div>
    </div>

</div>

<script>
    document.querySelectorAll('.toggle-password').forEach(function(toggle){
        toggle.addEventListener('click', function(){
            let input = this.parentElement.querySelector('.password-field');
            let icon = this.querySelector('i');

            if(input.type === 'password'){
                input.type = 'text';
                icon.classList.remove('tabler-eye-off');
                icon.classList.add('tabler-eye');
            }else{
                input.type = 'password';
                icon.classList.remove('tabler-eye');
                icon.classList.add('tabler-eye-off');
            }
        });
    });
</script>

@endsection