@extends('layouts.app')
@section('title','Transaksi Penjualan')
@section('page-title','Transaksi Penjualan (POS)')

@push('head')
<style>
/* Custom searchable-select component — Sales Create only */
.ss-wrap { position: relative; }

.ss-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.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: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.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: 0.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: 0.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: 0.84rem; }
.ss-sub { font-size: 0.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('sales.store') }}" class="space-y-5" id="sale-form">
@csrf

{{-- Customer + Payment --}}
<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">Pelanggan</label>
        <div class="ss-wrap">
            <input type="text" id="customer-search" autocomplete="off"
                   placeholder="Ketik nama atau no. HP pelanggan…"
                   class="ss-input @error('customer_id') is-invalid @enderror">
            <input type="hidden" name="customer_id" id="customer-id-hidden"
                   value="{{ old('customer_id') }}">
            <div id="customer-dropdown" class="ss-dropdown" style="display:none"></div>
        </div>
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Metode Pembayaran <span class="text-red-500">*</span></label>
        <select name="payment_method" 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 @error('payment_method') border-red-400 @enderror">
            <option value="tunai"    {{ old('payment_method','tunai')==='tunai'    ? 'selected' : '' }}>Tunai</option>
            <option value="transfer" {{ old('payment_method')==='transfer'         ? 'selected' : '' }}>Transfer Bank</option>
            <option value="qris"     {{ old('payment_method')==='qris'             ? 'selected' : '' }}>QRIS</option>
            <option value="kartu"    {{ old('payment_method')==='kartu'            ? 'selected' : '' }}>Kartu Debit / Kredit</option>
        </select>
    </div>
</div>

{{-- Items table --}}
<div>
    <div class="flex items-center justify-between mb-2">
        <label class="text-sm font-medium text-gray-700">Produk <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-center px-3 py-2 text-gray-500 font-medium w-16">Stok</th>
                    <th class="text-right px-3 py-2 text-gray-500 font-medium w-20">Qty</th>
                    <th class="text-right px-3 py-2 text-gray-500 font-medium w-36">Harga Jual</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" id="prod-wrap-0">
                            <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 text-center text-gray-500 text-xs" id="stock-0">-</td>
                    <td class="px-3 py-2">
                        <input type="number" name="items[0][quantity]"
                               value="{{ old('items.0.quantity', 1) }}" min="1"
                               onchange="calcRow(0)" id="qty-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="{{ old('items.0.unit_price', 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>

{{-- Discount / Tax / Total --}}
<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-blue-50 border border-blue-100 rounded-lg px-4 py-3 text-sm">
            <div class="flex justify-between text-gray-500 mb-0.5">
                <span>Subtotal</span><span id="lbl-subtotal">Rp 0</span>
            </div>
            <div class="flex justify-between font-bold text-blue-800 border-t border-blue-200 pt-1.5 mt-1.5 text-base">
                <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-semibold px-6 py-2.5 rounded-lg transition">
        Proses Penjualan
    </button>
    <a href="{{ route('sales.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
    $customersData = $customers->map(fn ($c) => [
        'id'    => $c->id,
        'name'  => $c->name,
        'phone' => $c->phone ?? '',
    ]);
    $productsData = $products->map(fn ($p) => [
        'id'    => $p->id,
        'name'  => $p->name,
        'code'  => $p->code ?? '',
        'price' => (float) $p->sell_price,
        'stock' => (int)   $p->stock,
    ]);
@endphp

@push('scripts')
<script>
var customers = @json($customersData);
var products  = @json($productsData);
var rowIndex  = 0;

/* ---- util ---- */
function safeEsc(s) {
    return String(s)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;')
        .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}
function fmt(n) {
    return Number(n).toLocaleString('id-ID');
}

/* ---- totals ---- */
function calcRow(idx) {
    var qtyEl   = document.querySelector('[name="items['+idx+'][quantity]"]');
    var priceEl = document.getElementById('price-'+idx);
    var subEl   = document.getElementById('sub-'+idx);
    var qty     = parseFloat(qtyEl ? qtyEl.value : 0) || 0;
    var price   = parseFloat(priceEl ? priceEl.value : 0) || 0;
    if (subEl) subEl.textContent = 'Rp ' + fmt(qty * price);
    calcTotal();
}
function calcTotal() {
    var sub = 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;
        sub += 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 ' + fmt(sub);
    document.getElementById('lbl-total').textContent    = 'Rp ' + fmt(sub - disc + tax);
}

/* ---- dropdown position (fixed, bypasses overflow:hidden ancestors) ---- */
function positionDropdown(input, dropdown) {
    var rect = input.getBoundingClientRect();
    dropdown.style.top   = (rect.bottom + 2) + 'px';
    dropdown.style.left  = rect.left + 'px';
    dropdown.style.width = rect.width + 'px';
}

/* ---- product search ---- */
function selectProduct(idx, productId, price, stock, displayText) {
    document.getElementById('prod-id-'+idx).value     = productId;
    document.getElementById('prod-search-'+idx).value = displayText;
    document.getElementById('price-'+idx).value       = price;
    document.getElementById('stock-'+idx).textContent = stock;
    var qEl = document.getElementById('qty-'+idx);
    if (qEl) qEl.max = stock;
    document.getElementById('prod-dropdown-'+idx).style.display = 'none';
    calcRow(idx);
}

function initProductSearch(idx) {
    var input    = document.getElementById('prod-search-'+idx);
    var hidden   = document.getElementById('prod-id-'+idx);
    var dropdown = document.getElementById('prod-dropdown-'+idx);
    if (!input || !hidden || !dropdown) return;

    /* pre-fill after old() (form validation error) */
    if (hidden.value) {
        var found = null;
        for (var j = 0; j < products.length; j++) {
            if (products[j].id == hidden.value) { found = products[j]; break; }
        }
        if (found) {
            input.value = found.name + (found.code ? ' ['+found.code+']' : '');
            document.getElementById('stock-'+idx).textContent = found.stock;
        }
    }

    function filterProds(term) {
        var q = term.toLowerCase().trim();
        if (!q) return products.slice(0, 15);
        var out = [];
        for (var i = 0; i < products.length && out.length < 15; i++) {
            var p = products[i];
            if (p.name.toLowerCase().indexOf(q) !== -1 ||
                (p.code && p.code.toLowerCase().indexOf(q) !== -1)) {
                out.push(p);
            }
        }
        return out;
    }

    function renderProds(list) {
        if (!list.length) {
            dropdown.innerHTML = '<div class="ss-empty">Data tidak ditemukan</div>';
        } else {
            var html = '';
            for (var i = 0; i < list.length; i++) {
                var p = list[i];
                var label = p.name + (p.code ? ' ['+p.code+']' : '');
                html += '<div class="ss-item"'
                    + ' data-id="'+p.id+'"'
                    + ' data-price="'+p.price+'"'
                    + ' data-stock="'+p.stock+'"'
                    + ' data-label="'+safeEsc(label)+'">'
                    + '<div>'+safeEsc(p.name)
                    + (p.code ? ' <span style="color:#9ca3af;font-size:.8rem">['+safeEsc(p.code)+']</span>' : '')
                    + '</div>'
                    + '<div class="ss-sub">Stok: '+p.stock+' &nbsp;&middot;&nbsp; Rp '+fmt(p.price)+'</div>'
                    + '</div>';
            }
            dropdown.innerHTML = html;
        }
        positionDropdown(input, dropdown);
        dropdown.style.display = 'block';

        dropdown.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault();
                selectProduct(
                    idx,
                    this.dataset.id,
                    parseFloat(this.dataset.price),
                    parseInt(this.dataset.stock, 10),
                    this.dataset.label
                );
            });
        });
    }

    input.addEventListener('focus', function() {
        renderProds(filterProds(this.value));
    });

    input.addEventListener('input', function() {
        if (!this.value.trim()) {
            hidden.value = '';
            var priceEl = document.getElementById('price-'+idx);
            if (priceEl) priceEl.value = 0;
            document.getElementById('stock-'+idx).textContent = '-';
            var qEl = document.getElementById('qty-'+idx);
            if (qEl) qEl.removeAttribute('max');
            calcRow(idx);
        }
        renderProds(filterProds(this.value));
    });

    input.addEventListener('blur', function() {
        setTimeout(function() {
            dropdown.style.display = 'none';
        }, 220);
    });
}

/* ---- customer search ---- */
function initCustomerSearch() {
    var input    = document.getElementById('customer-search');
    var hidden   = document.getElementById('customer-id-hidden');
    var dropdown = document.getElementById('customer-dropdown');
    if (!input || !hidden || !dropdown) return;

    /* pre-fill after old() */
    if (hidden.value) {
        for (var j = 0; j < customers.length; j++) {
            if (customers[j].id == hidden.value) {
                var c = customers[j];
                input.value = c.name + (c.phone ? ' — '+c.phone : '');
                break;
            }
        }
    }

    function filterCusts(term) {
        var q = term.toLowerCase().trim();
        if (!q) return customers.slice(0, 20);
        var out = [];
        for (var i = 0; i < customers.length && out.length < 20; i++) {
            var c = customers[i];
            if (c.name.toLowerCase().indexOf(q) !== -1 ||
                (c.phone && c.phone.toLowerCase().indexOf(q) !== -1)) {
                out.push(c);
            }
        }
        return out;
    }

    function renderCusts(list) {
        var html = '<div class="ss-item ss-item-muted" data-id="" data-label="">— Pelanggan Umum (tidak perlu dicatat) —</div>';
        if (!list.length && input.value.trim()) {
            html += '<div class="ss-empty">Data tidak ditemukan</div>';
        } else {
            for (var i = 0; i < list.length; i++) {
                var c  = list[i];
                var lb = c.name + (c.phone ? ' — '+c.phone : '');
                html += '<div class="ss-item" data-id="'+c.id+'" data-label="'+safeEsc(lb)+'">'
                    + '<div style="font-weight:500">'+safeEsc(c.name)+'</div>'
                    + (c.phone ? '<div class="ss-sub">'+safeEsc(c.phone)+'</div>' : '')
                    + '</div>';
            }
        }
        dropdown.innerHTML = html;
        positionDropdown(input, dropdown);
        dropdown.style.display = 'block';

        dropdown.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault();
                hidden.value = this.dataset.id;
                input.value  = this.dataset.id ? this.dataset.label : '';
                dropdown.style.display = 'none';
            });
        });
    }

    input.addEventListener('focus', function() {
        renderCusts(filterCusts(this.value));
    });

    input.addEventListener('input', function() {
        if (!this.value.trim()) hidden.value = '';
        renderCusts(filterCusts(this.value));
    });

    input.addEventListener('blur', function() {
        setTimeout(function() {
            dropdown.style.display = 'none';
        }, 220);
    });
}

/* ---- dynamic rows ---- */
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" id="prod-wrap-'+i+'">'
      +     '<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+'" value="">'
      +     '<div id="prod-dropdown-'+i+'" class="ss-dropdown" style="display:none"></div>'
      +   '</div>'
      + '</td>'
      + '<td class="px-3 py-2 text-center text-gray-500 text-xs" id="stock-'+i+'">-</td>'
      + '<td class="px-3 py-2">'
      +   '<input type="number" name="items['+i+'][quantity]" value="1" min="1"'
      +   ' id="qty-'+i+'" 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"'
      +   ' id="price-'+i+'" 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 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);
    initProductSearch(i);
    document.getElementById('prod-search-'+i).focus();
}

function removeRow(btn) {
    if (document.querySelectorAll('.item-row').length <= 1) return;
    btn.closest('.item-row').remove();
    calcTotal();
}

/* ---- boot ---- */
document.addEventListener('DOMContentLoaded', function() {
    initCustomerSearch();
    initProductSearch(0);
    calcRow(0);
});
</script>
@endpush
@endsection