@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>

        <form id="resetForm" action="{{ route('password.update') }}" method="POST" novalidate>
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <div class="mb-3">
                <label class="form-label" for="email">البريد الإلكتروني</label>
                <input id="email" name="email" type="email" class="form-control" required value="{{ $email ?? old('email') }}">
                <div class="invalid-feedback" data-field-error="email"></div>
            </div>
            <div class="mb-3">
                <label class="form-label" for="password">كلمة المرور الجديدة</label>
                <input id="password" name="password" type="password" class="form-control" required minlength="8">
                <div class="invalid-feedback" data-field-error="password"></div>
            </div>
            <div class="mb-3">
                <label class="form-label" for="password_confirmation">تأكيد كلمة المرور</label>
                <input id="password_confirmation" name="password_confirmation" type="password" class="form-control" required minlength="8">
            </div>
            <button type="submit" class="btn btn-primary w-100" id="resetSubmit">
                <span class="btn-label">حفظ كلمة المرور الجديدة</span>
                <span class="spinner-border spinner-border-sm d-none ms-2" role="status"></span>
            </button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $('#resetForm').on('submit', function (e) {
        e.preventDefault();
        const $form = $(this), $btn = $('#resetSubmit');
        $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: 'تم تحديث كلمة المرور.' })
                    .then(() => window.location.href = res.redirect);
            })
            .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