<div>
    <div class="mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التقارير') }}</h1>
    </div>

    <!-- Report Type Tabs -->
    <div class="flex flex-wrap gap-2 mb-4 sm:mb-6">
        <button wire:click="setReportType('financial')"
                class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'financial' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
            {{ __('مالي') }}
        </button>
        <button wire:click="setReportType('attendance')"
                class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'attendance' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
            {{ __('حضور') }}
        </button>
        <button wire:click="setReportType('enrollment')"
                class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'enrollment' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
            {{ __('تسجيلات') }}
        </button>
    </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 lg:grid-cols-4 gap-3 sm:gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
                <input type="date" wire:model.live="dateFrom" dir="ltr"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى تاريخ') }}</label>
                <input type="date" wire:model.live="dateTo" dir="ltr"
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
            </div>

            @if($reportType === 'attendance')
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة') }}</label>
                <select wire:model.live="groupId"
                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                    <option value="">{{ __('جميع المجموعات') }}</option>
                    @foreach($groups as $group)
                        <option value="{{ $group->id }}">{{ $group->name_ar }}</option>
                    @endforeach
                </select>
            </div>
            @endif
        </div>
    </div>

    <!-- Report Content -->
    <div wire:loading.class="opacity-50 pointer-events-none">
        @if($reportType === 'financial')
            <!-- Financial Report -->
            <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-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفواتير') }}</p>
                    <p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format(($reportData['total_invoiced'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('المحصّل') }}</p>
                    <p class="text-xl font-bold text-green-600" dir="ltr">{{ number_format(($reportData['total_collected'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-red-200 p-4 sm:p-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('المعلّق') }}</p>
                    <p class="text-xl font-bold text-red-600" dir="ltr">{{ number_format(($reportData['total_outstanding'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('مبيعات نقاط البيع') }}</p>
                    <p class="text-xl font-bold text-blue-600" dir="ltr">{{ number_format(($reportData['pos_revenue'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>

            <!-- Payment Methods Table -->
            @if(!empty($reportData['payment_methods']))
            <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 font-semibold text-gray-800">{{ __('طرق الدفع') }}</h3>
                </div>
                <div class="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 uppercase">{{ __('طريقة الدفع') }}</th>
                                <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('المبلغ') }}</th>
                                <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('عدد العمليات') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach($reportData['payment_methods'] as $method)
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-800">{{ __($method['method'] ?? '-') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-800" dir="ltr">{{ number_format(($method['total'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</td>
                                <td class="px-4 py-3 text-sm text-gray-800" dir="ltr">{{ number_format($method['count'] ?? 0) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endif

        @elseif($reportType === 'attendance')
            <!-- Attendance Report -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('نسبة الحضور') }}</h3>
                    <span class="text-xl sm:text-2xl font-bold {{ ($reportData['rate'] ?? 0) >= 90 ? 'text-green-600' : (($reportData['rate'] ?? 0) >= 75 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $reportData['rate'] ?? 0 }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
                    <div class="h-4 rounded-full transition-all duration-300 {{ ($reportData['rate'] ?? 0) >= 90 ? 'bg-green-500' : (($reportData['rate'] ?? 0) >= 75 ? 'bg-amber-500' : 'bg-red-500') }}"
                         style="width: {{ $reportData['rate'] ?? 0 }}%"></div>
                </div>
                <p class="text-sm text-gray-500">
                    {{ __('إجمالي السجلات:') }} <span dir="ltr" class="font-medium">{{ number_format($reportData['total_records'] ?? 0) }}</span>
                </p>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
                <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5 text-center">
                    <p class="text-xl sm:text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['present'] ?? 0) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ __('حاضر') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-amber-200 p-4 sm:p-5 text-center">
                    <p class="text-xl sm:text-2xl font-bold text-amber-600" dir="ltr">{{ number_format($reportData['late'] ?? 0) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ __('متأخر') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-red-200 p-4 sm:p-5 text-center">
                    <p class="text-xl sm:text-2xl font-bold text-red-600" dir="ltr">{{ number_format($reportData['absent'] ?? 0) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ __('غائب') }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-5 text-center">
                    <p class="text-xl sm:text-2xl font-bold text-blue-600" dir="ltr">{{ number_format($reportData['excused'] ?? 0) }}</p>
                    <p class="text-sm text-gray-500 mt-1">{{ __('معذور') }}</p>
                </div>
            </div>

        @elseif($reportType === 'enrollment')
            <!-- Enrollment Report -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
                <div class="bg-white rounded-xl shadow-sm border border-indigo-200 p-4 sm:p-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('تسجيلات جديدة') }}</p>
                    <p class="text-xl sm:text-2xl font-bold text-indigo-600" dir="ltr">{{ number_format($reportData['new_enrollments'] ?? 0) }}</p>
                </div>
                <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5">
                    <p class="text-sm text-gray-500 mb-1">{{ __('المشتركون النشطون') }}</p>
                    <p class="text-xl sm:text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['active_participants'] ?? 0) }}</p>
                </div>
            </div>

            <!-- By Status -->
            @if(!empty($reportData['by_status']))
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب الحالة') }}</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @foreach($reportData['by_status'] as $status => $count)
                    <div class="flex items-center justify-between bg-gray-50 rounded-lg px-4 py-3">
                        <span class="text-sm text-gray-700">{{ __($status) }}</span>
                        <span class="text-sm font-bold text-gray-800" dir="ltr">{{ number_format($count) }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- By Membership Type -->
            @if(!empty($reportData['by_membership_type']))
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب نوع العضوية') }}</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                    @foreach($reportData['by_membership_type'] as $type => $count)
                    <div class="flex items-center justify-between bg-gray-50 rounded-lg px-4 py-3">
                        <span class="text-sm text-gray-700">{{ __($type) }}</span>
                        <span class="text-sm font-bold text-gray-800" dir="ltr">{{ number_format($count) }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        @endif
    </div>
</div>
