@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">Stock Opname</h3>
                    </div>
                    <div class="card-body">
                        <form id="formID" method="post" action="{{ route('stock_opnames.store', ['prm_id' => $data->id]) }}">
                            @csrf

                            <!-- Header Section - Table Layout -->
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-sm table-borderless" style="margin-bottom: 10px;">
                                        <tbody>
                                            <tr>
                                                <td width="5%" class="font-weight-bold">User</td>
                                                <td width="15%"> :
                                                    {{ $logged_name }} 
                                                    <small class="text-muted">
                                                        (<i class="fas fa-user-tag"></i> {{ $logged_role_name }})
                                                    </small> 
                                                </td> 
                                                <td width="5%" class="font-weight-bold">Status</td>
                                                <td width="15%"> :
                                                    @if(isset($data->id) && $data->status)
                                                    <span class="badge badge-{{ $data->status == 'Submitted' ? 'success' : 'secondary' }}">
                                                        {{ $data->status }}
                                                    </span>
                                                    @else
                                                    <span class="badge badge-secondary">Belum Disimpan</span>
                                                    @endif
                                                    <input type="hidden" name="status" id="status_input" value="{{ old('status', $data->status ?? 'Draft') }}">
                                                </td> 
                                                <td class="font-weight-bold" rowspan="2">Notes :
                                                    <textarea class="form-control" name="notes" rows="1" placeholder="Catatan tambahan (opsional)">{{ old('notes', $data->notes ?? '') }}</textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Store</td>
                                                <td> :
                                                    @if(session('store_selected')) 
                                                    {{ $store_name }}
                                                    @else
                                                    <span class="text-danger">No Store Selected</span>
                                                    @endif
                                                    <input type="hidden" name="store_id" id="store_id" value="{{ session('store_selected') }}" required>
                                                </td>
                                                <td class="font-weight-bold">LSM Date</td>
                                                <td> :
                                                    <span class="badge badge-info">
                                                        <i class="far fa-calendar-alt"></i> {{ $data->so_date ? $data->so_date->format('d M Y') : date('d M Y') }}
                                                    </span>
                                                    <input type="hidden" name="so_date" value="{{ $data->so_date ? $data->so_date->format('Y-m-d') : date('Y-m-d') }}">
                                                </td>  
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-12">
                                    <hr class="mt-0 mb-3">
                                </div>
                                <!-- Formula Info Card (Collapsible) --> 
                                <div class="col-md-12">
                                    <div class="card card-info collapsed-card">
                                        <div class="card-header">
                                            <h3 class="card-title">
                                                <i class="fa fa-info-circle mr-2"></i> Informasi
                                            </h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            
                                            <div class="row"> 
                                                <!-- RINGKASAN LENGKAP RUMUS SPB DALAM SATU TABEL -->
                                                <div class="col-md-6">
                                                    <strong>Rumus Perhitungan SPB</strong>
                                                    <div class="table-responsive">
                                                        <table class="table table-sm table-bordered" style="font-size: 12px;">
                                                            <thead class="bg-light">
                                                                <tr>
                                                                    <th width="15%" class="text-center">Tipe</th>
                                                                    <th width="20%">Formula</th> 
                                                                    <th width="18%">Kondisi SPB Muncul</th>
                                                                    <th width="35%">Catatan Khusus</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center"><strong class="text-info">DO HARIAN</strong><br>Shipment DC<small class="text-muted">(Tipe: Harian)</small></td>
                                                                    <td><code>(Fc H+1 + Fc H+2 + TSM H+2) - LSM - Open SPB</code></td> 
                                                                    <td>H+2 jatuh di delivery day</td>
                                                                    <td>
                                                                        • Pakai TSM <br> 
                                                                        • Forecast 2 hari (besok & lusa)
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center"><strong class="text-info">DO PERIODIK</strong><br>Shipment DC<small class="text-muted">(Tipe: Periodik)</small></td>
                                                                    <td><code>Total Fc (Coverage) - LSM - Open SPB</code></td> 
                                                                    <td>H+2 jatuh di delivery day</td>
                                                                    <td>  
                                                                        • TIDAK pakai TSM <br>
                                                                        • Forecast coverage (H+3 s/d shipment berikutnya, <strong>INCLUSIVE</strong>)
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center"><strong class="text-success">PR SAYURAN</strong><br>Shipment Suppliers <small class="text-muted">(Sesuai shipment RM)</small></td>
                                                                    <td><code>Formula DO HARIAN</code></td> 
                                                                    <td>
                                                                        • H+1 (Hari SPB) bukan libur purchasing<br>
                                                                        • H+2 jatuh di shift day
                                                                    </td>
                                                                    <td>
                                                                        • <strong>Cek libur di H+1</strong> (Hari SPB) <br> 
                                                                        • Pakai TSM <br> 
                                                                        • Forecast 2 hari (besok & lusa)
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center"><strong class="text-success">PR PERIODIK</strong><br>Shipment Suppliers <small class="text-muted">(Sesuai shipment RM)</small></td>
                                                                    <td><code>Formula PR PERIODIK</code></td> 
                                                                    <td>
                                                                        • H+1 (Hari SPB) bukan libur purchasing<br>
                                                                        • H+2 jatuh di shift day
                                                                    </td>
                                                                    <td>
                                                                        • <strong>Cek libur di H+1</strong> (Hari SPB) <br> 
                                                                        • TIDAK pakai TSM <br> 
                                                                        • Forecast coverage (H+3 s/d shipment berikutnya, <strong>INCLUSIVE</strong>) 
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div> 
                                                <!-- INFO MULTIPLE USULAN SPB -->
                                                <div class="col-md-6"> 
                                                    <strong>Multiple Usulan SPB (PR Items Only)</strong>
                                                    <div class="table-responsive">
                                                            <table class="table table-sm table-bordered" style="font-size: 12px;">
                                                            <thead class="bg-light">
                                                                <tr>
                                                                    <th width="7%" class="text-center">Usulan</th>
                                                                    <th width="15%">Untuk Hari</th>
                                                                    <th width="30%">Formula</th>
                                                                    <th width="16%">Open SPB</th>
                                                                    <th width="29%">Catatan Khusus</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-center"><strong>Usulan 1</strong></td>
                                                                    <td>H+1 (besok)<br><small class="text-muted">Muncul jika H+1 bukan libur</small></td>
                                                                    <td><code>(Fc H+1 + Fc H+2 + TSM H+2) - LSM - Open SPB</code></td>
                                                                    <td>Open SPB Sebelumnya</td>
                                                                    <td>
                                                                        • TSM menggunakan H+2<br>
                                                                        • Forecast 2 hari (H+1 & H+2)<br>
                                                                        • Selalu muncul jika H+1 bukan libur
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center"><strong>Usulan 2</strong></td>
                                                                    <td>H+2 (lusa)<br><small class="text-muted">Muncul jika H+2 adalah libur</small></td>
                                                                    <td><code>(Fc H+1 + Fc H+2 + Fc H+3 + TSM H+3) - LSM - Open SPB</code></td>
                                                                    <td><strong>Suggest Usulan 1</strong></td>
                                                                    <td>
                                                                        • TSM menggunakan H+3<br>
                                                                        • Forecast 3 hari (H+1, H+2, H+3)<br>
                                                                        • Open SPB (Hasil dari suggest Usulan 1)<br>
                                                                        • <strong class="text-danger">Jika tidak muncul, usulan 3 tidak dicek</strong>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="text-center"><strong>Usulan 3</strong></td>
                                                                    <td>H+3<br><small class="text-muted">Muncul jika H+3 adalah libur</small></td>
                                                                    <td><code>(Fc H+1 + Fc H+2 + Fc H+3 + Fc H+4 + TSM H+4) - LSM - Open SPB</code></td>
                                                                    <td><strong>Suggest Usulan 1 + Usulan 2</strong></td>
                                                                    <td>
                                                                        • TSM menggunakan H+4<br>
                                                                        • Forecast 4 hari (H+1, H+2, H+3, H+4)<br>
                                                                        • Open SPB cumulative (Usulan 1 + Usulan 2)<br>
                                                                        • Hanya dicek jika usulan 2 muncul
                                                                    </td>
                                                                </tr>
                                                            </tbody> 
                                                        </table>
                                                    </div> 
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="alert alert-warning">
                                                        <small>
                                                            <strong><i class="fas fa-cog"></i> Catatan Konversi & Pembulatan:</strong><br>
                                                            • Hasil dalam <strong>UOM Pakai</strong> → dikonversi ke <strong>UOM Kirim</strong><br>
                                                            • Konversi: <code>Pakai → Utuh → Kirim</code><br>
                                                            • <strong>Smart Rounding:</strong> Sisa ≥ % SPB ROP → bulatkan ke atas<br>
                                                            • <strong>Order Constraints:</strong> Minimal order & Multiple order diterapkan setelah konversi
                                                        </small>
                                                    </div> 
                                                </div> 
                                                <div class="col-md-4">
                                                    <div class="alert alert-warning">
                                                        <small>
                                                            <strong><i class="fas fa-calendar-check"></i> Libur Purchasing:</strong><br>
                                                            • <strong>PR Periodik:</strong> Sabtu, Minggu, Libur Nasional<br>
                                                            • <strong>PR Sayuran:</strong> Minggu, Libur Nasional<br>
                                                            • Cek libur dilakukan di H+1, H+2, H+3 (hari SPB dibuat)<br>
                                                            • Jika H+X libur → SPB harus dibuat hari ini (H)
                                                        </small>
                                                    </div> 
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </div>  
                                <!-- Input search RM --> 
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search_item" placeholder="Search Item by Description">
                                            <div class="input-group-append">
                                                <button class="btn btn-sm btn-warning" type="button" id="search_btn"><i class="fas fa-search"></i> Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                                <!-- Info autosave --> 
                                <div class="col-md-6">
                                    @if($data->id > 0)
                                    <div class="alert alert-warning d-flex align-items-center py-1" role="alert">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                            <strong>Autosave Aktif : </strong>
                                            Semua field akan otomatis tersimpan saat Anda mengubah nilai. 
                                    </div>
                                    @endif
                                </div>
                            </div>
 
                            <!-- Items Section -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-sm" id="items-table">
                                            <thead class="bg-warning">
                                               <tr>
                                                <th width="3%" rowspan="2">No</th>
                                                <th rowspan="2">Item</th> 
                                                <th width="8%" class="text-center" rowspan="2">Current Stock</th>
                                                <th width="6%" class="text-center" rowspan="2">Sisa Utuh</th>
                                                <th width="6%" class="text-center" rowspan="2">Sisa Pakai</th>
                                                <th width="1%" class="text-center" rowspan="2">Adj</th> 
                                                <th width="6%" class="text-center" rowspan="2">LSM Aktual</th>
                                                <th style="display:none" width="4%" class="text-center" rowspan="2">DOI</th>
                                                <th width="7%" class="text-center" rowspan="2">Status Stok</th>

                                                <!-- Header utama yang punya turunan - 3 Usulan SPB -->
                                                <th width="12%" colspan="2" class="text-center">Usulan SPB 1</th>
                                                <th width="12%" colspan="2" class="text-center">Usulan SPB 2</th>
                                                <th width="12%" colspan="2" class="text-center">Usulan SPB 3</th>

                                                <th class="text-center" rowspan="2">X</th>
                                            </tr>

                                            <tr>
                                                <!-- Sub header untuk Usulan 1 --> 
                                                <th width="6%" class="text-center">Final Qty</th>
                                                <th width="6%" class="text-center">Saran Qty</th>
                                                <!-- Sub header untuk Usulan 2 --> 
                                                <th width="6%" class="text-center">Final Qty</th>
                                                <th width="6%" class="text-center">Saran Qty</th>
                                                <!-- Sub header untuk Usulan 3 --> 
                                                <th width="6%" class="text-center">Final Qty</th>
                                                <th width="6%" class="text-center">Saran Qty</th>
                                            </tr>
                                            </thead>
                                            <tbody id="items-tbody">
                                                @foreach($variables['raw_materials'] as $index => $rm)
                                                @php
                                                $existingDetail = null;
                                                if(isset($data->details)) {
                                                $existingDetail = $data->details->where('raw_material_id', $rm->id)->first();
                                                }

                                                // Get conversion data
                                                $hasConversion = $rm->conversion_factor_utuh_pakai && $rm->conversion_factor_utuh_pakai > 0;
                                                $conversionFactor = $hasConversion ? $rm->conversion_factor_utuh_pakai : 1;
                                                $uomUtuh = $rm->uom_utuh ?? $rm->uom;
                                                $uomPakai = $rm->uom_pakai ?? $rm->uom;
                                                
                                                // Get store raw material mapping for SPB suggestions
                                                $mapping = $variables['mappings']->get($rm->id);
                                                $hasMapping = $mapping && $mapping->is_active;
                                                $showSPB = $hasMapping && ($mapping->spb_flag ?? false);
                                                @endphp
                                                <tr data-index="{{ $index }}" 
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    data-conversion-utuh-pakai="{{ $conversionFactor }}"
                                                    data-conversion-kirim-utuh="{{ $rm->conversion_factor_kirim_utuh ?? 1 }}"
                                                    data-conversion-factor-fstr-to-item="{{ $rm->conversion_factor_to_item ?? 1 }}"
                                                    data-percentage-spb-rop="{{ $rm->percentage_spb_rop ?? 0 }}"
                                                    data-percentage-spb-over-qty="{{ $rm->percentage_spb_over_qty ?? 0 }}"
                                                    data-tipe-dokumen="{{ $mapping->tipe_dokumen ?? '' }}"
                                                    data-period-code="{{ $mapping->period->code ?? '' }}"
                                                    data-period-id="{{ $mapping->period_id ?? '' }}"
                                                    data-period-group="{{ $mapping->period->period_group ?? '' }}"
                                                    data-period-tipe-pengiriman="{{ $mapping->period->tipe_pengiriman ?? '' }}"
                                                    data-minimal-order="{{ $mapping->minimal_order ?? 0 }}"
                                                    data-multiple-order="{{ $mapping->multiple_order ?? 0 }}"
                                                    data-spb-flag="{{ $showSPB ? 'true' : 'false' }}"
                                                    data-uom-kirim="{{ $rm->uom_kirim }}"
                                                    class="{{ !$hasConversion ? 'table-warning' : '' }}">
                                                    <td class="text-center">
                                                        {{ $index + 1 }}
                                                        @if(!$hasConversion)
                                                        <br><i class="fa fa-exclamation-triangle text-danger" title="No conversion mapping!"></i>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <strong>{{ $rm->code }}</strong> | {{ $rm->name }}
                                                        <input type="hidden" name="items[{{ $index }}][raw_material_id]" value="{{ $rm->id }}">
                                                        <input type="hidden" name="items[{{ $index }}][item_olahan]" class="item-olahan-input" value="{{ $existingDetail ? $existingDetail->item_olahan : 0 }}">
                                                        <input type="hidden" name="items[{{ $index }}][spb_suggestion_date]" class="spb-suggestion-date-input" value="{{ $existingDetail && $existingDetail->spb_suggestion_date ? $existingDetail->spb_suggestion_date->format('Y-m-d') : '' }}">
                                                        <br>
                                                        <span class="text-muted">
                                                            UOM: <strong>{{ $uomPakai }}</strong>
                                                            @if($hasConversion)
                                                            (1 {{ $uomUtuh }} = {{ number_format($conversionFactor, 2, '.', '') }} {{ $uomPakai }})
                                                            @endif
                                                            @if($hasMapping && $mapping->period)
                                                            | <strong>{{ $mapping->tipe_dokumen.' '. $mapping->period->code }}</strong>
                                                            @endif
                                                        </span>
                                                        @if(!$hasConversion)
                                                        <br><small class="text-danger"><i class="fa fa-warning"></i> Tidak ada mapping</small>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="current-stock-display" data-raw-material-id="{{ $rm->id }}" style="cursor:help">
                                                            <div class="stock-loading" style="display: none;">
                                                                <i class="fa fa-spinner fa-spin"></i>
                                                            </div>
                                                            <div class="stock-info">
                                                                <div class="stock-qty">
                                                                    <strong>-</strong>
                                                                </div>
                                                                <div class="stock-status">
                                                                    <span class="badge badge-secondary stock-status-badge">Tidak Diketahui</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input type="text" step="1" min="0" class="form-control qty-utuh text-right autosave-field {{ !$hasConversion ? 'border-danger' : '' }}"
                                                            name="items[{{ $index }}][qty_utuh]"
                                                            data-field-name="qty_utuh"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-original-value="{{ $existingDetail ? $existingDetail->qty_utuh : 0 }}"
                                                            data-has-existing-data="{{ $existingDetail ? 'true' : 'false' }}"
                                                            value="{{ $existingDetail ? $existingDetail->qty_utuh : 0 }}"
                                                            data-conversion="{{ $conversionFactor }}"
                                                            data-has-conversion="{{ $hasConversion ? 'true' : 'false' }}"
                                                            data-uom-utuh="{{ $uomUtuh }}"
                                                            data-uom-pakai="{{ $uomPakai }}"
                                                            data-item-code="{{ $rm->code }}"
                                                            data-item-name="{{ $rm->name }}">
                                                    </td>
                                                    <td>
                                                        <div class="input-group input-group">
                                                            <input type="text" step="0.01" min="0" max="999999.99" class="form-control qty-pakai text-right autosave-field {{ !$hasConversion ? 'border-danger' : '' }}"
                                                                name="items[{{ $index }}][qty_pakai]"
                                                                data-field-name="qty_pakai"
                                                                data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                data-original-value="{{ $existingDetail ? $existingDetail->qty_pakai : 0 }}"
                                                                data-has-existing-data="{{ $existingDetail ? 'true' : 'false' }}"
                                                                value="{{ $existingDetail ? $existingDetail->qty_pakai : 0 }}"
                                                                onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                                oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                            @if($variables['fstr_parents']->has($rm->id))
                                                            <div class="input-group-append">
                                                                <span class="input-group-text fstr-indicator" 
                                                                    id="fstr_indicator_{{ $rm->id }}"
                                                                    data-toggle="tooltip" 
                                                                    data-placement="top" 
                                                                    data-html="true"
                                                                    title=""
                                                                    style="cursor: help; display: none;">
                                                                    <i class="fas fa-layer-group text-info"></i>
                                                                </span>
                                                            </div>
                                                            @endif
                                                        </div>
                                                    </td>
                                                    <!-- Adjustment Column -->
                                                    <td class="text-center">
                                                        @php
                                                        $mapping = $variables['mappings']->get($rm->id);
                                                        $hasRestan = $rm->adj_restan_flag;
                                                        $hasExtras = $rm->adj_extras_flag;
                                                        $hasRingkas = $rm->adj_ringkas_flag;
                                                        $hasSelisih = $rm->adj_selisih_flag;
                                                        $hasAnyAdjustment = $hasRestan || $hasExtras || $hasRingkas || $hasSelisih;
                                                        
                                                        // Calculate total adjustment
                                                        $totalAdj = 0;
                                                        if ($existingDetail) {
                                                            $totalAdj = ($existingDetail->adj_ekstra ?? 0) + 
                                                                       ($existingDetail->adj_restan ?? 0) + 
                                                                       ($existingDetail->adj_ringkas ?? 0) + 
                                                                       ($existingDetail->adj_selisih ?? 0);
                                                        }
                                                        @endphp
                                                        
                                                        @if($hasAnyAdjustment)
                                                            <!-- Icon button to open adjustment modal -->
                                                            <button type="button" 
                                                                class="btn btn-xs btn-adjustment-icon btn-warning }}" 
                                                                data-toggle="modal" 
                                                                data-target="#adjustmentModal{{ $rm->id }}"
                                                                data-raw-material-id="{{ $rm->id }}"
                                                                title="{{ $totalAdj > 0 ? 'Total Adjustment: ' . number_format($totalAdj, 2) : 'Klik untuk input adjustment' }}">
                                                                <i class="fas fa-plus"></i>
                                                            </button>
                                                            
                                                            <!-- Hidden inputs for form submission -->
                                                            <input type="hidden" name="items[{{ $index }}][adj_ekstra]" 
                                                                id="adj_ekstra_{{ $rm->id }}" 
                                                                class="adj-ekstra-input"
                                                                value="{{ $existingDetail ? $existingDetail->adj_ekstra : 0 }}">
                                                            <input type="hidden" name="items[{{ $index }}][adj_restan]" 
                                                                id="adj_restan_{{ $rm->id }}" 
                                                                class="adj-restan-input"
                                                                value="{{ $existingDetail ? $existingDetail->adj_restan : 0 }}">
                                                            <input type="hidden" name="items[{{ $index }}][adj_ringkas]" 
                                                                id="adj_ringkas_{{ $rm->id }}" 
                                                                class="adj-ringkas-input"
                                                                value="{{ $existingDetail ? $existingDetail->adj_ringkas : 0 }}">
                                                            <input type="hidden" name="items[{{ $index }}][adj_selisih]" 
                                                                id="adj_selisih_{{ $rm->id }}" 
                                                                class="adj-selisih-input"
                                                                value="{{ $existingDetail ? $existingDetail->adj_selisih : 0 }}">
                                                        @else
                                                            <span class="text-muted" title="No adjustment enabled">
                                                            <i class="fas fa-minus"></i>
                                                            </span>
                                                            <input type="hidden" name="items[{{ $index }}][adj_ekstra]" value="0">
                                                            <input type="hidden" name="items[{{ $index }}][adj_restan]" value="0">
                                                            <input type="hidden" name="items[{{ $index }}][adj_ringkas]" value="0">
                                                            <input type="hidden" name="items[{{ $index }}][adj_selisih]" value="0">
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        <!-- Hidden input for JavaScript access -->
                                                        <input type="hidden" class="ending-stock"
                                                            value="{{ $existingDetail ? number_format($existingDetail->lsm_aktual, 2, '.', '') : '0.00' }}">
                                                        <!-- Display label with tooltip -->
                                                        <div class="lsm-aktual-display" style="cursor:help" title="LSM Aktual dihitung dari: Qty Converted + Qty Pakai + (Item Olahan / Conversion Factor FSTR)">
                                                            <strong class="ending-stock-display">
                                                                {{ $existingDetail ? number_format($existingDetail->lsm_aktual, 2, '.', '') : '0.00' }}
                                                            </strong>
                                                        </div>
                                                        
                                                        <!-- LSM Reason Button (shown when DOI in range with lsm_reason_flag = true) -->
                                                        <input type="hidden" name="items[{{ $index }}][lsm_reason_id]" 
                                                            id="lsm_reason_id_{{ $rm->id }}" 
                                                            value="{{ $existingDetail->lsm_reason_id ?? '' }}">
                                                        <button type="button" 
                                                            class="btn btn-xs btn-danger mt-1 lsm-reason-btn" 
                                                            id="lsm_reason_btn_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            style="display:none; width:100%;"
                                                            title="Pilih alasan LSM">
                                                            <i class="fas fa-exclamation-triangle"></i>
                                                        </button>
                                                    </td>
                                                    <td class="text-center" style="display:none">
                                                        <!-- Hidden input for JavaScript access -->
                                                        <input type="hidden" class="doi-value"
                                                            value="{{ $existingDetail && $existingDetail->doi ? number_format($existingDetail->doi, 2, '.', '') : '0.00' }}">
                                                        <!-- Display label with tooltip -->
                                                        <div class="doi-display" style="cursor:help" title="DOI (Days of Inventory) = LSM Aktual / Forecast Average (7 hari)">
                                                            <strong class="doi-value-display">
                                                                {{ $existingDetail && $existingDetail->doi ? number_format($existingDetail->doi, 2, '.', '') : '0.00' }}
                                                    </td>  
                                                    <!-- Status Stok Column -->
                                                    <td class="text-center">
                                                        @if($showSPB)
                                                        <span id="status_badge_{{ $rm->id }}">-</span>
                                                        <br><small id="open_spb_{{ $rm->id }}">Open: 0.00</small>
                                                        @else
                                                        <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Final Qty Column - Usulan 1 (Hasil Sistem) -->
                                                    <td class="text-center" style="cursor:help">
                                                        @if($showSPB)
                                                        <span id="spb_suggestion_{{ $rm->id }}" class="font-weight-bold text-info h4">X</span>
                                                        @else
                                                        <span class="font-weight-bold text-info h4"></span>
                                                        @endif
                                                    </td>
                                                    <!-- Saran Qty Editable Column - Usulan 1 (Input User) -->
                                                    <td>
                                                        @if($showSPB)
                                                        <input type="text" min="0" 
                                                            class="form-control final-qty-editable text-right"
                                                            name="items[{{ $index }}][spb_suggestion_qty_final]"
                                                            id="spb_suggestion_qty_final_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="1"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                            value="{{ $existingDetail->spb_suggestion_qty_final ?? '' }}"
                                                            placeholder="Auto"
                                                            title="Anda dapat menyesuaikan qty ini sebelum membuat SPB (Requirement 17.5, 18.4)">
                                                        
                                                        <!-- Hidden input for SPB over reason -->
                                                        <input type="hidden" 
                                                            name="items[{{ $index }}][spb_over_reason_id]"
                                                            id="spb_over_reason_id_{{ $rm->id }}"
                                                            value="{{ $existingDetail->spb_over_reason_id ?? '' }}">
                                                        
                                                        <!-- Button for SPB over qty reason (shown when final > suggestion) -->
                                                        <button type="button" 
                                                            class="btn btn-xs btn-danger mt-1 spb-over-reason-btn" 
                                                            id="spb_over_reason_btn_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="1"
                                                            style="display:none; width:100%;"
                                                            title="Pilih alasan SPB melebihi saran">
                                                            <i class="fas fa-exclamation-triangle"></i>
                                                        </button>
                                                        @else
                                                        <span class="text-muted text-center d-block"></span>
                                                        @endif
                                                    </td>
                                                    
                                                    <!-- Final Qty Column - Usulan 2 (Hasil Sistem) -->
                                                    <td class="text-center" style="cursor:help">
                                                        @if($showSPB)
                                                        <span id="spb_suggestion_2_{{ $rm->id }}" class="font-weight-bold text-info h4">X</span>
                                                        @else
                                                        <span class="font-weight-bold text-info h4">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Saran Qty Editable Column - Usulan 2 (Input User) -->
                                                    <td>
                                                        @if($showSPB)
                                                        <input type="text" min="0" 
                                                            class="form-control final-qty-editable text-right"
                                                            name="items[{{ $index }}][spb_suggestion_qty_final_2]"
                                                            id="spb_suggestion_qty_final_2_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="2"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                            value="{{ $existingDetail->spb_suggestion_qty_final_2 ?? '' }}"
                                                            placeholder="Auto"
                                                            title="Usulan SPB ke-2">
                                                        
                                                        <!-- Hidden input for SPB over reason -->
                                                        <input type="hidden" 
                                                            name="items[{{ $index }}][spb_over_reason_id_2]"
                                                            id="spb_over_reason_id_2_{{ $rm->id }}"
                                                            value="{{ $existingDetail->spb_over_reason_id_2 ?? '' }}">
                                                        
                                                        <!-- Button for SPB over qty reason -->
                                                        <button type="button" 
                                                            class="btn btn-xs btn-danger mt-1 spb-over-reason-btn" 
                                                            id="spb_over_reason_btn_2_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="2"
                                                            style="display:none; width:100%;"
                                                            title="Pilih alasan SPB melebihi saran">
                                                            <i class="fas fa-exclamation-triangle"></i>
                                                        </button>
                                                        @else
                                                        <span class="text-muted text-center d-block">X</span>
                                                        @endif
                                                    </td>
                                                    
                                                    <!-- Final Qty Column - Usulan 3 (Hasil Sistem) -->
                                                    <td class="text-center" style="cursor:help">
                                                        @if($showSPB)
                                                        <span id="spb_suggestion_3_{{ $rm->id }}" class="font-weight-bold text-info h4">X</span>
                                                        @else
                                                        <span class="font-weight-bold text-info h4">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Saran Qty Editable Column - Usulan 3 (Input User) -->
                                                    <td>
                                                        @if($showSPB)
                                                        <input type="text" min="0" 
                                                            class="form-control final-qty-editable text-right"
                                                            name="items[{{ $index }}][spb_suggestion_qty_final_3]"
                                                            id="spb_suggestion_qty_final_3_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="3"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                            value="{{ $existingDetail->spb_suggestion_qty_final_3 ?? '' }}"
                                                            placeholder="Auto"
                                                            title="Usulan SPB ke-3">
                                                        
                                                        <!-- Hidden input for SPB over reason -->
                                                        <input type="hidden" 
                                                            name="items[{{ $index }}][spb_over_reason_id_3]"
                                                            id="spb_over_reason_id_3_{{ $rm->id }}"
                                                            value="{{ $existingDetail->spb_over_reason_id_3 ?? '' }}">
                                                        
                                                        <!-- Button for SPB over qty reason -->
                                                        <button type="button" 
                                                            class="btn btn-xs btn-danger mt-1 spb-over-reason-btn" 
                                                            id="spb_over_reason_btn_3_{{ $rm->id }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            data-usulan="3"
                                                            style="display:none; width:100%;"
                                                            title="Pilih alasan SPB melebihi saran">
                                                            <i class="fas fa-exclamation-triangle"></i>
                                                        </button>
                                                        @else
                                                        <span class="text-muted text-center d-block"></span>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        @if($data->id > 0)
                                                        <!-- <button type="button" class="btn btn-xs btn-info view-history"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-raw-material="{{ $rm->code }} - {{ $rm->name }}"
                                                            title="Lihat Riwayat Perubahan">
                                                            <i class="fa fa-history"></i>
                                                        </button> di remark req pak erik-->
                                                        @else
                                                        <span class="text-muted text-sm">-</span>
                                                        @endif
                                                        <button type="button" class="btn btn-xs btn-secondary mt-2 clear-row"
                                                            data-index="{{ $index }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            title="Hapus baris ini">
                                                            <i class="fa fa-eraser"></i>
                                                        </button>
                                                    </td> 
                                                </tr>
                                                
                                                {{-- Adjustment Modal for this item --}}
                                                @if($hasAnyAdjustment)
                                                <div class="modal fade" id="adjustmentModal{{ $rm->id }}" tabindex="-1" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header bg-warning">
                                                                <h5 class="modal-title">
                                                                    <i class="fas fa-calculator"></i> Adjustments - {{ $rm->code }}
                                                                </h5>
                                                                <button type="button" class="close text-white" data-dismiss="modal">
                                                                    <span>&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <p class="text-muted mb-3">
                                                                    <strong>{{ $rm->name }}</strong>
                                                                </p>
                                                                
                                                                @if($hasExtras)
                                                                <div class="form-group">
                                                                    <label>Extras</label>
                                                                    <input type="text" step="0.01" min="0" max="999999.99" 
                                                                        class="form-control text-right adjustment-input autosave-field"
                                                                        data-field-name="adj_ekstra"
                                                                        data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                        data-raw-material-id="{{ $rm->id }}"
                                                                        data-adj-type="ekstra"
                                                                        value="{{ $existingDetail ? $existingDetail->adj_ekstra : 0 }}"
                                                                        onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                                        oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                                </div>
                                                                @endif
                                                                
                                                                @if($hasRestan)
                                                                <div class="form-group">
                                                                    <label>Restan</label>
                                                                    <input type="text" step="0.01" min="0" max="999999.99" 
                                                                        class="form-control text-right adjustment-input autosave-field"
                                                                        data-field-name="adj_restan"
                                                                        data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                        data-raw-material-id="{{ $rm->id }}"
                                                                        data-adj-type="restan"
                                                                        value="{{ $existingDetail ? $existingDetail->adj_restan : 0 }}"
                                                                        onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                                        oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                                </div>
                                                                @endif
                                                                
                                                                @if($hasRingkas)
                                                                <div class="form-group">
                                                                    <label>Ringkas</label>
                                                                    <input type="text" step="0.01" min="0" max="999999.99" 
                                                                        class="form-control text-right adjustment-input autosave-field"
                                                                        data-field-name="adj_ringkas"
                                                                        data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                        data-raw-material-id="{{ $rm->id }}"
                                                                        data-adj-type="ringkas"
                                                                        value="{{ $existingDetail ? $existingDetail->adj_ringkas : 0 }}"
                                                                        onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                                        oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                                </div>
                                                                @endif
                                                                
                                                                @if($hasSelisih)
                                                                <div class="form-group mb-0">
                                                                    <label>Selisih</label>
                                                                    <input type="text" step="0.01" min="0" max="999999.99" 
                                                                        class="form-control text-right adjustment-input autosave-field"
                                                                        data-field-name="adj_selisih"
                                                                        data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                        data-raw-material-id="{{ $rm->id }}"
                                                                        data-adj-type="selisih"
                                                                        value="{{ $existingDetail ? $existingDetail->adj_selisih : 0 }}"
                                                                        onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                                        oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)">
                                                                </div>
                                                                @endif
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">
                                                                    <i class="fas fa-times"></i> Close
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                                
                                                {{-- FSTR Sub-lines: Display FSTR components (WIP items) for this RM --}}
                                                @php
                                                // Get all FSTR components (WIP items) that belong to this RM
                                                // Example: DRY0048 (parent) has WIP0029, WIP0030, WIP0031 (components)
                                                // Filter only components with input_lsm_flag = true to show in LSM input
                                                $fstrComponents = $rm->components()
                                                    ->where('delete_flag', 0)
                                                    ->where('input_lsm_flag', true)
                                                    ->with('component')
                                                    ->get()
                                                    ->filter(function($comp) {
                                                        return $comp->component !== null; // Remove components with null component
                                                    });
                                                @endphp
                                                
                                                @foreach($fstrComponents as $fstrComponent)
                                                @php
                                                $fstr = $fstrComponent->component;  // Changed from parent to component
                                                
                                                // Skip if component is null (filtered out)
                                                if (!$fstr) continue;
                                                
                                                $componentQtyPerUnit = $fstrComponent->qty;
                                                
                                                // Check if this FSTR is also a FSTR (has components)
                                                $isFSTR = $fstr->components()->where('delete_flag', 0)->exists();
                                                
                                                // Get existing FSTR qty_pakai from SO detail if exists
                                                $existingFstrQty = 0;
                                                if ($existingDetail && $existingDetail->fstr_qty_pakai) {
                                                    $fstrQtyData = is_string($existingDetail->fstr_qty_pakai) 
                                                        ? json_decode($existingDetail->fstr_qty_pakai, true) 
                                                        : $existingDetail->fstr_qty_pakai;
                                                    $existingFstrQty = $fstrQtyData[$fstr->id] ?? 0;
                                                }
                                                @endphp
                                                
                                                <tr class="fstr-subline bg-light" 
                                                    style="border-top: 2px solid #e9ecef;"
                                                    data-parent-id="{{ $rm->id }}" 
                                                    data-fstr-id="{{ $fstr->id }}"
                                                    data-component-qty="{{ $componentQtyPerUnit }}"
                                                    data-is-fstr="{{ $isFSTR ? 'true' : 'false' }}">
                                                    <td colspan="3" style="padding-left:3.5%;">
                                                        <i class="fas fa-level-up-alt fa-rotate-90 text-muted"></i>
                                                        <small class="text-muted">FSTR:</small>
                                                        <small>{{ $fstr->code }}</small> -                                                     
                                                        <small>{{ $fstr->name }}</small> -
                                                        <small>{{ $fstr->uom_pakai ?? $fstr->uom; }}</small> 
                                                        <!-- <small class="text-muted">
                                                            <i class="fas fa-info-circle"></i>
                                                            Menggunakan {{ number_format($componentQtyPerUnit, 4) }} {{ $rm->uom_pakai ?? $rm->uom }} per unit
                                                        </small> -->
                                                    </td>
                                                    <td colspan="2">
                                                        {{-- FSTR qty_pakai input --}}
                                                        <input type="text" 
                                                            step="0.01" 
                                                            min="0" 
                                                            max="999999.99"
                                                            class="form-control fstr-qty-pakai text-right"
                                                            name="fstr_qty_pakai[{{ $rm->id }}][{{ $fstr->id }}]"
                                                            data-field-name="fstr_qty_pakai"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-fstr-id="{{ $fstr->id }}"
                                                            data-parent-id="{{ $rm->id }}"
                                                            data-component-qty="{{ $componentQtyPerUnit }}"
                                                            data-is-fstr="{{ $isFSTR ? 'true' : 'false' }}"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 46"
                                                            oninput="if(this.value.split('.')[1] && this.value.split('.')[1].length > 2) this.value = parseFloat(this.value).toFixed(2)"
                                                            value="{{ $existingFstrQty }}"
                                                            placeholder="Qty Pakai FSTR">
                                                    </td>
                                                    <td colspan="8" class="text-center text-muted">
                                                        <!-- <small><i class="fas fa-arrow-up"></i> Input qty FSTR akan otomatis menambah qty_pakai bahan baku di atas</small> -->
                                                    </td>
                                                </tr>
                                                @endforeach
                                                
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <a href="{{ route('stock_opnames.index') }}" class="btn btn-sm btn-warning">
                                        <i class="fas fa-arrow-left"></i> Kembali
                                    </a>
                                    <button type="button" class="btn btn-sm btn-secondary button-cek-permission" data-permission="stock_opnames.clear_inputs" id="clear-btn">
                                        <i class="fas fa-eraser"></i> Clear
                                    </button>
                                    @if(!isset($data->id) || $data->status == 'Draft')
                                    <button type="button" id="save-draft-btn" class="btn btn-sm btn-info button-cek-permission" data-permission="stock_opnames.store">
                                        <i class="fas fa-save"></i> Simpan Draft
                                    </button>
                                    <button type="button" id="submit-btn" class="btn btn-sm btn-success button-cek-permission" data-permission="stock_opnames.store">
                                        <i class="fas fa-check"></i> Submit
                                    </button>
                                    @endif 
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Change History Modal -->
<div class="modal fade" id="changeHistoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title">
                    <i class="fa fa-history"></i> Change History
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="historyLoadingIndicator" class="text-center" style="display: none;">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                    <p class="mt-2">Memuat riwayat...</p>
                </div>
                <div id="historyContent">
                    <h6 id="historyItemName" class="mb-3"></h6>
                    <div class="table-responsive">
                        <table id="historyTable" class="table table-hover table-sm">
                            <thead>
                                <tr>
                                    <th width="15%">Date/Time</th>
                                    <th width="15%">Field</th>
                                    <th width="15%">Old Value</th>
                                    <th width="15%">New Value</th>
                                    <th width="10%">Changed By</th>
                                    <th width="10%">IP Address</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody">
                                <!-- Will be populated by JavaScript -->
                            </tbody>
                        </table>
                    </div>
                    <div id="noHistoryMessage" class="alert alert-info" style="display: none;">
                        <i class="fa fa-info-circle"></i> No change history found for this item.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    // ========================================
    // Debug Logging Control (MUST BE FIRST!)
    // ========================================
    
    /**
     * CARA DISABLE DEBUG LOG SAAT PRODUCTION:
     * 
     * Ubah DEBUG_ENABLED = true menjadi DEBUG_ENABLED = false
     * 
     * Log yang tetap muncul meskipun DEBUG_ENABLED = false:
     * - printWarn() - Warning messages (masalah yang perlu perhatian)
     * - printError() - Error messages (error yang harus diperbaiki)
     * 
     * Log yang akan di-disable saat DEBUG_ENABLED = false:
     * - printLog() - Debug/info messages
     * 
     * Contoh log yang penting untuk troubleshooting:
     * 1. Kenapa SPB tidak muncul (printLog dengan ❌ atau ℹ️)
     * 2. Input FSTR mempengaruhi item mana saja (printLog dengan 🔄)
     * 3. Total FSTR contribution (printLog dengan 📊)
     */
    
    /**
     * Global debug flag - set to false to disable all debug logs
     * When going live, simply change this to false
     */
    const DEBUG_ENABLED = true;
    
    /**
     * Centralized logging function
     * All debug logs go through this function for easy enable/disable
     * 
     * @param {string} message - Log message
     * @param {*} data - Optional data to log
     */
    function printLog(message, data = null) {
        if (!DEBUG_ENABLED) return;
        
        if (data !== null) {
            console.log(message, data);
        } else {
            console.log(message);
        }
    }
    
    /**
     * Log warning messages (always enabled, even in production)
     */
    function printWarn(message, data = null) {
        if (data !== null) {
            console.warn(message, data);
        } else {
            console.warn(message);
        }
    }
    
    /**
     * Log error messages (always enabled, even in production)
     */
    function printError(message, data = null) {
        if (data !== null) {
            console.error(message, data);
        } else {
            console.error(message);
        }
    }
    
    // ========================================
    // End Debug Logging Control
    // ========================================
    
    // ========================================
    // Task 22.1: Page Loading Overlay
    // ========================================
    
    /**
     * Show page loading overlay during initial page load
     */
    function showPageLoading() {
        if (!$('.page-loading-overlay').length) {
            $('body').append(`
                <div class="page-loading-overlay">
                    <div class="page-loading-spinner"></div>
                    <div class="page-loading-text">Memuat Data Stock Opname...</div>
                </div>
            `);
        }
    }

    /**
     * Hide page loading overlay after page is fully loaded
     */
    function hidePageLoading() {
        $('.page-loading-overlay').fadeOut(300, function() {
            $(this).remove();
        });
    }

    // Show loading overlay immediately
    showPageLoading();

    // ========================================
    // Helper Functions
    // ========================================
    
    /**
     * Auto-save FSTR qty_pakai with success/failure handling
     * Requirement 24.4, 24.5, 15.4
     */
    function autoSaveFSTRQtyPakai(soDetailId, fstrId, qtyPakai) {
        // Show saving indicator
        showSavingIndicator();
        
        // Task 22.1: Add inline field loading indicator
        const field = $(`.fstr-subline[data-fstr-id="${fstrId}"] input[name^="fstr_qty_pakai"]`);
        field.addClass('field-saving');

        // Requirement 15.4: Minimal payload with only changed data
        const payload = {
            _token: '{{ csrf_token() }}',
            so_detail_id: soDetailId,
            fstr_id: fstrId,
            qty_pakai: qtyPakai
        };

        $.ajax({
            url: '{{ route("stock_opnames.auto_save_fstr_qty_pakai") }}',
            type: 'POST',
            data: payload,
            success: function(response) {
                // Task 22.1: Remove inline field loading indicator
                field.removeClass('field-saving');
                
                if (response.success) {
                    // On success: recalculate component qty and update main line (Requirement 24.4)
                    
                    // Find parent raw material ID from the FSTR sub-line
                    const fstrSubline = $(`.fstr-subline[data-fstr-id="${fstrId}"]`);
                    const parentId = fstrSubline.data('parent-id');
                    
                    // Calculate all RMs affected by this FSTR cascade (including parent)
                    const affectedRMs = findAffectedRMs(fstrId);
                    
                    // Add parent to affected RMs if not already included
                    if (parentId && !affectedRMs.includes(parentId)) {
                        affectedRMs.push(parentId);
                    }
                    
                    // Summary log: show which RMs are affected
                    if (affectedRMs.length > 0) {
                        printLog(`🔄 Input FSTR ${fstrId} mempengaruhi ${affectedRMs.length} item: ${affectedRMs.join(', ')}`);
                    }
                    
                    // Calculate each affected RM only once and save qty_pakai to database
                    const calculatedRMs = new Set();
                    for (let rmId of affectedRMs) {
                        if (!calculatedRMs.has(rmId)) {
                            // IMPORTANT: Reset all SPB usulan before recalculation (LSM changed due to FSTR)
                            resetAllSPBUsulan(rmId);
                            
                            calculateSPBSuggestion(rmId, true);
                            calculatedRMs.add(rmId);
                            
                            // Save qty_pakai to database for affected RM
                            const row = $(`tr[data-raw-material-id="${rmId}"]`);
                            const soDetailId = row.find('.qty-pakai').data('so-detail-id');
                            const qtyUtuh = row.find('.qty-utuh').val() || 0;
                            const qtyPakai = row.find('.qty-pakai').val() || 0;
                            
                            // Recalculate item_olahan (FSTR contribution) for this RM
                            const fstrResult = calculateFSTRContribution(rmId);
                            const itemOlahan = fstrResult.total; // This is the FSTR contribution
                            
                            const spbSuggestionDate = row.find('.spb-suggestion-date-input').val() || null;
                            
                            // Get SPB values from display (after calculation)
                            const spbSuggestionElement = $(`#spb_suggestion_${rmId}`);
                            let spbSuggestionQty = null;
                            if (spbSuggestionElement.length > 0) {
                                const spbHtml = spbSuggestionElement.html();
                                if (spbHtml && spbHtml !== '-' && spbHtml !== 'X') {
                                    const spbParts = spbHtml.split('<br>');
                                    const spbText = spbParts[0].trim();
                                    const spbMatch = spbText.match(/[\d.]+/);
                                    if (spbMatch) {
                                        spbSuggestionQty = parseFloat(spbMatch[0]) || null;
                                    }
                                }
                            }
                            
                            // Get final qty (user edited value or system value)
                            const finalQtyEditableInput = $(`#spb_suggestion_qty_final_${rmId}`);
                            const spbSuggestionQtyFinal = finalQtyEditableInput.length > 0 ? parseFloat(finalQtyEditableInput.val()) || null : null;
                            
                            // Get reason if exists
                            const reasonInput = $(`#spb_over_reason_id_${rmId}`);
                            const spbOverReasonId = reasonInput.length > 0 && reasonInput.val() ? reasonInput.val() : null;
                            
                            // Debug log
                            printLog(`📤 Sending to server - RM ${rmId}: qty_utuh=${qtyUtuh}, qty_pakai=${qtyPakai}, item_olahan=${itemOlahan.toFixed(5)}, spb_qty=${spbSuggestionQty}, spb_final=${spbSuggestionQtyFinal}`);
                            
                            if (soDetailId) {
                                // Build payload with SPB values
                                const savePayload = {
                                    _token: '{{ csrf_token() }}',
                                    so_detail_id: soDetailId,
                                    field_name: 'qty_pakai',
                                    value: qtyPakai,
                                    qty_utuh: qtyUtuh,
                                    qty_pakai: qtyPakai,
                                    item_olahan: itemOlahan,
                                    spb_suggestion_date: spbSuggestionDate
                                };
                                
                                // Add SPB values if available
                                if (spbSuggestionQty !== null) {
                                    savePayload.spb_suggestion_qty = spbSuggestionQty;
                                }
                                if (spbSuggestionQtyFinal !== null) {
                                    savePayload.spb_suggestion_qty_final = spbSuggestionQtyFinal;
                                }
                                if (spbOverReasonId !== null) {
                                    savePayload.spb_over_reason_id = spbOverReasonId;
                                }
                                
                                // Save qty_pakai + SPB values (controller will calculate lsm_aktual and doi automatically)
                                $.ajax({
                                    url: '{{ route("stock_opnames.auto_save_field") }}',
                                    type: 'POST',
                                    data: savePayload,
                                    success: function(saveResponse) {
                                        if (saveResponse.success) {
                                            printLog(`✅ RM ${rmId} saved - qty_pakai: ${qtyPakai}, item_olahan: ${itemOlahan.toFixed(5)}`);
                                        }
                                    },
                                    error: function(xhr) {
                                        printError(`❌ Failed to save qty_pakai for RM ${rmId}:`, xhr);
                                    }
                                });
                            }
                        }
                    }
                    
                    showSaveSuccess();
                } else {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    // On failure: show error message, don't update main line (Requirement 24.5)
                    showSaveError(response.message);
                }
            },
            error: function(xhr) {
                // Task 22.1: Remove inline field loading indicator
                field.removeClass('field-saving');
                
                // On failure: show error message, don't update main line (Requirement 24.5)
                const message = xhr.responseJSON?.message || 'Error menyimpan FSTR qty_pakai';
                showSaveError(message);
                printError('❌ FSTR autosave error:', xhr);
            }
        });
    }
    
    /**
     * Show save error message
     */
    function showSaveError(message) {
        $('.save-indicator').remove();
        // Show error indicator with enhanced styling (Task 22.2)
        if (!$('.save-error').length) {
            $('body').append('<div class="save-error"><i class="fa fa-exclamation-circle"></i><span>' + message + '</span></div>');
            setTimeout(() => {
                $('.save-error').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 4000);
        }
        
        // Also show SweetAlert for important errors
        Swal.fire({
            icon: 'error',
            title: 'Gagal Menyimpan',
            text: message,
            timer: 3000,
            toast: true,
            position: 'top-end',
            showConfirmButton: false
        });
    }
    
    /**
     * Show saving indicator
     */
    function showSavingIndicator() {
        // Show saving spinner with enhanced styling (Task 22.1)
        if (!$('.save-indicator').length) {
            $('body').append('<div class="save-indicator"><i class="fa fa-spinner fa-spin"></i><span>Menyimpan...</span></div>');
        }
    }

    /**
     * Show save success message
     */
    function showSaveSuccess() {
        $('.save-indicator').remove();
        // Show brief success indicator with enhanced styling (Task 22.2)
        if (!$('.save-success').length) {
            $('body').append('<div class="save-success"><i class="fa fa-check-circle"></i><span>Berhasil Disimpan</span></div>');
            setTimeout(() => {
                $('.save-success').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 2000);
        }
    }
    
    /**
     * Show error message using SweetAlert
     * 
     * @param {string} message - Error message to display
     */
    function showError(message) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: message,
            confirmButtonText: 'OK'
        });
    }
    
    /**
     * Show warning message using SweetAlert
     * 
     * @param {string} message - Warning message to display
     */
    function showWarning(message) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: message,
            confirmButtonText: 'OK'
        });
    }
    
    /**
     * Log error to Laravel backend for server-side logging
     * 
     * @param {string} functionName - Name of the function where error occurred
     * @param {Object} errorData - Error data to log
     * 
     * Requirements: 25.5
     */
    function logErrorToBackend(functionName, errorData) {
        // Send error to backend for logging
        $.ajax({
            url: '{{ route("stock_opnames.log_error") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                function_name: functionName,
                error_data: JSON.stringify(errorData),
                so_id: {{ $stockOpname->id ?? 'null' }},
                user_id: {{ auth()->id() ?? 'null' }}
            },
            success: function(response) {
                printLog('✓ Error berhasil di-log ke backend');
            },
            error: function(xhr, status, error) {
                printError('❌ Gagal log error ke backend:', error);
            }
        });
    }
    
    /**
     * Show conversion warning inline in the SPB suggestion column
     * Displays a warning badge instead of SPB suggestion value
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {string} message - Warning message to display
     * 
     * Requirements: 14.1, 14.2
     */
    function showConversionWarning(rawMaterialId, message) {
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        if (row.length === 0) {
            return;
        }
        
        // Show warning badge in SPB suggestion column
        const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
        if (spbSuggestionElement.length > 0) {
            spbSuggestionElement.html('<span class="badge badge-warning" title="' + message + '"><i class="fas fa-exclamation-triangle"></i> ' + message + '</span>');
        }
        
        // Clear final qty editable
        const finalQtyInput = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
        if (finalQtyInput.length > 0) {
            finalQtyInput.val('');
            finalQtyInput.prop('disabled', true);
        }
    }
    
    /**
     * Update LSM Aktual display (both hidden input and visible label)
     * Also updates tooltip with breakdown information
     * 
     * @param {jQuery} row - Table row element
     * @param {number|string} value - LSM Aktual value
     * @param {object} breakdown - Optional breakdown info {qtyConverted, qtyPakai, itemOlahan, conversionFactor}
     */
    function updateLSMDisplay(row, value, breakdown) {
        const formatted = typeof value === 'number' ? value.toFixed(2) : (value || '0.00');
        row.find('.ending-stock').val(formatted);
        row.find('.ending-stock-display').text(formatted);
        
        // Update tooltip with breakdown if provided
        if (breakdown) {
            const tooltipText = `LSM Aktual: ${formatted}\n\n` +
                `Breakdown:\n` +
                `• Qty Converted: ${(breakdown.qtyConverted || 0).toFixed(2)}\n` +
                `• Qty Pakai: ${(breakdown.qtyPakai || 0).toFixed(2)}\n` +
                `• Item Olahan: ${(breakdown.itemOlahan || 0).toFixed(2)}\n` +
                `• Conversion Factor FSTR: ${(breakdown.conversionFactor || 1).toFixed(2)}\n\n` +
                `Formula: Qty Converted + Qty Pakai + (Item Olahan / CF FSTR)`;
            row.find('.lsm-aktual-display').attr('title', tooltipText);
        }
    }
    
    /**
     * Update DOI display (both hidden input and visible label)
     * Also updates tooltip with calculation information
     * 
     * @param {jQuery} row - Table row element
     * @param {number|string} value - DOI value (can be number or '∞')
     * @param {object} info - Optional calculation info {lsmAktual, forecastAverage}
     */
    function updateDOIDisplay(row, value, info) {
        let formatted;
        if (value === '∞') {
            formatted = '∞';
        } else {
            formatted = typeof value === 'number' ? value.toFixed(2) : (value || '0.00');
        }
        row.find('.doi-value').val(formatted);
        row.find('.doi-value-display').text(formatted);
        
        // Update tooltip with calculation info if provided
        if (info) {
            let tooltipText = `DOI (Days of Inventory): ${formatted}\n\n`;
            if (value === '∞') {
                tooltipText += `Forecast Average = 0 (tidak ada forecast)\n` +
                    `DOI tidak dapat dihitung`;
            } else {
                tooltipText += `Calculation:\n` +
                    `• LSM Aktual: ${(info.lsmAktual || 0).toFixed(2)}\n` +
                    `• Forecast Average (7 hari): ${(info.forecastAverage || 0).toFixed(2)}\n\n` +
                    `Formula: LSM Aktual / Forecast Average`;
            }
            row.find('.doi-display').attr('title', tooltipText);
        }
    }
    
    /**
     * Update display when no forecast data is available
     * Shows DOI = 0 and SPB suggestion = 0 with "No Forecast" tooltip
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} lsmAktual - LSM Aktual value
     * 
     * Requirements: 14.4
     */
    function updateDisplayWithNoForecast(rawMaterialId, lsmAktual) {
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        if (row.length === 0) {
            return;
        }
        
        // Update LSM Aktual
        updateLSMDisplay(row, lsmAktual);
        
        // Update DOI to 0
        updateDOIDisplay(row, 0);
        
        // Update Status Badge
        updateStatusBadge(rawMaterialId, lsmAktual, 0);
        
        // Update SPB Suggestion with "No Forecast" indicator
        const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
        if (spbSuggestionElement.length > 0) {
            spbSuggestionElement.html('<span class="badge badge-secondary" title="Data forecast tidak tersedia"><i class="fas fa-info-circle"></i> No Forecast</span>');
            
            // Add tooltip
            if (spbSuggestionElement.data('bs.tooltip')) {
                spbSuggestionElement.tooltip('dispose');
            }
            spbSuggestionElement.tooltip({
                title: 'Data forecast tidak tersedia untuk raw material ini',
                placement: 'top',
                html: true
            });
        }
        
        // Disable and clear final qty editable (no SPB suggestion)
        const finalQtyInput = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
        if (finalQtyInput.length > 0) {
            finalQtyInput.val('');
            finalQtyInput.prop('disabled', true);
            finalQtyInput.attr('placeholder', 'No Forecast');
            finalQtyInput.attr('title', 'Tidak ada data forecast untuk item ini');
        }
    }
    
    // ========================================
    // SPB Suggestion Data Preparation
    // ========================================
    
    // Global data for SPB suggestions calculation
    let forecastData = @json($jsData['forecast'] ?? []);
    let shipmentDeliveries = @json($jsData['shipmentDeliveries'] ?? []);
    let shipmentSuppliers = @json($jsData['shipmentSuppliers'] ?? []);
    let holidays = @json($jsData['holidays'] ?? []); // National holidays (date strings)
    let prHolidayDays = @json($jsData['prHoliday'] ?? ['periodik' => ['Sabtu', 'Minggu'], 'sayuran' => ['Minggu']]); // PR purchasing holiday days per type
    let tsmData = @json($jsData['tsm'] ?? []); // TSM for H+2 (for SPB calculation)
    let tsmSODate = @json($jsData['tsmSODate'] ?? []); // TSM for SO date (for LSM difference label)
    let openSPBData = @json($jsData['openSPB'] ?? []); // Open SPB per raw material
    let rangeDois = @json($jsData['rangeDois'] ?? []); // Range DOI master data for status badge
    let soDate = @json($jsData['soDate'] ?? date('Y-m-d'));
    let mappingData = {}; // Will be populated from data attributes
    let fstrComponents = {}; // Will be populated from data attributes (for future FSTR implementation)
    let spbReasons = @json($jsData['spbReasons'] ?? []); // SPB over qty reasons
    let lsmReasons = @json($jsData['lsmReasons'] ?? []); // LSM reasons for DOI in range with lsm_reason_flag
    
    // Debug: Log PR Holiday Days configuration
    printLog('📅 PR Holiday Days Configuration:', prHolidayDays);
    printLog('📅 National Holidays (libur nasional saja, bukan Sabtu/Minggu):', holidays);
    let spbOverReasonData = {}; // Store reason selection per raw material
    
    printLog('=== CEK DATA SPB SUGGESTION ===');
    printLog('Tanggal SO:', soDate);
    printLog('Shipment DC:', shipmentDeliveries);
    printLog('Shipment Suppliers:', shipmentSuppliers);
    printLog('PR Holiday Days:', prHolidayDays);
    
    // Helper function to add days to date (replacement for moment.js)
    function addDays(dateString, days) {
        const dateParts = dateString.split('-');
        const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
        date.setDate(date.getDate() + days);
        
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        
        return `${year}-${month}-${day}`;
    }
    
    /**
     * Add working days to date (skip holidays)
     * Used for calculating H+N without counting holidays
     * 
     * Example:
     * - SO date: Monday, Jan 12, 2025
     * - Holidays: [Friday Jan 16, Saturday Jan 17, Sunday Jan 18]
     * - addWorkingDays(soDate, 2) = Wednesday Jan 14 (2 working days)
     * - addWorkingDays(soDate, 3) = Monday Jan 19 (skip Fri, Sat, Sun holidays)
     * 
     * @param {string} dateString - Start date in YYYY-MM-DD format
     * @param {number} workingDays - Number of working days to add
     * @returns {string} Result date in YYYY-MM-DD format
     */
    function addWorkingDays(dateString, workingDays) {
        let currentDate = dateString;
        let daysAdded = 0;
        let iterations = 0;
        const maxIterations = 30; // Safety limit
        
        while (daysAdded < workingDays && iterations < maxIterations) {
            currentDate = addDays(currentDate, 1);
            
            // Only count if not a holiday
            if (!holidays.includes(currentDate)) {
                daysAdded++;
            }
            
            iterations++;
        }
        
        if (iterations >= maxIterations) {
            printWarn(`⚠️ addWorkingDays reached max iterations for ${dateString} + ${workingDays} days`);
        }
        
        return currentDate;
    }
    
    // Performance optimization: Calculation cache (Requirement 15.2)
    let calculationCache = {};
    let cacheTimestamps = {};
    const CACHE_TTL = 5000; // Cache valid for 5 seconds
    
    // Performance optimization: Debounce timers
    let debounceTimers = {};
    const DEBOUNCE_DELAY = 300; // 300ms debounce delay
    
    // console.log('Data SPB Suggestion Dimuat:', {
    //     jumlahForecast: Object.keys(forecastData).length,
    //     jumlahShipmentDeliveries: Object.keys(shipmentDeliveries).length,
    //     jumlahShipmentSuppliers: Object.keys(shipmentSuppliers).length,
    //     jumlahHolidays: holidays.length,
    //     jumlahTSM: Object.keys(tsmData).length,
    //     tanggalSO: soDate
    // });
    
    // User-friendly warnings for missing master data
    if (Object.keys(shipmentDeliveries).length === 0) {
        printWarn('⚠️ PERINGATAN: Tidak ada Shipment Delivery yang aktif untuk store ini!');
        printWarn('   → Item dengan tipe_dokumen "DO" tidak akan muncul SPB suggestion');
        printWarn('   → Silakan setup di menu: Master Data → Shipment DC');
    }
    
    if (Object.keys(shipmentSuppliers).length === 0) {
        printWarn('⚠️ PERINGATAN: Tidak ada Shipment Supplier yang aktif untuk store ini!');
        printWarn('   → Item dengan tipe_dokumen "PR" tidak akan muncul SPB suggestion');
        printWarn('   → Silakan setup di menu: Master Data → Shipment Suppliers');
    }
    
    if (Object.keys(forecastData).length === 0) {
        printWarn('⚠️ PERINGATAN: Tidak ada data Forecast untuk store ini!');
        printWarn('   → SPB suggestion tidak bisa dihitung tanpa forecast');
        printWarn('   → Silakan upload forecast di menu: Transaksi → Forecasts');
    }
    
    if (Object.keys(tsmData).length === 0) {
        printWarn('⚠️ PERINGATAN: Tidak ada data TSM (Target Sisa Malam) untuk store ini!');
        printWarn('   → Item DO tidak bisa dihitung SPB suggestion');
        printWarn('   → TSM akan otomatis dibuat saat submit SO pertama kali');
    }
    
    /**
     * Verify all required data is preloaded
     * Requirement 15.3 - All data loaded once at page load
     */
    function verifyDataPreloading() {
        const checks = {
            forecastData: forecastData !== null && typeof forecastData === 'object',
            shipmentDeliveries: shipmentDeliveries !== null && typeof shipmentDeliveries === 'object',
            shipmentSuppliers: shipmentSuppliers !== null && typeof shipmentSuppliers === 'object',
            holidays: Array.isArray(holidays),
            tsmData: tsmData !== null && typeof tsmData === 'object',
            soDate: soDate !== null && soDate !== '',
            mappingData: mappingData !== null && typeof mappingData === 'object',
            fstrComponents: fstrComponents !== null && typeof fstrComponents === 'object'
        };
        
        const allLoaded = Object.values(checks).every(check => check === true);
        
        if (allLoaded) {
            // printLog('✓ Verifikasi data preloading PASSED - Semua data berhasil dimuat');
            // printLog('✓ Tidak perlu AJAX call tambahan untuk kalkulasi SPB');
        } else {
            printError('✗ Verifikasi data preloading FAILED - Ada data yang hilang:', checks);
        }
        
        return allLoaded;
    }
    
    // Verify data preloading on page load
    verifyDataPreloading();
    
    // ========================================
    // End SPB Suggestion Data Preparation
    // ========================================
    
    // ========================================
    // Performance Optimization Utilities
    // ========================================
    
    /**
     * Get cached calculation result if still valid
     * Requirement 15.2
     */
    function getCachedResult(rawMaterialId) {
        const now = Date.now();
        const timestamp = cacheTimestamps[rawMaterialId];
        
        if (timestamp && (now - timestamp) < CACHE_TTL) {
            return calculationCache[rawMaterialId];
        }
        
        return null;
    }
    
    /**
     * Store calculation result in cache
     * Requirement 15.2
     */
    function setCachedResult(rawMaterialId, result) {
        calculationCache[rawMaterialId] = result;
        cacheTimestamps[rawMaterialId] = Date.now();
    }
    
    /**
     * Invalidate cache for specific raw material
     */
    function invalidateCache(rawMaterialId) {
        delete calculationCache[rawMaterialId];
        delete cacheTimestamps[rawMaterialId];
    }
    
    /**
     * Debounce function execution
     * Requirement 15.2
     */
    function debounce(func, rawMaterialId, delay = DEBOUNCE_DELAY) {
        // Clear existing timer for this raw material
        if (debounceTimers[rawMaterialId]) {
            clearTimeout(debounceTimers[rawMaterialId]);
        }
        
        // Set new timer
        debounceTimers[rawMaterialId] = setTimeout(() => {
            func(rawMaterialId);
            delete debounceTimers[rawMaterialId];
        }, delay);
    }
    
    /**
     * Batch calculation for multiple raw materials
     * Used during page initialization
     */
    function batchCalculateSPBSuggestions(rawMaterialIds) {
        const startTime = performance.now();
        let calculatedCount = 0;
        
        // Process in chunks to avoid blocking UI
        const chunkSize = 50;
        let currentIndex = 0;
        
        function processChunk() {
            const chunk = rawMaterialIds.slice(currentIndex, currentIndex + chunkSize);
            
            chunk.forEach(rmId => {
                calculateSPBSuggestion(rmId);
                calculatedCount++;
            });
            
            currentIndex += chunkSize;
            
            if (currentIndex < rawMaterialIds.length) {
                // Schedule next chunk
                requestAnimationFrame(processChunk);
            } else {
                // All done
                const endTime = performance.now();
                const duration = endTime - startTime;
                
                printLog(`✓ Batch calculation selesai: ${calculatedCount} item dalam ${duration.toFixed(2)}ms`);
                printLog(`  Rata-rata: ${(duration / calculatedCount).toFixed(2)}ms per item`);
            }
        }
        
        processChunk();
    }
    
    // ========================================
    // End Performance Optimization Utilities
    // ========================================
    
    // ========================================
    // Performance Monitoring
    // ========================================
    
    /**
     * Performance monitoring object
     * Tracks page load time and calculation performance
     */
    const performanceMonitor = {
        pageLoadStart: performance.now(),
        pageLoadEnd: null,
        calculationTimes: [],
        
        /**
         * Record page load completion
         */
        recordPageLoad() {
            this.pageLoadEnd = performance.now();
            const loadTime = this.pageLoadEnd - this.pageLoadStart;
            
            printLog(`⏱️ Page Load Performance: ${loadTime.toFixed(2)}ms`);
            
            // Check if page loads in under 3 seconds (Requirement 21.5)
            if (loadTime < 3000) {
                printLog('✓ Page load performance: PASSED (< 3 detik)');
            } else {
                printWarn(`⚠️ Page load performance: LAMBAT (${(loadTime / 1000).toFixed(2)}s > target 3s)`);
            }
            
            return loadTime;
        },
        
        /**
         * Record calculation time for a single item
         */
        recordCalculation(rawMaterialId, duration) {
            this.calculationTimes.push({
                rawMaterialId,
                duration,
                timestamp: Date.now()
            });
            
            // Keep only last 100 calculations
            if (this.calculationTimes.length > 100) {
                this.calculationTimes.shift();
            }
        },
        
        /**
         * Get calculation statistics
         */
        getCalculationStats() {
            if (this.calculationTimes.length === 0) {
                return null;
            }
            
            const durations = this.calculationTimes.map(c => c.duration);
            const sum = durations.reduce((a, b) => a + b, 0);
            const avg = sum / durations.length;
            const max = Math.max(...durations);
            const min = Math.min(...durations);
            
            return {
                count: durations.length,
                average: avg,
                max: max,
                min: min,
                total: sum
            };
        },
        
        /**
         * Log performance summary
         */
        logSummary() {
            const stats = this.getCalculationStats();
            
            if (!stats) {
                printLog('  Tidak ada data performa kalkulasi');
                return;
            }
            
            printLog('  Ringkasan Performa Kalkulasi:');
            printLog(`Total kalkulasi: ${stats.count}`);
            printLog(`Rata-rata waktu: ${stats.average.toFixed(2)}ms`);
            printLog(`Waktu min: ${stats.min.toFixed(2)}ms`);
            printLog(`Waktu max: ${stats.max.toFixed(2)}ms`);
            printLog(`Total waktu: ${stats.total.toFixed(2)}ms`);
            
            // Check if calculation completes in under 100ms (Requirement 21.5)
            if (stats.average < 100) {
                printLog('✓ Performa kalkulasi: PASSED (< 100ms rata-rata)');
            } else {
                printWarn(`⚠️ Performa kalkulasi: LAMBAT (${stats.average.toFixed(2)}ms > target 100ms)`);
            }
            
            return stats;
        },
        
        /**
         * Check if performance meets requirements
         */
        checkPerformanceRequirements() {
            const loadTime = this.pageLoadEnd ? (this.pageLoadEnd - this.pageLoadStart) : null;
            const stats = this.getCalculationStats();
            
            const results = {
                pageLoad: {
                    time: loadTime,
                    passed: loadTime !== null && loadTime < 3000,
                    target: '< 3 seconds'
                },
                calculation: {
                    average: stats ? stats.average : null,
                    passed: stats !== null && stats.average < 100,
                    target: '< 100ms per item'
                }
            };
            
            printLog('  Cek Requirement Performa:');
            printLog(`Page Load: ${results.pageLoad.passed ? '✓ PASSED' : '✗ FAILED'} (${loadTime ? (loadTime / 1000).toFixed(2) + 's' : 'N/A'} / ${results.pageLoad.target})`);
            printLog(`Kalkulasi: ${results.calculation.passed ? '✓ PASSED' : '✗ FAILED'} (${stats ? stats.average.toFixed(2) + 'ms' : 'N/A'} / ${results.calculation.target})`);
            
            return results;
        }
    };
    
    // ========================================
    // End Performance Monitoring
    // ========================================
    
    // ========================================
    // SPB Suggestion Calculation Functions
    // ========================================
    
    /**
     * Calculate LSM Aktual (Ending Stock)
     * Formula: (qty_utuh × conversion_factor_utuh_pakai) + qty_pakai + item_olahan
     * 
     * @param {number} qtyUtuh - Quantity in whole units
     * @param {number} qtyPakai - Quantity in usage units
     * @param {number} itemOlahan - Processed items quantity
     * @param {number} conversionFactor - Conversion factor from whole to usage units
     * @returns {number} LSM Aktual value
     * 
     * Requirements: 7.1, 14.1
     */
    function calculateLSMAktual(qtyUtuh, qtyPakai, itemOlahan, conversionFactor) {
        // Validate inputs
        qtyUtuh = parseFloat(qtyUtuh) || 0;
        qtyPakai = parseFloat(qtyPakai) || 0;
        itemOlahan = parseFloat(itemOlahan) || 0;
        conversionFactor = parseFloat(conversionFactor);
        
        // Handle invalid conversion factor
        if (!conversionFactor || conversionFactor === 0 || isNaN(conversionFactor)) {
            printError('❌ Conversion factor tidak valid:', conversionFactor);
            return 0;
        }
        
        // Calculate LSM Aktual
        const qtyConverted = qtyUtuh * conversionFactor;
        const lsmAktual = qtyConverted + qtyPakai + itemOlahan;
        
        return lsmAktual;
    }
    
    /**
     * Update LSM Difference Label (LSM Aktual - TSM)
     * Shows difference between LSM Aktual and TSM for SO date
     * Green color for positive (+), red color for negative (-)
     * 
    /**
     * Calculate DOI (Days of Inventory)
     * Formula: lsm_aktual / forecast_average
     * 
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number} forecastAverage - Average forecast for 7 days
     * @returns {number|string} DOI value or '∞' if forecast is zero
     * 
     * Requirements: 7.2, 9.1, 9.4
     */
    function calculateDOI(lsmAktual, forecastAverage) {
        lsmAktual = parseFloat(lsmAktual) || 0;
        forecastAverage = parseFloat(forecastAverage) || 0;
        
        // Handle zero forecast - return infinity
        if (forecastAverage === 0) {
            return '∞';
        }
        
        // Calculate DOI
        const doi = lsmAktual / forecastAverage;
        
        return doi;
    }
    
    /**
     * Check if shipment schedule exists for the raw material
     * DO: Check H+2 shipment delivery (filtered by period_id)
     * PR: Check H+1 shipment supplier AND H+1 not holiday
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {string} tipeDokumen - Document type ('DO' or 'PR')
     * @param {object} mapping - Store raw material mapping data (contains period_id)
     * @returns {boolean} True if shipment schedule exists
     * 
     * Requirements: 2.1, 2.2, 2.3, 6.2, 6.4
     */
    function checkShipmentSchedule(rawMaterialId, tipeDokumen, mapping) {
        if (!tipeDokumen) {
            return false;
        }
        
        if (tipeDokumen === 'DO') {
            // Check H+2 for DO - filter by tipe_pengiriman
            const itemPeriod = mapping.period;
            const itemTipePengiriman = itemPeriod ? itemPeriod.tipe_pengiriman : null;
            
            if (!itemTipePengiriman) {
                printWarn(`⚠️ Item tidak memiliki tipe_pengiriman di period (period_id: ${mapping.period_id})`);
                return false;
            }
            
            // Find Shipment DC that match item's tipe_pengiriman
            const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
                return delivery.tipe_pengiriman === itemTipePengiriman;
            });
            
            const hasDeliveries = matchingDeliveries.length > 0;
            
            if (!hasDeliveries) {
                // Only log once per page load
                if (!window.shipmentDeliveryWarningShown) {
                    printWarn('⚠️ SPB Suggestion tidak muncul untuk beberapa item DO');
                    printWarn(`   → Tidak ada Shipment Delivery yang aktif dengan tipe_pengiriman: ${itemTipePengiriman}`);
                    printWarn('   → Silakan setup di menu: Master Data → Shipment DC');
                    window.shipmentDeliveryWarningShown = true;
                }
            }
            
            return hasDeliveries;
        } else if (tipeDokumen === 'PR') {
            // Check H+1 for PR
            // Calculate H+1 date using native JavaScript
            const soDateParts = soDate.split('-');
            const soDateObj = new Date(soDateParts[0], soDateParts[1] - 1, soDateParts[2]);
            soDateObj.setDate(soDateObj.getDate() + 1); // Add 1 day
            
            const year = soDateObj.getFullYear();
            const month = String(soDateObj.getMonth() + 1).padStart(2, '0');
            const day = String(soDateObj.getDate()).padStart(2, '0');
            const targetDate = `${year}-${month}-${day}`;
            
            // Check if H+1 is holiday
            if (holidays.includes(targetDate)) {
                return false;
            }
            
            // Check if there's shipment schedule for this raw material
            const supplier = shipmentSuppliers[rawMaterialId];
            const hasSupplier = supplier && supplier.status === 'Aktif';
            
            if (!hasSupplier && !window.shipmentSupplierWarningShown) {
                printWarn('⚠️ SPB Suggestion tidak muncul untuk beberapa item PR');
                printWarn('   → Tidak ada Shipment Supplier yang aktif untuk item tersebut');
                printWarn('   → Silakan setup di menu: Master Data → Shipment Suppliers');
                window.shipmentSupplierWarningShown = true;
            }
            
            return hasSupplier;
        }
        
        return false;
    }
    
    /**
     * Calculate multiple SPB suggestions for PR items (up to 3 suggestions)
     * Checks H+2, H+3, H+4 for potential SPB dates based on PR holiday rules
     * 
     * Logic:
     * - For each potential shipment date (H+2, H+3, H+4):
     *   1. Check if SPB date (shipment - 1 day) is PR holiday
     *   2. If YES → SPB must be created TODAY (suggestion appears)
     *   3. If NO → SPB will be created normally (stop checking)
     * - Stop early: If suggestion X doesn't appear, don't check X+1
     * - Maximum 3 suggestions
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @returns {Array} Array of suggestion objects: [{usulan: 1, qty: X, date: 'Y', formula: 'Z'}, ...]
     */
    function calculateMultipleSPBSuggestions(rawMaterialId, mapping, lsmAktual) {
        const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
        
        // Only for PR items
        if (tipeDokumen !== 'PR') {
            // DO items: single suggestion only
            const qty = calculateSuggestedQtySingleDO(rawMaterialId, mapping, lsmAktual);
            // qty = -1 means no shipment schedule (H+2 not a delivery day)
            // qty >= 0 means calculation succeeded (even if result is 0)
            if (qty >= 0) {
                const shipmentDate = addDays(soDate, 2);
                return [{
                    usulan: 1,
                    qty: qty,
                    shipmentDate: shipmentDate,
                    spbDate: addDays(soDate, 1),
                    dayOffset: 2
                }];
            }
            return []; // qty = -1, no shipment schedule
        }
        
        // PR items: check up to 3 suggestions
        const periodCode = mapping.period_code || mapping.period?.code || 'Periodik';
        const supplier = shipmentSuppliers[rawMaterialId];
        const forecast = forecastData[rawMaterialId];
         
        
        if (!supplier || !supplier.shifts || supplier.shifts.length === 0) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada shifts data di shipment supplier`);
            return [];
        }
        
        const suggestions = [];
        let stopChecking = false;
        
        // Check H+2, H+3, H+4 (max 3 suggestions)
        for (let dayOffset = 2; dayOffset <= 4 && !stopChecking; dayOffset++) {
            const shipmentDate = addDays(soDate, dayOffset);
            const spbDate = addDays(soDate, dayOffset - 1); // SPB date is 1 day before shipment
            const spbDayName = getDayNameIndonesian(spbDate);
            const usulanNumber = dayOffset - 1; // Usulan 1, 2, 3
            
            // Check if SPB date is PR holiday
            const isHoliday = isPRHoliday(spbDate, periodCode);
            
            // LOGIC:
            // Usulan 1: SPB date H+1 BUKAN libur → SPB normal (besok) → USULAN MUNCUL
            // Usulan 2+: SPB date H+2+ ADALAH libur → SPB harus dibuat hari ini → USULAN MUNCUL
            
            let shouldShowUsulan = false;
            
            if (usulanNumber === 1) {
                // Usulan 1: Muncul jika SPB date BUKAN libur (normal flow)
                if (!isHoliday) {
                    shouldShowUsulan = true;
                } else {
                    stopChecking = true;
                }
            } else {
                // Usulan 2 & 3: Muncul jika SPB date ADALAH libur (must create today)
                if (isHoliday) {
                    shouldShowUsulan = true;
                } else {
                    stopChecking = true;
                }
            }
            
            if (shouldShowUsulan) {
                // Check if shipment date falls on shift day
                const shipmentDayName = getDayName(shipmentDate);
                const dayMapping = {
                    'SENIN': 'Monday',
                    'SELASA': 'Tuesday',
                    'RABU': 'Wednesday',
                    'KAMIS': 'Thursday',
                    'JUMAT': 'Friday',
                    'SABTU': 'Saturday',
                    'MINGGU': 'Sunday'
                };
                const shiftDays = supplier.shifts.map(day => dayMapping[day.toUpperCase()] || day);
                
                if (shiftDays.includes(shipmentDayName)) {
                    // Before calculating qty for this usulan, we need to add finalQty to previous suggestions
                    // This is needed for Open SPB calculation
                    const previousSuggestionsWithFinalQty = suggestions.map(prevSugg => {
                        // IMPORTANT: Check if user has edited the Final Qty input
                        // If yes, use user value; if no, calculate from system value
                        const prevUsulanNumber = suggestions.indexOf(prevSugg) + 1;
                        const finalQtyInputId = prevUsulanNumber === 1 
                            ? `spb_suggestion_qty_final_${rawMaterialId}` 
                            : `spb_suggestion_qty_final_${prevUsulanNumber}_${rawMaterialId}`;
                        const finalQtyInput = $(`#${finalQtyInputId}`);
                        
                        let finalQty;
                        
                        if (finalQtyInput.length > 0 && finalQtyInput.val() !== '' && finalQtyInput.val() !== 'Auto') {
                            // User has edited the value - use it directly (already in Kirim)
                            finalQty = parseFloat(finalQtyInput.val());
                            printLog(`   ✏️ Using user-edited Final Qty for Usulan ${prevUsulanNumber}: ${finalQty} ${mapping.uom_kirim || 'Kirim'}`);
                        } else {
                            // No user edit - calculate from system value (qty is in Pakai, need to convert to Kirim)
                            finalQty = prevSugg.qty;
                            const conversionKirimUtuh = parseFloat(mapping.conversion_factor_kirim_utuh);
                            const conversionFactor = parseFloat(mapping.conversion_factor_utuh_pakai) || 1;
                            
                            if (conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh)) {
                                // Convert from Pakai to Utuh to Kirim
                                const finalQtyUtuh = finalQty / conversionFactor;
                                const qtyKirimRaw = finalQtyUtuh / conversionKirimUtuh;
                                
                                // Simple rounding for Open SPB calculation (no smart rounding needed here)
                                finalQty = Math.round(qtyKirimRaw);
                            } else {
                                finalQty = Math.round(finalQty / conversionFactor);
                            }
                            
                            printLog(`   🔢 Calculated Final Qty for Usulan ${prevUsulanNumber}: ${finalQty} ${mapping.uom_kirim || 'Kirim'}`);
                        }
                        
                        return {
                            ...prevSugg,
                            finalQty: finalQty
                        };
                    });
                    
                    // Calculate qty for this suggestion, passing previous suggestions with finalQty
                    const qty = calculateSuggestedQtyWithOffset(rawMaterialId, mapping, lsmAktual, dayOffset, previousSuggestionsWithFinalQty);
                    
                    // Always push suggestion even if qty = 0 (user can override)
                    suggestions.push({
                        usulan: usulanNumber,
                        qty: Math.max(0, qty), // Ensure non-negative
                        shipmentDate: shipmentDate,
                        spbDate: spbDate,
                        dayOffset: dayOffset
                    });
                } else {
                    // Shipment date bukan shift day → stop checking usulan berikutnya
                    // Karena jika usulan X tidak valid (bukan shift day), usulan X+1 juga tidak perlu dicek
                    stopChecking = true;
                }
            }
        }
        
        return suggestions;
    }
    
    /**
     * Calculate suggested quantity with custom day offset
     * Used for multiple PR suggestions (H+2, H+3, H+4)
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number} dayOffset - Day offset from SO date (2, 3, or 4)
     * @returns {number} Suggested quantity
     */
    function calculateSuggestedQtyWithOffset(rawMaterialId, mapping, lsmAktual, dayOffset, previousSuggestions = []) {
        const forecast = forecastData[rawMaterialId];
        if (!forecast) {
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const openSPBDatabase = openSPBData[rawMaterialId] || 0;
        
        // Calculate Open SPB from previous suggestion (NOT cumulative)
        // Use finalQty (Kirim) from previous usulan and convert to Pakai
        let openSPB = openSPBDatabase; // Default to DB value
        
        if (previousSuggestions.length > 0) {
            // Get the last previous suggestion (the one right before current usulan)
            const prevSuggestion = previousSuggestions[previousSuggestions.length - 1];
            
            // Get conversion factors
            const conversionUtuhPakai = parseFloat(mapping?.conversion_factor_utuh_pakai) || 1;
            const conversionKirimUtuh = parseFloat(mapping?.conversion_factor_kirim_utuh);
            const hasKirimConversion = conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh);
            const conversionKirimToPakai = hasKirimConversion ? (conversionKirimUtuh * conversionUtuhPakai) : 1;
            
            // Use finalQty (Kirim) and convert to Pakai
            const prevFinalQtyKirim = prevSuggestion.finalQty;
            openSPB = prevFinalQtyKirim * conversionKirimToPakai;
            
            printLog(`   📊 Open SPB from previous usulan: ${prevFinalQtyKirim} ${mapping?.uom_kirim || 'Kirim'} × ${conversionKirimToPakai.toFixed(4)} = ${openSPB.toFixed(2)} Pakai`);
        }
        
        const periodCode = mapping.period_code || mapping.period?.code || 'Periodik';
        const periodCodeLower = periodCode.toLowerCase();
        
        if (periodCodeLower === 'sayuran') {
            // PR SAYURAN: Cumulative forecast from H+1 to H+dayOffset
            // Usulan 1: Fcst H+1 + Fcst H+2 + TSM H+2
            // Usulan 2: Fcst H+1 + Fcst H+2 + Fcst H+3 + TSM H+3
            // Usulan 3: Fcst H+1 + Fcst H+2 + Fcst H+3 + Fcst H+4 + TSM H+4
            
            let cumulativeForecast = 0;
            for (let i = 1; i <= dayOffset; i++) {
                cumulativeForecast += forecast[`h_plus_${i}`] || 0;
            }
            
            // Get TSM for the shipment day (H+dayOffset)
            const tsmForDay = tsmData[rawMaterialId] && tsmData[rawMaterialId][`h_plus_${dayOffset}`] 
                ? tsmData[rawMaterialId][`h_plus_${dayOffset}`] 
                : 0;
            
            const suggestedQtyBeforeStock = cumulativeForecast + tsmForDay;
            const suggestedQty = Math.max(0, suggestedQtyBeforeStock - lsmAktual - openSPB);
            
            printLog(`   📊 PR SAYURAN Formula:`);
            printLog(`      Fcst H+1 to H+${dayOffset}: ${cumulativeForecast.toFixed(2)}`);
            printLog(`      TSM H+${dayOffset}: ${tsmForDay.toFixed(2)}`);
            printLog(`      LSM: ${lsmAktual.toFixed(2)}`);
            printLog(`      Open SPB: ${openSPB.toFixed(2)}`);
            printLog(`      Result: (${cumulativeForecast.toFixed(2)} + ${tsmForDay.toFixed(2)}) - ${lsmAktual.toFixed(2)} - ${openSPB.toFixed(2)} = ${suggestedQty.toFixed(2)}`);
            
            return suggestedQty;
        } else {
            // PR PERIODIK: Coverage formula with offset
            // Coverage starts from H+dayOffset+1
            return calculatePeriodicSuggestedQtyWithOffset(rawMaterialId, mapping, lsmAktual, dayOffset, openSPB);
        }
    }
    
    /**
     * Calculate periodic suggested quantity with custom day offset
     * Coverage period starts from H+dayOffset+1 until next shipment
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number} dayOffset - Day offset from SO date (2, 3, or 4)
     * @returns {number} Suggested quantity for coverage period
     */
    function calculatePeriodicSuggestedQtyWithOffset(rawMaterialId, mapping, lsmAktual, dayOffset, openSPB) {
        const supplier = shipmentSuppliers[rawMaterialId];
        if (!supplier || !supplier.shifts || supplier.shifts.length === 0) {
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const forecast = forecastData[rawMaterialId];
        
        if (!forecast || !forecast.daily) {
            return 0;
        }
        
        // Day name mapping
        const dayMapping = {
            'SENIN': 'Monday',
            'SELASA': 'Tuesday',
            'RABU': 'Wednesday',
            'KAMIS': 'Thursday',
            'JUMAT': 'Friday',
            'SABTU': 'Saturday',
            'MINGGU': 'Sunday'
        };
        
        const dayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        const shiftDays = supplier.shifts
            .map(day => dayMapping[day.toUpperCase()] || day)
            .sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
        
        // Shipment date is H+dayOffset
        const shipmentDate = addDays(soDate, dayOffset);
        const shipmentDayName = getDayName(shipmentDate);
        
        // Find next shipment after current shipment
        let nextShipmentDate = null;
        let daysToCheck = 1;
        const maxDaysToCheck = 14;
        
        if (shiftDays.length === 1) {
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                if (shiftDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                    nextShipmentDate = checkDate;
                    break;
                }
                daysToCheck++;
            }
            
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
            }
        } else {
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                if (shiftDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                    nextShipmentDate = checkDate;
                    break;
                }
                daysToCheck++;
            }
            
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
            }
        }
        
        // Coverage period: from H+dayOffset+1 until next shipment (INCLUSIVE)
        const coverageStartDate = addDays(shipmentDate, 1);
        const coverageEndDate = nextShipmentDate;
        
        // Sum forecast for coverage period (ALL days including holidays)
        let totalForecast = 0;
        let currentDate = new Date(coverageStartDate + 'T00:00:00');
        const endDate = new Date(coverageEndDate + 'T00:00:00');
        let forecastDays = [];
        
        while (currentDate <= endDate) {
            const dateStr = currentDate.toISOString().split('T')[0];
            const dailyForecast = forecast.daily[dateStr] || 0;
            totalForecast += dailyForecast;
            
            if (dailyForecast > 0) {
                forecastDays.push(`${dateStr}:${dailyForecast.toFixed(1)}`);
            }
            
            currentDate.setDate(currentDate.getDate() + 1);
        }
        
        const suggestedQty = Math.max(0, totalForecast - lsmAktual - openSPB);
        
        printLog(`   📊 PR PERIODIK Coverage: ${coverageStartDate} to ${coverageEndDate}`);
        printLog(`   📊 Total forecast: ${totalForecast.toFixed(2)} (${forecastDays.length} days)`);
        printLog(`   💡 SPB = ${totalForecast.toFixed(2)} - ${lsmAktual.toFixed(2)} - ${openSPB.toFixed(2)} = ${suggestedQty.toFixed(2)}`);
        
        return suggestedQty;
    }
    
    /**
     * Calculate suggested quantity for DO items only (single suggestion)
     * Extracted from original calculateSuggestedQty for DO logic
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @returns {number} Suggested quantity
     */
    function calculateSuggestedQtySingleDO(rawMaterialId, mapping, lsmAktual) {
        const forecast = forecastData[rawMaterialId];
        if (!forecast) {
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const periodGroup = mapping.period && mapping.period.period_group ? mapping.period.period_group.toUpperCase() : '';
        
        // DO logic (existing code from calculateSuggestedQty)
        const itemPeriod = mapping.period;
        const itemTipePengiriman = itemPeriod ? itemPeriod.tipe_pengiriman : null;
        
        if (!itemTipePengiriman) {
            return 0;
        }
        
        const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
            return delivery.tipe_pengiriman === itemTipePengiriman;
        });
        
        if (matchingDeliveries.length === 0) {
            return 0;
        }
        
        if (periodGroup === 'HARIAN') {
            // DO HARIAN logic
            const shipmentDate = addDays(soDate, 2);
            const shipmentDayName = getDayName(shipmentDate);
            
            const deliveryDays = [...new Set(matchingDeliveries.map(d => {
                const dayMapping = {
                    'SEN': 'Monday',
                    'SEL': 'Tuesday',
                    'RAB': 'Wednesday',
                    'KAM': 'Thursday',
                    'JUM': 'Friday',
                    'SAB': 'Saturday',
                    'MIN': 'Sunday'
                };
                return dayMapping[d.delivery_day] || d.delivery_day;
            }))];
            
            if (!deliveryDays.includes(shipmentDayName)) {
                return -1; // Return -1 to indicate "no shipment schedule"
            }
            
            const forecastH1 = parseFloat(forecast.h_plus_1) || 0;
            const forecastH2 = parseFloat(forecast.h_plus_2) || 0;
            const tsmRaw = tsmData[rawMaterialId];
            const tsm = parseFloat(tsmRaw?.h_plus_2 || tsmRaw || 0);
            const openSPB = parseFloat(openSPBData[rawMaterialId]) || 0;
            
            const suggestedQtyBeforeStock = forecastH1 + forecastH2 + tsm;
            const suggestedQty = Math.max(0, suggestedQtyBeforeStock - lsmAktual - openSPB);
            
            return suggestedQty;
        } else {
            // DO PERIODIK logic
            return calculatePeriodicDOSuggestedQty(rawMaterialId, mapping, lsmAktual);
        }
    }
    
    /**
     * Calculate suggested quantity based on item type (DO/PR) and period
     * 
     * Item DO HARIAN: (forecast_h+1 + forecast_h+2 + TSM_h+2) - LSM Aktual - Open SPB
     * Item DO PERIODIK: Total Forecast (Coverage Period) - LSM Aktual - Open SPB (NO TSM, NO skip holiday)
     * Item PR PERIODIK: Total Forecast (Coverage Period) - LSM Aktual - Open SPB (cek libur di H+1)
     * Item PR SAYURAN: (forecast_h+1 + forecast_h+2 + TSM_h+2) - LSM Aktual - Open SPB (formula DO HARIAN, shipment ke Suppliers)
     * 
     * IMPORTANT: Both DO HARIAN and DO PERIODIK read from shipmentDeliveries (filter by tipe_pengiriman)
     * 
     * Formula untuk Item DO HARIAN:
     * - Check shipmentDeliveries for matching tipe_pengiriman (if none, return 0)
     * - Forecast H+1 = Forecast besok (1 hari setelah SO)
     * - Forecast H+2 = Forecast lusa (2 hari setelah SO)
     * - TSM H+2 = Target Sisa Malam di hari lusa
     * - LSM Aktual = Ending stock dari SO
     * 
     * Contoh: SO tanggal Jumat 5 Sept 2025
     * - Forecast H+1 = Sabtu 6 Sept 2025
     * - Forecast H+2 = Minggu 7 Sept 2025
     * - TSM H+2 = TSM Minggu 7 Sept 2025
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @returns {number} Suggested quantity
     * 
     * Requirements: 3.1, 3.2, 3.4, 4.1, 4.2, 4.3, 4.4
     */
    function calculateSuggestedQty(rawMaterialId, mapping, lsmAktual) {
        // For PR items, use multiple suggestions logic
        const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
        if (tipeDokumen === 'PR') {
            // Return first suggestion only (for backward compatibility)
            const suggestions = calculateMultipleSPBSuggestions(rawMaterialId, mapping, lsmAktual);
            return suggestions.length > 0 ? suggestions[0].qty : 0;
        }
        
        // Original DO logic continues below
        const forecast = forecastData[rawMaterialId];
        if (!forecast) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada data forecast, SPB = 0`);
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const periodGroup = mapping.period && mapping.period.period_group ? mapping.period.period_group.toUpperCase() : '';
        
        if (tipeDokumen === 'DO') {
            // DO (both HARIAN and PERIODIK) read from shipmentDeliveries
            // Filter by tipe_pengiriman from period
            const itemPeriod = mapping.period;
            const itemTipePengiriman = itemPeriod ? itemPeriod.tipe_pengiriman : null;
            
            if (!itemTipePengiriman) {
                printWarn(`⚠️ RM ${rawMaterialId}: DO item tidak ada tipe_pengiriman di period, SPB = 0`);
                return 0;
            }
            
            // Check if there are matching delivery schedules for this tipe_pengiriman
            const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
                return delivery.tipe_pengiriman === itemTipePengiriman;
            });
            
            if (matchingDeliveries.length === 0) {
                printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada delivery schedule untuk tipe_pengiriman ${itemTipePengiriman}, SPB = 0`);
                return 0;
            }
            
            // DO has 2 types: HARIAN and PERIODIK (determined by period_group)
            if (periodGroup === 'HARIAN') {
                // DO HARIAN: Check if H+2 falls on a delivery day
                // H+2 WITHOUT skipping holidays (same as DO PERIODIK)
                const shipmentDate = addDays(soDate, 2);
                const shipmentDayName = getDayName(shipmentDate);
                
                // Extract unique delivery days from matching deliveries
                const deliveryDays = [...new Set(matchingDeliveries.map(d => {
                    const dayMapping = {
                        'SEN': 'Monday',
                        'SEL': 'Tuesday',
                        'RAB': 'Wednesday',
                        'KAM': 'Thursday',
                        'JUM': 'Friday',
                        'SAB': 'Saturday',
                        'MIN': 'Sunday'
                    };
                    return dayMapping[d.delivery_day] || d.delivery_day;
                }))];
                
                printLog(`📦 RM ${rawMaterialId} - DO HARIAN - Shipment date (H+2): ${shipmentDate} (${shipmentDayName})`);
                printLog(`Delivery days: ${deliveryDays.join(', ')}`);
                
                // Check if H+2 falls on a delivery day
                if (!deliveryDays.includes(shipmentDayName)) {
                    printWarn(`⚠️ H+2 ${shipmentDayName} is NOT a delivery day. No SPB suggestion.`);
                    return -1; // Return -1 to indicate "no shipment schedule" (different from 0 which means "calculation is 0")
                }
                
                printLog(`✅ H+2 ${shipmentDayName} is a delivery day!`);
                
                // DO HARIAN: (Forecast H+1 + Forecast H+2 + TSM H+2) - LSM Aktual - Open SPB
                const forecastH1 = parseFloat(forecast.h_plus_1) || 0;
                const forecastH2 = parseFloat(forecast.h_plus_2) || 0;
                const tsmRaw = tsmData[rawMaterialId];
                const tsm = parseFloat(tsmRaw?.h_plus_2 || tsmRaw || 0);
                const openSPB = parseFloat(openSPBData[rawMaterialId]) || 0;
                
                const suggestedQtyBeforeStock = forecastH1 + forecastH2 + tsm;
                const suggestedQty = Math.max(0, suggestedQtyBeforeStock - lsmAktual - openSPB);
                
                printLog(`💡 SPB = (${forecastH1.toFixed(2)} + ${forecastH2.toFixed(2)} + ${tsm.toFixed(2)}) - ${lsmAktual.toFixed(2)} - ${openSPB.toFixed(2)} = ${suggestedQty.toFixed(2)}`);
                
                return suggestedQty;
            } else {
                // DO PERIODIK: Follow PR logic but DON'T skip holidays, DON'T use TSM
                return calculatePeriodicDOSuggestedQty(rawMaterialId, mapping, lsmAktual);
            }
        } else {
            // PR: Check period code to determine calculation method
            const periodCode = mapping.period_code || mapping.period?.code || 'Periodik';
            const periodCodeLower = periodCode.toLowerCase();
            
            if (periodCodeLower === 'sayuran') {
                // PR SAYURAN: Use DO HARIAN formula but check Shipment Suppliers
                // Check if there's shipment schedule
                const supplier = shipmentSuppliers[rawMaterialId];
                if (!supplier || !supplier.shifts || supplier.shifts.length === 0) {
                    printWarn(`⚠️ RM ${rawMaterialId}: PR SAYURAN - Tidak ada shifts data di shipment supplier`);
                    return 0;
                }
                
                // Check SPB date (H+1) - if PR holiday, no SPB suggestion
                const spbDate = addDays(soDate, 1);
                const spbDayName = getDayNameIndonesian(spbDate);
                
                if (isPRHoliday(spbDate, periodCode)) {
                    printWarn(`⚠️ RM ${rawMaterialId}: PR SAYURAN - SPB date (H+1) ${spbDate} (${spbDayName}) is PR holiday. No SPB suggestion.`);
                    return 0;
                }
                
                printLog(`✅ RM ${rawMaterialId}: PR SAYURAN - SPB date (H+1) ${spbDate} (${spbDayName}) is NOT PR holiday`);
                
                // Check if H+2 falls on a shift day
                const shipmentDate = addDays(soDate, 2);
                const shipmentDayName = getDayName(shipmentDate);
                
                // Day name mapping (Indonesian to English)
                const dayMapping = {
                    'SENIN': 'Monday',
                    'SELASA': 'Tuesday',
                    'RABU': 'Wednesday',
                    'KAMIS': 'Thursday',
                    'JUMAT': 'Friday',
                    'SABTU': 'Saturday',
                    'MINGGU': 'Sunday'
                };
                
                const shiftDays = supplier.shifts.map(day => dayMapping[day.toUpperCase()] || day);
                
                printLog(`📦 RM ${rawMaterialId} - PR SAYURAN - Shipment date (H+2): ${shipmentDate} (${shipmentDayName})`);
                printLog(`Shifts: ${shiftDays.join(', ')}`);
                
                if (!shiftDays.includes(shipmentDayName)) {
                    printWarn(`⚠️ Shipment date ${shipmentDayName} is NOT a shift day. No SPB suggestion.`);
                    return -1; // Return -1 to indicate "no shipment schedule"
                }
                
                printLog(`✅ Shipment date ${shipmentDayName} is a shift day!`);
                
                // PR SAYURAN: Use DO HARIAN formula
                // (Forecast H+1 + Forecast H+2 + TSM H+2) - LSM Aktual - Open SPB
                const forecastH1 = parseFloat(forecast.h_plus_1) || 0;
                const forecastH2 = parseFloat(forecast.h_plus_2) || 0;
                const tsmRaw = tsmData[rawMaterialId];
                const tsm = parseFloat(tsmRaw?.h_plus_2 || tsmRaw || 0);
                const openSPB = parseFloat(openSPBData[rawMaterialId]) || 0;
                
                const suggestedQtyBeforeStock = forecastH1 + forecastH2 + tsm;
                const suggestedQty = Math.max(0, suggestedQtyBeforeStock - lsmAktual - openSPB);
                
                printLog(`💡 PR SAYURAN: SPB = (${forecastH1.toFixed(2)} + ${forecastH2.toFixed(2)} + ${tsm.toFixed(2)}) - ${lsmAktual.toFixed(2)} - ${openSPB.toFixed(2)} = ${suggestedQty.toFixed(2)}`);
                
                return suggestedQty;
            } else {
                // PR PERIODIK: Use coverage period formula
                return calculatePeriodicSuggestedQty(rawMaterialId, mapping, lsmAktual);
            }
        }
    }
    
    /**
     * Calculate suggested quantity for PR items (Purchase Request - item kering periodik)
     * Sum forecast_qty for coverage period based on shifts, then subtract LSM Aktual
     * 
     * Coverage Logic:
     * - Shipment date is H+2 WORKING DAYS (skip holidays)
     * - Check if shipment date falls on a shift day
     * - If NOT on shift day, no SPB suggestion (return 0)
     * - If on shift day, calculate coverage until next VALID shipment date
     * - Next shipment must be: shift day AND not holiday
     * - Coverage period: from day after shipment UNTIL next shipment (INCLUSIVE)
     * - If only one shift day, find next occurrence (skip holidays)
     * - IMPORTANT: Sum forecast for ALL days including holidays (only skip holidays when finding shipment)
     * 
     * Example 1 - No SPB:
     * - SO date: Monday, Jan 12, 2025
     * - Shifts: ["Senin", "Kamis"] (Monday, Thursday)
     * - H+2 working days = Wednesday, Jan 14 (not a shift day)
     * - Result: No SPB suggestion (return 0)
     * 
     * Example 2 - Has SPB:
     * - SO date: Tuesday, Jan 13, 2025
     * - Shifts: ["Senin", "Kamis"] (Monday, Thursday)
     * - H+2 working days = Thursday, Jan 15 (is a shift day!)
     * - Next shipment = Monday, Jan 19
     * - Coverage: Friday Jan 16 to Monday Jan 19 (4 days, all counted)
     * 
     * Example 3 - Skip holidays when finding shipment:
     * - SO date: Wednesday, Jan 14, 2025
     * - Holidays: [Friday Jan 16, Saturday Jan 17, Sunday Jan 18]
     * - Shifts: ["Senin", "Kamis"] (Monday, Thursday)
     * - H+2 working days = Monday, Jan 19 (skip Fri, Sat, Sun)
     * - Is a shift day! Calculate coverage
     * 
     * Example 4 - Next shipment is holiday (count all days in coverage):
     * - SO date: Thursday, Dec 25, 2025
     * - Shifts: ["Senin", "Kamis"] (Monday, Thursday)
     * - H+2 working days = Monday, Dec 29 (skip Sat/Sun)
     * - Is a shift day!
     * - Next shipment = Thursday, Jan 1, 2026 (HOLIDAY!)
     * - Skip to next valid = Monday, Jan 5, 2026
     * - Coverage: Tuesday Dec 30 to Monday Jan 5 (INCLUSIVE, 7 days)
     * - Forecast dates: Dec 30, 31, Jan 1, 2, 3, 4, 5 (ALL 7 days counted, including Jan 1 holiday)
     * - Forecast dates: Dec 30, 31, Jan 1, 2, 3, 4, 5 (7 days)
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @returns {number} Suggested quantity for coverage period
     * 
     * Requirements: 4.2, 4.3, 4.4, 4.5
     */
    function calculatePeriodicSuggestedQty(rawMaterialId, mapping, lsmAktual) {
        const supplier = shipmentSuppliers[rawMaterialId];
        if (!supplier || !supplier.shifts || supplier.shifts.length === 0) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada shifts data di shipment supplier`);
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const forecast = forecastData[rawMaterialId];
        
        if (!forecast || !forecast.daily) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada data forecast`);
            return 0;
        }
        
        // Day name mapping (Indonesian to English)
        const dayMapping = {
            'SENIN': 'Monday',
            'SELASA': 'Tuesday',
            'RABU': 'Wednesday',
            'KAMIS': 'Thursday',
            'JUMAT': 'Friday',
            'SABTU': 'Saturday',
            'MINGGU': 'Sunday'
        };
        
        // Convert shifts to English day names and sort by day order
        const dayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        const shiftDays = supplier.shifts
            .map(day => dayMapping[day.toUpperCase()] || day)
            .sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
        
        // PR PERIODIK/SAYURAN: Check SPB date (H+1) first - if PR holiday, no SPB suggestion
        const spbDate = addDays(soDate, 1);
        const spbDayName = getDayNameIndonesian(spbDate);
        const periodCode = mapping.period_code || mapping.period?.code || 'Periodik'; // Get period code
        
        if (isPRHoliday(spbDate, periodCode)) {
            printWarn(`⚠️ RM ${rawMaterialId}: SPB date (H+1) ${spbDate} (${spbDayName}) is PR holiday for ${periodCode}. No SPB suggestion.`);
            return 0;
        }
        
        printLog(`✅ RM ${rawMaterialId}: SPB date (H+1) ${spbDate} (${spbDayName}) is NOT PR holiday for ${periodCode}`);
        
        // Calculate shipment date (H+2 WITHOUT skipping holidays - pengiriman jalan terus)
        const shipmentDate = addDays(soDate, 2);
        const shipmentDayName = getDayName(shipmentDate);
        
        printLog(`📦 RM ${rawMaterialId} - Shipment date (H+2): ${shipmentDate} (${shipmentDayName})`);
        printLog(`Shifts: ${shiftDays.join(', ')}`);
        
        // Check if shipment date falls on a shift day
        if (!shiftDays.includes(shipmentDayName)) {
            printWarn(`⚠️ Shipment date ${shipmentDayName} is NOT a shift day. No SPB suggestion.`);
            return 0;
        }
        
        printLog(`✅ Shipment date ${shipmentDayName} is a shift day!`);
        
        // Find next shipment date after current shipment (skip holidays)
        let nextShipmentDate = null;
        let daysToCheck = 1;
        const maxDaysToCheck = 14; // Safety limit (2 weeks)
        
        if (shiftDays.length === 1) {
            // If only one shift day, find next occurrence of that shift day (skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's the shift day AND not a holiday
                if (shiftDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                    nextShipmentDate = checkDate;
                    printLog(`Single shift: next valid shipment ${nextShipmentDate} (${checkDayName})`);
                    break;
                }
                
                daysToCheck++;
            }
            
            // Safety fallback
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
                printWarn(`⚠️ No valid next shipment found, using 7 days`);
            }
        } else {
            // Find next shift day after shipment date (skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's a shift day AND not a holiday
                if (shiftDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                    nextShipmentDate = checkDate;
                    printLog(`Next shipment: ${nextShipmentDate} (${checkDayName})`);
                    break;
                }
                
                daysToCheck++;
            }
            
            // Safety fallback
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
                printWarn(`⚠️ No valid next shipment found, using 7 days`);
            }
        }
        
        // Calculate coverage period: from day after shipment UNTIL next shipment (INCLUSIVE)
        const coverageStartDate = addDays(shipmentDate, 1);
        const coverageEndDate = nextShipmentDate; // INCLUSIVE - sampai hari pengiriman berikutnya
        
        printLog(`Coverage period: ${coverageStartDate} to ${coverageEndDate} (inclusive)`);
        
        // Sum forecast for coverage period (DO NOT skip holidays - count all days!)
        let totalForecast = 0;
        let currentDate = coverageStartDate;
        let daysIncluded = [];
        
        while (currentDate <= coverageEndDate) {
            // PR PERIODIK: Include ALL days, even holidays (only skip holidays when finding shipment)
            const dailyQty = forecast.daily[currentDate] || 0;
            totalForecast += dailyQty;
            daysIncluded.push(`${currentDate}:${dailyQty}`);
            
            currentDate = addDays(currentDate, 1);
        }
        
        printLog(`📊 Total forecast: ${totalForecast.toFixed(2)} (${daysIncluded.length} days: ${daysIncluded.join(', ')})`);
        printLog(`🔑 PR PERIODIK/SAYURAN: Semua hari dihitung termasuk libur`);
        
        // Subtract LSM Aktual and Open SPB
        const openSPB = openSPBData[rawMaterialId] || 0;
        const suggestedQty = Math.max(0, totalForecast - lsmAktual - openSPB);
        
        printLog(`💡 SPB = ${totalForecast.toFixed(2)} - ${lsmAktual.toFixed(2)} (LSM) - ${openSPB.toFixed(2)} (Open SPB) = ${suggestedQty.toFixed(2)}`);
        
        return suggestedQty;
    }
    
    /**
     * Calculate suggested quantity for DO PERIODIK items (Delivery Order - item basah periodik)
     * Sum forecast_qty for coverage period based on delivery shifts, then subtract LSM Aktual
     * 
     * KEY DIFFERENCES from PR:
     * - Reads from shipmentDeliveries (not shipmentSuppliers)
     * - Groups by delivery_day with filter tipe_pengiriman
     * - Filters by matching tipe_pengiriman from period (not period_id)
     * - H+2 WITHOUT skipping holidays (PR skips holidays for H+2)
     * - Does NOT skip holidays when finding next shipment (PR skips holidays)
     * - Does NOT skip holidays when summing forecast (PR skips holidays)
     * - Does NOT use TSM in formula (DO HARIAN uses TSM)
     * 
     * Coverage Logic:
     * - Shipment date is H+2 (WITHOUT skipping holidays - key difference!)
     * - Check if shipment date falls on a delivery day
     * - If NOT on delivery day, no SPB suggestion (return 0)
     * - If on delivery day, calculate coverage until next shipment date
     * - Next shipment: just find next delivery day (DO NOT skip holidays)
     * - Coverage period: from day after shipment UNTIL next shipment (INCLUSIVE)
     * - If only one delivery day, find next occurrence (DO NOT skip holidays)
     * - DO NOT skip holidays when summing forecast (this is the key difference!)
     * 
     * Formula: SPB = Total Forecast (Coverage Period) - LSM Aktual - Open SPB (NO TSM)
     * 
     * Example 1 - No SPB:
     * - SO date: Monday, Jan 12, 2025
     * - Delivery days: ["Monday", "Thursday"]
     * - H+2 (no skip) = Wednesday, Jan 14 (not a delivery day)
     * - Result: No SPB suggestion (return 0)
     * 
     * Example 2 - Has SPB:
     * - SO date: Tuesday, Jan 13, 2025
     * - Delivery days: ["Monday", "Thursday"]
     * - H+2 (no skip) = Thursday, Jan 15 (is a delivery day!)
     * - Next shipment = Monday, Jan 19 (just next Monday, no holiday check)
     * - Coverage: Friday Jan 16 to Monday Jan 19 (4 days, INCLUSIVE)
     * - Sum ALL forecast (including holidays if any)
     * 
     * Example 3 - Holiday in coverage:
     * - SO date: Thursday, Dec 25, 2025
     * - Delivery days: ["Monday", "Thursday"]
     * - H+2 (no skip) = Saturday, Dec 27 (not a delivery day)
     * - Result: No SPB suggestion (return 0)
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} mapping - Store raw material mapping data
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @returns {number} Suggested quantity for coverage period
     * 
     * Requirements: 4.2, 4.3, 4.4, 4.5
     */
    function calculatePeriodicDOSuggestedQty(rawMaterialId, mapping, lsmAktual) {
        // Find delivery schedules that match this item's tipe_pengiriman
        const itemPeriod = mapping.period;
        const itemTipePengiriman = itemPeriod ? itemPeriod.tipe_pengiriman : null;
        
        if (!itemTipePengiriman) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada tipe_pengiriman di period`);
            return 0;
        }
        
        // Filter shipmentDeliveries by tipe_pengiriman and group by delivery_day
        const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
            return delivery.tipe_pengiriman === itemTipePengiriman;
        });
        
        if (matchingDeliveries.length === 0) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada delivery schedule untuk tipe_pengiriman ${itemTipePengiriman}`);
            return 0;
        }
        
        // Extract unique delivery days
        const deliveryDays = [...new Set(matchingDeliveries.map(d => {
            // Convert Indonesian day abbreviation to English day name
            const dayMapping = {
                'SEN': 'Monday',
                'SEL': 'Tuesday',
                'RAB': 'Wednesday',
                'KAM': 'Thursday',
                'JUM': 'Friday',
                'SAB': 'Saturday',
                'MIN': 'Sunday'
            };
            return dayMapping[d.delivery_day] || d.delivery_day;
        }))];
        
        // Sort by day order
        const dayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        deliveryDays.sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        const forecast = forecastData[rawMaterialId];
        
        if (!forecast || !forecast.daily) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada data forecast`);
            return 0;
        }
        
        // Calculate shipment date (H+2 WITHOUT skipping holidays - key difference from PR!)
        const shipmentDate = addDays(soDate, 2);
        const shipmentDayName = getDayName(shipmentDate);
        
        printLog(`📦 RM ${rawMaterialId} - DO PERIODIK - Shipment date (H+2 tanpa skip libur): ${shipmentDate} (${shipmentDayName})`);
        printLog(`Delivery days: ${deliveryDays.join(', ')}`);
        
        // Check if shipment date falls on a delivery day
        if (!deliveryDays.includes(shipmentDayName)) {
            printWarn(`⚠️ Shipment date ${shipmentDayName} is NOT a delivery day. No SPB suggestion.`);
            return 0;
        }
        
        printLog(`✅ Shipment date ${shipmentDayName} is a delivery day!`);
        
        // Find next shipment date after current shipment (DO NOT skip holidays for finding next shipment!)
        let nextShipmentDate = null;
        let daysToCheck = 1;
        const maxDaysToCheck = 14; // Safety limit (2 weeks)
        
        if (deliveryDays.length === 1) {
            // If only one delivery day, find next occurrence of that delivery day (DO NOT skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's the delivery day (DO NOT check for holidays!)
                if (deliveryDays.includes(checkDayName)) {
                    nextShipmentDate = checkDate;
                    printLog(`Single delivery day: next shipment ${nextShipmentDate} (${checkDayName})`);
                    break;
                }
                
                daysToCheck++;
            }
            
            // Safety fallback
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
                printWarn(`⚠️ No next shipment found, using 7 days`);
            }
        } else {
            // Find next delivery day after shipment date (DO NOT skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's a delivery day (DO NOT check for holidays!)
                if (deliveryDays.includes(checkDayName)) {
                    nextShipmentDate = checkDate;
                    printLog(`Next shipment: ${nextShipmentDate} (${checkDayName})`);
                    break;
                }
                
                daysToCheck++;
            }
            
            // Safety fallback
            if (!nextShipmentDate) {
                nextShipmentDate = addDays(shipmentDate, 7);
                printWarn(`⚠️ No next shipment found, using 7 days`);
            }
        }
        
        // Calculate coverage period: from day after shipment UNTIL next shipment (INCLUSIVE)
        const coverageStartDate = addDays(shipmentDate, 1);
        const coverageEndDate = nextShipmentDate; // INCLUSIVE - sampai hari pengiriman berikutnya
        
        printLog(`Coverage period: ${coverageStartDate} to ${coverageEndDate} (inclusive)`);
        
        // Sum forecast for coverage period (DO NOT skip holidays - key difference from PR!)
        let totalForecast = 0;
        let currentDate = coverageStartDate;
        let daysIncluded = [];
        
        while (currentDate <= coverageEndDate) {
            // DO PERIODIK: Include ALL days, even holidays
            const dailyQty = forecast.daily[currentDate] || 0;
            totalForecast += dailyQty;
            daysIncluded.push(`${currentDate}:${dailyQty}`);
            
            currentDate = addDays(currentDate, 1);
        }
        
        printLog(`📊 Total forecast: ${totalForecast.toFixed(2)} (${daysIncluded.length} days: ${daysIncluded.join(', ')})`);
        printLog(`🔑 DO PERIODIK: Semua hari dihitung (TIDAK skip holiday)`);
        
        // Subtract LSM Aktual and Open SPB (NO TSM for DO PERIODIK)
        const openSPB = openSPBData[rawMaterialId] || 0;
        const suggestedQty = Math.max(0, totalForecast - lsmAktual - openSPB);
        
        printLog(`💡 SPB = ${totalForecast.toFixed(2)} - ${lsmAktual.toFixed(2)} (LSM) - ${openSPB.toFixed(2)} (Open SPB) = ${suggestedQty.toFixed(2)}`);
        printLog(`ℹ️ DO PERIODIK: TIDAK menggunakan TSM`);
        
        return suggestedQty;
    }
    
    /**
     * Get day name from date string (YYYY-MM-DD)
     * @param {string} dateStr - Date string in YYYY-MM-DD format
     * @returns {string} Day name (Monday, Tuesday, etc.)
     */
    function getDayName(dateStr) {
        const date = new Date(dateStr + 'T00:00:00');
        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        return days[date.getDay()];
    }
    
    /**
     * Get Indonesian day name from date string (YYYY-MM-DD)
     * @param {string} dateStr - Date string in YYYY-MM-DD format
     * @returns {string} Day name in Indonesian (Senin, Selasa, etc.)
     */
    function getDayNameIndonesian(dateStr) {
        const date = new Date(dateStr + 'T00:00:00');
        const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
        return days[date.getDay()];
    }
    
    /**
     * Check if date is PR purchasing holiday
     * Combines PR holiday days (day names) with national holidays (specific dates)
     * Different PR types have different holiday configurations
     * 
     * @param {string} dateStr - Date string in YYYY-MM-DD format
     * @param {string} periodCode - Period code (e.g., "Periodik", "Sayuran")
     * @returns {boolean} True if date is PR holiday
     */
    function isPRHoliday(dateStr, periodCode) {
        // Check if date is in national holidays list (specific dates)
        if (holidays.includes(dateStr)) {
            return true;
        }
        
        // Get PR holiday days based on period code
        const periodCodeLower = (periodCode || '').toLowerCase();
        let holidayDays = prHolidayDays.periodik || ['Sabtu', 'Minggu']; // Default
        
        if (periodCodeLower === 'sayuran') {
            holidayDays = prHolidayDays.sayuran || ['Minggu'];
        } else if (periodCodeLower === 'periodik') {
            holidayDays = prHolidayDays.periodik || ['Sabtu', 'Minggu'];
        }
        
        // Check if day name is in PR holiday days list
        const dayName = getDayNameIndonesian(dateStr);
        return holidayDays.includes(dayName);
    }
    
    /**
     * Apply order constraints (minimal_order and multiple_order)
     * 
     * minimal_order: Jika SPB < minimal_order, maka SPB = minimal_order
     * multiple_order: Pembulatan ke kelipatan terdekat (MROUND)
     * 
     * Contoh minimal_order:
     * - minimal_order = 8, SPB = 7 → Result = 8
     * - minimal_order = 8, SPB = 10 → Result = 10
     * 
     * Contoh multiple_order (MROUND):
     * - multiple_order = 2, SPB = 7 → Result = 8 (round to nearest multiple of 2)
     * - multiple_order = 5, SPB = 12 → Result = 10 (round to nearest multiple of 5)
     * - multiple_order = 5, SPB = 13 → Result = 15 (round to nearest multiple of 5)
     * 
     * @param {number} finalQty - Final quantity before constraints
     * @param {object} mapping - Store raw material mapping data
     * @returns {number} Final quantity after applying constraints
     * 
     * Requirements: 5.3, 5.4, 10.1, 10.2, 10.3, 10.4
     */
    function applyOrderConstraints(finalQty, mapping) {
        const originalQty = finalQty;
        finalQty = parseFloat(finalQty) || 0;
        
        // Parse constraints from mapping
        const minimalOrder = parseFloat(mapping.minimal_order) || 0;
        const multipleOrder = parseFloat(mapping.multiple_order) || 0;
        
        // Debug log dengan detail lengkap
        printLog(`🔧 applyOrderConstraints called:`);
        printLog(`   → Input qty: ${finalQty}`);
        printLog(`   → minimal_order: ${minimalOrder} (raw: ${mapping.minimal_order})`);
        printLog(`   → multiple_order: ${multipleOrder} (raw: ${mapping.multiple_order})`);
        
        // If finalQty is 0, no need to apply constraints
        if (finalQty === 0) {
            printLog(`⚠️ Qty is 0, skipping constraints`);
            return 0;
        }
        
        // Apply minimal_order constraint FIRST
        if (minimalOrder > 0 && finalQty < minimalOrder) {
            printLog(`📏 Minimal order: ${finalQty.toFixed(2)} < ${minimalOrder} → adjusted to ${minimalOrder}`);
            finalQty = minimalOrder;
        }
        
        // Apply multiple_order constraint (MROUND - round to nearest multiple)
        printLog(`🔍 Checking multiple_order: ${multipleOrder} > 1? ${multipleOrder > 1}, finalQty > 0? ${finalQty > 0}`);
        if (multipleOrder > 1 && finalQty > 0) {
            const beforeRounding = finalQty;
            // MROUND formula: ROUND(value / multiple) * multiple
            finalQty = Math.round(finalQty / multipleOrder) * multipleOrder;
            printLog(`🔢 Multiple order applied: ${beforeRounding.toFixed(2)} → MROUND(${beforeRounding.toFixed(2)} / ${multipleOrder}) * ${multipleOrder} = ${finalQty}`);
        } else if (multipleOrder > 0 && multipleOrder <= 1) {
            printLog(`⚠️ Multiple order ${multipleOrder} <= 1, tidak diterapkan`);
        }
        
        if (originalQty !== finalQty) {
            printLog(`✅ Order constraints applied: ${originalQty} → ${finalQty}`);
        } else {
            printLog(`ℹ️ No constraints applied, qty tetap: ${finalQty}`);
        }
        
        return finalQty;
    }
    
    /**
     * Calculate FSTR contribution to component raw material
     * Finds all FSTR sub-lines for a raw material and calculates their contribution
     * Also checks backend data for nested FSTR relationships
     * 
     * @param {number} rawMaterialId - Component raw material ID
     * @returns {Object} Object with total contribution and breakdown by FSTR
     * 
     * Requirements: 20.1, 20.3, 20.5, 25.5
     */
    function calculateFSTRContribution(rawMaterialId) {
        let totalContribution = 0;
        let fstrBreakdown = {};
        
        try {
            // Method 1: Find visible FSTR sub-lines for this raw material (where this RM is a component)
            $(`.fstr-subline[data-parent-id="${rawMaterialId}"]`).each(function() {
                try {
                    const fstrId = $(this).data('fstr-id');
                    const fstrQtyPakaiInput = $(this).find('input[name^="fstr_qty_pakai"]');
                    const fstrQtyPakai = parseFloat(fstrQtyPakaiInput.val()) || 0;
                    const componentQtyPerUnit = parseFloat(fstrQtyPakaiInput.data('component-qty'));
                    
                    // Requirement 25.2: Handle missing component_qty
                    if (!componentQtyPerUnit || componentQtyPerUnit === 0) {
                        printWarn(`⚠️ Component qty kosong untuk FSTR ${fstrId} → RM ${rawMaterialId}`);
                        showWarning(`Component qty tidak valid untuk FSTR ${fstrId}. Data tidak akan dihitung.`);
                        return; // Skip this FSTR, don't calculate contribution
                    }
                    
                    // Calculate contribution: fstr_qty_pakai × component_qty_per_unit
                    const contribution = fstrQtyPakai * componentQtyPerUnit;
                    
                    printLog(`  📊 FSTR ${fstrId} → RM ${rawMaterialId}: qty_pakai=${fstrQtyPakai.toFixed(5)} × component_qty=${componentQtyPerUnit.toFixed(5)} = ${contribution.toFixed(5)}`);
                    
                    // Cascade: if this FSTR also has components, calculate recursively
                    const cascadeContribution = calculateFSTRCascade(fstrId, fstrQtyPakai, new Set());
                    
                    if (cascadeContribution > 0) {
                        printLog(` ↳ Cascade contribution dari FSTR ${fstrId}: ${cascadeContribution.toFixed(5)}`);
                    }
                    
                    // Add direct contribution
                    totalContribution += contribution;
                    
                    // Add cascade contribution (from nested FSTRs)
                    totalContribution += cascadeContribution;
                    
                    // Store breakdown for tooltip (direct contribution only)
                    if (contribution > 0) {
                        fstrBreakdown[fstrId] = contribution;
                    }
                } catch (error) {
                    // Requirement 25.5: Log error and continue with partial result
                    printError(`❌ Error menghitung FSTR contribution untuk FSTR di RM ${rawMaterialId}:`, error);
                    // Continue with next FSTR instead of stopping completely
                }
            });
            
            // Method 2: Check backend data for nested FSTR relationships
            // Get list of FSTRs already calculated in Method 1 (visible sub-lines for this RM)
            const visibleFSTRs = [];
            $(`.fstr-subline[data-parent-id="${rawMaterialId}"]`).each(function() {
                const fstrId = $(this).data('fstr-id');
                visibleFSTRs.push(String(fstrId));
            });
            
            // Find all FSTRs with visible input
            const fstrsWithInput = [];
            $('input[name^="fstr_qty_pakai"]').each(function() {
                const inputName = $(this).attr('name');
                const match = inputName.match(/fstr_qty_pakai\[(\d+)\]\[(\d+)\]/);
                if (match) {
                    const fstrId = match[2];
                    const qty = parseFloat($(this).val()) || 0;
                    if (qty > 0 && !visibleFSTRs.includes(String(fstrId))) {
                        if (!fstrsWithInput.find(f => f.id == fstrId)) {
                            fstrsWithInput.push({id: fstrId, qty: qty});
                        }
                    }
                }
            });
            
            // For each FSTR with input, calculate contribution to this RM through cascade
            for (let fstrWithInput of fstrsWithInput) {
                const contribution = calculateNestedContribution(fstrWithInput.id, fstrWithInput.qty, rawMaterialId, new Set());
                if (contribution > 0) {
                    printLog(`  🔍 Method 2 - FSTR ${fstrWithInput.id} (qty=${fstrWithInput.qty.toFixed(5)}) → RM ${rawMaterialId}: nested contribution = ${contribution.toFixed(5)}`);
                    totalContribution += contribution;
                    fstrBreakdown[fstrWithInput.id] = contribution;
                }
            }
        } catch (error) {
            // Requirement 25.5: Log error to console and show partial result
            printError(`❌ Error di calculateFSTRContribution untuk RM ${rawMaterialId}:`, error);
            
            // Log to Laravel backend
            logErrorToBackend('calculateFSTRContribution', {
                rawMaterialId: rawMaterialId,
                error: error.message,
                stack: error.stack
            });
        }
        
        // Summary log: only show if there's contribution
        if (totalContribution > 0) {
            printLog(`� RM ${rawMaterialId} total FSTR contribution: ${totalContribution.toFixed(2)}`);
        }
        
        return {
            total: totalContribution,
            breakdown: fstrBreakdown
        };
    }
    
    /**
     * Calculate nested contribution from FSTR to a specific RM
     * Follows the database structure where relation is stored as: component_id → parent_id
     * Database: fstrComponents[component_id] = [{component_id: parent_id, qty: ...}]
     * Meaning: component_id is used by parent_id
     * 
     * To find what FSTR uses: we need to find where parent_id = fstrId
     * 
     * @param {number} fstrId - FSTR ID to check (this is the FSTR that user inputs)
     * @param {number} fstrQty - Quantity of the FSTR
     * @param {number} targetRmId - Target RM ID to find contribution for
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} Total contribution to target RM
     */
    function calculateNestedContribution(fstrId, fstrQty, targetRmId, processedFSTRs = new Set()) {
        // Convert to string for consistent comparison
        fstrId = String(fstrId);
        targetRmId = String(targetRmId);
        
        // Prevent infinite loop
        if (processedFSTRs.has(fstrId)) {
            // Circular dependency detected, skip silently
            return 0;
        }
        processedFSTRs.add(fstrId);
        
        let totalContribution = 0;
        
        // Removed verbose log for cleaner output
        
        // Skip if FSTR ID is same as target RM (circular reference in data)
        if (fstrId == targetRmId) {
            // Skipping: FSTR ID same as target RM (circular reference)
            return 0;
        }
        
        // Find what components this FSTR uses
        // In database: fstrComponents[componentId] contains parents that use this component
        // We need to find: where parent (component_id in the array) = fstrId
        
        for (let componentId in fstrComponents) {
            const relations = fstrComponents[componentId]; // Array of {component_id: parentId, qty: ...}
            
            // Check if fstrId uses this componentId
            const relation = relations.find(r => r.component_id == fstrId);
            if (relation) {
                // Found: componentId is used by fstrId
                // Database structure: fstrComponents[componentId] = [{component_id: fstrId, qty: X}]
                // Meaning: componentId is used by fstrId with quantity X
                
                const qtyPerUnit = relation.qty_per_unit;
                const componentIdStr = String(componentId);
                
                // Check if this component is the target RM
                if (componentIdStr == targetRmId) {
                    // Direct contribution
                    const contribution = fstrQty * qtyPerUnit;
                    printLog(`   🎯 Direct hit: FSTR ${fstrId} uses Component ${componentIdStr} (target RM): fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${contribution.toFixed(5)}`);
                    totalContribution += contribution;
                } else {
                    // Check if this component is also a FSTR (is used by other items)
                    const componentRelations = fstrComponents[componentIdStr];
                    if (componentRelations && componentRelations.length > 0) {
                        // This component is a FSTR, recurse
                        const componentQty = fstrQty * qtyPerUnit;
                        printLog(`   🔄 Nested: FSTR ${fstrId} uses Component ${componentIdStr} (is FSTR):`);
                        printLog(`      Calculation: fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${componentQty.toFixed(5)}`);
                        printLog(`      Checking if Component ${componentIdStr} leads to target RM ${targetRmId}...`);
                        const nestedProcessedFSTRs = new Set(processedFSTRs);
                        const nestedContribution = calculateNestedContribution(
                            componentIdStr,
                            componentQty,
                            targetRmId,
                            nestedProcessedFSTRs
                        );
                        if (nestedContribution > 0) {
                            printLog(`     ✓ Found path: Component ${componentIdStr} → target RM ${targetRmId} = ${nestedContribution.toFixed(5)}`);
                            totalContribution += nestedContribution;
                        }
                    }
                }
            }
        }
        
        return totalContribution;
    }
    
    /**
     * Find all RMs that are affected by a FSTR through cascade relationships
     * Recursively searches through nested FSTR structures
     * 
     * @param {number} fstrId - FSTR ID to check
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {Array} Array of RM IDs that are affected
     */
    function findAffectedRMs(fstrId, processedFSTRs = new Set()) {
        fstrId = String(fstrId);
        
        // Prevent infinite loop
        if (processedFSTRs.has(fstrId)) {
            return [];
        }
        processedFSTRs.add(fstrId);
        
        let affectedRMs = [];
        
        // Find what components this FSTR uses
        for (let componentId in fstrComponents) {
            const relations = fstrComponents[componentId];
            
            // Check if fstrId uses this componentId
            const relation = relations.find(r => r.component_id == fstrId);
            if (relation) {
                const componentIdStr = String(componentId);
                
                // Add this component to affected RMs
                affectedRMs.push(componentIdStr);
                
                // If this component is also a FSTR, recurse to find nested affected RMs
                const componentRelations = fstrComponents[componentIdStr];
                if (componentRelations && componentRelations.length > 0) {
                    const nestedProcessedFSTRs = new Set(processedFSTRs);
                    const nestedAffectedRMs = findAffectedRMs(componentIdStr, nestedProcessedFSTRs);
                    affectedRMs = affectedRMs.concat(nestedAffectedRMs);
                }
            }
        }
        
        // Remove duplicates
        return [...new Set(affectedRMs)];
    }
    
    /**
     * Get FSTR quantity from input or from cascade calculation
     * Checks visible input first, then calculates from nested FSTRs
     * 
     * @param {number} fstrId - FSTR ID
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} FSTR quantity
     */
    function getFSTRQuantity(fstrId, processedFSTRs = new Set()) {
        // Convert to string for consistent comparison
        fstrId = String(fstrId);
        
        // Prevent infinite loop - detect circular dependency
        if (processedFSTRs.has(fstrId)) {
            printWarn(`⚠️ Circular dependency detected in getFSTRQuantity for FSTR ${fstrId}`);
            return 0;
        }
        
        // Add this FSTR to processed set
        processedFSTRs.add(fstrId);
        
        // Check if there's a visible input for this FSTR
        const fstrInput = $(`input[name="fstr_qty_pakai[${fstrId}]"]`);
        if (fstrInput.length > 0) {
            const qty = parseFloat(fstrInput.val()) || 0;
            return qty;
        }
        
        // If not visible, calculate from parent FSTRs that use this FSTR
        let totalQty = 0;
        
        // FSTR not visible, checking parent FSTRs...
        
        for (let parentFstrId in fstrComponents) {
            const components = fstrComponents[parentFstrId];
            
            // Check if this FSTR is a component of parentFstrId (use == for loose comparison)
            const componentData = components.find(c => c.component_id == fstrId);
            if (componentData) {
                // FSTR is component of parent FSTR
                
                // This FSTR is used by parentFstrId
                // Create a new Set for this branch to allow the same FSTR in different branches
                const nestedProcessedFSTRs = new Set(processedFSTRs);
                const parentQty = getFSTRQuantity(parentFstrId, nestedProcessedFSTRs); // Recursive call with tracking
                if (parentQty > 0) {
                    const contribution = parentQty * componentData.qty_per_unit;
                    totalQty += contribution;
                }
            }
        }
        
        return totalQty;
    }
    
    /**
     * Recursive function to calculate nested FSTR component contributions
     * Handles multi-level FSTR structures and detects circular dependencies
     * 
     * @param {number} fstrId - FSTR ID to process
     * @param {number} fstrQty - Quantity of the FSTR
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} Total contribution from nested components
     * 
     * Requirements: 21.1, 21.2, 21.3, 21.4, 21.5, 25.1, 25.5
     */
    function calculateFSTRCascade(fstrId, fstrQty, processedFSTRs) {
        try {
            // Prevent infinite loop - detect circular dependency
            if (processedFSTRs.has(fstrId)) {
                printError(`❌ Circular dependency terdeteksi untuk FSTR ${fstrId}`);
                showError(`Circular dependency terdeteksi dalam FSTR ${fstrId}. Hubungi administrator.`);
                return 0;
            }
            
            // Add this FSTR to processed set
            processedFSTRs.add(fstrId);
            
            let totalContribution = 0;
            const components = fstrComponents[fstrId] || [];
            
            // Process each component of this FSTR
            for (let component of components) {
                try {
                    const componentId = component.component_id;
                    const qtyPerUnit = component.qty_per_unit;
                    const isFSTR = component.is_component_fstr || false;
                    
                    // Requirement 25.2: Handle missing component_qty
                    if (!qtyPerUnit || qtyPerUnit === 0) {
                        printWarn(`⚠️ Component qty kosong untuk komponen ${componentId} di FSTR ${fstrId}`);
                        // Skip this component, don't calculate contribution
                        continue;
                    }
                    
                    // Calculate component contribution
                    const componentContribution = fstrQty * qtyPerUnit;
                    
                    printLog(` 🔗 Cascade FSTR ${fstrId} → Component ${componentId}: fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${componentContribution.toFixed(5)}`);
                    
                    // If this component is also a FSTR, recurse
                    if (isFSTR) {
                        // Create a new Set for this branch to allow the same FSTR in different branches
                        const nestedProcessedFSTRs = new Set(processedFSTRs);
                        const nestedContribution = calculateFSTRCascade(
                            componentId,
                            componentContribution,
                            nestedProcessedFSTRs
                        );
                        totalContribution += nestedContribution;
                        printLog(`   ↳ Nested contribution dari FSTR ${componentId}: ${nestedContribution.toFixed(5)}`);
                    }
                    // Note: Leaf components (non-FSTR) are NOT added here
                    // They are already calculated in the parent function (calculateFSTRContribution)
                } catch (error) {
                    // Requirement 25.5: Log error and continue with partial result
                    printError(`❌ Error processing komponen di FSTR ${fstrId}:`, error);
                    // Continue with next component instead of stopping completely
                }
            }
            
            return totalContribution;
        } catch (error) {
            // Requirement 25.5: Log error to console and return partial result
            printError(`❌ Error di calculateFSTRCascade untuk FSTR ${fstrId}:`, error);
            
            // Log to Laravel backend
            logErrorToBackend('calculateFSTRCascade', {
                fstrId: fstrId,
                fstrQty: fstrQty,
                error: error.message,
                stack: error.stack
            });
            
            // Return 0 to allow calculation to continue
            return 0;
        }
    }
    
    /**
     * Update status badge based on DOI vs Range DOI Master
     * Determines badge color and text based on DOI ranges from master data
     * Also shows "Overstock" label if LSM Aktual > Max Stock
     * Adds tooltip with estimated date when stock will run out
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number|string} doi - DOI value or '∞'
     * 
     * Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 11.3
     */
    function updateStatusBadge(rawMaterialId, lsmAktual, doi) {
        const mapping = mappingData[rawMaterialId];
        if (!mapping) {
            return;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        
        let badge = '';
        let badgeClass = '';
        let matchedRange = null; // Declare here so it's available for checkLSMReasonRequired
        
        // Status badge is now determined by Range DOI (not min/max stock)
        
        // Determine badge based on Range DOI Master
        if (doi === '∞' || doi === Infinity) {
            badge = 'Aman';
            badgeClass = 'badge-success';
        } else {
            const doiValue = parseFloat(doi) || 0;
            
            // Find matching range DOI
            for (let range of rangeDois) {
                const minDoi = parseFloat(range.min_doi) || 0;
                const maxDoi = range.max_doi === null ? Infinity : parseFloat(range.max_doi);
                
                if (doiValue >= minDoi && doiValue <= maxDoi) {
                    matchedRange = range;
                    break;
                }
            }
            
            if (matchedRange) {
                badge = matchedRange.name;
                badgeClass = 'badge-' + (matchedRange.badge_color || 'secondary');
            } else {
                // No matching range found
                badge = 'Unknown';
                badgeClass = 'badge-secondary';
            }
        }
        
        // Update badge element
        const badgeElement = $(`#status_badge_${rawMaterialId}`);
        if (badgeElement.length > 0) {
            // Get Open SPB for this item
            const openSPB = openSPBData[rawMaterialId] || 0;
            
            // Build badge HTML (no overstock check - handled by Range DOI)
            let badgeHTML = `<span class="badge ${badgeClass}">${badge}</span>`;
            
            // Update badge
            badgeElement
                .removeClass('badge-danger badge-warning badge-success badge-info badge-secondary')
                .html(badgeHTML);
            
            // Update Open SPB in separate element
            const openSPBElement = $(`#open_spb_${rawMaterialId}`);
            if (openSPBElement.length > 0) {
                openSPBElement.text(`Open: ${openSPB.toFixed(2)}`);
            }
            
            // Calculate estimated date when stock will run out
            let estimatedDate = '-';
            if (doi !== '∞' && doi !== Infinity && doi > 0) {
                const doiDays = Math.floor(parseFloat(doi));
                const targetDate = new Date(soDate + 'T00:00:00');
                targetDate.setDate(targetDate.getDate() + doiDays);
                
                const year = targetDate.getFullYear();
                const month = String(targetDate.getMonth() + 1).padStart(2, '0');
                const day = String(targetDate.getDate()).padStart(2, '0');
                estimatedDate = `${year}-${month}-${day}`;
            }
            
            // Add tooltip with detailed information (Requirements: 11.3)
            const doiDisplay = doi === '∞' ? '∞' : (typeof doi === 'number' ? doi.toFixed(2) : '0.00');
            
            let tooltipContent = '<div style="text-align: left; min-width: 220px;">';
            tooltipContent += '<strong>Detail Status Stok:</strong><br>';
            tooltipContent += `<span style="color: #6c757d;">LSM Aktual:</span> <strong>${lsmAktual.toFixed(2)}</strong><br>`;
            tooltipContent += `<span style="color: #6c757d;">DOI:</span> <strong>${doiDisplay} hari</strong><br>`;
            
            if (estimatedDate !== '-') {
                tooltipContent += `<span style="color: #6c757d;">Cukup sampai:</span> <strong>${estimatedDate}</strong><br>`;
            }
            
            // Always show Open SPB in tooltip
            tooltipContent += `<span style="color: #6c757d;">Open SPB:</span> <strong>${openSPB.toFixed(2)}</strong><br>`;
            
            tooltipContent += '</div>';
            
            // Update tooltip
            badgeElement.attr('data-toggle', 'tooltip');
            badgeElement.attr('data-placement', 'top');
            badgeElement.attr('data-html', 'true');
            badgeElement.attr('data-original-title', tooltipContent);
            badgeElement.css('cursor', 'help');
            
            // Reinitialize tooltip if already initialized
            if (badgeElement.data('bs.tooltip')) {
                badgeElement.tooltip('dispose');
            }
            badgeElement.tooltip({
                html: true,
                sanitize: false,
                placement: 'top',
                boundary: 'window',
                trigger: 'hover'
            });
        }
        
        // Check if LSM Reason button should be shown
        // Show button if DOI is in range with lsm_reason_flag = true
        checkLSMReasonRequired(rawMaterialId, doi, matchedRange);
    }
    
    /**
     * Check if LSM Reason is required for this item
     * Show LSM Reason button if DOI is in range with lsm_reason_flag = true
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number|string} doi - DOI value or '∞'
     * @param {object} matchedRange - Matched range DOI object
     */
    function checkLSMReasonRequired(rawMaterialId, doi, matchedRange) {
        const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
        const lsmReasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
        
        if (!lsmReasonBtn.length) {
            return;
        }
        
        // Show button if:
        // 1. DOI is not infinity
        // 2. Matched range has lsm_reason_flag = true
        if (matchedRange && matchedRange.lsm_reason_flag && doi !== '∞' && doi !== Infinity) {
            lsmReasonBtn.show();
            
            // Update button icon based on whether reason is already selected
            const currentReasonId = lsmReasonInput.val();
            if (currentReasonId) {
                // Find reason name
                const reason = lsmReasons.find(r => r.id == currentReasonId);
                if (reason) {
                    lsmReasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    lsmReasonBtn.removeClass('btn-danger').addClass('btn-success');
                    lsmReasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
                } else {
                    lsmReasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                    lsmReasonBtn.removeClass('btn-success').addClass('btn-danger');
                    lsmReasonBtn.attr('title', 'Pilih alasan LSM');
                }
            } else {
                lsmReasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                lsmReasonBtn.removeClass('btn-success').addClass('btn-danger');
                lsmReasonBtn.attr('title', 'Pilih alasan LSM');
            }
        } else {
            // Hide button if not required
            lsmReasonBtn.hide();
            
            // Clear reason if previously set
            const previousReasonId = lsmReasonInput.val();
            if (previousReasonId && previousReasonId !== '') {
                // Reason was set before, need to clear it in database
                lsmReasonInput.val('');
                
                // Save to database
                const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
                const soDetailId = row.find('.autosave-field').first().data('so-detail-id');
                
                if (soDetailId) {
                    printLog(`🔄 Clearing LSM reason for RM ${rawMaterialId} (DOI no longer in range)`);
                    
                    $.ajax({
                        url: '{{ route("stock_opnames.auto_save_field") }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            so_detail_id: soDetailId,
                            field_name: 'lsm_reason_id',
                            value: '',
                            qty_utuh: row.find('input[name*="[qty_utuh]"]').val() || 0,
                            qty_pakai: row.find('input[name*="[qty_pakai]"]').val() || 0,
                            lsm_reason_id: null
                        },
                        success: function(response) {
                            if (response.success) {
                                printLog(`✓ LSM reason cleared for RM ${rawMaterialId}`);
                            } else {
                                printError(`❌ Failed to clear LSM reason: ${response.message}`);
                            }
                        },
                        error: function(xhr) {
                            printError(`❌ Error clearing LSM reason: ${xhr.responseJSON?.message || 'Unknown error'}`);
                        }
                    });
                }
            }
        }
    }

    
    /**
     * Update display for multiple SPB suggestions (PR items)
     * Shows up to 3 suggestions in separate columns
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number|string} doi - DOI value or '∞'
     * @param {Array} suggestions - Array of suggestion objects
     * @param {object} breakdown - Breakdown info for tooltips
     * @param {number} skipResetForUsulan - Usulan number to skip reset (the one that triggered recalculation)
     */
    function updateDisplayMultipleSuggestions(rawMaterialId, lsmAktual, doi, suggestions, breakdown, skipResetForUsulan = null) {
        
        // Find the row for this raw material
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        if (row.length === 0) {
            // This might be a FSTR ID instead of raw material ID - skip silently
            // FSTR rows don't have SPB columns, so no need to update
            return;
        } 
        
        // Store hasil_pakai for deviasi validation (use first suggestion)
        if (suggestions.length > 0 && breakdown && breakdown.spb && breakdown.spb.hasilPakai !== undefined) {
            row.data('hasil-pakai', breakdown.spb.hasilPakai);
            
            // Also store hasil_pakai per usulan for accurate validation
            // Each usulan has different Open SPB, so hasil_pakai is different
            suggestions.forEach((suggestion, idx) => {
                const usulanNumber = idx + 1;
                // hasil_pakai for this usulan = suggestion.qty (already calculated with correct Open SPB)
                row.data(`hasil-pakai-${usulanNumber}`, suggestion.qty);
            });
        }
        
        // Update LSM Aktual (ending stock) with breakdown tooltip
        updateLSMDisplay(row, lsmAktual, breakdown ? breakdown.lsm : null);
        
        // Update DOI with calculation info tooltip
        updateDOIDisplay(row, doi, breakdown ? breakdown.doi : null);
        
        // Update Status Badge with tooltip
        updateStatusBadge(rawMaterialId, lsmAktual, doi);
        
        // Check if LSM Reason is required but not filled
        const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
        const lsmReasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
        const lsmReasonRequired = lsmReasonBtn.is(':visible');
        const lsmReasonFilled = lsmReasonInput.val() && lsmReasonInput.val() !== '';
        
        console.log(`🔍 LSM Reason check for RM ${rawMaterialId}: required=${lsmReasonRequired}, filled=${lsmReasonFilled}, buttonVisible=${lsmReasonBtn.is(':visible')}, inputValue="${lsmReasonInput.val()}"`);
        
        // If LSM reason required but not filled, treat as "no suggestion" (show "-")
        if (lsmReasonRequired && !lsmReasonFilled) {
            console.log(`⚠️ Setting suggestions to empty (show "-") because LSM reason required but not filled`);
            suggestions = []; // Empty array = no suggestions = show "-"
        }
        
        const mapping = mappingData[rawMaterialId];
        const hasKirimConversion = mapping && mapping.conversion_factor_kirim_utuh && 
                                  parseFloat(mapping.conversion_factor_kirim_utuh) > 0;
        
        // Calculate Open SPB for each usulan (NOT cumulative)
        const openSPBDB = openSPBData[rawMaterialId] || 0;
        
        // Get conversion factors for Kirim to Pakai conversion
        const conversionUtuhPakai = parseFloat(mapping?.conversion_factor_utuh_pakai) || 1;
        const conversionKirimUtuh = parseFloat(mapping?.conversion_factor_kirim_utuh);
        const hasKirimConversionFactor = conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh);
        const conversionKirimToPakai = hasKirimConversionFactor ? (conversionKirimUtuh * conversionUtuhPakai) : 1;
        
        // Build Open SPB array for each usulan
        let openSPBs = [];
        
        // Usulan 1: Open SPB from DB (last submitted SPB, already in Pakai from DB)
        openSPBs.push(openSPBDB);
        
        // Usulan 2: Open SPB from Final Qty Usulan 1
        // Use finalQty from suggestions array (system calculated value)
        // This will be the value shown in display, which user can edit
        if (suggestions.length > 0 && suggestions[0]) {
            const finalQtyUsulan1Kirim = suggestions[0].finalQty; // System value in Kirim
            
            // Convert from Kirim to Pakai
            const openSPBUsulan2 = finalQtyUsulan1Kirim * conversionKirimToPakai;
            openSPBs.push(openSPBUsulan2);
            
            console.log(`📊 Usulan 2 Open SPB: Final Qty Usulan 1 = ${finalQtyUsulan1Kirim} ${mapping?.uom_kirim || 'Kirim'} × ${conversionKirimToPakai.toFixed(4)} = ${openSPBUsulan2.toFixed(2)} Pakai`);
        } else {
            openSPBs.push(openSPBDB); // No usulan 1, use DB
        }
        
        // Usulan 3: Open SPB from Final Qty Usulan 2
        // Use finalQty from suggestions array (system calculated value)
        if (suggestions.length > 1 && suggestions[1]) {
            const finalQtyUsulan2Kirim = suggestions[1].finalQty; // System value in Kirim
            
            // Convert from Kirim to Pakai
            const openSPBUsulan3 = finalQtyUsulan2Kirim * conversionKirimToPakai;
            openSPBs.push(openSPBUsulan3);
            
            console.log(`📊 Usulan 3 Open SPB: Final Qty Usulan 2 = ${finalQtyUsulan2Kirim} ${mapping?.uom_kirim || 'Kirim'} × ${conversionKirimToPakai.toFixed(4)} = ${openSPBUsulan3.toFixed(2)} Pakai`);
        } else {
            openSPBs.push(openSPBDB); // No usulan 2, use DB
        }
        
       
        
        // Update each suggestion column (Usulan 1, 2, 3)
        for (let i = 1; i <= 3; i++) {
            const suggestionIndex = i - 1;
            const suggestion = suggestions[suggestionIndex];
            const openSPB = openSPBs[suggestionIndex] || openSPBDB; // Use specific Open SPB for this usulan
            
            const spbSuggestionElement = $(`#spb_suggestion_${i === 1 ? '' : i + '_'}${rawMaterialId}`);
            const finalQtyInput = $(`#spb_suggestion_qty_final_${i === 1 ? '' : i + '_'}${rawMaterialId}`);
            
          
            
            if (spbSuggestionElement.length === 0 || finalQtyInput.length === 0) {
                console.warn(`  ⚠️ Usulan ${i}: Elements not found, skipping`);
                continue;
            }
            
            if (!suggestion) {
               
                // No suggestion for this column - show "-" in Saran and disable input
                const parentTdSaran = spbSuggestionElement.parent();
                const spanId = spbSuggestionElement.attr('id');
                const spanClasses = spbSuggestionElement.attr('class');
                
                // Show "-" in Saran column
                parentTdSaran.html(`<span id="${spanId}" class="${spanClasses}" style="color: #999;">-</span>`);
                
                // Remove tooltip if no suggestion
                const newSpan = $(`#${spanId}`);
                if (newSpan.data('bs.tooltip')) {
                    newSpan.tooltip('dispose');
                }
                
                // Disable input in Final Qty column
                finalQtyInput.val('');
                finalQtyInput.prop('disabled', true);
                
                // Check if LSM reason is required but not filled
                const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
                const lsmReasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
                const lsmReasonRequired = lsmReasonBtn.is(':visible');
                const lsmReasonFilled = lsmReasonInput.val() && lsmReasonInput.val() !== '';
                
                if (lsmReasonRequired && !lsmReasonFilled) {
                    finalQtyInput.attr('placeholder', 'Pilih LSM Reason');
                    finalQtyInput.attr('title', 'Silakan pilih alasan LSM terlebih dahulu');
                } else {
                    finalQtyInput.attr('placeholder', '-');
                    finalQtyInput.attr('title', 'Tidak ada usulan SPB untuk item ini');
                }
            } else {
               
                // Has suggestion - display it
                const finalQty = suggestion.finalQty;
                
                // Display as integer for Kirim, decimal for Utuh
                const displayValue = typeof finalQty === 'number' 
                    ? (hasKirimConversion ? Math.round(finalQty).toString() : finalQty.toFixed(2))
                    : finalQty;
                
                // Store system value in data attribute for comparison
                spbSuggestionElement.data('system-value', finalQty);
                
                // Check if user has edited the final qty OR if there's a value from database
                const userEdited = finalQtyInput.data('user-edited');
                const currentInputValue = finalQtyInput.val();
                const userValue = parseFloat(currentInputValue);
                
                // If input has value from database (not empty and not placeholder), treat as user-edited
                const hasValueFromDB = currentInputValue !== '' && currentInputValue !== 'Auto' && !isNaN(userValue);
                
                // Check if this usulan will be reset (for usulan 2 & 3 when system value changes)
                // BUT skip reset if this is the usulan that triggered recalculation
                const willBeReset = i > 1 && hasValueFromDB && Math.abs(userValue - finalQty) > 0.01 && i !== skipResetForUsulan;
                
                if ((userEdited || hasValueFromDB) && !isNaN(userValue) && userValue !== finalQty && !willBeReset) {
                    // User has edited - show user value with original suggestion below
                    const parentTd = spbSuggestionElement.parent();
                    const spanId = spbSuggestionElement.attr('id');
                    const spanClasses = spbSuggestionElement.attr('class');
                    
                    parentTd.html(`
                        <span id="${spanId}" class="${spanClasses}" data-system-value="${finalQty}" style="cursor:help">${Math.round(userValue)} ${mapping.uom_kirim}</span>
                        <br>
                        <small class="text-muted">(Srn: ${displayValue})</small>
                    `);
                    
                    // Re-attach tooltip after HTML replacement with Open SPB
                    // Track this update to prevent race conditions
                    const tooltipKey = `${rawMaterialId}_${i}`;
                    pendingTooltipUpdates[tooltipKey] = setTimeout(() => {
                        updateSPBTooltipMultiple(rawMaterialId, suggestion, i, breakdown, openSPB);
                        delete pendingTooltipUpdates[tooltipKey];
                    }, 150); // Increased from 50ms to 150ms for better DOM stability
                    
                    // Mark as user-edited for future updates
                    if (hasValueFromDB && !userEdited) {
                        finalQtyInput.data('user-edited', true);
                    }
                } else {
                    // No user edit - show system value only
                    const parentTd = spbSuggestionElement.parent();
                    const spanId = spbSuggestionElement.attr('id');
                    const spanClasses = spbSuggestionElement.attr('class');
                    
                    parentTd.html(`
                        <span id="${spanId}" class="${spanClasses}" data-system-value="${finalQty}" style="cursor:help">${displayValue} ${mapping.uom_kirim}</span>
                    `);
                    
                    // Re-attach tooltip after HTML replacement with Open SPB
                    // Track this update to prevent race conditions
                    const tooltipKey = `${rawMaterialId}_${i}`;
                    pendingTooltipUpdates[tooltipKey] = setTimeout(() => {
                        updateSPBTooltipMultiple(rawMaterialId, suggestion, i, breakdown, openSPB);
                        delete pendingTooltipUpdates[tooltipKey];
                    }, 150); // Increased from 50ms to 150ms for better DOM stability
                }
                
                // Enable input
                finalQtyInput.prop('disabled', false);
                finalQtyInput.attr('placeholder', 'Auto');
                finalQtyInput.attr('title', `Usulan SPB ke-${i} - Anda dapat menyesuaikan qty ini`);
                
                // Update editable final qty input
                const existingInputValue = finalQtyInput.val();
                const hasExistingValue = existingInputValue && existingInputValue !== '' && existingInputValue !== 'Auto';
                const isUserEdited = finalQtyInput.data('user-edited');
                
                // IMPORTANT: Reset Final Qty input if:
                // 1. User hasn't edited it yet (no user-edited flag)
                // 2. OR this is usulan 2/3 and we're recalculating (system value changed)
                //    In this case, we need to reset to new system value for consistency
                // 3. BUT skip reset if this usulan is the one that triggered recalculation
                
                const shouldResetInput = (!isUserEdited || 
                    (i > 1 && hasExistingValue && Math.abs(parseFloat(existingInputValue) - finalQty) > 0.01)) &&
                    i !== skipResetForUsulan; // Don't reset the usulan that triggered recalculation
                
                if (shouldResetInput) {
                    const inputValue = typeof finalQty === 'number'
                        ? (hasKirimConversion ? Math.round(finalQty).toString() : finalQty.toFixed(2))
                        : finalQty;
                        
                    finalQtyInput.val(inputValue);
                    
                    // Clear user-edited flag and reason when resetting
                    finalQtyInput.data('user-edited', false);
                    
                    // Clear reason for this usulan
                    const reasonInputId = i === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${i}_${rawMaterialId}`;
                    const reasonBtnId = i === 1 ? `spb_over_reason_btn_${rawMaterialId}` : `spb_over_reason_btn_${i}_${rawMaterialId}`;
                    $(`#${reasonInputId}`).val('');
                    $(`#${reasonBtnId}`).hide();
                    
                    // Update display to show system value only (remove user value display)
                    const parentTd = spbSuggestionElement.parent();
                    const spanId = spbSuggestionElement.attr('id');
                    const spanClasses = spbSuggestionElement.attr('class');
                    
                    parentTd.html(`
                        <span id="${spanId}" class="${spanClasses}" data-system-value="${finalQty}" style="cursor:help">${displayValue} ${mapping.uom_kirim}</span>
                    `);
                    
                    // Re-attach tooltip after HTML replacement
                    // Track this update to prevent race conditions
                    const tooltipKey = `${rawMaterialId}_${i}`;
                    pendingTooltipUpdates[tooltipKey] = setTimeout(() => {
                        updateSPBTooltipMultiple(rawMaterialId, suggestion, i, breakdown, openSPB);
                        delete pendingTooltipUpdates[tooltipKey];
                    }, 150); // Increased from 50ms to 150ms for better DOM stability
                    
                    printLog(`   🔄 Reset Final Qty Usulan ${i} to new system value: ${inputValue} (reason cleared, display updated)`);
                    
                    // IMPORTANT: Trigger autosave to clear reason in database
                    const rmRow = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
                    const soDetailId = rmRow.find('.autosave-field').first().data('so-detail-id');
                    
                    if (soDetailId) {
                        // Build payload to save cleared reason
                        const payload = {
                            _token: '{{ csrf_token() }}',
                            so_detail_id: soDetailId,
                            field_name: 'qty_pakai',
                            value: rmRow.find('input[name*="[qty_pakai]"]').val() || 0,
                            qty_utuh: rmRow.find('input[name*="[qty_utuh]"]').val() || 0,
                            qty_pakai: rmRow.find('input[name*="[qty_pakai]"]').val() || 0,
                            item_olahan: rmRow.find('input[name*="[item_olahan]"]').val() || 0
                        };
                        
                        // Add all usulan data to payload (to maintain consistency)
                        // Usulan 1
                        const usulan1FinalQty = $(`#spb_suggestion_qty_final_${rawMaterialId}`).val();
                        const usulan1SystemQty = $(`#spb_suggestion_${rawMaterialId}`).data('system-value');
                        const usulan1ReasonId = $(`#spb_over_reason_id_${rawMaterialId}`).val();
                        if (usulan1FinalQty) {
                            payload.spb_suggestion_qty_final = usulan1FinalQty;
                            payload.spb_suggestion_qty = usulan1SystemQty;
                            payload.spb_over_reason_id = usulan1ReasonId || '';
                        }
                        
                        // Usulan 2
                        const usulan2FinalQty = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`).val();
                        const usulan2SystemQty = $(`#spb_suggestion_2_${rawMaterialId}`).data('system-value');
                        const usulan2ReasonId = $(`#spb_over_reason_id_2_${rawMaterialId}`).val();
                        if (usulan2FinalQty) {
                            payload.spb_suggestion_qty_final_2 = usulan2FinalQty;
                            payload.spb_suggestion_qty_2 = usulan2SystemQty;
                            payload.spb_over_reason_id_2 = usulan2ReasonId || '';
                        }
                        
                        // Usulan 3
                        const usulan3FinalQty = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`).val();
                        const usulan3SystemQty = $(`#spb_suggestion_3_${rawMaterialId}`).data('system-value');
                        const usulan3ReasonId = $(`#spb_over_reason_id_3_${rawMaterialId}`).val();
                        if (usulan3FinalQty) {
                            payload.spb_suggestion_qty_final_3 = usulan3FinalQty;
                            payload.spb_suggestion_qty_3 = usulan3SystemQty;
                            payload.spb_over_reason_id_3 = usulan3ReasonId || '';
                        }
                        
                        // Send autosave request
                        $.ajax({
                            url: '{{ route("stock_opnames.auto_save_field") }}',
                            type: 'POST',
                            data: payload,
                            success: function(response) {
                                if (response.success) {
                                    printLog(`   ✅ Reason cleared in database for Usulan ${i}`);
                                } else {
                                    printError(`   ❌ Failed to clear reason: ${response.message}`);
                                }
                            },
                            error: function(xhr) {
                                printError(`   ❌ Error clearing reason: ${xhr.responseJSON?.message || 'Unknown error'}`);
                            }
                        });
                    }
                }
                
                // Trigger input event to validate and show reason button if needed
                // Skip if we just reset (input value = system value, no need to validate)
                // Also skip if user already has reason (no need to re-validate on page load)
                const reasonInputId = i === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${i}_${rawMaterialId}`;
                const hasReason = $(`#${reasonInputId}`).val() !== '';
                
                if (!shouldResetInput && !hasReason) {
                    // This ensures validation runs when SPB is calculated (e.g., from FSTR change)
                    // Even if user has existing value, we need to re-validate against new system value
                    finalQtyInput.trigger('input');
                }
            }
        }
    }
    
    /**
     * Update SPB tooltip for multiple suggestions
     * Shows calculation details for specific usulan
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {object} suggestion - Suggestion object with qty, shipmentDate, etc
     * @param {number} usulanNumber - Usulan number (1, 2, or 3)
     * @param {object} breakdown - Breakdown info
     */
    
    // Track pending tooltip updates to prevent race conditions
    const pendingTooltipUpdates = {};
    
    // Use event delegation for tooltip hover on table body (parent element that doesn't change)
    // This ensures tooltip works even after multiple DOM manipulations
    $(document).ready(function() {
        // Remove any existing delegated events first
        $('body').off('mouseenter.spbTooltip', '[id^="spb_suggestion_"]');
        $('body').off('mouseleave.spbTooltip', '[id^="spb_suggestion_"]');
        
        // Delegate mouseenter event to all SPB suggestion elements
        $('body').on('mouseenter.spbTooltip', '[id^="spb_suggestion_"]', function() {
            const $el = $(this);
            
            // Debug: Check tooltip state
            const hasTooltipData = $el.data('bs.tooltip');
            const hasTitle = $el.attr('title') || $el.attr('data-original-title');
            console.log(`  🔍 [Delegated] Mouseenter on ${$el.attr('id')}: hasTooltipData=${!!hasTooltipData}, hasTitle=${!!hasTitle}`);
            
            // Check if tooltip is initialized
            if ($el.data('bs.tooltip')) {
                $el.tooltip('show');
                const rmId = $el.attr('id').match(/spb_suggestion_(?:\d+_)?(\d+)/)?.[1];
                console.log(`  ↳ [Delegated] Tooltip shown for element ${$el.attr('id')}, RM ${rmId}`);
            } else {
                // Fallback: If tooltip not initialized but has title attribute, initialize it now
                const title = $el.attr('title') || $el.attr('data-original-title');
                if (title && title.length > 0) {
                    console.warn(`  ⚠️ [Delegated] Tooltip not initialized for ${$el.attr('id')}, initializing now...`);
                    try {
                        $el.tooltip({
                            html: true,
                            sanitize: false,
                            placement: 'top',
                            boundary: 'window',
                            trigger: 'manual',
                            container: 'body'
                        });
                        $el.tooltip('show');
                        console.log(`  ↳ [Delegated] Fallback tooltip shown for ${$el.attr('id')}`);
                    } catch (e) {
                        console.error(`  ❌ [Delegated] Failed to initialize fallback tooltip:`, e);
                    }
                } else {
                    console.warn(`  ⚠️ [Delegated] No tooltip data for ${$el.attr('id')}`);
                }
            }
        });
        
        // Delegate mouseleave event
        $('body').on('mouseleave.spbTooltip', '[id^="spb_suggestion_"]', function() {
            const $el = $(this);
            if ($el.data('bs.tooltip')) {
                $el.tooltip('hide');
                const rmId = $el.attr('id').match(/spb_suggestion_(?:\d+_)?(\d+)/)?.[1];
                console.log(`  ↳ [Delegated] Tooltip hidden for element ${$el.attr('id')}, RM ${rmId}`);
            }
        });
        
        console.log('✅ SPB tooltip event delegation initialized');
    });
    
    function updateSPBTooltipMultiple(rawMaterialId, suggestion, usulanNumber, breakdown, openSPB = null) {
        const tooltipKey = `${rawMaterialId}_${usulanNumber}`;
        
        // Cancel any pending tooltip update for this element
        if (pendingTooltipUpdates[tooltipKey]) {
            clearTimeout(pendingTooltipUpdates[tooltipKey]);
            console.log(`🚫 Cancelled pending tooltip update for ${tooltipKey}`);
        }
        
        console.log(`🔧 updateSPBTooltipMultiple called for RM ${rawMaterialId}, Usulan ${usulanNumber}`);
        
        const spbSuggestionElement = $(`#spb_suggestion_${usulanNumber === 1 ? '' : usulanNumber + '_'}${rawMaterialId}`);
        const mapping = mappingData[rawMaterialId];
        
        if (!mapping || !spbSuggestionElement.length) {
            console.warn(`⚠️ Cannot update tooltip: mapping=${!!mapping}, element.length=${spbSuggestionElement.length}`);
            return;
        }
        
        console.log(`✓ Element found, suggestion.qty=${suggestion.qty}, suggestion.finalQty=${suggestion.finalQty}`);
        
        const forecast = forecastData[rawMaterialId];
        const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
        const isDO = tipeDokumen === 'DO';
        const periodCode = mapping.period_code || mapping.period?.code || 'Periodik';
        const periodCodeLower = periodCode.toLowerCase();
        
        // Get day name for shipment date
        const shipmentDate = suggestion.shipmentDate;
        let shipmentDayName = 'N/A';
        
        // Validate and get day name
        if (shipmentDate && shipmentDate !== 'N/A' && shipmentDate !== null && shipmentDate !== undefined) {
            try {
                shipmentDayName = getDayName(shipmentDate);
            } catch (e) {
                console.warn(`Failed to get day name for date: ${shipmentDate}`, e);
                shipmentDayName = 'N/A';
            }
        }
        
        let tooltipLines = [];
        tooltipLines.push('<div style="text-align:left; min-width:250px;">');
        tooltipLines.push(`<strong>Usulan ${usulanNumber}</strong><br>`);
        tooltipLines.push(`<span style="font-size:14px; font-weight:bold; color:#28a745;">Shipment: ${shipmentDate || 'N/A'} (${shipmentDayName})</span><br>`);
        
        // Only show SPB date if it exists
        if (suggestion.spbDate) {
            tooltipLines.push(`<small class="text-muted">SPB Date: ${suggestion.spbDate}</small><br>`);
        }
        
        tooltipLines.push('<hr style="margin:5px 0">');
        
        // Show calculation breakdown based on tipe_dokumen and period code
        if (isDO) {
            // DO items (DO HARIAN or DO PERIODIK)
            const periodGroup = mapping.period && mapping.period.period_group ? mapping.period.period_group.toUpperCase() : '';
            
            if (periodGroup === 'HARIAN') {
                // DO HARIAN
                const forecastH1 = parseFloat(forecast ? (forecast.h_plus_1 || 0) : 0);
                const forecastH2 = parseFloat(forecast ? (forecast.h_plus_2 || 0) : 0);
                const tsmRaw = tsmData[rawMaterialId];
                const tsm = parseFloat(tsmRaw?.h_plus_2 || tsmRaw || 0);
                const lsmAktual = parseFloat($(`tr[data-raw-material-id="${rawMaterialId}"]`).find('.ending-stock').val()) || 0;
                const openSPBValue = openSPB !== null ? openSPB : (openSPBData[rawMaterialId] || 0);
                
                tooltipLines.push(`<small class="text-muted">DO HARIAN</small><br>`);
                tooltipLines.push(`Forecast H+1: ${forecastH1.toFixed(2)}<br>`);
                tooltipLines.push(`Forecast H+2: ${forecastH2.toFixed(2)}<br>`);
                tooltipLines.push(`TSM H+2: ${tsm.toFixed(2)}<br>`);
                // tooltipLines.push(`<strong>Total: ${(forecastH1 + forecastH2 + tsm).toFixed(2)}</strong><br>`);
                tooltipLines.push(`LSM Aktual: ${lsmAktual.toFixed(2)}<br>`);
                tooltipLines.push(`Open SPB: ${openSPBValue.toFixed(2)}<br>`);
                tooltipLines.push('<hr style="margin:5px 0">');
                tooltipLines.push(`<strong>Saran : ${suggestion.qty.toFixed(2)}</strong> <small style="color:#28a745;">(UM Pakai)</small>`);
            } else {
                // DO PERIODIK
                const lsmAktual = parseFloat($(`tr[data-raw-material-id="${rawMaterialId}"]`).find('.ending-stock').val()) || 0;
                const openSPBValue = openSPB !== null ? openSPB : (openSPBData[rawMaterialId] || 0);
                
                // Calculate total forecast for coverage period
                // suggestion.qty is the final result after subtracting LSM and Open SPB
                // We need to reverse calculate: Total Forecast = suggestion.qty + lsmAktual + openSPBValue
                const totalForecast = suggestion.qty + lsmAktual + openSPBValue;
                
                tooltipLines.push(`<small class="text-muted">DO PERIODIK</small><br>`);
                tooltipLines.push(`Total Fcst (Cvrg): ${totalForecast.toFixed(2)}<br>`);
                tooltipLines.push(`LSM Aktual: ${lsmAktual.toFixed(2)}<br>`);
                tooltipLines.push(`Open SPB: ${openSPBValue.toFixed(2)}<br>`);
                tooltipLines.push('<hr style="margin:5px 0">');
                tooltipLines.push(`<strong>Saran : ${suggestion.qty.toFixed(2)}</strong> <small style="color:#28a745;">(UM Pakai)</small>`);
            }
        } else if (periodCodeLower === 'sayuran') {
            // PR SAYURAN: Cumulative forecast formula
            const dayOffset = suggestion.dayOffset;
            
            // Calculate cumulative forecast
            let cumulativeForecast = 0;
            for (let i = 1; i <= dayOffset; i++) {
                const fcst = forecast[`h_plus_${i}`] || 0;
                cumulativeForecast += fcst;
            }
            
            // Get TSM for the shipment day (H+dayOffset)
            const tsmForDay = tsmData[rawMaterialId] && tsmData[rawMaterialId][`h_plus_${dayOffset}`] 
                ? tsmData[rawMaterialId][`h_plus_${dayOffset}`] 
                : 0;
            
            const lsmAktual = parseFloat($(`tr[data-raw-material-id="${rawMaterialId}"]`).find('.ending-stock').val()) || 0;
            
            // Use Open SPB if provided, otherwise use database value
            const openSPBValue = openSPB !== null ? openSPB : (openSPBData[rawMaterialId] || 0);
            
            tooltipLines.push(`<small class="text-muted">PR SAYURAN</small><br>`);
            tooltipLines.push(`H+1: ${(forecast.h_plus_1 || 0).toFixed(2)}<br>`);
            tooltipLines.push(`H+2: ${(forecast.h_plus_2 || 0).toFixed(2)}<br>`);
            tooltipLines.push(`H+3: ${(forecast.h_plus_3 || 0).toFixed(2)}<br>`);
            tooltipLines.push(`TSM H+${dayOffset}: ${tsmForDay.toFixed(2)}<br>`);
            tooltipLines.push(`<strong>Total Forecast + TSM: ${(cumulativeForecast + tsmForDay).toFixed(2)}</strong><br>`);
            tooltipLines.push(`LSM Aktual: ${lsmAktual.toFixed(2)}<br>`);
            
            // Show Open SPB with source info (always show, even if 0)
            tooltipLines.push(`Open SPB: ${openSPBValue.toFixed(2)}`);
            
            // Show source info
            if (usulanNumber === 1) {
                tooltipLines.push(` <small class="text-muted">(dari DB)</small><br>`);
            } else if (usulanNumber === 2) {
                tooltipLines.push(` <small class="text-muted">(dari Final Qty Usulan 1)</small><br>`);
            } else if (usulanNumber === 3) {
                tooltipLines.push(` <small class="text-muted">(dari Final Qty Usulan 2)</small><br>`);
            } else {
                tooltipLines.push(`<br>`);
            }
            
            tooltipLines.push('<hr style="margin:5px 0">'); 
            tooltipLines.push(`<strong>Saran : ${suggestion.qty.toFixed(2)}</strong> <small style="color:#28a745;">(UM Pakai)</small>`);
        } else {
            // PR PERIODIK: Coverage formula
            const lsmAktual = parseFloat($(`tr[data-raw-material-id="${rawMaterialId}"]`).find('.ending-stock').val()) || 0;
            const openSPBValue = openSPB !== null ? openSPB : (openSPBData[rawMaterialId] || 0);
            
            // Calculate total forecast for coverage period
            // suggestion.qty is the final result after subtracting LSM and Open SPB
            // We need to reverse calculate: Total Forecast = suggestion.qty + lsmAktual + openSPBValue
            const totalForecast = suggestion.qty + lsmAktual + openSPBValue;
            
            tooltipLines.push(`<small class="text-muted">PR PERIODIK (skip holiday saat cari next shipment)</small><br>`);
            tooltipLines.push(`Total Forecast (Coverage): ${totalForecast.toFixed(2)}<br>`);
            tooltipLines.push(`LSM Aktual: ${lsmAktual.toFixed(2)}<br>`);
            tooltipLines.push(`Open SPB: ${openSPBValue.toFixed(2)}<br>`);
            tooltipLines.push('<hr style="margin:5px 0">');
            tooltipLines.push(`<strong>Saran : ${suggestion.qty.toFixed(2)}</strong> <small style="color:#28a745;">(UM Pakai)</small>`);
        }
        
        // Show rounding info if available
        if (suggestion.roundingInfo) {
            const rInfo = suggestion.roundingInfo;
            tooltipLines.push('<hr style="margin:5px 0">');
            tooltipLines.push('<strong>Smart Rounding:</strong><br>');
            tooltipLines.push(`Konv: ${rInfo.raw.toFixed(2)} <small><code>Pakai → Utuh → Kirim</code></small><br>`);
            tooltipLines.push(`ROP(${rInfo.threshold}%) ${rInfo.roundedUp ? '<' : '≥'} Sisa(${rInfo.remainderPercentage.toFixed(1)}%)<br>`);
            tooltipLines.push(`Result: ${rInfo.roundedUp ? 'Round UP' : 'Round DOWN'} → ${suggestion.finalQty}`);
        }
        
        // Show deviasi persentase if user has input value
        const finalQtyInput = $(`#spb_suggestion_qty_final_${usulanNumber === 1 ? '' : usulanNumber + '_'}${rawMaterialId}`);
        if (finalQtyInput.length > 0) {
            const userValue = parseFloat(finalQtyInput.val());
            
            // Get conversion factors
            const conversionUtuhPakai = parseFloat(mapping.conversion_factor_utuh_pakai) || 1;
            const conversionKirimUtuh = parseFloat(mapping.conversion_factor_kirim_utuh);
            const hasKirimConversion = conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh);
            
            // Calculate conversion factor from Kirim to Pakai
            const conversionKirimToPakai = hasKirimConversion ? (conversionKirimUtuh * conversionUtuhPakai) : 1;
            
            // Always show deviasi if user has input value
            if (!isNaN(userValue) && userValue > 0) {
                // Calculate deviasi using original suggestedQty (in Pakai UOM)
                const usulanPakai = userValue * conversionKirimToPakai;
                const hasilPakai = suggestion.qty; // suggestion.qty is in Pakai UOM
                const deviasiPersen = hasilPakai > 0 ? Math.abs(Math.round((usulanPakai / hasilPakai * 100) - 100)) : 0;
                const thresholdPersen = parseFloat(mapping.percentage_spb_over_qty) || 0;
                
                // Always show deviasi info when user has input value
                tooltipLines.push(`<hr style="margin:5px 0">`);
                tooltipLines.push(`<small class="text-muted"><strong>Validasi Deviasi:</strong></small><br>`);
                tooltipLines.push(`<small>Input Saran: <strong>${userValue.toFixed(2)} ${mapping.uom_kirim}</strong> = ${usulanPakai.toFixed(2)} ${mapping.uom_pakai || 'Pakai'}</small><br>`);
                // tooltipLines.push(`<small>Hasil Sistem: <strong>${hasilPakai.toFixed(2)} ${mapping.uom_pakai || 'Pakai'}</strong></small><br>`);
                
                if (deviasiPersen > thresholdPersen) {
                    tooltipLines.push(`<small class="text-danger"><i class="fas fa-exclamation-triangle"></i> Deviasi: <strong>${deviasiPersen}%</strong> > Threshold ${thresholdPersen}%</small><br>`);
                    tooltipLines.push(`<small class="text-danger">→ Wajib pilih alasan</small><br>`);
                } else {
                    tooltipLines.push(`<small class="text-success"><i class="fas fa-check-circle"></i> Deviasi: <strong>${deviasiPersen}%</strong> ≤ Threshold ${thresholdPersen}%</small><br>`);
                    tooltipLines.push(`<small class="text-success">→ Tidak perlu alasan</small><br>`);
                }
            }
        }
        
        tooltipLines.push('</div>');
        
        const tooltipContent = tooltipLines.join('');
        
        // IMPORTANT: Re-select element after HTML replacement
        // The element reference from function parameter might be stale after parentTd.html() call
        const freshElement = $(`#spb_suggestion_${usulanNumber === 1 ? '' : usulanNumber + '_'}${rawMaterialId}`);
        
        if (freshElement.length === 0) {
            console.warn(`⚠️ Cannot find element to attach tooltip: spb_suggestion_${usulanNumber === 1 ? '' : usulanNumber + '_'}${rawMaterialId}`);
            return;
        }
        
        console.log(`✓ Fresh element found, attaching tooltip...`);
        
        // Completely destroy any existing tooltip instance
        try {
            if (freshElement.data('bs.tooltip')) {
                freshElement.tooltip('dispose');
                console.log(`  ↳ Disposed old tooltip`);
            }
        } catch (e) {
            console.warn(`  ⚠️ Error disposing tooltip:`, e);
        }
        
        // Remove all tooltip-related attributes and classes to start fresh
        freshElement.removeAttr('data-placement');
        freshElement.removeAttr('data-html');
        freshElement.removeAttr('data-original-title');
        freshElement.removeAttr('title');
        freshElement.removeAttr('aria-describedby');
        freshElement.removeClass('tooltip');
        
        // Remove any orphaned tooltip elements
        $(`.tooltip[aria-describedby*="spb_suggestion"]`).remove();
        
        // Increase delay to ensure cleanup is complete and DOM is fully updated
        setTimeout(() => {
            // Re-select element again to ensure it's the freshest reference
            const finalElement = $(`#spb_suggestion_${usulanNumber === 1 ? '' : usulanNumber + '_'}${rawMaterialId}`);
            
            if (finalElement.length === 0) {
                console.warn(`⚠️ Final element not found after delay`);
                return;
            }
            
            // Set tooltip attributes (but NOT data-toggle to avoid global dispose)
            finalElement.attr('data-placement', 'top');
            finalElement.attr('data-html', 'true');
            finalElement.attr('title', tooltipContent);
            finalElement.css('cursor', 'help');
            
            // Initialize Bootstrap tooltip
            try {
                finalElement.tooltip({
                    html: true,
                    sanitize: false,
                    placement: 'top',
                    boundary: 'window',
                    trigger: 'manual', // Use 'manual' trigger, controlled by delegated events
                    container: 'body'
                });
                
                // Verify tooltip was initialized
                const tooltipData = finalElement.data('bs.tooltip');
                if (tooltipData) {
                    console.log(`✅ Tooltip initialized for RM ${rawMaterialId}, Usulan ${usulanNumber} (controlled by delegated events)`);
                    
                    // IMPORTANT: Force update tooltip instance to ensure it's ready
                    // This fixes the issue where tooltip doesn't show on first hover after recalculation
                    try {
                        finalElement.tooltip('update');
                        console.log(`  ↳ Tooltip instance updated and ready`);
                        
                        // Debug: Verify tooltip is still there after delays
                        setTimeout(() => {
                            const stillHasTooltip = finalElement.data('bs.tooltip');
                            console.log(`  🔍 [Debug] Tooltip check after 50ms: ${!!stillHasTooltip}`);
                            if (!stillHasTooltip) {
                                console.error(`  ❌ [Debug] Tooltip was disposed by something after 50ms!`);
                            }
                        }, 50);
                        
                        setTimeout(() => {
                            const stillHasTooltip = finalElement.data('bs.tooltip');
                            console.log(`  🔍 [Debug] Tooltip check after 200ms: ${!!stillHasTooltip}`);
                            if (!stillHasTooltip) {
                                console.error(`  ❌ [Debug] Tooltip was disposed by something after 200ms!`);
                            }
                        }, 200);
                        
                        setTimeout(() => {
                            const stillHasTooltip = finalElement.data('bs.tooltip');
                            console.log(`  🔍 [Debug] Tooltip check after 500ms: ${!!stillHasTooltip}`);
                            if (!stillHasTooltip) {
                                console.error(`  ❌ [Debug] Tooltip was disposed by something after 500ms!`);
                                console.warn(`  🔄 [Debug] Re-initializing tooltip...`);
                                
                                // Re-initialize tooltip
                                try {
                                    finalElement.tooltip({
                                        html: true,
                                        sanitize: false,
                                        placement: 'top',
                                        boundary: 'window',
                                        trigger: 'manual',
                                        container: 'body'
                                    });
                                    finalElement.tooltip('update');
                                    console.log(`  ✅ [Debug] Tooltip re-initialized successfully`);
                                } catch (e) {
                                    console.error(`  ❌ [Debug] Failed to re-initialize tooltip:`, e);
                                }
                            }
                        }, 500);
                        
                        setTimeout(() => {
                            const stillHasTooltip = finalElement.data('bs.tooltip');
                            console.log(`  🔍 [Debug] Tooltip check after 1000ms: ${!!stillHasTooltip}`);
                            if (!stillHasTooltip) {
                                console.error(`  ❌ [Debug] Tooltip was disposed by something after 1000ms!`);
                            }
                        }, 1000);
                    } catch (updateError) {
                        console.warn(`  ⚠️ Could not update tooltip instance:`, updateError);
                    }
                } else {
                    console.warn(`⚠️ Tooltip init failed for RM ${rawMaterialId}, Usulan ${usulanNumber}`);
                }
                
            } catch (e) {
                console.error(`❌ Error attaching tooltip:`, e);
            }
        }, 100); // Increased from 10ms to 100ms
    }
    
    /**
     * Update only the deviasi section of tooltip (for real-time update during input)
     * This is more efficient than rebuilding entire tooltip
     * 
     * @param {jQuery} spbSuggestionElement - The SPB suggestion span element
     * @param {number} userValue - User input value (in Kirim UOM)
     * @param {number} systemValue - System calculated value (in Kirim UOM)
     * @param {number} usulanPakai - User value converted to Pakai UOM
     * @param {number} hasilPakai - System calculation in Pakai UOM
     * @param {number} deviasiPersen - Deviasi percentage
     * @param {number} thresholdPersen - Threshold percentage
     * @param {object} mapping - Mapping data
     */
    function updateTooltipDeviasiOnly(spbSuggestionElement, userValue, systemValue, usulanPakai, hasilPakai, deviasiPersen, thresholdPersen, mapping) {
        // Get current tooltip content
        const currentTooltip = spbSuggestionElement.attr('data-original-title');
        
        if (!currentTooltip) {
            return; // No tooltip yet, skip
        }
        
        // Remove old deviasi section if exists
        let newTooltip = currentTooltip;
        const deviasiStartIndex = newTooltip.indexOf('<hr style="margin:5px 0"><small class="text-muted"><strong>Validasi Deviasi:</strong></small>');
        
        if (deviasiStartIndex > -1) {
            // Remove everything from deviasi section to end (before closing </div>)
            const beforeDeviasi = newTooltip.substring(0, deviasiStartIndex);
            newTooltip = beforeDeviasi;
        } else {
            // Remove closing </div> to add deviasi section
            newTooltip = newTooltip.replace('</div>', '');
        }
        
        // Determine if reason is required
        let requireReason = false;
        let reasonText = '';
        
        // Only check deviasi persentase (removed check for input > saran)
        if (deviasiPersen > thresholdPersen) {
            requireReason = true;
            reasonText = `Deviasi ${deviasiPersen}% > Threshold ${thresholdPersen}%`;
        }
        
        // Build new deviasi section
        let deviasiLines = [];
        deviasiLines.push(`<hr style="margin:5px 0">`);
        deviasiLines.push(`<small class="text-muted"><strong>Validasi Deviasi:</strong></small><br>`);
        deviasiLines.push(`<small>Input User: <strong>${userValue.toFixed(2)} ${mapping.uom_kirim}</strong> = ${usulanPakai.toFixed(2)} ${mapping.uom_pakai || 'Pakai'}</small><br>`);
        // deviasiLines.push(`<small>Hasil Sistem: <strong>${hasilPakai.toFixed(2)} ${mapping.uom_pakai || 'Pakai'}</strong></small><br>`);
        
        if (requireReason) {
            deviasiLines.push(`<small class="text-danger"><i class="fas fa-exclamation-triangle"></i> ${reasonText}</small><br>`);
            deviasiLines.push(`<small class="text-danger">→ Wajib pilih alasan</small><br>`);
        } else {
            deviasiLines.push(`<small class="text-success"><i class="fas fa-check-circle"></i> Deviasi: <strong>${deviasiPersen}%</strong> ≤ Threshold ${thresholdPersen}%</small><br>`);
            deviasiLines.push(`<small class="text-success">→ Tidak perlu alasan</small><br>`);
        }
        
        // Add closing div
        deviasiLines.push('</div>');
        
        // Combine and update tooltip
        newTooltip += deviasiLines.join('');
        spbSuggestionElement.attr('data-original-title', newTooltip);
        
        // Refresh tooltip if it's currently shown
        if (spbSuggestionElement.data('bs.tooltip')) {
            const tooltip = spbSuggestionElement.data('bs.tooltip');
            if (tooltip.tip && tooltip.tip.classList.contains('show')) {
                // Tooltip is visible, update it
                spbSuggestionElement.tooltip('dispose');
                spbSuggestionElement.tooltip({
                    html: true,
                    sanitize: false,
                    placement: 'top',
                    boundary: 'window',
                    trigger: 'hover'
                });
                spbSuggestionElement.tooltip('show');
            }
        }
    }
    
    /**
     * Update FSTR indicator tooltip with breakdown of contributions
     * Shows detailed breakdown of FSTR contributions to qty_pakai
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} manualQtyPakai - Manually input qty_pakai
     * @param {Object} fstrBreakdown - Object with FSTR ID as key and contribution as value
     * 
     * Requirements: 23.1, 23.4, 23.5
     */
    function updateFSTRTooltip(rawMaterialId, manualQtyPakai, fstrBreakdown, conversionFactorFstrToItem = 1, fstrContributionConverted = 0) {
        const indicator = $(`#fstr_indicator_${rawMaterialId}`);
        
        if (!indicator.length) {
            return;
        }
        
        // Check if there are any FSTR contributions
        const hasFSTRContributions = Object.keys(fstrBreakdown).length > 0;
        
        if (!hasFSTRContributions) {
            // Hide indicator if no FSTR contributions
            indicator.hide();
            return;
        }
        
        // Show indicator
        indicator.show();
        
        // Build tooltip content
        let tooltipContent = '<div class="text-left" style="max-width: 300px;">';
        tooltipContent += '<strong>Breakdown Qty Pakai:</strong><br>';
        tooltipContent += '<table class="table table-sm table-borderless mb-0" style="font-size: 0.85rem;">';
        
        // Add manual input row
        tooltipContent += `<tr>
            <td class="text-muted">Manual Input:</td>
            <td class="text-right"><strong>${manualQtyPakai.toFixed(2)}</strong></td>
        </tr>`;
        
        // Add FSTR contribution rows
        let totalFSTRContribution = 0;
        for (const [fstrId, contribution] of Object.entries(fstrBreakdown)) {
            const fstrRow = $(`.fstr-subline[data-fstr-id="${fstrId}"][data-parent-id="${rawMaterialId}"]`);
            const fstrCode = fstrRow.find('strong').first().text() || `FSTR ${fstrId}`;
            const componentQty = parseFloat(fstrRow.data('component-qty')) || 0;
            const fstrQtyPakai = parseFloat(fstrRow.find('input[name^="fstr_qty_pakai"]').val()) || 0;
            
            tooltipContent += `<tr>
                <td class="text-info">
                    <i class="fas fa-layer-group"></i> ${fstrCode}:
                    <br><small class="text-muted">(${fstrQtyPakai.toFixed(2)} × ${componentQty.toFixed(5)})</small>
                </td>
                <td class="text-right text-info"><strong>+${contribution.toFixed(2)}</strong></td>
            </tr>`;
            
            totalFSTRContribution += contribution;
        }
        
        // Add separator
        tooltipContent += '<tr><td colspan="2"><hr class="my-1"></td></tr>';
        
        // Add total row
        const totalQtyPakai = manualQtyPakai + totalFSTRContribution;
        tooltipContent += `<tr>
            <td><strong>Total Qty Pakai:</strong></td>
            <td class="text-right"><strong>${totalQtyPakai.toFixed(2)}</strong></td>
        </tr>`;
        
        tooltipContent += '</table></div>';
        
        // Update tooltip
        indicator.attr('data-original-title', tooltipContent);
        
        // Reinitialize tooltip if already initialized
        if (indicator.data('bs.tooltip')) {
            indicator.tooltip('dispose');
        }
        indicator.tooltip({
            html: true,
            placement: 'top',
            trigger: 'hover'
        });
        
        // Removed verbose log for cleaner output
    }
    
    /**
     * Update FSTR indicator icon visibility and style
     * Shows/hides icon based on whether qty_pakai is affected by FSTR
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {boolean} hasManualInput - Whether there's manual input
     * @param {boolean} hasFSTRContribution - Whether there's FSTR contribution
     * 
     * Requirements: 23.2, 23.3
     */
    function updateFSTRIndicator(rawMaterialId, hasManualInput, hasFSTRContribution) {
        const indicator = $(`#fstr_indicator_${rawMaterialId}`);
        
        if (!indicator.length) {
            return;
        }
        
        if (!hasFSTRContribution) {
            // No FSTR contribution - hide indicator
            indicator.hide();
            return;
        }
        
        // Show indicator
        indicator.show();
        
        // Update icon based on input type
        const icon = indicator.find('i');
        
        if (hasManualInput && hasFSTRContribution) {
            // Both manual and FSTR - show combined icon
            icon.removeClass('fa-layer-group fa-calculator')
                .addClass('fa-layer-group')
                .removeClass('text-info text-warning')
                .addClass('text-info');
            indicator.attr('title', 'Qty Pakai terpengaruh oleh input FSTR');
        } else if (hasFSTRContribution) {
            // Only FSTR contribution - show FSTR icon
            icon.removeClass('fa-layer-group fa-calculator')
                .addClass('fa-layer-group')
                .removeClass('text-info text-warning')
                .addClass('text-warning');
            indicator.attr('title', 'Qty Pakai sepenuhnya dari FSTR');
        }
        
        // console.log(`FSTR indicator updated for RM ${rawMaterialId}:`, {
        //     hasManualInput,
        //     hasFSTRContribution,
        //     visible: indicator.is(':visible')
        // });
    }
    
    /**
     * Main orchestrator function for SPB suggestion calculation
     * Coordinates all calculation steps and updates display
     * Optimized with caching for better performance
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {boolean} forceRecalculate - Force recalculation even if cached
     * 
     * Requirements: 2.4, 2.5, 7.1, 7.2, 7.3, 15.2
     */
    function calculateSPBSuggestion(rawMaterialId, forceRecalculate = false, skipResetForUsulan = null) {
        const calcStartTime = performance.now();
     
        
        try {
            // Check cache first (unless forced to recalculate)
            if (!forceRecalculate) {
                const cached = getCachedResult(rawMaterialId);
                if (cached) {
                   
                    
                    // Update display with cached values
                    // Check if cached result has suggestions array (new format) or single values (old format)
                    if (cached.suggestions !== undefined) {
                        // New format with multiple suggestions
                       
                        updateDisplayMultipleSuggestions(rawMaterialId, cached.lsmAktual, cached.doi, cached.suggestions, cached.breakdown);
                    } else {
                        // Old format with single suggestion - convert to array format
                       
                        const suggestions = cached.finalQty && cached.finalQty !== '-' && cached.finalQty !== 'X' 
                            ? [{
                                usulan: 1,
                                qty: cached.suggestedQty,
                                finalQty: cached.finalQty,
                                shipmentDate: null,
                                spbDate: null,
                                dayOffset: 2
                            }]
                            : [];
                        updateDisplayMultipleSuggestions(rawMaterialId, cached.lsmAktual, cached.doi, suggestions, cached.breakdown);
                    }
                    
                    // Record performance (cache hit is very fast)
                    const calcDuration = performance.now() - calcStartTime;
                    performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
                    
                    return;
                }               
               
            } 
            
            // Get mapping data - Requirements: 14.3
            const mapping = mappingData[rawMaterialId];
            if (!mapping || !mapping.spb_flag) {
                // Show "X" in SPB columns for items without mapping
                updateDisplayMultipleSuggestions(rawMaterialId, []);
                return;
            }
            
            // Find the row for this raw material
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            if (row.length === 0) {
                printWarn('⚠️ Row not found for raw material:', rawMaterialId);
                return;
            }
            
            // 1. Get current values
            const qtyUtuh = parseFloat(row.find('.qty-utuh').val()) || 0;
            const manualQtyPakai = parseFloat(row.find('.qty-pakai').val()) || 0;
            const conversionFactor = parseFloat(mapping.conversion_factor_utuh_pakai);
            
            // Handle invalid conversion factors - Requirements: 14.1, 14.2
            if (!conversionFactor || conversionFactor === 0 || isNaN(conversionFactor)) {
                printError(`❌ Invalid conversion_factor_utuh_pakai untuk raw material ${rawMaterialId}:`, conversionFactor);
                showConversionWarning(rawMaterialId, 'Konversi tidak valid');
                updateDisplayMultipleSuggestions(rawMaterialId, []);
                return;
            }
            
            // Add FSTR contribution to qty_pakai (Requirements: 22.1)
            const fstrResult = calculateFSTRContribution(rawMaterialId);
            let fstrContribution = fstrResult.total; // Sudah dalam decimal 4 dari perhitungan FSTR
            const fstrBreakdown = fstrResult.breakdown;
            
            // Apply conversion_factor_to_item to FSTR contribution
            // This converts FSTR summary qty to ending stock item qty
            // Formula: fstrContribution / conversion_factor_to_item
            // Keep 4 decimals during calculation, round to 2 decimals before adding to ending stock
            const conversionFactorFstrToItem = parseFloat(mapping.conversion_factor_to_item) || 1;
            const fstrContributionConverted = parseFloat((fstrContribution / conversionFactorFstrToItem).toFixed(2));
            
            printLog(`🔢 RM ${rawMaterialId} FSTR conversion: ${fstrContribution.toFixed(5)} ÷ ${conversionFactorFstrToItem} = ${fstrContributionConverted.toFixed(2)}`);
            
            const qtyPakai = manualQtyPakai + fstrContributionConverted;
            
            // Update item_olahan (item_olahan adalah total dari FSTR contribution sebelum konversi)
            const itemOlahan = fstrContribution;
            
            // Update FSTR indicator and tooltip (Requirements: 23.1, 23.2, 23.3, 23.4, 23.5)
            const hasManualInput = manualQtyPakai > 0;
            const hasFSTRContribution = fstrContribution > 0;
            updateFSTRIndicator(rawMaterialId, hasManualInput, hasFSTRContribution);
            updateFSTRTooltip(rawMaterialId, manualQtyPakai, fstrBreakdown, conversionFactorFstrToItem, fstrContributionConverted);
            
            // console.log(`RM ${rawMaterialId} qty_pakai calculation:`, {
            //     manualQtyPakai,
            //     fstrContribution,
            //     totalQtyPakai: qtyPakai,
            //     fstrBreakdown
            // });
            
            // 2. Calculate LSM Aktual
            // Formula: (qty_utuh × conversion_factor_utuh_pakai) + qty_pakai
            // Note: qty_pakai sudah termasuk fstrContribution, dan item_olahan hanya untuk tracking
            const lsmAktual = calculateLSMAktual(qtyUtuh, qtyPakai, 0, conversionFactor);
            
            // Update hidden input item_olahan (untuk tracking saja, tidak dipakai dalam perhitungan LSM Aktual)
            row.find('.item-olahan-input').val(itemOlahan.toFixed(2));
            
            // 3. Calculate DOI - Requirements: 14.4
            const forecast = forecastData[rawMaterialId];
            if (!forecast || !forecast.average) {
                printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada data forecast`);
                // Show DOI = 0 and SPB suggestion = 0 when no forecast
                updateDisplayWithNoForecast(rawMaterialId, lsmAktual);
                return;
            }
            
            const forecastAverage = forecast.average || 0;
            const doi = calculateDOI(lsmAktual, forecastAverage);
            
            // 4. Check shipment schedule (pass mapping for period_id filter)
            const hasShipment = checkShipmentSchedule(rawMaterialId, mapping.tipe_dokumen, mapping);
            
            // If no shipment schedule → show "X" (cannot order)
            if (!hasShipment) {
                printLog(`❌ RM ${rawMaterialId}: SPB tidak muncul - Tidak ada Shipment (${mapping.tipe_dokumen})`);
                
                const result = { lsmAktual, doi, suggestedQty: 0, finalQty: '-' };
                setCachedResult(rawMaterialId, result);
                
                // Show "X" for all columns with warning badge in usulan 1
                const breakdown = {
                    lsm: {
                        qtyConverted: qtyUtuh * conversionFactor,
                        qtyPakai: qtyPakai,
                        itemOlahan: itemOlahan,
                        conversionFactor: conversionFactorFstrToItem
                    },
                    doi: {
                        lsmAktual: lsmAktual,
                        forecastAverage: forecastAverage
                    }
                };
                updateDisplayMultipleSuggestions(rawMaterialId, lsmAktual, doi, [], breakdown);
                
                // Show user-friendly message in SPB column usulan 1
                const spbElement = $(`#spb_suggestion_${rawMaterialId}`);
                if (spbElement.length > 0) {
                    const tipeDok = mapping.tipe_dokumen;
                    const missingData = tipeDok === 'DO' ? 'Shipment Delivery' : 'Shipment Supplier';
                    spbElement.html(`<span class="badge badge-warning" title="Data master ${missingData} belum di-setup"><i class="fas fa-exclamation-triangle"></i> No Schedule</span>`);
                }
                
                // Record performance
                const calcDuration = performance.now() - calcStartTime;
                performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
                
                return;
            }
            
            // 5. Calculate suggested qty (already includes LSM Aktual subtraction)
            // For PR items: get multiple suggestions (up to 3)
            // For DO items: get single suggestion
            const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
            let suggestions = [];
            
            if (tipeDokumen === 'PR') {
                // PR items: calculate multiple suggestions
                suggestions = calculateMultipleSPBSuggestions(rawMaterialId, mapping, lsmAktual);
                
                if (suggestions.length === 0) {
                    const result = { lsmAktual, doi, suggestedQty: 0, finalQty: '-' };
                    setCachedResult(rawMaterialId, result);
                    
                    // Show "X" for all 3 usulan columns
                    const breakdown = {
                        lsm: {
                            qtyConverted: qtyUtuh * conversionFactor,
                            qtyPakai: qtyPakai,
                            itemOlahan: itemOlahan,
                            conversionFactor: conversionFactorFstrToItem
                        },
                        doi: {
                            lsmAktual: lsmAktual,
                            forecastAverage: forecastAverage
                        }
                    };
                    updateDisplayMultipleSuggestions(rawMaterialId, lsmAktual, doi, [], breakdown);
                    
                    const calcDuration = performance.now() - calcStartTime;
                    performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
                    return;
                }
            } else {
                // DO items: single suggestion
                const suggestedQty = calculateSuggestedQty(rawMaterialId, mapping, lsmAktual);
                
                // suggestedQty = -1 means no shipment schedule (H+2 not a delivery day)
                // suggestedQty >= 0 means calculation succeeded (even if result is 0)
                if (suggestedQty >= 0) {
                    suggestions = [{
                        usulan: 1,
                        qty: suggestedQty,
                        shipmentDate: addDays(soDate, 2),
                        spbDate: addDays(soDate, 1),
                        dayOffset: 2
                    }];
                }
                // If suggestedQty = -1, suggestions array stays empty → will show "-"
            }
            
            // If no suggestions, show "X"
            if (suggestions.length === 0) {
                const result = { lsmAktual, doi, suggestedQty: 0, finalQty: '-' };
                setCachedResult(rawMaterialId, result);
                
                // Show "X" for all columns
                const breakdown = {
                    lsm: {
                        qtyConverted: qtyUtuh * conversionFactor,
                        qtyPakai: qtyPakai,
                        itemOlahan: itemOlahan,
                        conversionFactor: conversionFactorFstrToItem
                    },
                    doi: {
                        lsmAktual: lsmAktual,
                        forecastAverage: forecastAverage
                    }
                };
                updateDisplayMultipleSuggestions(rawMaterialId, lsmAktual, doi, [], breakdown);
                
                const calcDuration = performance.now() - calcStartTime;
                performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
                return;
            }
            
            // 6. Convert each suggestion to UOM Kirim with smart rounding
            // Apply order constraints AFTER conversion
            const processedSuggestions = [];
            
            for (let suggestion of suggestions) {
                let finalQty = suggestion.qty;
                let finalQtyKirim = finalQty;
                let roundingInfo = null;
                const conversionKirimUtuh = parseFloat(mapping.conversion_factor_kirim_utuh);
                
                if (conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh)) {
                    // Step 1: Convert from Pakai to Utuh
                    const finalQtyUtuh = finalQty / conversionFactor;
                    
                    // Step 2: Convert from Utuh to Kirim with smart rounding
                    const qtyKirimRaw = finalQtyUtuh / conversionKirimUtuh;
                    
                    // Get percentage_spb_rop for rounding logic
                    const rmRow = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
                    const percentageSpbRop = parseFloat(rmRow.data('percentage-spb-rop')) || 0;
                    
                    // Smart rounding logic
                    const qtyKirimInteger = Math.floor(qtyKirimRaw);
                    const remainder = qtyKirimRaw - qtyKirimInteger;
                    const remainderPercentage = remainder * 100;
                    
                    // Store rounding info for tooltip
                    roundingInfo = {
                        raw: qtyKirimRaw,
                        integer: qtyKirimInteger,
                        remainder: remainder,
                        remainderPercentage: remainderPercentage,
                        threshold: percentageSpbRop,
                        roundedUp: remainderPercentage >= percentageSpbRop
                    };
                    
                    if (remainderPercentage >= percentageSpbRop) {
                        finalQtyKirim = Math.ceil(qtyKirimRaw);
                    } else {
                        finalQtyKirim = Math.floor(qtyKirimRaw);
                    }
                } else {
                    // No conversion needed - use Utuh UOM
                    finalQtyKirim = Math.round(finalQty / conversionFactor);
                }
                
                // 7. Apply order constraints (minimal_order and multiple_order)
                finalQtyKirim = applyOrderConstraints(finalQtyKirim, mapping);
                
                processedSuggestions.push({
                    ...suggestion,
                    finalQty: finalQtyKirim,
                    roundingInfo: roundingInfo
                });
            }
            
            // 8. Cache result with all suggestions
            const firstSuggestion = processedSuggestions[0];
            const result = {
                lsmAktual,
                doi,
                suggestedQty: firstSuggestion.qty,
                finalQty: firstSuggestion.finalQty,
                finalQtyPakai: firstSuggestion.qty,
                suggestions: processedSuggestions, // Store all suggestions for cache
                breakdown: {
                    lsm: {
                        qtyConverted: qtyUtuh * conversionFactor,
                        qtyPakai: qtyPakai,
                        itemOlahan: itemOlahan,
                        conversionFactor: conversionFactorFstrToItem
                    },
                    doi: {
                        lsmAktual: lsmAktual,
                        forecastAverage: forecastAverage
                    },
                    spb: {
                        hasilPakai: firstSuggestion.qty // Store hasil SPB dalam UOM Pakai untuk validasi deviasi
                    },
                    suggestions: processedSuggestions // Pass all suggestions
                }
            };
            
          
            
            setCachedResult(rawMaterialId, result);
            
            // 9. Update display with all suggestions
            updateDisplayMultipleSuggestions(rawMaterialId, lsmAktual, doi, processedSuggestions, result.breakdown, skipResetForUsulan);
            
            // Record performance
            const calcDuration = performance.now() - calcStartTime;
            performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
            
        } catch (error) {
            // General error handling - Requirements: 14.5
            printError(`❌ Error calculating SPB suggestion for raw material ${rawMaterialId}:`, error);
            
            // Log error to Laravel backend
            logErrorToBackend('calculateSPBSuggestion', {
                raw_material_id: rawMaterialId,
                error_message: error.message,
                error_stack: error.stack
            });
            
            // Show "X" in all SPB columns when error occurs
            const breakdown = {
                lsm: { qtyConverted: 0, qtyPakai: 0, itemOlahan: 0, conversionFactor: 1 },
                doi: { lsmAktual: 0, forecastAverage: 0 }
            };
            updateDisplayMultipleSuggestions(rawMaterialId, 0, 0, [], breakdown);
            
            // Record performance even on error
            const calcDuration = performance.now() - calcStartTime;
            performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
        }
    }
    
    // ========================================
    // End SPB Suggestion Calculation Functions
    // ========================================
    
    // ========================================
    // Event Handlers for SPB Suggestions
    // ========================================
    
    /**
     * Reset all SPB usulan to system values and clear reasons
     * Called when qty_pakai or qty_utuh changes (LSM changes)
     * 
     * @param {number} rawMaterialId - Raw material ID
     */
    function resetAllSPBUsulan(rawMaterialId) {
        printLog(`🔄 Resetting all SPB usulan untuk RM ${rawMaterialId}...`);
        
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        
        // Check if row exists (might be FSTR ID instead of raw material ID)
        if (row.length === 0) {
            printLog(`⚠️ Row tidak ditemukan untuk RM ${rawMaterialId} - skip reset (mungkin FSTR ID)`);
            return;
        }
        
        const soDetailId = row.find('.autosave-field').first().data('so-detail-id');
        
        if (!soDetailId) {
            printWarn(`⚠️ SO detail ID tidak ditemukan untuk RM ${rawMaterialId}`);
            return;
        }
        
        // Reset usulan 1
        const finalQtyInput1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
        const reasonInput1 = $(`#spb_over_reason_id_${rawMaterialId}`);
        const reasonBtn1 = $(`#spb_over_reason_btn_${rawMaterialId}`);
        
        if (finalQtyInput1.length) {
            finalQtyInput1.val(''); // Will be filled by calculateSPBSuggestion
            finalQtyInput1.data('user-edited', false);
            finalQtyInput1.removeClass('border-warning');
            finalQtyInput1.removeAttr('title');
        }
        
        if (reasonInput1.length) {
            reasonInput1.val('');
        }
        
        if (reasonBtn1.length) {
            reasonBtn1.hide();
            reasonBtn1.removeClass('btn-success').addClass('btn-danger');
            reasonBtn1.html('<i class="fas fa-exclamation-triangle"></i>');
            reasonBtn1.attr('title', 'Alasan wajib dipilih');
        }
        
        // Reset usulan 2
        const finalQtyInput2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`);
        const reasonInput2 = $(`#spb_over_reason_id_2_${rawMaterialId}`);
        const reasonBtn2 = $(`#spb_over_reason_btn_2_${rawMaterialId}`);
        
        if (finalQtyInput2.length) {
            finalQtyInput2.val('');
            finalQtyInput2.data('user-edited', false);
            finalQtyInput2.removeClass('border-warning');
            finalQtyInput2.removeAttr('title');
        }
        
        if (reasonInput2.length) {
            reasonInput2.val('');
        }
        
        if (reasonBtn2.length) {
            reasonBtn2.hide();
            reasonBtn2.removeClass('btn-success').addClass('btn-danger');
            reasonBtn2.html('<i class="fas fa-exclamation-triangle"></i>');
            reasonBtn2.attr('title', 'Alasan wajib dipilih');
        }
        
        // Reset usulan 3
        const finalQtyInput3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`);
        const reasonInput3 = $(`#spb_over_reason_id_3_${rawMaterialId}`);
        const reasonBtn3 = $(`#spb_over_reason_btn_3_${rawMaterialId}`);
        
        if (finalQtyInput3.length) {
            finalQtyInput3.val('');
            finalQtyInput3.data('user-edited', false);
            finalQtyInput3.removeClass('border-warning');
            finalQtyInput3.removeAttr('title');
        }
        
        if (reasonInput3.length) {
            reasonInput3.val('');
        }
        
        if (reasonBtn3.length) {
            reasonBtn3.hide();
            reasonBtn3.removeClass('btn-success').addClass('btn-danger');
            reasonBtn3.html('<i class="fas fa-exclamation-triangle"></i>');
            reasonBtn3.attr('title', 'Alasan wajib dipilih');
        }
        
        // Clear from session storage
        sessionStorage.removeItem(`final_qty_${rawMaterialId}`);
        sessionStorage.removeItem(`spb_over_reason_${rawMaterialId}`);
        sessionStorage.removeItem(`final_qty_2_${rawMaterialId}`);
        sessionStorage.removeItem(`spb_over_reason_2_${rawMaterialId}`);
        sessionStorage.removeItem(`final_qty_3_${rawMaterialId}`);
        sessionStorage.removeItem(`spb_over_reason_3_${rawMaterialId}`);
        
        // Clear from spbOverReasonData
        delete spbOverReasonData[rawMaterialId];
        delete spbOverReasonData[`${rawMaterialId}_2`];
        delete spbOverReasonData[`${rawMaterialId}_3`];
        
        printLog(`✅ All SPB usulan reset untuk RM ${rawMaterialId}`);
        
        // REMOVED: AJAX call to reset SPB fields in database
        // Reason: This causes duplicate AJAX requests (reset + autosave)
        // The autosave triggered by change event will handle clearing SPB fields
        // when calculateSPBSuggestion updates the display with new values
    }
    
    /**
     * Event handler for qty_utuh and qty_pakai input changes
     * Triggers SPB suggestion calculation when user changes quantities
     * Optimized with debouncing to reduce calculation frequency
     * 
     * Requirements: 7.1, 12.1, 15.2
     */
    function attachSPBEventHandlers() {
        // Track if user is actively typing (to differentiate from page load)
        let userIsTyping = {};
        // Track if calculation is needed (set by input, executed by blur)
        let calculationNeeded = {};
        
        // Listen to focus events to mark that user is interacting
        $(document).on('focus', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            if (rawMaterialId) {
                userIsTyping[rawMaterialId] = true;
                console.log('🎯 Focus on RM', rawMaterialId);
            }
        });
        
        // Listen to input events - ONLY mark for calculation, don't calculate yet
        $(document).on('input', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            
            if (rawMaterialId) {
                // Mark that calculation is needed
                calculationNeeded[rawMaterialId] = true;
                console.log('⌨️ Input event for RM', rawMaterialId, '- marked for calculation');
                
                // Clear any existing debounce timer
                if (debounceTimers[rawMaterialId]) {
                    clearTimeout(debounceTimers[rawMaterialId]);
                    delete debounceTimers[rawMaterialId];
                }
                
                // Set debounce timer - will only execute if user stops typing for 300ms
                // This handles case where user types but doesn't blur (e.g., clicks elsewhere)
                debounceTimers[rawMaterialId] = setTimeout(() => {
                    if (calculationNeeded[rawMaterialId]) {
                        console.log('⏰ Debounce timeout: Calculating for RM', rawMaterialId);
                        if (userIsTyping[rawMaterialId]) {
                            resetAllSPBUsulan(rawMaterialId);
                        }
                        calculateSPBSuggestion(rawMaterialId, true);
                        calculationNeeded[rawMaterialId] = false;
                    }
                }, 300);
            }
        });
        
        // REMOVED: change event handler for qty-utuh and qty-pakai
        // Reason: These fields also have .autosave-field class which already handles change event
        // Having both causes duplicate autosave requests
        // The autosave-field change handler will trigger calculateSPBSuggestion after save
        
        // Clear typing flag on blur (when user leaves the field)
        $(document).on('blur', '.qty-utuh, .qty-pakai', function() {
            const field = $(this);
            const row = field.closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            
            if (rawMaterialId) {
                console.log('� Blur event for RM', rawMaterialId);
                
                // Store current value before calculation
                const valueBeforeCalc = field.val();
                
                // Clear any pending debounced calculation
                if (debounceTimers[rawMaterialId]) {
                    clearTimeout(debounceTimers[rawMaterialId]);
                    delete debounceTimers[rawMaterialId];
                    console.log('🚫 Cancelled debounce timer for RM', rawMaterialId);
                }
                
                // ONLY calculate if calculation is needed (user typed something)
                if (calculationNeeded[rawMaterialId]) {
                    console.log('🟢 Blur: Calculation needed, executing for RM', rawMaterialId);
                    if (userIsTyping[rawMaterialId]) {
                        resetAllSPBUsulan(rawMaterialId);
                    }
                    calculateSPBSuggestion(rawMaterialId, true);
                    calculationNeeded[rawMaterialId] = false;
                } else {
                    console.log('⏭️ Blur: No calculation needed for RM', rawMaterialId);
                }
                
                // Check if value changed after calculation
                const valueAfterCalc = field.val();
                
                // If value didn't change, prevent change event from firing
                if (valueBeforeCalc === valueAfterCalc) {
                    // Update original-value to prevent autosave from thinking value changed
                    field.data('original-value', valueAfterCalc);
                }
                
                // Clear typing flag immediately
                delete userIsTyping[rawMaterialId];
            }
        });
        
        // console.log('SPB event handlers attached for qty_utuh and qty_pakai inputs with debouncing');
    }
    
    /**
     * Event handler for FSTR qty_pakai input changes
     * Triggers SPB suggestion calculation for parent raw material when FSTR qty changes
     * Also triggers autosave for FSTR qty_pakai
     * 
     * Requirements: 22.1, 22.2, 22.3, 22.4, 22.5, 24.1, 24.4, 24.5, 15.2
     */
    function attachFSTREventHandlers() {
        // Track autosave in progress to prevent double triggers
        const autosaveInProgress = {};
        
        // Listen to blur events on FSTR sub-line qty_pakai inputs
        // Handles autosave only - calculation will be triggered by autosave success callback
        $(document).on('blur', 'input[name^="fstr_qty_pakai"]', function() {
            const fstrInput = $(this);
            const fstrSubline = fstrInput.closest('tr.fstr-subline');
            const fstrId = fstrSubline.data('fstr-id');
            const soDetailId = fstrInput.data('so-detail-id');
            const fstrQtyPakai = parseFloat(fstrInput.val()) || 0;
            
            // Prevent double trigger if autosave already in progress for this FSTR
            const key = `${soDetailId}_${fstrId}`;
            if (autosaveInProgress[key]) {
                return;
            }
            
            // Trigger autosave for FSTR qty_pakai
            // Calculation will be triggered by autosave success callback
            if (soDetailId && fstrId) {
                autosaveInProgress[key] = true;
                
                // Call autosave and clear flag after completion
                autoSaveFSTRQtyPakai(soDetailId, fstrId, fstrQtyPakai);
                
                // Clear flag after a short delay (autosave should complete within 1 second)
                setTimeout(() => {
                    delete autosaveInProgress[key];
                }, 1000);
            }
        });
        
        // Optional: Listen to input events with debouncing for real-time preview (currently disabled)
        // Uncomment if you want real-time calculation while typing (with performance cost)
        // $(document).on('input', 'input[name^="fstr_qty_pakai"]', function() {
        //     const fstrSubline = $(this).closest('tr.fstr-subline');
        //     const parentId = fstrSubline.data('parent-id');
        //     
        //     if (parentId) {
        //         invalidateCache(parentId);
        //         debounce(calculateSPBSuggestion, parentId);
        //     }
        // });
    }
    
    /**
     * Event handler for spb_suggestion_qty_final input
     * Validates input and handles SPB over qty reason requirement
     * Supports multiple suggestions (Usulan 1, 2, 3)
     * 
     * Business Rules:
     * - Input < saran: Not allowed, show warning and reset
     * - Input = saran: Normal, hide reason button
     * - Deviasi > threshold: Show reason button, require reason selection
     * 
     * Requirements: 18.2, 18.5
     */
    function attachFinalQtyEventHandlers() {
        // Listen to change event for LSM Reason validation (only triggers on user blur/enter)
        $(document).on('change', '.final-qty-editable', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const userValue = parseFloat(input.val());
            
            // Note: No need to check LSM Reason here because if LSM reason required but not filled,
            // the input will be disabled (suggestions = empty array = show "-")
            // So user cannot edit the input in the first place
        });
        
        // Listen to input event for real-time validation and tooltip update
        $(document).on('input', '.final-qty-editable', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const usulanNumber = input.data('usulan') || 1;
            const userValue = parseFloat(input.val());
            
            // Skip if no value
            if (isNaN(userValue) || userValue <= 0) {
                return;
            }
            
            // Build element IDs based on usulan number
            const suggestionId = usulanNumber === 1 ? `spb_suggestion_${rawMaterialId}` : `spb_suggestion_${usulanNumber}_${rawMaterialId}`;
            const reasonBtnId = usulanNumber === 1 ? `spb_over_reason_btn_${rawMaterialId}` : `spb_over_reason_btn_${usulanNumber}_${rawMaterialId}`;
            const reasonInputId = usulanNumber === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${usulanNumber}_${rawMaterialId}`;
            
            // Get the system-calculated value
            const spbSuggestionElement = $(`#${suggestionId}`);
            const systemValue = parseFloat(spbSuggestionElement.data('system-value'));
            
            // Skip if no system value
            if (isNaN(systemValue)) {
                return;
            }
            
            // Get mapping and row data
            const mapping = mappingData[rawMaterialId];
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const reasonBtn = $(`#${reasonBtnId}`);
            const reasonInput = $(`#${reasonInputId}`);
            
            if (!mapping || !row.length) {
                return;
            }
            
            // Get conversion factors
            const conversionUtuhPakai = parseFloat(mapping.conversion_factor_utuh_pakai) || 1;
            const conversionKirimUtuh = parseFloat(mapping.conversion_factor_kirim_utuh);
            const hasKirimConversion = conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh);
            const conversionKirimToPakai = hasKirimConversion ? (conversionKirimUtuh * conversionUtuhPakai) : 1;
            const uomKirim = mapping.uom_kirim || '';
            
            // Get hasil_pakai from row data - use usulan-specific if available
            const hasilPakaiUsulan = parseFloat(row.data(`hasil-pakai-${usulanNumber}`));
            const hasilPakai = !isNaN(hasilPakaiUsulan) && hasilPakaiUsulan > 0 
                ? hasilPakaiUsulan 
                : (parseFloat(row.data('hasil-pakai')) || (systemValue * conversionKirimToPakai));
            
            // Calculate deviasi
            const usulanPakai = userValue * conversionKirimToPakai;
            const deviasiPersen = hasilPakai > 0 ? Math.abs(Math.round((usulanPakai / hasilPakai * 100) - 100)) : 0;
            const thresholdPersen = parseFloat(mapping.percentage_spb_over_qty) || 0;
            
            // Update tooltip with new deviasi info
            updateTooltipDeviasiOnly(spbSuggestionElement, userValue, systemValue, usulanPakai, hasilPakai, deviasiPersen, thresholdPersen, mapping);
            
            // VALIDATION: Check if reason is required
            let requireReason = false;
            let reasonMessage = '';
            
            // Only check deviasi persentase (removed check for input > saran)
            if (deviasiPersen > thresholdPersen) {
                requireReason = true;
                reasonMessage = `Deviasi ${deviasiPersen}% melebihi threshold ${thresholdPersen}%`;
            }
            
            // Show/hide reason button based on validation
            if (requireReason) {
                // Show reason button
                reasonBtn.show();
                
                // Check if reason already selected
                const hasReason = reasonInput.val() !== '';
                
                if (hasReason) {
                    // Reason already selected, update button to green
                    const reason = spbReasons.find(r => r.id == reasonInput.val());
                    if (reason) {
                        reasonBtn.removeClass('btn-danger').addClass('btn-success');
                        reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                        reasonBtn.attr('title', reason.name);
                    }
                } else {
                    // No reason yet, show warning button
                    reasonBtn.removeClass('btn-success').addClass('btn-danger');
                    reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                    reasonBtn.attr('title', 'Alasan wajib dipilih');
                }
                
                // Mark input as requiring reason
                input.addClass('border-warning');
                input.attr('title', reasonMessage);
            } else {
                // No reason required - hide button
                reasonBtn.hide();
                input.removeClass('border-warning');
                input.removeAttr('title');
            }
        });
        
        // Listen to change event to trigger recalculation of next usulan
        $(document).on('change', '.final-qty-editable', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const usulanNumber = input.data('usulan') || 1;
            const userValue = parseFloat(input.val());
            
            // Skip if no value or invalid
            if (isNaN(userValue) || userValue <= 0) {
                return;
            }
            
            // Build element IDs based on usulan number
            const reasonInputId = usulanNumber === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${usulanNumber}_${rawMaterialId}`;
            const reasonInput = $(`#${reasonInputId}`);
            
            // Only trigger recalculation if user has selected a reason (meaning the value is finalized)
            const hasReason = reasonInput.val() !== '';
            
            if (hasReason && (usulanNumber === 1 || usulanNumber === 2)) {
                printLog(`🔄 Final Qty Usulan ${usulanNumber} changed with reason → Recalculating next usulan...`);
                
                // Small delay to ensure value is saved first
                setTimeout(() => {
                    // Trigger recalculation by calling calculateSPBSuggestion
                    // Pass usulanNumber to skip reset for the usulan that triggered recalculation
                    calculateSPBSuggestion(rawMaterialId, false, usulanNumber);
                }, 100);
            }
        });
        
        // Listen to blur event for validation
        $(document).on('blur', '.final-qty-editable', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const usulanNumber = input.data('usulan') || 1; // Get usulan number (1, 2, or 3)
            const userValue = parseFloat(input.val());
            
            // Build element IDs based on usulan number
            const suggestionId = usulanNumber === 1 ? `spb_suggestion_${rawMaterialId}` : `spb_suggestion_${usulanNumber}_${rawMaterialId}`;
            const reasonBtnId = usulanNumber === 1 ? `spb_over_reason_btn_${rawMaterialId}` : `spb_over_reason_btn_${usulanNumber}_${rawMaterialId}`;
            const reasonInputId = usulanNumber === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${usulanNumber}_${rawMaterialId}`;
            
            // Get the system-calculated value
            const spbSuggestionElement = $(`#${suggestionId}`);
            const systemValue = parseFloat(spbSuggestionElement.data('system-value'));
            
            // Skip validation if no system value or user value is empty
            if (isNaN(systemValue) || input.val() === '') {
                return;
            }
            
            const mapping = mappingData[rawMaterialId];
            const uomKirim = mapping ? mapping.uom_kirim : '';
            const reasonBtn = $(`#${reasonBtnId}`);
            const reasonInput = $(`#${reasonInputId}`);
            
            // Get conversion factor and threshold
            const conversionKirimToPakai = mapping ? (mapping.conversion_factor_kirim_utuh * mapping.conversion_factor_utuh_pakai) : 1;
            const thresholdPersen = parseFloat(mapping ? mapping.percentage_spb_over_qty : 0) || 0;
            
            // Get hasil_pakai from row data attribute (the SPB calculation result in Pakai UOM)
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const hasilPakaiUsulan = parseFloat(row.data(`hasil-pakai-${usulanNumber}`));
            const hasilPakai = !isNaN(hasilPakaiUsulan) && hasilPakaiUsulan > 0 
                ? hasilPakaiUsulan 
                : (parseFloat(row.data('hasil-pakai')) || (systemValue * conversionKirimToPakai));
            
            printLog(`📊 Validasi SPB Usulan ${usulanNumber} untuk RM ${rawMaterialId}:`, {
                userValue,
                systemValue,
                hasilPakai,
                conversionKirimToPakai,
                thresholdPersen
            });
            
            // VALIDATION 1: Input < saran → Not allowed
            if (userValue < systemValue) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Qty Tidak Valid',
                    text: `Qty Usulan ${usulanNumber} tidak boleh kurang dari saran SPB (${Math.round(systemValue)} ${uomKirim})`,
                    confirmButtonText: 'OK'
                });
                
                // Reset to system value
                input.val(Math.round(systemValue));
                input.data('user-edited', false);
                input.removeClass('border-warning');
                
                // Hide reason button and clear reason
                reasonBtn.hide();
                reasonBtn.removeClass('btn-success').addClass('btn-danger');
                reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                reasonBtn.attr('title', 'Alasan wajib dipilih'); // Clear stale tooltip
                reasonInput.val('');
                
                // Clear from storage
                const storageKey = usulanNumber === 1 ? `final_qty_${rawMaterialId}` : `final_qty_${usulanNumber}_${rawMaterialId}`;
                const reasonStorageKey = usulanNumber === 1 ? `spb_over_reason_${rawMaterialId}` : `spb_over_reason_${usulanNumber}_${rawMaterialId}`;
                sessionStorage.removeItem(storageKey);
                sessionStorage.removeItem(reasonStorageKey);
                
                // IMPORTANT: Restore original display (system value only)
                const parentTd = spbSuggestionElement.parent();
                const spanId = spbSuggestionElement.attr('id');
                const spanClasses = spbSuggestionElement.attr('class');
                
                parentTd.html(`
                    <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(systemValue)} ${uomKirim}</span>
                `);
                
                // REMOVED: calculateSPBSuggestion() call to prevent cross-contamination between usulan
                // Tooltip will be restored on next page load or when user changes qty_utuh/qty_pakai
                
                // REMOVED: AJAX call to clear reason_id in database
                // Reason: This causes duplicate AJAX requests during calculation
                // The main autosave (triggered by change event) will handle clearing reason
                // when it saves the updated SPB values
                printLog(`✓ Input normal untuk RM ${rawMaterialId}: tidak perlu alasan`);
                
                return;
            }
            
            // VALIDATION 2 & 3: Check if reason is required
            let requireReason = false;
            let reasonMessage = '';
            
            // Only check deviasi persentase (removed check for input > saran)
            // Calculate deviasi persentase between user input and system calculation
            const usulanPakai = userValue * conversionKirimToPakai;
            const deviasiPersen = hasilPakai > 0 ? Math.abs(Math.round((usulanPakai / hasilPakai * 100) - 100)) : 0;
            
            printLog(`📊 Validasi: Deviasi perhitungan:`, {
                usulanPakai: usulanPakai.toFixed(2),
                hasilPakai: hasilPakai.toFixed(2),
                deviasiPersen: deviasiPersen + '%',
                thresholdPersen: thresholdPersen + '%',
                requireReason: deviasiPersen > thresholdPersen
            });
            
            // Check if deviasi exceeds threshold
            if (deviasiPersen > thresholdPersen) {
                requireReason = true;
                reasonMessage = `Deviasi ${deviasiPersen}% melebihi threshold ${thresholdPersen}%`;
                printLog(`⚠️ Validasi: Deviasi > threshold → Wajib alasan`);
            }
            
            // Apply validation result
            if (!requireReason) {
                // No reason needed - Normal case
                input.data('user-edited', userValue !== systemValue);
                input.removeClass('border-warning');
                input.removeAttr('title');
                
                // Hide reason button and clear reason
                reasonBtn.hide();
                reasonBtn.removeClass('btn-success').addClass('btn-danger');
                reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                reasonBtn.attr('title', 'Alasan wajib dipilih'); // Clear stale tooltip
                reasonInput.val('');
                delete spbOverReasonData[rawMaterialId];
                
                // Remove from session storage
                sessionStorage.removeItem(`final_qty_${rawMaterialId}`);
                sessionStorage.removeItem(`spb_over_reason_${rawMaterialId}`);
                
                // Update display
                const parentTd = spbSuggestionElement.parent();
                const spanId = spbSuggestionElement.attr('id');
                const spanClasses = spbSuggestionElement.attr('class');
                
                if (userValue === systemValue) {
                    // Show system value only
                    parentTd.html(`
                        <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(systemValue)} ${uomKirim}</span>
                    `);
                } else {
                    // Show user value with system value below
                    parentTd.html(`
                        <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(userValue)} ${uomKirim}</span>
                        <br>
                        <small class="text-muted">(Srn: ${Math.round(systemValue)})</small>
                    `);
                }
                
                // IMPORTANT: Re-attach tooltip after HTML replacement with FULL breakdown
                // Always trigger recalculation to ensure tooltip has complete breakdown
                const tooltipKey = `${rawMaterialId}_${usulanNumber}`;
                pendingTooltipUpdates[tooltipKey] = setTimeout(() => {
                    // Trigger full recalculation to get complete tooltip with breakdown
                    calculateSPBSuggestion(rawMaterialId, false);
                    delete pendingTooltipUpdates[tooltipKey];
                }, 200);
                
                console.log(`  🔄 [Validation] Triggering full recalculation for complete tooltip for RM ${rawMaterialId}, Usulan ${usulanNumber}`);
                
                // REMOVED: calculateSPBSuggestion() call to prevent cross-contamination between usulan
                // Tooltip will be restored on next page load or when user changes qty_utuh/qty_pakai
                
                // REMOVED: AJAX call to clear reason_id in database
                // Reason: This causes duplicate AJAX requests during calculation
                // The main autosave (triggered by change event) will handle clearing reason
                // when it saves the updated SPB values
                printLog(`✓ Input normal untuk RM ${rawMaterialId}: tidak perlu alasan`);
                return;
            }
            
            // Reason required - Show button and validate
            input.data('user-edited', true);
            input.addClass('border-warning');
            input.attr('title', reasonMessage);
            
            // Show reason button
            reasonBtn.show();
            
            // Check if reason already selected
            const hasReason = reasonInput.val() !== '';
            
            if (hasReason) {
                // Reason already selected, update button to green with reason name
                const reason = spbReasons.find(r => r.id == reasonInput.val());
                if (reason) {
                    reasonBtn.removeClass('btn-danger').addClass('btn-success');
                    reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    reasonBtn.attr('title', reason.name);
                } else {
                    // Reason ID not found, reset to warning state
                    reasonBtn.removeClass('btn-success').addClass('btn-danger');
                    reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                    reasonBtn.attr('title', 'Alasan wajib dipilih');
                }
                
                // Reason already selected, update display
                const parentTd = spbSuggestionElement.parent();
                const spanId = spbSuggestionElement.attr('id');
                const spanClasses = spbSuggestionElement.attr('class');
                
                parentTd.html(`
                    <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(userValue)} ${uomKirim}</span>
                    <br>
                    <small class="text-muted">(Srn: ${Math.round(systemValue)})</small>
                `);
                
                // REMOVED: calculateSPBSuggestion() call to prevent cross-contamination between usulan
                // Tooltip will be restored on next page load or when user changes qty_utuh/qty_pakai
                
                // Save to session storage
                sessionStorage.setItem(`final_qty_${rawMaterialId}`, userValue);
                
                printLog(`✓ Input dengan reason untuk RM ${rawMaterialId}`);
            } else {
                // No reason yet, show warning button
                reasonBtn.removeClass('btn-success').addClass('btn-danger');
                reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                reasonBtn.attr('title', 'Alasan wajib dipilih');
                
                printLog(`⚠️ Input memerlukan reason untuk RM ${rawMaterialId} - menunggu reason`);
            }
        });
    }
    
    /**
     * Initialize SPB Over Reason Modal
     * Populate dropdown with SPB reasons and attach event handlers
     */
    function initializeSPBOverReasonModal() {
        // Populate reason dropdown
        const select = $('#spbOverReasonSelect');
        select.empty();
        select.append('<option value="">Pilih Alasan</option>');
        
        spbReasons.forEach(reason => {
            select.append(`<option value="${reason.id}">${reason.code} - ${reason.name}</option>`);
        });
        
        // Initialize select2
        select.select2({
            dropdownParent: $('#spbOverReasonModal'),
            placeholder: 'Pilih Alasan',
            allowClear: true
        });
        
        printLog(`✓ SPB Over Reason modal initialized dengan ${spbReasons.length} reasons`);
    }
    
    /**
     * Attach event handlers for SPB Over Reason button and modal
     */
    function attachSPBOverReasonHandlers() {
        // Handle reason button click
        $(document).on('click', '.spb-over-reason-btn', function() {
            const rawMaterialId = $(this).data('raw-material-id');
            const usulanNumber = $(this).data('usulan') || 1; // Get usulan number (1, 2, or 3)
            
            // Build element IDs based on usulan number
            const inputId = usulanNumber === 1 ? `spb_suggestion_qty_final_${rawMaterialId}` : `spb_suggestion_qty_final_${usulanNumber}_${rawMaterialId}`;
            const suggestionId = usulanNumber === 1 ? `spb_suggestion_${rawMaterialId}` : `spb_suggestion_${usulanNumber}_${rawMaterialId}`;
            const reasonInputId = usulanNumber === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${usulanNumber}_${rawMaterialId}`;
            
            const input = $(`#${inputId}`);
            const userValue = parseFloat(input.val());
            
            const spbSuggestionElement = $(`#${suggestionId}`);
            const systemValue = parseFloat(spbSuggestionElement.data('system-value'));
            
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const rmCode = row.find('td:eq(1)').html();
            const rmName = row.find('td:eq(2)').html();
            
            const mapping = mappingData[rawMaterialId];
            const uomKirim = mapping ? mapping.uom_kirim : '';
            
            // Populate modal
            $('#spbOverReasonRawMaterial').html(`${rmCode} - ${rmName} <small class="text-muted">(Usulan ${usulanNumber})</small>`);
            $('#spbOverReasonSystemQty').text(`${Math.round(systemValue)} ${uomKirim}`);
            $('#spbOverReasonUserQty').text(`${Math.round(userValue)} ${uomKirim}`);
            
            // Set current reason if exists
            const currentReasonId = $(`#${reasonInputId}`).val();
            $('#spbOverReasonSelect').val(currentReasonId).trigger('change');
            
            // Store current raw material ID and usulan number in modal
            $('#spbOverReasonModal').data('raw-material-id', rawMaterialId);
            $('#spbOverReasonModal').data('usulan-number', usulanNumber);
            
            // Show modal
            $('#spbOverReasonModal').modal('show');
        });
        
        // Handle save button in modal
        $('#spbOverReasonSaveBtn').on('click', function() {
            const rawMaterialId = $('#spbOverReasonModal').data('raw-material-id');
            const usulanNumber = $('#spbOverReasonModal').data('usulan-number') || 1;
            const reasonId = $('#spbOverReasonSelect').val();
            
            if (!reasonId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Alasan Belum Dipilih',
                    text: 'Silakan pilih alasan terlebih dahulu',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            // Build element IDs based on usulan number
            const inputId = usulanNumber === 1 ? `spb_suggestion_qty_final_${rawMaterialId}` : `spb_suggestion_qty_final_${usulanNumber}_${rawMaterialId}`;
            const suggestionId = usulanNumber === 1 ? `spb_suggestion_${rawMaterialId}` : `spb_suggestion_${usulanNumber}_${rawMaterialId}`;
            const reasonInputId = usulanNumber === 1 ? `spb_over_reason_id_${rawMaterialId}` : `spb_over_reason_id_${usulanNumber}_${rawMaterialId}`;
            const reasonBtnId = usulanNumber === 1 ? `spb_over_reason_btn_${rawMaterialId}` : `spb_over_reason_btn_${usulanNumber}_${rawMaterialId}`;
            
            // Save reason
            const reasonInput = $(`#${reasonInputId}`);
            reasonInput.val(reasonId);
            
            // Get reason details
            const reason = spbReasons.find(r => r.id == reasonId);
            
            // Store in data object with usulan-specific key
            const storageKey = usulanNumber === 1 ? rawMaterialId : `${rawMaterialId}_${usulanNumber}`;
            spbOverReasonData[storageKey] = reason;
            
            // Update button to show success
            const reasonBtn = $(`#${reasonBtnId}`);
            reasonBtn.removeClass('btn-danger').addClass('btn-success');
            reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
            reasonBtn.attr('title', reason.name);
            
            // Now update the display
            const input = $(`#${inputId}`);
            const userValue = parseFloat(input.val());
            const spbSuggestionElement = $(`#${suggestionId}`);
            const systemValue = parseFloat(spbSuggestionElement.data('system-value'));
            const mapping = mappingData[rawMaterialId];
            const uomKirim = mapping ? mapping.uom_kirim : '';
            
            const parentTd = spbSuggestionElement.parent();
            const spanId = spbSuggestionElement.attr('id');
            const spanClasses = spbSuggestionElement.attr('class');
            
            parentTd.html(`
                <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(userValue)} ${uomKirim}</span>
                <br>
                <small class="text-muted">(Srn: ${Math.round(systemValue)})</small>
            `);
            
            // REMOVED: calculateSPBSuggestion() call to prevent cross-contamination between usulan
            // Display is already updated manually above, no need to recalculate all usulan
            
            // Manually update tooltip for this specific usulan only
            const rmRow = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const lsmAktual = parseFloat(rmRow.find('.ending-stock').val()) || 0;
            const forecast = forecastData[rawMaterialId];
            const periodCode = mapping.period_code || mapping.period?.code || 'Periodik';
            const periodCodeLower = periodCode.toLowerCase();
            
            // Build suggestion object for tooltip
            const suggestionForTooltip = {
                usulan: usulanNumber,
                qty: systemValue,
                finalQty: userValue,
                shipmentDate: rmRow.data(`shipment-date-${usulanNumber}`) || 'N/A',
                spbDate: rmRow.data(`spb-date-${usulanNumber}`) || 'N/A',
                dayOffset: usulanNumber + 1, // H+2 for usulan 1, H+3 for usulan 2, H+4 for usulan 3
                roundingInfo: null // Will be populated if needed
            };
            
            // REMOVED: Cumulative Open SPB calculation - no longer needed
            // Open SPB is now calculated per usulan in updateDisplayMultipleSuggestions
            
            // REMOVED: Tooltip refresh saat pilih reason untuk mengurangi beban sistem
            // Tooltip akan di-refresh otomatis saat usulan SPB muncul (saat qty_utuh/qty_pakai berubah)
            
            // Save to session storage with usulan-specific key
            const finalQtyStorageKey = usulanNumber === 1 ? `final_qty_${rawMaterialId}` : `final_qty_${usulanNumber}_${rawMaterialId}`;
            const reasonStorageKey = usulanNumber === 1 ? `spb_over_reason_${rawMaterialId}` : `spb_over_reason_${usulanNumber}_${rawMaterialId}`;
            sessionStorage.setItem(finalQtyStorageKey, userValue);
            sessionStorage.setItem(reasonStorageKey, reasonId);
            
            // Close modal (blur button first to avoid aria-hidden focus warning)
            $('#spbOverReasonSaveBtn').blur();
            $('#spbOverReasonModal').modal('hide');
            
            // IMPORTANT: Trigger autosave to save reason to database
            // Find the final qty input and trigger blur to save
            // Reuse rmRow variable from above
            const soDetailId = rmRow.find('.autosave-field').first().data('so-detail-id');
            
            if (soDetailId) {
                // Get mapping data for conversion (mapping already declared above)
                const conversionKirimToPakai = (mapping.conversion_factor_kirim_utuh || 1) * (mapping.conversion_factor_utuh_pakai || 1);
                
                // Get hasil_pakai from row data attribute (stored during calculation)
                // This is the SPB calculation result in Pakai UOM (subtotal - lsm_aktual)
                const hasilPakai = parseFloat(rmRow.data('hasil-pakai')) || (systemValue * conversionKirimToPakai);
                
                // Build payload based on usulan number
                const payload = {
                    _token: '{{ csrf_token() }}',
                    so_detail_id: soDetailId,
                    field_name: 'qty_pakai', // Use qty_pakai as trigger field
                    value: rmRow.find('input[name*="[qty_pakai]"]').val() || 0,
                    qty_utuh: rmRow.find('input[name*="[qty_utuh]"]').val() || 0,
                    qty_pakai: rmRow.find('input[name*="[qty_pakai]"]').val() || 0,
                    item_olahan: rmRow.find('input[name*="[item_olahan]"]').val() || 0,
                    hasil_pakai: hasilPakai // Add hasil_pakai for backend validation
                };
                
                // Add usulan-specific fields
                if (usulanNumber === 1) {
                    payload.spb_suggestion_qty_final = userValue;
                    payload.spb_suggestion_qty = systemValue;
                    payload.spb_over_reason_id = reasonId;
                } else if (usulanNumber === 2) {
                    payload.spb_suggestion_qty_final_2 = userValue;
                    payload.spb_suggestion_qty_2 = systemValue;
                    payload.spb_over_reason_id_2 = reasonId;
                    // Also include usulan 1 data if exists
                    const usulan1FinalQty = $(`#spb_suggestion_qty_final_${rawMaterialId}`).val();
                    const usulan1SystemQty = $(`#spb_suggestion_${rawMaterialId}`).data('system-value');
                    const usulan1ReasonId = $(`#spb_over_reason_id_${rawMaterialId}`).val();
                    if (usulan1FinalQty) {
                        payload.spb_suggestion_qty_final = usulan1FinalQty;
                        payload.spb_suggestion_qty = usulan1SystemQty;
                        payload.spb_over_reason_id = usulan1ReasonId || '';
                    }
                } else if (usulanNumber === 3) {
                    payload.spb_suggestion_qty_final_3 = userValue;
                    payload.spb_suggestion_qty_3 = systemValue;
                    payload.spb_over_reason_id_3 = reasonId;
                    // Also include usulan 1 and 2 data if exists
                    const usulan1FinalQty = $(`#spb_suggestion_qty_final_${rawMaterialId}`).val();
                    const usulan1SystemQty = $(`#spb_suggestion_${rawMaterialId}`).data('system-value');
                    const usulan1ReasonId = $(`#spb_over_reason_id_${rawMaterialId}`).val();
                    const usulan2FinalQty = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`).val();
                    const usulan2SystemQty = $(`#spb_suggestion_2_${rawMaterialId}`).data('system-value');
                    const usulan2ReasonId = $(`#spb_over_reason_id_2_${rawMaterialId}`).val();
                    if (usulan1FinalQty) {
                        payload.spb_suggestion_qty_final = usulan1FinalQty;
                        payload.spb_suggestion_qty = usulan1SystemQty;
                        payload.spb_over_reason_id = usulan1ReasonId || '';
                    }
                    if (usulan2FinalQty) {
                        payload.spb_suggestion_qty_final_2 = usulan2FinalQty;
                        payload.spb_suggestion_qty_2 = usulan2SystemQty;
                        payload.spb_over_reason_id_2 = usulan2ReasonId || '';
                    }
                }
                
                $.ajax({
                    url: '{{ route("stock_opnames.auto_save_field") }}',
                    type: 'POST',
                    data: payload,
                    success: function(response) {
                        if (response.success) {
                            // Show toast notification (top-right corner)
                            Swal.fire({
                                icon: 'success',
                                title: 'SPB Reason Tersimpan',
                                text: `Usulan ${usulanNumber}: ${reason.code} - ${reason.name}`,
                                timer: 2000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                            
                            // IMPORTANT: Recalculate next usulan when current usulan's Final Qty changes
                            // Usulan 1 changed → Recalculate Usulan 2 & 3 (Open SPB uses Final Qty Usulan 1)
                            // Usulan 2 changed → Recalculate Usulan 3 (Open SPB uses Final Qty Usulan 2)
                            if (usulanNumber === 1 || usulanNumber === 2) {
                                printLog(`🔄 Recalculating next usulan after Usulan ${usulanNumber} Final Qty changed...`);
                                
                                // Add delay to ensure AJAX save completes and DOM updates
                                setTimeout(() => {
                                    // Trigger recalculation by calling calculateSPBSuggestion
                                    // Pass usulanNumber to skip reset for the usulan that triggered recalculation
                                    calculateSPBSuggestion(rawMaterialId, false, usulanNumber);
                                }, 200);
                            }
                        } else {
                            printError(`❌ Gagal menyimpan reason Usulan ${usulanNumber}: ${response.message}`);
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menyimpan',
                                text: response.message,
                                timer: 3000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr) {
                        const message = xhr.responseJSON?.message || 'Error saving reason';
                        printError(`❌ Error menyimpan reason Usulan ${usulanNumber}: ${message}`);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menyimpan',
                            text: message,
                            timer: 3000,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false
                        });
                    }
                });
            } else {
                printWarn(`⚠️ SO detail ID tidak ditemukan untuk RM ${rawMaterialId}`);
            }
        });
        
        printLog('✓ SPB Over Reason handlers attached');
    }
    
    /**
     * Initialize LSM Reason Modal
     * Populate dropdown with LSM reasons and attach event handlers
     */
    function initializeLSMReasonModal() {
        // Populate reason dropdown
        const select = $('#lsmReasonSelect');
        select.empty();
        select.append('<option value="">Pilih Alasan</option>');
        
        lsmReasons.forEach(reason => {
            select.append(`<option value="${reason.id}">${reason.code} - ${reason.name}</option>`);
        });
        
        // Initialize select2
        select.select2({
            dropdownParent: $('#lsmReasonModal'),
            placeholder: 'Pilih Alasan',
            allowClear: true
        });
        
        printLog(`✓ LSM Reason modal initialized dengan ${lsmReasons.length} reasons`);
    }
    
    /**
     * Attach event handlers for LSM Reason button and modal
     */
    function attachLSMReasonHandlers() {
        // Handle reason button click
        $(document).on('click', '.lsm-reason-btn', function() {
            const rawMaterialId = $(this).data('raw-material-id');
            
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const rmCode = row.find('td:eq(1)').text().trim();
            const rmName = row.find('td:eq(2)').text().trim();
            
            // Get LSM Aktual and DOI
            const lsmAktual = parseFloat($(`#lsm_aktual_${rawMaterialId}`).text()) || 0;
            const doi = $(`#doi_${rawMaterialId}`).text();
            const statusBadge = $(`#status_badge_${rawMaterialId}`).html();
            
            // Populate modal
            $('#lsmReasonRawMaterial').html(`<strong>${rmCode}</strong> - ${rmName}`);
            $('#lsmReasonDoiStatus').html(statusBadge);
            $('#lsmReasonLsmValue').text(`${lsmAktual.toFixed(2)}`);
            
            // Set current reason if exists
            const currentReasonId = $(`#lsm_reason_id_${rawMaterialId}`).val();
            $('#lsmReasonSelect').val(currentReasonId).trigger('change');
            
            // Store current raw material ID in modal
            $('#lsmReasonModal').data('raw-material-id', rawMaterialId);
            
            // Show modal
            $('#lsmReasonModal').modal('show');
        });
        
        // Handle save button in modal
        $('#lsmReasonSaveBtn').on('click', function() {
            const rawMaterialId = $('#lsmReasonModal').data('raw-material-id');
            const reasonId = $('#lsmReasonSelect').val();
            
            if (!reasonId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Alasan Belum Dipilih',
                    text: 'Silakan pilih alasan terlebih dahulu',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            // Save reason
            const reasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
            reasonInput.val(reasonId);
            
            // Get reason details
            const reason = lsmReasons.find(r => r.id == reasonId);
            
            // Update button to show selected reason
            const reasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
            reasonBtn.removeClass('btn-danger').addClass('btn-success');
            reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
            reasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
            
            // IMPORTANT: Reset all SPB-related data for fresh calculation
            // 1. Reset user-edited flag for all SPB final qty inputs
            const finalQtyInput1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
            const finalQtyInput2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`);
            const finalQtyInput3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`);
            
            finalQtyInput1.data('user-edited', false);
            finalQtyInput2.data('user-edited', false);
            finalQtyInput3.data('user-edited', false);
            
            // 2. Clear input values (will be recalculated)
            finalQtyInput1.val('');
            finalQtyInput2.val('');
            finalQtyInput3.val('');
            
            // 3. Clear SPB reason buttons and inputs
            $(`#spb_over_reason_id_${rawMaterialId}`).val('');
            $(`#spb_over_reason_id_2_${rawMaterialId}`).val('');
            $(`#spb_over_reason_id_3_${rawMaterialId}`).val('');
            
            $(`#spb_over_reason_btn_${rawMaterialId}`).hide();
            $(`#spb_over_reason_btn_2_${rawMaterialId}`).hide();
            $(`#spb_over_reason_btn_3_${rawMaterialId}`).hide();
            
            // Close modal
            $('#lsmReasonSaveBtn').blur();
            $('#lsmReasonModal').modal('hide');
            
            // IMPORTANT: Trigger autosave to save reason to database
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const soDetailId = row.find('.autosave-field').first().data('so-detail-id');
            
            if (soDetailId) {
                const payload = {
                    _token: '{{ csrf_token() }}',
                    so_detail_id: soDetailId,
                    field_name: 'lsm_reason_id',
                    value: reasonId,
                    qty_utuh: row.find('input[name*="[qty_utuh]"]').val() || 0,
                    qty_pakai: row.find('input[name*="[qty_pakai]"]').val() || 0,
                    lsm_reason_id: reasonId
                };
                
                $.ajax({
                    url: '{{ route("stock_opnames.auto_save_field") }}',
                    type: 'POST',
                    data: payload,
                    success: function(response) {
                        if (response.success) {
                            // Show toast notification (top-right corner)
                            Swal.fire({
                                icon: 'success',
                                title: 'LSM Reason Tersimpan',
                                text: `${reason.code} - ${reason.name}`,
                                timer: 2000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                            
                            // IMPORTANT: Recalculate SPB suggestion after LSM reason is saved
                            // This will update usulan SPB from 0 to actual calculated value
                            printLog(`🔄 Recalculating SPB after LSM reason saved for RM ${rawMaterialId}...`);
                            calculateSPBSuggestion(rawMaterialId);
                        } else {
                            printError(`❌ Gagal menyimpan LSM reason: ${response.message}`);
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menyimpan',
                                text: response.message,
                                timer: 3000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr) {
                        const message = xhr.responseJSON?.message || 'Error saving LSM reason';
                        printError(`❌ Error menyimpan LSM reason: ${message}`);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menyimpan',
                            text: message,
                            timer: 3000,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false
                        });
                    }
                });
            } else {
                printWarn(`⚠️ SO detail ID tidak ditemukan untuk RM ${rawMaterialId}`);
            }
        });
        
        printLog('✓ LSM Reason handlers attached');
    }
    
    /**
     * Initialize page - populate mapping data and calculate initial values
     * 
     * Requirements: 15.2, 15.3
     */
    function initializeSPBSuggestions() {
        printLog('🚀 Inisialisasi SPB suggestions...');
        
        // Populate mapping data from data attributes
        let mappingCount = 0;
        $('tr[data-raw-material-id]').each(function() {
            let rmId = $(this).data('raw-material-id');
            let spbFlag = $(this).data('spb-flag');
            
            if (spbFlag === 'true' || spbFlag === true) {
                const minimalOrder = $(this).data('minimal-order');
                const multipleOrder = $(this).data('multiple-order');
                
                mappingData[rmId] = {
                    conversion_factor_utuh_pakai: $(this).data('conversion-utuh-pakai'),
                    conversion_factor_kirim_utuh: $(this).data('conversion-kirim-utuh'),
                    conversion_factor_to_item: $(this).data('conversion-factor-fstr-to-item'),
                    tipe_dokumen: $(this).data('tipe-dokumen'),
                    period_code: $(this).data('period-code'),
                    period_id: $(this).data('period-id'),
                    period: {
                        id: $(this).data('period-id'),
                        code: $(this).data('period-code'),
                        period_group: $(this).data('period-group'),
                        tipe_pengiriman: $(this).data('period-tipe-pengiriman')
                    },
                    minimal_order: minimalOrder,
                    multiple_order: multipleOrder,
                    spb_flag: $(this).data('spb-flag'),
                    uom_kirim: $(this).data('uom-kirim'),
                    percentage_spb_over_qty: parseFloat($(this).data('percentage-spb-over-qty')) || 0
                };
                
                // Debug log untuk PR type
                const tipeDok = $(this).data('tipe-dokumen');
                const periodCode = $(this).data('period-code');
                if (tipeDok === 'PR' && periodCode) {
                    const prType = periodCode.toLowerCase() === 'sayuran' ? 'PR SAYURAN' : 'PR PERIODIK';
                    printLog(`📋 RM ${rmId}: ${tipeDok} - ${prType} (period_code: "${periodCode}")`);
                }
                
                // Debug log untuk order constraints
                if (minimalOrder > 0 || multipleOrder > 1) {
                    printLog(`📋 RM ${rmId}: minimal_order=${minimalOrder}, multiple_order=${multipleOrder}`);
                }
                
                mappingCount++;
            }
        });
        
        printLog(`✓ Mapping data dimuat untuk ${mappingCount} item`);
        
        // Show summary of items with SPB flag
        if (mappingCount === 0) {
            printWarn('⚠️ Tidak ada item dengan SPB flag aktif!');
            printWarn('→ SPB suggestion tidak akan muncul untuk semua item');
            printWarn('→ Silakan aktifkan SPB flag di menu: Master Data → Store Raw Materials');
        } else {
            printLog(`✓ ${mappingCount} item siap untuk perhitungan SPB suggestion`);
        }
        
        // Populate FSTR components data structure (Requirements: 19.2, 19.4, 20.4)
        // Load from backend data (includes all FSTR relationships, including nested FSTRs)
        fstrComponents = @json($jsData['fstrComponents'] ?? []);
        
        printLog('📦 FSTR components data dimuat dari backend');
        
        // Also populate from HTML data attributes (for visible sub-lines)
        let fstrCount = 0;
        $('.fstr-subline').each(function() {
            const fstrId = $(this).data('fstr-id');
            const parentId = $(this).data('parent-id');
            const componentQty = parseFloat($(this).data('component-qty')) || 0;
            const isFSTR = $(this).data('is-fstr') === 'true' || $(this).data('is-fstr') === true;
            
            // Initialize array for this FSTR if not exists
            if (!fstrComponents[fstrId]) {
                fstrComponents[fstrId] = [];
            }
            
            // Check if this component already exists (from backend data)
            const exists = fstrComponents[fstrId].some(c => c.component_id == parentId);
            if (!exists) {
                // Add component to FSTR (only if not already loaded from backend)
                fstrComponents[fstrId].push({
                    component_id: parentId,
                    qty_per_unit: componentQty,
                    is_component_fstr: isFSTR
                });
            }
            fstrCount++;
        });
        
        printLog(`📦 Data FSTR components dimuat untuk ${fstrCount} relasi visible`);
        
        // Restore manually edited final_qty values from session storage
        $('tr[data-raw-material-id]').each(function() {
            const rmId = $(this).data('raw-material-id');
            const savedValue = sessionStorage.getItem(`final_qty_${rmId}`);
            
            if (savedValue) {
                const input = $(`#spb_suggestion_qty_final_${rmId}`);
                input.val(savedValue);
                input.data('user-edited', true);
                input.addClass('border-warning');
                input.attr('title', 'Nilai ini telah diedit manual');
                
                printLog(`✏️ Restore nilai edit manual untuk RM ${rmId}: ${savedValue}`);
            }
            
            // Restore SPB over reason from database
            const reasonInput = $(`#spb_over_reason_id_${rmId}`);
            const reasonId = reasonInput.val();
            
            // printLog(`🔍 Checking reason untuk RM ${rmId}: reasonId=${reasonId}, reasonInput exists=${reasonInput.length > 0}`);
            
            if (reasonId) {
                // Use == for loose comparison to handle string vs number
                const reason = spbReasons.find(r => r.id == reasonId);
                // printLog(`🔍 Reason found: ${reason ? reason.code : 'NOT FOUND'}, spbReasons count=${spbReasons.length}`);
                
                if (reason) {
                    spbOverReasonData[rmId] = reason;
                    
                    // Show and update button
                    const reasonBtn = $(`#spb_over_reason_btn_${rmId}`);
                    reasonBtn.show();
                    reasonBtn.removeClass('btn-danger').addClass('btn-success');
                    reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    reasonBtn.attr('title', reason.name);
                    
                    // Mark input as user-edited so display will be updated correctly
                    const finalQtyInput = $(`#spb_suggestion_qty_final_${rmId}`);
                    if (finalQtyInput.length > 0) {
                        finalQtyInput.data('user-edited', true);
                        finalQtyInput.addClass('border-warning');
                    }
                    
                    printLog(`✓ Restore reason untuk RM ${rmId}: ${reason.code} - Button set to GREEN`);
                } else {
                    printWarn(`⚠️ Reason ID ${reasonId} tidak ditemukan di spbReasons array untuk RM ${rmId}`);
                    printLog(`📋 Available reasons:`, spbReasons.map(r => `${r.id}:${r.code}`).join(', '));
                }
            }
        });
        
        // Calculate initial SPB suggestions for all items using batch processing
        // Requirement 15.2 - Optimized batch calculation
        const startTime = performance.now();
        const rawMaterialIds = [];
        
        $('tr[data-raw-material-id]').each(function() {
            const rmId = $(this).data('raw-material-id');
            const spbFlag = $(this).data('spb-flag');
            
            if (spbFlag === 'true' || spbFlag === true) {
                rawMaterialIds.push(rmId);
            }
        });
        
        printLog(`✓ Batch calculation dimulai untuk ${rawMaterialIds.length} item...`);
        
        // Use batch calculation for better performance
        // updateDisplay() will automatically handle user-edited values display
        batchCalculateSPBSuggestions(rawMaterialIds);
        
        const endTime = performance.now();
        printLog(`✓ SPB suggestions inisialisasi selesai dalam ${(endTime - startTime).toFixed(2)}ms`);
        
        // After calculation, validate button state for items with user input
        setTimeout(() => {
            $('tr[data-raw-material-id]').each(function() {
                const rmId = $(this).data('raw-material-id');
                const finalQtyInput = $(`#spb_suggestion_qty_final_${rmId}`);
                
                if (finalQtyInput.length > 0 && !finalQtyInput.prop('disabled')) {
                    const userValue = parseFloat(finalQtyInput.val());
                    const spbSuggestionElement = $(`#spb_suggestion_${rmId}`);
                    const systemValue = parseFloat(spbSuggestionElement.data('system-value'));
                    
                    if (!isNaN(userValue) && !isNaN(systemValue) && userValue > 0) {
                        const mapping = mappingData[rmId];
                        const reasonBtn = $(`#spb_over_reason_btn_${rmId}`);
                        const reasonInput = $(`#spb_over_reason_id_${rmId}`);
                        const hasReason = reasonInput.val() !== '';
                        
                        // Check if reason is required
                        let requireReason = false;
                        
                        // Only check deviasi (removed check for input > saran)
                        if (mapping) {
                            const conversionKirimToPakai = (mapping.conversion_factor_kirim_utuh || 1) * (mapping.conversion_factor_utuh_pakai || 1);
                            const thresholdPersen = parseFloat(mapping.percentage_spb_over_qty) || 0;
                            const row = $(this);
                            const hasilPakai = parseFloat(row.data('hasil-pakai')) || (systemValue * conversionKirimToPakai);
                            
                            const usulanPakai = userValue * conversionKirimToPakai;
                            const deviasiPersen = hasilPakai > 0 ? Math.abs(Math.round((usulanPakai / hasilPakai * 100) - 100)) : 0;
                            
                            if (deviasiPersen > thresholdPersen) {
                                requireReason = true;
                            }
                        }
                        
                        // Show button if reason is required
                        if (requireReason) {
                            reasonBtn.show();
                            
                            if (hasReason) {
                                // Has reason - ensure button stays green
                                const reasonId = reasonInput.val();
                                let reason = spbOverReasonData[rmId];
                                
                                // If reason not in cache, try to find it again
                                if (!reason && reasonId) {
                                    reason = spbReasons.find(r => r.id == reasonId);
                                    if (reason) {
                                        spbOverReasonData[rmId] = reason;
                                    }
                                }
                                
                                if (reason) {
                                    reasonBtn.removeClass('btn-danger').addClass('btn-success');
                                    reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                                    reasonBtn.attr('title', reason.name);
                                    printLog(`✓ Button set to GREEN untuk RM ${rmId} (setTimeout validation)`);
                                } else {
                                    printWarn(`⚠️ Reason ID ${reasonId} tidak ditemukan untuk RM ${rmId} (setTimeout validation)`);
                                }
                                
                                // Update display to show user value with system value below
                                const uomKirim = mapping.uom_kirim || '';
                                const parentTd = spbSuggestionElement.parent();
                                const spanId = spbSuggestionElement.attr('id');
                                const spanClasses = spbSuggestionElement.attr('class');
                                
                                parentTd.html(`
                                    <span id="${spanId}" class="${spanClasses}" data-system-value="${systemValue}" style="cursor:help">${Math.round(userValue)} ${uomKirim}</span>
                                    <br>
                                    <small class="text-muted">(Srn: ${Math.round(systemValue)})</small>
                                `);
                                
                                // REMOVED: calculateSPBSuggestion() call to prevent cross-contamination between usulan
                                // Tooltip will be restored on next page load or when user changes qty_utuh/qty_pakai
                                
                                printLog(`✓ Display SPB di-update untuk RM ${rmId} dengan reason (button tetap hijau)`);
                            } else {
                                // No reason yet - show warning button
                                reasonBtn.removeClass('btn-success').addClass('btn-danger');
                                reasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                                reasonBtn.attr('title', 'Alasan wajib dipilih');
                                printLog(`⚠️ Button reason ditampilkan untuk RM ${rmId} (belum ada reason)`);
                            }
                        }
                    }
                }
            });
            
            printLog(`✓ Validasi button state selesai`);
        }, 500); // Wait for calculations to complete
    }
    
    /**
     * Restore user-edited flag from database BEFORE calculations
     * This prevents system from overwriting user values from database
     * Called BEFORE initializeSPBSuggestions()
     */
    function restoreReasonButtonStateEarly() {
        printLog('🔄 Setting user-edited flags from database (early)...');
        
        // Loop through all raw materials
        $('tr[data-raw-material-id]').each(function() {
            const row = $(this);
            const rawMaterialId = row.data('raw-material-id');
            
            // Check usulan 1 - set flag if has value OR has reason
            const finalQty1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`).val();
            const reasonId1 = $(`#spb_over_reason_id_${rawMaterialId}`).val();
            if ((finalQty1 && finalQty1 !== '' && finalQty1 !== 'Auto') || reasonId1) {
                const finalQtyInput1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
                finalQtyInput1.data('user-edited', true);
            }
            
            // Check usulan 2 - set flag if has value OR has reason
            const finalQty2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`).val();
            const reasonId2 = $(`#spb_over_reason_id_2_${rawMaterialId}`).val();
            if ((finalQty2 && finalQty2 !== '' && finalQty2 !== 'Auto') || reasonId2) {
                const finalQtyInput2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`);
                finalQtyInput2.data('user-edited', true);
            }
            
            // Check usulan 3 - set flag if has value OR has reason
            const finalQty3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`).val();
            const reasonId3 = $(`#spb_over_reason_id_3_${rawMaterialId}`).val();
            if ((finalQty3 && finalQty3 !== '' && finalQty3 !== 'Auto') || reasonId3) {
                const finalQtyInput3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`);
                finalQtyInput3.data('user-edited', true);
            }
        });
        
        printLog('✓ User-edited flags set complete');
    }
    
    /**
     * Restore reason button state from database for usulan 2 & 3
     * Called on page load to show reason button if user has previously selected a reason
     */
    function restoreReasonButtonState() {
        printLog('🔄 Restoring reason button state from database...');
        
        // Loop through all raw materials
        $('tr[data-raw-material-id]').each(function() {
            const row = $(this);
            const rawMaterialId = row.data('raw-material-id');
            
            // Check LSM Reason
            const lsmReasonId = $(`#lsm_reason_id_${rawMaterialId}`).val();
            if (lsmReasonId) {
                const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
                const reason = lsmReasons.find(r => r.id == lsmReasonId);
                
                if (reason && lsmReasonBtn.is(':visible')) {
                    lsmReasonBtn.removeClass('btn-danger').addClass('btn-success');
                    lsmReasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    lsmReasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
                    printLog(`✓ LSM Reason restored for RM ${rawMaterialId}: ${reason.code}`);
                }
            }
            
            // Check usulan 1
            const reasonId1 = $(`#spb_over_reason_id_${rawMaterialId}`).val();
            const finalQty1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`).val();
            
            if (reasonId1 && finalQty1) {
                const reasonBtn1 = $(`#spb_over_reason_btn_${rawMaterialId}`);
                const finalQtyInput1 = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
                const reason1 = spbReasons.find(r => r.id == reasonId1);
                
                if (reason1) {
                    reasonBtn1.show();
                    reasonBtn1.removeClass('btn-danger').addClass('btn-success');
                    reasonBtn1.html(`<i class="fas fa-check-circle"></i>`);
                    reasonBtn1.attr('title', reason1.name);
                    finalQtyInput1.data('user-edited', true);
                }
            } else {
                // Clear any stale tooltip if no reason
                const reasonBtn1 = $(`#spb_over_reason_btn_${rawMaterialId}`);
                if (reasonBtn1.is(':visible') && !reasonId1) {
                    reasonBtn1.attr('title', 'Alasan wajib dipilih');
                }
            }
            
            // Check usulan 2
            const reasonId2 = $(`#spb_over_reason_id_2_${rawMaterialId}`).val();
            const finalQty2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`).val();
            
            if (reasonId2 && finalQty2) {
                const reasonBtn2 = $(`#spb_over_reason_btn_2_${rawMaterialId}`);
                const finalQtyInput2 = $(`#spb_suggestion_qty_final_2_${rawMaterialId}`);
                const reason2 = spbReasons.find(r => r.id == reasonId2);
                
                if (reason2) {
                    reasonBtn2.show();
                    reasonBtn2.removeClass('btn-danger').addClass('btn-success');
                    reasonBtn2.html(`<i class="fas fa-check-circle"></i>`);
                    reasonBtn2.attr('title', reason2.name);
                    finalQtyInput2.data('user-edited', true);
                }
            } else {
                // Clear any stale tooltip if no reason
                const reasonBtn2 = $(`#spb_over_reason_btn_2_${rawMaterialId}`);
                if (reasonBtn2.is(':visible') && !reasonId2) {
                    reasonBtn2.attr('title', 'Alasan wajib dipilih');
                }
            }
            
            // Check usulan 3
            const reasonId3 = $(`#spb_over_reason_id_3_${rawMaterialId}`).val();
            const finalQty3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`).val();
            
            if (reasonId3 && finalQty3) {
                const reasonBtn3 = $(`#spb_over_reason_btn_3_${rawMaterialId}`);
                const finalQtyInput3 = $(`#spb_suggestion_qty_final_3_${rawMaterialId}`);
                const reason3 = spbReasons.find(r => r.id == reasonId3);
                
                if (reason3) {
                    reasonBtn3.show();
                    reasonBtn3.removeClass('btn-danger').addClass('btn-success');
                    reasonBtn3.html(`<i class="fas fa-check-circle"></i>`);
                    reasonBtn3.attr('title', reason3.name);
                    finalQtyInput3.data('user-edited', true);
                }
            } else {
                // Clear any stale tooltip if no reason
                const reasonBtn3 = $(`#spb_over_reason_btn_3_${rawMaterialId}`);
                if (reasonBtn3.is(':visible') && !reasonId3) {
                    reasonBtn3.attr('title', 'Alasan wajib dipilih');
                }
            }
        });
        
        printLog('✓ Reason button state restoration complete');
        
        // Destroy any stale Bootstrap tooltips on reason buttons only to prevent cache issues
        // IMPORTANT: Only dispose reason button tooltips, not SPB suggestion tooltips!
        $('[id^="spb_over_reason_btn_"]').tooltip('dispose');
    }
    
    /**
     * Event handler for adjustment inputs (adj_ekstra, adj_restan, adj_ringkas, adj_selisih)
     * Validates and formats to max 2 decimal places on blur
     */
    // Adjustment fields no longer need special handlers
    // They use the same validation as qty_pakai (via oninput attribute)
    
    // ========================================
    // End Event Handlers and Initialization
    // ========================================
    
    $(document).ready(function() {
        // ========================================
        // Initialize SPB Suggestions
        // ========================================
        
        // IMPORTANT: Restore reason button state BEFORE initializeSPBSuggestions
        // This ensures user-edited flag is set before calculations run
        restoreReasonButtonStateEarly();
        
        initializeSPBSuggestions();
        
        // Initialize SPB Over Reason Modal
        initializeSPBOverReasonModal();
        
        // Initialize LSM Reason Modal
        initializeLSMReasonModal();
        
        // Attach event handlers
        attachSPBEventHandlers();
        attachFSTREventHandlers();
        attachFinalQtyEventHandlers();
        attachSPBOverReasonHandlers();
        attachLSMReasonHandlers();
        // attachAdjustmentEventHandlers() - No longer needed, adjustment fields use same validation as qty_pakai
        
        // Restore reason button state for usulan 2 & 3 from database (visual update)
        // Add delay to ensure calculations are complete
        setTimeout(() => {
            restoreReasonButtonState();
        }, 100);
        
        // Record page load completion (Requirement 21.5)
        performanceMonitor.recordPageLoad();
        
        // Log performance summary after a short delay to allow calculations to complete
        setTimeout(() => {
            performanceMonitor.logSummary();
            performanceMonitor.checkPerformanceRequirements();
        }, 2000);
        
        // Task 22.1: Hide page loading overlay after initialization complete
        setTimeout(() => {
            hidePageLoading();
        }, 500);
        
        // ========================================
        // End SPB Suggestions Initialization
        // ========================================
        
        // Initialize AdminLTE card widget for collapsible adjustment cards
        $('[data-card-widget="collapse"]').CardWidget();
        
        // Check if store is selected on page load
        checkStoreSelection();

        // Show notification if this is a newly auto-created SO
        @if(session('success') && strpos(session('success'), 'Auto-created') !== false)
        Swal.fire({
            title: 'Stock Opname Siap!',
            text: 'Semua bahan baku telah dimuat dengan autosave aktif. Anda dapat mulai input jumlah dan akan tersimpan otomatis.',
            icon: 'success',
            timer: 4000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
        @endif

        // Listen for store changes from header
        window.addEventListener('storeChanged', function(event) {
            updateStoreDisplay(event.detail.storeId, event.detail.storeName);
        });

        function checkStoreSelection() {
            const storeId = $('#store_id').val();
            if (!storeId) {
                Swal.fire({
                    title: 'Store Diperlukan',
                    text: 'Silakan pilih store dari menu header sebelum membuat Stock Opname',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                }).then(() => {
                    // Disable form until store is selected
                    $('#formID input, #formID select, #formID button').not('#store_id').prop('disabled', true);
                });
            }
        }

        function updateStoreDisplay(storeId, storeName) {
            $('#store_id').val(storeId);
            $('#selected_store_display').text(storeName);

            // Enable form if store is selected
            if (storeId) {
                $('#formID input, #formID select, #formID button').prop('disabled', false);

                // Reload raw materials for the new store
                if (typeof autoLoadRawMaterials === 'function') {
                    autoLoadRawMaterials();
                }

                // Load current stock for all items
                loadCurrentStockForAllItems();
            }
        }

        // Load current stock for all raw materials
        function loadCurrentStockForAllItems() {
            const storeId = $('#store_id').val();
            if (!storeId) return;

            const rawMaterialIds = [];
            $('[data-raw-material-id]').each(function() {
                const rmId = $(this).data('raw-material-id');
                if (rmId) {
                    rawMaterialIds.push(rmId);
                }
            });

            if (rawMaterialIds.length === 0) return;

            // Show loading indicators
            $('.stock-loading').show();
            $('.stock-info').hide();

            $.ajax({
                url: '{{ route("stock_opnames.get_current_stock") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    store_id: storeId,
                    raw_material_ids: rawMaterialIds
                },
                success: function(response) {
                    if (response.success) {
                        updateCurrentStockDisplay(response.stocks);
                    } else {
                        printError('❌ Failed to load current stock:', response.message);
                    }
                },
                error: function(xhr) {
                    printError('❌ Error loading current stock:', xhr.responseText);
                },
                complete: function() {
                    $('.stock-loading').hide();
                    $('.stock-info').show();
                }
            });
        }

        // Update current stock display
        function updateCurrentStockDisplay(stocks) {
            $.each(stocks, function(rawMaterialId, stockData) {
                const stockDisplay = $(`.current-stock-display[data-raw-material-id="${rawMaterialId}"]`);

                if (stockDisplay.length > 0) {
                    // Display only lsm_aktual (ending stock from last SO)
                    const lsmAktual = stockData.lsm_aktual !== undefined && stockData.lsm_aktual !== null 
                        ? parseFloat(stockData.lsm_aktual).toFixed(2) 
                        : '-';
                    
                    stockDisplay.find('.stock-qty').html(`<strong>${lsmAktual}</strong>`);

                    const statusBadge = stockDisplay.find('.stock-status-badge');
                    statusBadge.removeClass('badge-secondary badge-success badge-warning badge-danger badge-info')
                        .addClass(`badge-${stockData.status_color}`)
                        .text(stockData.status);

                    // Add tooltip with more info
                    stockDisplay.attr('title',
                        `LSM Aktual: ${lsmAktual}\n` +
                        `Qty Utuh: ${parseFloat(stockData.qty_utuh).toFixed(0)}\n` +
                        `Qty Pakai: ${parseFloat(stockData.qty_pakai).toFixed(2)}\n` +
                        `Status: ${stockData.status}\n` +
                        `Last Updated: ${stockData.last_updated}`
                    );
                }
            });
        }

        // Load current stock when page loads
        $(document).ready(function() {
            setTimeout(function() {
                loadCurrentStockForAllItems();
            }, 1000); // Small delay to ensure everything is loaded

            // Debug: Check autosave fields
            // console.log('Autosave fields found:', $('.autosave-field').length);

            // Count fields with missing SO detail ID
            let missingSODetailId = 0;
            $('.autosave-field').each(function(index) {
                const field = $(this);
                const soDetailId = field.data('so-detail-id');
                if (!soDetailId) {
                    missingSODetailId++;
                }
                // console.log(`Field ${index + 1}:`, {
                //     name: field.attr('name'),
                //     fieldName: field.data('field-name'),
                //     soDetailId: soDetailId,
                //     hasExistingData: field.data('has-existing-data'),
                //     originalValue: field.data('original-value'),
                //     currentValue: field.val()
                // });
            });

            if (missingSODetailId > 0) {
                printWarn(`⚠️ Found ${missingSODetailId} fields without SO detail ID`);

                // Show warning to user
                Swal.fire({
                    title: 'Masalah Setup Terdeteksi',
                    text: `${missingSODetailId} item tidak memiliki record database. Ini akan mencegah autosave bekerja.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Perbaiki Sekarang',
                    cancelButtonText: 'Lanjutkan'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Reload page to trigger auto-create
                        window.location.reload();
                    }
                });
            }
        });

        // Clear row functionality
        $(document).on('click', '.clear-row', function() {
            const index = $(this).data('index');
            const rawMaterialId = $(this).data('raw-material-id');
            const row = $(this).closest('tr');

            Swal.fire({
                title: 'Hapus Baris?',
                text: 'Ini akan mereset semua nilai di baris ini (termasuk FSTR dan Adjustments) menjadi nol. Anda yakin?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Clear all input fields in main row (text inputs with number validation)
                    row.find('input[type="text"].autosave-field').not('[readonly]').each(function() {
                        const field = $(this);
                        const originalValue = field.val();
                        field.val(0);

                        // Trigger change event to save via autosave
                        if (field.hasClass('autosave-field')) {
                            field.trigger('change');
                        }
                    });

                    // Clear FSTR sub-lines for this raw material
                    $(`.fstr-subline[data-parent-id="${rawMaterialId}"]`).each(function() {
                        const fstrRow = $(this);
                        
                        // Clear FSTR qty_pakai input
                        fstrRow.find('input[name^="fstr_qty_pakai"]').each(function() {
                            const fstrField = $(this);
                            const soDetailId = fstrField.data('so-detail-id');
                            const fstrId = fstrField.data('fstr-id');
                            
                            // Set value to 0
                            fstrField.val(0);
                            
                            // Only trigger autosave if soDetailId exists (data already saved in DB)
                            if (soDetailId && fstrId) {
                                // Call autosave function directly
                                autoSaveFSTRQtyPakai(soDetailId, fstrId, 0);
                            }
                        });
                    });

                    // Clear adjustment fields (hidden inputs and modal inputs)
                    const adjustmentFields = ['adj_ekstra', 'adj_restan', 'adj_ringkas', 'adj_selisih'];
                    
                    // Get soDetailId from main row
                    const mainRowSoDetailId = row.find('.qty-utuh').data('so-detail-id');
                    
                    adjustmentFields.forEach(function(fieldName) {
                        // Clear hidden input
                        const hiddenInput = $(`#${fieldName}_${rawMaterialId}`);
                        if (hiddenInput.length) {
                            hiddenInput.val(0);
                        }
                        
                        // Clear modal input
                        const modalInput = $(`#adjustmentModal${rawMaterialId} input[name="${fieldName}"]`);
                        if (modalInput.length) {
                            modalInput.val(0);
                        }
                        
                        // Trigger autosave for adjustment field if soDetailId exists
                        if (mainRowSoDetailId) {
                            $.ajax({
                                url: '{{ route("stock_opnames.auto_save_field") }}',
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    so_detail_id: mainRowSoDetailId,
                                    field_name: fieldName,
                                    value: 0
                                },
                                success: function(response) {
                                    if (response.success) {
                                        console.log(`✅ ${fieldName} cleared and saved`);
                                    }
                                },
                                error: function(xhr) {
                                    console.error(`❌ Failed to clear ${fieldName}:`, xhr);
                                }
                            });
                        }
                    });
                    
                    // Update adjustment button appearance (back to outline-secondary)
                    const adjButton = row.find('.btn-adjustment-icon');
                    if (adjButton.length) { 
                        adjButton.attr('title', 'Klik untuk input adjustment');
                    }

                    // Recalculate LSM Aktual and DOI (don't set to 0, because FSTR from other items might contribute)
                    // This will recalculate based on current values including FSTR contributions
                    calculateSPBSuggestion(rawMaterialId, true);

                    Swal.fire({
                        title: 'Berhasil!',
                        text: 'Baris telah dihapus dan disimpan.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        });

        // Autosave functionality
        let saveTimeout;

        // Autosave throttling - prevent duplicate saves within short time
        const autosaveQueue = new Map(); // Track pending autosaves by soDetailId + fieldName
        const autosaveInProgress = new Set(); // Track autosaves currently being processed
        const AUTOSAVE_THROTTLE_MS = 500; // Wait 500ms before actually saving

        $(document).on('change', '.autosave-field', function(event) {
            // Prevent multiple handlers from firing
            event.stopImmediatePropagation();
            
            const field = $(this);
            const value = field.val();
            const soDetailId = field.data('so-detail-id');
            const fieldName = field.data('field-name');
            const hasExistingData = field.data('has-existing-data') === 'true';
            const originalValue = field.data('original-value');
            
            console.log('🔔 Change event fired:', {
                fieldName,
                soDetailId,
                value,
                originalValue,
                timestamp: new Date().toISOString()
            });
            
            // Create unique key for this field
            const queueKey = `${soDetailId}_${fieldName}`;
            
            // Skip if already in progress
            if (autosaveInProgress.has(queueKey)) {
                console.log('⏭️ Autosave skipped: Already in progress for', queueKey);
                return;
            }

            // Get current row to extract qty_utuh, qty_pakai, and item_olahan
            // For adjustment fields in modal, find row by raw_material_id from field
            // For main fields in table, find row by closest('tr')
            let row = field.closest('tr');
            let rawMaterialId = field.data('raw-material-id'); // Try from field first (for adjustment fields)
            
            if (row.length === 0 && rawMaterialId) {
                // Adjustment field in modal - find row by rawMaterialId
                row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            } else if (row.length > 0) {
                // Main field in table - get rawMaterialId from row
                rawMaterialId = row.data('raw-material-id');
            }
            
            const qtyUtuh = row.find('.qty-utuh').val() || 0;
            const qtyPakai = row.find('.qty-pakai').val() || 0;
            const itemOlahan = row.find('.item-olahan-input').val() || 0;
            const spbSuggestionDate = row.find('.spb-suggestion-date-input').val() || null;

            // Skip if no SO detail ID (new record)
            if (!soDetailId) {
                console.log('⏭️ Autosave skipped: No SO detail ID');
                return;
            }

            // Skip if value hasn't changed
            if (value == originalValue) {
                console.log('⏭️ Autosave skipped: Value unchanged');
                return;
            }

            // Clear existing timeout for this field
            if (autosaveQueue.has(queueKey)) {
                clearTimeout(autosaveQueue.get(queueKey));
                console.log('⏱️ Cleared existing timeout for', queueKey);
            }

            // Set new timeout
            const timeoutId = setTimeout(() => {
                console.log('🚀 Proceeding with autosave for', queueKey);
                
                // Remove from queue
                autosaveQueue.delete(queueKey);
                
                // Mark as in progress
                autosaveInProgress.add(queueKey);

                // Show confirmation for existing data
                if (hasExistingData && value != originalValue) {
                    showEditConfirmation(field, value, soDetailId, fieldName, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate, rawMaterialId, queueKey);
                } else {
                    autoSaveField(soDetailId, fieldName, value, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate, rawMaterialId, queueKey);
                }
            }, AUTOSAVE_THROTTLE_MS);
            
            // Store timeout ID
            autosaveQueue.set(queueKey, timeoutId);
            console.log('⏱️ Set timeout for', queueKey, 'delay:', AUTOSAVE_THROTTLE_MS + 'ms');
        });

        function showEditConfirmation(field, newValue, soDetailId, fieldName, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate, rawMaterialId, queueKey) {
            Swal.fire({
                title: 'Konfirmasi Edit',
                text: 'Anda akan mengubah data yang sudah ada. Perubahan ini akan dicatat untuk keperluan audit.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Update',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    autoSaveField(soDetailId, fieldName, newValue, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate, rawMaterialId, queueKey);
                    field.data('original-value', newValue); // Update original value
                } else {
                    field.val(field.data('original-value')); // Revert
                    // Remove from in-progress set
                    autosaveInProgress.delete(queueKey);
                }
            });
        }

        function autoSaveField(soDetailId, fieldName, value, qtyUtuh = null, qtyPakai = null, itemOlahan = null, spbSuggestionDate = null, rawMaterialId = null, queueKey = null) {
            console.log('📤 Sending AJAX autosave request:', {
                soDetailId,
                fieldName,
                value,
                queueKey,
                timestamp: new Date().toISOString()
            });
            
            // Show saving indicator
            showSavingIndicator();
            
            // Task 22.1: Add inline field loading indicator
            const field = $(`.autosave-field[data-so-detail-id="${soDetailId}"][data-field-name="${fieldName}"]`);
            field.addClass('field-saving');

            // Get raw material ID from parameter or try to find from row
            if (!rawMaterialId) {
                const row = $(`.autosave-field[data-so-detail-id="${soDetailId}"]`).first().closest('tr');
                rawMaterialId = row.data('raw-material-id');
            }

            // Requirement 15.4: Only send changed data to minimize payload
            // Build minimal payload with only necessary fields
            const payload = {
                _token: '{{ csrf_token() }}',
                so_detail_id: soDetailId,
                field_name: fieldName,
                value: value
            };
            
            // Only include qty_utuh, qty_pakai, item_olahan, and spb_suggestion_date if provided
            if (qtyUtuh !== null) {
                payload.qty_utuh = qtyUtuh;
            }
            if (qtyPakai !== null) {
                payload.qty_pakai = qtyPakai;
            }
            if (itemOlahan !== null) {
                payload.item_olahan = itemOlahan;
            }
            if (spbSuggestionDate !== null) {
                payload.spb_suggestion_date = spbSuggestionDate;
            }
            
            // Include final_qty for SPB generation
            if (rawMaterialId) {
                // Get spb_suggestion_qty_final (user edited value)
                const finalQtyEditableInput = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
                const finalQtyEditable = finalQtyEditableInput.length > 0 ? parseFloat(finalQtyEditableInput.val()) || null : null;
                
                // Get spb_suggestion_qty (SPB suggestion calculated value)
                const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
                let finalQtySystem = null;
                if (spbSuggestionElement.length > 0) {
                    // Get HTML content and extract first line (before <br>)
                    const spbHtml = spbSuggestionElement.html();
                    if (spbHtml && spbHtml !== '-') {
                        // Split by <br> and get first part (the number)
                        const spbParts = spbHtml.split('<br>');
                        const spbText = spbParts[0].trim();
                        
                        // Extract number from text
                        const spbMatch = spbText.match(/[\d.]+/);
                        if (spbMatch) {
                            finalQtySystem = parseFloat(spbMatch[0]) || null;
                        }
                    }
                }
                
                if (finalQtyEditable !== null) {
                    payload.spb_suggestion_qty_final = finalQtyEditable;
                }
                if (finalQtySystem !== null) {
                    payload.spb_suggestion_qty = finalQtySystem;
                }
                
                // Include SPB over reason if exists
                const reasonInput = $(`#spb_over_reason_id_${rawMaterialId}`);
                if (reasonInput.length > 0 && reasonInput.val()) {
                    payload.spb_over_reason_id = reasonInput.val();
                }
            }

            $.ajax({
                url: '{{ route("stock_opnames.auto_save_field") }}',
                type: 'POST',
                data: payload,
                success: function(response) {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    if (response.success) {
                        updateCalculatedFields(soDetailId, response.data, rawMaterialId);
                        showSaveSuccess();
                        
                       
                        
                        // Requirement 12.2: Recalculate SPB suggestions after autosave success
                        // ONLY if this autosave was NOT triggered by qty input change
                        // (to prevent infinite loop: input → calculate → autosave → calculate → autosave → ...)
                        const isQtyField = field.hasClass('qty-utuh') || field.hasClass('qty-pakai');
                        
                        
                        if (rawMaterialId && !isQtyField) {                          
                            // Force recalculate to ensure fresh data after save
                            calculateSPBSuggestion(rawMaterialId, true);
                        } else if (rawMaterialId && isQtyField) {
                            console.log(`✓ Autosave berhasil untuk RM ${rawMaterialId}, skip recalculate (already calculated from input change)`);
                        } else {
                            console.log(`⚠️ Autosave berhasil tapi tidak ada rawMaterialId atau kondisi lain`);
                        }
                    } else {
                        // Requirement 12.3: Show error message and don't update SPB suggestions
                        showSaveError(response.message);
                        printError('❌ Autosave failed:', response.message);
                    }
                },
                error: function(xhr) {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    // Requirement 12.3: Show error message and don't update SPB suggestions
                    const message = xhr.responseJSON?.message || 'Error saving field';
                    showSaveError(message);
                    printError('❌ Autosave error:', xhr);
                },
                complete: function() {
                    // Remove from in-progress set after AJAX completes (success or error)
                    if (queueKey) {
                        autosaveInProgress.delete(queueKey);
                        console.log('Autosave completed, removed from in-progress:', queueKey);
                    }
                }
            });

            // Initial calculation for existing items 
            $('#spb_suggestion_qty_final_614').trigger('blur');
        }

        function updateCalculatedFields(soDetailId, data, rawMaterialId = null) {
            // Find the specific row by SO detail ID
            // For main fields (qty_utuh, qty_pakai), find from autosave-field
            // For adjustment fields (in modal), use rawMaterialId parameter
            let row;
            
            if (rawMaterialId) {
                // Use rawMaterialId directly (for adjustment fields)
                row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            } else {
                // Try to find from autosave-field (for main fields)
                row = $(`.autosave-field[data-so-detail-id="${soDetailId}"]`).first().closest('tr');
                
                // If not found, try using raw_material_id from response data
                if (row.length === 0 && data.raw_material_id) {
                    row = $(`tr[data-raw-material-id="${data.raw_material_id}"]`);
                }
            }

            if (row.length > 0) {
                // Update calculated fields in the specific row only
                // Use lsm_aktual for ending stock
                updateLSMDisplay(row, data.lsm_aktual || 0);
                updateDOIDisplay(row, data.doi || 0);

                // console.log('Updated calculated fields for row:', soDetailId, {
                //     lsm_aktual: data.lsm_aktual,
                //     doi: data.doi
                // });
            } else {
                printWarn('⚠️ Could not find row for SO detail ID:', soDetailId, 'rawMaterialId:', rawMaterialId);
            }
        }

        // Input validation for Qty Utuh (Integer only, no decimal)
        $('.qty-utuh').on('input', function() {
            let value = $(this).val();

            // Remove any non-digit characters (including decimal point)
            value = value.replace(/[^0-9]/g, '');

            // Limit to 4 digits (max 9999)
            if (value.length > 4) {
                value = value.substring(0, 4);
            }

            $(this).val(value);
        });

        // Adjustment fields no longer need special validation
        // They use the same inline validation as qty_pakai (via oninput attribute)

        // Format existing values on page load (handle database numeric values)
        $('.qty-utuh').each(function() {
            let value = $(this).val();
            if (value) {
                // Convert to integer (remove any decimal from database)
                let intValue = parseInt(parseFloat(value));
                if (!isNaN(intValue)) {
                    $(this).val(intValue);
                }
            }
        });

        $('.qty-pakai').each(function() {
            let value = $(this).val();
            if (value) {
                // Format to 2 decimal places
                let floatValue = parseFloat(value);
                if (!isNaN(floatValue)) {
                    $(this).val(floatValue.toFixed(2));
                }
            }
        });

        // Format adjustment fields to 2 decimal places on page load
        $('input[name*="[adj_ekstra]"], input[name*="[adj_restan]"], input[name*="[adj_ringkas]"], input[name*="[adj_selisih]"]').each(function() {
            let value = $(this).val();
            if (value) {
                // Format to 2 decimal places
                let floatValue = parseFloat(value);
                if (!isNaN(floatValue)) {
                    $(this).val(floatValue.toFixed(2));
                }
            }
        });

        // Format FSTR qty pakai fields to 2 decimal places
        $('.fstr-qty-pakai').each(function() {
            let value = $(this).val();
            if (value) {
                // Format to 2 decimal places
                let floatValue = parseFloat(value);
                if (!isNaN(floatValue)) {
                    $(this).val(floatValue.toFixed(2));
                }
            }
        });

        // Adjustment fields no longer need special formatting
        // They use the same inline validation as qty_pakai (via oninput attribute)

        // Search functionality - filter table rows
        $('#search_btn').click(function() {
            const searchTerm = $('#search_item').val().toLowerCase();
            if (searchTerm) {
                $('#items-tbody tr').each(function() {
                    const itemDescription = $(this).find('td:nth-child(3)').text().toLowerCase();
                    const itemCode = $(this).find('td:nth-child(2)').text().toLowerCase();

                    if (itemDescription.includes(searchTerm) || itemCode.includes(searchTerm)) {
                        $(this).show();
                        // Focus on the first input in this row
                        $(this).find('.qty-utuh').focus();
                    } else {
                        $(this).hide();
                    }
                });
            } else {
                // Show all rows if search is empty
                $('#items-tbody tr').show();
            }
        });

        // Enter key search
        $('#search_item').keypress(function(e) {
            if (e.which == 13) {
                $('#search_btn').click();
            }
        });

        // Clear search - show all rows
        $('#search_item').on('input', function() {
            if ($(this).val() === '') {
                $('#items-tbody tr').show();
            }
        });

        // View History button functionality
        $(document).on('click', '.view-history', function() {
            const soDetailId = $(this).data('so-detail-id');
            const rawMaterial = $(this).data('raw-material');

            if (!soDetailId) {
                Swal.fire({
                    title: 'No History',
                    text: 'This item has not been saved yet.',
                    icon: 'info'
                });
                return;
            }

            // Set item name in modal
            $('#historyItemName').text('Item: ' + rawMaterial);

            // Show modal
            $('#changeHistoryModal').modal('show');

            // Show loading
            $('#historyLoadingIndicator').show();
            $('#historyContent').hide();

            // Fetch history
            $.ajax({
                url: '{{ route("stock_opnames.get_change_history") }}',
                type: 'GET',
                data: {
                    so_detail_id: soDetailId
                },
                success: function(response) {
                    $('#historyLoadingIndicator').hide();
                    $('#historyContent').show();

                    if (response.success && response.change_logs.length > 0) {
                        $('#historyTable').show();
                        $('#noHistoryMessage').hide();

                        // Populate table
                        let tbody = $('#historyTableBody');
                        tbody.empty();

                        response.change_logs.forEach(function(log) {
                            // Format numeric values to 2 decimal places for qty fields
                            let oldValue = log.old_value;
                            let newValue = log.new_value;

                            // Check if field is a quantity field that needs formatting
                            const qtyFields = ['qty_utuh', 'qty_pakai', 'adj_ekstra', 'adj_restan', 'adj_ringkas', 'adj_selisih'];
                            if (qtyFields.includes(log.field_name)) {
                                // Format to 2 decimal places if it's a number
                                if (!isNaN(parseFloat(oldValue))) {
                                    oldValue = parseFloat(oldValue).toFixed(2);
                                }
                                if (!isNaN(parseFloat(newValue))) {
                                    newValue = parseFloat(newValue).toFixed(2);
                                }
                            }

                            let row = `
                                <tr>
                                    <td>${log.changed_at}</td>
                                    <td><strong>${log.field_name}</strong></td>
                                    <td>${oldValue}</td>
                                    <td>${newValue}</td> 
                                    <td>${log.changed_by}</td>
                                    <td>${log.ip_address || '-'}</td>
                                </tr>
                            `;
                            tbody.append(row);
                        });
                    } else {
                        $('#historyTable').hide();
                        $('#noHistoryMessage').show();
                    }
                },
                error: function(xhr) {
                    $('#historyLoadingIndicator').hide();
                    $('#historyContent').show();

                    Swal.fire({
                        title: 'Error',
                        text: 'Gagal memuat riwayat perubahan: ' + (xhr.responseJSON?.message || 'Error tidak diketahui'),
                        icon: 'error'
                    });
                }
            });
        });

        // Clear button functionality
        $('#clear-btn').click(function() {
            Swal.fire({
                title: 'Hapus Semua Input',
                text: 'Anda yakin ingin menghapus semua data input? Ini tidak akan mempengaruhi log perubahan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus Semua',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('.qty-utuh, .qty-pakai').val('0');
                    // Update all LSM and DOI displays
                    $('#items-tbody tr').each(function() {
                        updateLSMDisplay($(this), 0);
                        updateDOIDisplay($(this), 0);
                    });
                    // Clear adjustment fields by name attribute (no longer using class selector)
                    $('input[name*="[adj_ekstra]"], input[name*="[adj_restan]"], input[name*="[adj_ringkas]"], input[name*="[adj_selisih]"]').val('0');
                    $('#search_item').val('');
                    $('#items-tbody tr').show(); // Show all rows after clear

                    Swal.fire('Berhasil!', 'Semua input telah dihapus.', 'success');
                }
            });
        });

        // Save Only button (without creating SPB)
        $('#save-only-btn').click(function() {
            $.ajax({
                url: '{{ route("stock_opnames.save_only") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    so_id: '{{ $data->id ?? 0 }}'
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil Disimpan',
                            text: response.warning || response.message,
                            confirmButtonText: 'OK'
                        });
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                }
            });
        });

        // Create SPB button
        $('#create-spb-btn').click(function() {
            // Collect SPB suggestions data to pass as reference (Requirement 17.2, 17.4)
            const spbSuggestions = collectSPBSuggestionsData();
            
            Swal.fire({
                title: 'Buat SPB',
                text: 'Data yang sudah disubmit tidak dapat diedit. Lanjutkan?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Buat SPB',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Store SPB suggestions in sessionStorage for reference (Requirement 17.2, 17.4)
                    sessionStorage.setItem('spb_suggestions_reference', JSON.stringify(spbSuggestions));
                    
                    $.ajax({
                        url: '{{ route("stock_opnames.create_spb") }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            so_id: '{{ $data->id ?? 0 }}',
                            spb_type: 'Regular'
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: response.message,
                                    confirmButtonText: 'Go to SPB'
                                }).then(() => {
                                    window.location.href = response.redirect_url;
                                });
                            } else {
                                Swal.fire('Error', response.message, 'error');
                            }
                        }
                    });
                }
            });
        });
        
        /**
         * Collect SPB suggestions data from the form
         * Returns array of items with SPB suggestions as reference data
         * (Requirement 17.2, 17.4)
         */
        function collectSPBSuggestionsData() {
            const suggestions = [];
            
            $('tr[data-raw-material-id]').each(function() {
                const $row = $(this);
                const rawMaterialId = $row.data('raw-material-id');
                const spbFlag = $row.data('spb-flag');
                
                // Only collect data for items with SPB enabled
                if (spbFlag === 'true' || spbFlag === true) {
                    const rawMaterialCode = $row.find('td:eq(1)').text().trim();
                    const rawMaterialName = $row.find('td:eq(2)').text().trim();
                    
                    // Get calculated values from display elements
                    const lsmAktual = parseFloat($(`#lsm_aktual_${rawMaterialId}`).text()) || 0;
                    const doi = $(`#doi_${rawMaterialId}`).text();
                    const statusBadge = $(`#status_badge_${rawMaterialId}`).text();
                    const tipeDokumen = $row.find('td:eq(10) .badge').text().trim();
                    const spbSuggestion = $(`#spb_suggestion_${rawMaterialId}`).text();
                    const finalQtyEditable = parseFloat($(`#spb_suggestion_qty_final_${rawMaterialId}`).val()) || null;
                    
                    // Get mapping data
                    const mapping = {
                        minimal_order: $row.data('minimal-order'),
                        multiple_order: $row.data('multiple-order'),
                        tipe_dokumen: $row.data('tipe-dokumen'),
                        period_code: $row.data('period-code')
                    };
                    
                    suggestions.push({
                        raw_material_id: rawMaterialId,
                        raw_material_code: rawMaterialCode,
                        raw_material_name: rawMaterialName,
                        lsm_aktual: lsmAktual,
                        doi: doi,
                        status: statusBadge,
                        tipe_dokumen: tipeDokumen,
                        suggested_qty: spbSuggestion !== '-' ? parseFloat(spbSuggestion) : 0,
                        spb_suggestion_qty_final: finalQtyEditable,
                        mapping: mapping,
                        timestamp: new Date().toISOString()
                    });
                }
            });
            
            return {
                so_id: '{{ $data->id ?? 0 }}',
                so_date: '{{ $data->so_date ?? "" }}',
                store_id: '{{ $data->store_id ?? 0 }}',
                items: suggestions,
                generated_at: new Date().toISOString()
            };
        }

        // Form validation and submission
        var isSubmitting = false;

        // Check if jQuery validate is available
        if (typeof $.fn.validate === 'undefined') {
            printError('❌ jQuery Validate plugin is not loaded!');
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'jQuery Validate plugin tidak ter-load. Silakan refresh halaman.',
                confirmButtonText: 'Refresh'
            }).then(() => {
                window.location.reload();
            });
            return;
        }

        // Save Draft button click handler
        $('#save-draft-btn').on('click', function(e) {
            e.preventDefault();
            // console.log('Save Draft button clicked');
            $('#status_input').val('Draft');
            $('#formID').submit();
        });

        // Submit button click handler
        $('#submit-btn').on('click', function(e) {
            e.preventDefault();

            // Konfirmasi sebelum submit dengan info SPB
            Swal.fire({
                title: 'Submit Stock Opname?',
                html: `
                    <div class="text-left">
                        <p>Data yang sudah disubmit tidak dapat diubah lagi. Pastikan semua data sudah benar.</p>
                        <hr>
                        <p class="text-info"><strong><i class="fas fa-info-circle"></i> Informasi Generate SPB:</strong></p>
                        <p class="mb-2">Setelah submit, sistem akan otomatis membuat SPB Regular dengan ketentuan:</p>
                        <ul class="text-left" style="font-size: 0.9em;">
                            <li>Item dikelompokkan berdasarkan <strong>Tipe Dokumen</strong> (DO/PR) dan <strong>Tipe Barang</strong> (Basah/Kering)</li>
                            <li>Setiap kombinasi membentuk 1 SPB terpisah (minimal 1 SPB, maksimal 4 SPB)</li>
                            <li>Nomor SPB di-generate otomatis oleh sistem</li>
                            <li>Request Date SPB menggunakan tanggal dari SPB Suggestion</li>
                        </ul>
                        <p class="mb-0" style="font-size: 0.85em; color: #6c757d;"><em><i class="fas fa-lightbulb"></i> Catatan: Tipe Barang ditentukan dari Periode Pemesanan (<strong>HARIAN = Basah</strong>, <strong>PERIODIK = Kering</strong>)</em></p>
                    </div>
                `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="fas fa-check"></i> Ya, Submit & Generate SPB',
                cancelButtonText: 'Batal',
                width: '650px'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#status_input').val('Submitted');
                    $('#formID').submit();
                }
            });
        });

        $('#formID').validate({
            rules: {
                store_id: {
                    required: true
                },
                status: {
                    required: true
                }
            },
            submitHandler: function(form) {
                if (isSubmitting) return false;

                // ========================================
                // Check for items without conversion mapping
                // ========================================
                let itemsWithoutConversion = [];

                $('.qty-utuh').each(function() {
                    const hasConversionAttr = $(this).data('has-conversion');
                    const hasConversion = hasConversionAttr === 'true' || hasConversionAttr === true;
                    const qtyUtuh = parseFloat($(this).val()) || 0;
                    const itemCode = $(this).data('item-code');
                    const itemName = $(this).data('item-name');

                    // Debug log
                    if (qtyUtuh > 0) {
                        // console.log(`Item ${itemCode}:`, {
                        //     hasConversionAttr: hasConversionAttr,
                        //     hasConversionAttrType: typeof hasConversionAttr,
                        //     hasConversion: hasConversion,
                        //     qtyUtuh: qtyUtuh
                        // });
                    }

                    // Debug log
                    if (qtyUtuh > 0) {
                        // console.log(`Item ${itemCode}:`, {
                        //     hasConversionAttr: hasConversionAttr,
                        //     hasConversionAttrType: typeof hasConversionAttr,
                        //     hasConversion: hasConversion,
                        //     qtyUtuh: qtyUtuh
                        // });
                    }

                    if (!hasConversion && qtyUtuh > 0) {
                        itemsWithoutConversion.push({
                            code: itemCode,
                            name: itemName,
                            qty: qtyUtuh
                        });
                    }
                });

                if (itemsWithoutConversion.length > 0) {
                    let itemsList = itemsWithoutConversion.map(item =>
                        `<li><strong>${item.code}</strong> - ${item.name} (Qty Utuh: ${item.qty})</li>`
                    ).join('');

                    Swal.fire({
                        icon: 'error',
                        title: 'Konversi Mapping Diperlukan!',
                        html: `
                            <div class="text-left">
                                <p class="text-danger"><strong>⚠️ Tidak dapat submit Stock Opname!</strong></p>
                                <p>Item berikut tidak memiliki konversi mapping:</p>
                                <ul class="text-left" style="max-height: 200px; overflow-y: auto;">
                                    ${itemsList}
                                </ul>
                                <hr>
                                <p class="text-danger mt-3">
                                    <strong>Mengapa ini penting?</strong><br>
                                    Tanpa konversi mapping, sistem akan menggunakan rasio 1:1 yang <strong>SALAH</strong>!<br>
                                    Ini akan menyebabkan perhitungan yang salah untuk:
                                </p>
                                <ul class="text-left">
                                    <li>Ending Stock</li>
                                    <li>DOI (Days of Inventory)</li>
                                    <li>SPB (Surat Permintaan Item)</li>
                                    <li>Laporan</li>
                                </ul>
                                <p class="text-primary mt-3">
                                    <strong>Apa yang harus dilakukan?</strong><br>
                                    Silakan mapping konversi terlebih dahulu di <strong>Master → Items → Item Conversions</strong>
                                </p>
                            </div>
                        `,
                        width: '600px',
                        confirmButtonText: '<i class="fa fa-external-link-alt"></i> Ke Item Conversions',
                        confirmButtonColor: '#007bff',
                        showCancelButton: true,
                        cancelButtonText: 'Batal',
                        cancelButtonColor: '#6c757d'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.open('{{ route("raw_materials.index") }}', '_blank');
                        }
                    });

                    return false;
                }

                // ========================================
                // Proceed with form submission
                // ========================================
                isSubmitting = true;
                $('#loaderkdnknz').show();

                var formData = new FormData(form);

                $.ajax({
                        type: "POST",
                        url: $(form).attr('action'),
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                    })
                    .done(function(data) {
                        Swal.fire({
                            icon: data[0],
                            text: data[1],
                            showCancelButton: false,
                            confirmButtonColor: '#6c757d',
                            confirmButtonText: 'OK',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed && data[0] == 'success') {
                                const dataId = parseInt("{{ $data->id }}");
                                if (dataId > 0) {
                                    window.location.href = "{{ route('stock_opnames.show', $data->id) }}";
                                } else {
                                    window.location.href = "{{ route('stock_opnames.index') }}";
                                }
                            }
                        });
                    })
                    .fail(function(xhr) {
                        let errorText = "Silakan hubungi tim terkait atau coba lagi.";

                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            errorText = '';

                            for (const key in errors) {
                                if (errors.hasOwnProperty(key)) {
                                    errorText += `<strong>${key}</strong> : ${errors[key].join(', ')}<br>`;
                                }
                            }
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorText = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: "error",
                            title: "Validasi Gagal",
                            html: errorText,
                            confirmButtonColor: '#6c757d',
                            confirmButtonText: 'OK'
                        });
                    })
                    .always(function() {
                        isSubmitting = false;
                        $('#loaderkdnknz').hide();
                    });
            }
        });

        // Initial calculation for existing items
        $('.qty-utuh').trigger('input');

        // ========================================
        // SO Locking: Unlock on navigate away
        // ========================================
        @if(isset($data->id) && $data->id > 0)
        const soIdForLocking = parseInt("{{ $data->id }}");
        let isFormSubmitted = false;
        let heartbeatInterval = null;

        // Start heartbeat - send ping every 2 minutes (120 seconds)
        function startHeartbeat() {
            printLog('💓 Starting heartbeat untuk SO ID: ' + soIdForLocking);

            // Send initial heartbeat
            sendHeartbeat();

            // Set interval to send heartbeat every 2 minutes
            heartbeatInterval = setInterval(function() {
                sendHeartbeat();
            }, 120000); // 120000ms = 2 minutes
        }

        function sendHeartbeat() {
            $.ajax({
                url: '{{ route("stock_opnames.heartbeat") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    so_id: soIdForLocking
                },
                success: function(response) {
                    if (response.success) {
                        printLog('💓 Heartbeat sent at:', response.timestamp);
                    } else {
                        printWarn('⚠️ Heartbeat failed:', response.message);
                        // Stop heartbeat if not authorized
                        stopHeartbeat();
                    }
                },
                error: function(xhr) {
                    printError('❌ Heartbeat error:', xhr.responseJSON?.message || xhr.statusText);
                }
            });
        }

        function stopHeartbeat() {
            if (heartbeatInterval) {
                clearInterval(heartbeatInterval);
                heartbeatInterval = null;
                printLog('💓 Heartbeat stopped');
            }
        }

        // Start heartbeat when page loads
        startHeartbeat();

        // Mark form as submitted when save/submit buttons are clicked
        $('#save-draft-btn, #submit-btn').on('click', function() {
            isFormSubmitted = true;
            stopHeartbeat(); // Stop heartbeat when saving
        });

        // Unlock SO when user navigates away (without saving)
        window.addEventListener('beforeunload', function(e) {
            if (!isFormSubmitted) {
                stopHeartbeat(); // Stop heartbeat

                // Use synchronous AJAX to ensure it completes before page unload
                $.ajax({
                    url: '{{ route("stock_opnames.unlock") }}',
                    type: 'POST',
                    async: false, // Synchronous to ensure completion
                    data: {
                        _token: '{{ csrf_token() }}',
                        so_id: soIdForLocking
                        } 
                });
            }
        });

        // Also unlock when clicking "Kembali" button
        $('a[href="{{ route('stock_opnames.index') }}"]').on('click', function(e) {
            if (!isFormSubmitted) {
                e.preventDefault();
                const href = $(this).attr('href');

                stopHeartbeat(); // Stop heartbeat

                // Unlock SO
                $.ajax({
                    url: '{{ route("stock_opnames.unlock") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        so_id: soIdForLocking
                    },
                    success: function() {
                        window.location.href = href;
                    },
                    error: function() {
                        // Navigate anyway even if unlock fails
                        window.location.href = href;
                    }
                });
            }
        });
        @endif
        
        // ========================================
        // Adjustment Modal Handler
        // ========================================
        
        // Handle adjustment input changes in modal
        $(document).on('change blur', '.adjustment-input', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const adjType = input.data('adj-type');
            const value = parseFloat(input.val()) || 0;
            
            // Update hidden input
            $(`#adj_${adjType}_${rawMaterialId}`).val(value.toFixed(2));
            
            // Update button appearance and tooltip
            updateAdjustmentButton(rawMaterialId);
        });
        
        // Update adjustment button appearance based on total
        function updateAdjustmentButton(rawMaterialId) {
            const ekstra = parseFloat($(`#adj_ekstra_${rawMaterialId}`).val()) || 0;
            const restan = parseFloat($(`#adj_restan_${rawMaterialId}`).val()) || 0;
            const ringkas = parseFloat($(`#adj_ringkas_${rawMaterialId}`).val()) || 0;
            const selisih = parseFloat($(`#adj_selisih_${rawMaterialId}`).val()) || 0;
            
            const total = ekstra + restan + ringkas + selisih;
            
            const button = $(`.btn-adjustment-icon[data-raw-material-id="${rawMaterialId}"]`);
            
            if (total > 0) {
                button.removeClass('btn-outline-secondary').addClass('btn-primary');
                button.attr('title', `Total Adjustment: ${total.toFixed(2)}`);
            } else { 
                button.attr('title', 'Klik untuk input adjustment');
            }
        }
        
        // Initialize tooltips for adjustment buttons
        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
        });
    });
</script> 
<style>
   /* HEADER (baris ke-2 saja supaya tidak bentrok colspan) */
    #items-table thead tr:nth-child(1) th:nth-child(10),
    #items-table thead tr:nth-child(1) th:nth-child(11),
    #items-table thead tr:nth-child(1) th:nth-child(12) {
        background-color: #17a2b8 !important;
        color: white !important;
        font-weight: 600;
        border-left: 2px solid #138496;
    }
    #items-table thead tr:nth-child(2) th:nth-child(1),
    #items-table thead tr:nth-child(2) th:nth-child(2),
    #items-table thead tr:nth-child(2) th:nth-child(3),
    #items-table thead tr:nth-child(2) th:nth-child(4),
    #items-table thead tr:nth-child(2) th:nth-child(5),
    #items-table thead tr:nth-child(2) th:nth-child(6) {
        background-color: #17a2b8 !important;
        color: white !important;
        font-weight: 600;
        border-left: 2px solid #138496;
    }

    /* BODY tetap kolom 10-15 */ 
    #items-table tbody td:nth-child(10),
    #items-table tbody td:nth-child(11),
    #items-table tbody td:nth-child(12),
    #items-table tbody td:nth-child(13),
    #items-table tbody td:nth-child(14), 
    #items-table tbody td:nth-child(15){
        background-color: #e7f6f8;
        border-left: 2px solid #17a2b8;
    }

    /* Saving Indicator */
    .save-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #ffc107;
        color: #000;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        animation: slideInRight 0.3s ease-out;
    }

    .save-indicator i {
        font-size: 18px;
    }

    /* Save Success Indicator */
    .save-success {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #28a745;
        color: white;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        animation: slideInRight 0.3s ease-out;
    }

    .save-success i {
        font-size: 18px;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
</style>

<!-- Modal for SPB Over Qty Reason -->
<div class="modal fade" id="spbOverReasonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle"></i> Pilih Alasan SPB Melebihi Saran
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body"> 
                <div class="form-group">
                    <label>Raw Material:</label>
                    <p id="spbOverReasonRawMaterial"></p>
                </div>
                
                <div class="form-group">
                    <label>Saran Sistem vs Input Anda:</label>
                    <p>
                        <span class="badge badge-info" id="spbOverReasonSystemQty"></span>
                        <i class="fas fa-arrow-right mx-2"></i>
                        <span class="badge badge-danger" id="spbOverReasonUserQty"></span>
                    </p>
                </div>
                
                <div class="form-group">
                    <label>Alasan <span class="text-danger">*</span></label>
                    <select class="form-control select2" id="spbOverReasonSelect" style="width:100%">
                        <option value="">Pilih Alasan</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-info" id="spbOverReasonSaveBtn">
                    <i class="fas fa-check"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal for LSM Reason (DOI in range with lsm_reason_flag) -->
<div class="modal fade" id="lsmReasonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-circle"></i> Pilih Alasan LSM
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body"> 
                <div class="form-group">
                    <label>Raw Material:</label>
                    <p id="lsmReasonRawMaterial"></p>
                </div>
                
                <div class="form-group">
                    <label>Status Stok:</label>
                    <p>
                        <span id="lsmReasonDoiStatus"></span>
                    </p>
                </div>
                
                <div class="form-group">
                    <label>LSM Aktual:</label>
                    <p>
                        <span class="badge badge-info" id="lsmReasonLsmValue"></span>
                    </p>
                </div>
                
                <div class="form-group">
                    <label>Alasan <span class="text-danger">*</span></label>
                    <select class="form-control select2" id="lsmReasonSelect" style="width:100%">
                        <option value="">Pilih Alasan</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-info" id="lsmReasonSaveBtn">
                    <i class="fas fa-check"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

@endsection