@extends('layouts.app')
@section('title','Buat Pembelian')
@section('page-title','Buat Pembelian')

@push('head')
<style>
.ss-wrap{position:relative}
.ss-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;background:#fff;outline:none;box-sizing:border-box;line-height:1.4}
.ss-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.ss-input.is-invalid{border-color:#f87171}
.ss-input-sm{width:100%;border:1px solid #e5e7eb;border-radius:.375rem;padding:.25rem .5rem;font-size:.875rem;background:#fff;outline:none;box-sizing:border-box;line-height:1.4}
.ss-input-sm:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
.ss-dropdown{position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.11);z-index:9999;max-height:220px;overflow-y:auto}
.ss-item{padding:7px 11px;cursor:pointer;font-size:.875rem;line-height:1.35;border-bottom:1px solid #f3f4f6;user-select:none}
.ss-item:last-child{border-bottom:none}
.ss-item:hover{background:#eff6ff}
.ss-item-muted{color:#6b7280;font-style:italic}
.ss-empty{padding:9px 11px;color:#9ca3af;font-size:.84rem}
.ss-sub{font-size:.77rem;color:#9ca3af;margin-top:1px}
</style>
@endpush

@section('content')
<div class="max-w-4xl">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<form method="POST" action="{{ route('purchases.store') }}" class="space-y-5" id="purchase-form">
@csrf

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div class="sm:col-span-2">
        <label class="block text-sm font-medium text-gray-700 mb-1">Pemasok <span class="text-red-500">*</span></label>
        <div class="ss-wrap">
            <input type="text" id="sup-search" autocomplete="off" placeholder="Cari atau pilih pemasok…"
                   class="ss-input @error('supplier_id') is-invalid @enderror">
            <input type="hidden" name="supplier_id" id="sup-hidden" value="{{ old('supplier_id') }}">
            <div id="sup-dropdown" class="ss-dropdown" style="display:none"></div>
        </div>
        @error('supplier_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal <span class="text-red-500">*</span></label>
        <input type="date" name="date" value="{{ old('date', date('Y-m-d')) }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

{{-- Items --}}
<div>
    <div class="flex items-center justify-between mb-2">
        <label class="text-sm font-medium text-gray-700">Item Pembelian <span class="text-red-500">*</span></label>
        <button type="button" onclick="addRow()" class="text-blue-600 hover:text-blue-800 text-sm font-medium">+ Tambah Baris</button>
    </div>
    @error('items')<p class="text-red-500 text-xs mb-2">{{ $message }}</p>@enderror
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left px-3 py-2 text-gray-500 font-medium">Produk</th>
                    <th class="text-right px-3 py-2 text-gray-500 font-medium w-24">Qty</th>
                    <th class="text-right px-3 py-2 text-gray-500 font-medium w-36">Harga Beli</th>
                    <th class="text-right px-3 py-2 text-gray-500 font-medium w-36">Subtotal</th>
                    <th class="w-8"></th>
                </tr>
            </thead>
            <tbody id="items-body">
                <tr class="item-row border-t border-gray-100">
                    <td class="px-3 py-2">
                        <div class="ss-wrap">
                            <input type="text" id="prod-search-0" autocomplete="off" placeholder="Ketik nama atau kode produk…" class="ss-input-sm">
                            <input type="hidden" name="items[0][product_id]" id="prod-id-0" value="{{ old('items.0.product_id') }}">
                            <div id="prod-dropdown-0" class="ss-dropdown" style="display:none"></div>
                        </div>
                    </td>
                    <td class="px-3 py-2"><input type="number" name="items[0][quantity]" value="1" min="1" onchange="calcRow(0)" class="w-full border border-gray-200 rounded px-2 py-1 text-sm text-right focus:outline-none"></td>
                    <td class="px-3 py-2"><input type="number" name="items[0][unit_price]" value="0" min="0" onchange="calcRow(0)" id="price-0" class="w-full border border-gray-200 rounded px-2 py-1 text-sm text-right focus:outline-none"></td>
                    <td class="px-3 py-2 text-right text-gray-600" id="sub-0">Rp 0</td>
                    <td class="px-3 py-2"><button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 text-lg leading-none">×</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 border-t pt-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Diskon</label>
        <input type="number" name="discount" value="{{ old('discount',0) }}" min="0" onchange="calcTotal()" id="inp-discount"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Pajak</label>
        <input type="number" name="tax" value="{{ old('tax',0) }}" min="0" onchange="calcTotal()" id="inp-tax"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
    <div class="flex items-end">
        <div class="w-full bg-gray-50 rounded-lg px-4 py-2.5 text-sm">
            <div class="flex justify-between text-gray-500"><span>Subtotal</span><span id="lbl-subtotal">Rp 0</span></div>
            <div class="flex justify-between font-semibold text-gray-800 border-t border-gray-200 mt-1 pt-1"><span>Total</span><span id="lbl-total">Rp 0</span></div>
        </div>
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
    <textarea name="notes" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('notes') }}</textarea>
</div>

<div class="flex gap-3 pt-2">
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 py-2 rounded-lg transition">Simpan Draft</button>
    <a href="{{ route('purchases.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-5 py-2 rounded-lg transition">Batal</a>
</div>
</form>
</div>
</div>

@php
    $suppliersData = $suppliers->map(fn($s) => ['id' => $s->id, 'name' => $s->name, 'phone' => $s->phone ?? '']);
    $productsData  = $products->map(fn($p) => ['id' => $p->id, 'name' => $p->name, 'code' => $p->code ?? '', 'price' => (float) $p->cost_price]);
@endphp
@push('scripts')
<script>
let rowIndex = 0;
const purchaseSuppliers = @json($suppliersData);
const purchaseProducts  = @json($productsData);

function positionDropdown(input, dd) {
    var r = input.getBoundingClientRect();
    dd.style.top = (r.bottom + 2) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.width = r.width + 'px';
}
function safeEsc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function initSupSearch() {
    var input  = document.getElementById('sup-search');
    var hidden = document.getElementById('sup-hidden');
    var dd     = document.getElementById('sup-dropdown');
    function render(q) {
        var list = q
            ? purchaseSuppliers.filter(s => (s.name + ' ' + s.phone).toLowerCase().includes(q.toLowerCase()))
            : purchaseSuppliers;
        dd.innerHTML = list.length
            ? list.map(s =>
                '<div class="ss-item" data-id="'+s.id+'" data-name="'+safeEsc(s.name)+'">'+safeEsc(s.name)+
                (s.phone ? '<div class="ss-sub">'+safeEsc(s.phone)+'</div>' : '')+
                '</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault(); hidden.value = el.dataset.id; input.value = el.dataset.name; dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

function initProdSearch(idx) {
    var input  = document.getElementById('prod-search-' + idx);
    var hidden = document.getElementById('prod-id-' + idx);
    var dd     = document.getElementById('prod-dropdown-' + idx);
    if (!input) return;
    function render(q) {
        var list = q
            ? purchaseProducts.filter(p => (p.name + ' ' + p.code).toLowerCase().includes(q.toLowerCase()))
            : purchaseProducts;
        dd.innerHTML = list.length
            ? list.map(p =>
                '<div class="ss-item" data-id="'+p.id+'" data-price="'+p.price+'" data-name="'+safeEsc(p.name+(p.code?' ['+p.code+']':''))+'">'+
                safeEsc(p.name)+(p.code ? '<span style="color:#9ca3af;font-size:.8em"> ['+safeEsc(p.code)+']</span>' : '')+
                '</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault();
                hidden.value = el.dataset.id;
                input.value  = el.dataset.name;
                fillPrice(el.dataset.id, idx);
                dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

function fillPrice(productId, idx) {
    var p = purchaseProducts.find(x => String(x.id) === String(productId));
    if (p) { document.getElementById('price-' + idx).value = p.price; calcRow(idx); }
}
function calcRow(idx) {
    var qty   = parseFloat(document.querySelector('[name="items['+idx+'][quantity]"]')?.value) || 0;
    var price = parseFloat(document.getElementById('price-' + idx)?.value) || 0;
    var sub   = qty * price;
    var el = document.getElementById('sub-' + idx);
    if (el) el.textContent = 'Rp ' + sub.toLocaleString('id-ID');
    calcTotal();
}
function calcTotal() {
    var subtotal = 0;
    document.querySelectorAll('.item-row').forEach(function(row) {
        var qty = parseFloat(row.querySelector('[name$="[quantity]"]')?.value) || 0;
        var prc = parseFloat(row.querySelector('[name$="[unit_price]"]')?.value) || 0;
        subtotal += qty * prc;
    });
    var disc = parseFloat(document.getElementById('inp-discount')?.value) || 0;
    var tax  = parseFloat(document.getElementById('inp-tax')?.value) || 0;
    document.getElementById('lbl-subtotal').textContent = 'Rp ' + subtotal.toLocaleString('id-ID');
    document.getElementById('lbl-total').textContent    = 'Rp ' + (subtotal - disc + tax).toLocaleString('id-ID');
}
function addRow() {
    rowIndex++;
    var i = rowIndex;
    var tr = document.createElement('tr');
    tr.className = 'item-row border-t border-gray-100';
    tr.innerHTML =
        '<td class="px-3 py-2">' +
            '<div class="ss-wrap">' +
                '<input type="text" id="prod-search-'+i+'" autocomplete="off" placeholder="Ketik nama atau kode produk…" class="ss-input-sm">' +
                '<input type="hidden" name="items['+i+'][product_id]" id="prod-id-'+i+'">' +
                '<div id="prod-dropdown-'+i+'" class="ss-dropdown" style="display:none"></div>' +
            '</div>' +
        '</td>' +
        '<td class="px-3 py-2"><input type="number" name="items['+i+'][quantity]" value="1" min="1" onchange="calcRow('+i+')" class="w-full border border-gray-200 rounded px-2 py-1 text-sm text-right focus:outline-none"></td>' +
        '<td class="px-3 py-2"><input type="number" name="items['+i+'][unit_price]" value="0" min="0" onchange="calcRow('+i+')" id="price-'+i+'" class="w-full border border-gray-200 rounded px-2 py-1 text-sm text-right focus:outline-none"></td>' +
        '<td class="px-3 py-2 text-right text-gray-600" id="sub-'+i+'">Rp 0</td>' +
        '<td class="px-3 py-2"><button type="button" onclick="removeRow(this)" class="text-red-400 hover:text-red-600 text-lg">×</button></td>';
    document.getElementById('items-body').appendChild(tr);
    initProdSearch(i);
}
function removeRow(btn) {
    var rows = document.querySelectorAll('.item-row');
    if (rows.length <= 1) return;
    btn.closest('.item-row').remove();
    calcTotal();
}

document.addEventListener('DOMContentLoaded', function() {
    initSupSearch();
    initProdSearch(0);
    var oldSup = '{{ old('supplier_id') }}';
    if (oldSup) { var s = purchaseSuppliers.find(x => String(x.id) === oldSup); if (s) document.getElementById('sup-search').value = s.name; }
    var oldProd0 = '{{ old('items.0.product_id') }}';
    if (oldProd0) {
        var p = purchaseProducts.find(x => String(x.id) === oldProd0);
        if (p) document.getElementById('prod-search-0').value = p.name + (p.code ? ' ['+p.code+']' : '');
    }
});
</script>
@endpush
@endsection