@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-2xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="text-center mb-12">
            <div class="flex justify-center mb-6">
                <div class="bg-gradient-to-br from-blue-600 to-blue-700 text-white p-4 rounded-full shadow-lg">
                    <i class="fas fa-link text-3xl"></i>
                </div>
            </div>
            <h1 class="text-3xl md:text-4xl font-bold text-black mb-3">ربط الفواتير الإلكترونية</h1>
            <p class="text-black text-lg">اربط نظامك مع هيئة الزكاة والدخل في خطوة واحدة</p>
        </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">
                        <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">
                                    {{ 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-simple-form" method="POST" action="{{ route('zatca.simple-binding.store') }}" class="p-8 md:p-10">
                @csrf

                <!-- حالة الربط الحالية -->
                <div class="mb-8 pb-8 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-black mb-4 flex items-center">
                        <i class="fas fa-circle-info text-blue-600 ml-3"></i>
                        حالة الربط الحالية
                    </h2>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-black">
                            <strong class="text-black">الحالة:</strong>
                            <span class="inline-block ml-3 px-3 py-1 rounded-full text-sm font-medium
                                @if($company->zatca_status === 'production')
                                    bg-green-100 text-green-700
                                @elseif($company->zatca_status === 'sandbox')
                                    bg-blue-100 text-blue-700
                                @else
                                    bg-gray-100 text-black
                                @endif
                            ">
                                @if($company->zatca_status === 'production')
                                    ✅ متصل بالإنتاج
                                @elseif($company->zatca_status === 'sandbox')
                                    🔍 متصل بالاختبار
                                @else
                                    ⏳ غير متصل
                                @endif
                            </span>
                        </p>
                    </div>
                </div>

                <!-- قسم إدخال البيانات -->
                <div class="space-y-8">
                    <!-- OTP Code -->
                    <div>
                        <label for="otp" class="block text-sm font-bold text-black mb-3">
                            <i class="fas fa-key text-blue-600 ml-2"></i>
                            كود الربط (OTP) - 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
                        <p class="mt-2 text-xs text-black">
                            <i class="fas fa-info-circle ml-1"></i>
                            الكود صالح لمدة ساعة واحدة فقط
                        </p>
                    </div>

                    <!-- Environment Selection -->
                    <div>
                        <label for="environment" class="block text-sm font-bold text-black mb-3">
                            <i class="fas fa-server text-blue-600 ml-2"></i>
                            اختر البيئة
                            <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="environment" 
                            name="environment" 
                            required
                            class="w-full px-4 py-3 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"
                        >
                            <option value="">-- اختر البيئة --</option>
                            <option value="sandbox" {{ old('environment') === 'sandbox' ? 'selected' : '' }}>
                                🔍 بيئة الاختبار (Sandbox) - آمنة للتجربة
                            </option>
                            <option value="production" {{ old('environment') === 'production' ? 'selected' : '' }}>
                                ⚠️ بيئة الإنتاج (Production) - الفواتير الحقيقية
                            </option>
                        </select>
                        @error('environment')
                            <p class="mt-2 text-sm text-red-600 font-medium">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-xs text-black">
                            <i class="fas fa-lightbulb ml-1"></i>
                            اختر الاختبار أولاً للتأكد من أن كل شيء يعمل بشكل صحيح
                        </p>
                    </div>

                    <!-- معلومات مهمة -->
                    <div class="p-4 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-lightbulb ml-2 text-blue-600"></i>
                            نصائح مهمة
                        </h4>
                        <ul class="space-y-2 text-sm text-blue-800">
                            <li class="flex items-start">
                                <span class="text-blue-600 font-bold ml-3">•</span>
                                <span>احصل على الكود من منصة <strong>فاتورة (Fatoora)</strong> في <strong>الإعدادات &gt; الأجهزة</strong></span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-blue-600 font-bold ml-3">•</span>
                                <span>اختر <strong>بيئة الاختبار</strong> أولاً للتأكد من أن البيانات صحيحة</span>
                            </li>
                            <li class="flex items-start">
                                <span class="text-blue-600 font-bold ml-3">•</span>
                                <span>بعد النجاح، يمكنك الربط مع <strong>بيئة الإنتاج</strong> للبدء بإصدار فواتير حقيقية</span>
                            </li>
                        </ul>
                    </div>

                    <!-- تحذير -->
                    <div class="p-4 bg-yellow-50 border-l-4 border-yellow-500 rounded-lg">
                        <h4 class="font-semibold text-yellow-900 mb-2 flex items-center">
                            <i class="fas fa-exclamation-triangle ml-2 text-yellow-600"></i>
                            تحذير مهم
                        </h4>
                        <p class="text-sm text-yellow-800">
                            <strong>بيئة الإنتاج:</strong> أي فاتورة تُصدرها ستكون فاتورة حقيقية معترف بها من قبل الحكومة السعودية. تأكد من أن بياناتك صحيحة قبل الربط.
                        </p>
                    </div>
                </div>

                <!-- الزر -->
                <div class="mt-10 flex gap-4">
                    <button 
                        type="submit" 
                        class="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-4 px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center gap-2 text-lg"
                    >
                        <i class="fas fa-check"></i>
                        ربط الآن
                    </button>
                </div>
            </form>
        </div>

        <!-- معلومات إضافية -->
        <div class="mt-8 bg-gray-50 rounded-lg p-6 border border-gray-200">
            <h3 class="font-semibold text-black mb-4 flex items-center">
                <i class="fas fa-question-circle text-black ml-2"></i>
                أسئلة متكررة
            </h3>
            <div class="space-y-4 text-sm text-black">
                <div>
                    <strong class="text-black">س: ماذا يحدث بعد الربط؟</strong>
                    <p class="mt-1 text-black">بعد الربط بنجاح، سيقوم النظام بـ: (1) الحصول على الشهادات من ZATCA (2) حفظ الشهادات بشكل آمن (3) تفعيل إصدار الفواتير الإلكترونية</p>
                </div>
                <div>
                    <strong class="text-black">س: هل يمكن التراجع عن الربط؟</strong>
                    <p class="mt-1 text-black">نعم، يمكنك فصل الربط من إعدادات ZATCA، لكن ستحتاج إلى إدخال كود OTP جديد للربط مرة أخرى</p>
                </div>
                <div>
                    <strong class="text-black">س: هل أحتاج إلى معلومات إضافية؟</strong>
                    <p class="mt-1 text-black">لا، النظام يستخدم بيانات الشركة المحفوظة بالفعل. يتطلب فقط كود OTP واختيار البيئة</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>
@endsection