<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        <div>
            <flux:button href="{{ route('studio.manage.stock_opname.index') }}" wire:navigate class="text-sm">
                Kembali
            </flux:button>
        </div>
    </div>

    <div class="mt-6">
        <div class="space-y-4">
            <flux:card>
                <flux:table>
                    <flux:table.columns>
                        <flux:table.column>Item</flux:table.column>
                        <flux:table.column>Stok Sistem</flux:table.column>
                        <flux:table.column>Stok Outlet</flux:table.column>
                        <flux:table.column>Selisih</flux:table.column>
                    </flux:table.columns>

                    <flux:table.rows>
                        @foreach ($items as $item)
                            <flux:table.row wire:key="{{ $item->id }}">
                                <flux:table.cell>{{ $item->itemable?->name }}</flux:table.cell>
                                <flux:table.cell>{{ $item->qty_system }}</flux:table.cell>
                                <flux:table.cell>{{ $item->qty_physical }}</flux:table.cell>
                                <flux:table.cell variant="strong">
                                    {{ $item->difference }}
                                </flux:table.cell>
                            </flux:table.row>
                        @endforeach
                    </flux:table.rows>
                </flux:table>
            </flux:card>

            @if ($stockOpname['note'])
                <flux:card>
                    <div>
                        <flux:heading size="lg">Catatan</flux:heading>
                    </div>

                    <div class="mt-6">
                        <flux:text>
                            {{ $stockOpname['note'] }}
                        </flux:text>
                    </div>
                </flux:card>
            @endif
        </div>
    </div>
</flux:main>
