{{-- Membutuhkan: $mode = 'in' | 'out' ; berada di dalam x-data="linesForm(...)" --}}
<div class="rounded-xl bg-white p-3 shadow">
    <div class="relative">
        <input x-ref="search" x-model="query" type="text" autocomplete="off" spellcheck="false"
               @keydown.enter.prevent="onEnter()" @keydown.arrow-down.prevent="onArrow(1)" @keydown.arrow-up.prevent="onArrow(-1)"
               placeholder="Cari nama / SKU atau scan barcode, lalu Enter  (contoh: 24*mie = langsung 24)"
               class="w-full rounded-lg border-gray-300 py-2.5 pl-3 pr-12 text-base focus:border-indigo-500 focus:ring-indigo-500">
        <kbd class="pointer-events-none absolute right-3 top-3 hidden rounded border bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 lg:block">F2</kbd>

        <div x-show="term !== ''" x-cloak class="absolute inset-x-0 top-full z-20 mt-1 max-h-72 overflow-y-auto rounded-xl border bg-white shadow-lg">
            <template x-for="(p, idx) in results" :key="p.id">
                <button type="button" :id="'lr-' + idx" @click="add(p, parse().qty, parse().prefixed)"
                        @mousemove="($event.movementX || $event.movementY) && (hi = idx)"
                        :class="hi === idx ? 'bg-indigo-50' : ''"
                        class="flex w-full items-center justify-between gap-3 border-b px-3 py-2 text-left last:border-0">
                    <div class="min-w-0">
                        <div class="truncate text-sm font-medium" x-text="p.name"></div>
                        <div class="truncate text-xs text-gray-500" x-text="p.sku + ' · stok ' + qty(p.stock) + ' ' + p.unit"></div>
                    </div>
                    <div class="shrink-0 text-right text-xs text-gray-500" x-text="'beli ' + rupiah(p.cost_price)"></div>
                </button>
            </template>
            <p x-show="!results.length && !searching" class="px-3 py-4 text-center text-sm text-gray-500">Produk tidak ditemukan.</p>
            <p x-show="!results.length && searching" class="px-3 py-4 text-center text-sm text-gray-500">Mencari...</p>
        </div>
    </div>

    <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
        <button type="button" @click="pasteOpen = !pasteOpen" class="rounded-lg border px-3 py-1 hover:bg-gray-50">📋 Tempel dari spreadsheet</button>
        <span class="text-xs text-gray-500">Banyak barang? Salin kolom dari Excel lalu tempel.</span>
        <span x-show="notice" x-cloak x-text="notice" class="ml-auto rounded bg-green-100 px-2 py-0.5 text-xs text-green-800"></span>
    </div>

    <div x-show="pasteOpen" x-cloak class="mt-2 rounded-lg border bg-gray-50 p-3">
        <p class="text-xs text-gray-600">
            Satu barang per baris: <b>kode (SKU / barcode)</b>, <b>jumlah</b>@if ($mode === 'in'), lalu <b>harga beli</b> (opsional)@endif.
            Pisahkan dengan Tab (dari Excel), titik-koma, atau spasi. Desimal pakai koma. Contoh:
            <code class="rounded bg-white px-1">SMB-001  25@if ($mode === 'in')  13500@endif</code>
        </p>
        <textarea x-model="pasteText" rows="5" class="mt-2 w-full rounded-lg border-gray-300 font-mono text-sm"></textarea>
        <div class="mt-2 flex gap-2">
            <button type="button" @click="importPaste()" class="rounded-lg bg-indigo-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-indigo-700">Masukkan ke daftar</button>
            <button type="button" @click="pasteOpen = false" class="rounded-lg border px-4 py-1.5 text-sm hover:bg-white">Tutup</button>
        </div>
    </div>

    <div x-show="missing.length" x-cloak class="mt-2 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900">
        <div class="font-medium">Perlu dicek (<span x-text="missing.length"></span> baris tidak dimasukkan):</div>
        <ul class="ml-5 mt-1 list-disc text-xs"><template x-for="m in missing"><li x-text="m"></li></template></ul>
        <p class="mt-1 text-xs">Barang yang belum terdaftar harus ditambahkan dulu di menu Produk.</p>
    </div>

    <p x-show="error" x-cloak x-text="error" class="mt-2 rounded-lg bg-red-100 px-3 py-2 text-sm font-medium text-red-700"></p>
</div>

<div class="mt-3 overflow-hidden rounded-xl bg-white shadow">
    <div class="hidden items-center gap-2 border-b bg-gray-50 px-2 py-1 text-xs font-medium uppercase text-gray-500 md:flex">
        <span class="w-6 shrink-0 text-right">#</span>
        <span class="min-w-0 flex-1">Barang</span>
        @if ($mode === 'out')<span class="w-24 shrink-0 text-right">Stok</span>@endif
        <span class="w-32 shrink-0 text-center">Jumlah</span>
        @if ($mode === 'in')<span class="w-32 shrink-0 text-right">Harga beli / sat.</span>@endif
        <span class="w-28 shrink-0 text-right">{{ $mode === 'in' ? 'Subtotal' : 'Nilai (harga beli)' }}</span>
        <span class="w-6 shrink-0"></span>
    </div>

    <div class="max-h-[55vh] overflow-y-auto">
        <p x-show="!rows.length" class="px-4 py-10 text-center text-sm text-gray-500">Belum ada barang. Scan barcode atau ketik nama produk di atas.</p>

        <template x-for="(r, i) in rows" :key="r.id">
            <div :id="'row-' + r.id" class="flex flex-wrap items-center gap-2 border-b px-2 py-1.5 text-sm md:flex-nowrap">
                <span class="w-6 shrink-0 text-right text-xs text-gray-400" x-text="i + 1"></span>
                <div class="min-w-0 flex-1 basis-40">
                    <div class="truncate font-medium" x-text="r.name"></div>
                    <div class="truncate text-xs text-gray-500" x-text="r.sku"></div>
                    @if ($mode === 'in')
                        <div x-show="Number(r.cost) !== r.curCost" class="text-xs text-gray-500" x-text="'sebelumnya ' + rupiah(r.curCost)"></div>
                        <div x-show="Number(r.cost) >= r.sell && r.sell > 0" class="text-xs font-medium text-amber-700">⚠ harga beli ≥ harga jual</div>
                    @endif
                </div>
                @if ($mode === 'out')
                    <div class="w-24 shrink-0 text-right text-gray-600" x-text="qty(r.stock) + ' ' + r.unit"></div>
                @endif
                <div class="flex w-32 shrink-0 items-center justify-center gap-1">
                    <input :id="'q-' + r.id" type="number" inputmode="decimal" x-model.number="r.qty" min="0"
                           :step="r.allow_decimal ? '0.001' : '1'"
                           @change="fixQty(r)" @keydown.enter.prevent="afterQty(r)"
                           class="h-8 w-20 rounded border-gray-300 p-1 text-center text-sm font-semibold focus:border-indigo-500 focus:ring-indigo-500">
                    <span class="text-xs text-gray-500" x-text="r.unit"></span>
                </div>
                @if ($mode === 'in')
                    <div class="w-32 shrink-0">
                        <input :id="'c-' + r.id" type="number" inputmode="numeric" x-model.number="r.cost" min="0" step="1"
                               @change="fixCost(r)" @keydown.enter.prevent="fixCost(r); $refs.search.focus()"
                               class="h-8 w-full rounded border-gray-300 p-1 text-right text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                @endif
                <div class="w-28 shrink-0 text-right font-semibold" x-text="rupiah(lineValue(r))"></div>
                <button type="button" @click="remove(i)" class="w-6 shrink-0 text-gray-400 hover:text-red-600" aria-label="Hapus">✕</button>
            </div>
        </template>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 border-t bg-gray-50 px-4 py-3">
        <div class="text-sm text-gray-600">
            <span x-text="rows.length"></span> jenis barang
            <span x-show="lossRows" x-cloak class="ml-2 font-medium text-amber-700">· <span x-text="lossRows"></span> barang harga beli ≥ harga jual</span>
        </div>
        <div class="flex items-center gap-4">
            <div class="text-right">
                <div class="text-xs text-gray-500">{{ $mode === 'in' ? 'Total pembelian' : 'Nilai barang keluar (harga beli)' }}</div>
                <div class="text-2xl font-extrabold leading-none text-indigo-700" x-text="rupiah(totalValue)"></div>
            </div>
            <button type="button" @click="submit()" :disabled="!rows.length || busy"
                    class="rounded-lg bg-green-600 px-6 py-3 font-semibold text-white hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50">
                <span x-show="!busy">{{ $mode === 'in' ? 'Simpan penerimaan' : 'Simpan' }} <span class="hidden text-xs font-normal opacity-80 lg:inline">(F9)</span></span>
                <span x-show="busy">Menyimpan...</span>
            </button>
        </div>
    </div>
</div>