@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('inventory.breadcrumb_root')],
        ['label' => __('inventory.visibility.title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('inventory.visibility.title')"
    :subtitle="__('inventory.visibility.subtitle')"
    page-icon="fe fe-bar-chart-2"
    :breadcrumbs="$breadcrumbs"
>
    <x-ui.operational.index-shell>
        <div class="alert alert-info small mb-3">
            {{ __('inventory.visibility.notice') }}
        </div>

        <x-ui.table.table :columns="[
            ['label' => __('inventory.visibility.columns.warehouse')],
            ['label' => __('inventory.visibility.columns.item')],
            ['label' => __('inventory.visibility.columns.on_hand')],
            ['label' => __('inventory.visibility.columns.reserved')],
            ['label' => __('inventory.visibility.columns.available')],
        ]">
            @forelse ($rows as $row)
                <x-ui.table.row>
                    <td>{{ $row->warehouse?->code }} — {{ $row->warehouse?->name }}</td>
                    <td>{{ $row->item?->sku }} — {{ $row->item?->name }}</td>
                    <td>{{ $row->on_hand_quantity }}</td>
                    <td>{{ $row->reserved_quantity }}</td>
                    <td>{{ $row->available_quantity }}</td>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <td colspan="5" class="p-0">
                        <x-ui.operational.empty-state :title="__('operational_ui.index.empty_default')" />
                    </td>
                </x-ui.table.row>
            @endforelse
        </x-ui.table.table>

        <x-slot:pagination>
            {{ $rows->links() }}
        </x-slot:pagination>
    </x-ui.operational.index-shell>
</x-ui.layout.page>
