@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 -->
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">User</label>
                                        <div class="mt-1">
                                            <div>{{ auth()->user()->fullname }}</div>
                                            @if(auth()->user()->roles->isNotEmpty())
                                            <small class="text-muted">
                                                <i class="fas fa-user-tag"></i>
                                                {{ auth()->user()->roles->pluck('name')->join(', ') }}
                                            </small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Store</label>
                                        <div class="mt-1">
                                            @if(session('store_selected'))
                                            @php
                                            $stores = Cache::get('select_stores', []);
                                            $selectedStore = collect($stores)->firstWhere('id', session('store_selected'));
                                            @endphp
                                            <div>{{ $selectedStore ? $selectedStore->name : 'No Store Selected' }}</div>
                                            @else
                                            <div class="text-danger">No Store Selected</div>
                                            @endif
                                        </div>
                                        <input type="hidden" name="store_id" id="store_id" value="{{ session('store_selected') }}" required>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">Status</label>
                                        <div>
                                            @if(isset($data->id) && $data->status)
                                            {{ $data->status }}
                                            @else
                                            Belum Disimpan
                                            @endif
                                        </div>
                                        <!-- <small class="text-muted text-sm">Last Updated Forecast: {{ date('d M Y') }}</small><br>
                                        <small class="text-muted text-sm">Last Updated Shipment: {{ date('d M Y') }}</small> -->
                                        <input type="hidden" name="status" id="status_input" value="{{ old('status', $data->status ?? 'Draft') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="font-weight-bold">LSM Date <span class="text-danger">*</span></label>
                                        @if(auth()->user()->canBackdateSO())
                                        <input
                                            value="{{ old('so_date', $data->so_date ? $data->so_date->format('Y-m-d') : date('Y-m-d')) }}"
                                            type="date"
                                            class="form-control"
                                            name="so_date"
                                            id="so_date"
                                            max="{{ date('Y-m-d') }}"
                                            required>
                                        <small class="text-success text-sm">
                                            <i class="fas fa-check-circle"></i> Backdate diizinkan
                                        </small>
                                        @else
                                        <input
                                            value="{{ old('so_date', $data->so_date ? $data->so_date->format('d F Y') : date('d F Y')) }}"
                                            type="text"
                                            class="form-control"
                                            readonly>
                                        <small class="text-muted text-sm">Tanggal sistem (tidak bisa backdate) kecuali user tertentu</small>
                                        <input type="hidden" name="so_date" value="{{ $data->so_date ? $data->so_date->format('Y-m-d') : date('Y-m-d') }}">
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <hr>
                                </div>
                                <div class="col-md-5">
                                    @if($data->id > 0)
                                    <div class="alert alert-info d-flex align-items-center" role="alert">
                                        <i class="fa fa-info-circle mr-2"></i>
                                        <div>
                                            <strong>Autosave Aktif:</strong>
                                            Semua field akan otomatis tersimpan saat Anda mengubah nilai.
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-1"></div>
                                <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">Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Formula Info Card (Collapsible) -->
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="card card-info collapsed-card">
                                        <div class="card-header">
                                            <h3 class="card-title">
                                                <i class="fas fa-calculator"></i> Rumus Perhitungan SPB
                                            </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">
                                                <div class="col-md-6">
                                                    <div class="callout callout-info">
                                                        <h5><i class="fas fa-truck"></i> Item DO (Delivery Order)</h5>
                                                        <p class="text-muted mb-2" style="font-size: 13px;">Item basah yang dikirim via DO. Ada 2 tipe: HARIAN dan PERIODIK</p>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <p class="mb-1"><strong>DO HARIAN:</strong></p>
                                                                <div class="bg-light p-2 rounded mb-2">
                                                                    <code class="text-info">
                                                                        SPB = (Forecast Besok + Forecast Lusa + TSM Lusa) - LSM Aktual - Open SPB
                                                                    </code>
                                                                </div>
                                                                <ul class="mb-2" style="font-size: 13px;">
                                                                    <li><strong>Forecast Besok:</strong> Forecast H+1 (1 hari setelah SO)</li>
                                                                    <li><strong>Forecast Lusa:</strong> Forecast H+2 (2 hari setelah SO)</li>
                                                                    <li><strong>TSM Lusa:</strong> TSM H+2 (target sisa malam di hari lusa)</li>
                                                                    <li><strong>LSM Aktual:</strong> Ending Stock dari SO hari ini</li>
                                                                    <li><strong>Open SPB:</strong> Total SPB yang belum CLOSED</li>
                                                                </ul> 
                                                            </div>
                                                            <div class="col-md-6">
                                                                <p class="mb-1"><strong>Contoh DO HARIAN:</strong></p>
                                                                <small>
                                                                    SO tanggal Jumat 5 Sept 2025:<br>
                                                                    • Forecast Besok (Sabtu 6 Sept) = 105.25<br>
                                                                    • Forecast Lusa (Minggu 7 Sept) = 98.75<br>
                                                                    • TSM Lusa (Minggu 7 Sept) = 50.25<br>
                                                                    • LSM Aktual = 150.00<br>
                                                                    <strong>SPB = (105.25 + 98.75 + 50.25) - 150.00 = 104.25 Pakai</strong>
                                                                </small>  
                                                            </div>
                                                        </div>   
                                                        <hr class="my-2">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <p class="mb-1"><strong>DO PERIODIK:</strong></p>
                                                                <div class="bg-light p-2 rounded mb-2">
                                                                   <code class="text-info">
                                                                        SPB = Total Forecast (Coverage) - LSM Aktual - Open SPB
                                                                    </code>
                                                                </div>
                                                                <ul class="mb-2" style="font-size: 13px;">
                                                                    <li><strong>Coverage Logic:</strong> Sama seperti PR (H+2 hari kerja, check delivery day)</li>
                                                                    <li><strong>PERBEDAAN:</strong> TIDAK skip hari libur saat hitung forecast</li>
                                                                    <li><strong>TIDAK pakai TSM:</strong> Hanya forecast saja</li>
                                                                    <li><strong>Delivery Days:</strong> Dari Shipment Deliveries (filter by period_id)</li>
                                                                </ul> 
                                                            </div>
                                                            <div class="col-md-6">
                                                                <p class="mb-1"><strong>Contoh DO PERIODIK:</strong></p>
                                                                <small>
                                                                    SO: Selasa, 13 Jan 2025, Delivery days: ["Senin", "Kamis"]<br>
                                                                    • H+2 hari kerja = Kamis, 15 Jan (delivery day ✓)<br>
                                                                    • Next delivery = Senin, 19 Jan<br>
                                                                    • Coverage = Jumat 16 - Senin 19 Jan (4 hari)<br>
                                                                    • Total Forecast = 200.50 <em class="text-danger">(termasuk libur!)</em><br>
                                                                    • LSM Aktual = 50.00, Open SPB = 10.00<br>
                                                                    <strong>SPB = 200.50 - 50.00 - 10.00 = 140.50 Pakai</strong><br>
                                                                    <em class="text-danger">* DO PERIODIK: Semua hari dihitung (TIDAK skip libur)</em>
                                                                </small>
                                                            </div>
                                                        </div> 
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="callout callout-success">
                                                        <h5><i class="fas fa-box"></i> Item PR (Purchase Request)</h5>
                                                        <p class="text-muted mb-2" style="font-size: 13px;">Item kering periodik yang dikirim via PR</p>
                                                        <div class="row">
                                                            <div class="col-md-12"> 
                                                                <div class="bg-light p-2 rounded mb-2"> 
                                                                    <code class="text-success">
                                                                            SPB = Total Forecast (Coverage Period) - LSM Aktual - Open SPB
                                                                    </code>
                                                                </div>
                                                                <p class="mb-1"><strong>Coverage Period Logic:</strong></p>
                                                                <ul class="mb-2" style="font-size: 13px;">
                                                                    <li><strong>Shipment Date:</strong> H+2 HARI KERJA (skip libur)</li>
                                                                    <li><strong>Check Shift:</strong> Jika shipment date BUKAN hari shift → Tidak ada SPB</li>
                                                                    <li><strong>Coverage:</strong> Dari hari setelah shipment sampai sebelum shipment berikutnya</li>
                                                                    <li><strong>Shifts:</strong> Berdasarkan data shifts di Shipment Supplier (contoh: ["Senin","Kamis"])</li>
                                                                    <li><strong>Skip Libur:</strong> Hari libur tidak dihitung dalam forecast</li>
                                                                </ul> 
                                                                <em class="text-danger text-sm">* Coverage sampai hari pengiriman berikutnya (inclusive)</em>
                                                            </div>
                                                        </div>
                                                        <hr class="my-2">
                                                        <div class="row">
                                                            <div class="col-md-6"> 
                                                                <p class="mb-1"><strong>Contoh Perhitungan:</strong></p> 
                                                                <strong>Scenario 1 - Tidak ada SPB:</strong><br>
                                                                <small>
                                                                    • SO: Senin, 12 Jan 2025<br>
                                                                    • Shifts: ["Senin", "Kamis"]<br>
                                                                    • H+2 hari kerja = Rabu, 14 Jan<br>
                                                                    • Rabu BUKAN hari shift → <strong>Tidak ada SPB</strong>
                                                                </small>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <strong>Scenario 3 - Skip libur:</strong><br>
                                                                <small>                                     
                                                                    • SO: Rabu, 14 Jan 2025<br>
                                                                    • Libur: Jumat 16, Sabtu 17, Minggu 18 Jan<br>
                                                                    • Shifts: ["Senin", "Kamis"]<br>
                                                                    • H+2 hari kerja = Senin, 19 Jan (skip 3 hari libur)<br>
                                                                    • Senin ADALAH hari shift ✓ → <strong>Ada SPB</strong>
                                                                </small>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <strong>Scenario 2 - Ada SPB:</strong><br>
                                                                <small>                                                             
                                                                    • SO: Selasa, 13 Jan 2025<br>
                                                                    • Shifts: ["Senin", "Kamis"]<br>
                                                                    • H+2 hari kerja = Kamis, 15 Jan<br>
                                                                    • Kamis ADALAH hari shift ✓<br>
                                                                    • Next Shipment = Senin, 19 Jan<br>
                                                                    • Coverage = Jumat 16 - Senin 19 Jan (4 hari, inclusive)<br>
                                                                    • Total Forecast (16-19 Jan) = 200.50<br>
                                                                    • LSM Aktual = 50.00, Open SPB = 10.00<br>
                                                                    • <strong>SPB = 200.50 - 50.00 - 10.00 = 140.50 Pakai</strong>
                                                                </small>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <strong>Scenario 4 - Next shipment juga libur:</strong><br>
                                                                <small>   
                                                                    • SO: Kamis, 25 Des 2025<br>
                                                                    • Shifts: ["Senin", "Kamis"]<br>
                                                                    • H+2 hari kerja = Senin, 29 Des (skip Sabtu/Minggu)<br>
                                                                    • Senin ADALAH hari shift ✓<br>
                                                                    • Next Shipment = Kamis, 1 Jan 2026 (LIBUR!)<br>
                                                                    • Skip ke next valid shipment = Senin, 5 Jan 2026<br>
                                                                    • Coverage = Selasa 30 Des - Senin 5 Jan (7 hari)<br>
                                                                    • <strong>Forecast: 30 Des, 31 Des, 1 Jan, 2 Jan, 3 Jan, 4 Jan, 5 Jan</strong><br>
                                                                    • (Coverage INCLUSIVE sampai hari pengiriman berikutnya)
                                                                </small>                                                                
                                                            </div> 
                                                        </div>  
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="alert alert-info mb-0">
                                                        <i class="fas fa-info-circle"></i> 
                                                        <strong>Catatan:</strong> Hasil perhitungan dalam UOM Pakai akan dikonversi ke UOM Kirim (jika ada). 
                                                        Konversi: <code>Pakai → Utuh → Kirim</code>. Hasil akhir UOM Kirim akan dibulatkan ke angka bulat terdekat.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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%">No</th>
                                                    <th width="5%">Code</th>
                                                    <th>Description</th>
                                                    <th width="7%" class="text-center">UOM Pakai</th>
                                                    <th width="8%" class="text-center">Current Stock</th>
                                                    <th width="7%" class="text-center">Sisa Utuh</th>
                                                    <th width="7%" class="text-center">Sisa Pakai</th>
                                                    <th width="6%" class="text-center">LSM Aktual</th>
                                                    <th width="6%" class="text-center">DOI</th>
                                                    <th width="6%" class="text-center">Status Stok</th>
                                                    <th width="5%" class="text-center">Tipe Dok</th>
                                                    <th width="4%" class="text-center">Saran Qty</th>
                                                    <th width="7%" class="text-center">Final Qty</th>
                                                    <th width="13%" class="text-center">Adjustments</th> 
                                                    <th width="2%">Action</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="{{ $mapping->conversion_factor_kirim_utuh ?? 1 }}"
                                                    data-conversion-factor-fstr-to-item="{{ $rm->conversion_factor_fstr_to_item ?? 1 }}"
                                                    data-tipe-dokumen="{{ $mapping->tipe_dokumen ?? '' }}"
                                                    data-period-code="{{ $mapping->period->code ?? '' }}"
                                                    data-period-id="{{ $mapping->period_id ?? '' }}"
                                                    data-reorder-point="{{ $mapping->reorder_point ?? 0 }}"
                                                    data-min-stock="{{ $mapping->min_stock ?? 0 }}"
                                                    data-max-stock="{{ $mapping->max_stock ?? 0 }}"
                                                    data-minimal-order="{{ $mapping->minimal_order ?? 0 }}"
                                                    data-multiple-order="{{ $mapping->multiple_order ?? 0 }}"
                                                    data-spb-flag="{{ $showSPB ? 'true' : 'false' }}"
                                                    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>
                                                        <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') : '' }}">
                                                        @if(!$hasConversion)
                                                        <br><small class="text-danger"><i class="fa fa-warning"></i> Tidak ada mapping</small>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ $rm->name }}
                                                        @if(!$hasConversion)
                                                        <br><small class="text-danger">⚠️ Menggunakan rasio 1:1 (tidak akurat!)</small>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        {{ $uomPakai }}
                                                        @if($hasConversion)
                                                        <br><small class="text-muted">1 {{ $uomUtuh }} = {{ $conversionFactor }} {{ $uomPakai }}</small>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="current-stock-display" data-raw-material-id="{{ $rm->id }}">
                                                            <div class="stock-loading" style="display: none;">
                                                                <i class="fa fa-spinner fa-spin"></i>
                                                            </div>
                                                            <div class="stock-info">
                                                                <div class="stock-qty">
                                                                    <span class="stock-utuh">-</span> + <span class="stock-pakai">-</span>
                                                                </div>
                                                                <div class="stock-status">
                                                                    <span class="badge badge-secondary stock-status-badge">Tidak Diketahui</span>
                                                                </div>
                                                                <small class="text-muted text-sm stock-last-updated">Belum Pernah</small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <input type="number" 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="number" 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>
                                                    <td>
                                                        <input type="text" class="form-control ending-stock text-right"
                                                            value="{{ $existingDetail ? number_format($existingDetail->lsm_aktual, 2, '.', '') : '0.00' }}" readonly>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control doi-value text-right"
                                                            value="{{ $existingDetail && $existingDetail->doi ? number_format($existingDetail->doi, 2, '.', '') : '0.00' }}" readonly>
                                                    </td>
                                                    <!-- Status Stok Column -->
                                                    <td class="text-center">
                                                        @if($showSPB)
                                                        <span class="badge badge-secondary" id="status_badge_{{ $rm->id }}">-</span>
                                                        <br><small style="font-size: 10px;" id="open_spb_{{ $rm->id }}">Open SPB: 0.00</small>
                                                        @else
                                                        <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Tipe Dokumen Column -->
                                                    <td class="text-center">
                                                        @if($showSPB && $mapping->tipe_dokumen)
                                                            @if($mapping->tipe_dokumen == 'DO')
                                                                <span class="badge badge-info">
                                                                    {{ $mapping->period->code }} / {{ $mapping->tipe_dokumen }}
                                                                </span>  
                                                            @else
                                                                <span class="badge badge-success">
                                                                    {{ $rm->tipe_doi }} / {{ $mapping->tipe_dokumen }}
                                                                </span> 
                                                            @endif 
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Saran SPB Column -->
                                                    <td class="text-center">
                                                        @if($showSPB)
                                                        <span id="spb_suggestion_{{ $rm->id }}" class="spb-suggestion-display">-</span>
                                                        @else
                                                        <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <!-- Final Qty Editable Column -->
                                                    <td>
                                                        @if($showSPB)
                                                        <input type="number" step="0.01" min="0" 
                                                            class="form-control final-qty-editable text-right"
                                                            name="items[{{ $index }}][spb_suggestion_qty_final]"
                                                            id="spb_suggestion_qty_final_{{ $rm->id }}"
                                                            value="{{ $existingDetail->spb_suggestion_qty_final ?? '' }}"
                                                            placeholder="Auto"
                                                            title="Anda dapat menyesuaikan qty ini sebelum membuat SPB (Requirement 17.5, 18.4)">
                                                        @else
                                                        <span class="text-muted text-center d-block">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @php
                                                        $mapping = $variables['mappings']->get($rm->id);
                                                        $hasInvMatrix = $mapping && $mapping->inv_matrix_flag;
                                                        $hasRestan = $mapping && $mapping->adj_restan_flag;
                                                        $hasExtras = $mapping && $mapping->adj_extras_flag;
                                                        $hasRingkas = $mapping && $mapping->adj_ringkas_flag;
                                                        $hasSelisih = $mapping && $mapping->adj_selisih_flag;
                                                        $hasAnyAdjustment = $hasRestan || $hasExtras || $hasRingkas || $hasSelisih;
                                                        @endphp
                                                        @if($hasInvMatrix && $hasAnyAdjustment)
                                                        <div class="card card-outline card-warning collapsed-card" style="margin-bottom: 0;">
                                                            <div class="card-header p-1" style="cursor: pointer;" data-card-widget="collapse">
                                                                <h3 class="card-title" style="font-size: 0.85rem;">
                                                                    Adjustments
                                                                </h3>
                                                                <div class="card-tools">
                                                                    <button type="button" class="btn btn-tool btn-sm">
                                                                        <i class="fas fa-plus"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="card-body p-2" style="display: none;">
                                                                @if($hasExtras)
                                                                <div class="row no-gutters align-items-center mb-1">
                                                                    <div class="col-4">
                                                                        <small>Extras</small>
                                                                    </div>
                                                                    <div class="col-8">
                                                                        <input type="number" step="0.01" class="form-control form-control-sm adjustment-ekstra text-right autosave-field"
                                                                            name="items[{{ $index }}][adj_ekstra]"
                                                                            data-field-name="adj_ekstra"
                                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                            value="{{ $existingDetail ? $existingDetail->adj_ekstra : 0 }}">
                                                                    </div>
                                                                </div>
                                                                @else
                                                                <input type="hidden" name="items[{{ $index }}][adj_ekstra]" value="0">
                                                                @endif
                                                                
                                                                @if($hasRestan)
                                                                <div class="row no-gutters align-items-center mb-1">
                                                                    <div class="col-4">
                                                                        <small>Restan</small>
                                                                    </div>
                                                                    <div class="col-8">
                                                                        <input type="number" step="0.01" class="form-control form-control-sm adjustment-restan text-right autosave-field"
                                                                            name="items[{{ $index }}][adj_restan]"
                                                                            data-field-name="adj_restan"
                                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                            value="{{ $existingDetail ? $existingDetail->adj_restan : 0 }}">
                                                                    </div>
                                                                </div>
                                                                @else
                                                                <input type="hidden" name="items[{{ $index }}][adj_restan]" value="0">
                                                                @endif
                                                                
                                                                @if($hasRingkas)
                                                                <div class="row no-gutters align-items-center mb-1">
                                                                    <div class="col-4">
                                                                        <small>Ringkas</small>
                                                                    </div>
                                                                    <div class="col-8">
                                                                        <input type="number" step="0.01" class="form-control form-control-sm adjustment-ringkas text-right autosave-field"
                                                                            name="items[{{ $index }}][adj_ringkas]"
                                                                            data-field-name="adj_ringkas"
                                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                            value="{{ $existingDetail ? $existingDetail->adj_ringkas : 0 }}">
                                                                    </div>
                                                                </div>
                                                                @else
                                                                <input type="hidden" name="items[{{ $index }}][adj_ringkas]" value="0">
                                                                @endif
                                                                
                                                                @if($hasSelisih)
                                                                <div class="row no-gutters align-items-center">
                                                                    <div class="col-4">
                                                                        <small>Selisih</small>
                                                                    </div>
                                                                    <div class="col-8">
                                                                        <input type="number" step="0.01" class="form-control form-control-sm adjustment-selisih text-right autosave-field"
                                                                            name="items[{{ $index }}][adj_selisih]"
                                                                            data-field-name="adj_selisih"
                                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                                            value="{{ $existingDetail ? $existingDetail->adj_selisih : 0 }}">
                                                                    </div>
                                                                </div>
                                                                @else
                                                                <input type="hidden" name="items[{{ $index }}][adj_selisih]" value="0">
                                                                @endif
                                                            </div>
                                                        </div>
                                                        @elseif($hasInvMatrix && !$hasAnyAdjustment)
                                                        <div class="text-center text-muted">
                                                            <small>No adjustment columns<br>enabled for this item</small>
                                                            <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">
                                                        </div>
                                                        @else
                                                        <div class="text-center text-muted">
                                                            <small>Adjustment not available<br>for this material</small>
                                                            <!-- Hidden inputs with 0 values for form submission -->
                                                            <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">
                                                        </div>
                                                        @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>
                                                        @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 }}"
                                                            title="Hapus baris ini">
                                                            <i class="fa fa-eraser"></i>
                                                        </button>
                                                    </td> 
                                                </tr>
                                                
                                                {{-- 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" 
                                                    data-parent-id="{{ $rm->id }}" 
                                                    data-fstr-id="{{ $fstr->id }}"
                                                    data-component-qty="{{ $componentQtyPerUnit }}"
                                                    data-is-fstr="{{ $isFSTR ? 'true' : 'false' }}">
                                                    <td colspan="2" style="padding-left: 30px;">
                                                        <i class="fas fa-level-up-alt fa-rotate-90 text-muted"></i>
                                                        <small class="text-muted">FSTR:</small>
                                                        <strong>{{ $fstr->code }}</strong>
                                                    </td>
                                                    <td colspan="5">
                                                        <small>{{ $fstr->name }}</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="number" 
                                                            step="0.01" 
                                                            min="0" 
                                                            max="999999.99"
                                                            class="form-control form-control-sm 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="6" 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>

                            <!-- Notes -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="notes">Notes</label>
                                        <textarea class="form-control" name="notes" rows="3">{{ old('notes', $data->notes ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row mt-3">
                                <div class="col-12 text-right">
                                    @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
                                    <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->id > 0 && $data->status == 'Submitted')
                                    <button type="button" class="btn btn-sm btn-info button-cek-permission" data-permission="stock_opnames.create_spb" id="create-spb-btn">
                                        <i class="fas fa-file-invoice"></i> Create SPB
                                    </button>
                                    @endif
                                    <a href="{{ route('stock_opnames.index') }}" class="btn btn-sm btn-warning">
                                        <i class="fas fa-arrow-left"></i> Kembali
                                    </a>
                                </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
                    const calculatedRMs = new Set();
                    for (let rmId of affectedRMs) {
                        if (!calculatedRMs.has(rmId)) {
                            calculateSPBSuggestion(rmId, true);
                            calculatedRMs.add(rmId);
                        }
                    }
                    
                    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 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
        row.find('.ending-stock').val(
            typeof lsmAktual === 'number' ? lsmAktual.toFixed(2) : '0.00'
        );
        
        // Update DOI to 0
        row.find('.doi-value').val('0.00');
        
        // 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
            });
        }
        
        // Clear final qty editable
        const finalQtyInput = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
        if (finalQtyInput.length > 0) {
            finalQtyInput.val('');
        }
    }
    
    // ========================================
    // 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'] ?? []);
    let tsmData = @json($jsData['tsm'] ?? []);
    let openSPBData = @json($jsData['openSPB'] ?? []); // Open SPB per raw material
    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)
    
    printLog('=== CEK DATA SPB SUGGESTION ===');
    printLog('Tanggal SO:', soDate);
    printLog('Shipment Deliveries:', shipmentDeliveries);
    printLog('Shipment Suppliers:', shipmentSuppliers);
    
    // 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 Deliveries');
    }
    
    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;
    }
    
    /**
     * 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 period_id
            const itemPeriodId = mapping.period_id;
            
            // Find shipment deliveries that match item's period
            const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
                return delivery.period_id === itemPeriodId;
            });
            
            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 period yang sesuai');
                    printWarn('   → Silakan setup di menu: Master Data → Shipment Deliveries');
                    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 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 (skip holiday)
     * 
     * IMPORTANT: Both DO HARIAN and DO PERIODIK read from shipmentDeliveries (filter by period_id)
     * 
     * Formula untuk Item DO HARIAN:
     * - Check shipmentDeliveries for matching period_id (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) {
        const forecast = forecastData[rawMaterialId];
        if (!forecast) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada data forecast, SPB = 0`);
            return 0;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        
        const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
        const periodCode = mapping.period_code ? mapping.period_code.toUpperCase() : '';
        
        if (tipeDokumen === 'DO') {
            // DO (both HARIAN and PERIODIK) read from shipmentDeliveries
            // Filter by period_id from delivery_type
            const periodId = mapping.period_id;
            
            if (!periodId) {
                printWarn(`⚠️ RM ${rawMaterialId}: DO item tidak ada period_id, SPB = 0`);
                return 0;
            }
            
            // Check if there are matching delivery schedules for this period_id
            const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
                return delivery.period_id === periodId;
            });
            
            if (matchingDeliveries.length === 0) {
                printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada delivery schedule untuk period_id ${periodId}, SPB = 0`);
                return 0;
            }
            
            // DO has 2 types: HARIAN and PERIODIK
            if (periodCode === 'HARIAN') {
                // DO HARIAN: (Forecast H+1 + Forecast H+2 + TSM H+2) - LSM Aktual - Open SPB
                // Simple formula, no coverage logic needed
                printLog(`📦 RM ${rawMaterialId} - DO HARIAN - Ada ${matchingDeliveries.length} delivery schedule`);
                
                const forecastH1 = forecast.h_plus_1 || 0;
                const forecastH2 = forecast.h_plus_2 || 0;
                const tsm = tsmData[rawMaterialId] || 0;
                const openSPB = 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: Always PERIODIK (if HARIAN, it's a setting error)
            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)
     * - Skip holidays when summing forecast
     * 
     * 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 Sunday Jan 18
     * 
     * Example 3 - Skip holidays:
     * - 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:
     * - 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 (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));
        
        // Calculate shipment date (H+2 WORKING DAYS - skip holidays)
        const shipmentDate = addWorkingDays(soDate, 2);
        const shipmentDayName = getDayName(shipmentDate);
        
        printLog(`📦 RM ${rawMaterialId} - Shipment date (H+2 working days): ${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 (skip holidays)
        let totalForecast = 0;
        let currentDate = coverageStartDate;
        let daysIncluded = [];
        
        while (currentDate <= coverageEndDate) {
            // Skip if holiday
            if (!holidays.includes(currentDate)) {
                const dailyQty = forecast.daily[currentDate] || 0;
                totalForecast += dailyQty;
                daysIncluded.push(`${currentDate}:${dailyQty}`);
            } else {
                printLog(`   ⏭️ Skip holiday: ${currentDate}`);
            }
            
            currentDate = addDays(currentDate, 1);
        }
        
        printLog(`   📊 Total forecast: ${totalForecast.toFixed(2)} (${daysIncluded.length} days: ${daysIncluded.join(', ')})`);
        
        // 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 delivery_type_id
     * - Filters by matching period_id from item RM with period_id in delivery type
     * - 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 WORKING DAYS (skip holidays)
     * - 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 VALID shipment date
     * - Next shipment must be: delivery day AND not holiday
     * - Coverage period: from day after shipment UNTIL next shipment (INCLUSIVE)
     * - If only one delivery day, find next occurrence (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 working days = 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 working days = Thursday, Jan 15 (is a delivery day!)
     * - Next shipment = Monday, Jan 19
     * - Coverage: Friday Jan 16 to Monday Jan 19 (4 days)
     * - Sum ALL forecast (including holidays if any)
     * 
     * Example 3 - Next shipment is holiday:
     * - SO date: Thursday, Dec 25, 2025
     * - Delivery days: ["Monday", "Thursday"]
     * - H+2 working days = Monday, Dec 29 (skip Sat/Sun)
     * - Is a delivery day!
     * - Next shipment = Thursday, Jan 1, 2026 (HOLIDAY!)
     * - Skip to next valid = Monday, Jan 5, 2026
     * - Coverage: Tuesday Dec 30 to Monday Jan 5 (7 days)
     * - Sum ALL forecast including holidays (Dec 30, 31, Jan 1, 2, 3, 4, 5)
     * 
     * @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 period_id
        const periodId = mapping.period_id;
        if (!periodId) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada period_id di mapping`);
            return 0;
        }
        
        // Filter shipmentDeliveries by period_id and group by delivery_day
        const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
            return delivery.period_id === periodId;
        });
        
        if (matchingDeliveries.length === 0) {
            printWarn(`⚠️ RM ${rawMaterialId}: Tidak ada delivery schedule untuk period_id ${periodId}`);
            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 WORKING DAYS - skip holidays)
        const shipmentDate = addWorkingDays(soDate, 2);
        const shipmentDayName = getDayName(shipmentDate);
        
        printLog(`📦 RM ${rawMaterialId} - DO PERIODIK - Shipment date (H+2 working days): ${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 (skip holidays)
        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 (skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's the delivery day AND not a holiday
                if (deliveryDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                    nextShipmentDate = checkDate;
                    printLog(`   Single delivery day: 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 delivery day after shipment date (skip holidays)
            while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                const checkDate = addDays(shipmentDate, daysToCheck);
                const checkDayName = getDayName(checkDate);
                
                // Check if it's a delivery day AND not a holiday
                if (deliveryDays.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 - 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()];
    }
    
    /**
     * Apply order constraints (minimal_order and multiple_order)
     * 
     * @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) {
        finalQty = parseFloat(finalQty) || 0;
        
        // If finalQty is 0, no need to apply constraints
        if (finalQty === 0) {
            return 0;
        }
        
        // Apply minimal_order constraint
        const minimalOrder = parseFloat(mapping.minimal_order) || 0;
        if (minimalOrder > 0 && finalQty < minimalOrder) {
            finalQty = minimalOrder;
        }
        
        // Apply multiple_order constraint (round up to nearest multiple)
        const multipleOrder = parseFloat(mapping.multiple_order) || 0;
        if (multipleOrder > 1 && finalQty > 0) {
            finalQty = Math.ceil(finalQty / multipleOrder) * multipleOrder;
        }
        
        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 LSM Aktual vs thresholds
     * Determines badge color and text based on stock levels
     * Also adds tooltip with detailed information
     * 
     * @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;
        const reorderPoint = parseFloat(mapping.reorder_point) || 0;
        const minStock = parseFloat(mapping.min_stock) || 0;
        const maxStock = parseFloat(mapping.max_stock) || 0;
        
        let badge = '';
        let badgeClass = '';
        
        // Determine badge based on thresholds
        if (!reorderPoint && !minStock && !maxStock) {
            // No configuration
            badge = 'No Config';
            badgeClass = 'badge-secondary';
        } else if (lsmAktual < reorderPoint) {
            // Urgent - below reorder point
            badge = 'Urgent';
            badgeClass = 'badge-danger';
        } else if (lsmAktual < minStock) {
            // Warning - below min stock
            badge = 'Warning';
            badgeClass = 'badge-warning';
        } else if (lsmAktual < maxStock) {
            // Normal - between min and max
            badge = 'Normal';
            badgeClass = 'badge-success';
        } else {
            // Overstock - above max stock
            badge = 'Overstock';
            badgeClass = 'badge-info';
        }
        
        // Update badge element
        const badgeElement = $(`#status_badge_${rawMaterialId}`);
        if (badgeElement.length > 0) {
            // Get Open SPB for this item
            const openSPB = openSPBData[rawMaterialId] || 0;
            
            // Update badge text (without Open SPB)
            badgeElement
                .removeClass('badge-danger badge-warning badge-success badge-info badge-secondary')
                .addClass(badgeClass)
                .text(badge); // Use .text() since badge doesn't contain HTML
            
            // Update Open SPB in separate element
            const openSPBElement = $(`#open_spb_${rawMaterialId}`);
            if (openSPBElement.length > 0) {
                openSPBElement.text(`Open SPB: ${openSPB.toFixed(2)}`);
            }
            
            // Add tooltip with detailed information (Requirements: 11.3)
            const doiDisplay = doi === '∞' ? '∞' : (typeof doi === 'number' ? doi.toFixed(2) : '0.00');
            
            // Simplified HTML structure for tooltip (avoid complex tables)
            let tooltipContent = '<div style="text-align: left; min-width: 200px;">';
            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>`;
            
            // Always show Open SPB in tooltip
            tooltipContent += `<br><span style="color: #6c757d;">Open SPB:</span> <strong>${openSPB.toFixed(2)}</strong>`;
            
            if (reorderPoint > 0 || minStock > 0 || maxStock > 0) {
                // tooltipContent += '<hr style="margin: 8px 0; border-top: 1px solid #dee2e6;">';
                tooltipContent += '<br><strong>Threshold:</strong><br>';
                
                if (reorderPoint > 0) {
                    tooltipContent += `<span style="color: #6c757d;">Reorder Point:</span> ${reorderPoint.toFixed(2)}<br>`;
                }
                if (minStock > 0) {
                    tooltipContent += `<span style="color: #6c757d;">Min Stock:</span> ${minStock.toFixed(2)}<br>`;
                }
                if (maxStock > 0) {
                    tooltipContent += `<span style="color: #6c757d;">Max Stock:</span> ${maxStock.toFixed(2)}`;
                }
            }
            
            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,  // Allow HTML content
                placement: 'top',
                boundary: 'window',  // Prevent tooltip from being cut off
                trigger: 'hover'
            });
            
            // console.log(`Status badge tooltip updated for RM ${rawMaterialId}:`, {
            //     badge,
            //     lsmAktual,
            //     doi: doiDisplay,
            //     reorderPoint,
            //     minStock,
            //     maxStock
            // });
        }
    }
    
    /**
     * Update display elements with calculated values
     * Updates LSM Aktual, DOI, status badge, SPB suggestion, and final qty
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number|string} doi - DOI value or '∞'
     * @param {number} suggestedQty - Suggested quantity
     * @param {number|string} finalQty - Final quantity or '-'
     * 
     * Requirements: 7.1, 7.2, 7.3
     */
    function updateDisplay(rawMaterialId, lsmAktual, doi, suggestedQty, finalQty) {
        // Find the row for this raw material
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        if (row.length === 0) {
            return;
        }
        
        // Update LSM Aktual (ending stock)
        row.find('.ending-stock').val(
            typeof lsmAktual === 'number' ? lsmAktual.toFixed(2) : '0.00'
        );
        
        // Update DOI
        row.find('.doi-value').val(
            doi === '∞' ? '∞' : (typeof doi === 'number' ? doi.toFixed(2) : '0.00')
        );
        
        // Update Status Badge with tooltip (Requirements: 11.3)
        updateStatusBadge(rawMaterialId, lsmAktual, doi);
        
        // Update SPB Suggestion display with tooltip (Requirements: 11.1, 11.2)
        const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
        if (spbSuggestionElement.length > 0) {
            if (finalQty === '-' || finalQty === 0) {
                spbSuggestionElement.text('-');
                // Remove tooltip if no suggestion
                if (spbSuggestionElement.data('bs.tooltip')) {
                    spbSuggestionElement.tooltip('dispose');
                }
            } else {
                // Check if item uses UOM Kirim (if yes, show as integer; if no, show with 2 decimals)
                const mapping = mappingData[rawMaterialId];
                const hasKirimConversion = mapping && mapping.conversion_factor_kirim_utuh && 
                                          parseFloat(mapping.conversion_factor_kirim_utuh) > 0;
                
                // Display as integer for Kirim, decimal for Utuh
                const displayValue = typeof finalQty === 'number' 
                    ? (hasKirimConversion ? Math.round(finalQty).toString() : finalQty.toFixed(2))
                    : finalQty;
                    
                spbSuggestionElement.text(displayValue);
                
                // Add tooltip with calculation details
                updateSPBTooltip(rawMaterialId, suggestedQty, finalQty);
            }
        }
        
        // Update editable final qty input
        const finalQtyInput = $(`#spb_suggestion_qty_final_${rawMaterialId}`);
        if (finalQtyInput.length > 0) {
            // Only update if user hasn't manually edited it
            if (!finalQtyInput.data('user-edited')) {
                if (finalQty === '-' || finalQty === 0) {
                    finalQtyInput.val('');
                } else {
                    // Check if item uses UOM Kirim
                    const mapping = mappingData[rawMaterialId];
                    const hasKirimConversion = mapping && mapping.conversion_factor_kirim_utuh && 
                                              parseFloat(mapping.conversion_factor_kirim_utuh) > 0;
                    
                    // Display as integer for Kirim, decimal for Utuh
                    const inputValue = typeof finalQty === 'number'
                        ? (hasKirimConversion ? Math.round(finalQty).toString() : finalQty.toFixed(2))
                        : finalQty;
                        
                    finalQtyInput.val(inputValue);
                }
            }
        }
        
        // Update SPB suggestion date (H+1 working days)
        const spbSuggestionDateInput = row.find('.spb-suggestion-date-input');
        if (spbSuggestionDateInput.length > 0) {
            if (finalQty === '-' || finalQty === 0) {
                // No SPB suggestion, clear date
                spbSuggestionDateInput.val('');
            } else {
                // Calculate H+1 working days (skip holidays)
                const spbDate = addWorkingDays(soDate, 1);
                spbSuggestionDateInput.val(spbDate);
            }
        }
    }
    
    /**
     * Update SPB suggestion tooltip with calculation details
     * Shows simplified calculation for easy understanding
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} suggestedQty - Suggested quantity before constraints
     * @param {number} finalQty - Final quantity after constraints
     * 
     * Requirements: 11.1, 11.2, 11.4, 11.5, 5.5
     */
    function updateSPBTooltip(rawMaterialId, suggestedQty, finalQty) {
        const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
        const mapping = mappingData[rawMaterialId];
        
        if (!mapping || !spbSuggestionElement.length) {
            printWarn(`⚠️ Tooltip tidak bisa dibuat untuk RM ${rawMaterialId}: mapping atau element tidak ada`);
            return;
        }
        
        const forecast = forecastData[rawMaterialId];
        const tipeDokumen = mapping.tipe_dokumen ? mapping.tipe_dokumen.toUpperCase() : '';
        const isDO = tipeDokumen === 'DO';
        
        // 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);
        
        // Get LSM Aktual from the row
        const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
        const lsmAktual = parseFloat(row.find('.ending-stock').val()) || 0;
        
        let tooltipLines = [];
        tooltipLines.push('<div style="text-align:left; min-width:250px;">');
        // tooltipLines.push('<strong>Perhitungan SPB</strong><br>');
        // tooltipLines.push('<hr style="margin:5px 0">');
        
        if (isDO) {
            // Item DO (Delivery Order)
            const periodCode = mapping.period_code ? mapping.period_code.toUpperCase() : '';
            const periodId = mapping.period_id;
            
            if (!periodId) {
                tooltipLines.push(`<span class="text-warning">⚠️ Tidak ada period_id</span><br>`);
                tooltipLines.push('</div>');
                return tooltipLines.join('');
            }
            
            // Check if there are matching delivery schedules
            const matchingDeliveries = Object.values(shipmentDeliveries).filter(delivery => {
                return delivery.period_id === periodId;
            });
            
            if (matchingDeliveries.length === 0) {
                tooltipLines.push(`<span class="text-warning">⚠️ Tidak ada delivery schedule</span><br>`);
                tooltipLines.push('</div>');
                return tooltipLines.join('');
            }
            
            if (periodCode === 'HARIAN') {
                // DO HARIAN - Simplified
                const forecastH1 = forecast ? (forecast.h_plus_1 || 0) : 0;
                const forecastH2 = forecast ? (forecast.h_plus_2 || 0) : 0;
                const tsm = tsmData[rawMaterialId] || 0;
                const openSPB = openSPBData[rawMaterialId] || 0;
                const total = forecastH1 + forecastH2 + tsm;
                
                tooltipLines.push(`<small class="text-muted">DO HARIAN (${matchingDeliveries.length} delivery schedule)</small><br>`);
                tooltipLines.push(`Forecast Besok: <strong>${forecastH1.toFixed(2)}</strong><br>`);
                tooltipLines.push(`Forecast Lusa: <strong>${forecastH2.toFixed(2)}</strong><br>`);
                tooltipLines.push(`TSM Lusa: <strong>${tsm.toFixed(2)}</strong><br>`);
                tooltipLines.push(`Subtotal: <strong>${total.toFixed(2)}</strong><br>`);
                tooltipLines.push(`LSM Aktual: <strong>-${lsmAktual.toFixed(2)}</strong><br>`);
                if (openSPB > 0) {
                    tooltipLines.push(`Open SPB: <strong>-${openSPB.toFixed(2)}</strong><br>`);
                }
                tooltipLines.push(`Hasil: <strong>${suggestedQty.toFixed(2)}</strong> <br>`);
                tooltipLines.push(`Pakai → Utuh → Kirim<br>`);
            } else {
                // DO PERIODIK - Coverage Period Based (like PR but don't skip holidays)
                
                if (matchingDeliveries.length === 0) {
                    tooltipLines.push(`<span class="text-warning">⚠️ Tidak ada delivery schedule</span><br>`);
                    tooltipLines.push('</div>');
                    return tooltipLines.join('');
                }
                
                // Extract unique delivery days
                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;
                }))];
                
                const dayOrder = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                deliveryDays.sort((a, b) => dayOrder.indexOf(a) - dayOrder.indexOf(b));
                
                // Calculate shipment date (H+2 WORKING DAYS - skip holidays)
                const shipmentDate = addWorkingDays(soDate, 2);
                const shipmentDayName = getDayName(shipmentDate);
                
                // Check if shipment date falls on a delivery day
                if (!deliveryDays.includes(shipmentDayName)) {
                    tooltipLines.push(`<small class="text-muted">DO PERIODIK</small><br>`);
                    tooltipLines.push(`<small class="text-muted">Shipment (H+2 kerja): ${shipmentDate} (${shipmentDayName})</small><br>`);
                    tooltipLines.push(`<span class="text-warning">⚠️ Bukan hari delivery</span><br>`);
                    tooltipLines.push(`<small class="text-muted">Delivery days: ${deliveryDays.join(', ')}</small><br>`);
                    tooltipLines.push('</div>');
                    return tooltipLines.join('');
                }
                
                // Find next shipment date (skip holidays)
                let nextShipmentDate = null;
                let daysToCheck = 1;
                const maxDaysToCheck = 14;
                
                if (deliveryDays.length === 1) {
                    while (daysToCheck <= maxDaysToCheck && !nextShipmentDate) {
                        const checkDate = addDays(shipmentDate, daysToCheck);
                        const checkDayName = getDayName(checkDate);
                        
                        if (deliveryDays.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 (deliveryDays.includes(checkDayName) && !holidays.includes(checkDate)) {
                            nextShipmentDate = checkDate;
                            break;
                        }
                        
                        daysToCheck++;
                    }
                    
                    if (!nextShipmentDate) {
                        nextShipmentDate = addDays(shipmentDate, 7);
                    }
                }
                
                // Calculate coverage period (INCLUSIVE until next shipment)
                const coverageStartDate = addDays(shipmentDate, 1);
                const coverageEndDate = nextShipmentDate; // INCLUSIVE
                
                // Sum forecast for coverage period (DO NOT skip holidays!)
                let totalForecast = 0;
                let daysIncluded = 0;
                let currentDate = coverageStartDate;
                
                if (forecast && forecast.daily) {
                    while (currentDate <= coverageEndDate) {
                        // DO PERIODIK: Include ALL days, even holidays
                        totalForecast += forecast.daily[currentDate] || 0;
                        daysIncluded++;
                        currentDate = addDays(currentDate, 1);
                    }
                }
                
                const openSPB = openSPBData[rawMaterialId] || 0;
                
                tooltipLines.push(`<small class="text-muted">DO PERIODIK (TIDAK skip holiday)</small><br>`);
                tooltipLines.push(`<small class="text-muted">Shipment (H+2 kerja): ${shipmentDate} (${shipmentDayName})</small><br>`);
                tooltipLines.push(`<small class="text-muted">Coverage: ${coverageStartDate} - ${coverageEndDate}</small><br>`);
                tooltipLines.push(`Total Forecast (${daysIncluded} hari): <strong>${totalForecast.toFixed(2)}</strong><br>`);
                tooltipLines.push(`LSM Aktual: <strong>-${lsmAktual.toFixed(2)}</strong><br>`);
                if (openSPB > 0) {
                    tooltipLines.push(`Open SPB: <strong>-${openSPB.toFixed(2)}</strong><br>`);
                }
                tooltipLines.push(`Hasil: <strong>${suggestedQty.toFixed(2)} Pakai</strong><br>`);
                tooltipLines.push(`<small class="text-info">* Semua hari dihitung (termasuk libur)</small><br>`);
            }
        } else {
            // Item PR (Purchase Request) - Coverage Period Based
            const supplier = shipmentSuppliers[rawMaterialId];
            
            if (!supplier || !supplier.shifts || supplier.shifts.length === 0) {
                tooltipLines.push(`<span class="text-warning">⚠️ Tidak ada shifts data</span><br>`);
                tooltipLines.push('</div>');
                return tooltipLines.join('');
            }
            
            // 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));
            
            // Calculate shipment date (H+2 WORKING DAYS - skip holidays)
            const shipmentDate = addWorkingDays(soDate, 2);
            const shipmentDayName = getDayName(shipmentDate);
            
            // Check if shipment date falls on a shift day
            if (!shiftDays.includes(shipmentDayName)) {
                tooltipLines.push(`<small class="text-muted">Shipment (H+2 kerja): ${shipmentDate} (${shipmentDayName})</small><br>`);
                tooltipLines.push(`<span class="text-warning">⚠️ Bukan hari shift</span><br>`);
                tooltipLines.push(`<small class="text-muted">Shifts: ${shiftDays.join(', ')}</small><br>`);
                tooltipLines.push('</div>');
                return tooltipLines.join('');
            }
            
            // Find next shipment date (skip holidays)
            let nextShipmentDate = null;
            let daysToCheck = 1;
            const maxDaysToCheck = 14; // Safety limit
            
            if (shiftDays.length === 1) {
                // Find next occurrence of shift day (skip holidays)
                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 {
                // Find next shift day (skip holidays)
                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);
                }
            }
            
            // Calculate coverage period (INCLUSIVE until next shipment)
            const coverageStartDate = addDays(shipmentDate, 1);
            const coverageEndDate = nextShipmentDate; // INCLUSIVE
            
            // Sum forecast for coverage period
            let totalForecast = 0;
            let daysIncluded = 0;
            let holidaysSkipped = 0;
            let currentDate = coverageStartDate;
            
            if (forecast && forecast.daily) {
                while (currentDate <= coverageEndDate) {
                    if (!holidays.includes(currentDate)) {
                        totalForecast += forecast.daily[currentDate] || 0;
                        daysIncluded++;
                    } else {
                        holidaysSkipped++;
                    }
                    currentDate = addDays(currentDate, 1);
                }
            }
            
            const openSPB = openSPBData[rawMaterialId] || 0;
            
            tooltipLines.push(`<small class="text-muted">Shipment (H+2 kerja): ${shipmentDate} (${shipmentDayName})</small><br>`);
            tooltipLines.push(`<small class="text-muted">Coverage: ${coverageStartDate} - ${coverageEndDate}</small><br>`);
            tooltipLines.push(`Total Forecast (${daysIncluded} hari): <strong>${totalForecast.toFixed(2)}</strong><br>`);
            if (holidaysSkipped > 0) {
                tooltipLines.push(`<small class="text-muted">(Skip ${holidaysSkipped} hari libur)</small><br>`);
            }
            tooltipLines.push(`LSM Aktual: <strong>-${lsmAktual.toFixed(2)}</strong><br>`);
            if (openSPB > 0) {
                tooltipLines.push(`Open SPB: <strong>-${openSPB.toFixed(2)}</strong><br>`);
            }
            // tooltipLines.push(`<hr style="margin:5px 0">`);
            tooltipLines.push(`Hasil: <strong>${suggestedQty.toFixed(2)} Pakai</strong><br>`);
        }
        
        // Show conversion if needed
        if (hasKirimConversion) {
            const qtyUtuh = suggestedQty / conversionUtuhPakai;
            const qtyKirim = Math.round(qtyUtuh / conversionKirimUtuh);
            
            // tooltipLines.push(`<hr style="margin:5px 0">`);
            tooltipLines.push(`<strong>${suggestedQty.toFixed(2)} → ${qtyUtuh.toFixed(2)} → ${qtyKirim.toFixed(2)}</strong><br>`); 
            // tooltipLines.push(`<small>Konv: ${suggestedQty.toFixed(2)} Pakai → ${qtyUtuh.toFixed(2)} Utuh → <strong>${qtyKirim} Kirim</strong></small><br>`);
        } else if (conversionUtuhPakai > 1) {
            const qtyUtuh = suggestedQty / conversionUtuhPakai;
            tooltipLines.push(`<hr style="margin:5px 0">`);
            tooltipLines.push(`<small>Konv: ${suggestedQty.toFixed(2)} Pakai → <strong>${qtyUtuh.toFixed(2)} Utuh</strong></small><br>`);
        }
        
        tooltipLines.push('</div>');
        
        const tooltipContent = tooltipLines.join('');
        
        // Dispose old tooltip first
        if (spbSuggestionElement.data('bs.tooltip')) {
            spbSuggestionElement.tooltip('dispose');
        }
        
        // Initialize new tooltip with sanitize disabled to allow HTML
        spbSuggestionElement.tooltip({
            html: true,
            placement: 'top',
            trigger: 'hover',
            title: tooltipContent,
            sanitize: false,
            boundary: 'window'
        });
        
        // Removed verbose log for cleaner output
    }
    
    /**
     * 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) {
        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
                    updateDisplay(rawMaterialId, cached.lsmAktual, cached.doi, cached.suggestedQty, cached.finalQty);
                    
                    // 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 "-" in SPB columns for items without mapping
                updateDisplay(rawMaterialId, 0, 0, 0, '-');
                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 for raw material ${rawMaterialId}:`, conversionFactor);
                showConversionWarning(rawMaterialId, 'Konversi tidak valid');
                updateDisplay(rawMaterialId, 0, 0, 0, '-');
                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_fstr_to_item to FSTR contribution
            // This converts FSTR summary qty to ending stock item qty
            // Formula: fstrContribution / conversion_factor_fstr_to_item
            // Keep 4 decimals during calculation, round to 2 decimals before adding to ending stock
            const conversionFactorFstrToItem = parseFloat(mapping.conversion_factor_fstr_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);
            
            // 5. Check reorder point threshold
            const reorderPoint = parseFloat(mapping.reorder_point) || 0;
            
            // Summary log: Explain why SPB is not shown (important for troubleshooting)
            if (!hasShipment) {
                printLog(`❌ RM ${rawMaterialId}: SPB tidak muncul - Tidak ada jadwal pengiriman (${mapping.tipe_dokumen})`);
            } else if (lsmAktual > reorderPoint) {
                printLog(`ℹ️ RM ${rawMaterialId}: SPB tidak muncul - Stok cukup (LSM: ${lsmAktual.toFixed(2)} > Reorder: ${reorderPoint})`);
            }
            
            // If no shipment or LSM above reorder point, don't show SPB suggestion
            if (!hasShipment || lsmAktual > reorderPoint) {
                // Show user-friendly message in SPB column
                const spbElement = $(`#spb_suggestion_${rawMaterialId}`);
                if (spbElement.length > 0) {
                    if (!hasShipment) {
                        // No shipment schedule - show warning badge
                        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>`);
                    } else {
                        // LSM above reorder point - show info badge
                        spbElement.html(`<span class="badge badge-info" title="Stok masih di atas reorder point (${reorderPoint})"><i class="fas fa-info-circle"></i> Stok Cukup</span>`);
                    }
                }
                
                const result = { lsmAktual, doi, suggestedQty: 0, finalQty: '-' };
                setCachedResult(rawMaterialId, result);
                updateDisplay(rawMaterialId, lsmAktual, doi, 0, '-');
                
                // Record performance
                const calcDuration = performance.now() - calcStartTime;
                performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
                
                return;
            }
            
            // 6. Calculate suggested qty (already includes LSM Aktual subtraction)
            const suggestedQty = calculateSuggestedQty(rawMaterialId, mapping, lsmAktual);
            
            // Removed verbose log for cleaner output
             
            // 7. Apply constraints (in UOM Pakai)
            let finalQty = applyOrderConstraints(suggestedQty, mapping);
            
            // 8. Convert to UOM Kirim if needed
            // Conversion chain: Pakai → Utuh → Kirim
            let finalQtyKirim = finalQty;
            const conversionUtuhPakai = parseFloat(mapping.conversion_factor_utuh_pakai);
            const conversionKirimUtuh = parseFloat(mapping.conversion_factor_kirim_utuh);
            
            if (conversionKirimUtuh && conversionKirimUtuh > 0 && !isNaN(conversionKirimUtuh)) {
                // Step 1: Convert from Pakai to Utuh
                // Formula: qty_utuh = qty_pakai / conversion_factor_utuh_pakai
                const finalQtyUtuh = finalQty / conversionUtuhPakai;
                
                // Step 2: Convert from Utuh to Kirim (rounded to nearest integer)
                // Formula: qty_kirim = ROUND(qty_utuh / conversion_factor_kirim_utuh)
                finalQtyKirim = Math.round(finalQtyUtuh / conversionKirimUtuh);
                
                // Removed verbose log for cleaner output
            } else {
                // No conversion to Kirim, just convert to Utuh
                finalQtyKirim = finalQty / conversionUtuhPakai;
                
                // Removed verbose log for cleaner output
            }
            
            // Cache the result (store both Pakai and Kirim for reference)
            const result = { 
                lsmAktual, 
                doi, 
                suggestedQty, 
                finalQty: finalQtyKirim, // Display value in UOM Kirim
                finalQtyPakai: finalQty  // Keep original for reference
            };
            setCachedResult(rawMaterialId, result);
            
            // 10. Update display (with converted value)
            updateDisplay(rawMaterialId, lsmAktual, doi, suggestedQty, finalQtyKirim);
            
            // 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 "-" in SPB columns when error occurs
            updateDisplay(rawMaterialId, 0, 0, 0, '-');
            
            // Record performance even on error
            const calcDuration = performance.now() - calcStartTime;
            performanceMonitor.recordCalculation(rawMaterialId, calcDuration);
        }
    }
    
    // ========================================
    // End SPB Suggestion Calculation Functions
    // ========================================
    
    // ========================================
    // Event Handlers for SPB Suggestions
    // ========================================
    
    /**
     * 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() {
        // Listen to input events with debouncing for better performance
        $(document).on('input', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            
            if (rawMaterialId) {
                // Invalidate cache when input changes
                invalidateCache(rawMaterialId);
                
                // Debounce the calculation to avoid excessive recalculations
                debounce(calculateSPBSuggestion, rawMaterialId);
            }
        });
        
        // Listen to change events (when user leaves the field) without debouncing
        // This ensures calculation happens immediately when user moves to next field
        $(document).on('change', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            
            if (rawMaterialId) {
                // Clear any pending debounced calculation
                if (debounceTimers[rawMaterialId]) {
                    clearTimeout(debounceTimers[rawMaterialId]);
                    delete debounceTimers[rawMaterialId];
                }
                
                // Calculate immediately (force recalculate to bypass cache)
                calculateSPBSuggestion(rawMaterialId, true);
            }
        });
        
        // 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
     * Saves edited value and shows visual indicator for manual edit
     * 
     * Requirements: 18.2, 18.5
     */
    function attachFinalQtyEventHandlers() {
        // Listen to input/change events on spb_suggestion_qty_final
        $(document).on('input change', '.final-qty-editable', function() {
            const input = $(this);
            const rawMaterialId = input.attr('id').replace('spb_suggestion_qty_final_', '');
            const userValue = parseFloat(input.val());
            
            // Get the system-calculated value
            const spbSuggestionElement = $(`#spb_suggestion_${rawMaterialId}`);
            const systemValue = parseFloat(spbSuggestionElement.text());
            
            // Mark as user-edited if value differs from system calculation
            if (!isNaN(userValue) && userValue !== systemValue) {
                input.data('user-edited', true);
                
                // Add visual indicator (border color change)
                input.addClass('border-warning');
                input.attr('title', 'Nilai ini telah diedit manual');
                
                // Save to session storage for persistence
                sessionStorage.setItem(`final_qty_${rawMaterialId}`, userValue);
                
                printLog(`✏️ Final qty diedit manual untuk RM ${rawMaterialId}: ${userValue}`);
            } else {
                // Remove user-edited flag if value matches system calculation
                input.data('user-edited', false);
                input.removeClass('border-warning');
                input.removeAttr('title');
                
                // Remove from session storage
                sessionStorage.removeItem(`final_qty_${rawMaterialId}`);
            }
        });
        
        // console.log('Event handlers attached for spb_suggestion_qty_final inputs');
    }
    
    /**
     * 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) {
                mappingData[rmId] = {
                    conversion_factor_utuh_pakai: $(this).data('conversion-utuh-pakai'),
                    conversion_factor_kirim_utuh: $(this).data('conversion-kirim-utuh'),
                    conversion_factor_fstr_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'),
                    reorder_point: $(this).data('reorder-point'),
                    min_stock: $(this).data('min-stock'),
                    max_stock: $(this).data('max-stock'),
                    minimal_order: $(this).data('minimal-order'),
                    multiple_order: $(this).data('multiple-order'),
                    spb_flag: true
                };
                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');
                
                // console.log(`Restored manual edit for RM ${rmId}: ${savedValue}`);
            }
        });
        
        // 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
        batchCalculateSPBSuggestions(rawMaterialIds);
        
        const endTime = performance.now();
        printLog(`✓ SPB suggestions inisialisasi selesai dalam ${(endTime - startTime).toFixed(2)}ms`);
    }
    
    // ========================================
    // End Event Handlers and Initialization
    // ========================================
    
    $(document).ready(function() {
        // ========================================
        // Initialize SPB Suggestions
        // ========================================
        initializeSPBSuggestions();
        
        // Attach event handlers
        attachSPBEventHandlers();
        attachFSTREventHandlers();
        attachFinalQtyEventHandlers();
        
        // 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) {
                    stockDisplay.find('.stock-utuh').text(parseFloat(stockData.qty_utuh).toFixed(0));
                    stockDisplay.find('.stock-pakai').text(parseFloat(stockData.qty_pakai).toFixed(2));

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

                    stockDisplay.find('.stock-last-updated').text(`Last: ${stockData.last_updated}`);

                    // Add tooltip with more info
                    stockDisplay.attr('title',
                        `Total: ${parseFloat(stockData.qty_total_converted).toFixed(2)} ${stockData.uom_pakai}\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 row = $(this).closest('tr');

            Swal.fire({
                title: 'Hapus Baris?',
                text: 'Ini akan mereset semua nilai di baris ini menjadi nol. Anda yakin?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Clear all input fields in this row
                    row.find('input[type="number"]').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 calculated fields
                    row.find('.ending-stock').text('0.00');
                    row.find('.doi-value').text('0.00');

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

        // Autosave functionality
        let saveTimeout;

        $(document).on('change', '.autosave-field', function() {
            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');

            // Get current row to extract qty_utuh, qty_pakai, and item_olahan
            const row = field.closest('tr');
            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;

            // Debug logging
            // console.log('Autosave triggered for:', {
            //     fieldName: fieldName,
            //     value: value,
            //     soDetailId: soDetailId,
            //     hasExistingData: hasExistingData,
            //     originalValue: originalValue,
            //     valueChanged: value != originalValue,
            //     qtyUtuh: qtyUtuh,
            //     qtyPakai: qtyPakai,
            //     itemOlahan: itemOlahan,
            //     spbSuggestionDate: spbSuggestionDate
            // });

            // 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;
            }

            console.log('Proceeding with autosave...');

            // Show confirmation for existing data
            if (hasExistingData && value != originalValue) {
                showEditConfirmation(field, value, soDetailId, fieldName, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate);
            } else {
                autoSaveField(soDetailId, fieldName, value, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate);
            }
        });

        function showEditConfirmation(field, newValue, soDetailId, fieldName, qtyUtuh, qtyPakai, itemOlahan, spbSuggestionDate) {
            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);
                    field.data('original-value', newValue); // Update original value
                } else {
                    field.val(field.data('original-value')); // Revert
                }
            });
        }

        function autoSaveField(soDetailId, fieldName, value, qtyUtuh = null, qtyPakai = null, itemOlahan = null, spbSuggestionDate = null) {
            // 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');

            // 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;
            }

            $.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);
                        showSaveSuccess();
                        
                        // Requirement 12.2: Recalculate SPB suggestions after autosave success
                        // Find the raw material ID from the row
                        const row = $(`.autosave-field[data-so-detail-id="${soDetailId}"]`).first().closest('tr');
                        const rawMaterialId = row.data('raw-material-id');
                        
                        if (rawMaterialId) {
                            printLog(`✓ Autosave berhasil untuk RM ${rawMaterialId}, recalculating SPB`);
                            // Force recalculate to ensure fresh data after save
                            calculateSPBSuggestion(rawMaterialId, true);
                        }
                    } 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);
                }
            });
        }

        function updateCalculatedFields(soDetailId, data) {
            // Find the specific row by SO detail ID
            const row = $(`.autosave-field[data-so-detail-id="${soDetailId}"]`).first().closest('tr');

            if (row.length > 0) {
                // Update calculated fields in the specific row only
                // Use lsm_aktual for ending stock
                row.find('.ending-stock').val((data.lsm_aktual || 0).toFixed(2));
                row.find('.doi-value').val((data.doi || 0).toFixed(2));

                // 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);
            }
        }

        // 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);
        });

        // Input validation for Adjustment fields (Decimal with max 2 decimal places)
        $('.adjustment-ekstra, .adjustment-restan, .adjustment-ringkas, .adjustment-selisih').on('input', function() {
            let value = $(this).val();

            // Allow only numbers, dot, comma, and minus sign
            value = value.replace(/[^0-9.,-]/g, '');

            // Convert comma to dot
            value = value.replace(',', '.');

            // Handle negative sign - only at the beginning
            const isNegative = value.startsWith('-');
            value = value.replace(/-/g, '');
            if (isNegative) {
                value = '-' + value;
            }

            // Split by decimal point
            const parts = value.replace('-', '').split('.');

            // Limit integer part to 6 digits
            if (parts[0].length > 6) {
                parts[0] = parts[0].substring(0, 6);
            }

            // Limit decimal part to 2 digits
            if (parts.length > 1) {
                parts[1] = parts[1].substring(0, 2);
                value = (isNegative ? '-' : '') + parts[0] + '.' + parts[1];
            } else {
                value = (isNegative ? '-' : '') + parts[0];
            }

            // Prevent multiple decimal points
            const dotCount = (value.match(/\./g) || []).length;
            if (dotCount > 1) {
                value = value.substring(0, value.lastIndexOf('.'));
            }

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

        // 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 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));
                }
            }
        });

        // Format adjustment fields to 2 decimal places
        $('.adjustment-ekstra, .adjustment-restan, .adjustment-ringkas, .adjustment-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));
                }
            }
        });

        // Calculate ending stock when qty changes
        $(document).on('input', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const qtyUtuh = parseFloat(row.find('.qty-utuh').val()) || 0;
            const qtyPakai = parseFloat(row.find('.qty-pakai').val()) || 0;
            const conversion = parseFloat(row.find('.qty-utuh').data('conversion')) || 1;

            const qtyConverted = qtyUtuh * conversion;
            const endingStock = qtyConverted + qtyPakai;

            row.find('.ending-stock').val(endingStock.toFixed(2));

            // DOI will be calculated by backend after autosave
            // Don't calculate here to avoid random values
        });

        // 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');
                    $('.ending-stock, .doi-value').val('0.00');
                    $('.adjustment-ekstra, .adjustment-restan, .adjustment-ringkas, .adjustment-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 = {
                        reorder_point: $row.data('reorder-point'),
                        min_stock: $row.data('min-stock'),
                        max_stock: $row.data('max-stock'),
                        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();
            // console.log('Submit button clicked');

            // Konfirmasi sebelum submit
            Swal.fire({
                title: 'Submit Stock Opname?',
                text: 'Data yang sudah disubmit tidak dapat diubah lagi. Pastikan semua data sudah benar.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Submit',
                cancelButtonText: 'Batal'
            }).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
    });
</script>
<style> 
    /* ========================================
       Task 22.1: Loading Indicators
       ======================================== */
    
    /* Page Loading Overlay */
    .page-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .page-loading-spinner {
        width: 60px;
        height: 60px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #ffc107;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .page-loading-text {
        margin-top: 20px;
        font-size: 16px;
        color: #495057;
        font-weight: 500;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Autosave Indicator - Enhanced */
    .save-indicator,
    .save-success,
    .save-error {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 8px;
        z-index: 9999;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 10px;
        animation: slideInRight 0.3s ease-out;
    }

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

    .save-indicator {
        background: rgba(0, 123, 255, 0.95);
        color: white;
    }

    .save-success {
        background: rgba(40, 167, 69, 0.95);
        color: white;
    }

    .save-error {
        background: rgba(220, 53, 69, 0.95);
        color: white;
    }

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

    /* Inline Field Loading Indicator */
    .field-saving {
        position: relative;
    }

    .field-saving::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #007bff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .autosave-field:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* Store Display Styles */
    .form-control-plaintext {
        background-color: #f8f9fa !important;
        border: 1px solid #ced4da !important;
        color: #495057 !important;
    }

    #selected_store_display {
        color: #007bff !important;
        font-weight: 600 !important;
    }

    /* Current Stock Display Styles */
    .current-stock-display {
        text-align: center;
        font-size: 0.8rem;
    }

    .stock-qty {
        font-weight: 600;
        margin-bottom: 2px;
    }

    .stock-utuh {
        color: #007bff;
    }

    .stock-pakai {
        color: #28a745;
    }

    .stock-status {
        margin-bottom: 2px;
    }

    .stock-status-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }

    .stock-last-updated {
        font-size: 0.65rem;
        display: block;
    }

    .stock-loading {
        padding: 10px;
        color: #6c757d;
    }

    /* Change History Modal Styles */
    #changeHistoryModal .modal-dialog {
        max-width: 90%;
    }

    #historyTable {
        font-size: 0.875rem;
    }

    #historyTable th {
        background-color: #f8f9fa;
        border-top: none;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
    }

    #historyTable td {
        vertical-align: middle;
        padding: 0.5rem;
    }

    .view-history {
        transition: all 0.2s ease;
    }

    .view-history:hover {
        transform: scale(1.1);
    }

    .clear-row {
        transition: all 0.2s ease;
    }

    .clear-row:hover {
        transform: scale(1.1);
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
    }

    .badge {
        font-size: 0.75em;
    }

    /* Change type indicators */
    .text-success .fa-arrow-up {
        color: #28a745;
    }

    .text-danger .fa-arrow-down {
        color: #dc3545;
    }

    .text-info .fa-edit {
        color: #17a2b8;
    }

    /* Loading indicator */
    #historyLoadingIndicator {
        padding: 2rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        #changeHistoryModal .modal-dialog {
            max-width: 95%;
            margin: 1rem;
        }

        #historyTable {
            font-size: 0.75rem;
        }

        #historyTable th,
        #historyTable td {
            padding: 0.25rem;
        }

        .current-stock-display {
            font-size: 0.7rem;
        }

        .stock-status-badge {
            font-size: 0.6rem;
            padding: 1px 4px;
        }
    }

    /* Adjustment container styling */
    .adjustment-container {
        padding: 0.25rem;
    }

    .adjustment-container .row {
        margin-left: 0;
        margin-right: 0;
    }

    .adjustment-container .col-4,
    .adjustment-container .col-8 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .adjustment-container small {
        line-height: 1.8;
        display: inline-block;
        vertical-align: middle;
    }

    .adjustment-container .form-control-sm {
        height: calc(1.5em + 0.5rem + 2px);
    }

    /* ========================================
       Task 22.3: Visual Hierarchy Improvements
       ======================================== */
    
    /* SPB Columns - Visually Distinct */
    #items-table thead th:nth-child(10),
    #items-table thead th:nth-child(11),
    #items-table thead th:nth-child(12),
    #items-table thead th:nth-child(13) {
        background-color: #17a2b8 !important;
        color: white !important;
        font-weight: 600;
        border-left: 2px solid #138496;
    }

    #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) {
        background-color: #e7f6f8;
        border-left: 2px solid #17a2b8;
    }

    /* FSTR Sub-lines - Clear Indentation */
    .fstr-subline {
        background-color: #f8f9fa !important;
        border-top: 3px solid #f8f9fa !important;
        border-left: 4px solid #6c757d !important;
    }

    .fstr-subline td:first-child {
        padding-left: 30px !important;
        font-style: italic;
        color: #6c757d;
    }

    .fstr-subline .fa-level-up-alt {
        color: #6c757d;
        margin-right: 8px;
    }

    .fstr-subline input {
        /* background-color: #fff3cd !important;
        border-color: #ffc107 !important; */
    }

    .fstr-subline input:focus {
        /* background-color: #ffffff !important;
        border-color: #ffc107 !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); */
    }

    /* Status Badges - Enhanced */
    .badge {
        font-size: 0.75em;
        padding: 4px 8px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .badge-danger {
        background-color: #dc3545;
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    }

    .badge-warning {
        background-color: #ffc107;
        color: #212529;
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    }

    .badge-success {
        background-color: #28a745;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    }

    .badge-info {
        background-color: #17a2b8;
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }

    .badge-primary {
        background-color: #007bff;
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    }

    .badge-secondary {
        background-color: #6c757d;
        box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
    }

    /* SPB Suggestion Display - Enhanced */
    .spb-suggestion-display {
        font-weight: 600;
        font-size: 1.1em;
        color: #007bff;
    }

    /* Final Qty Editable - Visual Indicator */
    .final-qty-editable {
        /* border: 2px solid #28a745 !important;
        background-color: #f0fff4 !important; */
    }

    .final-qty-editable:focus {
        /* border-color: #28a745 !important;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important; */
    }

    .final-qty-editable.manually-edited {
        /* border-color: #ffc107 !important;
        background-color: #fffbf0 !important; */
    }

    /* ========================================
       Task 22.4: Responsive Design
       ======================================== */
    
    /* Table Scrollable on Small Screens */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 1200px) {
        #items-table {
            min-width: 1800px;
        }
    }

    @media (max-width: 992px) {
        #items-table {
            font-size: 0.85rem;
        }

        #items-table th,
        #items-table td {
            padding: 0.5rem 0.25rem;
        }

        .badge {
            font-size: 0.65em;
            padding: 2px 6px;
        }

        .spb-suggestion-display {
            font-size: 1em;
        }
    }

    @media (max-width: 768px) {
        #items-table {
            font-size: 0.75rem;
            min-width: 1600px;
        }

        #items-table th,
        #items-table td {
            padding: 0.4rem 0.2rem;
        }

        .badge {
            font-size: 0.6em;
            padding: 2px 4px;
        }

        .form-control {
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }

        /* Tooltips - Readable on Mobile */
        .tooltip {
            font-size: 0.85rem;
        }

        .tooltip-inner {
            max-width: 280px;
            padding: 8px 12px;
            text-align: left;
        }

        /* Save Indicators - Adjusted for Mobile */
        .save-indicator,
        .save-success,
        .save-error {
            top: 10px;
            right: 10px;
            padding: 8px 12px;
            font-size: 12px;
        }

        /* Page Loading - Adjusted for Mobile */
        .page-loading-spinner {
            width: 50px;
            height: 50px;
            border-width: 4px;
        }

        .page-loading-text {
            font-size: 14px;
        }
    }

    @media (max-width: 576px) {
        .card-header h3 {
            font-size: 1.2rem;
        }

        .form-group label {
            font-size: 0.9rem;
        }

        .alert {
            font-size: 0.85rem;
            padding: 0.5rem;
        }

        /* FSTR Sub-lines - Adjusted Indentation */
        .fstr-subline td:first-child {
            padding-left: 20px !important;
        }
    }

    /* Print Styles */
    @media print {
        .save-indicator,
        .save-success,
        .save-error,
        .page-loading-overlay {
            display: none !important;
        }

        #items-table {
            font-size: 0.7rem;
        }

        .badge {
            border: 1px solid #000;
        }
    }
</style>

@endsection