@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">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-black">إعدادات الزكاة والدخل (ZATCA)</h1>
            <p class="text-black mt-2">إدارة شهادات وإعدادات الربط مع نظام الزكاة والدخل</p>
        </div>

        <!-- Alerts -->
        @if ($errors->any())
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <h3 class="font-bold text-red-700">حدثت أخطاء:</h3>
                <ul class="list-disc list-inside text-red-600 mt-2">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('success'))
            <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
                <p class="text-green-700">✅ {{ session('success') }}</p>
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <p class="text-red-700">❌ {{ session('error') }}</p>
            </div>
        @endif

        <!-- Status Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- Status -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">الحالة</h3>
                <div class="flex items-center justify-between">
                    <span class="text-black">الحالة الحالية:</span>
                    {!! $company->zatca_status_badge !!}
                </div>
                <div class="mt-4 pt-4 border-t">
                    <p class="text-sm text-black">
                        المرحلة: <strong>{{ ucfirst(str_replace('-', ' ', $company->zatca_stage)) }}</strong>
                    </p>
                </div>
            </div>

            <!-- Required Data -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">البيانات المطلوبة</h3>
                <div class="space-y-2 text-sm">
                    <p>
                        <span class="{{ $company->email ? 'text-green-600' : 'text-red-600' }}">
                            {{ $company->email ? '✓' : '✗' }}
                        </span>
                        البريد الإلكتروني
                    </p>
                    <p>
                        <span class="{{ $company->otp ? 'text-green-600' : 'text-red-600' }}">
                            {{ $company->otp ? '✓' : '✗' }}
                        </span>
                        كود OTP
                    </p>
                    <p>
                        <span class="{{ $company->serial_number ? 'text-green-600' : 'text-red-600' }}">
                            {{ $company->serial_number ? '✓' : '✗' }}
                        </span>
                        رقم السيريال
                    </p>
                    <p>
                        <span class="{{ $company->business_category ? 'text-green-600' : 'text-red-600' }}">
                            {{ $company->business_category ? '✓' : '✗' }}
                        </span>
                        فئة النشاط
                    </p>
                </div>
            </div>

            <!-- Certificate -->
            <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">الشهادات</h3>
                <p class="text-sm text-black">
                    @if ($company->hasValidZatcaCertificates())
                        ✅ شهادات صالحة
                        <br>
                        <small class="text-black">
                            تنتهي في: {{ $company->zatca_certificate_expires_at->format('Y-m-d') }}
                        </small>
                    @else
                        ❌ لا توجد شهادات صالحة
                    @endif
                </p>
            </div>
        </div>

        <!-- Actions -->
        <div class="bg-white rounded-lg shadow p-6 border border-gray-200">
            <h3 class="text-lg font-semibold text-black mb-4">الإجراءات</h3>
            
            @if ($company->isZatcaDataComplete())
                <form action="{{ route('zatca.generate-certificate') }}" method="POST" class="space-y-4">
                    @csrf
                    
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                        <p class="text-blue-700">
                            ✅ جميع البيانات المطلوبة موجودة. يمكنك الحصول على الشهادة الآن.
                        </p>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="confirmed" name="confirmed" required 
                               class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                        <label for="confirmed" class="ml-2 text-black">
                            أؤكد أنني أريد الحصول على شهادة جديدة من الزكاة والدخل
                        </label>
                    </div>

                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        <i class="fas fa-certificate mr-2"></i> الحصول على الشهادة
                    </button>
                </form>
            @else
                <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-r-lg">
                    <p class="text-yellow-700">
                        ⚠️ يجب ملء البيانات المطلوبة أولاً قبل الحصول على الشهادة.
                    </p>
                    <ul class="list-disc list-inside text-yellow-600 mt-2 text-sm">
                        @if (!$company->email)
                            <li>البريد الإلكتروني</li>
                        @endif
                        @if (!$company->otp)
                            <li>كود OTP</li>
                        @endif
                        @if (!$company->serial_number)
                            <li>رقم السيريال</li>
                        @endif
                        @if (!$company->business_category)
                            <li>فئة النشاط</li>
                        @endif
                    </ul>
                </div>
            @endif
        </div>

        <!-- Additional Information -->
        <div class="bg-blue-50 border-l-4 border-blue-500 p-6 mt-8 rounded-r-lg">
            <h3 class="font-semibold text-blue-900 mb-3">معلومات مفيدة</h3>
            <ul class="text-blue-700 text-sm space-y-2">
                <li>• تأكد من أن جميع بيانات الشركة صحيحة قبل طلب الشهادة</li>
                <li>• الشهادات تنتهي صلاحيتها بعد 3 سنوات من الإصدار</li>
                <li>• يمكنك اختيار المرحلة (Developer Portal للاختبار أو Production للإنتاج)</li>
                <li>• للمزيد من المعلومات، اتصل بفريق الدعم الفني</li>
            </ul>
        </div>
    </div>
</div>
@endsection