@props(['form'])

<div class="mt-8 space-y-4">
    <div class="flex items-center gap-2 px-1">
        <flux:icon icon="map-pin" variant="outline" class="text-gray-400" size="sm" />
        <flux:heading size="lg">Manajemen Stok Outlet</flux:heading>
    </div>

    @if (count($form->stock_adjustments['outlet'] ?? []) > 0)
        <flux:card class="space-y-6">
            <div class="flex items-center gap-2 border-b border-gray-100 dark:border-white/5 pb-4 -mx-6 px-6">
                <div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
                <flux:heading size="md" class="font-bold">Outlet Penjualan</flux:heading>
            </div>

            <div class="space-y-8">
                @foreach ($form->stock_adjustments['outlet'] as $id => $adj)
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <div class="flex flex-col">
                                <span
                                    class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ $adj['name'] }}</span>
                            </div>
                            <flux:badge color="emerald" size="sm" variant="pill" class="font-mono">Stok:
                                {{ number_format($adj['stock']) }}</flux:badge>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <flux:field>
                                <flux:label class="text-xs font-medium opacity-70">Penyesuaian Stok Baru</flux:label>
                                <flux:input.group>
                                    <flux:input.group.prefix class="bg-gray-50/50 dark:bg-white/5">
                                        <flux:icon icon="plus" variant="mini" />
                                    </flux:input.group.prefix>
                                    <flux:input type="number"
                                        wire:model="form.stock_adjustments.outlet.{{ $id }}.new_stock"
                                        class="font-mono" />
                                </flux:input.group>
                            </flux:field>

                            <flux:field>
                                <flux:label class="text-xs font-medium opacity-70">Catatan Perubahan</flux:label>
                                <flux:input placeholder="Alasan penyesuaian..."
                                    wire:model="form.stock_adjustments.outlet.{{ $id }}.note" autocomplete="off" />
                            </flux:field>
                        </div>
                    </div>
                    @if (!$loop->last)
                        <flux:separator variant="subtle" />
                    @endif
                @endforeach
            </div>
        </flux:card>
    @else
        <flux:card class="p-6 text-center italic text-gray-400 text-sm">
            Tidak ada outlet yang terhubung atau Anda tidak memiliki akses ke outlet manapun.
        </flux:card>
    @endif
</div>