@php
    $config = [
        'mode' => 'out',
        'searchUrl' => route('stock.lookup'),
        'resolveUrl' => route('stock.resolve'),
        'storeUrl' => route('stock.outs.store'),
        'header' => ['reason' => 'expired', 'supplier' => '', 'note' => ''],
    ];
    $input = 'mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp
<x-pos-layout title="Barang Keluar (Expired / Rusak / Retur ke Distributor)">
    <x-slot name="actions">
        <a href="{{ route('stock.outs.index') }}" class="rounded-lg border bg-white px-4 py-2 text-sm hover:bg-gray-50">← Daftar barang keluar</a>
    </x-slot>
    <x-stock-tabs />

    <div x-data="linesForm(@js($config))" @keydown.window="onKey($event)">
        <div class="mb-3 grid gap-3 rounded-xl bg-white p-3 shadow md:grid-cols-3">
            <div>
                <label class="text-xs font-medium text-gray-600">Alasan</label>
                <select x-model="h.reason" class="{{ $input }}">
                    @foreach (\App\Models\StockOut::REASONS as $k => $v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div x-show="h.reason === 'return_supplier'" x-cloak>
                <label class="text-xs font-medium text-gray-600">Distributor tujuan retur</label>
                <input type="text" x-model="h.supplier" list="supplier-list" maxlength="150" class="{{ $input }}">
                <datalist id="supplier-list">@foreach ($suppliers as $s)<option value="{{ $s }}">@endforeach</datalist>
            </div>
            <div :class="h.reason === 'return_supplier' ? '' : 'md:col-span-2'">
                <label class="text-xs font-medium text-gray-600">Catatan (opsional)</label>
                <input type="text" x-model="h.note" maxlength="500" placeholder="Contoh: expired Oktober 2026, rak 3" class="{{ $input }}">
            </div>
            <p class="text-xs text-gray-500 md:col-span-3" x-show="h.reason !== 'return_supplier'">
                Stok berkurang dan nilainya (harga beli) dicatat sebagai <b>kerugian barang</b> di laporan.
            </p>
            <p class="text-xs text-gray-500 md:col-span-3" x-show="h.reason === 'return_supplier'" x-cloak>
                Stok berkurang, tetapi nilainya <b>tidak</b> dihitung sebagai kerugian karena barang dikembalikan ke distributor.
            </p>
        </div>

        @include('stock._lines', ['mode' => 'out'])
    </div>

    @include('stock._lines_script')
</x-pos-layout>