@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <!-- Revision Info Alert -->
        <div class="row">
            <div class="col-12">
                <div class="alert alert-info alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h5><i class="icon fas fa-info-circle"></i> Mode Revision SO</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Informasi:</strong>
                            <ul class="mb-0">
                                <li>SO lama akan diubah menjadi: <span class="badge badge-warning">{{ $jsData['revisionInfo']['new_so_number_for_old'] }}</span></li>
                                <li>SO baru akan menggunakan: <span class="badge badge-success">{{ $jsData['revisionInfo']['old_so_number'] }}</span></li>
                                <li>Jumlah revisi: {{ $jsData['revisionInfo']['revision_count'] }} kali</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <strong>Catatan:</strong>
                            <ul class="mb-0">
                                <li>Revision hanya untuk mengubah data qty dan adjustment</li>
                                <li>Data SO lama tetap tersimpan untuk audit</li>
                                <li>Tidak ada perhitungan SPB atau update current stock</li>
                                <li><strong>Wajib isi alasan revisi sebelum submit!</strong></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Revision Stock Opname</h3>
                    </div>
                    <div class="card-body">
                        <form id="formID" method="post" action="{{ route('stock_opnames.store_revision', $data->id) }}">
                            @csrf

                            <!-- Revision Reason Field -->
                            <div class="row mb-3">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="revision_reason">Alasan Revisi <span class="text-danger">*</span></label>
                                        <textarea class="form-control" id="revision_reason" name="revision_reason" rows="3" required placeholder="Jelaskan alasan melakukan revisi SO ini untuk keperluan audit..."></textarea>
                                        <small class="text-muted">Alasan revisi wajib diisi dan akan tersimpan untuk keperluan audit</small>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <!-- Header Section - Table Layout -->
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-sm table-borderless" style="margin-bottom: 10px;">
                                        <tbody>
                                            <tr>
                                                <td width="5%" class="font-weight-bold">User</td>
                                                <td width="15%"> :
                                                    {{ $logged_name }} 
                                                    <small class="text-muted">
                                                        (<i class="fas fa-user-tag"></i> {{ $logged_role_name }})
                                                    </small> 
                                                </td> 
                                                <td width="5%" class="font-weight-bold">Status</td>
                                                <td width="15%"> :
                                                    @if(isset($data->id) && $data->status)
                                                    <span class="badge badge-{{ $data->status == 'Submitted' ? 'success' : 'secondary' }}">
                                                        {{ $data->status }}
                                                    </span>
                                                    @else
                                                    <span class="badge badge-secondary">Belum Disimpan</span>
                                                    @endif
                                                    <input type="hidden" name="status" id="status_input" value="{{ old('status', $data->status ?? 'Draft') }}">
                                                </td> 
                                                <td class="font-weight-bold" rowspan="2">Notes :
                                                    <textarea class="form-control" name="notes" rows="1" placeholder="Catatan tambahan (opsional)">{{ old('notes', $data->notes ?? '') }}</textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="font-weight-bold">Store</td>
                                                <td> :
                                                    @if(session('store_selected')) 
                                                    {{ $store_name }}
                                                    @else
                                                    <span class="text-danger">No Store Selected</span>
                                                    @endif
                                                    <input type="hidden" name="store_id" id="store_id" value="{{ session('store_selected') }}" required>
                                                </td>
                                                <td class="font-weight-bold">LSM Date</td>
                                                <td> :
                                                    <span class="badge badge-info">
                                                        <i class="far fa-calendar-alt"></i> {{ $data->so_date ? $data->so_date->format('d M Y') : date('d M Y') }}
                                                    </span>
                                                    <input type="hidden" name="so_date" value="{{ $data->so_date ? $data->so_date->format('Y-m-d') : date('Y-m-d') }}">
                                                </td>  
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-12">
                                    <hr class="mt-0 mb-3">
                                </div> 
                                <!-- Input search RM --> 
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search_item" placeholder="Search Item by Description">
                                            <div class="input-group-append">
                                                <button class="btn btn-sm btn-warning" type="button" id="search_btn"><i class="fas fa-search"></i> Search</button>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                                <!-- Info autosave --> 
                                <div class="col-md-6">
                                    @if($data->id > 0)
                                    <div class="alert alert-warning d-flex align-items-center py-1" role="alert">
                                        <i class="fas fa-exclamation-triangle mr-2"></i>
                                            <strong>Autosave Aktif : </strong>
                                            Semua field akan otomatis tersimpan saat Anda mengubah nilai. 
                                    </div>
                                    @endif
                                </div>
                            </div>
 
                            <!-- Items Section -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-sm" id="items-table">
                                            <thead class="bg-warning">
                                               <tr>
                                                <th width="3%">No</th>
                                                <th>Item</th>
                                                <th width="8%" class="text-center">Sisa Utuh</th>
                                                <th width="8%" class="text-center">Sisa Pakai</th>
                                                <th width="5%" class="text-center">Adj</th>
                                                <th width="8%" class="text-center">LSM Aktual</th>
                                                <th style="display:none" width="4%" class="text-center">DOI</th>
                                                <th width="7%" class="text-center">Status Stok</th>
                                                <th width="3%" class="text-center">X</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
                                                $mapping = $variables['mappings']->get($rm->id);
                                                $hasMapping = $mapping && $mapping->is_active;

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

                            <!-- Action Buttons -->
                            <div class="row mt-3">
                                <div class="col-12">
                                    <a href="{{ route('stock_opnames.index') }}" class="btn btn-sm btn-warning">
                                        <i class="fas fa-arrow-left"></i> Kembali
                                    </a>
                                    
                                    <!-- Revision Mode: Only show Save Revision button -->
                                    <button type="submit" id="save-revision-btn" class="btn btn-sm btn-primary">
                                        <i class="fas fa-save"></i> Simpan Revision
                                    </button>
                                </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>
    /**
     * Global debug flag - set to false to disable all debug logs
     * When going live, simply change this to false
     */
    const DEBUG_ENABLED = true;
    
    /**
     * Centralized logging function
     * All debug logs go through this function for easy enable/disable
     * 
     * @param {string} message - Log message
     * @param {*} data - Optional data to log
     */
    function printLog(message, data = null) {
        if (!DEBUG_ENABLED) return;
        
        if (data !== null) {
            console.log(message, data);
        } else {
            console.log(message);
        }
    }
    
    /**
     * Log warning messages (always enabled, even in production)
     */
    function printWarn(message, data = null) {
        if (data !== null) {
            console.warn(message, data);
        } else {
            console.warn(message);
        }
    }
    
    /**
     * Log error messages (always enabled, even in production)
     */
    function printError(message, data = null) {
        if (data !== null) {
            console.error(message, data);
        } else {
            console.error(message);
        }
    }
    
    // ========================================
    // End Debug Logging Control
    // ========================================
    
    // ========================================
    // Task 22.1: Page Loading Overlay
    // ========================================
    
    /**
     * Show page loading overlay during initial page load
     */
    function showPageLoading() {
        if (!$('.page-loading-overlay').length) {
            $('body').append(`
                <div class="page-loading-overlay">
                    <div class="page-loading-spinner"></div>
                    <div class="page-loading-text">Memuat Data Stock Opname...</div>
                </div>
            `);
        }
    }

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

    // Show loading overlay immediately
    showPageLoading();

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

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

        $.ajax({
            url: '{{ route("stock_opnames.auto_save_fstr_qty_pakai") }}',
            type: 'POST',
            data: payload,
            success: function(response) {
                // Task 22.1: Remove inline field loading indicator
                field.removeClass('field-saving');
                
                if (response.success) {
                    // On success: recalculate component qty and update main line (Requirement 24.4)
                    
                    // Find parent raw material ID from the FSTR sub-line
                    const fstrSubline = $(`.fstr-subline[data-fstr-id="${fstrId}"]`);
                    const parentId = fstrSubline.data('parent-id');
                    
                    // Calculate all RMs affected by this FSTR cascade (including parent)
                    const affectedRMs = findAffectedRMs(fstrId);
                    
                    // Add parent to affected RMs if not already included
                    if (parentId && !affectedRMs.includes(parentId)) {
                        affectedRMs.push(parentId);
                    }
                    
                    // Summary log: show which RMs are affected
                    if (affectedRMs.length > 0) {
                        printLog(`🔄 Input FSTR ${fstrId} mempengaruhi ${affectedRMs.length} item: ${affectedRMs.join(', ')}`);
                    }
                    
                    // Calculate each affected RM only once and save qty_pakai to database
                    const calculatedRMs = new Set();
                    for (let rmId of affectedRMs) {
                        if (!calculatedRMs.has(rmId)) {
                            
                            calculatedRMs.add(rmId);
                            
                            // Save qty_pakai to database for affected RM
                            const row = $(`tr[data-raw-material-id="${rmId}"]`);
                            const soDetailId = row.find('.qty-pakai').data('so-detail-id');
                            const qtyUtuh = row.find('.qty-utuh').val() || 0;
                            const qtyPakai = row.find('.qty-pakai').val() || 0;
                            
                            // Recalculate item_olahan (FSTR contribution) for this RM
                            const fstrResult = calculateFSTRContribution(rmId);
                            const itemOlahan = fstrResult.total; // This is the FSTR contribution
                            
                            if (soDetailId) { 
                                const savePayload = {
                                    _token: '{{ csrf_token() }}',
                                    so_detail_id: soDetailId,
                                    field_name: 'qty_pakai',
                                    value: qtyPakai,
                                    qty_utuh: qtyUtuh,
                                    qty_pakai: qtyPakai,
                                    item_olahan: itemOlahan
                                };
                                  
                                $.ajax({
                                    url: '{{ route("stock_opnames.auto_save_field") }}',
                                    type: 'POST',
                                    data: savePayload,
                                    success: function(saveResponse) {
                                        if (saveResponse.success) {
                                            printLog(`✅ RM ${rmId} saved - qty_pakai: ${qtyPakai}, item_olahan: ${itemOlahan.toFixed(5)}`);
                                        }
                                    },
                                    error: function(xhr) {
                                        printError(`❌ Failed to save qty_pakai for RM ${rmId}:`, xhr);
                                    }
                                });
                            }
                        }
                    }
                    
                    showSaveSuccess();
                } else {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    // On failure: show error message, don't update main line (Requirement 24.5)
                    showSaveError(response.message);
                }
            },
            error: function(xhr) {
                // Task 22.1: Remove inline field loading indicator
                field.removeClass('field-saving');
                
                // On failure: show error message, don't update main line (Requirement 24.5)
                const message = xhr.responseJSON?.message || 'Error menyimpan FSTR qty_pakai';
                showSaveError(message);
                printError('❌ FSTR autosave error:', xhr);
            }
        });
    }
    
    /**
     * Show save error message
     */
    function showSaveError(message) {
        $('.save-indicator').remove();
        // Show error indicator with enhanced styling (Task 22.2)
        if (!$('.save-error').length) {
            $('body').append('<div class="save-error"><i class="fa fa-exclamation-circle"></i><span>' + message + '</span></div>');
            setTimeout(() => {
                $('.save-error').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 4000);
        }
        
        // Also show SweetAlert for important errors
        Swal.fire({
            icon: 'error',
            title: 'Gagal Menyimpan',
            text: message,
            timer: 3000,
            toast: true,
            position: 'top-end',
            showConfirmButton: false
        });
    }
    
    /**
     * Show saving indicator
     */
    function showSavingIndicator() {
        // Show saving spinner with enhanced styling (Task 22.1)
        if (!$('.save-indicator').length) {
            $('body').append('<div class="save-indicator"><i class="fa fa-spinner fa-spin"></i><span>Menyimpan...</span></div>');
        }
    }

    /**
     * Show save success message
     */
    function showSaveSuccess() {
        $('.save-indicator').remove();
        // Show brief success indicator with enhanced styling (Task 22.2)
        if (!$('.save-success').length) {
            $('body').append('<div class="save-success"><i class="fa fa-check-circle"></i><span>Berhasil Disimpan</span></div>');
            setTimeout(() => {
                $('.save-success').fadeOut(300, function() {
                    $(this).remove();
                });
            }, 2000);
        }
    }
    
    /**
     * Show error message using SweetAlert
     * 
     * @param {string} message - Error message to display
     */
    function showError(message) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: message,
            confirmButtonText: 'OK'
        });
    }
    
    /**
     * Show warning message using SweetAlert
     * 
     * @param {string} message - Warning message to display
     */
    function showWarning(message) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: message,
            confirmButtonText: 'OK'
        });
    }
    
    /**
     * Log error to Laravel backend for server-side logging
     * 
     * @param {string} functionName - Name of the function where error occurred
     * @param {Object} errorData - Error data to log
     * 
     * Requirements: 25.5
     */
    function logErrorToBackend(functionName, errorData) {
        // Send error to backend for logging
        $.ajax({
            url: '{{ route("stock_opnames.log_error") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                function_name: functionName,
                error_data: JSON.stringify(errorData),
                so_id: {{ $stockOpname->id ?? 'null' }},
                user_id: {{ auth()->id() ?? 'null' }}
            },
            success: function(response) {
                printLog('✓ Error berhasil di-log ke backend');
            },
            error: function(xhr, status, error) {
                printError('❌ Gagal log error ke backend:', error);
            }
        });
    }
     
    /**
     * Update LSM Aktual display (both hidden input and visible label)
     * Also updates tooltip with breakdown information
     * 
     * @param {jQuery} row - Table row element
     * @param {number|string} value - LSM Aktual value
     * @param {object} breakdown - Optional breakdown info {qtyConverted, qtyPakai, itemOlahan, conversionFactor}
     */
    function updateLSMDisplay(row, value, breakdown) {
        const formatted = typeof value === 'number' ? value.toFixed(2) : (value || '0.00');
        row.find('.ending-stock').val(formatted);
        row.find('.ending-stock-display').text(formatted);
        
        // Update tooltip with breakdown if provided
        if (breakdown) {
            const tooltipText = `LSM Aktual: ${formatted}\n\n` +
                `Breakdown:\n` +
                `• Qty Converted: ${(breakdown.qtyConverted || 0).toFixed(2)}\n` +
                `• Qty Pakai: ${(breakdown.qtyPakai || 0).toFixed(2)}\n` +
                `• Item Olahan: ${(breakdown.itemOlahan || 0).toFixed(2)}\n` +
                `• Conversion Factor FSTR: ${(breakdown.conversionFactor || 1).toFixed(2)}\n\n` +
                `Formula: Qty Converted + Qty Pakai + (Item Olahan / CF FSTR)`;
            row.find('.lsm-aktual-display').attr('title', tooltipText);
        }
    }
    
    /**
     * Update DOI display (both hidden input and visible label)
     * Also updates tooltip with calculation information
     * 
     * @param {jQuery} row - Table row element
     * @param {number|string} value - DOI value (can be number or '∞')
     * @param {object} info - Optional calculation info {lsmAktual, forecastAverage}
     */
    function updateDOIDisplay(row, value, info) {
        let formatted;
        if (value === '∞') {
            formatted = '∞';
        } else {
            formatted = typeof value === 'number' ? value.toFixed(2) : (value || '0.00');
        }
        row.find('.doi-value').val(formatted);
        row.find('.doi-value-display').text(formatted);
        
        // Update tooltip with calculation info if provided
        if (info) {
            let tooltipText = `DOI (Days of Inventory): ${formatted}\n\n`;
            if (value === '∞') {
                tooltipText += `Forecast Average = 0 (tidak ada forecast)\n` +
                    `DOI tidak dapat dihitung`;
            } else {
                tooltipText += `Calculation:\n` +
                    `• LSM Aktual: ${(info.lsmAktual || 0).toFixed(2)}\n` +
                    `• Forecast Average (7 hari): ${(info.forecastAverage || 0).toFixed(2)}\n\n` +
                    `Formula: LSM Aktual / Forecast Average`;
            }
            row.find('.doi-display').attr('title', tooltipText);
        }
    }
        
    let forecastData = @json($jsData['forecast'] ?? []);   
    let tsmSODate = @json($jsData['tsmSODate'] ?? []); // TSM for SO date (for LSM difference label) 
    let rangeDois = @json($jsData['rangeDois'] ?? []); // Range DOI master data for status badge
    let soDate = @json($jsData['soDate'] ?? date('Y-m-d'));
    let mappingData = {}; // Will be populated from data attributes
    let fstrComponents = {}; // Will be populated from data attributes (for future FSTR implementation) 
    let lsmReasons = @json($jsData['lsmReasons'] ?? []); // LSM reasons for DOI in range with lsm_reason_flag
     
     
    printLog('Tanggal SO:', soDate);  
    
    // 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}`;
    }
    
    
    // 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
      
    
    /**
     * Verify all required data is preloaded
     * Requirement 15.3 - All data loaded once at page load
     */
    function verifyDataPreloading() {
        const checks = {
            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'); 
        } else {
            printError('✗ Verifikasi data preloading FAILED - Ada data yang hilang:', checks);
        }
        
        return allLoaded;
    }
    
    // Verify data preloading on page load
    verifyDataPreloading();
    
    
    /**
     * 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);
    }
    
    /**
     * 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;
        }
    };
     
    
    /**
     * Calculate LSM Aktual (Ending Stock)
     * Formula: (qty_utuh × conversion_factor_utuh_pakai) + qty_pakai + item_olahan
     * 
     * @param {number} qtyUtuh - Quantity in whole units
     * @param {number} qtyPakai - Quantity in usage units
     * @param {number} itemOlahan - Processed items quantity
     * @param {number} conversionFactor - Conversion factor from whole to usage units
     * @returns {number} LSM Aktual value
     * 
     * Requirements: 7.1, 14.1
     */
    function calculateLSMAktual(qtyUtuh, qtyPakai, itemOlahan, conversionFactor) {
        // Validate inputs
        qtyUtuh = parseFloat(qtyUtuh) || 0;
        qtyPakai = parseFloat(qtyPakai) || 0;
        itemOlahan = parseFloat(itemOlahan) || 0;
        conversionFactor = parseFloat(conversionFactor);
        
        // Handle invalid conversion factor
        if (!conversionFactor || conversionFactor === 0 || isNaN(conversionFactor)) {
            printError('❌ Conversion factor tidak valid:', conversionFactor);
            return 0;
        }
        
        // Calculate LSM Aktual
        const qtyConverted = qtyUtuh * conversionFactor;
        const lsmAktual = qtyConverted + qtyPakai + itemOlahan;
        
        return lsmAktual;
    }
    
    /**
     * Update LSM Difference Label (LSM Aktual - TSM)
     * Shows difference between LSM Aktual and TSM for SO date
     * Green color for positive (+), red color for negative (-)
     * 
    /**
     * Calculate DOI (Days of Inventory)
     * Formula: lsm_aktual / forecast_average
     * 
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number} forecastAverage - Average forecast for 7 days
     * @returns {number|string} DOI value or '∞' if forecast is zero
     * 
     * Requirements: 7.2, 9.1, 9.4
     */
    function calculateDOI(lsmAktual, forecastAverage) {
        lsmAktual = parseFloat(lsmAktual) || 0;
        forecastAverage = parseFloat(forecastAverage) || 0;
        
        // Handle zero forecast - return infinity
        if (forecastAverage === 0) {
            return '∞';
        }
        
        // Calculate DOI
        const doi = lsmAktual / forecastAverage;
        
        return doi;
    } 
    
    /**
     * Calculate FSTR contribution to component raw material
     * Finds all FSTR sub-lines for a raw material and calculates their contribution
     * Also checks backend data for nested FSTR relationships
     * 
     * @param {number} rawMaterialId - Component raw material ID
     * @returns {Object} Object with total contribution and breakdown by FSTR
     * 
     * Requirements: 20.1, 20.3, 20.5, 25.5
     */
    function calculateFSTRContribution(rawMaterialId) {
        let totalContribution = 0;
        let fstrBreakdown = {};
        
        try {
            // Method 1: Find visible FSTR sub-lines for this raw material (where this RM is a component)
            $(`.fstr-subline[data-parent-id="${rawMaterialId}"]`).each(function() {
                try {
                    const fstrId = $(this).data('fstr-id');
                    const fstrQtyPakaiInput = $(this).find('input[name^="fstr_qty_pakai"]');
                    const fstrQtyPakai = parseFloat(fstrQtyPakaiInput.val()) || 0;
                    const componentQtyPerUnit = parseFloat(fstrQtyPakaiInput.data('component-qty'));
                    
                    // Requirement 25.2: Handle missing component_qty
                    if (!componentQtyPerUnit || componentQtyPerUnit === 0) {
                        printWarn(`⚠️ Component qty kosong untuk FSTR ${fstrId} → RM ${rawMaterialId}`);
                        showWarning(`Component qty tidak valid untuk FSTR ${fstrId}. Data tidak akan dihitung.`);
                        return; // Skip this FSTR, don't calculate contribution
                    }
                    
                    // Calculate contribution: fstr_qty_pakai × component_qty_per_unit
                    const contribution = fstrQtyPakai * componentQtyPerUnit;
                    
                    printLog(`  📊 FSTR ${fstrId} → RM ${rawMaterialId}: qty_pakai=${fstrQtyPakai.toFixed(5)} × component_qty=${componentQtyPerUnit.toFixed(5)} = ${contribution.toFixed(5)}`);
                    
                    // Cascade: if this FSTR also has components, calculate recursively
                    const cascadeContribution = calculateFSTRCascade(fstrId, fstrQtyPakai, new Set());
                    
                    if (cascadeContribution > 0) {
                        printLog(` ↳ Cascade contribution dari FSTR ${fstrId}: ${cascadeContribution.toFixed(5)}`);
                    }
                    
                    // Add direct contribution
                    totalContribution += contribution;
                    
                    // Add cascade contribution (from nested FSTRs)
                    totalContribution += cascadeContribution;
                    
                    // Store breakdown for tooltip (direct contribution only)
                    if (contribution > 0) {
                        fstrBreakdown[fstrId] = contribution;
                    }
                } catch (error) {
                    // Requirement 25.5: Log error and continue with partial result
                    printError(`❌ Error menghitung FSTR contribution untuk FSTR di RM ${rawMaterialId}:`, error);
                    // Continue with next FSTR instead of stopping completely
                }
            });
            
            // Method 2: Check backend data for nested FSTR relationships
            // Get list of FSTRs already calculated in Method 1 (visible sub-lines for this RM)
            const visibleFSTRs = [];
            $(`.fstr-subline[data-parent-id="${rawMaterialId}"]`).each(function() {
                const fstrId = $(this).data('fstr-id');
                visibleFSTRs.push(String(fstrId));
            });
            
            // Find all FSTRs with visible input
            const fstrsWithInput = [];
            $('input[name^="fstr_qty_pakai"]').each(function() {
                const inputName = $(this).attr('name');
                const match = inputName.match(/fstr_qty_pakai\[(\d+)\]\[(\d+)\]/);
                if (match) {
                    const fstrId = match[2];
                    const qty = parseFloat($(this).val()) || 0;
                    if (qty > 0 && !visibleFSTRs.includes(String(fstrId))) {
                        if (!fstrsWithInput.find(f => f.id == fstrId)) {
                            fstrsWithInput.push({id: fstrId, qty: qty});
                        }
                    }
                }
            });
            
            // For each FSTR with input, calculate contribution to this RM through cascade
            for (let fstrWithInput of fstrsWithInput) {
                const contribution = calculateNestedContribution(fstrWithInput.id, fstrWithInput.qty, rawMaterialId, new Set());
                if (contribution > 0) {
                    printLog(`  🔍 Method 2 - FSTR ${fstrWithInput.id} (qty=${fstrWithInput.qty.toFixed(5)}) → RM ${rawMaterialId}: nested contribution = ${contribution.toFixed(5)}`);
                    totalContribution += contribution;
                    fstrBreakdown[fstrWithInput.id] = contribution;
                }
            }
        } catch (error) {
            // Requirement 25.5: Log error to console and show partial result
            printError(`❌ Error di calculateFSTRContribution untuk RM ${rawMaterialId}:`, error);
            
            // Log to Laravel backend
            logErrorToBackend('calculateFSTRContribution', {
                rawMaterialId: rawMaterialId,
                error: error.message,
                stack: error.stack
            });
        }
        
        // Summary log: only show if there's contribution
        if (totalContribution > 0) {
            printLog(`� RM ${rawMaterialId} total FSTR contribution: ${totalContribution.toFixed(2)}`);
        }
        
        return {
            total: totalContribution,
            breakdown: fstrBreakdown
        };
    }
    
    /**
     * Calculate nested contribution from FSTR to a specific RM
     * Follows the database structure where relation is stored as: component_id → parent_id
     * Database: fstrComponents[component_id] = [{component_id: parent_id, qty: ...}]
     * Meaning: component_id is used by parent_id
     * 
     * To find what FSTR uses: we need to find where parent_id = fstrId
     * 
     * @param {number} fstrId - FSTR ID to check (this is the FSTR that user inputs)
     * @param {number} fstrQty - Quantity of the FSTR
     * @param {number} targetRmId - Target RM ID to find contribution for
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} Total contribution to target RM
     */
    function calculateNestedContribution(fstrId, fstrQty, targetRmId, processedFSTRs = new Set()) {
        // Convert to string for consistent comparison
        fstrId = String(fstrId);
        targetRmId = String(targetRmId);
        
        // Prevent infinite loop
        if (processedFSTRs.has(fstrId)) {
            // Circular dependency detected, skip silently
            return 0;
        }
        processedFSTRs.add(fstrId);
        
        let totalContribution = 0;
        
        // Removed verbose log for cleaner output
        
        // Skip if FSTR ID is same as target RM (circular reference in data)
        if (fstrId == targetRmId) {
            // Skipping: FSTR ID same as target RM (circular reference)
            return 0;
        }
        
        // Find what components this FSTR uses
        // In database: fstrComponents[componentId] contains parents that use this component
        // We need to find: where parent (component_id in the array) = fstrId
        
        for (let componentId in fstrComponents) {
            const relations = fstrComponents[componentId]; // Array of {component_id: parentId, qty: ...}
            
            // Check if fstrId uses this componentId
            const relation = relations.find(r => r.component_id == fstrId);
            if (relation) {
                // Found: componentId is used by fstrId
                // Database structure: fstrComponents[componentId] = [{component_id: fstrId, qty: X}]
                // Meaning: componentId is used by fstrId with quantity X
                
                const qtyPerUnit = relation.qty_per_unit;
                const componentIdStr = String(componentId);
                
                // Check if this component is the target RM
                if (componentIdStr == targetRmId) {
                    // Direct contribution
                    const contribution = fstrQty * qtyPerUnit;
                    printLog(`   🎯 Direct hit: FSTR ${fstrId} uses Component ${componentIdStr} (target RM): fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${contribution.toFixed(5)}`);
                    totalContribution += contribution;
                } else {
                    // Check if this component is also a FSTR (is used by other items)
                    const componentRelations = fstrComponents[componentIdStr];
                    if (componentRelations && componentRelations.length > 0) {
                        // This component is a FSTR, recurse
                        const componentQty = fstrQty * qtyPerUnit;
                        printLog(`   🔄 Nested: FSTR ${fstrId} uses Component ${componentIdStr} (is FSTR):`);
                        printLog(`      Calculation: fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${componentQty.toFixed(5)}`);
                        printLog(`      Checking if Component ${componentIdStr} leads to target RM ${targetRmId}...`);
                        const nestedProcessedFSTRs = new Set(processedFSTRs);
                        const nestedContribution = calculateNestedContribution(
                            componentIdStr,
                            componentQty,
                            targetRmId,
                            nestedProcessedFSTRs
                        );
                        if (nestedContribution > 0) {
                            printLog(`     ✓ Found path: Component ${componentIdStr} → target RM ${targetRmId} = ${nestedContribution.toFixed(5)}`);
                            totalContribution += nestedContribution;
                        }
                    }
                }
            }
        }
        
        return totalContribution;
    }
    
    /**
     * Find all RMs that are affected by a FSTR through cascade relationships
     * Recursively searches through nested FSTR structures
     * 
     * @param {number} fstrId - FSTR ID to check
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {Array} Array of RM IDs that are affected
     */
    function findAffectedRMs(fstrId, processedFSTRs = new Set()) {
        fstrId = String(fstrId);
        
        // Prevent infinite loop
        if (processedFSTRs.has(fstrId)) {
            return [];
        }
        processedFSTRs.add(fstrId);
        
        let affectedRMs = [];
        
        // Find what components this FSTR uses
        for (let componentId in fstrComponents) {
            const relations = fstrComponents[componentId];
            
            // Check if fstrId uses this componentId
            const relation = relations.find(r => r.component_id == fstrId);
            if (relation) {
                const componentIdStr = String(componentId);
                
                // Add this component to affected RMs
                affectedRMs.push(componentIdStr);
                
                // If this component is also a FSTR, recurse to find nested affected RMs
                const componentRelations = fstrComponents[componentIdStr];
                if (componentRelations && componentRelations.length > 0) {
                    const nestedProcessedFSTRs = new Set(processedFSTRs);
                    const nestedAffectedRMs = findAffectedRMs(componentIdStr, nestedProcessedFSTRs);
                    affectedRMs = affectedRMs.concat(nestedAffectedRMs);
                }
            }
        }
        
        // Remove duplicates
        return [...new Set(affectedRMs)];
    }
    
    /**
     * Get FSTR quantity from input or from cascade calculation
     * Checks visible input first, then calculates from nested FSTRs
     * 
     * @param {number} fstrId - FSTR ID
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} FSTR quantity
     */
    function getFSTRQuantity(fstrId, processedFSTRs = new Set()) {
        // Convert to string for consistent comparison
        fstrId = String(fstrId);
        
        // Prevent infinite loop - detect circular dependency
        if (processedFSTRs.has(fstrId)) {
            printWarn(`⚠️ Circular dependency detected in getFSTRQuantity for FSTR ${fstrId}`);
            return 0;
        }
        
        // Add this FSTR to processed set
        processedFSTRs.add(fstrId);
        
        // Check if there's a visible input for this FSTR
        const fstrInput = $(`input[name="fstr_qty_pakai[${fstrId}]"]`);
        if (fstrInput.length > 0) {
            const qty = parseFloat(fstrInput.val()) || 0;
            return qty;
        }
        
        // If not visible, calculate from parent FSTRs that use this FSTR
        let totalQty = 0;
        
        // FSTR not visible, checking parent FSTRs...
        
        for (let parentFstrId in fstrComponents) {
            const components = fstrComponents[parentFstrId];
            
            // Check if this FSTR is a component of parentFstrId (use == for loose comparison)
            const componentData = components.find(c => c.component_id == fstrId);
            if (componentData) {
                // FSTR is component of parent FSTR
                
                // This FSTR is used by parentFstrId
                // Create a new Set for this branch to allow the same FSTR in different branches
                const nestedProcessedFSTRs = new Set(processedFSTRs);
                const parentQty = getFSTRQuantity(parentFstrId, nestedProcessedFSTRs); // Recursive call with tracking
                if (parentQty > 0) {
                    const contribution = parentQty * componentData.qty_per_unit;
                    totalQty += contribution;
                }
            }
        }
        
        return totalQty;
    }
    
    /**
     * Recursive function to calculate nested FSTR component contributions
     * Handles multi-level FSTR structures and detects circular dependencies
     * 
     * @param {number} fstrId - FSTR ID to process
     * @param {number} fstrQty - Quantity of the FSTR
     * @param {Set} processedFSTRs - Set of already processed FSTR IDs to avoid infinite loop
     * @returns {number} Total contribution from nested components
     * 
     * Requirements: 21.1, 21.2, 21.3, 21.4, 21.5, 25.1, 25.5
     */
    function calculateFSTRCascade(fstrId, fstrQty, processedFSTRs) {
        try {
            // Prevent infinite loop - detect circular dependency
            if (processedFSTRs.has(fstrId)) {
                printError(`❌ Circular dependency terdeteksi untuk FSTR ${fstrId}`);
                showError(`Circular dependency terdeteksi dalam FSTR ${fstrId}. Hubungi administrator.`);
                return 0;
            }
            
            // Add this FSTR to processed set
            processedFSTRs.add(fstrId);
            
            let totalContribution = 0;
            const components = fstrComponents[fstrId] || [];
            
            // Process each component of this FSTR
            for (let component of components) {
                try {
                    const componentId = component.component_id;
                    const qtyPerUnit = component.qty_per_unit;
                    const isFSTR = component.is_component_fstr || false;
                    
                    // Requirement 25.2: Handle missing component_qty
                    if (!qtyPerUnit || qtyPerUnit === 0) {
                        printWarn(`⚠️ Component qty kosong untuk komponen ${componentId} di FSTR ${fstrId}`);
                        // Skip this component, don't calculate contribution
                        continue;
                    }
                    
                    // Calculate component contribution
                    const componentContribution = fstrQty * qtyPerUnit;
                    
                    printLog(` 🔗 Cascade FSTR ${fstrId} → Component ${componentId}: fstr_qty=${fstrQty.toFixed(5)} × component_qty=${qtyPerUnit.toFixed(5)} = ${componentContribution.toFixed(5)}`);
                    
                    // If this component is also a FSTR, recurse
                    if (isFSTR) {
                        // Create a new Set for this branch to allow the same FSTR in different branches
                        const nestedProcessedFSTRs = new Set(processedFSTRs);
                        const nestedContribution = calculateFSTRCascade(
                            componentId,
                            componentContribution,
                            nestedProcessedFSTRs
                        );
                        totalContribution += nestedContribution;
                        printLog(`   ↳ Nested contribution dari FSTR ${componentId}: ${nestedContribution.toFixed(5)}`);
                    }
                    // Note: Leaf components (non-FSTR) are NOT added here
                    // They are already calculated in the parent function (calculateFSTRContribution)
                } catch (error) {
                    // Requirement 25.5: Log error and continue with partial result
                    printError(`❌ Error processing komponen di FSTR ${fstrId}:`, error);
                    // Continue with next component instead of stopping completely
                }
            }
            
            return totalContribution;
        } catch (error) {
            // Requirement 25.5: Log error to console and return partial result
            printError(`❌ Error di calculateFSTRCascade untuk FSTR ${fstrId}:`, error);
            
            // Log to Laravel backend
            logErrorToBackend('calculateFSTRCascade', {
                fstrId: fstrId,
                fstrQty: fstrQty,
                error: error.message,
                stack: error.stack
            });
            
            // Return 0 to allow calculation to continue
            return 0;
        }
    }
    
    /**
     * Update status badge based on DOI vs Range DOI Master
     * Determines badge color and text based on DOI ranges from master data
     * Also shows "Overstock" label if LSM Aktual > Max Stock
     * Adds tooltip with estimated date when stock will run out
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number} lsmAktual - LSM Aktual (ending stock)
     * @param {number|string} doi - DOI value or '∞'
     * 
     * Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 11.3
     */
    function updateStatusBadge(rawMaterialId, lsmAktual, doi) {
        const mapping = mappingData[rawMaterialId];
        if (!mapping) {
            return;
        }
        
        lsmAktual = parseFloat(lsmAktual) || 0;
        
        let badge = '';
        let badgeClass = '';
        let matchedRange = null; // Declare here so it's available for checkLSMReasonRequired
        
        // Status badge is now determined by Range DOI (not min/max stock)
        
        // Determine badge based on Range DOI Master
        if (doi === '∞' || doi === Infinity) {
            badge = 'Aman';
            badgeClass = 'badge-success';
        } else {
            const doiValue = parseFloat(doi) || 0;
            
            // Find matching range DOI
            for (let range of rangeDois) {
                const minDoi = parseFloat(range.min_doi) || 0;
                const maxDoi = range.max_doi === null ? Infinity : parseFloat(range.max_doi);
                
                if (doiValue >= minDoi && doiValue <= maxDoi) {
                    matchedRange = range;
                    break;
                }
            }
            
            if (matchedRange) {
                badge = matchedRange.name;
                badgeClass = 'badge-' + (matchedRange.badge_color || 'secondary');
            } else {
                // No matching range found
                badge = 'Unknown';
                badgeClass = 'badge-secondary';
            }
        }
        
        // Update badge element
        const badgeElement = $(`#status_badge_${rawMaterialId}`);
        if (badgeElement.length > 0) { 
            
            // Build badge HTML (no overstock check - handled by Range DOI)
            let badgeHTML = `<span class="badge ${badgeClass}">${badge}</span>`;
            
            // Update badge
            badgeElement
                .removeClass('badge-danger badge-warning badge-success badge-info badge-secondary')
                .html(badgeHTML);
             
            // Calculate estimated date when stock will run out
            let estimatedDate = '-';
            if (doi !== '∞' && doi !== Infinity && doi > 0) {
                const doiDays = Math.floor(parseFloat(doi));
                const targetDate = new Date(soDate + 'T00:00:00');
                targetDate.setDate(targetDate.getDate() + doiDays);
                
                const year = targetDate.getFullYear();
                const month = String(targetDate.getMonth() + 1).padStart(2, '0');
                const day = String(targetDate.getDate()).padStart(2, '0');
                estimatedDate = `${year}-${month}-${day}`;
            }
            
            // Add tooltip with detailed information (Requirements: 11.3)
            const doiDisplay = doi === '∞' ? '∞' : (typeof doi === 'number' ? doi.toFixed(2) : '0.00');
            
            let tooltipContent = '<div style="text-align: left; min-width: 220px;">';
            tooltipContent += '<strong>Detail Status Stok:</strong><br>';
            tooltipContent += `<span style="color: #6c757d;">LSM Aktual:</span> <strong>${lsmAktual.toFixed(2)}</strong><br>`;
            tooltipContent += `<span style="color: #6c757d;">DOI:</span> <strong>${doiDisplay} hari</strong><br>`;
            
            if (estimatedDate !== '-') {
                tooltipContent += `<span style="color: #6c757d;">Cukup sampai:</span> <strong>${estimatedDate}</strong><br>`;
            }
             
            tooltipContent += '</div>';
            
            // Update tooltip
            badgeElement.attr('data-toggle', 'tooltip');
            badgeElement.attr('data-placement', 'top');
            badgeElement.attr('data-html', 'true');
            badgeElement.attr('data-original-title', tooltipContent);
            badgeElement.css('cursor', 'help');
            
            // Reinitialize tooltip if already initialized
            if (badgeElement.data('bs.tooltip')) {
                badgeElement.tooltip('dispose');
            }
            badgeElement.tooltip({
                html: true,
                sanitize: false,
                placement: 'top',
                boundary: 'window',
                trigger: 'hover'
            });
        }
        
        // Check if LSM Reason button should be shown
        // Show button if DOI is in range with lsm_reason_flag = true
        checkLSMReasonRequired(rawMaterialId, doi, matchedRange);
    }
    
    /**
     * Check if LSM Reason is required for this item
     * Show LSM Reason button if DOI is in range with lsm_reason_flag = true
     * 
     * @param {number} rawMaterialId - Raw material ID
     * @param {number|string} doi - DOI value or '∞'
     * @param {object} matchedRange - Matched range DOI object
     */
    function checkLSMReasonRequired(rawMaterialId, doi, matchedRange) {
        const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
        const lsmReasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
        
        if (!lsmReasonBtn.length) {
            return;
        }
        
        // Show button if:
        // 1. DOI is not infinity
        // 2. Matched range has lsm_reason_flag = true
        if (matchedRange && matchedRange.lsm_reason_flag && doi !== '∞' && doi !== Infinity) {
            lsmReasonBtn.show();
            
            // Update button icon based on whether reason is already selected
            const currentReasonId = lsmReasonInput.val();
            if (currentReasonId) {
                // Find reason name
                const reason = lsmReasons.find(r => r.id == currentReasonId);
                if (reason) {
                    lsmReasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    lsmReasonBtn.removeClass('btn-danger').addClass('btn-success');
                    lsmReasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
                } else {
                    lsmReasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                    lsmReasonBtn.removeClass('btn-success').addClass('btn-danger');
                    lsmReasonBtn.attr('title', 'Pilih alasan LSM');
                }
            } else {
                lsmReasonBtn.html('<i class="fas fa-exclamation-triangle"></i>');
                lsmReasonBtn.removeClass('btn-success').addClass('btn-danger');
                lsmReasonBtn.attr('title', 'Pilih alasan LSM');
            }
        } else {
            // Hide button if not required
            lsmReasonBtn.hide();
            
            // Clear reason if previously set
            const previousReasonId = lsmReasonInput.val();
            if (previousReasonId && previousReasonId !== '') {
                // Reason was set before, need to clear it in database
                lsmReasonInput.val('');
                
                // Save to database
                const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
                const soDetailId = row.find('.autosave-field').first().data('so-detail-id');
                
                if (soDetailId) {
                    printLog(`🔄 Clearing LSM reason for RM ${rawMaterialId} (DOI no longer in range)`);
                    
                    $.ajax({
                        url: '{{ route("stock_opnames.auto_save_field") }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            so_detail_id: soDetailId,
                            field_name: 'lsm_reason_id',
                            value: '',
                            qty_utuh: row.find('input[name*="[qty_utuh]"]').val() || 0,
                            qty_pakai: row.find('input[name*="[qty_pakai]"]').val() || 0,
                            lsm_reason_id: null
                        },
                        success: function(response) {
                            if (response.success) {
                                printLog(`✓ LSM reason cleared for RM ${rawMaterialId}`);
                            } else {
                                printError(`❌ Failed to clear LSM reason: ${response.message}`);
                            }
                        },
                        error: function(xhr) {
                            printError(`❌ Error clearing LSM reason: ${xhr.responseJSON?.message || 'Unknown error'}`);
                        }
                    });
                }
            }
        }
    }
  
    
    /**
     * Update 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');
        }
         
    }
       
      
    /**
     * Initialize LSM Reason Modal
     * Populate dropdown with LSM reasons and attach event handlers
     */
    function initializeLSMReasonModal() {
        // Populate reason dropdown
        const select = $('#lsmReasonSelect');
        select.empty();
        select.append('<option value="">Pilih Alasan</option>');
        
        lsmReasons.forEach(reason => {
            select.append(`<option value="${reason.id}">${reason.code} - ${reason.name}</option>`);
        });
        
        // Initialize select2
        select.select2({
            dropdownParent: $('#lsmReasonModal'),
            placeholder: 'Pilih Alasan',
            allowClear: true
        });
        
        printLog(`✓ LSM Reason modal initialized dengan ${lsmReasons.length} reasons`);
    }
    
    /**
     * Attach event handlers for LSM Reason button and modal
     */
    function attachLSMReasonHandlers() {
        // Handle reason button click
        $(document).on('click', '.lsm-reason-btn', function() {
            const rawMaterialId = $(this).data('raw-material-id');
            
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const rmCode = row.find('td:eq(1)').text().trim();
            const rmName = row.find('td:eq(2)').text().trim();
            
            // Get LSM Aktual and DOI
            const lsmAktual = parseFloat($(`#lsm_aktual_${rawMaterialId}`).text()) || 0;
            const doi = $(`#doi_${rawMaterialId}`).text();
            const statusBadge = $(`#status_badge_${rawMaterialId}`).html();
            
            // Populate modal
            $('#lsmReasonRawMaterial').html(`<strong>${rmCode}</strong> - ${rmName}`);
            $('#lsmReasonDoiStatus').html(statusBadge);
            $('#lsmReasonLsmValue').text(`${lsmAktual.toFixed(2)}`);
            
            // Set current reason if exists
            const currentReasonId = $(`#lsm_reason_id_${rawMaterialId}`).val();
            $('#lsmReasonSelect').val(currentReasonId).trigger('change');
            
            // Store current raw material ID in modal
            $('#lsmReasonModal').data('raw-material-id', rawMaterialId);
            
            // Show modal
            $('#lsmReasonModal').modal('show');
        });
        
        // Handle save button in modal
        $('#lsmReasonSaveBtn').on('click', function() {
            const rawMaterialId = $('#lsmReasonModal').data('raw-material-id');
            const reasonId = $('#lsmReasonSelect').val();
            
            if (!reasonId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Alasan Belum Dipilih',
                    text: 'Silakan pilih alasan terlebih dahulu',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            // Save reason
            const reasonInput = $(`#lsm_reason_id_${rawMaterialId}`);
            reasonInput.val(reasonId);
            
            // Get reason details
            const reason = lsmReasons.find(r => r.id == reasonId);
            
            // Update button to show selected reason
            const reasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
            reasonBtn.removeClass('btn-danger').addClass('btn-success');
            reasonBtn.html(`<i class="fas fa-check-circle"></i>`);
            reasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
            
            // Close modal
            $('#lsmReasonSaveBtn').blur();
            $('#lsmReasonModal').modal('hide');
            
            // IMPORTANT: Trigger autosave to save reason to database
            const row = $(`tr[data-raw-material-id="${rawMaterialId}"]`);
            const soDetailId = row.find('.autosave-field').first().data('so-detail-id');
            
            if (soDetailId) {
                const payload = {
                    _token: '{{ csrf_token() }}',
                    so_detail_id: soDetailId,
                    field_name: 'lsm_reason_id',
                    value: reasonId,
                    qty_utuh: row.find('input[name*="[qty_utuh]"]').val() || 0,
                    qty_pakai: row.find('input[name*="[qty_pakai]"]').val() || 0,
                    lsm_reason_id: reasonId
                };
                
                $.ajax({
                    url: '{{ route("stock_opnames.auto_save_field") }}',
                    type: 'POST',
                    data: payload,
                    success: function(response) {
                        if (response.success) {
                            // Show toast notification (top-right corner)
                            Swal.fire({
                                icon: 'success',
                                title: 'LSM Reason Tersimpan',
                                text: `${reason.code} - ${reason.name}`,
                                timer: 2000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                             
                        } else {
                            printError(`❌ Gagal menyimpan LSM reason: ${response.message}`);
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Menyimpan',
                                text: response.message,
                                timer: 3000,
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false
                            });
                        }
                    },
                    error: function(xhr) {
                        const message = xhr.responseJSON?.message || 'Error saving LSM reason';
                        printError(`❌ Error menyimpan LSM reason: ${message}`);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Menyimpan',
                            text: message,
                            timer: 3000,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false
                        });
                    }
                });
            } else {
                printWarn(`⚠️ SO detail ID tidak ditemukan untuk RM ${rawMaterialId}`);
            }
        });
        
        printLog('✓ LSM Reason handlers attached');
    }
      
    
    /**
     * Restore reason button state from database for usulan 2 & 3
     * Called on page load to show reason button if user has previously selected a reason
     */
    function restoreReasonButtonState() {
        printLog('🔄 Restoring reason button state from database...');
        
        // Loop through all raw materials
        $('tr[data-raw-material-id]').each(function() {
            const row = $(this);
            const rawMaterialId = row.data('raw-material-id');
            
            // Check LSM Reason
            const lsmReasonId = $(`#lsm_reason_id_${rawMaterialId}`).val();
            if (lsmReasonId) {
                const lsmReasonBtn = $(`#lsm_reason_btn_${rawMaterialId}`);
                const reason = lsmReasons.find(r => r.id == lsmReasonId);
                
                if (reason && lsmReasonBtn.is(':visible')) {
                    lsmReasonBtn.removeClass('btn-danger').addClass('btn-success');
                    lsmReasonBtn.html(`<i class="fas fa-check-circle"></i>`);
                    lsmReasonBtn.attr('title', `Alasan: ${reason.code} - ${reason.name}`);
                    printLog(`✓ LSM Reason restored for RM ${rawMaterialId}: ${reason.code}`);
                }
            }
             
        });
        
        printLog('✓ Reason button state restoration complete'); 
    }
    
    /**
     * Event handler for adjustment inputs (adj_ekstra, adj_restan, adj_ringkas, adj_selisih)
     * Validates and formats to max 2 decimal places on blur
     */
    // Adjustment fields no longer need special handlers
    // They use the same validation as qty_pakai (via oninput attribute)
    
    // ========================================
    // End Event Handlers and Initialization
    // ========================================
    
    $(document).ready(function() { 
          
        // Initialize LSM Reason Modal
        initializeLSMReasonModal();
        
        // Attach event handlers  
        attachLSMReasonHandlers();
        
        // ========================================
        // REVISION MODE: Update LSM Aktual on qty changes
        // ========================================
        $(document).on('change blur', '.qty-utuh, .qty-pakai', function() {
            const row = $(this).closest('tr');
            const rawMaterialId = row.data('raw-material-id');
            
            // Get values
            const qtyUtuh = parseFloat(row.find('.qty-utuh').val()) || 0;
            const qtyPakai = parseFloat(row.find('.qty-pakai').val()) || 0;
            const itemOlahan = parseFloat(row.find('.item-olahan-input').val()) || 0;
            const conversionFactor = parseFloat(row.data('conversion-utuh-pakai')) || 1;
            const conversionFactorFstrToItem = parseFloat(row.data('conversion-factor-fstr-to-item')) || 1;
            
            // Calculate LSM Aktual
            // Formula: (qty_utuh × conversion_factor_utuh_pakai) + qty_pakai + (item_olahan / conversion_factor_to_item)
            const qtyConverted = qtyUtuh * conversionFactor;
            const itemOlahanContribution = conversionFactorFstrToItem > 0 ? itemOlahan / conversionFactorFstrToItem : 0;
            const lsmAktual = qtyConverted + qtyPakai + itemOlahanContribution;
            
            // Update LSM Aktual display
            row.find('.ending-stock').val(lsmAktual.toFixed(2));
            row.find('.ending-stock-display').text(lsmAktual.toFixed(2));
            
            // Calculate DOI if forecast data available
            if (forecastData && forecastData[rawMaterialId]) {
                const forecast = forecastData[rawMaterialId];
                const forecastAverage = forecast.forecast_average || 0;
                
                let doi = 0;
                if (forecastAverage > 0) {
                    doi = lsmAktual / forecastAverage;
                } else if (lsmAktual > 0) {
                    doi = 999.99; // Infinity representation
                }
                
                // Update DOI display
                row.find('.doi-value').val(doi.toFixed(2));
                row.find('.doi-value-display').text(doi.toFixed(2));
                
                // Check if LSM Reason button should be shown
                const mapping = mappingData[rawMaterialId];
                if (mapping && mapping.range_doi) {
                    const rangeDoi = mapping.range_doi;
                    const lsmReasonBtn = row.find(`#lsm_reason_btn_${rawMaterialId}`);
                    
                    // Show button if DOI is in range and lsm_reason_flag is true
                    if (rangeDoi.lsm_reason_flag && doi >= rangeDoi.min_doi && doi <= rangeDoi.max_doi) {
                        lsmReasonBtn.show();
                    } else {
                        lsmReasonBtn.hide();
                    }
                }
            }
            
            console.log(`✓ LSM Aktual updated for RM ${rawMaterialId}: ${lsmAktual.toFixed(2)}`);
        });
        
        // ========================================
        // REVISION MODE: Save Revision Button Handler
        // ========================================
        $('#save-revision-btn').on('click', function(e) {
            e.preventDefault();
            
            // Validate revision reason
            const revisionReason = $('#revision_reason').val().trim();
            if (!revisionReason) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Alasan Revisi Wajib Diisi',
                    text: 'Silakan isi alasan revisi untuk keperluan audit.',
                    confirmButtonText: 'OK'
                });
                return;
            }
            
            // Confirm before submit
            Swal.fire({
                title: 'Konfirmasi Revision SO',
                html: `
                    <p>SO lama akan diubah menjadi:</p>
                    <h5 class="text-warning">{{ $jsData['revisionInfo']['new_so_number_for_old'] }}</h5>
                    <p class="mt-2">SO baru akan menggunakan nomor:</p>
                    <h5 class="text-success">{{ $jsData['revisionInfo']['old_so_number'] }}</h5>
                    <p class="text-muted mt-3">Data SO lama tetap tersimpan dengan nomor baru.</p>
                `,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan Revision',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#007bff',
                cancelButtonColor: '#6c757d',
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading
                    Swal.fire({
                        title: 'Menyimpan Revision...',
                        text: 'Mohon tunggu',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    
                    // Submit form
                    $('#formID').submit();
                }
            });
        });
        
        // Restore reason button state for usulan 2 & 3 from database (visual update)
        // Add delay to ensure calculations are complete
        setTimeout(() => {
            restoreReasonButtonState();
        }, 100);
        
        // Record page load completion (Requirement 21.5)
        performanceMonitor.recordPageLoad();
        
        // Log performance summary after a short delay to allow calculations to complete
        setTimeout(() => {
            performanceMonitor.logSummary();
            performanceMonitor.checkPerformanceRequirements();
        }, 2000);
        
        // Task 22.1: Hide page loading overlay after initialization complete
        setTimeout(() => {
            hidePageLoading();
        }, 500);
         
        
        // Initialize AdminLTE card widget for collapsible adjustment cards
        $('[data-card-widget="collapse"]').CardWidget();
        
        // Check if store is selected on page load
        checkStoreSelection();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    // Add tooltip with more info
                    stockDisplay.attr('title',
                        `LSM Aktual: ${lsmAktual}\n` +
                        `Qty Utuh: ${parseFloat(stockData.qty_utuh).toFixed(0)}\n` +
                        `Qty Pakai: ${parseFloat(stockData.qty_pakai).toFixed(2)}\n` +
                        `Status: ${stockData.status}\n` +
                        `Last Updated: ${stockData.last_updated}`
                    );
                }
            });
        }
  
        // Clear row functionality
        $(document).on('click', '.clear-row', function() {
            const index = $(this).data('index');
            const rawMaterialId = $(this).data('raw-material-id');
            const row = $(this).closest('tr');

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

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

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

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

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

        // Autosave functionality
        let saveTimeout;

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

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

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

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

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

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

            // Set new timeout
            const timeoutId = setTimeout(() => {
                console.log('🚀 Proceeding with autosave for', queueKey);
                
                // Remove from queue
                autosaveQueue.delete(queueKey);
                
                // Mark as in progress
                autosaveInProgress.add(queueKey);
 
                autoSaveField(soDetailId, fieldName, value, qtyUtuh, qtyPakai, itemOlahan, rawMaterialId, queueKey);
               
            }, AUTOSAVE_THROTTLE_MS);
            
            // Store timeout ID
            autosaveQueue.set(queueKey, timeoutId);
            console.log('⏱️ Set timeout for', queueKey, 'delay:', AUTOSAVE_THROTTLE_MS + 'ms');
        });
  
        function autoSaveField(soDetailId, fieldName, value, qtyUtuh = null, qtyPakai = null, itemOlahan = null, rawMaterialId = null, queueKey = null) {
            console.log('📤 Sending AJAX autosave request:', {
                soDetailId,
                fieldName,
                value,
                queueKey,
                timestamp: new Date().toISOString()
            });
            
            // Show saving indicator
            showSavingIndicator();
            
            // Task 22.1: Add inline field loading indicator
            const field = $(`.autosave-field[data-so-detail-id="${soDetailId}"][data-field-name="${fieldName}"]`);
            field.addClass('field-saving');

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

            // Requirement 15.4: Only send changed data to minimize payload
            // Build minimal payload with only necessary fields
            const payload = {
                _token: '{{ csrf_token() }}',
                so_detail_id: soDetailId,
                field_name: fieldName,
                value: value
            };
            
            // Only include qty_utuh, qty_pakai, item_olahan
            if (qtyUtuh !== null) {
                payload.qty_utuh = qtyUtuh;
            }
            if (qtyPakai !== null) {
                payload.qty_pakai = qtyPakai;
            }
            if (itemOlahan !== null) {
                payload.item_olahan = itemOlahan;
            } 

            $.ajax({
                url: '{{ route("stock_opnames.auto_save_field") }}',
                type: 'POST',
                data: payload,
                success: function(response) {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    if (response.success) {
                        updateCalculatedFields(soDetailId, response.data, rawMaterialId);
                        showSaveSuccess(); 
                         
                    } else { 
                        showSaveError(response.message);
                        printError('❌ Autosave failed:', response.message);
                    }
                },
                error: function(xhr) {
                    // Task 22.1: Remove inline field loading indicator
                    field.removeClass('field-saving');
                    
                    
                    const message = xhr.responseJSON?.message || 'Error saving field';
                    showSaveError(message);
                    printError('❌ Autosave error:', xhr);
                },
                complete: function() {
                    // Remove from in-progress set after AJAX completes (success or error)
                    if (queueKey) {
                        autosaveInProgress.delete(queueKey);
                        console.log('Autosave completed, removed from in-progress:', queueKey);
                    }
                }
            });
 
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    Swal.fire('Berhasil!', 'Semua input telah dihapus.', 'success');
                }
            });
        }); 
  
        // Save 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();
        });
 
        $('#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');
            }
        }

        // REVISION MODE: Heartbeat disabled
        // startHeartbeat();

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

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

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

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

                stopHeartbeat(); // Stop heartbeat

                // Unlock SO
                $.ajax({
                    url: '{{ route("stock_opnames.unlock") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        so_id: soIdForLocking
                    },
                    success: function() {
                        window.location.href = href;
                    },
                    error: function() {
                        // Navigate anyway even if unlock fails
                        window.location.href = href;
                    }
                });
            }
        });
        @endif
        
        // ========================================
        // Adjustment Modal Handler
        // ========================================
        
        // Handle adjustment input changes in modal
        $(document).on('change blur', '.adjustment-input', function() {
            const input = $(this);
            const rawMaterialId = input.data('raw-material-id');
            const adjType = input.data('adj-type');
            const value = parseFloat(input.val()) || 0;
            
            // Update hidden input
            $(`#adj_${adjType}_${rawMaterialId}`).val(value.toFixed(2));
            
            // Update button appearance and tooltip
            updateAdjustmentButton(rawMaterialId);
        });
        
        // Update adjustment button appearance based on total
        function updateAdjustmentButton(rawMaterialId) {
            const ekstra = parseFloat($(`#adj_ekstra_${rawMaterialId}`).val()) || 0;
            const restan = parseFloat($(`#adj_restan_${rawMaterialId}`).val()) || 0;
            const ringkas = parseFloat($(`#adj_ringkas_${rawMaterialId}`).val()) || 0;
            const selisih = parseFloat($(`#adj_selisih_${rawMaterialId}`).val()) || 0;
            
            const total = ekstra + restan + ringkas + selisih;
            
            const button = $(`.btn-adjustment-icon[data-raw-material-id="${rawMaterialId}"]`);
            
            if (total > 0) {
                button.removeClass('btn-outline-secondary').addClass('btn-primary');
                button.attr('title', `Total Adjustment: ${total.toFixed(2)}`);
            } else { 
                button.attr('title', 'Klik untuk input adjustment');
            }
        }
         
    });
</script> 
<style> 
    /* Saving Indicator */
    .save-indicator {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #ffc107;
        color: #000;
        padding: 12px 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        animation: slideInRight 0.3s ease-out;
    }

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

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

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

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

@endsection