@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-4xl mx-auto">
            <!-- تنبيه البيئة -->
            <div class="mb-6 p-5 rounded-lg shadow-md border-l-4 @if (config('app.debug')) bg-gradient-to-r from-blue-50 to-blue-100 border-blue-600 @else bg-gradient-to-r from-red-50 to-red-100 border-red-600 @endif">
                <div class="flex items-start gap-4">
                    <div class="flex-shrink-0">
                        @if (config('app.debug'))
                            <i class="fas fa-flask text-4xl text-blue-600"></i>
                        @else
                            <i class="fas fa-exclamation-triangle text-4xl text-red-600 animate-pulse"></i>
                        @endif
                    </div>
                    <div class="flex-1">
                        <h4 class="@if (config('app.debug')) text-lg font-bold text-blue-900 @else text-lg font-bold text-red-900 @endif">
                            @if (config('app.debug'))
                                🔍 بيئة الاختبار (Sandbox)
                            @else
                                ⚠️ بيئة الإنتاج (Production)
                            @endif
                        </h4>
                        <p class="@if (config('app.debug')) text-sm text-blue-800 @else text-sm text-red-800 font-semibold @endif mt-2">
                            @if (config('app.debug'))
                                ✓ يمكنك التجربة بأمان كامل
                            @else
                                🚨 حذر: أنت تعمل على النظام الفعلي
                            @endif
                        </p>
                    </div>
                </div>
            </div>

            <!-- رأس الصفحة -->
            <div class="mb-12 text-center">
                <div class="flex justify-center mb-4">
                    <div class="bg-gradient-to-br from-blue-600 to-blue-700 text-white p-6 rounded-full shadow-lg">
                        <i class="fas fa-link text-4xl"></i>
                    </div>
                </div>
                <h1 class="text-4xl font-bold text-black mb-4">ربط الفواتير الإلكترونية</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-8 uppercase tracking-wide">مراحل الربط</h3>
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    @for ($i = 1; $i <= 4; $i++)
                        <div class="flex flex-col items-center w-full md:w-1/4">
                            <div class="flex items-center justify-center w-16 h-16 rounded-full @if($i <= 1) bg-gradient-to-br from-green-500 to-green-600 @elseif($i <= 2) bg-gradient-to-br from-blue-500 to-blue-600 animate-pulse @else bg-gray-300 @endif text-white font-bold mb-3 shadow-md transition-all duration-300">
                                @if($i <= 1)
                                    <i class="fas fa-check"></i>
                                @else
                                    {{ $i }}
                                @endif
                            </div>
                            <p class="text-sm font-medium text-black text-center">
                                @switch($i)
                                    @case(1)
                                        التحقق من البيانات
                                        @break
                                    @case(2)
                                        إدخال الرمز
                                        @break
                                    @case(3)
                                        التفعيل
                                        @break
                                    @case(4)
                                        الاكتمال
                                        @break
                                @endswitch
                            </p>
                        </div>
                        @if ($i < 4)
                            <div class="hidden md:block w-full md:w-12 border-t-2 border-gray-300 md:border-t-0 md:border-r-2 my-2 md:my-0"></div>
                        @endif
                    @endfor
                </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 gap-4">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-500 text-2xl"></i>
                        </div>
                        <div class="flex-1">
                            <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 gap-4">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-500 text-2xl"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold text-red-700">حدث خطأ ❌</h3>
                            <p class="text-red-600 text-sm mt-1">{{ session('error') }}</p>
                            @if (session('error_details'))
                                <details class="mt-3 cursor-pointer">
                                    <summary class="text-red-600 font-medium underline hover:no-underline">التفاصيل الكاملة</summary>
                                    <div class="mt-2 p-3 bg-red-100 rounded text-red-700 text-xs font-mono overflow-auto max-h-40">
                                        {{ session('error_details') }}
                                    </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-2xl font-bold text-black mb-2 flex items-center">
                            <i class="fas fa-building text-blue-600 mr-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>

                            <!-- السجل التجاري -->
                            <div>
                                <label class="block text-sm font-semibold text-black mb-2">السجل التجاري</label>
                                <input type="text" value="{{ 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">الدولة</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 gap-3">
                            <i class="fas fa-check-circle text-green-600 mt-1 flex-shrink-0 text-lg"></i>
                            <span class="text-green-700 font-medium">تم التحقق من جميع البيانات بنجاح ✓</span>
                        </div>
                    </div>

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

                        <div class="space-y-6">
                            <!-- معلومات مهمة -->
                            <div class="p-5 bg-blue-50 border border-blue-200 rounded-lg">
                                <h4 class="font-semibold text-blue-900 mb-3 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    📌 كيفية الحصول على الرمز:
                                </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">منصة فاتورة</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="000000"
                                    maxlength="6" 
                                    inputmode="numeric" 
                                    pattern="[0-9]{6}" 
                                    value="{{ old('otp') }}"
                                    required
                                    class="w-full px-6 py-4 text-3xl 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 font-bold"
                                >
                                @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-r-lg">
                                <h4 class="font-semibold text-yellow-900 mb-3 flex items-center">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    ⏱️ معلومات الصلاحية:
                                </h4>
                                <ul class="space-y-2 text-sm text-yellow-800">
                                    <li class="flex items-start gap-2">
                                        <span class="text-yellow-600 font-bold flex-shrink-0">•</span>
                                        <span><strong>صلاحية الرمز:</strong> ساعة واحدة من لحظة الحصول عليه من المنصة</span>
                                    </li>
                                    <li class="flex items-start gap-2">
                                        <span class="text-yellow-600 font-bold flex-shrink-0">•</span>
                                        <span><strong>بعد انتهاء الصلاحية:</strong> سيتم عرض رسالة خطأ واضحة</span>
                                    </li>
                                    <li class="flex items-start gap-2">
                                        <span class="text-yellow-600 font-bold flex-shrink-0">•</span>
                                        <span><strong>الحل:</strong> احصل على رمز جديد من المنصة وحاول مجدداً</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- قسم الإجراءات -->
                    <div class="mb-10">
                        <h2 class="text-2xl font-bold text-black mb-6 flex items-center">
                            <i class="fas fa-tasks text-blue-600 mr-3"></i>
                            الإجراءات التلقائية
                        </h2>

                        <div class="space-y-3">
                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 flex items-start gap-4">
                                <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-lock-open text-blue-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-black">تفعيل الحساب</h4>
                                    <p class="text-black text-sm">سيتم التحقق من بيانات الشركة مع الهيئة تلقائياً</p>
                                </div>
                            </div>

                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 flex items-start gap-4">
                                <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-certificate text-blue-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-black">استخراج الشهادات</h4>
                                    <p class="text-black text-sm">سيتم طلب الشهادات من الهيئة وحفظها آمنة في النظام</p>
                                </div>
                            </div>

                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 flex items-start gap-4">
                                <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-check-double text-blue-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-semibold text-black">التفعيل النهائي</h4>
                                    <p class="text-black text-sm">سيتم تفعيل نظام الفواتير الإلكترونية تلقائياً</p>
                                </div>
                            </div>
                        </div>

                        <!-- تحذير مهم -->
                        <div class="mt-6 p-4 bg-purple-50 border border-purple-200 rounded-lg">
                            <h4 class="font-semibold text-purple-900 mb-3 flex items-center">
                                <i class="fas fa-lightbulb mr-2"></i>
                                📌 معلومة مهمة:
                            </h4>
                            <ul class="space-y-2 text-sm text-purple-800">
                                <li class="flex items-start gap-2">
                                    <span class="font-bold flex-shrink-0">•</span>
                                    <span>لا تغلق هذه الصفحة أثناء المعالجة</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <span class="font-bold flex-shrink-0">•</span>
                                    <span>قد تأخذ العملية 2-5 دقائق للاكتمال</span>
                                </li>
                                <li class="flex items-start gap-2">
                                    <span class="font-bold flex-shrink-0">•</span>
                                    <span>الشهادات محفوظة بشكل آمن تماماً</span>
                                </li>
                            </ul>
                        </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 gap-2">
                            <i class="fas fa-check"></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 gap-2">
                            <i class="fas fa-times"></i>
                            <span>إلغاء</span>
                        </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 gap-2">
                        <i class="fas fa-shield-alt"></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-6 flex items-center text-lg">
                    <i class="fas fa-question-circle text-blue-600 mr-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');

                otpInput.addEventListener('input', function(e) {
                    e.target.value = e.target.value.replace(/[^0-9]/g, '');
                });

                form.addEventListener('submit', function(e) {
                    const otp = otpInput.value.trim();

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

                    submitBtn.disabled = true;
                    document.getElementById('submit-text').textContent = 'جاري المعالجة...';
                });
            });
        </script>
    @endpush

@endsection