<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <a href="{{ route('reports.hub') }}" wire:navigate class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/></svg>
                </a>
                <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __($config['name']) }}</h1>
            </div>
        </div>
        <a href="{{ $exportUrl }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            {{ __('تصدير CSV') }}
        </a>
    </div>

    <!-- Filters -->
    @if($config['uses_dates'])
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('من تاريخ') }}</label>
                <input type="date" wire:model.live="from" dir="ltr"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1">{{ __('إلى تاريخ') }}</label>
                <input type="date" wire:model.live="to" dir="ltr"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
            </div>
        </div>
    </div>
    @endif

    <!-- Results -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden" wire:loading.class="opacity-50 pointer-events-none">
        @if($data instanceof \Illuminate\Support\Collection || $data instanceof \Illuminate\Database\Eloquent\Collection)
            @if($data->isEmpty())
                <div class="p-12 text-center">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                    <p class="text-gray-500 text-sm">{{ __('لا توجد بيانات للفترة المحددة') }}</p>
                </div>
            @else
                <div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
                    <p class="text-sm text-gray-600">
                        {{ __('النتائج:') }} <span class="font-bold">{{ number_format($data->count()) }}</span> {{ __('سجل') }}
                    </p>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                @foreach($config['headers'] as $header)
                                <th class="px-4 py-3 text-start font-medium text-gray-600 whitespace-nowrap">{{ __($header) }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($data as $row)
                            <tr class="hover:bg-gray-50">
                                @foreach($config['columns'] as $col)
                                <td class="px-4 py-2.5 text-gray-700 whitespace-nowrap">
                                    @php
                                        $value = is_array($row) ? ($row[$col] ?? '') : ($row->$col ?? '');
                                        $isMoney = in_array($col, $config['money_cols'] ?? []);
                                    @endphp
                                    @if($isMoney)
                                        <span dir="ltr">{{ number_format($value / 100, 2) }}</span>
                                    @else
                                        {{ $value }}
                                    @endif
                                </td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        @else
            <div class="p-12 text-center">
                <p class="text-gray-500 text-sm">{{ __('لا توجد بيانات') }}</p>
            </div>
        @endif
    </div>
</div>
