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

    <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white mt-6">
        {{ __('dberp.resources.settlement_analysis.section_summary') }}
    </h2>
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
        @foreach ([
            ['k' => 'receivable_remaining_total', 'label' => __('dberp.resources.settlement_analysis.card_receivable_balance')],
            ['k' => 'payable_remaining_total', 'label' => __('dberp.resources.settlement_analysis.card_payable_balance')],
            ['k' => 'receipt_amount_period', 'label' => __('dberp.resources.settlement_analysis.card_receipt_period')],
            ['k' => 'payment_amount_period', 'label' => __('dberp.resources.settlement_analysis.card_payment_period')],
            ['k' => 'write_off_confirmed_count', 'label' => __('dberp.resources.settlement_analysis.card_write_off_count')],
            ['k' => 'receipt_unwritten_count', 'label' => __('dberp.resources.settlement_analysis.card_receipt_unwritten')],
            ['k' => 'payment_unwritten_count', 'label' => __('dberp.resources.settlement_analysis.card_payment_unwritten')],
            ['k' => 'statement_confirmed_count', 'label' => __('dberp.resources.settlement_analysis.card_statement_confirmed')],
            ['k' => 'receivable_overdue_open_count', 'label' => __('dberp.resources.settlement_analysis.card_receivable_overdue')],
            ['k' => 'payable_overdue_open_count', 'label' => __('dberp.resources.settlement_analysis.card_payable_overdue')],
        ] as $card)
            <div class="fi-wi-stats-overview-stat">
                <div class="fi-wi-stats-overview-stat-content">
                    <div class="fi-wi-stats-overview-stat-label-ctn">
                        <span class="fi-wi-stats-overview-stat-label">{{ $card['label'] }}</span>
                    </div>
                    <div class="fi-wi-stats-overview-stat-value">
                        {{ $this->dberpFormatReportScalar($card['k'], $this->summary[$card['k']] ?? null) }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_receipt_trend') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_date') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_amount') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->receiptTrend as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['date'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('amount', $row['amount'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.settlement_analysis.empty_trend') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_payment_trend') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_date') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_amount') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->paymentTrend as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['date'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('amount', $row['amount'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.settlement_analysis.empty_trend') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_customer') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_name') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_remaining') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->topCustomers as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['name'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('amount', $row['amount'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.settlement_analysis.empty_structure') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_supplier') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_name') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.settlement_analysis.col_remaining') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->topSuppliers as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['name'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('amount', $row['amount'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="2" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.settlement_analysis.empty_structure') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_receivable_aging') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <tbody>
                            @foreach ([
                                ['k' => 'current_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_current')],
                                ['k' => 'bucket_1_30_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_1_30')],
                                ['k' => 'bucket_31_60_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_31_60')],
                                ['k' => 'bucket_61_90_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_61_90')],
                                ['k' => 'bucket_91_plus_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_91_plus')],
                            ] as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['label'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar($row['k'], $this->receivableAging[$row['k']] ?? null) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="grid gap-2">
            <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
                {{ __('dberp.resources.settlement_analysis.section_payable_aging') }}
            </h2>
            <div class="fi-ta-ctn">
                <div class="fi-ta-main overflow-x-auto">
                    <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start text-sm dark:divide-white/5">
                        <tbody>
                            @foreach ([
                                ['k' => 'current_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_current')],
                                ['k' => 'bucket_1_30_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_1_30')],
                                ['k' => 'bucket_31_60_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_31_60')],
                                ['k' => 'bucket_61_90_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_61_90')],
                                ['k' => 'bucket_91_plus_amount', 'label' => __('dberp.resources.settlement_analysis.bucket_91_plus')],
                            ] as $row)
                                <tr>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['label'] }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar($row['k'], $this->payableAging[$row['k']] ?? null) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>
