<x-filament-panels::page>
    {{ $this->form }}

    <div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
        <p>{{ __('dberp.resources.comprehensive_summary_analysis.scope_hint_period') }}</p>
        <p class="text-xs text-gray-500 dark:text-gray-500">{{ __('dberp.resources.comprehensive_summary_analysis.scope_hint_snapshot') }}</p>
    </div>

    <div class="mt-6 grid gap-6 xl:grid-cols-2">
        <section class="grid gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ __('dberp.resources.comprehensive_summary_analysis.section_sales_summary') }}</h2>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('dberp.resources.comprehensive_summary_analysis.sales_summary_caption') }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ([
                    ['k' => 'order_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_sales_order_count')],
                    ['k' => 'final_amount', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_sales_amount')],
                    ['k' => 'unreceived_amount', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_sales_unreceived')],
                    ['k' => 'fully_shipped_order_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_sales_full_ship')],
                ] as $card)
                    <div class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-950/40">
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $card['label'] }}</div>
                        <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $this->dberpFormatReportScalar($card['k'], $this->salesSummary[$card['k']] ?? null) }}</div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="grid gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ __('dberp.resources.comprehensive_summary_analysis.section_purchase_summary') }}</h2>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('dberp.resources.comprehensive_summary_analysis.purchase_summary_caption') }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ([
                    ['k' => 'order_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_purchase_order_count')],
                    ['k' => 'total_amount', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_purchase_amount')],
                    ['k' => 'unpaid_amount', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_purchase_unpaid')],
                    ['k' => 'overdue_arrival_order_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_purchase_overdue')],
                ] as $card)
                    <div class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-950/40">
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $card['label'] }}</div>
                        <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $this->dberpFormatReportScalar($card['k'], $this->purchaseSummary[$card['k']] ?? null) }}</div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="grid gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ __('dberp.resources.comprehensive_summary_analysis.section_inventory_summary') }}</h2>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('dberp.resources.comprehensive_summary_analysis.inventory_summary_caption') }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ([
                    ['k' => 'realtime_quantity_total', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_inventory_realtime')],
                    ['k' => 'available_quantity_total', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_inventory_available')],
                    ['k' => 'warning_sku_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_inventory_warning')],
                    ['k' => 'open_exception_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_inventory_exception')],
                ] as $card)
                    <div class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-950/40">
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $card['label'] }}</div>
                        <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $this->dberpFormatReportScalar($card['k'], $this->inventorySummary[$card['k']] ?? null) }}</div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="grid gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div>
                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ __('dberp.resources.comprehensive_summary_analysis.section_settlement_summary') }}</h2>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('dberp.resources.comprehensive_summary_analysis.settlement_summary_caption') }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                @foreach ([
                    ['k' => 'receivable_remaining_total', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_receivable_balance')],
                    ['k' => 'payable_remaining_total', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_payable_balance')],
                    ['k' => 'receipt_amount_period', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_receipt_amount')],
                    ['k' => 'payment_amount_period', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_payment_amount')],
                    ['k' => 'receivable_overdue_open_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_receivable_overdue')],
                    ['k' => 'payable_overdue_open_count', 'label' => __('dberp.resources.comprehensive_summary_analysis.card_payable_overdue')],
                ] as $card)
                    <div class="rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-950/40">
                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ $card['label'] }}</div>
                        <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $this->dberpFormatReportScalar($card['k'], $this->settlementSummary[$card['k']] ?? null) }}</div>
                    </div>
                @endforeach
            </div>
        </section>
    </div>

    <section class="mt-8 grid gap-3">
        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ __('dberp.resources.comprehensive_summary_analysis.section_trend_overview') }}</h2>
        <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700">
                    <thead class="bg-gray-50 text-left text-gray-600 dark:bg-gray-800 dark:text-gray-300">
                        <tr>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_date') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_sales_amount') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_purchase_amount') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_inbound_quantity') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_outbound_quantity') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_receipt_amount') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('dberp.resources.comprehensive_summary_analysis.col_payment_amount') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse ($this->trendOverview as $row)
                            <tr>
                                <td class="px-4 py-2">{{ $row['date'] }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('sales_amount', $row['sales_amount'] ?? null) }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('purchase_amount', $row['purchase_amount'] ?? null) }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('inbound_quantity', $row['inbound_quantity'] ?? null) }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('outbound_quantity', $row['outbound_quantity'] ?? null) }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('receipt_amount', $row['receipt_amount'] ?? null) }}</td>
                                <td class="px-4 py-2">{{ $this->dberpFormatReportScalar('payment_amount', $row['payment_amount'] ?? null) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-4 py-6 text-center text-gray-500">{{ __('dberp.resources.comprehensive_summary_analysis.empty_trend') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</x-filament-panels::page>
