<x-admin-layout title="Transfer Antar Cabang" subtitle="Buat transfer stok retail, approval cabang penerima / owner, dan mutasi stok terpusat.">
    <div class="grid gap-5 xl:grid-cols-[420px_1fr]">
        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Buat Transfer Stok</h2>
            <form method="post" action="{{ route('stock-transfers.store') }}" class="mt-4 space-y-3">
                @csrf
                <x-master.select name="from_branch_id" label="Cabang asal" :value="$selectedBranchId" :options="$branches->pluck('name', 'id')->all()" />
                <x-master.select name="to_branch_id" label="Cabang tujuan" :value="old('to_branch_id')" :options="$branches->pluck('name', 'id')->all()" />

                <div class="rounded-md border bg-slate-50 p-3">
                    <div class="mb-3 text-sm font-medium">Item transfer</div>
                    <div class="space-y-2">
                        @foreach ($products->take(8) as $i => $product)
                            <div class="grid grid-cols-[1fr_90px] gap-2">
                                <input type="hidden" name="items[{{ $i }}][product_id]" value="{{ $product->id }}">
                                <div class="rounded-md border bg-white px-3 py-2 text-sm">
                                    <div class="font-medium">{{ $product->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $product->sku }}</div>
                                </div>
                                <input name="items[{{ $i }}][quantity]" type="number" step="0.001" min="0" placeholder="Qty" class="rounded-md border px-2 py-2 text-sm">
                            </div>
                        @endforeach
                    </div>
                </div>

                <textarea name="note" placeholder="Catatan transfer" class="w-full rounded-md border px-3 py-2 text-sm"></textarea>
                <button class="w-full rounded-md bg-slate-900 px-4 py-2 font-medium text-white">Buat Transfer</button>
            </form>

            <div class="mt-5 rounded-md border p-3">
                <div class="text-sm font-medium">Stok tersedia</div>
                <div class="mt-2 max-h-56 space-y-2 overflow-y-auto text-xs text-slate-600">
                    @forelse ($stocks as $branchStocks)
                        <div class="font-semibold text-slate-900">{{ $branchStocks->first()->branch?->name }}</div>
                        @foreach ($branchStocks as $stock)
                            <div class="flex justify-between gap-2"><span>{{ $stock->product?->name }}</span><span>{{ rtrim(rtrim(number_format((float) $stock->quantity, 3, ',', '.'), '0'), ',') }}</span></div>
                        @endforeach
                    @empty
                        <div>Tidak ada stok retail.</div>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="space-y-4">
            @forelse ($transfers as $transfer)
                <article class="rounded-lg bg-white p-5 shadow-sm">
                    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                        <div>
                            <div class="font-semibold">{{ $transfer->transfer_no }}</div>
                            <div class="mt-1 text-sm text-slate-500">{{ $transfer->fromBranch?->name }} -> {{ $transfer->toBranch?->name }}</div>
                            <div class="text-sm text-slate-500">Dibuat oleh {{ $transfer->requester?->name ?? '-' }} pada {{ $transfer->created_at->format('d/m/Y H:i') }}</div>
                        </div>
                        <span class="w-fit rounded-full border px-3 py-1 text-xs {{ $transfer->status === 'approved' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : ($transfer->status === 'pending' ? 'border-amber-200 bg-amber-50 text-amber-700' : 'border-slate-200 bg-slate-50 text-slate-700') }}">{{ $transfer->status }}</span>
                    </div>

                    <div class="mt-4 divide-y rounded-md border text-sm">
                        @foreach ($transfer->items as $item)
                            <div class="flex justify-between gap-3 px-3 py-2"><span>{{ $item->product?->name }}</span><strong>{{ rtrim(rtrim(number_format((float) $item->quantity, 3, ',', '.'), '0'), ',') }}</strong></div>
                        @endforeach
                    </div>

                    @if ($transfer->note)
                        <div class="mt-3 rounded-md bg-slate-50 px-3 py-2 text-sm text-slate-600">{{ $transfer->note }}</div>
                    @endif

                    @if ($transfer->status === 'pending')
                        <div class="mt-4 flex flex-wrap gap-2">
                            <form method="post" action="{{ route('stock-transfers.approve', $transfer) }}">
                                @csrf
                                <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white">Approve</button>
                            </form>
                            <form method="post" action="{{ route('stock-transfers.reject', $transfer) }}">
                                @csrf
                                <button class="rounded-md border px-4 py-2 text-sm">Reject</button>
                            </form>
                            <form method="post" action="{{ route('stock-transfers.cancel', $transfer) }}">
                                @csrf
                                <button class="rounded-md border border-red-200 px-4 py-2 text-sm text-red-700">Cancel</button>
                            </form>
                        </div>
                    @endif
                </article>
            @empty
                <div class="rounded-lg bg-white p-8 text-center text-sm text-slate-500 shadow-sm">Belum ada transfer stok.</div>
            @endforelse

            {{ $transfers->links() }}
        </section>
    </div>
</x-admin-layout>
