@extends('layouts.auth')

@section('title', 'استعادة كلمة المرور')
@section('subtitle', 'أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين')

@section('content')
<div class="card card-md">
    <div class="card-body">
        <h2 class="h3 text-center mb-3">استعادة كلمة المرور</h2>

        @if(session('status'))
            <div class="alert alert-success" role="alert">{{ session('status') }}</div>
        @endif

        <form id="forgotForm" action="{{ route('password.email') }}" method="POST" novalidate>
            @csrf
            <div class="mb-3">
                <label class="form-label" for="email">البريد الإلكتروني</label>
                <input id="email" name="email" type="email" class="form-control" required autofocus value="{{ old('email') }}">
                <div class="invalid-feedback" data-field-error="email"></div>
            </div>
            <button type="submit" class="btn btn-primary w-100" id="forgotSubmit">
                <span class="btn-label">إرسال رابط الاستعادة</span>
                <span class="spinner-border spinner-border-sm d-none ms-2" role="status"></span>
            </button>
        </form>

        <div class="text-center mt-3">
            <a href="{{ route('login') }}">العودة إلى تسجيل الدخول</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $('#forgotForm').on('submit', function (e) {
        e.preventDefault();
        const $form = $(this), $btn = $('#forgotSubmit');
        $form.find('[data-field-error]').text('');
        $form.find('.is-invalid').removeClass('is-invalid');
        $btn.prop('disabled', true).find('.spinner-border').removeClass('d-none');

        $.post($form.attr('action'), $form.serialize())
            .done(res => {
                Swal.fire({ icon: 'success', title: 'تم الإرسال', text: res.message || 'تم إرسال رابط إعادة تعيين كلمة المرور.' });
                $form[0].reset();
                $btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
            })
            .fail(xhr => {
                $btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    Object.entries(xhr.responseJSON.errors).forEach(([field, msgs]) => {
                        $form.find(`[name="${field}"]`).addClass('is-invalid');
                        $form.find(`[data-field-error="${field}"]`).text(msgs[0]);
                    });
                } else {
                    Swal.fire({ icon: 'error', title: 'خطأ', text: xhr.responseJSON?.message || 'حدث خطأ.' });
                }
            });
    });
</script>
@endpush