@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-blue-50 border-l-4 border-blue-600 p-4 rounded">
            <div class="text-sm font-semibold text-black">قيد الانتظار</div>
            <div class="text-3xl font-bold text-blue-600">{{ $stats['pending'] ?? 0 }}</div>
        </div>

        <div class="bg-yellow-50 border-l-4 border-yellow-600 p-4 rounded">
            <div class="text-sm font-semibold text-black">قيد المعالجة</div>
            <div class="text-3xl font-bold text-yellow-600">{{ $stats['in_progress'] ?? 0 }}</div>
        </div>

        <div class="bg-green-50 border-l-4 border-green-600 p-4 rounded">
            <div class="text-sm font-semibold text-black">مرسلة بنجاح</div>
            <div class="text-3xl font-bold text-green-600">{{ $stats['submitted'] ?? 0 }}</div>
        </div>

        <div class="bg-red-50 border-l-4 border-red-600 p-4 rounded">
            <div class="text-sm font-semibold text-black">فاشلة</div>
            <div class="text-3xl font-bold text-red-600">{{ $stats['failed'] ?? 0 }}</div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-black">سجل الفواتير الإلكترونية</h2>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded" 
                    onclick="document.getElementById('filter-form').classList.toggle('hidden')">
                <i class="fas fa-filter ml-1"></i> تصفية
            </button>
        </div>

        <div id="filter-form" class="bg-gray-50 p-4 rounded mb-6 hidden">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-black mb-2">الحالة</label>
                    <select name="status" class="w-full border border-gray-300 rounded px-3 py-2">
                        <option value="">الكل</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>قيد الانتظار</option>
                        <option value="processing" {{ request('status') == 'processing' ? 'selected' : '' }}>قيد المعالجة</option>
                        <option value="success" {{ request('status') == 'success' ? 'selected' : '' }}>نجح</option>
                        <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>فاشل</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-black mb-2">نوع الحدث</label>
                    <select name="event_type" class="w-full border border-gray-300 rounded px-3 py-2">
                        <option value="">الكل</option>
                        <option value="invoice_submission" {{ request('event_type') == 'invoice_submission' ? 'selected' : '' }}>إرسال</option>
                        <option value="invoice_reporting" {{ request('event_type') == 'invoice_reporting' ? 'selected' : '' }}>إبلاغ</option>
                        <option value="invoice_clearance" {{ request('event_type') == 'invoice_clearance' ? 'selected' : '' }}>مقاصة</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-black mb-2">من التاريخ</label>
                    <input type="date" name="from_date" value="{{ request('from_date') }}" 
                           class="w-full border border-gray-300 rounded px-3 py-2">
                </div>

                <div class="flex items-end gap-2">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded flex-1">
                        <i class="fas fa-search ml-1"></i> بحث
                    </button>
                    <a href="{{ route('einvoices.tracking') }}" class="bg-gray-400 hover:bg-gray-500 text-white font-semibold py-2 px-4 rounded">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-100 border-b border-gray-300">
                    <tr>
                        <th class="text-right px-4 py-3 font-semibold text-black">رقم الفاتورة</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">نوع الحدث</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">الحالة</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">الرسالة</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">التاريخ</th>
                        <th class="text-right px-4 py-3 font-semibold text-black">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                        <tr class="border-b border-gray-200 hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <a href="{{ route('einvoices.show', $log->einvoice) }}" class="text-blue-600 hover:underline">
                                    {{ $log->einvoice->invoice_number ?? 'N/A' }}
                                </a>
                            </td>
                            <td class="px-4 py-3">{{ $log->getEventTypeLabel() }}</td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $log->getStatusColor() }}-100 text-{{ $log->getStatusColor() }}-800">
                                    {{ $log->getStatusLabel() }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-black">{{ $log->message }}</td>
                            <td class="px-4 py-3 text-black">{{ $log->created_at->format('Y-m-d H:i') }}</td>
                            <td class="px-4 py-3">
                                <button class="text-blue-600 hover:text-blue-800 text-sm" onclick="showDetails({{ $log->id }})">
                                    <i class="fas fa-eye ml-1"></i> التفاصيل
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-4 py-8 text-center text-black">
                                لا توجد سجلات
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($logs->hasPages())
            <div class="mt-6">
                {{ $logs->links() }}
            </div>
        @endif
    </div>
</div>

<div id="details-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
        <div class="bg-gray-100 px-6 py-4 border-b border-gray-300 flex justify-between items-center">
            <h3 class="text-lg font-bold text-black">تفاصيل السجل</h3>
            <button onclick="closeDetails()" class="text-black hover:text-black">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div id="modal-content" class="p-6">
            جاري التحميل...
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function showDetails(logId) {
    const modal = document.getElementById('details-modal');
    const content = document.getElementById('modal-content');
    
    modal.classList.remove('hidden');
    
    fetch(`{{ url('/api/einvoice-logs') }}/${logId}`)
        .then(response => response.json())
        .then(data => {
            content.innerHTML = `
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1">نوع الحدث</label>
                        <p class="text-black">${data.event_type_label}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1">الحالة</label>
                        <p class="text-black">${data.status_label}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1">الرسالة</label>
                        <p class="text-black">${data.message || 'بدون رسالة'}</p>
                    </div>
                    ${data.error_code ? `
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1">كود الخطأ</label>
                        <p class="text-black">${data.error_code}</p>
                    </div>
                    ` : ''}
                    ${data.details ? `
                    <div>
                        <label class="block text-sm font-semibold text-black mb-1">التفاصيل</label>
                        <pre class="bg-gray-100 p-3 rounded text-xs overflow-auto">${JSON.stringify(data.details, null, 2)}</pre>
                    </div>
                    ` : ''}
                </div>
            `;
        });
}

function closeDetails() {
    document.getElementById('details-modal').classList.add('hidden');
}
</script>
@endsection