@php
    $decimalNow = $errors->any() ? (bool) old('allow_decimal') : (bool) $product->allow_decimal;
    $activeNow = $errors->any() ? (bool) old('is_active') : (bool) ($product->is_active ?? true);
    $input = 'mt-1 w-full rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500';
    $tiersInit = $errors->any()
        ? array_values((array) old('tiers', []))
        : $product->prices->map(fn ($t) => ['min_qty' => (float) $t->min_qty, 'price' => (int) $t->price])->values()->all();
@endphp
<form method="POST" action="{{ $action }}" class="max-w-3xl space-y-5 rounded-xl bg-white p-5 shadow"
      x-data="{ unit: '{{ old('unit', $product->unit ?? 'pcs') }}', decimal: {{ $decimalNow ? 'true' : 'false' }}, decUnits: ['kg','gram','liter','meter'],
                cost: {{ (int) old('cost_price', $product->cost_price ?? 0) }}, sell: {{ (int) old('sell_price', $product->sell_price ?? 0) }},
                tiers: @js($tiersInit) }">
    @csrf
    @if ($product->exists) @method('PUT') @endif

    <div class="grid gap-4 md:grid-cols-2">
        <div class="md:col-span-2">
            <label class="text-sm font-medium">Nama produk</label>
            <input name="name" value="{{ old('name', $product->name) }}" required class="{{ $input }}">
        </div>
        <div>
            <label class="text-sm font-medium">Kode SKU</label>
            <input name="sku" value="{{ old('sku', $product->sku) }}" required class="{{ $input }}">
        </div>
        <div>
            <label class="text-sm font-medium">Barcode <span class="font-normal text-gray-500">(opsional)</span></label>
            <input name="barcode" value="{{ old('barcode', $product->barcode) }}" class="{{ $input }}">
        </div>
        <div>
            <label class="text-sm font-medium">Kategori</label>
            <select name="category_id" class="{{ $input }}">
                <option value="">Tanpa kategori</option>
                @foreach ($categories as $c)
                    <option value="{{ $c->id }}" @selected(old('category_id', $product->category_id) == $c->id)>{{ $c->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="text-sm font-medium">Satuan</label>
            <select name="unit" x-model="unit" @change="decimal = decUnits.includes(unit)" class="{{ $input }}">
                @foreach (\App\Models\Product::UNITS as $u)
                    <option value="{{ $u }}">{{ $u }}</option>
                @endforeach
            </select>
        </div>
        <div class="md:col-span-2">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="allow_decimal" value="1" x-model="decimal" class="rounded border-gray-300">
                Boleh dijual dalam jumlah pecahan (contoh: 1,5 kg)
            </label>
        </div>
        <div>
            <label class="text-sm font-medium">Harga beli (Rp)</label>
            <input type="number" min="0" step="1" name="cost_price" x-model.number="cost" required class="{{ $input }}">
        </div>
        <div>
            <label class="text-sm font-medium">Harga jual (Rp)</label>
            <input type="number" min="0" step="1" name="sell_price" x-model.number="sell" required class="{{ $input }}">
        </div>

        @unless ($product->exists)
            <div>
                <label class="text-sm font-medium">Stok awal</label>
                <input type="number" min="0" step="0.001" name="stock" value="{{ old('stock', 0) }}" required class="{{ $input }}">
            </div>
        @else
            <div>
                <label class="text-sm font-medium">Stok saat ini</label>
                <div class="mt-1 rounded-lg bg-gray-50 px-3 py-2 text-sm">
                    @qty($product->stock) {{ $product->unit }}
                    <a href="{{ route('stock.index', ['q' => $product->sku]) }}" class="ml-2 text-indigo-600 hover:underline">Ubah lewat menu Stok</a>
                </div>
            </div>
        @endunless
        <div>
            <label class="text-sm font-medium">Batas minimum stok</label>
            <input type="number" min="0" step="0.001" name="min_stock" value="{{ old('min_stock', $product->min_stock ?? 0) }}" required class="{{ $input }}">
        </div>
        {{-- Harga grosir (bertingkat) --}}
        <div class="rounded-lg border bg-gray-50 p-3 md:col-span-2">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <div class="text-sm font-medium">Harga grosir (bertingkat)</div>
                    <div class="text-xs text-gray-500">Jika pembeli mengambil jumlah tertentu atau lebih, <b>seluruh jumlahnya</b> memakai harga tingkat itu.
                        Contoh: harga normal Rp15.000/kg, beli ≥ 25 kg jadi Rp14.000/kg, maka 30 kg = 30 × Rp14.000.</div>
                </div>
                <button type="button" @click="tiers.push({ min_qty: '', price: '' })" class="shrink-0 text-sm font-medium text-indigo-600 hover:underline">+ Tambah tingkat</button>
            </div>
            <template x-for="(t, i) in tiers" :key="i">
                <div class="mt-2 flex flex-wrap items-end gap-2">
                    <div>
                        <label class="text-xs text-gray-500">Beli minimal (<span x-text="unit"></span>)</label>
                        <input type="number" min="0" :step="decimal ? '0.001' : '1'" :name="'tiers[' + i + '][min_qty]'" x-model="t.min_qty"
                               class="mt-1 w-32 rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">Harga per <span x-text="unit"></span> (Rp)</label>
                        <input type="number" min="0" step="1" :name="'tiers[' + i + '][price]'" x-model="t.price"
                               class="mt-1 w-36 rounded-lg border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <button type="button" @click="tiers.splice(i, 1)" class="pb-2 text-gray-400 hover:text-red-600" aria-label="Hapus tingkat">✕</button>
                    <p class="basis-full text-xs text-red-600" x-show="t.price !== '' && Number(t.price) >= sell">Harus lebih murah dari harga jual normal.</p>
                    <p class="basis-full text-xs text-amber-700" x-show="t.price !== '' && Number(t.price) > 0 && Number(t.price) < cost">⚠ Di bawah harga beli (toko rugi pada tingkat ini).</p>
                </div>
            </template>
            <p x-show="!tiers.length" class="mt-2 text-xs text-gray-400">Belum ada harga grosir.</p>
        </div>

        <div class="md:col-span-2">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="is_active" value="1" @checked($activeNow) class="rounded border-gray-300">
                Produk aktif (tampil di halaman kasir)
            </label>
        </div>
    </div>

    <div class="flex gap-2">
        <button class="rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white hover:bg-indigo-700">Simpan</button>
        <a href="{{ route('products.index') }}" class="rounded-lg border px-5 py-2 text-sm hover:bg-gray-50">Batal</a>
    </div>
</form>