@extends('layouts.app')

@section('title', 'بدء عملية Onboarding مع 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">🔐 بدء عملية Onboarding مع ZATCA</h1>
            <p class="text-black">الخطوة الأولى للحصول على شهادة E-Invoice الرقمية</p>
        </div>

        <!-- البطاقة الرئيسية -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 p-6 text-white">
                <h2 class="text-xl font-bold mb-2">المعرف الفريد (Unique ID)</h2>
                <p class="text-blue-100">تم توليد معرف فريد للتحقق من هويتك لدى ZATCA</p>
            </div>

            <div class="p-8">
                <!-- عرض المعرف الفريد -->
                <div class="mb-8 p-6 bg-blue-50 rounded-lg border border-blue-200">
                    <p class="text-sm text-blue-600 mb-2 font-medium">معرف فريد:</p>
                    <div class="bg-white p-4 rounded border border-blue-300 font-mono text-center select-all">
                        {{ $uniqueId }}
                    </div>
                    <p class="text-xs text-blue-600 mt-2">احفظ هذا المعرف - قد تحتاجه</p>
                </div>

                <!-- الخطوات -->
                <div class="mb-8">
                    <h3 class="text-lg font-bold text-black mb-4">خطوات العملية:</h3>
                    <ol class="space-y-4">
                        <li class="flex">
                            <div class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-blue-600 text-white font-bold">1</div>
                            <div class="ml-4 flex-1">
                                <p class="font-semibold text-black">انقر على الزر أدناه</p>
                                <p class="text-black text-sm">سيتم توجيهك إلى منصة Fattoora</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-blue-600 text-white font-bold">2</div>
                            <div class="ml-4 flex-1">
                                <p class="font-semibold text-black">أكمل عملية التحقق</p>
                                <p class="text-black text-sm">اتبع التعليمات على منصة Fattoora</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-blue-600 text-white font-bold">3</div>
                            <div class="ml-4 flex-1">
                                <p class="font-semibold text-black">احصل على Onboarding Code</p>
                                <p class="text-black text-sm">ستحصل على كود فريد من Fattoora</p>
                            </div>
                        </li>
                        <li class="flex">
                            <div class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-blue-600 text-white font-bold">4</div>
                            <div class="ml-4 flex-1">
                                <p class="font-semibold text-black">أدخل الكود في النموذج</p>
                                <p class="text-black text-sm">سنطلب منك إدخال الكود الذي حصلت عليه</p>
                            </div>
                        </li>
                    </ol>
                </div>

                <!-- تحذير -->
                <div class="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
                    <p class="text-sm text-amber-800">
                        <span class="font-bold">⚠️ ملاحظة:</span>
                        هذا التطبيق يستخدم بيئة Sandbox للتطوير والاختبار. 
                        عند الذهاب للإنتاج، استخدم رابط الإنتاج الفعلي.
                    </p>
                </div>

                <!-- أزرار الإجراءات -->
                <div class="flex gap-4">
                    <a href="{{ $fatoraUrl }}" target="_blank" rel="noopener noreferrer" 
                       class="flex-1 inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                        <i class="fas fa-external-link-alt ml-2"></i>
                        <span>الذهاب إلى Fattoora</span>
                    </a>

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

                <!-- نموذج إدخال الكود -->
                <div class="mt-8 pt-8 border-t border-gray-200">
                    <h3 class="text-lg font-bold text-black mb-4">أدخل Onboarding Code الذي حصلت عليه:</h3>
                    
                    <form action="{{ route('zatca.callback') }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label for="onboarding_code" class="block text-sm font-medium text-black mb-2">
                                Onboarding Code
                            </label>
                            <input type="text" id="onboarding_code" name="onboarding_code" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                   placeholder="أدخل الكود الذي حصلت عليه من Fattoora"
                                   required>
                            @error('onboarding_code')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <button type="submit" 
                                class="w-full 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-check-circle ml-2"></i>
                            <span>تأكيد الكود والمتابعة</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- معلومات إضافية -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- بطاقة الدعم -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="font-bold text-black mb-3 flex items-center">
                    <i class="fas fa-question-circle text-blue-600 ml-2"></i>
                    هل تحتاج إلى مساعدة؟
                </h3>
                <p class="text-black text-sm mb-4">
                    إذا واجهت أي مشاكل في العملية، يمكنك التواصل مع فريق الدعم.
                </p>
                <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">
                    → الحصول على المساعدة
                </a>
            </div>

            <!-- بطاقة المتطلبات -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="font-bold text-black mb-3 flex items-center">
                    <i class="fas fa-checklist text-green-600 ml-2"></i>
                    المتطلبات
                </h3>
                <ul class="text-black text-sm space-y-2">
                    <li>✓ رقم الضريبة الفعلي</li>
                    <li>✓ السجل التجاري</li>
                    <li>✓ بيانات الشركة الكاملة</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // نسخ المعرف الفريد عند النقر عليه
    document.querySelector('.font-mono')?.addEventListener('click', function() {
        const text = this.innerText;
        navigator.clipboard.writeText(text).then(() => {
            const oldText = this.innerText;
            this.innerText = '✓ تم النسخ!';
            setTimeout(() => {
                this.innerText = oldText;
            }, 2000);
        });
    });
</script>
@endsection