<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التقرير المالي') }}</h1>
        <a href="{{ route('reports.view') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للتقارير') }}</a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('الفترة') }}</label>
                <select wire:model.live="period" class="rounded-lg border-gray-300 text-sm">
                    <option value="today">{{ __('اليوم') }}</option>
                    <option value="week">{{ __('هذا الأسبوع') }}</option>
                    <option value="month">{{ __('هذا الشهر') }}</option>
                    <option value="quarter">{{ __('هذا الربع') }}</option>
                    <option value="year">{{ __('هذه السنة') }}</option>
                    <option value="custom">{{ __('مخصص') }}</option>
                </select>
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('من') }}</label>
                <input type="date" wire:model.live="dateFrom" dir="ltr" class="rounded-lg border-gray-300 text-sm">
            </div>
            <div>
                <label class="block text-sm text-gray-600 mb-1">{{ __('إلى') }}</label>
                <input type="date" wire:model.live="dateTo" dir="ltr" class="rounded-lg border-gray-300 text-sm">
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('إجمالي الإيرادات') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-green-600 mt-1" dir="ltr">{{ format_money($totalRevenue) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('إجمالي الفواتير') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-blue-600 mt-1" dir="ltr">{{ format_money($totalInvoiced) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('المستحقات المعلقة') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-orange-600 mt-1" dir="ltr">{{ format_money($totalOutstanding) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <p class="text-sm text-gray-500">{{ __('فواتير متأخرة') }}</p>
            <p class="text-xl sm:text-2xl font-bold text-red-600 mt-1">{{ $overdueCount }}</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
        <!-- Payment Methods Breakdown -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('طرق الدفع') }}</h3>
            @forelse($paymentsByMethod as $method => $amount)
            <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                <span class="text-sm text-gray-700">{{ __($method) }}</span>
                <div class="flex items-center gap-3">
                    <div class="w-32 bg-gray-100 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $totalRevenue > 0 ? round($amount / $totalRevenue * 100) : 0 }}%"></div>
                    </div>
                    <span class="text-sm font-medium text-gray-800" dir="ltr">{{ format_money($amount) }}</span>
                </div>
            </div>
            @empty
            <p class="text-sm text-gray-500 text-center py-4">{{ __('لا توجد مدفوعات') }}</p>
            @endforelse
        </div>

        <!-- Daily Revenue Chart (simple bars) -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('الإيرادات اليومية') }}</h3>
            @if(count($dailyRevenue) > 0)
            @php $maxDaily = max($dailyRevenue) ?: 1; @endphp
            <div class="space-y-2 max-h-64 overflow-y-auto">
                @foreach($dailyRevenue as $date => $amount)
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500 w-20 shrink-0" dir="ltr">{{ \Carbon\Carbon::parse($date)->format('m/d') }}</span>
                    <div class="flex-1 bg-gray-100 rounded-full h-4">
                        <div class="bg-green-500 h-4 rounded-full flex items-center justify-end pe-1" style="width: {{ round($amount / $maxDaily * 100) }}%">
                            @if($amount / $maxDaily > 0.3)
                            <span class="text-[10px] text-white font-medium" dir="ltr">{{ format_money($amount) }}</span>
                            @endif
                        </div>
                    </div>
                    @if($amount / $maxDaily <= 0.3)
                    <span class="text-xs text-gray-600" dir="ltr">{{ format_money($amount) }}</span>
                    @endif
                </div>
                @endforeach
            </div>
            @else
            <p class="text-sm text-gray-500 text-center py-4">{{ __('لا توجد بيانات') }}</p>
            @endif
        </div>
    </div>

    <!-- Top Programs by Revenue -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
            <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('أعلى البرامج إيراداً') }}</h3>
        </div>

        {{-- Desktop Table --}}
        <div class="hidden md:block overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">#</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('البرنامج') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('عدد المبيعات') }}</th>
                        <th class="px-4 py-3 text-start text-xs font-medium text-gray-500">{{ __('الإيرادات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($topPrograms as $i => $program)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm text-gray-500">{{ $i + 1 }}</td>
                        <td class="px-4 py-3 text-sm text-gray-800">{{ $program->description }}</td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $program->count }}</td>
                        <td class="px-4 py-3 text-sm font-medium text-green-600" dir="ltr">{{ format_money($program->revenue) }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{{ __('لا توجد بيانات') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Mobile Cards --}}
        <div class="md:hidden divide-y divide-gray-100">
            @forelse($topPrograms as $i => $program)
            <div class="p-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-sm text-gray-400 font-medium">{{ $i + 1 }}</span>
                    <div>
                        <p class="text-sm font-medium text-gray-800">{{ $program->description }}</p>
                        <p class="text-xs text-gray-500">{{ $program->count }} {{ __('مبيعات') }}</p>
                    </div>
                </div>
                <span class="text-sm font-medium text-green-600" dir="ltr">{{ format_money($program->revenue) }}</span>
            </div>
            @empty
            <div class="p-8 text-center text-sm text-gray-500">{{ __('لا توجد بيانات') }}</div>
            @endforelse
        </div>
    </div>
</div>
