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

/* ── 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: middle; }
    #items-table-seksi .form-control { font-size: 14px; padding: 3px 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: 3px 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; }
</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="5%" class="text-center">Utuh</th>
                                                    <th width="5%" class="text-center">Pakai</th>
                                                    <th width="5%" class="text-center">Adj</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 }}">
                                                        | <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 autosave-field-seksi {{ !$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>
                                                        <input type="text" step="0.01" min="0" max="999999.99"
                                                            class="form-control qty-pakai text-right autosave-field-seksi {{ !$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 ? 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)">
                                                    </td>
                                                    <td class="text-center">
                                                        @php
                                                            $hasRestan  = $rm->adj_restan_flag;
                                                            $hasExtras  = $rm->adj_extras_flag;
                                                            $hasRingkas = $rm->adj_ringkas_flag;
                                                            $hasSelisih = $rm->adj_selisih_flag;
                                                            $hasAnyAdj  = $hasRestan || $hasExtras || $hasRingkas || $hasSelisih;
                                                            $totalAdj   = 0;
                                                            if ($existingDetail) {
                                                                $totalAdj = ($existingDetail->adj_ekstra ?? 0)
                                                                          + ($existingDetail->adj_restan ?? 0)
                                                                          + ($existingDetail->adj_ringkas ?? 0)
                                                                          + ($existingDetail->adj_selisih ?? 0);
                                                            }
                                                        @endphp
                                                        @if($hasAnyAdj)
                                                            <button type="button"
                                                                class="btn btn-xs btn-warning btn-adjustment-icon"
                                                                data-toggle="modal"
                                                                data-target="#adjModalSeksi{{ $rm->id }}"
                                                                title="{{ $totalAdj > 0 ? 'Total Adj: ' . number_format($totalAdj, 2) : 'Input adjustment' }}">
                                                                V
                                                            </button>
                                                            <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"><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">
                                                        <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>

                            {{-- Adj Modals — di luar tabel agar tidak blocking di mobile --}}
                            @foreach($variables['raw_materials'] as $rm)
                            @php
                                $existingDetail = isset($data->details) ? $data->details->where('raw_material_id', $rm->id)->first() : null;
                                $hasRestan  = $rm->adj_restan_flag;
                                $hasExtras  = $rm->adj_extras_flag;
                                $hasRingkas = $rm->adj_ringkas_flag;
                                $hasSelisih = $rm->adj_selisih_flag;
                            @endphp
                            @if($hasRestan || $hasExtras || $hasRingkas || $hasSelisih)
                            <div class="modal fade" id="adjModalSeksi{{ $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" data-dismiss="modal"><span>&times;</span></button>
                                        </div>
                                        <div class="modal-body">
                                            <p class="text-muted"><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-seksi"
                                                    data-field-name="adj_ekstra"
                                                    data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    value="{{ $existingDetail ? number_format($existingDetail->adj_ekstra, 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)">
                                            </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-seksi"
                                                    data-field-name="adj_restan"
                                                    data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    value="{{ $existingDetail ? number_format($existingDetail->adj_restan, 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)">
                                            </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-seksi"
                                                    data-field-name="adj_ringkas"
                                                    data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    value="{{ $existingDetail ? number_format($existingDetail->adj_ringkas, 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)">
                                            </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-seksi"
                                                    data-field-name="adj_selisih"
                                                    data-so-detail-id="{{ $existingDetail ? $existingDetail->id : '' }}"
                                                    data-raw-material-id="{{ $rm->id }}"
                                                    value="{{ $existingDetail ? number_format($existingDetail->adj_selisih, 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)">
                                            </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
                            @endforeach

                            <!-- 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>
                                    <a href="{{ route('stock_opnames.index', $data->id) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-check"></i> Selesai
                                    </a>
                                </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 AUTOSAVE_URL_FIELD   = '{{ route("stock_opnames.auto_save_field") }}';
    const AUTOSAVE_URL_FSTR    = '{{ route("stock_opnames.auto_save_fstr_qty_pakai") }}';
    const AUTOSAVE_URL_SUB     = '{{ route("stock_opnames.auto_save_sub_qty_pakai") }}';
    const CSRF_TOKEN           = '{{ csrf_token() }}';
    const SO_ID                = {{ $data->id }};
    const UNLOCK_SEKSI_URL     = '{{ route("stock_opnames.unlock_seksi") }}';

    // ── 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);
    // Unlock juga saat klik tombol Kembali
    $('a[href*="stock_opnames"]').on('click', function() {
        releaseSeksiLock();
    });

    // ── Autosave helpers ──────────────────────────────────────────────────────
    function showSaving() {
        $('#save-indicator-seksi').css('display', 'flex');
        $('#save-success-seksi').hide();
    }
    function showSaved() {
        $('#save-indicator-seksi').hide();
        $('#save-success-seksi').css('display', 'flex');
        setTimeout(() => $('#save-success-seksi').fadeOut(500), 1500);
    }
    function showError(msg) {
        $('#save-indicator-seksi').hide();
        toastr.error(msg || 'Gagal menyimpan', 'Error');
    }

    // ── Autosave qty_utuh / qty_pakai ─────────────────────────────────────────
    let autosaveTimer = null;
    $(document).on('change', '.autosave-field-seksi', function () {
        const $input = $(this);
        const soDetailId = $input.data('so-detail-id');
        const fieldName  = $input.data('field-name');
        const value      = $input.val();

        if (!soDetailId) return; // belum ada detail record

        clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(function () {
            showSaving();
            $.ajax({
                url: AUTOSAVE_URL_FIELD,
                type: 'POST',
                data: { _token: CSRF_TOKEN, so_detail_id: soDetailId, field_name: fieldName, value: value },
                success: function (res) {
                    if (res.success) {
                        showSaved();
                    } else {
                        showError(res.message);
                    }
                },
                error: function () { showError(); }
            });
        }, 600);
    });

    // ── Autosave FSTR qty_pakai ───────────────────────────────────────────────
    $(document).on('change', '.fstr-qty-pakai', function () {
        const $input    = $(this);
        const soDetailId = $input.data('so-detail-id');
        const fstrId    = $input.data('fstr-id');
        const qtyPakai  = $input.val();

        if (!soDetailId) return;

        showSaving();
        $.ajax({
            url: AUTOSAVE_URL_FSTR,
            type: 'POST',
            data: { _token: CSRF_TOKEN, so_detail_id: soDetailId, fstr_id: fstrId, qty_pakai: qtyPakai },
            success: function (res) {
                if (res.success) showSaved(); else showError(res.message);
            },
            error: function () { showError(); }
        });
    });

    // ── Autosave SUB qty_pakai ────────────────────────────────────────────────
    $(document).on('change', '.sub-qty-pakai', function () {
        const $input    = $(this);
        const soDetailId = $input.data('so-detail-id');
        const subId     = $input.data('sub-id');
        const qtyPakai  = $input.val();

        if (!soDetailId) return;

        showSaving();
        $.ajax({
            url: AUTOSAVE_URL_SUB,
            type: 'POST',
            data: { _token: CSRF_TOKEN, so_detail_id: soDetailId, sub_id: subId, qty_pakai: qtyPakai },
            success: function (res) {
                if (res.success) showSaved(); else showError(res.message);
            },
            error: function () { showError(); }
        });
    });

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

        // Reset qty utuh & pakai di baris utama
        $row.find('.qty-utuh').val(0).trigger('change');
        $row.find('.qty-pakai').val(0).trigger('change');

        // Reset FSTR sub-lines milik baris ini
        $(`#items-tbody-seksi tr.fstr-subline[data-parent-id="${rmId}"]`).each(function () {
            $(this).find('.fstr-qty-pakai').val(0).trigger('change');
        });

        // Reset SUB sub-lines milik baris ini
        $(`#items-tbody-seksi tr.sub-subline[data-parent-id="${rmId}"]`).each(function () {
            $(this).find('.sub-qty-pakai').val(0).trigger('change');
        });
    });

    // ── 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