@extends('layouts.app')

@section('title', 'ربط الفواتير الإلكترونية - ZATCA')

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4 md:px-8">
        <div class="max-w-3xl mx-auto">
            <!-- شريط مؤشر البيئة الديناميكي -->
            <div id="env-indicator-card"
                class="mb-6 p-5 rounded-lg shadow-md border-l-4 transition-all duration-300 bg-gradient-to-r from-blue-50 to-blue-100 border-blue-600">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0" id="env-icon-container">
                        <i class="fas fa-flask text-4xl text-blue-600"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-lg font-bold text-blue-900" id="env-title">
                            🔍 البيئة المختارة (Development)
                        </h4>
                        <div id="env-badge"
                            class="mt-2 mb-2 inline-block px-4 py-2 rounded-lg font-bold text-white bg-blue-600">
                            ✅ بيئة الاختبار (Developer Portal)
                        </div>
                        <p class="text-sm text-blue-800" id="env-description">
                            ✓ هذه بيئة آمنة تماماً للتطوير والاختبار، لا يتم إرسال بيانات حقيقية للزكاة.
                        </p>
                    </div>
                </div>
            </div>

            <!-- رأس الصفحة -->
            <div class="mb-10 text-center">
                <div class="flex justify-center mb-4">
                    <div class="bg-gradient-to-br from-blue-600 to-blue-700 text-white p-4 rounded-full">
                        <i class="fas fa-link text-3xl"></i>
                    </div>
                </div>
                <h1 class="text-4xl font-bold text-black mb-3">ربط الفواتير الإلكترونية</h1>
                <p class="text-black text-lg">اربط نظامك مع هيئة الزكاة والدخل السعودية (ZATCA) في خطوات بسيطة</p>
            </div>

            <!-- شريط التقدم -->
            <div class="mb-10 bg-white rounded-2xl shadow-lg p-8 border border-gray-200">
                <h3 class="text-sm font-semibold text-black mb-6 uppercase tracking-wide">مراحل الربط</h3>
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <!-- المرحلة 1 -->
                    <div class="flex flex-col items-center w-full md:w-1/4">
                        <div
                            class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-green-600 text-white font-bold mb-2 shadow-md">
                            <i class="fas fa-check"></i>
                        </div>
                        <p class="text-sm font-medium text-black text-center">التحقق من البيانات</p>
                    </div>

                    <!-- الفاصل -->
                    <div class="hidden md:block w-12 border-t-2 border-gray-300"></div>

                    <!-- المرحلة 2 -->
                    <div class="flex flex-col items-center w-full md:w-1/4">
                        <div
                            class="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-white font-bold mb-2 shadow-md animate-pulse">
                            2
                        </div>
                        <p class="text-sm font-medium text-black text-center">إدخال كود الربط</p>
                    </div>

                    <!-- الفاصل -->
                    <div class="hidden md:block w-12 border-t-2 border-gray-300"></div>

                    <!-- المرحلة 3 -->
                    <div class="flex flex-col items-center w-full md:w-1/4">
                        <div
                            class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300 text-black font-bold mb-2 shadow-md">
                            3
                        </div>
                        <p class="text-sm font-medium text-black text-center">الربط</p>
                    </div>

                    <!-- الفاصل -->
                    <div class="hidden md:block w-12 border-t-2 border-gray-300"></div>

                    <!-- المرحلة 4 -->
                    <div class="flex flex-col items-center w-full md:w-1/4">
                        <div
                            class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300 text-black font-bold mb-2 shadow-md">
                            4
                        </div>
                        <p class="text-sm font-medium text-black text-center">اكتمال</p>
                    </div>
                </div>
            </div>

            <!-- الرسائل -->
            @if (session('success'))
                <div class="mb-6 bg-green-50 border-l-4 border-green-500 p-5 rounded-r-lg shadow-sm">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-500 text-2xl"></i>
                        </div>
                        <div class="mr-4">
                            <h3 class="font-semibold text-green-700">تم الربط بنجاح! ✅</h3>
                            <p class="text-green-600 text-sm mt-1">{{ session('success') }}</p>
                        </div>
                    </div>
                </div>
            @endif

            @if (session('error'))
                <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-5 rounded-r-lg shadow-sm">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-500 text-2xl"></i>
                        </div>
                        <div class="mr-4 w-full">
                            <h3 class="font-semibold text-red-700 flex items-center">
                                <i class="fas fa-times-circle ml-2"></i>
                                فشل التحقق من OTP ❌
                            </h3>
                            <p class="text-red-600 text-sm mt-1 font-medium">{{ session('error') }}</p>
                            
                            @if (session('error_details'))
                                <details class="mt-4 cursor-pointer group w-full">
                                    <summary class="text-red-700 font-bold underline hover:no-underline flex items-center cursor-pointer">
                                        <i class="fas fa-chevron-down group-open:rotate-180 ml-2 transition-transform"></i>
                                        📋 التفاصيل الكاملة من ZATCA + الحل المقترح
                                    </summary>
                                    <div class="mt-3 p-4 bg-red-100 rounded text-red-800 text-sm space-y-4 border border-red-300">
                                        <!-- 1. رسالة الخطأ الرئيسية -->
                                        <div class="bg-white p-3 rounded border border-red-200">
                                            <p class="font-bold mb-2 text-red-700">🔴 رسالة الخطأ:</p>
                                            <p class="text-black">{{ session('error') }}</p>
                                        </div>

                                        <!-- 2. البيانات المرسلة والرد من ZATCA -->
                                        <div class="bg-white p-3 rounded border border-red-200">
                                            <p class="font-bold mb-2 text-red-700">📤/📥 التفاصيل من ZATCA:</p>
                                            <div class="font-mono text-xs bg-red-50 p-3 rounded border border-red-300 overflow-x-auto whitespace-pre-wrap break-words max-h-96 overflow-y-auto text-black">
{{ session('error_details') }}
                                            </div>
                                        </div>

                                        <!-- 3. البيانات المحفوظة في النظام -->
                                        <div class="bg-white p-3 rounded border border-yellow-200">
                                            <p class="font-bold mb-2 text-yellow-700">🔍 البيانات المحفوظة في النظام:</p>
                                            <ul class="space-y-2 list-none">
                                                <li class="bg-gray-50 p-2 rounded">
                                                    <strong>الرقم الضريبي (VAT):</strong>
                                                    <code class="bg-yellow-50 px-2 py-1 rounded text-xs block mt-1 break-all">{{ Auth::user()->company->tax_number ?? '❌ لم يتم تعيينه' }}</code>
                                                </li>
                                                <li class="bg-gray-50 p-2 rounded">
                                                    <strong>السجل التجاري:</strong>
                                                    <code class="bg-yellow-50 px-2 py-1 rounded text-xs block mt-1 break-all">{{ Auth::user()->company->commercial_record ?? '❌ لم يتم تعيينه' }}</code>
                                                </li>
                                                <li class="bg-gray-50 p-2 rounded">
                                                    <strong>اسم الشركة:</strong>
                                                    <code class="bg-yellow-50 px-2 py-1 rounded text-xs block mt-1 break-all">{{ Auth::user()->company->name ?? '❌ لم يتم تعيينه' }}</code>
                                                </li>
                                            </ul>
                                        </div>

                                        <!-- 4. خطوات الحل -->
                                        <div class="bg-green-50 p-3 rounded border border-green-300">
                                            <p class="font-bold mb-3 text-green-700">✅ خطوات الحل:</p>
                                            <ol class="space-y-2 list-decimal list-inside text-black">
                                                <li>
                                                    <strong>تحقق من صحة بيانات الشركة:</strong> الرقم الضريبي والسجل التجاري واسم الشركة يجب أن يطابقوا تماماً ما هو مسجل في ZATCA
                                                </li>
                                                <li>
                                                    <strong>إذا كانت البيانات خاطئة:</strong> 
                                                    <a href="{{ route('companies.edit', Auth::user()->company->id) }}" class="text-blue-600 hover:text-blue-800 underline font-bold">عدّل البيانات من هنا</a>
                                                </li>
                                                <li>
                                                    <strong>تحقق من رمز OTP:</strong> يجب أن يكون 6 أرقام صحيحة ولم تنتهِ صلاحيته (ساعة واحدة فقط)
                                                </li>
                                                <li>
                                                    <strong>جرب طلب OTP جديد:</strong> قد يكون الرمز السابق قد انتهت صلاحيته
                                                </li>
                                                <li>
                                                    <strong>تأكد من الاتصال بالإنترنت:</strong> قد يكون هناك مشكلة في الاتصال مع ZATCA
                                                </li>
                                            </ol>
                                        </div>

                                        <!-- 5. معلومات إضافية للمطورين -->
                                        @if(config('app.debug'))
                                        <div class="bg-blue-50 p-3 rounded border border-blue-300">
                                            <p class="font-bold mb-2 text-blue-700">🔧 معلومات للمطورين (Debug Mode):</p>
                                            <p class="text-xs text-blue-800">يمكن العثور على المزيد من التفاصيل في السجل:</p>
                                            <code class="block text-xs bg-blue-100 p-2 rounded mt-2 break-all">storage/logs/laravel.log</code>
                                        </div>
                                        @endif
                                    </div>
                                </details>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            <!-- النموذج الرئيسي -->
            <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
                <form id="zatca-binding-form" method="POST" action="{{ route('zatca.simple-binding.store') }}"
                    class="p-8 md:p-10">
                    @csrf
                    <!-- قسم اختيار البيئة - مهم جداً -->
                    <div class="mb-10 pb-10 border-b border-gray-200">
                        <h2 class="text-xl font-bold text-black mb-6 flex items-center">
                            <i class="fas fa-server text-blue-600 ml-3"></i>
                            اختيار البيئة
                        </h2>
                        <p class="text-black mb-6">
                            ⚠️ <strong>مهم:</strong> اختر البيئة التي تريد الربط معها
                        </p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- خيار الاختبار -->
                            <label
                                class="flex items-center p-6 border-2 border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 hover:bg-blue-50">
                                <input type="radio" name="environment" value="developer-portal"
                                    {{ old('environment', 'developer-portal') === 'developer-portal' ? 'checked' : '' }} required
                                    style="width: 20px; height: 20px;">
                                <div class="ml-4">
                                    <h3 class="font-bold text-black">🔬 بيئة الاختبار (Developer Portal)</h3>
                                    <p class="text-sm text-black">Sandbox - آمنة للتطوير</p>
                                </div>
                            </label>

                            <!-- خيار المحاكاة -->
                            <label
                                class="flex items-center p-6 border-2 border-gray-300 rounded-lg cursor-pointer hover:border-yellow-500 hover:bg-yellow-50">
                                <input type="radio" name="environment" value="simulation"
                                    {{ old('environment') === 'simulation' ? 'checked' : '' }} required
                                    style="width: 20px; height: 20px;">
                                <div class="ml-4">
                                    <h3 class="font-bold text-black">🧪 بيئة المحاكاة (Simulation)</h3>
                                    <p class="text-sm text-black">Pre-production - اختبار قبل الإطلاق</p>
                                </div>
                            </label>

                            <!-- خيار الإنتاج -->
                            <label
                                class="flex items-center p-6 border-2 border-gray-300 rounded-lg cursor-pointer hover:border-red-500 hover:bg-red-50">
                                <input type="radio" name="environment" value="core"
                                    {{ old('environment') === 'core' ? 'checked' : '' }} required
                                    style="width: 20px; height: 20px;">
                                <div class="ml-4">
                                    <h3 class="font-bold text-black">⚠️ بيئة الإنتاج (Core)</h3>
                                    <p class="text-sm text-black">Production - النظام الفعلي والحقيقي</p>
                                </div>
                            </label>
                        </div>

                        @error('environment')
                            <div class="mt-4 p-4 bg-red-50 border border-red-300 rounded text-red-700 font-bold">
                                ❌ {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- قسم معلومات الشركة -->
                    <div class="mb-10 pb-10 border-b border-gray-200">
                        <h2 class="text-xl font-bold text-black mb-6 flex items-center">
                            <i class="fas fa-building text-blue-600 ml-3"></i>
                            معلومات الشركة
                        </h2>
                        <p class="text-black mb-6">البيانات التالية محفوظة بالفعل في النظام</p>

                        <div
                            class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6 p-6 bg-blue-50 rounded-lg border border-blue-200">
                            <!-- اسم الشركة -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">اسم الشركة</label>
                                <input type="text" value="{{ Auth::user()->company->name ?? 'غير محدد' }}" readonly
                                    class="w-full px-4 py-3 bg-gray-100 text-black rounded-lg border border-gray-300 cursor-not-allowed font-medium">
                            </div>

                            <!-- الرقم الضريبي -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">الرقم الضريبي (VAT ID)</label>
                                <input type="text" value="{{ Auth::user()->company->tax_number ?? 'غير محدد' }}" readonly
                                    class="w-full px-4 py-3 bg-gray-100 text-black rounded-lg border border-gray-300 cursor-not-allowed font-medium">
                            </div>

                            <!-- السجل التجاري (CRN) -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">رقم السجل التجاري (CRN)</label>
                                <input type="text" value="{{ Auth::user()->company->crn ?? Auth::user()->company->commercial_record ?? '❌ غير محدد' }}"
                                    readonly
                                    class="w-full px-4 py-3 bg-gray-100 text-black rounded-lg border border-gray-300 cursor-not-allowed font-medium">
                            </div>

                            <!-- الرقم التسلسلي للجهاز -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">الرقم التسلسلي (EGS Serial)</label>
                                <input type="text" value="{{ Auth::user()->company->serial_number ?? '❌ مفقود - يرجى تحديثه' }}"
                                    readonly
                                    class="w-full px-4 py-3 bg-gray-100 {{ empty(Auth::user()->company->serial_number) ? 'text-red-600 border-red-300' : 'text-black border-gray-300' }} rounded-lg border cursor-not-allowed font-medium">
                            </div>

                            <!-- الفئة التجارية -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">الفئة التجارية (Category)</label>
                                <input type="text" value="{{ Auth::user()->company->category ?? Auth::user()->company->business_category ?? '❌ مفقودة' }}"
                                    readonly
                                    class="w-full px-4 py-3 bg-gray-100 {{ empty(Auth::user()->company->category) && empty(Auth::user()->company->business_category) ? 'text-red-600 border-red-300' : 'text-black border-gray-300' }} rounded-lg border cursor-not-allowed font-medium">
                            </div>

                            <!-- الدولة -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">الدولة</label>
                                <input type="text" value="المملكة العربية السعودية (SA)" readonly
                                    class="w-full px-4 py-3 bg-gray-100 text-black rounded-lg border border-gray-300 cursor-not-allowed font-medium">
                            </div>

                            <!-- العنوان -->
                            <div class="md:col-span-2">
                                <label class="block text-sm font-semibold text-black mb-2">العنوان الكامل</label>
                                <textarea readonly
                                    class="w-full px-4 py-3 bg-gray-100 text-black rounded-lg border border-gray-300 cursor-not-allowed font-medium h-20">{{ Auth::user()->company->address ?? 'غير محدد' }}</textarea>
                            </div>
                        </div>

                        <!-- تنبيه النجاح -->
                        <div class="p-4 bg-green-50 border border-green-200 rounded-lg flex items-start">
                            <i class="fas fa-check-circle text-green-600 mt-1 ml-3 text-lg flex-shrink-0"></i>
                            <span class="text-green-700 font-medium">تم التحقق من جميع البيانات بنجاح ✓</span>
                        </div>
                    </div>

                    <!-- قسم إدخال كود الربط -->
                    <div class="mb-10">
                        <h2 class="text-xl font-bold text-black mb-6 flex items-center">
                            <i class="fas fa-key text-blue-600 ml-3"></i>
                            كود الربط
                        </h2>
                        <p class="text-black mb-6">
                            احصل على كود الربط من منصة <strong>فاتورة (Fatoora)</strong> بـ ZATCA مباشرة
                        </p>

                        <div class="space-y-6">
                            <!-- معلومات مهمة -->
                            <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <h4 class="font-semibold text-blue-900 mb-3">📌 كيفية الحصول على الكود:</h4>
                                <ol class="space-y-2 text-sm text-blue-800 list-decimal list-inside">
                                    <li><strong>اذهب إلى منصة فاتورة:</strong> <a href="https://fatoora.zatca.gov.sa"
                                            target="_blank"
                                            class="underline text-blue-600 hover:text-blue-800">https://fatoora.zatca.gov.sa</a>
                                    </li>
                                    <li><strong>سجل الدخول</strong> بحساب شركتك</li>
                                    <li><strong>اذهب إلى:</strong> الإعدادات &gt; الأجهزة &gt; جهاز جديد</li>
                                    <li><strong>سيظهر كود بـ 6 أرقام</strong> - انسخ هذا الكود</li>
                                    <li><strong>الصلاحية:</strong> الكود صالح لمدة <strong>ساعة واحدة فقط</strong></li>
                                </ol>
                            </div>

                            <!-- حقل الكود -->
                            <div>
                                <label for="otp" class="block text-sm font-semibold text-black mb-3">
                                    كود الربط (6 أرقام)
                                    <span class="text-red-500">*</span>
                                </label>
                                <input type="text" id="otp" name="otp" placeholder="مثال: 123456"
                                    maxlength="6" inputmode="numeric" pattern="[0-9]{6}" value="{{ old('otp') }}"
                                    required
                                    class="w-full px-6 py-4 text-2xl text-center tracking-widest border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 transition-all duration-200 font-mono">
                                @error('otp')
                                    <p class="mt-2 text-sm text-red-600 font-medium">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- تحذيرات مهمة -->
                            <div class="p-4 bg-yellow-50 border-l-4 border-yellow-500 rounded-lg">
                                <h4 class="font-semibold text-yellow-900 mb-3 flex items-center">
                                    <i class="fas fa-exclamation-triangle ml-2"></i>
                                    ⏱️ معلومات الصلاحية:
                                </h4>
                                <ul class="space-y-2 text-sm text-yellow-800">
                                    <li class="flex items-start">
                                        <span class="text-yellow-600 font-bold ml-2">•</span>
                                        <span><strong>صلاحية الكود:</strong> ساعة واحدة من لحظة الحصول عليه من المنصة</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="text-yellow-600 font-bold ml-2">•</span>
                                        <span><strong>بعد انتهاء الصلاحية:</strong> سيتم عرض رسالة خطأ واضحة</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="text-yellow-600 font-bold ml-2">•</span>
                                        <span><strong>الحل:</strong> احصل على كود جديد من المنصة وحاول مجدداً</span>
                                    </li>
                                    <li class="flex items-start">
                                        <span class="text-yellow-600 font-bold ml-2">•</span>
                                        <span><strong>لا توجد إعادة إرسال:</strong> الكود يُحصل عليه من المنصة مباشرة
                                            فقط</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- أزرار الإجراء -->
                    <div class="flex gap-4 pt-8 border-t border-gray-200">
                        <button type="submit" id="submit-btn"
                            class="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-lg hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center">
                            <i class="fas fa-lock ml-2"></i>
                            <span id="submit-text">إتمام الربط</span>
                        </button>
                        <a href="{{ route('dashboard') }}"
                            class="px-6 py-3 border-2 border-gray-300 text-black font-bold rounded-lg hover:bg-gray-50 transition-all duration-200 flex items-center justify-center">
                            <i class="fas fa-times ml-2"></i>
                            إلغاء
                        </a>
                    </div>
                </form>

                <!-- الحاشية الأمنية -->
                <div class="px-8 md:px-10 py-6 bg-gray-50 border-t border-gray-200">
                    <p class="text-xs text-black flex items-center">
                        <i class="fas fa-shield-alt text-black ml-2"></i>
                        <span>جميع البيانات محمية بتشفير آمن من طرف إلى طرف (End-to-End Encryption) ولن تُشارك مع أي طرف
                            ثالث</span>
                    </p>
                </div>
            </div>

            <!-- قسم المساعدة -->
            <div class="mt-10 p-6 bg-white rounded-lg shadow-md border border-gray-200">
                <h3 class="font-bold text-black mb-4 flex items-center">
                    <i class="fas fa-question-circle text-blue-600 ml-2"></i>
                    الأسئلة الشائعة
                </h3>
                <div class="space-y-4 text-sm text-black">
                    <div>
                        <p class="font-semibold text-black mb-1">❓ أين أحصل على كود الربط؟</p>
                        <p class="text-black">اذهب مباشرة إلى منصة فاتورة (Fatoora) بـ ZATCA، وتحت قسم الأجهزة سيظهر
                            الكود بـ 6 أرقام</p>
                    </div>
                    <div>
                        <p class="font-semibold text-black mb-1">❓ هل سيتم إرسال الكود على الهاتف؟</p>
                        <p class="text-black">لا، الكود يظهر مباشرة في منصة فاتورة فقط - لا يتم إرساله عبر الجوال</p>
                    </div>
                    <div>
                        <p class="font-semibold text-black mb-1">❓ ماذا إذا انتهت صلاحية الكود؟</p>
                        <p class="text-black">احصل على كود جديد من المنصة وحاول مجدداً - الكود صالح لمدة ساعة واحدة</p>
                    </div>
                    <div>
                        <p class="font-semibold text-black mb-1">❓ ماذا يحدث بعد الربط بنجاح؟</p>
                        <p class="text-black">يقوم النظام بحفظ الشهادات والمفاتيح تلقائياً، وستصبح جاهزاً لإصدار فواتير
                            إلكترونية</p>
                    </div>
                    <div>
                        <p class="font-semibold text-black mb-1">❓ هل هناك فرق بين الاختبار والإنتاج؟</p>
                        <p class="text-black">نعم، لكل بيئة كود منفصل من منصة فاتورة - تأكد من اختيار البيئة الصحيحة</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('zatca-binding-form');
                const otpInput = document.getElementById('otp');
                const submitBtn = document.getElementById('submit-btn');
                const envRadios = document.querySelectorAll('input[name="environment"]');
                
                // عناصر مؤشر البيئة
                const envCard = document.getElementById('env-indicator-card');
                const envIcon = document.getElementById('env-icon-container');
                const envTitle = document.getElementById('env-title');
                const envBadge = document.getElementById('env-badge');
                const envDesc = document.getElementById('env-description');

                // وظيفة تحديث واجهة البيئة ديناميكياً
                function updateEnvUI(env) {
                    if (env === 'developer-portal') {
                        envCard.className = 'mb-6 p-5 rounded-lg shadow-md border-l-4 transition-all duration-300 bg-gradient-to-r from-blue-50 to-blue-100 border-blue-600';
                        envIcon.innerHTML = '<i class="fas fa-flask text-4xl text-blue-600"></i>';
                        envTitle.innerText = '🔍 البيئة المختارة (Development)';
                        envBadge.innerText = '✅ بيئة الاختبار (Developer Portal)';
                        envBadge.className = 'mt-2 mb-2 inline-block px-4 py-2 rounded-lg font-bold text-white bg-blue-600';
                        envDesc.innerText = '✓ هذه بيئة آمنة تماماً للتطوير والاختبار، لا يتم إرسال بيانات حقيقية للزكاة.';
                    } else if (env === 'simulation') {
                        envCard.className = 'mb-6 p-5 rounded-lg shadow-md border-l-4 transition-all duration-300 bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-600';
                        envIcon.innerHTML = '<i class="fas fa-vial text-4xl text-yellow-600"></i>';
                        envTitle.innerText = '🧪 البيئة المختارة (Simulation)';
                        envBadge.innerText = '⚠️ بيئة المحاكاة (Simulation)';
                        envBadge.className = 'mt-2 mb-2 inline-block px-4 py-2 rounded-lg font-bold text-white bg-yellow-600';
                        envDesc.innerText = '✓ تستخدم لمحاكاة الربط الفعلي مع الهيئة ببيانات مشابهة للواقع قبل الانتقال للإنتاج.';
                    } else if (env === 'core') {
                        envCard.className = 'mb-6 p-5 rounded-lg shadow-md border-l-4 transition-all duration-300 bg-gradient-to-r from-red-50 to-red-100 border-red-600';
                        envIcon.innerHTML = '<i class="fas fa-exclamation-triangle text-4xl text-red-600 animate-pulse"></i>';
                        envTitle.innerText = '⚠️ البيئة المختارة (Production)';
                        envBadge.innerText = '🚨 بيئة الإنتاج (Core) - حقيقية!';
                        envBadge.className = 'mt-2 mb-2 inline-block px-4 py-2 rounded-lg font-bold text-white bg-red-600';
                        envDesc.innerText = '🚨 تحذير: أنت تعمل على البيئة الفعلية! أي ربط سيتم تسجيله رسمياً لدى هيئة الزكاة.';
                    }
                }

                // مستمع لتغيير الراديو بوتن
                envRadios.forEach(radio => {
                    radio.addEventListener('change', function() {
                        updateEnvUI(this.value);
                    });
                });

                // السماح بإدخال الأرقام فقط
                otpInput.addEventListener('input', function(e) {
                    e.target.value = e.target.value.replace(/[^0-9]/g, '');
                });

                // معالجة إرسال النموذج
                form.addEventListener('submit', async function(e) {
                    e.preventDefault();

                    const otp = otpInput.value.trim();
                    const envOption = document.querySelector('input[name="environment"]:checked');
                    const env = envOption ? envOption.value : 'developer-portal';

                    if (otp.length !== 6) {
                        alert('يرجى إدخال 6 أرقام بالضبط');
                        return;
                    }

                    // تعطيل الزر أثناء المعالجة
                    submitBtn.disabled = true;
                    const submitText = document.getElementById('submit-text');
                    if (submitText) submitText.textContent = 'جاري المعالجة...';

                    try {
                        const response = await fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                            },
                            body: JSON.stringify({
                                otp: otp,
                                environment: env
                            })
                        });

                        if (response.redirected) {
                            window.location.href = response.url;
                            return;
                        }

                        const data = await response.json();

                        if (data.success) {
                            alert(data.message || 'تم الربط بنجاح');
                            location.reload();
                        } else {
                            alert(data.message || 'حدث خطأ أثناء الربط');
                            submitBtn.disabled = false;
                            if (submitText) submitText.textContent = 'إتمام الربط';
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        form.submit();
                    }
                });

            });
        </script>
    @endpush

@endsection