<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-l text-gray-800 leading-tight">
            {{ __('تقرير تحليل العملاء') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">

            <div class="mb-6">
                <form method="GET" class="flex gap-2">
                    <select name="period" class="form-select text-sm" onchange="this.form.submit()">
                        <option value="30" {{ request('period') == 30 ? 'selected' : '' }}>آخر 30 يوم</option>
                        <option value="90" {{ request('period') == 90 ? 'selected' : '' }}>آخر 90 يوم</option>
                        <option value="365" {{ request('period') == 365 ? 'selected' : '' }}>آخر سنة</option>
                    </select>
                </form>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2>قائمة العملاء</h2>
                </div>
                <div class="overflow-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>اسم العميل</th>
                                <th>البريد الإلكتروني</th>
                                <th>عدد الفواتير</th>
                                <th>إجمالي المبلغ</th>
                                <th>المبلغ المدفوع</th>
                                <th>المبلغ المتبقي</th>
                                <th>نسبة السداد</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($customers as $customer)
                                <tr>
                                    <td class="font-medium">{{ $customer['name'] }}</td>
                                    <td>{{ $customer['email'] }}</td>
                                    <td>{{ $customer['invoice_count'] }}</td>
                                    <td>{{ number_format($customer['total_amount'], 2) }}</td>
                                    <td>{{ number_format($customer['paid_amount'], 2) }}</td>
                                    <td>
                                        <span class="{{ $customer['pending_amount'] > 0 ? 'text-danger-600' : 'text-success-600' }}">
                                            {{ number_format($customer['pending_amount'], 2) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="w-20 bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: {{ $customer['payment_rate'] }}%"></div>
                                        </div>
                                        <span class="text-xs text-neutral-600">{{ number_format($customer['payment_rate'], 2) }}%</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-neutral-500 py-8">لا توجد عملاء</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</x-app-layout>
