@extends('user.layouts.app')

@section('title', 'إعادة تعيين كلمة المرور')

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-key width="24" height="24" />
            <div class="page-header--title">
                <h1>إعادة تعيين كلمة المرور</h1>
            </div>
        </div>

        <div class="container" style="max-width: 480px;">
            <div class="form-container">
                <div class="form-header">
                    <h2>كلمة مرور جديدة</h2>
                    <p style="color: var(--color-gray-500); margin: 0;">أدخل كلمة المرور الجديدة الخاصة بك</p>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger"
                        style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem;">
                        <ul style="list-style: none; padding: 0; margin: 0;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if (session('status'))
                    <div class="alert alert-success"
                        style="background: rgba(25, 135, 84, 0.1); border: 1px solid rgba(25, 135, 84, 0.3); color: #198754; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                        {{ session('status') }}
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger"
                        style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem;">
                        {{ session('error') }}
                    </div>
                @endif

                <form action="{{ route('password.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">

                    <div class="input-group">
                        <label for="email">البريد الإلكتروني</label>
                        <div class="input-wrapper" style="background: var(--color-gray-200); cursor: not-allowed;">
                            <input type="email" id="email" name="email" value="{{ $email }}" readonly
                                style="cursor: not-allowed;">
                        </div>
                    </div>

                    <div class="input-group">
                        <label for="password">كلمة المرور الجديدة</label>
                        <div class="input-wrapper">
                            <input type="password" id="password" name="password" placeholder="أدخل كلمة المرور الجديدة"
                                required autocomplete="new-password" minlength="8">
                        </div>
                        @error('password')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="input-group">
                        <label for="password_confirmation">تأكيد كلمة المرور</label>
                        <div class="input-wrapper">
                            <input type="password" id="password_confirmation" name="password_confirmation"
                                placeholder="أعد إدخال كلمة المرور" required autocomplete="new-password" minlength="8">
                        </div>
                        @error('password_confirmation')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="submit-btn">
                        <x-lucide-key class="me-2" width="18" height="18" />
                        إعادة تعيين كلمة المرور
                    </button>
                </form>

                <div style="text-align: center; margin-top: 1rem;">
                    <a href="{{ route('login') }}" style="color: var(--color-primary-500);">
                        <x-lucide-arrow-right class="me-1" width="14" height="14" />
                        العودة إلى تسجيل الدخول
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.getElementById('password_confirmation').addEventListener('input', function() {
            const password = document.getElementById('password').value;
            const passwordConfirmation = this.value;

            if (password !== passwordConfirmation) {
                this.setCustomValidity('كلمات المرور غير متطابقة');
            } else {
                this.setCustomValidity('');
            }
        });

        document.getElementById('password').addEventListener('input', function() {
            const passwordConfirmation = document.getElementById('password_confirmation').value;
            const password = this.value;

            if (passwordConfirmation && password !== passwordConfirmation) {
                document.getElementById('password_confirmation').setCustomValidity('كلمات المرور غير متطابقة');
            } else {
                document.getElementById('password_confirmation').setCustomValidity('');
            }
        });
    </script>
@endsection