@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-2xl mx-auto">
        <!-- رأس الصفحة -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">🔐 ربط ZATCA</h1>
                    <p class="text-black">خطوة واحدة فقط - أدخل كود OTP من رسالة SMS</p>
                </div>
                <div class="text-5xl">🔗</div>
            </div>
        </div>

        <!-- بيانات الشركة -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6 border-l-4 border-blue-500">
            <h2 class="text-lg font-semibold text-black mb-4">📋 معلومات الشركة</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm text-black">اسم الشركة</label>
                    <p class="text-black font-semibold">{{ $company_name }}</p>
                </div>
                <div>
                    <label class="text-sm text-black">الرقم الضريبي (VAT)</label>
                    <p class="text-black font-semibold" dir="ltr">{{ $vat_number }}</p>
                </div>
            </div>
        </div>

        <!-- نموذج الربط -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold text-black mb-6">أدخل كود OTP</h2>

            <!-- رسالة التنبيه -->
            <div id="alertBox" class="hidden mb-6 p-4 rounded-lg border-l-4" role="alert">
                <div class="flex items-start">
                    <span class="text-2xl mr-4" id="alertIcon"></span>
                    <div>
                        <p class="font-semibold text-lg" id="alertTitle"></p>
                        <p class="text-sm mt-2" id="alertMessage"></p>
                        <details class="mt-3 cursor-pointer" id="debugDetails">
                            <summary class="text-xs text-black hover:text-black">
                                🔧 تفاصيل تقنية (للمطورين)
                            </summary>
                            <pre class="mt-2 p-3 bg-gray-100 rounded text-xs overflow-auto" id="debugContent"></pre>
                        </details>
                    </div>
                </div>
            </div>

            <form id="bindingForm" class="space-y-6">
                @csrf

                <!-- حقل OTP -->
                <div>
                    <label for="otp_code" class="block text-sm font-semibold text-black mb-2">
                        🔑 كود OTP (6 أرقام)
                    </label>
                    <input 
                        type="text" 
                        id="otp_code"
                        name="otp_code"
                        maxlength="6"
                        placeholder="000000"
                        class="w-full px-4 py-3 text-center text-2xl font-mono tracking-widest border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition"
                        required
                    >
                    <p class="text-xs text-black mt-2">
                        ✓ ستتلقى كود OTP في رسالة SMS قصيرة من هيئة الزكاة
                    </p>
                </div>

                <!-- زر الربط -->
                <button 
                    type="submit"
                    id="submitBtn"
                    class="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center gap-2"
                >
                    <span class="text-lg">🔗</span>
                    <span id="submitText">ربط مع ZATCA</span>
                </button>
            </form>

            <!-- معلومات مهمة -->
            <div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-200">
                <h3 class="font-semibold text-blue-900 mb-3">ℹ️ معلومات مهمة</h3>
                <ul class="text-sm text-blue-800 space-y-2">
                    <li>✓ سيتم إرسال كود OTP إلى رقم الهاتف المسجل لدى الزكاة</li>
                    <li>✓ صلاحية الكود 10 دقائق فقط</li>
                    <li>✓ لا تشارك الكود مع أحد</li>
                    <li>✓ إذا لم تتلقى الكود، تحقق من صحة الرقم المسجل لديهم</li>
                </ul>
            </div>

            <!-- تحذير من عدم إعداد الاعتمادات -->
            @php
                $clientId = config('zatca.client_id');
                $clientSecret = config('zatca.client_secret');
                $isConfigured = $clientId && $clientSecret && strpos($clientId, 'your_') !== 0;
            @endphp

            @if(!$isConfigured)
            <div class="mt-6 p-4 bg-amber-50 rounded-lg border border-amber-300">
                <h3 class="font-semibold text-amber-900 mb-3">⚠️ لم يتم إعداد بيانات الاعتماد</h3>
                <p class="text-sm text-amber-800 mb-3">
                    لتفعيل الربط مع ZATCA، يجب تعيين بيانات الاعتماد التالية في ملف <code class="bg-amber-100 px-2 py-1 rounded">.env</code>:
                </p>
                <pre class="bg-amber-100 p-3 rounded text-xs text-amber-900 overflow-x-auto">ZATCA_CLIENT_ID=your_client_id_from_zatca
ZATCA_CLIENT_SECRET=your_client_secret_from_zatca</pre>
                <p class="text-xs text-amber-700 mt-3">
                    ثم أعد تشغيل السيرفر واضغط على زر "مسح الـ Cache":
                </p>
                <button type="button" class="mt-2 px-3 py-2 text-xs bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors" onclick="clearCache()">
                    🔄 مسح الـ Cache
                </button>
            </div>
            @endif
        </div>

        <!-- روابط إضافية -->
        <div class="mt-8 text-center">
            <a href="{{ route('zatca.status') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                ← العودة للحالة
            </a>
        </div>
    </div>
</div>

<script>
document.getElementById('bindingForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const otpCode = document.getElementById('otp_code').value;
    const submitBtn = document.getElementById('submitBtn');
    const submitText = document.getElementById('submitText');
    const alertBox = document.getElementById('alertBox');
    
    // تعطيل الزر
    submitBtn.disabled = true;
    submitText.textContent = '⏳ جاري الربط...';
    alertBox.classList.add('hidden');
    
    try {
        const response = await fetch('{{ route("zatca.submit-binding") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
            },
            body: JSON.stringify({ otp_code: otpCode }),
        });
        
        const data = await response.json();
        
        if (data.success) {
            // ✅ نجاح
            showAlert('success', '✅ تم الربط بنجاح!', data.message);
            setTimeout(() => {
                window.location.href = data.redirect;
            }, 2000);
        } else {
            // ❌ فشل
            showAlert('error', '❌ فشل الربط', data.message, data.debug);
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('error', '❌ خطأ في الاتصال', 'فشل الاتصال بالخادم: ' + error.message);
    } finally {
        submitBtn.disabled = false;
        submitText.textContent = '🔗 ربط مع ZATCA';
    }
});

function showAlert(type, title, message, debug = null) {
    const alertBox = document.getElementById('alertBox');
    const alertIcon = document.getElementById('alertIcon');
    const alertTitle = document.getElementById('alertTitle');
    const alertMessage = document.getElementById('alertMessage');
    const debugDetails = document.getElementById('debugDetails');
    const debugContent = document.getElementById('debugContent');
    
    alertBox.classList.remove('hidden', 'bg-green-50', 'border-green-500', 'bg-red-50', 'border-red-500');
    
    if (type === 'success') {
        alertBox.classList.add('bg-green-50', 'border-green-500');
        alertIcon.textContent = '✅';
        alertTitle.textContent = title;
        alertTitle.classList.remove('text-red-900');
        alertTitle.classList.add('text-green-900');
        alertMessage.classList.remove('text-red-700');
        alertMessage.classList.add('text-green-700');
        debugDetails.classList.add('hidden');
    } else {
        alertBox.classList.add('bg-red-50', 'border-red-500');
        alertIcon.textContent = '❌';
        alertTitle.textContent = title;
        alertTitle.classList.remove('text-green-900');
        alertTitle.classList.add('text-red-900');
        alertMessage.classList.remove('text-green-700');
        alertMessage.classList.add('text-red-700');
        
        if (debug) {
            // تنسيق معلومات التصحيح
            let debugText = '';
            if (typeof debug === 'object') {
                debugText = JSON.stringify(debug, null, 2);
            } else {
                debugText = debug;
            }
            debugContent.textContent = debugText;
            debugDetails.classList.remove('hidden');
        } else {
            debugDetails.classList.add('hidden');
        }
    }
    
    alertMessage.textContent = message;
}

// تنسيق إدخال OTP (أرقام فقط)
document.getElementById('otp_code').addEventListener('keypress', (e) => {
    if (!/[0-9]/.test(e.key)) {
        e.preventDefault();
    }
});

// دالة مسح الـ Cache
function clearCache() {
    fetch('{{ route("api.cache.clear") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('[name="_token"]').value,
            'Accept': 'application/json',
        }
    })
    .then(r => r.json())
    .then(d => {
        if (d.success) {
            alert('✅ تم مسح الـ Cache بنجاح!\nيرجى تحديث الصفحة.');
            location.reload();
        } else {
            alert('❌ فشل مسح الـ Cache: ' + d.message);
        }
    })
    .catch(e => alert('❌ خطأ: ' + e.message));
}
</script>

<style>
input[type="text"]::-webkit-outer-spin-button,
input[type="text"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="text"][type="number"] {
    -moz-appearance: textfield;
}
</style>
@endsection