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

    <div class="mt-6">
        @if (!empty($stats))
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                @foreach ($stats as $stat)
                    <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                        <flux:subheading>{{ $stat['title'] }}</flux:subheading>
                        <flux:heading size="xl" class="mb-2">{{ $stat['value'] }}</flux:heading>
                    </div>
                @endforeach
            </div>
        @endif

        <flux:card class="mt-8">
            <div class="mb-4">
                <flux:heading size="lg">Daftar Item</flux:heading>
                <flux:subheading>Daftar semua item yang tersedia di gudang ini.</flux:subheading>
            </div>

            <flux:table>
                <flux:table.columns>
                    <flux:table.column>Tipe</flux:table.column>
                    <flux:table.column>Item</flux:table.column>
                    <flux:table.column>Stok</flux:table.column>
                </flux:table.columns>

                <flux:table.rows>
                    @forelse ($this->items as $item)
                        <flux:table.row :key="$item['id']">
                            <flux:table.cell>
                                <flux:badge size="sm"
                                    :color="$item['type'] === 'Parfum' ? 'fuchsia' : ($item['type'] === 'Produk' ? 'cyan' :
                                        'zinc')">
                                    {{ $item['type'] }}</flux:badge>
                            </flux:table.cell>
                            <flux:table.cell class="font-medium">{{ $item['name'] }}</flux:table.cell>
                            <flux:table.cell>{{ number_format($item['stock'], 0, ',', '.') }}</flux:table.cell>
                        </flux:table.row>
                    @empty
                        <flux:table.row>
                            <flux:table.cell colspan="3" class="text-center text-zinc-500">Tidak ada item di gudang
                                ini.
                            </flux:table.cell>
                        </flux:table.row>
                    @endforelse
                </flux:table.rows>
            </flux:table>
        </flux:card>
    </div>
</flux:main>
