@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-12 px-4">
    <div class="max-w-2xl mx-auto">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-black mb-4">🔗 إعداد ربط ZATCA</h1>
            <p class="text-lg text-black">خطوة واحدة بسيطة جداً!</p>
        </div>

        @if ($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-6 mb-8 rounded-r-lg">
            <p class="font-bold text-red-700">❌ خطأ:</p>
            @foreach ($errors->all() as $error)
                <p class="text-red-600">{{ $error }}</p>
            @endforeach
        </div>
        @endif

        <div class="bg-white rounded-2xl shadow-2xl p-12">
            <form method="POST" action="{{ route('zatca.settings.store') }}">
                @csrf

                <div class="mb-10">
                    <label class="block text-black font-bold mb-6 text-lg">
                        <i class="fas fa-globe text-blue-600 ml-2"></i>
                        اختر بيئة العمل:
                    </label>
                    <div class="space-y-3">
                        <label class="flex items-center p-6 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-yellow-400 hover:bg-yellow-50 transition">
                            <input type="radio" name="is_production" value="0" checked class="w-5 h-5">
                            <div class="ml-4">
                                <div class="font-bold">🟡 بيئة الاختبار</div>
                                <div class="text-black text-sm">للتجريب والاختبار (بدون تأثير فعلي)</div>
                            </div>
                        </label>
                        <label class="flex items-center p-6 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-green-400 hover:bg-green-50 transition">
                            <input type="radio" name="is_production" value="1" class="w-5 h-5">
                            <div class="ml-4">
                                <div class="font-bold">🟢 بيئة الإنتاج</div>
                                <div class="text-black text-sm">للعمل الفعلي مع ZATCA</div>
                            </div>
                        </label>
                    </div>
                </div>

                <input type="hidden" name="api_base_url" value="https://gw-apic-gov.gazt.gov.sa/e-invoicing/developer-portal">

                <button type="submit" class="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-bold py-4 rounded-xl transition transform hover:scale-105 flex items-center justify-center gap-3 text-xl">
                    <i class="fas fa-arrow-right"></i> 
                    <span>المرحلة التالية</span>
                </button>
            </form>
        </div>

        <!-- معلومات إضافية -->
        <div class="bg-blue-50 border-l-4 border-blue-500 rounded-xl p-8 mt-8">
            <h3 class="font-bold text-blue-900 text-lg mb-4 flex items-center">
                <i class="fas fa-lightbulb text-blue-600 ml-2"></i>
                كيف يعمل النظام؟
            </h3>
            <ul class="space-y-3 text-blue-800 text-sm">
                <li class="flex items-start gap-3">
                    <span class="font-bold text-blue-600 mt-1">1️⃣</span>
                    <span><strong>اختر البيئة</strong> - اختبار أم إنتاج</span>
                </li>
                <li class="flex items-start gap-3">
                    <span class="font-bold text-blue-600 mt-1">2️⃣</span>
                    <span><strong>أدخل رمز OTP</strong> - الرمز المرسل على بريدك من ZATCA</span>
                </li>
                <li class="flex items-start gap-3">
                    <span class="font-bold text-blue-600 mt-1">3️⃣</span>
                    <span><strong>النظام يتولى الباقي</strong> - الشهادة والتوقيع والتسجيل تلقائياً</span>
                </li>
                <li class="flex items-start gap-3">
                    <span class="font-bold text-green-600 mt-1">✅</span>
                    <span><strong>جاهز 100%</strong> - نظام الفواتير الإلكترونية جاهز للعمل</span>
                </li>
            </ul>
        </div>

    </div>
</div>
@endsection