@extends('web.layouts.app')

@section('title', __('التحقق من الرمز'))
@section('page_heading', __('التحقق من الرمز'))

@section('content')
    <div class="content">
        <div class="register-page">
            <div class="register-overlay"></div>
            <div class="row align-items-center">
                <div class="form-container">
                    <div class="form-card">
                        <div class="form-box-title">أدخل رمز OTP</div>

                        {{-- عرض إخفاء جزئي من الهاتف أو البريد --}}
                        @if (session('verification_type') == 'phone' && session('otp_phone'))
                            <p class="form-box-text">
                                تم إرسال الكود إلى هاتف ينتهي بـ
                                <span>{{ session('otp_phone') }}</span>
                            </p>
                        @elseif(session('verification_type') == 'email' && session('otp_email'))
                            <p class="form-box-text">
                                تم إرسال الكود إلى البريد الإلكتروني
                                <span>{{ session('otp_email') }}</span>
                            </p>
                        @endif

                        <form method="POST" action="{{ route('register.verify') }}" class="form" id="otp-form">
                            @csrf

                            {{-- حقول الإدخال الخمسة --}}
                            <div class="otp-input-fields">
                                <input type="number" class="otp__digit otp__field__1" maxlength="1" autofocus>
                                <input type="number" class="otp__digit otp__field__2" maxlength="1">
                                <input type="number" class="otp__digit otp__field__3" maxlength="1">
                                <input type="number" class="otp__digit otp__field__4" maxlength="1">
                                <input type="number" class="otp__digit otp__field__5" maxlength="1">
                            </div>

                            {{-- سنضيف حقل مخفي سيضم القيمة المجمعة من الحقول الخمسة --}}
                            <input type="hidden" name="code" id="code-input">

                            @error('code')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror

                            <button type="submit" class="create-account-btn">تأكيد الكود</button>
                        </form>

                        <span class="login-link">
                            <a href="#" id="resend-otp">إعادة ارسال الكود</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            // تركيز أول خانة بمجرد تحميل الصفحة
            $('.otp__field__1').focus();

            // انتقال تلقائي بين الحقول عند الكتابة
            $('.otp__digit').keyup(function(e) {
                if (this.value.length == $(this).attr('maxlength')) {
                    $(this).next('.otp__digit').focus();
                }
            });

            // تراجع تلقائي للخانة السابقة عند مسح القيمة
            $('.otp__digit').keydown(function(e) {
                if (e.key === "Backspace" && this.value.length === 0) {
                    $(this).prev('.otp__digit').focus();
                }
            });

            // عند الضغط على زر إرسال النموذج، نجمع الأرقام الخمسة في حقل مخفي واحد
            $('#otp-form').on('submit', function(e) {
                let codeValue = '';
                $('.otp__digit').each(function() {
                    codeValue += $(this).val();
                });
                $('#code-input').val(codeValue);
            });

            // زر إعادة إرسال الكود
            $('#resend-otp').click(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('register.resend') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('تم إعادة إرسال رمز التحقق');
                            // إعادة تفريغ الحقول
                            $('.otp__digit').val('');
                            $('.otp__field__1').focus();
                        } else {
                            alert('حدث خطأ أثناء إعادة إرسال رمز التحقق');
                        }
                    },
                    error: function() {
                        alert('حدث خطأ أثناء إعادة إرسال رمز التحقق');
                    }
                });
            });
        });
    </script>
@endsection