@extends('user.layout.master')
@section('title', 'Update Password')
<style>
    .input-field {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;  /* custom border */
    border-radius: 8px;
    padding: 5px 10px;
    background: #fff; /* keep bg clean */
}
.input-field input {
    border: none; /* remove border */
    outline: none; /* remove outline */
    background: transparent; /* transparent bg */
    flex: 1; /* fill available space */
    padding: 8px 10px; /* spacing */
}

</style>
@section('content')

<div class="update-password-section-container">
    <div class="update-password-section-header">
        <a href="{{ route('user.dashboard') }}" class="back-arrow">
            <div class="arrow-icon"></div>
        </a>
        <div class="update-password-section-title">Update Password</div>
    </div>

    <div class="form-container">
        <form method="POST" action="{{ route('password.update') }}">
            @csrf
            @method('put')

            <div class="form-fields">

                <!-- Current Password -->
                <div class="input-group">
                    <div class="input-inner">
                        <label for="current-password">Current Password</label>
                        <div class="input-field">
                            <div class="input-left">
                                <span class="lock-icon"><i class="bi bi-lock"></i></span>
                                <input type="password"
                                       id="current-password"
                                       name="current_password"
                                       placeholder="*******************"
                                       class="@error('current_password', 'updatePassword') is-invalid @enderror"
                                       required>
                            </div>
                            <div class="input-right">
                                <span class="eye-icon"><i class="far fa-eye-slash"></i></span>
                            </div>
                        </div>
                        @error('current_password', 'updatePassword')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- New Password -->
                <div class="input-group-new">
                    <div class="input-inner">
                        <label for="new-password">New Password</label>
                        <div class="input-field">
                            <div class="input-left">
                                <span class="lock-icon"><i class="bi bi-lock"></i></span>
                                <input type="password"
                                       id="new-password"
                                       name="password"
                                       placeholder="*******************"
                                       class="@error('password', 'updatePassword') is-invalid @enderror"
                                       required>
                            </div>
                            <div class="input-right">
                                <span class="eye-icon"><i class="far fa-eye-slash"></i></span>
                            </div>
                        </div>
                        <div class="password-requirement">
                            <p>Password must be at least 8 characters long</p>
                        </div>
                        @error('password', 'updatePassword')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Confirm Password -->
                <div class="input-group">
                    <div class="input-inner">
                        <label for="confirm-password">Confirm Password</label>
                        <div class="input-field">
                            <div class="input-left">
                                <span class="lock-icon"><i class="bi bi-lock"></i></span>
                                <input type="password"
                                       id="confirm-password"
                                       name="password_confirmation"
                                       placeholder="*******************"
                                       required>
                            </div>
                            <div class="input-right">
                                <span class="eye-icon"><i class="far fa-eye-slash"></i></span>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="update-button">Update</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.eye-icon').forEach(icon => {
        icon.addEventListener('click', function () {
            const input = this.closest('.input-field').querySelector('input');
            const eye = this.querySelector('i');

            if (input.type === "password") {
                input.type = "text";
                eye.classList.remove("fa-eye-slash");
                eye.classList.add("fa-eye");
            } else {
                input.type = "password";
                eye.classList.remove("fa-eye");
                eye.classList.add("fa-eye-slash");
            }
        });
    });
});
</script>
@endsection