@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md mx-auto bg-white rounded-xl shadow-2xl p-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="flex justify-center mb-4">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-full flex items-center justify-center">
                    <i class="fas fa-certificate text-white text-2xl"></i>
                </div>
            </div>
            <h1 class="text-3xl font-bold text-black mb-2">ربط ZATCA</h1>
            <p class="text-black">إعدادات هيئة الزكاة والدخل</p>
        </div>

        <!-- Status Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg">
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-500 mt-0.5 ml-3"></i>
                    <div>
                        <p class="text-green-700 font-semibold">تم بنجاح</p>
                        <p class="text-sm text-green-600">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                <div class="flex items-start">
                    <i class="fas fa-exclamation-circle text-red-500 mt-0.5 ml-3"></i>
                    <div class="flex-1">
                        <p class="text-red-700 font-semibold">❌ حدث خطأ</p>
                        <p class="text-sm text-red-600 mt-1">{{ session('error') }}</p>
                        
                        @if(session('error_details'))
                            <details class="mt-3 cursor-pointer">
                                <summary class="text-xs text-red-600 font-semibold hover:text-red-700">
                                    📋 التفاصيل الكاملة
                                </summary>
                                <div class="bg-red-100 rounded p-3 mt-2 text-xs text-red-800 font-mono whitespace-pre-wrap break-words overflow-auto max-h-64">{{ session('error_details') }}</div>
                            </details>
                        @endif
                        
                        @if(session('phase'))
                            <div class="mt-2 text-xs text-red-600">
                                📍 <strong>المرحلة:</strong> {{ session('phase') }}
                            </div>
                        @endif
                        
                        @if(session('error_code'))
                            <div class="mt-1 text-xs text-red-600">
                                🔴 <strong>رمز الخطأ:</strong> {{ session('error_code') }}
                            </div>
                        @endif
                        
                        @if(session('zatca_error_message'))
                            <div class="mt-2 bg-red-100 rounded p-2 text-xs text-red-700">
                                <strong>رسالة ZATCA:</strong><br>
                                {{ session('zatca_error_message') }}
                            </div>
                        @endif
                    </div>
                    <button type="button" class="text-red-500 ml-2" onclick="this.closest('.mb-6').remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if($errors->any())
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg">
                <div class="flex items-start">
                    <i class="fas fa-alert-triangle text-red-500 mt-0.5 ml-3"></i>
                    <div>
                        <p class="text-red-700 font-semibold">خطأ في البيانات</p>
                        <ul class="text-sm text-red-600 mt-1 space-y-1">
                            @foreach($errors->all() as $error)
                                <li>• {{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <!-- Current Status Card -->
        @if($zatcaSetting && $zatcaSetting->compliance_csid)
            <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
                <div class="flex items-center text-blue-700 mb-2">
                    <i class="fas fa-shield-alt ml-2"></i>
                    <span class="font-semibold">الحالة الحالية</span>
                </div>
                <div class="text-sm text-blue-600 space-y-1">
                    <div><strong>البيئة:</strong> {{ $zatcaSetting->is_production ? '🟢 إنتاج' : '🟡 اختبار' }}</div>
                    <div><strong>المعرف:</strong> {{ substr($zatcaSetting->compliance_csid, 0, 10) }}...</div>
                </div>
            </div>
        @endif

        <!-- Main Form -->
        <form action="{{ route('zatca.settings.update', $zatcaSetting) }}" method="POST" id="zatcaForm" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- OTP Input -->
            <div>
                <label for="otp" class="block text-sm font-semibold text-black mb-2">
                    <i class="fas fa-key ml-1"></i> كود OTP
                </label>
                <input 
                    type="text" 
                    id="otp" 
                    name="otp" 
                    placeholder="أدخل رمز التحقق من ZATCA"
                    class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition"
                    maxlength="10"
                    required>
                <p class="text-xs text-black mt-1">
                    <i class="fas fa-info-circle ml-1"></i>
                    الرمز المرسل على بريدك الإلكتروني المسجل بـ ZATCA
                </p>
            </div>

            <!-- Environment Selection -->
            <div>
                <label class="block text-sm font-semibold text-black mb-3">
                    <i class="fas fa-server ml-1"></i> بيئة التشغيل
                </label>
                <div class="space-y-2">
                    <label class="flex items-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-400 transition" onclick="selectEnvironment(false)">
                        <input type="radio" name="is_production" value="0" 
                               {{ !$zatcaSetting->is_production ? 'checked' : '' }} 
                               class="w-4 h-4 ml-3">
                        <div class="flex-1">
                            <div class="font-semibold text-black">🟡 بيئة الاختبار</div>
                            <div class="text-xs text-black">للتجريب والاختبار (بدون تأثير فعلي)</div>
                        </div>
                    </label>

                    <label class="flex items-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-green-400 transition" onclick="selectEnvironment(true)">
                        <input type="radio" name="is_production" value="1" 
                               {{ $zatcaSetting->is_production ? 'checked' : '' }} 
                               class="w-4 h-4 ml-3">
                        <div class="flex-1">
                            <div class="font-semibold text-black">🟢 بيئة الإنتاج</div>
                            <div class="text-xs text-black">للعمل الفعلي مع ZATCA</div>
                        </div>
                    </label>
                </div>
            </div>

            <!-- Submit Button -->
            <button 
                type="submit" 
                id="submitBtn"
                class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition transform hover:scale-105 active:scale-95 flex items-center justify-center"
                disabled>
                <i class="fas fa-spinner ml-2 animate-spin hidden" id="spinner"></i>
                <span id="btnText">🔗 ربط مع ZATCA</span>
            </button>

            <!-- Info Box -->
            <div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg">
                <p class="text-sm text-amber-800">
                    <strong>ملاحظة:</strong> عند الضغط على الزر، سيتم تحقق البيانات تلقائياً وربط النظام مع ZATCA بالكامل.
                </p>
            </div>
        </form>

        <!-- Back Link -->
        <div class="text-center mt-6 pt-6 border-t border-gray-200">
            <a href="{{ route('einvoices.index') }}" class="text-blue-600 hover:text-blue-700 font-semibold text-sm">
                <i class="fas fa-arrow-right ml-1"></i> العودة للفواتير الإلكترونية
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function selectEnvironment(isProduction) {
        const btn = document.getElementById('submitBtn');
        btn.disabled = false;
        if (isProduction) {
            btn.innerHTML = '🟢 <span id="btnText">ربط مع بيئة الإنتاج</span>';
        } else {
            btn.innerHTML = '🟡 <span id="btnText">ربط مع بيئة الاختبار</span>';
        }
    }

    document.getElementById('zatcaForm').addEventListener('submit', function(e) {
        const otp = document.getElementById('otp').value.trim();
        const btn = document.getElementById('submitBtn');
        
        if (!otp || otp.length < 6) {
            e.preventDefault();
            alert('الرجاء إدخال كود OTP صحيح');
            return;
        }

        btn.disabled = true;
        const spinner = btn.querySelector('#spinner');
        spinner.classList.remove('hidden');
        btn.querySelector('#btnText').textContent = 'جاري الربط...';
    });

    // Auto-enable button if OTP is filled
    document.getElementById('otp').addEventListener('input', function() {
        const btn = document.getElementById('submitBtn');
        btn.disabled = this.value.trim().length < 6;
    });
</script>
@endpush

@endsection