@extends('layouts.app')

@section('content')
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-5">
                    <h5 class="mb-4 fw-semibold text-primary">
                        <i class="fas fa-lock me-2"></i>
                        {{ __('Change Password') }}
                    </h5>

                    <form method="POST" action="{{ route('admin.profile.update-password') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-medium small">{{ __('Current Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="current_password" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('current_password')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('New Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="password" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('password')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-medium small">{{ __('Confirm Password') }}</label>
                                <div class="position-relative">
                                    <input type="password" class="form-control form-control-sm pe-5 togglePassword"
                                        name="password_confirmation" placeholder="********">
                                    <i class="fas fa-eye-slash position-absolute top-50 end-0 translate-middle-y me-3 text-muted togglePassword"
                                        style="cursor: pointer;"></i>
                                </div>
                                @error('password_confirmation')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="mt-4 pt-3 d-flex justify-content-between align-items-center">
                            <p class="text-muted small mb-0">
                                <i class="fas fa-info-circle me-1"></i>
                                {{ __('Use a strong password with at least 8 characters.') }}
                            </p>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="fas fa-save me-2"></i>{{ __('Update Password') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.querySelectorAll('.position-relative').forEach(wrapper => {
                const input = wrapper.querySelector('input');
                const icon = wrapper.querySelector('i');

                icon.addEventListener('click', () => {
                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            });
        </script>
    @endpush
@endsection