@extends('layouts.app')

@section('title', 'حالة تكامل ZATCA')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-4xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="mb-8">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">🔐 حالة تكامل ZATCA</h1>
                    <p class="text-black">متابعة تقدم عملية الحصول على شهادة E-Invoice الرقمية</p>
                </div>
                <div class="text-right">
                    <div class="inline-block">
                        <span class="inline-flex items-center px-4 py-2 rounded-full font-bold
                            @if($company->zatca_status === 'production')
                                bg-green-100 text-green-800
                            @elseif($company->zatca_status === 'activated')
                                bg-blue-100 text-blue-800
                            @else
                                bg-gray-100 text-black
                            @endif
                        ">
                            @if($company->zatca_status === 'production')
                                <i class="fas fa-check-circle ml-2"></i> جاهز للإنتاج
                            @elseif($company->zatca_status === 'activated')
                                <i class="fas fa-hourglass-half ml-2"></i> قيد الانتظار
                            @else
                                <i class="fas fa-exclamation-circle ml-2"></i> لم يبدأ
                            @endif
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- شريط التقدم -->
        <div class="mb-8 bg-white rounded-xl shadow-lg p-8 border border-gray-200">
            <h2 class="text-lg font-bold text-black mb-6">📈 مراحل العملية</h2>
            
            <div class="space-y-4">
                <!-- المرحلة 1: Onboarding Code -->
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-10 w-10 rounded-full 
                            @if(!empty($company->zatca_onboarding_code))
                                bg-green-500 text-white
                            @else
                                bg-gray-300 text-black
                            @endif
                        ">
                            @if(!empty($company->zatca_onboarding_code))
                                <i class="fas fa-check"></i>
                            @else
                                <span>1</span>
                            @endif
                        </div>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-lg font-semibold text-black">الخطوة 1: الحصول على Onboarding Code</h3>
                        <p class="text-black mt-1">الحصول على كود Onboarding من منصة Fattoora</p>
                        @if(!empty($company->zatca_onboarding_code))
                            <p class="text-sm text-green-600 mt-2">✓ تم إنجازها</p>
                        @else
                            <a href="{{ route('zatca.initiate') }}" 
                               class="inline-block mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                                ابدأ الآن
                            </a>
                        @endif
                    </div>
                </div>

                <!-- الفاصل -->
                <div class="ml-5 h-6 border-l-2 
                    @if(!empty($company->zatca_onboarding_code))
                        border-green-500
                    @else
                        border-gray-300
                    @endif
                "></div>

                <!-- المرحلة 2: Activation Certificate -->
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-10 w-10 rounded-full
                            @if($hasActivation)
                                bg-green-500 text-white
                            @elseif(!empty($company->zatca_onboarding_code))
                                bg-blue-500 text-white
                            @else
                                bg-gray-300 text-black
                            @endif
                        ">
                            @if($hasActivation)
                                <i class="fas fa-check"></i>
                            @elseif(!empty($company->zatca_onboarding_code))
                                <i class="fas fa-spinner animate-spin"></i>
                            @else
                                <span>2</span>
                            @endif
                        </div>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-lg font-semibold text-black">الخطوة 2: الحصول على Activation Certificate</h3>
                        <p class="text-black mt-1">طلب واستقبال شهادة التفعيل من ZATCA</p>
                        @if($hasActivation)
                            <p class="text-sm text-green-600 mt-2">✓ تم إنجازها</p>
                            @if($company->zatca_activation_at)
                                <p class="text-xs text-black mt-1">
                                    تم في: {{ $company->zatca_activation_at->format('Y-m-d H:i') }}
                                </p>
                            @endif
                        @elseif(!empty($company->zatca_onboarding_code))
                            <p class="text-sm text-blue-600 mt-2">⏳ جاري المعالجة...</p>
                        @else
                            <p class="text-sm text-black mt-2">−− انتظر الخطوة السابقة</p>
                        @endif
                    </div>
                </div>

                <!-- الفاصل -->
                <div class="ml-5 h-6 border-l-2
                    @if($hasProduction)
                        border-green-500
                    @elseif($hasActivation)
                        border-blue-500
                    @else
                        border-gray-300
                    @endif
                "></div>

                <!-- المرحلة 3: Production Certificate -->
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-10 w-10 rounded-full
                            @if($hasProduction)
                                bg-green-500 text-white
                            @elseif($hasActivation)
                                bg-blue-500 text-white
                            @else
                                bg-gray-300 text-black
                            @endif
                        ">
                            @if($hasProduction)
                                <i class="fas fa-check"></i>
                            @elseif($hasActivation)
                                <i class="fas fa-spinner animate-spin"></i>
                            @else
                                <span>3</span>
                            @endif
                        </div>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-lg font-semibold text-black">الخطوة 3: الحصول على Production Certificate</h3>
                        <p class="text-black mt-1">طلب واستقبال شهادة الإنتاج النهائية من ZATCA</p>
                        @if($hasProduction)
                            <p class="text-sm text-green-600 mt-2">✓ تم إنجازها</p>
                            @if($company->zatca_production_at)
                                <p class="text-xs text-black mt-1">
                                    تم في: {{ $company->zatca_production_at->format('Y-m-d H:i') }}
                                </p>
                            @endif
                        @elseif($hasActivation)
                            <a href="{{ route('zatca.request-production-page') }}" 
                               class="inline-block mt-3 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                                طلب الشهادة
                            </a>
                        @else
                            <p class="text-sm text-black mt-2">−− انتظر الخطوات السابقة</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- رسائل الأخطاء إن وجدت -->
        @if($company->zatca_error_message)
            <div class="mb-8 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                    </div>
                    <div class="ml-3 flex-1">
                        <p class="text-sm text-red-800">
                            <span class="font-bold">❌ خطأ:</span>
                            {{ $company->zatca_error_message }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- معلومات التفاصيل -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- بطاقة معلومات الشركة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <h3 class="text-lg font-bold text-black mb-4">📋 معلومات الشركة</h3>
                <div class="space-y-3 text-sm">
                    <div>
                        <p class="text-black">اسم الشركة</p>
                        <p class="font-semibold text-black">{{ $company->name }}</p>
                    </div>
                    <div>
                        <p class="text-black">رقم الضريبة</p>
                        <p class="font-semibold text-black">{{ $company->tax_number ?? 'غير محدد' }}</p>
                    </div>
                    <div>
                        <p class="text-black">السجل التجاري</p>
                        <p class="font-semibold text-black">{{ $company->commercial_record ?? 'غير محدد' }}</p>
                    </div>
                </div>
            </div>

            <!-- بطاقة الحالة -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <h3 class="text-lg font-bold text-black mb-4">📊 ملخص الحالة</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-black">حالة التكامل</span>
                        <span class="font-semibold
                            @if($company->zatca_status === 'production')
                                text-green-600
                            @elseif($company->zatca_status === 'activated')
                                text-blue-600
                            @else
                                text-black
                            @endif
                        ">
                            {{ $company->zatcaStatusLabel() }}
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">شهادة التفعيل</span>
                        <span class="font-semibold
                            @if($hasActivation)
                                text-green-600
                            @else
                                text-black
                            @endif
                        ">
                            @if($hasActivation)
                                ✓ موجودة
                            @else
                                ✗ غير موجودة
                            @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">شهادة الإنتاج</span>
                        <span class="font-semibold
                            @if($hasProduction)
                                text-green-600
                            @else
                                text-black
                            @endif
                        ">
                            @if($hasProduction)
                                ✓ موجودة
                            @else
                                ✗ غير موجودة
                            @endif
                        </span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-black">جاهز للإنتاج</span>
                        <span class="font-semibold
                            @if($isReady)
                                text-green-600
                            @else
                                text-black
                            @endif
                        ">
                            @if($isReady)
                                ✓ نعم
                            @else
                                ✗ لا
                            @endif
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- روابط سريعة -->
        <div class="mt-8 flex gap-4">
            @if(!$isReady)
                <a href="{{ route('zatca.initiate') }}" 
                   class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-all">
                    <i class="fas fa-play ml-2"></i>
                    ابدأ العملية
                </a>
            @endif

            <a href="{{ route('zatca.settings.index') }}" 
               class="inline-flex items-center px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg hover:bg-gray-700 transition-all">
                <i class="fas fa-cog ml-2"></i>
                الإعدادات
            </a>

            <button type="button" 
                    onclick="location.reload()"
                    class="inline-flex items-center px-6 py-3 bg-gray-200 text-black font-semibold rounded-lg hover:bg-gray-300 transition-all">
                <i class="fas fa-sync-alt ml-2"></i>
                تحديث الحالة
            </button>
        </div>

        <!-- معلومات إضافية -->
        <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
            <h3 class="font-bold text-blue-900 mb-3">ℹ️ معلومات مهمة</h3>
            <ul class="text-sm text-blue-800 space-y-2">
                <li>• يمكنك مراقبة تقدم العملية من هذه الصفحة</li>
                <li>• عادة يستغرق الحصول على الشهادات من 24 إلى 72 ساعة</li>
                <li>• بعد الانتهاء، ستكون شركتك جاهزة لإصدار فواتير E-Invoice رسمية</li>
                <li>• تأكد من أن جميع بيانات شركتك محدثة قبل البدء</li>
            </ul>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // تحديث الحالة كل 30 ثانية
    setInterval(() => {
        fetch('{{ route('zatca.check-status') }}')
            .then(response => response.json())
            .then(data => {
                if (data.is_ready) {
                    // إذا أصبحت الشركة جاهزة، أعد تحميل الصفحة
                    location.reload();
                }
            })
            .catch(error => console.error('Error checking status:', error));
    }, 30000);
</script>
@endsection