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

    <p class="text-xs text-gray-500 dark:text-gray-400">
        {{ __('dberp.resources.settlement_aging_analysis.page_hint') }}
    </p>

    <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
        {{ __('dberp.resources.settlement_aging_analysis.section_bucket_summary') }}
    </h2>
    <div class="grid gap-4 md:grid-cols-3 xl:grid-cols-6">
        @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')],
            ['k' => 'total_amount', 'label' => __('dberp.resources.settlement_aging_analysis.col_total')],
        ] 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->totals[$card['k']] ?? null) }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
        {{ __('dberp.resources.settlement_aging_analysis.section_counterparty_detail') }}
    </h2>
    <div class="fi-ta-ctn overflow-hidden rounded-xl border border-gray-200 shadow-sm dark:border-gray-700">
        <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_aging_analysis.col_counterparty') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_aging_analysis.col_record_count') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_analysis.bucket_current') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_analysis.bucket_1_30') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_analysis.bucket_31_60') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_analysis.bucket_61_90') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_analysis.bucket_91_plus') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.settlement_aging_analysis.col_total') }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($this->rows as $row)
                        <tr>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">
                                <a
                                    class="fi-link fi-size-sm"
                                    href="{{ $this->counterpartyDetailUrl((int) $row['counterparty_id']) }}"
                                    rel="noopener noreferrer"
                                    target="_blank"
                                >{{ $row['counterparty_name'] }}</a>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $row['record_count'] }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('current_amount', $row['current_amount'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('bucket_1_30_amount', $row['bucket_1_30_amount'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('bucket_31_60_amount', $row['bucket_31_60_amount'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('bucket_61_90_amount', $row['bucket_61_90_amount'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('bucket_91_plus_amount', $row['bucket_91_plus_amount'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm font-medium text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('total_amount', $row['total_amount'] ?? null) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                {{ __('dberp.resources.settlement_aging_analysis.empty_rows') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</x-filament-panels::page>
