@extends('layouts.app')
@section('title', 'BOM, HPP & Harga')
@section('content')
@php
    $formatNumber = fn ($value) => rtrim(rtrim(number_format((float) $value, 2, ',', '.'), '0'), ',');
    $mapHppItems = function ($items) {
        return $items->map(function ($item) {
            $material = $item->material;
            $baseUnit = $material->baseUnit;
            $purchaseUnit = $material->purchaseUnit ?: $baseUnit;
            $factor = (int) $purchaseUnit?->id === (int) $material->base_unit_id ? 1 : (float) ($material->purchase_conversion_factor ?: $purchaseUnit?->conversion_factor ?: 1);

            return [
                'raw_material_id' => (int) $item->raw_material_id,
                'unit_id' => (int) $item->unit_id,
                'name' => $material->name,
                'purchase_label' => $purchaseUnit && $baseUnit ? '1 '.$purchaseUnit->symbol.' = '.rtrim(rtrim(number_format($factor, 2, '.', ''), '0'), '.').' '.$baseUnit->symbol : '-',
                'purchase_price' => (float) $material->average_price * $factor,
                'purchase_factor' => $factor,
                'purchase_unit' => $purchaseUnit?->symbol ?: $baseUnit?->symbol ?: '-',
                'quantity' => (float) $item->quantity,
                'unit' => $item->unit?->symbol ?: $baseUnit?->symbol ?: '-',
                'unit_cost' => (float) $item->unit_cost,
                'line_factor' => (int) $item->unit_id === (int) $material->base_unit_id ? 1 : (float) ($material->purchase_conversion_factor ?: $item->unit?->conversion_factor ?: 1),
                'hpp' => (float) $item->total_hpp,
            ];
        })->values();
    };
    $pricePayload = $products->mapWithKeys(fn ($product) => [$product->id => [
        'type' => $product->type,
        'standard_final_price' => (float) $product->final_price,
        'hpp_list_total' => (float) ($product->activeHppList?->total_hpp ?? 0),
        'hpp_list_items' => $product->activeHppList ? $mapHppItems($product->activeHppList->items) : [],
        'prices' => $product->prices->mapWithKeys(fn ($price) => [$price->branch_id => [
            'hpp' => (float) $price->hpp_snapshot,
            'margin_type' => $price->margin_type,
            'margin_value' => (float) $price->margin_value,
            'final_price' => (float) $price->final_price,
        ]]),
    ]]);
    $recipeUnitPayload = $units->map(fn ($unit) => [
        'id' => (int) $unit->id,
        'name' => $unit->name,
        'symbol' => $unit->symbol,
        'base_unit_id' => $unit->base_unit_id === null ? null : (int) $unit->base_unit_id,
        'conversion_factor' => $unit->conversion_factor,
    ]);
    $recipeMaterialPayload = $materials->map(fn ($material) => [
        'id' => (int) $material->id,
        'name' => $material->name,
        'base_unit_id' => (int) $material->base_unit_id,
        'purchase_unit_id' => $material->purchase_unit_id === null ? null : (int) $material->purchase_unit_id,
        'purchase_conversion_factor' => $material->purchase_conversion_factor,
        'average_price' => (float) $material->average_price,
    ]);
@endphp
<div class="page-head"><div><span class="eyebrow">Pengaturan produk</span><h1>BOM, HPP & Harga Jual</h1><p class="muted">Urutan kerja: harga bahan → resep BOM → harga jual per cabang.</p></div></div>
<nav class="choice-nav section-switcher" data-default="bom" aria-label="Pilih pengaturan HPP">
    <a class="choice-card" href="#bom"><strong>Resep BOM</strong><small>Bahan yang habis untuk satu porsi menu.</small></a>
    <a class="choice-card" href="#price"><strong>Harga jual</strong><small>Atur margin dan harga final per cabang.</small></a>
    <a class="choice-card" href="#hpp-summary"><strong>Ringkasan</strong><small>Periksa HPP aktif semua produk.</small></a>
</nav>

<section class="panel switchable-section" data-section="hpp-summary"><div class="section-heading"><div><h2>Ringkasan HPP produk</h2><p>HPP BOM selalu mengikuti resep aktif; transaksi lama tetap memakai snapshot saat transaksi dibuat.</p></div></div><div class="table-wrap"><table><thead><tr><th>Produk</th><th>Jenis stok</th><th>Sumber HPP</th><th>HPP aktif</th><th>Harga standar</th></tr></thead><tbody>@foreach($products as $product)<tr><td>{{ $product->name }}</td><td>{{ ['bom'=>'BOM / resep','direct'=>'Stok langsung','non_stock'=>'Non-stok'][$product->type] }}</td><td>{{ $product->type === 'bom' ? 'Resep BOM aktif' : 'Snapshot stok per cabang' }}</td><td>Rp{{ number_format($product->activeRecipe?->total_hpp ?? $product->prices->first()?->hpp_snapshot ?? 0,0,',','.') }}</td><td>Rp{{ number_format($product->final_price,0,',','.') }}</td></tr>@endforeach</tbody></table></div></section>

<section class="panel switchable-section active" data-section="bom"><div class="section-heading"><div><h2>Resep BOM</h2><p>Pilih menu, lalu atur bahan dan pemakaian per porsi.</p></div></div>
    <div class="info-box"><strong>Alur:</strong> pilih bahan dan tentukan jumlah pemakaian per porsi. Harga jual dan margin diatur di tab Harga jual.</div>
    <div class="inline-form"><label>Menu BOM<select class="enhanced-select" id="recipe-menu-select">@foreach($products->where('type','bom')->groupBy(fn ($product) => $product->category?->name ?? 'Tanpa kategori') as $categoryName => $categoryProducts)<optgroup label="{{ $categoryName }}">@foreach($categoryProducts as $product)<option value="{{ $product->id }}">{{ $product->name }}</option>@endforeach</optgroup>@endforeach</select></label><button type="button" class="button primary" id="open-recipe-editor">Atur resep</button></div>
    <h3 class="subheading">Daftar resep aktif</h3><div class="table-wrap"><table><thead><tr><th>Kategori</th><th>Produk</th><th>Versi</th><th>Isi resep per porsi</th><th>Aksi</th></tr></thead><tbody>@forelse($products->where('type','bom') as $product)<tr><td>{{ $product->category?->name ?? 'Tanpa kategori' }}</td><td>{{ $product->name }}</td><td>{{ $product->activeRecipe?->version ? 'v'.$product->activeRecipe->version : '-' }}</td><td class="wrap-cell">@forelse($product->activeRecipe?->items ?? [] as $item)<span class="recipe-chip">{{ $item->material->name }}: {{ $formatNumber($item->quantity) }} {{ $item->unit?->symbol }}</span>@empty<span class="danger">Belum ada resep aktif</span>@endforelse</td><td><button type="button" class="button small" data-edit-recipe data-product-id="{{ $product->id }}" data-recipe-items='@json($product->activeRecipe?->items->map(fn ($item) => ['raw_material_id' => $item->raw_material_id, 'unit_id' => $item->unit_id, 'quantity' => $item->quantity])->values() ?? [])'>{{ $product->activeRecipe ? 'Edit resep' : 'Buat resep' }}</button></td></tr>@empty<tr><td colspan="5" class="empty">Belum ada produk berjenis BOM.</td></tr>@endforelse</tbody></table></div>
</section>

<dialog id="recipe-dialog" class="recipe-dialog"><form method="dialog"><button class="dialog-close" aria-label="Tutup">×</button></form><div class="recipe-dialog-body"><div class="recipe-dialog-head"><div><span class="eyebrow">Editor resep BOM</span><h2 id="recipe-dialog-title">Resep</h2><p class="muted">Atur bahan dan jumlah pemakaian per porsi. Harga jual diatur di tab Harga jual.</p></div></div><form method="post" action="{{ route('hpp.recipe') }}" id="recipe-form" class="stack">@csrf<input type="hidden" name="product_id" id="recipe-product"><div class="table-wrap"><table class="recipe-editor-table"><thead><tr><th>Bahan</th><th>Pemakaian 1 porsi</th><th></th></tr></thead><tbody id="recipe-items"></tbody></table></div><div class="form-actions"><button type="button" class="button" id="add-recipe-row">+ Tambah bahan</button></div><div class="form-actions"><button class="button primary">Simpan resep</button><button type="button" class="button" id="cancel-recipe-editor">Batal</button></div></form></div></dialog>

<section class="panel switchable-section" data-section="price"><div class="section-heading"><div><h2>Harga jual per cabang</h2><p>Tambah atau ubah HPP, margin, dan harga final melalui modal ini.</p></div><button type="button" class="button primary" id="open-price-dialog">Tambah / atur harga</button></div>
    <dialog id="price-dialog" class="recipe-dialog"><form method="dialog"><button class="dialog-close" aria-label="Tutup">×</button></form><div class="recipe-dialog-body"><div class="recipe-dialog-head"><div><span class="eyebrow">Pengaturan harga jual</span><h2>Harga jual per cabang</h2><p class="muted">List HPP per item di bawah ini terpisah dari Resep BOM — potongan stok tetap mengikuti tab Resep BOM, list ini cuma dasar hitung harga jual.</p></div></div><form method="post" action="{{ route('hpp.price') }}" id="price-form">@csrf<div id="price-bom-form" class="price-bom-details" hidden><h3 id="price-bom-title">List HPP per item</h3><div class="table-wrap"><table><thead><tr><th>Komponen</th><th>Satuan pembelian</th><th>Harga komponen</th><th>Pemakaian 1 porsi</th><th>HPP 1 porsi</th><th>Aksi</th></tr></thead><tbody id="price-bom-items"></tbody></table></div><div class="price-bom-total"><span>Total HPP per porsi</span><strong id="price-bom-total">Rp0</strong></div><p class="field-help">List HPP per item ini <strong>tidak</strong> memotong stok di kasir, cuma dasar hitung harga jual. Potongan stok tetap ikut tab Resep BOM.</p><div class="form-actions"><button type="button" class="button" id="price-bom-add">+ Tambah komponen</button></div></div><div class="form-grid three">
        <label>Produk<select class="enhanced-select" name="product_id" id="price-product" required>@foreach($products->groupBy('type') as $type => $typeProducts)<optgroup label="{{ ['bom' => 'BOM / resep', 'direct' => 'Stok langsung', 'non_stock' => 'Non-stok'][$type] ?? $type }}">@foreach($typeProducts as $product)<option value="{{ $product->id }}">{{ $product->name }}</option>@endforeach</optgroup>@endforeach</select></label>
        <label>Cabang<select class="enhanced-select" name="branch_id" id="price-branch" required>@foreach($branches as $branch)<option value="{{ $branch->id }}">{{ $branch->name }}</option>@endforeach</select></label>
        <label>HPP saat ditetapkan<input id="price-hpp" type="number" step="0.01" min="0" name="hpp"><small class="field-help" id="price-source"></small></label>
        <label>Cara menghitung<select class="enhanced-select" name="margin_type" id="price-margin-type"><option value="markup">Markup — persen ditambah ke HPP</option><option value="margin">Margin — persen dari harga jual</option></select></label>
        <label>Persentase margin/markup<input type="number" step="0.01" min="0" name="margin_value" id="price-margin-value" value="0" required></label>
        <label>Harga final<input type="number" step="0.01" min="0" name="final_price" id="price-final"><small class="field-help">Terisi otomatis dari persentase. Jika diubah, persentasenya ikut dihitung ulang.</small></label>
        </div><div class="form-actions"><button class="button primary">Simpan List HPP &amp; harga</button><button type="button" class="button" id="cancel-price-dialog">Batal</button></div>
    </form></div></dialog>
    <h3 class="subheading">Daftar harga semua produk per cabang</h3><p class="muted">Produk BOM tercantum pada kolom Jenis. HPP BOM mengikuti resep aktif; harga diubah melalui tombol Edit.</p><div class="table-wrap"><table><thead><tr><th>Produk</th><th>Jenis</th><th>Cabang</th><th>Sumber HPP</th><th>HPP</th><th>Margin</th><th>Harga final</th><th>Status</th><th>Aksi</th></tr></thead><tbody>
        @if($products->isEmpty())
            <tr><td colspan="9" class="empty">Belum ada produk.</td></tr>
        @else
            @foreach($products as $product)
                @foreach($branches as $branch)
                    @php($branchPrice = $product->prices->firstWhere('branch_id', $branch->id))
                    <tr><td>{{ $product->name }}</td><td>{{ ['bom' => 'BOM / resep', 'direct' => 'Stok langsung', 'non_stock' => 'Non-stok'][$product->type] ?? $product->type }}</td><td>{{ $branch->name }}</td><td>{{ $product->type === 'bom' ? ($product->activeRecipe ? 'Resep BOM aktif' : 'Resep BOM belum ada') : ($branchPrice ? 'Snapshot stok cabang' : 'Belum ada snapshot') }}</td><td>Rp{{ number_format($product->type === 'bom' ? ($product->activeRecipe?->total_hpp ?? 0) : ($branchPrice?->hpp_snapshot ?? 0), 0, ',', '.') }}</td><td>{{ $branchPrice ? number_format($branchPrice->margin_value, 2, ',', '.').' % '.$branchPrice->margin_type : '-' }}</td><td>Rp{{ number_format($branchPrice?->final_price ?? $product->final_price, 0, ',', '.') }}</td><td>{{ $branchPrice ? 'Harga cabang ditetapkan' : 'Harga standar' }}</td><td><button type="button" class="button small" data-edit-price data-product-id="{{ $product->id }}" data-branch-id="{{ $branch->id }}">Edit</button></td></tr>
                @endforeach
            @endforeach
        @endif
    </tbody></table></div>
</section>
@endsection
@push('scripts')<script>document.addEventListener('DOMContentLoaded',()=>{
const priceData=@json($pricePayload), productSelect=document.getElementById('price-product'), branchSelect=document.getElementById('price-branch'), hppInput=document.getElementById('price-hpp'), marginType=document.getElementById('price-margin-type'), marginValue=document.getElementById('price-margin-value'), finalPrice=document.getElementById('price-final'), priceSource=document.getElementById('price-source'), priceBomDetails=document.getElementById('price-bom-form'), priceBomTitle=document.getElementById('price-bom-title'), priceBomItems=document.getElementById('price-bom-items'), priceBomTotal=document.getElementById('price-bom-total');
const priceNumber=value=>Number.parseFloat(value)||0,compactNumber=value=>String(Math.round(value*100)/100);
const priceEscape=value=>String(value).replace(/[&<>"']/g,char=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[char]));
const priceMoney=value=>new Intl.NumberFormat('id-ID',{style:'currency',currency:'IDR',maximumFractionDigits:0}).format(priceNumber(value));
const priceDialog=document.getElementById('price-dialog');
const recipeUnits=@json($recipeUnitPayload),recipeMaterials=@json($recipeMaterialPayload);
const recipeFactor=value=>new Intl.NumberFormat('id-ID',{maximumFractionDigits:2}).format(value),escapeHtml=value=>String(value).replace(/[&<>"']/g,char=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[char]));
const materialOptions=recipeMaterials.map(material=>`<option value="${material.id}">${escapeHtml(material.name)}</option>`).join(''),recipeMaterial=id=>recipeMaterials.find(material=>Number(material.id)===Number(id)),recipeUnit=id=>recipeUnits.find(unit=>Number(unit.id)===Number(id));
let priceBomIndex=0;
const bomRows=()=>[...priceBomItems.querySelectorAll('tr[data-bom-row]')];
const refreshBomTotals=()=>{let total=0;bomRows().forEach(row=>{const quantity=priceNumber(row.querySelector('.bom-quantity').value),line=quantity*priceNumber(row.dataset.lineFactor)*priceNumber(row.dataset.unitCost);total+=line;const lineField=row.querySelector('.bom-line-price');if(lineField&&document.activeElement!==lineField)lineField.value=compactNumber(line);});priceBomTotal.textContent=priceMoney(total);priceBomTitle.textContent=`List HPP ${productSelect.selectedOptions[0]?.textContent?.trim()||''} (${bomRows().length} komponen)`;
// Field HPP mengikuti total List HPP supaya harga jual langsung memakai angka terbaru; kalau
// sedang diketik manual, biarkan angka user yang menang.
if(!priceBomDetails.hidden&&document.activeElement!==hppInput&&bomRows().length){hppInput.value=compactNumber(total);calculateFinal();}};
const priceBomMaterialInfo=(material,selectedUnitId=null)=>{const baseId=Number(material.base_unit_id),base=recipeUnit(baseId),purchase=recipeUnit(material.purchase_unit_id)||base,factor=Number(purchase?.id)===Number(base?.id)?1:priceNumber(material.purchase_conversion_factor||purchase?.conversion_factor||1),available=[base,purchase].filter((option,index,items)=>option&&items.findIndex(other=>Number(other.id)===Number(option.id))===index),unitId=selectedUnitId&&available.some(option=>Number(option.id)===Number(selectedUnitId))?Number(selectedUnitId):baseId,isBase=unitId===baseId;return{available,unitId,purchaseLabel:purchase&&base?`1 ${purchase.symbol} = ${recipeFactor(factor)} ${base.symbol}`:'-',purchasePrice:material.average_price*factor,purchaseUnit:purchase?.symbol||base?.symbol||'-',purchaseFactor:factor,lineFactor:isBase?1:factor,unitCost:material.average_price};};
const priceBomRowMaterial=row=>recipeMaterial(row.querySelector('.bom-material')?.value);
const priceBomSyncRow=(row,selectedUnitId=null)=>{const material=priceBomRowMaterial(row);if(!material)return;const info=priceBomMaterialInfo(material,selectedUnitId);row.dataset.unitCost=info.unitCost;row.dataset.lineFactor=info.lineFactor;row.dataset.purchaseFactor=info.purchaseFactor;row.querySelector('.bom-purchase-label').textContent=info.purchaseLabel;row.querySelector('.bom-price').value=compactNumber(info.purchasePrice);row.querySelector('.bom-purchase-unit').textContent=`/ ${info.purchaseUnit}`;const override=row.querySelector('.bom-price-override');if(override)override.value=compactNumber(info.unitCost);const unit=row.querySelector('.bom-unit');unit.innerHTML=info.available.map(option=>`<option value="${option.id}">${escapeHtml(option.name)} (${escapeHtml(option.symbol)})</option>`).join('');unit.value=info.unitId;const quantity=priceNumber(row.querySelector('.bom-quantity')?.value)||0,lineField=row.querySelector('.bom-line-price');if(lineField&&document.activeElement!==lineField)lineField.value=compactNumber(quantity*info.lineFactor*info.unitCost);};
const priceBomAddRow=(item={})=>{const row=document.createElement('tr'),index=priceBomIndex++;row.setAttribute('data-bom-row','');row.innerHTML=`<td><select class="enhanced-select bom-material" name="items[${index}][raw_material_id]" required>${materialOptions}</select></td><td class="bom-purchase-label"></td><td><div class="recipe-usage"><span>Rp</span><input class="bom-price" type="number" step="1" min="0"><span class="bom-purchase-unit"></span></div><input type="hidden" class="bom-price-override" name="items[${index}][price_override]" value=""></td><td><div class="recipe-usage"><input class="bom-quantity" type="number" step="0.01" min="0.01" name="items[${index}][quantity]" value="${item.quantity===undefined?'1':compactNumber(item.quantity)}" required><select class="enhanced-select bom-unit" name="items[${index}][unit_id]" required></select></div></td><td><div class="recipe-usage"><span>Rp</span><input class="bom-line-price" type="number" step="1" min="0" value="0"></div></td><td><button type="button" class="button small danger bom-remove">Hapus</button></td>`;priceBomItems.append(row);row.querySelector('.bom-material').value=item.raw_material_id??recipeMaterials[0]?.id??'';priceBomSyncRow(row,item.unit_id);window.$(row).find('.enhanced-select').select2({width:'100%',placeholder:'Pilih komponen',dropdownParent:window.$(priceDialog)});
// select2 memicu event lewat jQuery, yang tidak sampai ke listener native di tbody, jadi
// pemantau perubahan komponen/satuan dipasang langsung pada elemennya.
window.$(row).find('.bom-material').on('change',()=>{priceBomSyncRow(row);refreshBomTotals();});
window.$(row).find('.bom-unit').on('change',function(){const material=priceBomRowMaterial(row);if(!material)return;row.dataset.lineFactor=priceBomMaterialInfo(material,this.value).lineFactor;refreshBomTotals();});};
const renderPriceBom=product=>{priceBomItems.innerHTML='';priceBomIndex=0;if(product?.type!=='bom'){priceBomDetails.hidden=true;return;}priceBomDetails.hidden=false;const items=product?.hpp_list_items||[];(items.length?items:[{}]).forEach(priceBomAddRow);refreshBomTotals();};
priceBomItems.addEventListener('change',event=>{if(event.target.classList.contains('bom-material')){priceBomSyncRow(event.target.closest('tr'));refreshBomTotals();return;}if(event.target.classList.contains('bom-unit')){const row=event.target.closest('tr'),material=priceBomRowMaterial(row);if(!material)return;const info=priceBomMaterialInfo(material,event.target.value);row.dataset.lineFactor=info.lineFactor;refreshBomTotals();}});
document.getElementById('price-bom-add').addEventListener('click',()=>{priceBomAddRow();refreshBomTotals();});
priceBomItems.addEventListener('input',event=>{
    if(event.target.classList.contains('bom-quantity')){refreshBomTotals();return;}
    if(event.target.classList.contains('bom-price')){
        const row=event.target.closest('tr'),factor=priceNumber(row.dataset.purchaseFactor)||1,newBase=priceNumber(event.target.value)/factor;
        row.dataset.unitCost=newBase;
        const override=row.querySelector('.bom-price-override');if(override)override.value=compactNumber(newBase);
        refreshBomTotals();
        return;
    }
    if(event.target.classList.contains('bom-line-price')){
        const row=event.target.closest('tr'),quantity=priceNumber(row.querySelector('.bom-quantity').value),lineFactor=priceNumber(row.dataset.lineFactor)||1,baseQuantity=quantity*lineFactor,newBase=baseQuantity>0?priceNumber(event.target.value)/baseQuantity:0;
        row.dataset.unitCost=newBase;
        const override=row.querySelector('.bom-price-override');if(override)override.value=compactNumber(newBase);
        const purchaseFactor=priceNumber(row.dataset.purchaseFactor)||1,priceField=row.querySelector('.bom-price');
        if(priceField&&document.activeElement!==priceField)priceField.value=compactNumber(newBase*purchaseFactor);
        refreshBomTotals();
    }
});
priceBomItems.addEventListener('click',event=>{const button=event.target.closest('.bom-remove');if(!button)return;button.closest('tr').remove();refreshBomTotals();});
const calculateFinal=()=>{const hpp=priceNumber(hppInput.value), margin=priceNumber(marginValue.value);if(marginType.value==='margin'&&margin>=100){finalPrice.value='';marginValue.setCustomValidity('Margin harus kurang dari 100%.');return;}marginValue.setCustomValidity('');finalPrice.value=hpp?compactNumber(marginType.value==='margin'?hpp/(1-margin/100):hpp*(1+margin/100)):'';};
const calculateMargin=()=>{const hpp=priceNumber(hppInput.value), final=priceNumber(finalPrice.value);if(!hpp||!final)return;marginValue.value=compactNumber((marginType.value==='margin'?1-hpp/final:final/hpp-1)*100);marginValue.setCustomValidity('');};
const openPriceDialog=document.getElementById('open-price-dialog'),cancelPriceDialog=document.getElementById('cancel-price-dialog');
const syncPrice=()=>{const product=priceData[productSelect.value], branchPrice=product?.prices?.[branchSelect.value], isBom=product?.type==='bom';renderPriceBom(product);hppInput.value=isBom?(branchPrice?.hpp??product.hpp_list_total??0):(branchPrice?.hpp??0);hppInput.readOnly=false;marginType.value=branchPrice?.margin_type||'markup';marginValue.value=branchPrice?.margin_value??0;finalPrice.value=branchPrice?.final_price??product?.standard_final_price??'';priceSource.textContent=isBom?'Awalnya terisi dari total List HPP per item aktif, tapi bisa diketik manual. Potongan stok tetap ikut Resep BOM, tidak berubah oleh angka ini.':branchPrice?'HPP rata-rata stok cabang yang dipakai untuk laba transaksi.':'Belum ada HPP cabang; isi HPP yang benar atau catat stok masuk.';if(finalPrice.value)calculateMargin();else calculateFinal();};
productSelect.addEventListener('change',syncPrice);branchSelect.addEventListener('change',syncPrice);marginType.addEventListener('change',calculateFinal);marginValue.addEventListener('input',calculateFinal);hppInput.addEventListener('input',calculateFinal);finalPrice.addEventListener('input',calculateMargin);syncPrice();
const openPriceEditor=(productId=productSelect.value,branchId=branchSelect.value)=>{productSelect.value=productId;branchSelect.value=branchId;syncPrice();window.$(productSelect).trigger('change');window.$(branchSelect).trigger('change');priceDialog.showModal();marginValue.focus();};
openPriceDialog.addEventListener('click',()=>openPriceEditor());cancelPriceDialog.addEventListener('click',()=>priceDialog.close());document.querySelectorAll('[data-edit-price]').forEach(button=>button.addEventListener('click',()=>openPriceEditor(button.dataset.productId,button.dataset.branchId)));
const recipeDialog=document.getElementById('recipe-dialog'),recipeItems=document.getElementById('recipe-items'),recipeProduct=document.getElementById('recipe-product'),recipeMenuSelect=document.getElementById('recipe-menu-select');let recipeIndex=0;
const syncRecipeRow=(row,selectedUnitId=null)=>{const material=recipeMaterial(row.querySelector('.recipe-material').value),unit=row.querySelector('.recipe-unit');if(!material)return;const base=recipeUnit(material.base_unit_id),purchase=recipeUnit(material.purchase_unit_id)||base,factor=material.purchase_conversion_factor||purchase?.conversion_factor||1,available=[base,purchase].filter((option,index,items)=>option&&items.findIndex(other=>other.id===option.id)===index),relation=option=>`1 ${option.symbol} = ${recipeFactor(factor)} ${base.symbol}`;unit.innerHTML=available.map(option=>`<option value="${option.id}">${escapeHtml(option.name)} (${escapeHtml(option.symbol)})${option.id===material.base_unit_id?' — kecil':' — '+relation(option)}</option>`).join('');unit.value=selectedUnitId&&available.some(option=>option.id===Number(selectedUnitId))?selectedUnitId:material.base_unit_id;window.$(unit).trigger('change');};
const addRecipeRow=(item={})=>{const row=document.createElement('tr'),index=recipeIndex++;row.innerHTML=`<td><select class="recipe-material enhanced-select" name="items[${index}][raw_material_id]" required>${materialOptions}</select></td><td><div class="recipe-usage"><input class="recipe-quantity" type="number" step="0.01" min="0.01" name="items[${index}][quantity]" required><select class="recipe-unit enhanced-select" name="items[${index}][unit_id]" required></select></div></td><td><button type="button" class="button small danger recipe-remove">Hapus</button></td>`;recipeItems.append(row);const material=row.querySelector('.recipe-material'),unit=row.querySelector('.recipe-unit');material.value=item.raw_material_id??recipeMaterials[0]?.id??'';row.querySelector('.recipe-quantity').value=item.quantity===undefined?'':compactNumber(item.quantity);syncRecipeRow(row,item.unit_id);window.$(row).find('.enhanced-select').select2({width:'100%',placeholder:'Pilih bahan',dropdownParent:window.$(recipeDialog)});window.$(material).on('change',()=>syncRecipeRow(row));row.querySelector('.recipe-remove').addEventListener('click',()=>row.remove());};
window.$(recipeDialog).find('.enhanced-select').each(function(){const field=window.$(this);if(field.hasClass('select2-hidden-accessible'))field.select2('destroy');field.select2({width:'100%',placeholder:'Pilih data',dropdownParent:window.$(recipeDialog)});});
const openRecipeEditor=(productId,items=[])=>{recipeProduct.value=productId;recipeItems.innerHTML='';recipeIndex=0;(items.length?items:[{}]).forEach(addRecipeRow);document.getElementById('recipe-dialog-title').textContent=`Resep ${recipeMenuSelect.querySelector(`option[value="${productId}"]`)?.textContent||''}`;recipeDialog.showModal();};
document.getElementById('open-recipe-editor').addEventListener('click',()=>openRecipeEditor(recipeMenuSelect.value));document.getElementById('add-recipe-row').addEventListener('click',()=>addRecipeRow());document.getElementById('cancel-recipe-editor').addEventListener('click',()=>recipeDialog.close());
document.querySelectorAll('[data-edit-recipe]').forEach(button=>button.addEventListener('click',()=>{recipeMenuSelect.value=button.dataset.productId;window.$(recipeMenuSelect).trigger('change');openRecipeEditor(button.dataset.productId,JSON.parse(button.dataset.recipeItems));}));
});</script>@endpush