@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection

@section('content')
<style>
/* ── Sticky header clone ─────────────────────────────────────────────── */
#items-table-seksi-sticky-header thead th {
    white-space: nowrap;
    background-color: #ffc107;
}
/* ── Cache indicator ─────────────────────────────────────────────────── */
#cache-indicator-seksi {
    font-size: 13px;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 4px 10px;
    display: inline-block;
}

/* ── Tablet (max 992px) ──────────────────────────────────────────────── */
@@media (max-width: 992px) {
    .seksi-wrap .card-header { padding: 6px 10px; }
    .seksi-wrap .card-title { font-size: 14px; }
    .seksi-wrap .card-body { padding: 8px 10px; }
    .seksi-header-table { font-size: 14px; }
    .seksi-header-table .seksi-label { font-size: 14px; }

    #items-table-seksi { font-size: 14px; }
    #items-table-seksi thead th { font-size: 14px; padding: 5px 4px; white-space: nowrap; }
    #items-table-seksi tbody td { padding: 1px; vertical-align: top; }
    #items-table-seksi .form-control { font-size: 14px; padding: 2px 4px; height: auto; }
    #items-table-seksi .btn-xs { padding: 2px 6px; font-size: 11px; }
    /* #items-table-seksi tr.fstr-subline td,
    #items-table-seksi tr.sub-subline td { font-size: 14px; padding: 2px 4px; } */
    #items-table-seksi-sticky-header { font-size: 14px; }
    #items-table-seksi-sticky-header thead th { font-size: 14px; padding: 5px 4px; }
}

/* ── Mobile (max 768px) ──────────────────────────────────────────────── */
@@media (max-width: 768px) {
    .seksi-wrap .content { padding: 8px 4px; }
    .seksi-wrap .container-fluid { padding-left: 4px; padding-right: 4px; }
    .seksi-wrap .card { margin-bottom: 8px; }
    .seksi-wrap .card-header .btn { font-size: 11px; padding: 3px 8px; }
    .seksi-header-table td { padding-top: 0 !important; padding-bottom: 0 !important; }
    .seksi-header-table { font-size: 14px; }
    .seksi-header-table .seksi-label { font-size: 14px; }
    #search_item_seksi { font-size: 16px; padding: 2px 8px; height: auto; }
    #search_btn_seksi { font-size: 14px; padding: 2px 8px; }
    #items-table-seksi .form-control { font-size: 16px; min-width: 55px; }
    #items-table-seksi-sticky-header thead th { font-size: 14px; padding: 4px 3px; }
    #items-table-seksi tr.fstr-subline td.pl-5,
    #items-table-seksi tr.sub-subline td.pl-5 { padding-left: 1.8rem !important; }
    /* Modal adj compact di mobile */
    [id^="adjModalSeksi"] .modal-title { font-size: 14px; }
    [id^="adjModalSeksi"] .modal-body { padding: 10px; }
    [id^="adjModalSeksi"] .modal-body p { font-size: 14px; margin-bottom: 0 !important; }
    [id^="adjModalSeksi"] .form-group { margin-bottom: 6px !important; }
    [id^="adjModalSeksi"] .form-group label { font-size: 14px; margin-bottom: 2px; }
    [id^="adjModalSeksi"] .form-control { font-size: 14px; padding: 4px 8px; height: auto; }
    [id^="adjModalSeksi"] .modal-footer { padding: 6px 10px; }
    [id^="adjModalSeksi"] .btn { padding: .125rem .25rem; font-size: .75rem; line-height: 1.5; border-radius: .15rem; }
}

/* Saving indicator */
#save-indicator-seksi, #save-success-seksi { font-size: 14px; padding: 8px 14px; }
/* UOM label di bawah input */
.uom-label { font-size: 14px; text-align: center; display: block; margin-top: 1px; }
</style>
<div class="seksi-wrap">
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-info">
                    <div class="card-header">
                        <h3 class="card-title">Stock Opname — Input Seksi</h3>
                        <div class="card-tools pr-1">
                            <a href="{{ route('stock_opnames.index') }}" class="btn btn-sm btn-warning">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                            <!-- Header Info -->
                            @php
                                $hariIndo = ['Sunday'=>'Minggu','Monday'=>'Senin','Tuesday'=>'Selasa','Wednesday'=>'Rabu','Thursday'=>'Kamis','Friday'=>'Jumat','Saturday'=>'Sabtu'];
                                $soDate   = $data->so_date ?? now();
                                $namaHari = $hariIndo[$soDate->format('l')] ?? $soDate->format('l');
                            @endphp
                            <div class="row">
                                <div class="col-12 pl-0 pr-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-borderless mb-1 seksi-header-table">
                                            <tbody>
                                                <tr>
                                                    <td width="50%">
                                                        <span class="text-muted seksi-label">User : </span>
                                                        <strong>{{ $logged_name }}</strong> <small class="text-muted">({{ $logged_role_name }})</small>
                                                    </td>
                                                    <td width="50%">
                                                        <span class="text-muted seksi-label">Store : </span>
                                                        <strong>{{ $store_name ?: '-' }}</strong>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <span class="text-muted seksi-label">Date : </span>
                                                        <strong>{{ $namaHari }}, {{ $soDate->format('d M Y') }}</strong>
                                                    </td>
                                                    <td>
                                                        <span class="text-muted seksi-label">Seksi : </span>
                                                        <strong class="text-info">{{ $variables['seksi_names'] ?? '-' }}</strong>
                                                    </td>
                                                </tr>
                                                <!-- <tr>
                                                    <td colspan="2">
                                                        <span class="text-danger">
                                                        <i class="fas fa-exclamation-triangle mr-1"></i>Semua field otomatis tersimpan saat nilai diubah.
                                                        </span>
                                                    </td>
                                                </tr> -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 pl-0 pr-0">
                                    <div class="table-responsive">
                                        <div class="input-group mb-1">
                                            <input type="text" class="form-control" id="search_item_seksi" placeholder="Search item...">
                                            <div class="input-group-append">
                                                <button class="btn btn-sm btn-warning" type="button" id="search_btn_seksi">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>

                            @if($variables['raw_materials']->isEmpty())
                            <small class="text-danger"><i class="fas fa-exclamation-triangle mr-1"></i>Tidak ada item untuk seksi Anda. Hubungi administrator.</small>
                            @else

                            <!-- Items Table -->
                            <div class="row">
                                <div class="col-12 pl-0 pr-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-sm" id="items-table-seksi">
                                            <thead class="bg-warning">
                                                <tr>
                                                    <th width="1%">No</th>
                                                    <th>Item</th>
                                                    <th width="8%" class="text-center">Utuh</th>
                                                    <th width="8%" class="text-center">Pakai</th>
                                                    <th width="5%" class="text-center">X</th>
                                                </tr>
                                            </thead>
                                            <tbody id="items-tbody-seksi">
                                                @foreach($variables['raw_materials'] as $index => $rm)
                                                @php
                                                    $existingDetail = null;
                                                    if (isset($data->details)) {
                                                        $existingDetail = $data->details->where('raw_material_id', $rm->id)->first();
                                                    }
                                                    $mapping = $variables['mappings']->get($rm->id);
                                                    $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;
                                                    $uomPakai = $rm->uom_pakai ?? $rm->uom;
                                                @endphp
                                                <tr data-index="{{ $index }}"
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    data-conversion-utuh-pakai="{{ $conversionFactor }}"
                                                    data-conversion-factor-fstr-to-item="{{ $rm->conversion_factor_to_item ?? 1 }}"
                                                    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
                                                        </span>
                                                        @if(!$hasConversion)
                                                            <br><small class="text-danger"><i class="fa fa-warning"></i> Tidak ada mapping konversi</small>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <input type="text" step="1" min="0"
                                                            class="form-control qty-utuh text-right {{ !$hasConversion ? 'border-danger' : '' }}"
                                                            name="items[{{ $index }}][qty_utuh]"
                                                            data-field-name="qty_utuh"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            value="{{ $existingDetail ? $existingDetail->qty_utuh : 0 }}"
                                                            data-conversion="{{ $conversionFactor }}"
                                                            data-has-conversion="{{ $hasConversion ? 'true' : 'false' }}"
                                                            data-uom-utuh="{{ $uomUtuh }}"
                                                            data-uom-pakai="{{ $uomPakai }}"
                                                            onkeypress="return (event.charCode >= 48 && event.charCode <= 57)"
                                                            oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                                        <span class="uom-label text-muted"><strong>{{ $uomUtuh }}</strong></span>
                                                    </td>
                                                    <td>
                                                        <input type="text" step="0.01" min="0" max="999999.99"
                                                            class="form-control qty-pakai text-right {{ !$hasConversion ? 'border-danger' : '' }}"
                                                            name="items[{{ $index }}][qty_pakai]"
                                                            data-field-name="qty_pakai"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            value="{{ $existingDetail ? number_format($existingDetail->qty_pakai, 2, '.', '') : '0.00' }}"
                                                            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)">
                                                        <span class="uom-label text-muted"><strong>{{ $uomPakai }}</strong></span>
                                                    </td>
                                                    <td class="text-center">
                                                        <button type="button" class="btn btn-xs btn-secondary clear-row-seksi"
                                                            data-index="{{ $index }}"
                                                            data-raw-material-id="{{ $rm->id }}"
                                                            title="Reset baris ini">
                                                            X
                                                        </button>
                                                    </td>
                                                </tr>

                                                {{-- FSTR Sub-lines --}}
                                                @php
                                                    $fstrComponents = $rm->components()
                                                        ->where('delete_flag', 0)
                                                        ->where('input_lsm_flag', true)
                                                        ->with('component')
                                                        ->get()
                                                        ->filter(fn($comp) => $comp->component !== null);
                                                @endphp

                                                @foreach($fstrComponents as $fstrComponent)
                                                @php
                                                    $fstr = $fstrComponent->component;
                                                    if (!$fstr) continue;
                                                    $componentQtyPerUnit = $fstrComponent->qty;
                                                    $isFSTR = $fstr->components()->where('delete_flag', 0)->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" class="pl-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>
                                                    </td>
                                                    <td>
                                                        <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></td>
                                                    <td></td>
                                                </tr>
                                                @endforeach

                                                {{-- SUB Sub-lines --}}
                                                @foreach($rm->substitutions->filter(fn($s) => !$s->delete_flag) as $subRelation)
                                                @php
                                                    $subItem = $subRelation->substitution;
                                                    if (!$subItem) continue;
                                                    $existingSubQty = 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;
                                                        $existingSubQty = $fstrQtyData['sub_' . $subItem->id] ?? 0;
                                                    }
                                                @endphp
                                                <tr class="sub-subline bg-light"
                                                    style="border-top: 2px solid #e9ecef;"
                                                    data-parent-id="{{ $rm->id }}"
                                                    data-sub-id="{{ $subItem->id }}">
                                                    <td colspan="2" class="pl-5">
                                                        <i class="fas fa-level-up-alt fa-rotate-90 text-muted"></i>
                                                        <small class="text-muted">SUB:</small>
                                                        <small>{{ $subItem->code }}</small> -
                                                        <small>{{ $subItem->name }}</small> -
                                                        <small>{{ $subItem->uom_pakai ?? $subItem->uom }}</small>
                                                    </td>
                                                    <td colspan="2">
                                                        <input type="text"
                                                            step="0.01" min="0" max="999999.99"
                                                            class="form-control sub-qty-pakai text-right"
                                                            name="sub_qty_pakai[{{ $rm->id }}][{{ $subItem->id }}]"
                                                            data-field-name="sub_qty_pakai"
                                                            data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                            data-sub-id="{{ $subItem->id }}"
                                                            data-parent-id="{{ $rm->id }}"
                                                            value="{{ $existingSubQty }}"
                                                            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)"
                                                            placeholder="Qty Pakai SUB">
                                                    </td>
                                                    <td></td>
                                                </tr>
                                                @endforeach

                                                @endforeach {{-- end foreach raw_materials --}}
                                            </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 mr-1">
                                        <i class="fas fa-arrow-left"></i> Kembali
                                    </a>
                                    <button type="button" id="btn-simpan-seksi" class="btn btn-sm btn-success">
                                        <i class="fas fa-save"></i> Simpan
                                    </button>
                                    <span id="cache-indicator-seksi" class="ml-2" style="display:none;">
                                        <i class="fas fa-clock mr-1"></i> Ada perubahan belum disimpan
                                    </span>
                                </div>
                            </div>

                            @endif {{-- end if raw_materials not empty --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</div>{{-- .seksi-wrap --}}

<!-- Saving Indicator -->
<div id="save-indicator-seksi" style="display:none; position:fixed; top:20px; right:20px; background:#17a2b8; color:white; padding:14px 20px; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,.1); z-index:9999; align-items:center; gap:10px; font-weight:500;">
    <i class="fas fa-spinner fa-spin"></i> Menyimpan...
</div>
<div id="save-success-seksi" style="display:none; position:fixed; top:20px; right:20px; background:#28a745; color:white; padding:14px 20px; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,.1); z-index:9999; align-items:center; gap:10px; font-weight:500;">
    <i class="fas fa-check-circle"></i> Tersimpan
</div>

<script>
$(function () {
    const SAVE_SEKSI_URL   = '{{ route("stock_opnames.save_seksi", $data->id) }}';
    const CSRF_TOKEN       = '{{ csrf_token() }}';
    const SO_ID            = {{ $data->id }};
    const USER_ID          = {{ auth()->id() }};
    const UNLOCK_SEKSI_URL = '{{ route("stock_opnames.unlock_seksi") }}';

    // ── localStorage key unik per SO + user ──────────────────────────────────
    const LS_KEY = 'seksi_draft_' + SO_ID + '_' + USER_ID;

    // ── Baca draft dari localStorage dan isi ke form ──────────────────────────
    function loadDraftFromCache() {
        try {
            const raw = localStorage.getItem(LS_KEY);
            if (!raw) return;
            const draft = JSON.parse(raw);

            // Isi qty_utuh & qty_pakai
            if (draft.items) {
                Object.entries(draft.items).forEach(function([rmId, vals]) {
                    const $row = $(`#items-tbody-seksi tr[data-raw-material-id="${rmId}"]`);
                    if (!$row.length) return;
                    if (vals.qty_utuh !== undefined) $row.find('.qty-utuh').val(vals.qty_utuh);
                    if (vals.qty_pakai !== undefined) $row.find('.qty-pakai').val(vals.qty_pakai);
                });
            }

            // Isi FSTR qty_pakai
            if (draft.fstr) {
                Object.entries(draft.fstr).forEach(function([rmId, fstrMap]) {
                    Object.entries(fstrMap).forEach(function([fstrId, qty]) {
                        $(`input.fstr-qty-pakai[data-parent-id="${rmId}"][data-fstr-id="${fstrId}"]`).val(qty);
                    });
                });
            }

            // Isi SUB qty_pakai
            if (draft.sub) {
                Object.entries(draft.sub).forEach(function([rmId, subMap]) {
                    Object.entries(subMap).forEach(function([subId, qty]) {
                        $(`input.sub-qty-pakai[data-parent-id="${rmId}"][data-sub-id="${subId}"]`).val(qty);
                    });
                });
            }

            $('#cache-indicator-seksi').show();
        } catch(e) {
            console.warn('Gagal load draft seksi dari localStorage:', e);
        }
    }

    // ── Simpan draft ke localStorage ─────────────────────────────────────────
    function saveDraftToCache() {
        try {
            const draft = { items: {}, fstr: {}, sub: {} };

            // Kumpulkan qty_utuh & qty_pakai
            $('#items-tbody-seksi tr[data-raw-material-id]').not('.fstr-subline').not('.sub-subline').each(function() {
                const rmId = $(this).data('raw-material-id');
                draft.items[rmId] = {
                    qty_utuh:  $(this).find('.qty-utuh').val(),
                    qty_pakai: $(this).find('.qty-pakai').val(),
                };
            });

            // Kumpulkan FSTR
            $('#items-tbody-seksi tr.fstr-subline').each(function() {
                const rmId   = $(this).data('parent-id');
                const fstrId = $(this).data('fstr-id');
                const qty    = $(this).find('.fstr-qty-pakai').val();
                if (!draft.fstr[rmId]) draft.fstr[rmId] = {};
                draft.fstr[rmId][fstrId] = qty;
            });

            // Kumpulkan SUB
            $('#items-tbody-seksi tr.sub-subline').each(function() {
                const rmId  = $(this).data('parent-id');
                const subId = $(this).data('sub-id');
                const qty   = $(this).find('.sub-qty-pakai').val();
                if (!draft.sub[rmId]) draft.sub[rmId] = {};
                draft.sub[rmId][subId] = qty;
            });

            localStorage.setItem(LS_KEY, JSON.stringify(draft));
            $('#cache-indicator-seksi').show();
        } catch(e) {
            console.warn('Gagal simpan draft seksi ke localStorage:', e);
        }
    }

    // ── Hapus draft dari localStorage ────────────────────────────────────────
    function clearDraftCache() {
        localStorage.removeItem(LS_KEY);
        $('#cache-indicator-seksi').hide();
    }

    // ── Load draft saat halaman dibuka ────────────────────────────────────────
    loadDraftFromCache();

    // ── Simpan ke cache saat ada perubahan input ──────────────────────────────
    let cacheTimer = null;
    $(document).on('input change', '.qty-utuh, .qty-pakai, .fstr-qty-pakai, .sub-qty-pakai', function() {
        clearTimeout(cacheTimer);
        cacheTimer = setTimeout(saveDraftToCache, 400);
    });

    // ── Tombol Simpan — kirim ke database ────────────────────────────────────
    $('#btn-simpan-seksi').on('click', function() {
        const $btn = $(this);
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Menyimpan...');

        // Bangun payload dari form
        const items = [];
        const fstrQtyPakai = {};

        $('#items-tbody-seksi tr[data-raw-material-id]').not('.fstr-subline').not('.sub-subline').each(function() {
            const rmId = $(this).data('raw-material-id');
            items.push({
                raw_material_id: rmId,
                qty_utuh:  $(this).find('.qty-utuh').val() || 0,
                qty_pakai: $(this).find('.qty-pakai').val() || 0,
            });
        });

        $('#items-tbody-seksi tr.fstr-subline').each(function() {
            const rmId   = $(this).data('parent-id');
            const fstrId = $(this).data('fstr-id');
            const qty    = $(this).find('.fstr-qty-pakai').val() || 0;
            if (!fstrQtyPakai[rmId]) fstrQtyPakai[rmId] = {};
            fstrQtyPakai[rmId][fstrId] = qty;
        });

        // SUB disimpan dalam fstr_qty_pakai dengan prefix 'sub_'
        $('#items-tbody-seksi tr.sub-subline').each(function() {
            const rmId  = $(this).data('parent-id');
            const subId = $(this).data('sub-id');
            const qty   = $(this).find('.sub-qty-pakai').val() || 0;
            if (!fstrQtyPakai[rmId]) fstrQtyPakai[rmId] = {};
            fstrQtyPakai[rmId]['sub_' + subId] = qty;
        });

        $.ajax({
            url: SAVE_SEKSI_URL,
            type: 'POST',
            data: {
                _token: CSRF_TOKEN,
                items: items,
                fstr_qty_pakai: fstrQtyPakai,
            },
            success: function(res) {
                if (res.success) {
                    clearDraftCache();
                    toastr.success(res.message || 'Data berhasil disimpan.', 'Sukses');
                    // Redirect ke index setelah simpan
                    setTimeout(function() {
                        window.location.href = '{{ route("stock_opnames.index") }}';
                    }, 1200);
                } else {
                    toastr.error(res.message || 'Gagal menyimpan.', 'Error');
                    $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan');
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.message || 'Terjadi kesalahan server.';
                toastr.error(msg, 'Error');
                $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan');
            }
        });
    });

    // ── Auto-unlock saat user meninggalkan halaman ────────────────────────────
    function releaseSeksiLock() {
        navigator.sendBeacon(UNLOCK_SEKSI_URL, new URLSearchParams({
            _token: CSRF_TOKEN,
            so_id: SO_ID
        }));
    }
    window.addEventListener('beforeunload', releaseSeksiLock);
    $('a[href*="stock_opnames"]').on('click', function() {
        releaseSeksiLock();
    });

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

        $row.find('.qty-utuh').val(0);
        $row.find('.qty-pakai').val('0.00');

        $(`#items-tbody-seksi tr.fstr-subline[data-parent-id="${rmId}"]`).each(function () {
            $(this).find('.fstr-qty-pakai').val(0);
        });
        $(`#items-tbody-seksi tr.sub-subline[data-parent-id="${rmId}"]`).each(function () {
            $(this).find('.sub-qty-pakai').val(0);
        });

        saveDraftToCache();
    });

    // ── Search ────────────────────────────────────────────────────────────────
    function doSearch() {
        const keyword = $('#search_item_seksi').val().toLowerCase().trim();
        $('#items-tbody-seksi tr').each(function () {
            const $tr = $(this);
            if ($tr.hasClass('fstr-subline') || $tr.hasClass('sub-subline')) return;
            const text = $tr.find('td:eq(1)').text().toLowerCase();
            const visible = !keyword || text.includes(keyword);
            $tr.toggle(visible);
            const rmId = $tr.data('raw-material-id');
            $(`#items-tbody-seksi tr.fstr-subline[data-parent-id="${rmId}"], #items-tbody-seksi tr.sub-subline[data-parent-id="${rmId}"]`).toggle(visible);
        });
    }
    $('#search_btn_seksi').on('click', doSearch);
    $('#search_item_seksi').on('keyup', function (e) {
        if (e.key === 'Enter') doSearch();
    });

    // ── Floating sticky header ────────────────────────────────────────────────
    (function () {
        const $table     = $('#items-table-seksi');
        const $thead     = $table.find('thead');
        const $container = $table.closest('.table-responsive');

        const $stickyTable = $('<table>')
            .addClass($table.attr('class'))
            .attr('id', 'items-table-seksi-sticky-header')
            .css({
                position:   'fixed',
                top:        0,
                zIndex:     1000,
                display:    'none',
                tableLayout:'fixed',
                margin:     0,
            })
            .append($thead.clone(true));
        $('body').append($stickyTable);

        function sync() {
            const cr = $container[0].getBoundingClientRect();
            const tw = $table.outerWidth();
            $stickyTable.css({ left: cr.left + 'px', width: cr.width + 'px' });
            $stickyTable.find('thead').css('margin-left', -$container.scrollLeft() + 'px');
            $stickyTable.find('thead').width(tw);
            const $r1orig = $thead.find('tr:nth-child(1) th');
            $stickyTable.find('thead tr:nth-child(1) th').each(function(i) {
                const w = $r1orig.eq(i).outerWidth();
                $(this).css({ width: w + 'px', minWidth: w + 'px', maxWidth: w + 'px' });
            });
        }

        function onScroll() {
            const tableTop    = $table[0].getBoundingClientRect().top;
            const tableBottom = $table[0].getBoundingClientRect().bottom;
            const theadH      = $thead.outerHeight();
            if (tableTop < 0 && tableBottom > theadH) {
                sync();
                $stickyTable.show();
            } else {
                $stickyTable.hide();
            }
        }

        $container.on('scroll', function() { if ($stickyTable.is(':visible')) sync(); });
        $(window).on('scroll resize', onScroll);
        onScroll();
    })();
});
</script>
@endsection