@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-2xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-black mb-2">🎯 طلب شهادة الإنتاج</h1>
            <p class="text-black">الخطوة الثانية للحصول على شهادة E-Invoice النهائية</p>
        </div>

        <!-- التحقق من الحالة السابقة -->
        <div class="mb-8">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
                <div class="bg-gradient-to-r from-amber-50 to-amber-100 p-6 border-b border-amber-200">
                    <h2 class="text-lg font-bold text-black mb-4">✅ حالة العملية</h2>
                    <div class="space-y-3">
                        <!-- الخطوة الأولى -->
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-green-500 text-white">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="font-semibold text-black">الخطوة 1: Onboarding Code</p>
                                <p class="text-sm text-black">✓ تم الحصول عليه بنجاح</p>
                            </div>
                        </div>

                        <!-- الخطوة الثانية -->
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-green-500 text-white">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="font-semibold text-black">الخطوة 2: Activation Certificate</p>
                                <p class="text-sm text-black">✓ تم الحصول عليه بنجاح</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
                            </div>
                        </div>

                        <!-- الخطوة الثالثة -->
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="flex items-center justify-center h-8 w-8 rounded-full bg-blue-500 text-white">
                                    <i class="fas fa-hourglass-half"></i>
                                </div>
                            </div>
                            <div class="ml-4">
                                <p class="font-semibold text-black">الخطوة 3: Production Certificate</p>
                                <p class="text-sm text-black">⏳ قيد الانتظار...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- المحتوى الرئيسي -->
                <div class="p-8">
                    <!-- معلومات الشركة -->
                    <div class="mb-8">
                        <h3 class="text-lg font-bold text-black mb-4">📋 معلومات الشركة</h3>
                        <div class="bg-gray-50 rounded-lg p-4 space-y-3">
                            <div class="flex justify-between">
                                <span class="text-black">اسم الشركة:</span>
                                <span class="font-semibold text-black">{{ $company->name }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-black">رقم الضريبة:</span>
                                <span class="font-semibold text-black">{{ $company->tax_number ?? 'غير محدد' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-black">السجل التجاري:</span>
                                <span class="font-semibold text-black">{{ $company->commercial_record ?? 'غير محدد' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-black">البريد الإلكتروني:</span>
                                <span class="font-semibold text-black">{{ $company->email ?? 'غير محدد' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- نموذج الطلب -->
                    <div class="mb-8">
                        <h3 class="text-lg font-bold text-black mb-4">📝 نموذج الطلب</h3>
                        
                        <form action="{{ route('zatca.request-production') }}" method="POST">
                            @csrf

                            <!-- التحذير -->
                            <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <p class="text-sm text-blue-800">
                                    <span class="font-bold">ℹ️ معلومة:</span>
                                    عند النقر على "طلب شهادة الإنتاج"، سيتم إرسال طلب رسمي إلى ZATCA.
                                    تأكد من أن جميع بيانات شركتك صحيحة قبل المتابعة.
                                </p>
                            </div>

                            <!-- خيار التأكيد -->
                            <div class="mb-6">
                                <label class="flex items-center">
                                    <input type="checkbox" name="confirm" value="1" class="w-4 h-4 text-blue-600">
                                    <span class="ml-3 text-black">
                                        أؤكد أن جميع بيانات شركتي صحيحة وأرغب في طلب شهادة الإنتاج
                                    </span>
                                </label>
                                @error('confirm')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- أزرار الإجراءات -->
                            <div class="flex gap-4">
                                <button type="submit" 
                                        class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                                    <i class="fas fa-certificate ml-2"></i>
                                    <span>طلب شهادة الإنتاج</span>
                                </button>

                                <a href="{{ route('zatca.status') }}" 
                                   class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gray-200 text-black font-semibold rounded-lg hover:bg-gray-300 transition-all duration-200">
                                    <i class="fas fa-arrow-left ml-2"></i>
                                    <span>العودة</span>
                                </a>
                            </div>
                        </form>
                    </div>

                    <!-- معلومات إضافية -->
                    <div class="border-t border-gray-200 pt-8">
                        <h3 class="text-lg font-bold text-black mb-4">ℹ️ معلومات مهمة</h3>
                        <div class="space-y-4 text-sm text-black">
                            <p>
                                <strong>الوقت المتوقع:</strong>
                                عادة يستغرق الحصول على شهادة الإنتاج من 1 إلى 24 ساعة.
                            </p>
                            <p>
                                <strong>الخطوات التالية:</strong>
                                بعد الحصول على الشهادة، ستكون شركتك جاهزة لإصدار فواتير E-Invoice رسمية.
                            </p>
                            <p>
                                <strong>الدعم:</strong>
                                إذا واجهت أي مشاكل، يمكنك التواصل مع فريق الدعم الفني.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- روابط سريعة -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <a href="{{ route('zatca.status') }}" 
               class="block p-6 bg-white rounded-lg shadow border border-gray-200 hover:shadow-lg hover:border-blue-300 transition-all">
                <h3 class="font-bold text-black mb-2">📊 عرض الحالة</h3>
                <p class="text-sm text-black">شاهد حالة التكامل الحالية</p>
            </a>

            <a href="{{ route('zatca.settings.index') }}" 
               class="block p-6 bg-white rounded-lg shadow border border-gray-200 hover:shadow-lg hover:border-blue-300 transition-all">
                <h3 class="font-bold text-black mb-2">⚙️ الإعدادات</h3>
                <p class="text-sm text-black">قم بإعداد إعدادات ZATCA الإضافية</p>
            </a>
        </div>
    </div>
</div>
@endsection