@extends('layouts.admin')

@section('title', __('Account security'))
@section('content')
    <x-admin.page-header
        :title="__('Account security')"
        :description="app()->isLocale('ar') ? 'إدارة كلمة المرور والتحقق الإضافي للوصول المتميز.' : 'Manage your password and the additional verification required for privileged access.'"
        :eyebrow="app()->isLocale('ar') ? 'الحساب' : 'Account'"
    />

    <div class="stack">
        <section class="security-panel stack" style="background: rgba(18, 18, 22, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);">
            <div style="border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 0.75rem; margin-bottom: 1rem;">
                <h2 style="font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0;">{{ __('Change password') }}</h2>
                <p class="muted" style="margin-top: 0.25rem; font-size: 0.85rem;">{{ app()->isLocale('ar') ? 'استخدم 6 أحرف على الأقل تحتوي على أحرف كبيرة وصغيرة وأرقام ورموز.' : 'Use at least 6 characters with upper and lowercase letters, a number, and a symbol.' }}</p>
            </div>

            <form method="POST" action="{{ route('user-password.update') }}" class="form-stack" style="gap: 1.25rem;">
                @csrf
                @method('PUT')
                <div class="field">
                    <label for="current_password" style="font-weight: 600;">{{ __('Current password') }}</label>
                    <input id="current_password" name="current_password" type="password" autocomplete="current-password" required style="width: 100%;">
                    @error('current_password', 'updatePassword') <span class="field-error" role="alert">{{ $message }}</span> @enderror
                </div>
                <div class="field">
                    <label for="new_password" style="font-weight: 600;">{{ __('New password') }}</label>
                    <input id="new_password" name="password" type="password" autocomplete="new-password" required style="width: 100%;">
                    @error('password', 'updatePassword') <span class="field-error" role="alert">{{ $message }}</span> @enderror
                </div>
                <div class="field">
                    <label for="new_password_confirmation" style="font-weight: 600;">{{ __('Confirm new password') }}</label>
                    <input id="new_password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required style="width: 100%;">
                </div>

                {{-- Action Buttons Row: Compact, Same Height, Side by Side on the same line --}}
                <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 1.25rem;">
                    <button class="button button-primary" type="submit" style="display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 1.25rem; font-size: 0.9rem; font-weight: 700; width: auto; white-space: nowrap; margin: 0;">
                        {{ __('Change password') }}
                    </button>

                    @can(\App\Modules\AccessControl\Domain\PermissionName::DashboardView->value)
                        <a class="button button-secondary" href="{{ route('admin.dashboard') }}" style="display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 1.25rem; font-size: 0.9rem; font-weight: 600; width: auto; white-space: nowrap; text-decoration: none; margin: 0;">
                            {{ __('Continue to administration') }}
                        </a>
                    @endcan

                    <button class="button button-secondary" type="submit" form="logout-form" style="display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 1.25rem; font-size: 0.9rem; font-weight: 600; width: auto; white-space: nowrap; margin: 0; background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25);">
                        {{ __('Sign out') }}
                    </button>
                </div>
            </form>

            <form id="logout-form" method="POST" action="{{ route('logout') }}" style="display: none;">
                @csrf
            </form>
        </section>
    </div>
@endsection