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

    <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white mt-6">
        {{ __('dberp.resources.inventory_analysis.section_summary') }}
    </h2>
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        @foreach ([
            ['k' => 'sku_location_count', 'label' => __('dberp.resources.inventory_analysis.card_sku_locations')],
            ['k' => 'realtime_quantity_total', 'label' => __('dberp.resources.inventory_analysis.card_realtime_qty')],
            ['k' => 'available_quantity_total', 'label' => __('dberp.resources.inventory_analysis.card_available_qty')],
            ['k' => 'warning_sku_count', 'label' => __('dberp.resources.inventory_analysis.card_warning_skus')],
            ['k' => 'period_inbound_quantity', 'label' => __('dberp.resources.inventory_analysis.card_period_in')],
            ['k' => 'period_outbound_quantity', 'label' => __('dberp.resources.inventory_analysis.card_period_out')],
            ['k' => 'open_exception_count', 'label' => __('dberp.resources.inventory_analysis.card_open_exceptions')],
            ['k' => 'pending_stocktake_difference_count', 'label' => __('dberp.resources.inventory_analysis.card_pending_stocktake')],
        ] 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>

    <h2 class="text-base font-semibold leading-6 text-gray-950 dark:text-white">
        {{ __('dberp.resources.inventory_analysis.section_flow_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.inventory_analysis.col_date') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.inventory_analysis.col_inbound') }}
                        </th>
                        <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                            {{ __('dberp.resources.inventory_analysis.col_outbound') }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($this->flowTrend 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('inbound', $row['inbound'] ?? null) }}</td>
                            <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('outbound', $row['outbound'] ?? null) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                                {{ __('dberp.resources.inventory_analysis.empty_trend') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </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.inventory_analysis.section_product') }}
            </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.inventory_analysis.col_name') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.inventory_analysis.col_inbound') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.inventory_analysis.col_outbound') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->topProducts 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('inbound', $row['inbound'] ?? null) }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('outbound', $row['outbound'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.inventory_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.inventory_analysis.section_warehouse') }}
            </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.inventory_analysis.col_name') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.inventory_analysis.col_inbound') }}
                                </th>
                                <th class="px-4 py-3 text-start text-sm font-semibold text-gray-950 dark:text-white">
                                    {{ __('dberp.resources.inventory_analysis.col_outbound') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($this->topWarehouses 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('inbound', $row['inbound'] ?? null) }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-950 dark:text-white">{{ $this->dberpFormatReportScalar('outbound', $row['outbound'] ?? null) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
                                        {{ __('dberp.resources.inventory_analysis.empty_structure') }}
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page>
