<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 flex justify-between items-center">
                <div>
                    <form method="GET" class="flex gap-2">
                        <select name="period" class="form-select text-sm" onchange="this.form.submit()">
                            <option value="7" {{ request('period') == 7 ? 'selected' : '' }}>آخر 7 أيام</option>
                            <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="flex gap-2">
                    <a href="{{ route('analytics.reports.income-statement') }}" class="btn btn-primary text-sm">
                        <i class="fas fa-file-invoice mr-1"></i> بيان الدخل
                    </a>
                    <a href="{{ route('analytics.reports.cash-flow') }}" class="btn btn-primary text-sm">
                        <i class="fas fa-water mr-1"></i> التدفقات النقدية
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                <div class="dashboard-card-secondary">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">إجمالي الإيرادات</h3>
                            <p class="dashboard-stat">{{ number_format($total_revenue, 2) }} ريال</p>
                        </div>
                        <div class="bg-secondary-100 p-3 rounded-full">
                            <i class="fas fa-money-bill-wave text-secondary-600 text-l"></i>
                        </div>
                    </div>
                </div>

                <div class="dashboard-card-danger">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">إجمالي المصروفات</h3>
                            <p class="dashboard-stat">{{ number_format($total_expenses, 2) }} ريال</p>
                        </div>
                        <div class="bg-danger-100 p-3 rounded-full">
                            <i class="fas fa-chart-pie text-danger-600 text-l"></i>
                        </div>
                    </div>
                </div>

                <div class="dashboard-card-success">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">صافي الربح</h3>
                            <p class="dashboard-stat">{{ number_format($net_income, 2) }} ريال</p>
                        </div>
                        <div class="bg-success-100 p-3 rounded-full">
                            <i class="fas fa-chart-line text-success-600 text-l"></i>
                        </div>
                    </div>
                </div>

                <div class="dashboard-card-primary">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">رصيد البنوك</h3>
                            <p class="dashboard-stat">{{ number_format($cash_balance, 2) }} ريال</p>
                        </div>
                        <div class="bg-primary-100 p-3 rounded-full">
                            <i class="fas fa-university text-primary-600 text-l"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="dashboard-card">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">المستحقات</h3>
                            <p class="dashboard-stat">{{ number_format($receivables, 2) }} ريال</p>
                        </div>
                        <div class="bg-warning-100 p-3 rounded-full">
                            <i class="fas fa-hourglass-start text-warning-600 text-l"></i>
                        </div>
                    </div>
                </div>

                <div class="dashboard-card">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="dashboard-label">المستحقات للموردين</h3>
                            <p class="dashboard-stat">{{ number_format($payables, 2) }} ريال</p>
                        </div>
                        <div class="bg-info-100 p-3 rounded-full">
                            <i class="fas fa-handshake text-info-600 text-l"></i>
                        </div>
                    </div>
                </div>
            </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>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($overdue_invoices as $invoice)
                                <tr>
                                    <td>{{ $invoice->invoice_number }}</td>
                                    <td>{{ $invoice->customer->name }}</td>
                                    <td>{{ number_format($invoice->total_amount, 2) }}</td>
                                    <td>{{ number_format($invoice->paid_amount, 2) }}</td>
                                    <td>{{ number_format($invoice->total_amount - $invoice->paid_amount, 2) }}</td>
                                    <td><span class="badge badge-danger">متأخرة</span></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-neutral-500">لا توجد فواتير متأخرة</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

</x-app-layout>
