@php $input = 'w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500'; @endphp
<x-pos-layout title="Retur dari Pelanggan">
    <x-slot name="actions">
        <a href="{{ route('stock.returns.index') }}" class="rounded-lg border bg-white px-4 py-2 text-sm hover:bg-gray-50">← Daftar retur</a>
    </x-slot>
    <x-stock-tabs />

    {{-- Langkah 1: cari transaksi --}}
    <form method="GET" class="mb-4 flex flex-wrap items-end gap-2 rounded-xl bg-white p-4 shadow">
        <div class="grow md:max-w-sm">
            <label class="text-xs font-medium text-gray-600">Langkah 1 · Nomor invoice pada struk pelanggan</label>
            <input type="text" name="invoice" value="{{ request('invoice', $sale->invoice_no ?? '') }}" placeholder="INV-20261021-0001" autofocus class="mt-1 {{ $input }}">
        </div>
        <button class="rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white">Cari transaksi</button>
    </form>

    @if ($lookupError)
        <div class="mb-4 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900">{{ $lookupError }}</div>
    @endif

    @if ($sale)
        <form method="POST" action="{{ route('stock.returns.store') }}" class="space-y-4"
              x-data="{ refund: 0, calc() {
                  let t = 0;
                  document.querySelectorAll('[data-line]').forEach(el => {
                      const q = parseFloat(el.querySelector('[data-qty]').value) || 0;
                      const p = parseFloat(el.dataset.price) || 0, left = parseFloat(el.dataset.left) || 0, rest = parseFloat(el.dataset.rest) || 0;
                      t += (q > 0 && Math.abs(q - left) < 1e-9) ? rest : Math.min(rest, Math.round(q * p));
                  });
                  this.refund = t;
              } }" x-init="calc()">
            @csrf
            <input type="hidden" name="idempotency_key" value="{{ $key }}">
            <input type="hidden" name="sale_id" value="{{ $sale->id }}">

            <div class="rounded-xl bg-white p-4 text-sm shadow">
                <div class="mb-2 text-xs font-medium text-gray-600">Langkah 2 · Pilih barang yang dikembalikan</div>
                <div class="mb-3 flex flex-wrap gap-x-6 gap-y-1 text-gray-600">
                    <span>Invoice: <b class="text-gray-900">{{ $sale->invoice_no }}</b></span>
                    <span>Tanggal: {{ $sale->created_at->format('d/m/Y H:i') }}</span>
                    <span>Kasir: {{ $sale->cashier->name ?? '-' }}</span>
                    <span>Total: <b class="text-gray-900">@rupiah($sale->total)</b> ({{ $sale->payment_label }})</span>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="bg-gray-50 text-left text-xs uppercase text-gray-500">
                            <tr><th class="px-3 py-2">Barang</th><th class="px-3 py-2 text-right">Dibeli</th><th class="px-3 py-2 text-right">Sudah diretur</th>
                                <th class="px-3 py-2 text-right">Harga bayar</th><th class="px-3 py-2">Jumlah diretur</th><th class="px-3 py-2">Kondisi barang</th></tr>
                        </thead>
                        <tbody class="divide-y">
                            @foreach ($sale->items as $it)
                                @php
                                    $q = (float) ($returned[$it->id]->q ?? 0);
                                    $r = (int) ($returned[$it->id]->r ?? 0);
                                    $left = \App\Support\Refund::remaining($it->quantity, $q);
                                @endphp
                                <tr data-line data-price="{{ $it->unit_price }}" data-left="{{ $left }}" data-rest="{{ max(0, $it->subtotal - $r) }}" class="{{ $left <= 0 ? 'bg-gray-50 text-gray-400' : '' }}">
                                    <td class="px-3 py-2 font-medium">{{ $it->product_name }}</td>
                                    <td class="px-3 py-2 text-right">@qty($it->quantity) {{ $it->unit }}</td>
                                    <td class="px-3 py-2 text-right">@qty($q)</td>
                                    <td class="px-3 py-2 text-right">@rupiah($it->unit_price)</td>
                                    <td class="px-3 py-2">
                                        @if ($left > 0)
                                            <div class="flex items-center gap-2">
                                                <input data-qty type="number" min="0" max="{{ $left }}" step="any" name="items[{{ $it->id }}][quantity]"
                                                       value="{{ old('items.' . $it->id . '.quantity', 0) }}" @input="calc()" class="w-24 rounded-lg border-gray-300 text-sm">
                                                <span class="text-xs text-gray-500">maks @qty($left) {{ $it->unit }}</span>
                                            </div>
                                        @else
                                            <span class="text-xs">sudah diretur semua</span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-2">
                                        @if ($left > 0)
                                            <select name="items[{{ $it->id }}][restock]" class="rounded-lg border-gray-300 text-sm">
                                                <option value="1" @selected(old('items.' . $it->id . '.restock', '1') === '1')>Layak jual (masuk stok)</option>
                                                <option value="0" @selected(old('items.' . $it->id . '.restock') === '0')>Cacat / rusak (tidak masuk stok)</option>
                                            </select>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="grid gap-3 rounded-xl bg-white p-4 shadow md:grid-cols-3">
                <div>
                    <label class="text-xs font-medium text-gray-600">Alasan retur</label>
                    <select name="reason" class="mt-1 {{ $input }}">
                        @foreach (\App\Models\SaleReturn::REASONS as $k => $v)<option value="{{ $k }}" @selected(old('reason', 'defect') === $k)>{{ $v }}</option>@endforeach
                    </select>
                </div>
                <div>
                    <label class="text-xs font-medium text-gray-600">Refund dikembalikan lewat</label>
                    <select name="refund_method" class="mt-1 {{ $input }}">
                        @foreach (\App\Models\Sale::PAYMENT_LABELS as $k => $v)<option value="{{ $k }}" @selected(old('refund_method', $sale->payment_method) === $k)>{{ $v }}</option>@endforeach
                    </select>
                </div>
                <div>
                    <label class="text-xs font-medium text-gray-600">Catatan (opsional)</label>
                    <input type="text" name="note" value="{{ old('note') }}" maxlength="500" class="mt-1 {{ $input }}">
                </div>
                <div class="flex flex-wrap items-center justify-between gap-3 border-t pt-3 md:col-span-3">
                    <div>
                        <div class="text-xs text-gray-500">Refund ke pelanggan</div>
                        <div class="text-3xl font-extrabold text-indigo-700" x-text="'Rp' + Math.round(refund).toLocaleString('id-ID')"></div>
                        <div class="text-xs text-gray-500">Dihitung dari harga yang dibayar pelanggan. Ingin tukar barang? Catat retur ini, lalu buat transaksi baru di kasir.</div>
                    </div>
                    <button class="rounded-lg bg-green-600 px-6 py-3 font-semibold text-white hover:bg-green-700"
                            onclick="return confirm('Simpan retur ini? Stok dan laporan akan ikut berubah.')">Simpan retur</button>
                </div>
            </div>
        </form>
    @endif
</x-pos-layout>