@extends('layouts.app')
@section('title', 'Kasir')
@section('content')
@php
$productPayload=$products->map(fn($p)=>[
 'id'=>$p->id,'name'=>$p->name,'code'=>$p->code,'barcode'=>$p->barcode,'category_id'=>$p->category_id,
 'image'=>$p->image_path?asset('media/'.$p->image_path):null,'type'=>$p->type,'price'=>$p->final_price,
 'bom_ready'=>$p->type!=='bom'||($p->activeRecipe&&$p->activeRecipe->items->isNotEmpty()&&$p->activeRecipe->items->every(fn($item)=>(float)$item->unit_cost>0)),
 'missing_materials'=>$p->type==='bom'?$p->activeRecipe?->items->filter(fn($item)=>(float)$item->unit_cost<=0)->pluck('material.name')->values()??[]:[],
 'prices'=>$p->prices->pluck('final_price','branch_id'),
 'hpp'=>$p->prices->pluck('hpp_snapshot','branch_id'),
]);
$discountPayload=$branches->mapWithKeys(fn($branch)=>[$branch->id=>(($discountSettings[$branch->id]??'1')==='1')]);
$defaultBranchId=auth()->user()->branch_id??$branches->first()?->id;
$discountDisabled=($discountSettings[$defaultBranchId]??'1')!=='1';
@endphp
<div class="pos-shell">
<section class="pos-catalog">
    <div class="page-head"><div><h1>Kasir</h1><p class="muted">Klik produk untuk menambahkan ke keranjang.</p></div><label>Cabang<select id="branch">@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected(auth()->user()->branch_id==$branch->id)>{{ $branch->name }}</option>@endforeach</select></label></div>
    <input id="product-search" class="product-search" placeholder="Cari nama, SKU, atau barcode..." autofocus>
    <div class="category-tabs"><button class="active" data-category="">Semua</button>@foreach($categories as $category)<button data-category="{{ $category->id }}">{{ $category->name }}</button>@endforeach</div>
    <div id="product-grid" class="product-grid"></div>
</section>
<aside class="cart-panel">
    <h2>Keranjang <span id="cart-count" class="badge">0</span></h2>
    <div id="cart-items" class="cart-items"><p class="empty">Keranjang masih kosong.</p></div>
    <div class="cart-summary"><div><span>Subtotal</span><strong id="subtotal">Rp0</strong></div><div><span>Diskon</span><strong id="discount-label">Rp0</strong></div><div class="grand-total"><span>Total</span><strong id="total">Rp0</strong></div></div>
    <button id="pay-button" class="button primary pay-button" disabled>Bayar</button>
</aside>
</div>

<dialog id="payment-dialog" class="payment-dialog"><form method="dialog"><button class="dialog-close" aria-label="Tutup">×</button></form><h2>Pembayaran</h2>
    <div class="cart-summary"><div><span>Subtotal</span><strong id="pay-subtotal"></strong></div><div><span>Diskon</span><strong id="pay-discount"></strong></div><div class="grand-total"><span>Total akhir</span><strong id="pay-total"></strong></div></div>
    <form id="payment-form" class="stack">
        @if(auth()->user()->hasPermission('discount_sales'))<div class="form-grid"><label>Jenis diskon<select id="discount-type" @disabled($discountDisabled)><option value="nominal">Nominal (Rp)</option><option value="percent">Persentase (%)</option></select></label><label>Nilai diskon<input type="number" id="discount-input" min="0" step="0.01" value="0" @readonly($discountDisabled)><small class="field-help" id="discount-help">{{ $discountDisabled ? 'Diskon dinonaktifkan untuk cabang ini.' : 'Masukkan potongan dalam rupiah.' }}</small></label></div>@endif
        <label>Metode pembayaran<select id="payment-method" required>@foreach($paymentMethods as $method)<option value="{{ $method->id }}" data-cash="{{ $method->is_cash?1:0 }}">{{ $method->name }}</option>@endforeach</select></label>
        <label id="received-wrap">Uang diterima<input type="number" id="received" min="0" step="0.01"></label><label>Referensi pembayaran<input id="payment-reference" placeholder="Opsional untuk non-tunai"></label>
        <div class="change-row"><span>Kembalian</span><strong id="change">Rp0</strong></div><p id="payment-error" class="danger"></p><button class="button primary" id="confirm-payment">Konfirmasi pembayaran</button>
    </form>
</dialog>
@endsection
@push('scripts')
<script>
const products=@json($productPayload), discountByBranch=@json($discountPayload), cart=new Map(), rupiah=n=>'Rp'+new Intl.NumberFormat('id-ID',{maximumFractionDigits:0}).format(Number(n)||0);
let category='', subtotal=0, discount=0, total=0;
const branch=document.getElementById('branch'), grid=document.getElementById('product-grid'), items=document.getElementById('cart-items'), search=document.getElementById('product-search');
const priceOf=p=>Number(p.prices[branch.value]??p.price), filtered=()=>products.filter(p=>(!category||String(p.category_id)===category)&&`${p.name} ${p.code} ${p.barcode||''}`.toLowerCase().includes(search.value.toLowerCase()));
const pricedOf=p=>priceOf(p)>0;
const sellableOf=p=>pricedOf(p)&&(p.type==='bom'?p.bom_ready:Number(p.hpp[branch.value]??0)>0);
const blockReasonOf=p=>!pricedOf(p)?'Harga jual belum ditetapkan':(p.type==='bom'?`Harga belum: ${p.missing_materials.join(', ')||'resep BOM'}`:'HPP belum ditetapkan');
function renderProducts(){grid.innerHTML=filtered().map(p=>`<button class="product-card" data-id="${p.id}" ${sellableOf(p)?'':'disabled'}>${p.image?`<img src="${p.image}" alt="">`:'<span class="product-placeholder">▧</span>'}<span>${p.name}</span><small>${sellableOf(p)?p.code:blockReasonOf(p)}</small><strong>${rupiah(priceOf(p))}</strong></button>`).join('')||'<p class="empty">Produk tidak ditemukan.</p>';grid.querySelectorAll('[data-id]:not([disabled])').forEach(el=>el.onclick=()=>add(Number(el.dataset.id)));}
function add(id){const p=products.find(x=>x.id===id),current=cart.get(id);if(!p||!sellableOf(p))return;cart.set(id,{...p,qty:(current?.qty||0)+1,notes:current?.notes||''});renderCart();}
function changeQty(id,delta){const row=cart.get(id);row.qty=Math.max(0,row.qty+delta);if(!row.qty)cart.delete(id);renderCart();}
function renderCart(){subtotal=0;items.innerHTML=[...cart.values()].map(row=>{const line=priceOf(row)*row.qty;subtotal+=line;return `<article class="cart-item"><div class="cart-item-head"><div><strong>${row.name}</strong><small>${rupiah(priceOf(row))} / item</small></div><strong>${rupiah(line)}</strong></div><div class="cart-item-actions"><div class="qty"><button aria-label="Kurangi ${row.name}" onclick="changeQty(${row.id},-1)">−</button><strong>${row.qty}</strong><button aria-label="Tambah ${row.name}" onclick="changeQty(${row.id},1)">+</button></div><button class="cart-remove" aria-label="Hapus ${row.name}" onclick="cart.delete(${row.id});renderCart()">Hapus</button></div><input class="cart-note" placeholder="Catatan item (opsional)" value="${(row.notes||'').replaceAll('"','&quot;')}" oninput="cart.get(${row.id}).notes=this.value"></article>`}).join('')||'<p class="empty">Keranjang masih kosong.</p>';recalculate();document.getElementById('cart-count').textContent=[...cart.values()].reduce((n,r)=>n+r.qty,0);document.getElementById('pay-button').disabled=!cart.size;}
    function recalculate(){const discountType=document.getElementById('discount-type')?.value||'nominal',discountInput=Number(document.getElementById('discount-input')?.value||0);discount=discountType==='percent'?subtotal*Math.min(100,discountInput)/100:discountInput;discount=Math.min(subtotal,Math.max(0,discount));total=subtotal-discount;[['subtotal',subtotal],['discount-label',discount],['total',total],['pay-subtotal',subtotal],['pay-discount',discount],['pay-total',total]].forEach(([id,val])=>document.getElementById(id).textContent=rupiah(val));calculateChange();}
function calculateChange(){const method=document.getElementById('payment-method'),cash=method.selectedOptions[0]?.dataset.cash==='1',received=Number(document.getElementById('received').value||0);document.getElementById('received-wrap').hidden=!cash;document.getElementById('change').textContent=rupiah(cash?Math.max(0,received-total):0);}
function syncDiscountState(){const enabled=discountByBranch[branch.value]??true,type=document.getElementById('discount-type'),input=document.getElementById('discount-input'),help=document.getElementById('discount-help');if(!type||!input)return;type.disabled=!enabled;input.readOnly=!enabled;if(!enabled)input.value=0;help.textContent=enabled?(type.value==='percent'?'Masukkan persentase 0 sampai 100.':'Masukkan potongan dalam rupiah.'):'Diskon dinonaktifkan untuk cabang ini.';recalculate();}
document.querySelectorAll('[data-category]').forEach(btn=>btn.onclick=()=>{document.querySelectorAll('[data-category]').forEach(b=>b.classList.remove('active'));btn.classList.add('active');category=btn.dataset.category;renderProducts();});
search.oninput=renderProducts;
search.addEventListener('keydown',event=>{if(event.key!=='Enter')return;event.preventDefault();const term=search.value.trim().toLowerCase();if(!term)return;const matches=filtered(),exact=matches.filter(p=>String(p.barcode||'').toLowerCase()===term||String(p.code).toLowerCase()===term),hit=exact.length===1?exact[0]:(matches.length===1?matches[0]:null);if(!hit||!sellableOf(hit))return;add(hit.id);search.value='';renderProducts();});
branch.onchange=()=>{[...cart.keys()].forEach(id=>{const p=products.find(x=>x.id===id);if(!p||!sellableOf(p))cart.delete(id);});renderProducts();renderCart();syncDiscountState();};document.getElementById('pay-button').onclick=()=>{recalculate();document.getElementById('payment-dialog').showModal();};
    ['discount-input','received'].forEach(id=>document.getElementById(id)?.addEventListener('input',recalculate));document.getElementById('discount-type')?.addEventListener('change',event=>{const percent=event.target.value==='percent',input=document.getElementById('discount-input');input.max=percent?100:'';input.step=percent?'0.01':'1';document.getElementById('discount-help').textContent=percent?'Masukkan persentase 0 sampai 100.':'Masukkan potongan dalam rupiah.';recalculate();});document.getElementById('payment-method').onchange=calculateChange;
    document.getElementById('payment-form').onsubmit=async e=>{e.preventDefault();const button=document.getElementById('confirm-payment'),error=document.getElementById('payment-error'),discountType=document.getElementById('discount-type')?.value||'nominal',discountInput=document.getElementById('discount-input')?.value||0;button.disabled=true;error.textContent='';try{const response=await fetch(@json(route('pos.checkout')),{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},body:JSON.stringify({branch_id:Number(branch.value),items:[...cart.values()].map(r=>({product_id:r.id,quantity:r.qty,notes:r.notes})),discount_value:discountType==='nominal'?discountInput:0,discount_percent:discountType==='percent'?discountInput:null,payment_method_id:Number(document.getElementById('payment-method').value),received_amount:document.getElementById('received').value||null,reference_number:document.getElementById('payment-reference').value||null})});const data=await response.json();if(!response.ok)throw new Error(Object.values(data.errors||{}).flat().join(' ')||data.message);location.href=data.receipt_url;}catch(err){error.textContent=err.message;}finally{button.disabled=false;}};
renderProducts();renderCart();syncDiscountState();calculateChange();
</script>
@endpush