@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Input'])

{{-- Top Action Card (Persis seperti transc/trscoa/add.blade.php) --}}
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4 align-items-center justify-content-between">
            {{-- Kolom Kiri: Tombol Aksi --}}
            <div class="col-lg-auto d-flex justify-content-start gap-2 flex-wrap">
                <a href="{{ route('troutp.result', array_filter([
                        'v_fdate' => session('filter_outp_fdate'),
                        'v_tdate' => session('filter_outp_tdate'),
                        'v_matnr' => session('filter_outp_matnr'),
                        'v_batch' => session('filter_outp_batch'),
                        'v_lifnr' => session('filter_outp_lifnr'),
                    ])) }}" class="btn btn-secondary mb-0 btn-back-to-last">
                    <i class="fas fa-arrow-rotate-left me-1"></i>
                    <span class="font-weight-bold"> Kembali</span>
                </a>

                <button type="button" class="btn btn-primary mb-0" onclick="submitForm('draft')">
                    <i class="fas fa-save me-1"></i>
                    <span class="font-weight-bold"> Simpan Draft</span>
                </button>
            </div>


        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <form id="formQcOutsource" action="{{ url($url_menu . '/add') }}" method="POST" novalidate>
        @csrf
        <input type="hidden" name="status_action" id="statusAction" value="draft">

        <div class="row">
            <div class="col-md-12">
                {{-- CARD HEADER: Persis format trscoa/add.blade.php (Kolom Kiri & Kolom Kanan) --}}
                <div class="card shadow-lg mb-4">
                    <div class="card-header pb-2">
                        <h5 class="mb-0">Test Product Outsource</h5>
                    </div>

                    <hr class="horizontal dark mt-0">
                    @include('components.alert')

                    <div class="card-body pt-0">
                        {{-- NAV TABS: Header & Detail Tambahan --}}
                        <ul class="nav nav-tabs mb-4 border-bottom" id="tabHeaderOutsource" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active font-weight-bold" id="tab-header-btn" data-bs-toggle="tab" data-bs-target="#tab-header" data-toggle="tab" data-target="#tab-header" type="button" role="tab" aria-controls="tab-header" aria-selected="true" style="font-size: 0.9rem; border-radius: 8px 8px 0 0;">
                                    <i class="fas fa-file-lines me-1 text-primary"></i> Header
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link font-weight-bold text-secondary" id="tab-detail-tambahan-btn" data-bs-toggle="tab" data-bs-target="#tab-detail-tambahan" data-toggle="tab" data-target="#tab-detail-tambahan" type="button" role="tab" aria-controls="tab-detail-tambahan" aria-selected="false" style="font-size: 0.9rem; border-radius: 8px 8px 0 0;">
                                    <i class="fas fa-layer-group me-1 text-info"></i> Detail Tambahan
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content" id="tabHeaderOutsourceContent">
                            {{-- ================= TAB 1: HEADER ================= --}}
                            <div class="tab-pane fade show active" id="tab-header" role="tabpanel" aria-labelledby="tab-header-btn">
                                {{-- BARIS 1: Tanggal Uji, Tanggal Datang, No Batch, IO --}}
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="testDate" class="form-label font-weight-bold text-dark">Tanggal Uji <span class="text-danger">*</span></label>
                                        <input type="date" name="test_date" id="testDate" class="form-control required-input" value="{{ old('test_date', $default_date) }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="arrivalDate" class="form-label font-weight-bold text-dark">Tanggal Datang <span class="text-danger">*</span></label>
                                        <input type="date" name="arrival_date" id="arrivalDate" class="form-control bg-light" value="{{ old('arrival_date', $prefill_arrival_date ?: $default_date) }}" readonly style="pointer-events: none; background-color: #e9ecef !important;" tabindex="-1">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="batch" class="form-label font-weight-bold text-dark">No Batch <span class="text-danger">*</span></label>
                                        <input type="text" name="batch" id="batch" class="form-control" placeholder="No Batch..." value="{{ old('batch', $prefill_batch ?? '') }}">
                                    </div>
                                    <div class="col-md-3">
                                        <div class="d-flex gap-2">
                                            <div style="flex: 0 0 75%; max-width: 75%; width: 75%;">
                                                <label for="io" class="form-label font-weight-bold text-dark">IO</label>
                                                <input type="text" name="io" id="io" class="form-control" placeholder="IO..." maxlength="100" value="{{ old('io') }}">
                                            </div>
                                            <div style="flex: 0 0 25%; max-width: 25%; width: 25%;">
                                                <label for="qtyBale" class="form-label font-weight-bold text-dark">QTY</label>
                                                <input type="text" name="qty_bale" id="qtyBale" class="form-control text-center" placeholder="Qty..." value="{{ old('qty_bale', $prefill_qty_bale ?? '') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- BARIS 2: Material, Deskripsi Material, Jenis Material, Warna --}}
                                <div class="row mb-3">
                                    <div class="col-md-3" id="colMaterialWrapper">
                                        <label for="materialCode" class="form-label font-weight-bold text-dark">Material <span class="text-danger">*</span></label>
                                        <input type="text" name="material_code" id="materialCode" class="form-control font-monospace bg-light required-input" placeholder="Kode Material..." value="{{ old('material_code', $prefill_material_code ?? '') }}" readonly required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="materialDesc" class="form-label font-weight-bold text-dark">Deskripsi Material <span class="text-danger">*</span></label>
                                        <input type="text" name="material_desc" id="materialDesc" class="form-control" placeholder="Deskripsi Material..." value="{{ old('material_desc', old('material_name', $prefill_material_desc ?? '')) }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="materialType" class="form-label font-weight-bold text-dark">Jenis Material <span class="text-danger">*</span></label>
                                        <input type="text" name="material_type" id="materialType" class="form-control required-input" placeholder="Jenis Material..." value="{{ old('material_type') }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="warna" class="form-label font-weight-bold text-dark">Warna <span class="text-danger">*</span></label>
                                        <input type="text" name="warna" id="warna" class="form-control required-input" placeholder="Warna..." value="{{ old('warna') }}" required>
                                    </div>
                                </div>

                                {{-- BARIS 3: Customer & Supplier --}}
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="customerCode" class="form-label font-weight-bold text-dark">Kode Customer <span class="text-danger">*</span></label>
                                        <input type="text" name="customer_code" id="customerCode" class="form-control font-monospace bg-light required-input" placeholder="Kode Customer..." value="{{ old('customer_code', $prefill_customer_code ?? '') }}" readonly required style="cursor: default;">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="customerName" class="form-label font-weight-bold text-dark">Nama Customer <span class="text-danger">*</span></label>
                                        <input type="text" name="customer_name" id="customerName" class="form-control" placeholder="Nama Customer..." value="{{ old('customer_name', $prefill_customer_name ?? '') }}">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="supplierCode" class="form-label font-weight-bold text-dark">Kode Supplier <span class="text-danger">*</span></label>
                                        <input type="text" name="supplier_code" id="supplierCode" class="form-control font-monospace bg-light required-input" placeholder="Kode Supplier..." value="{{ old('supplier_code', $prefill_supplier_code ?? '') }}" readonly required style="cursor: default;">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="supplierName" class="form-label font-weight-bold text-dark">Nama Supplier <span class="text-danger">*</span></label>
                                        <input type="text" name="supplier_name" id="supplierName" class="form-control" placeholder="Nama Supplier..." value="{{ old('supplier_name', $prefill_supplier_name ?? '') }}">
                                    </div>
                                </div>

                                {{-- BARIS 4: Tested By, Send To & Catatan --}}
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="testedBy" class="form-label font-weight-bold text-dark">Tested By <span class="text-danger">*</span></label>
                                        <input type="text" name="tested_by" id="testedBy" class="form-control required-input" placeholder="Nama Penguji..." value="{{ old('tested_by', '') }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="sendTo" class="form-label font-weight-bold text-dark">Send To (Checker) <span class="text-danger">*</span></label>
                                        <select name="send_to" id="sendTo" class="form-select">
                                            <option value="">-- Pilih Approver --</option>
                                            @if (isset($approvers))
                                                @php
                                                    $defaultSelected = old('send_to', $default_send_to ?? '72017.7218');
                                                @endphp
                                                @foreach ($approvers as $appr)
                                                    <option value="{{ $appr->username }}" {{ $defaultSelected == $appr->username ? 'selected' : '' }}>
                                                        {{ $appr->firstname }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="notes" class="form-label font-weight-bold text-dark">Catatan Tambahan (Notes)</label>
                                        <textarea name="notes" id="notes" class="form-control" rows="1" placeholder="Catatan kondisi visual, kemasan, atau informasi pengujian sampel...">{{ old('notes') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- ================= TAB 2: DETAIL TAMBAHAN ================= --}}
                            <div class="tab-pane fade" id="tab-detail-tambahan" role="tabpanel" aria-labelledby="tab-detail-tambahan-btn">
                                <div class="row mb-3">
                                    <div class="col-md-4">
                                        <label for="inspectionLot" class="form-label font-weight-bold text-dark">No Inspection Lot</label>
                                        <input type="text" name="inspection_lot" id="inspectionLot" class="form-control" placeholder="No Inspection Lot..." value="{{ old('inspection_lot') }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="jamJumboTurun" class="form-label font-weight-bold text-dark">Jumbo Turun</label>
                                        <input type="time" name="jam_jumbo_turun" id="jamJumboTurun" class="form-control" value="{{ old('jam_jumbo_turun') }}" step="1">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="jamAmbilSample" class="form-label font-weight-bold text-dark">Ambil Sample</label>
                                        <input type="time" name="jam_ambil_sample" id="jamAmbilSample" class="form-control" value="{{ old('jam_ambil_sample') }}" step="1">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CARD DETAIL: GRID TITIK UJI RUN MATRIX --}}
                <div class="card shadow-lg mb-4">
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div>
                            <h5 class="mb-2">Detail Test</h5>
                            <button type="button" class="btn btn-sm mb-0 px-3 btn-outline-teal" data-bs-toggle="modal" data-bs-target="#micModal" style="border: 1.5px solid #00969b; color: #00969b; background-color: #ffffff; border-radius: 8px; font-weight: 700; font-size: 0.8rem;">
                                + MIC
                            </button>
                        </div>

                        <div class="d-flex flex-column align-items-end gap-2">
                            <div class="d-flex align-items-center gap-2">
                                <button type="button" class="btn btn-outline-danger btn-sm mb-0" id="btnRemoveRun" onclick="removeRunColumn()" title="Hapus 1 Kolom Titik Uji Terakhir" style="display: none;">
                                    <i class="fas fa-minus me-1"></i> Hapus Run Test
                                </button>
                                <button type="button" class="btn btn-primary btn-sm mb-0" onclick="addRunColumn()" title="Tambah 1 Kolom Titik Uji">
                                    <i class="fas fa-plus me-1"></i> Tambah Run Test
                                </button>
                            </div>
                            <div id="badgeSpecSourceContainer">
                                <span id="badgeSpecSource" class="badge {{ ($spec_label ?? '') === 'spesial spec' ? 'bg-success text-white' : (($spec_label ?? '') === 'standart spec' ? 'bg-info text-white' : '') }}" style="{{ !empty($spec_label) ? '' : 'display: none;' }} font-size: 0.8rem; padding: 5px 12px; border-radius: 6px;">
                                    @if (!empty($spec_label))
                                        <i class="fas fa-exclamation-circle text-xs me-1"></i> {{ $spec_label }}
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0 mb-3">

                    <div class="card-body pt-0 px-3">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover align-items-center mb-0 excel-table" id="tableRunGrid">
                                <thead class="thead-light" style="background-color: #b0e9eb;">
                                    <tr class="text-center text-xs font-weight-bolder">
                                        <th rowspan="2" class="align-middle sticky-col sticky-col-head sc-mic text-start">MIC Name</th>
                                        <th rowspan="2" class="align-middle sticky-col sticky-col-head sc-unit">Unit</th>
                                        <th colspan="2" class="text-center sticky-col sticky-col-head sc-spec">Spesifikasi</th>
                                        
                                        {{-- Run 1..100 Column Headers --}}
                                        @for ($r = 1; $r <= 100; $r++)
                                            <th rowspan="2" class="align-middle col-run col-run-{{ $r }}" style="{{ $r > 5 ? 'display:none;' : '' }}">
                                                RUN {{ $r }}
                                            </th>
                                        @endfor

                                        <th rowspan="2" class="align-middle" style="min-width: 80px; width: 80px;">AVG</th>
                                        <th rowspan="2" class="align-middle text-center" style="min-width: 65px; width: 65px;">Val</th>
                                    </tr>
                                    <tr class="text-center text-xs font-weight-bolder" style="background-color: #c4f0f2;">
                                        <th class="sticky-col sticky-col-head sc-min">Min</th>
                                        <th class="sticky-col sticky-col-head sc-max">Max</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyRunGrid">
                                    {{-- Populated dynamically --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- Bottom Action Card --}}
                <!-- <div class="card shadow-lg mb-4">
                    <div class="card-body p-3 d-flex justify-content-between align-items-center">
                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-arrow-rotate-left me-1"></i>
                            <span class="font-weight-bold"> Batal</span>
                        </a>

                        <button type="button" class="btn btn-primary mb-0" onclick="submitForm('draft')">
                            <i class="fas fa-save me-1"></i>
                            <span class="font-weight-bold"> Simpan Draft</span>
                        </button>
                    </div>
                </div> -->

            </div>
        </div>
    </form>
</div>

{{-- MODAL SELECT MATERIAL --}}
<div class="modal fade" id="modalSelectMaterial" tabindex="-1" aria-labelledby="modalSelectMaterialLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title text-white" id="modalSelectMaterialLabel"><i class="fas fa-box me-2"></i>Pilih Material Outsource</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <input type="text" id="searchMaterialInput" class="form-control form-control-sm mb-3" placeholder="Ketik kode material / customer untuk memfilter...">
                <div class="table-responsive" style="max-height: 380px;">
                    <table class="table table-hover table-sm align-items-center mb-0" id="tableModalMaterial">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 48%;">Kode Material</th>
                                <th style="width: 42%;">Customer</th>
                                <th class="text-center" style="width: 10%;">Pilih</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($master_materials as $mat)
                                <tr class="row-select-material" style="cursor: pointer;"
                                    data-code="{{ $mat->item_code }}"
                                    data-name="{{ $mat->item_name }}"
                                    data-customer-code="{{ $mat->customer_code ?? '' }}"
                                    data-customer-name="{{ $mat->customer_name ?? '' }}"
                                    data-supplier="{{ $mat->supplier_name ?? '' }}">
                                    <td class="font-monospace text-xs font-weight-bold text-primary">{{ $mat->item_code }}</td>
                                    <td class="text-xs font-weight-bold">{{ $mat->customer_name ?: 'General' }}</td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-primary btn-xs mb-0 btn-choose-material">
                                            Pilih
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



{{-- MODAL PILIH MIC (PERSIS SEPERTI TRSCOA) --}}
<div class="modal fade" id="micModal" tabindex="-1" role="dialog" aria-labelledby="micModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title text-white" id="micModalLabel"><i class="fas fa-list-check me-2"></i>Pilih MIC</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body p-3">
                <input type="text" id="searchMicInput" class="form-control form-control-sm mb-3" placeholder="Cari nama MIC atau unit...">
                <div class="table-responsive" style="max-height: 380px;">
                    <table class="table table-bordered table-hover align-items-center mb-0" id="micTable" style="font-size: 0.85rem; width: 100%;">
                        <thead class="text-center" style="background-color: #00b7bd4f;">
                            <tr>
                                <th class="text-center" style="width: 50px;">Aksi</th>
                                <th>MIC Name</th>
                                <th>Unit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (!empty($micList))
                                @foreach ($micList as $mic)
                                <tr onclick="toggleMicCheckbox(event, this)" style="cursor: pointer;">
                                    <td class="text-center align-middle">
                                        <input type="checkbox" class="mic-checkbox"
                                            value="{{ $mic->mic_name }}|{{ $mic->unit }}"
                                            data-mic="{{ $mic->mic_name }}"
                                            data-unit="{{ $mic->unit }}"
                                            data-decimal="{{ $mic->decimal ?? 2 }}">
                                    </td>
                                    <td class="align-middle font-weight-bold">{{ $mic->mic_name }}</td>
                                    <td class="align-middle text-center">{{ $mic->unit }}</td>
                                </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm mb-0" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary btn-sm mb-0" onclick="addSelectedMic()">Tambah MIC</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    window.micDecimalsMap = @json($micDecimalsMap ?? []);
    let activeRunCols = 5;
    let rowIndex = 0;

    // Toggle Visible Run Columns
    function setRunColumns(count) {
        activeRunCols = count;
        $('.col-run').hide();
        $('.col-run').find('input.input-run').prop('disabled', true);
        for (let i = 1; i <= count; i++) {
            $(`.col-run-${i}`).show();
            $(`.col-run-${i}`).find('input.input-run').prop('disabled', false);
        }

        // Tampilkan tombol Hapus Run Test HANYA ketika user menambah run di atas default (5)
        if (activeRunCols > 5) {
            $('#btnRemoveRun').show();
        } else {
            $('#btnRemoveRun').hide();
        }

        // Recalculate averages for updated visible columns
        $('#tbodyRunGrid tr').each(function () {
            const rowId = $(this).attr('id');
            if (rowId) {
                const rowIdx = rowId.replace('row_', '');
                if (rowIdx) {
                    recalcRow(rowIdx);
                }
            }
        });

        if (typeof initExcelTableNavigation === 'function') {
            initExcelTableNavigation();
        }
    }

    // Add One More Run Column
    function addRunColumn() {
        if (activeRunCols < 100) {
            setRunColumns(activeRunCols + 1);
            // Otomatis scroll ke kanan agar run baru langsung terlihat
            setTimeout(() => {
                const container = $('.table-responsive');
                if (container.length > 0) {
                    container.animate({ scrollLeft: container[0].scrollWidth }, 350);
                }
            }, 50);
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Batas Maksimal',
                    text: 'Maksimal titik pengujian adalah 100 Run.',
                    confirmButtonColor: '#028284'
                });
            } else {
                alert('Maksimal titik pengujian adalah 100 Run.');
            }
        }
    }

    // Remove One Run Column (hanya bisa dikurangi jika di atas default 5)
    function removeRunColumn() {
        if (activeRunCols > 5) {
            // Kosongkan nilai kolom yang dihapus
            $(`.col-run-${activeRunCols} input`).val('');
            setRunColumns(activeRunCols - 1);
        }
    }

    // Add Row to Grid
    function addRow(data = {}) {
        rowIndex++;
        const idx = rowIndex;

        const micName   = data.mic_name || data.parameter_name || '';
        const unit      = data.unit || '';
        const standard  = data.standard || '';
        const target    = data.target || '';
        const upper     = (data.upper !== undefined && data.upper !== null) ? data.upper : ((data.max_val !== undefined && data.max_val !== null) ? data.max_val : '');
        const lower     = (data.lower !== undefined && data.lower !== null) ? data.lower : ((data.min_val !== undefined && data.min_val !== null) ? data.min_val : '');

        const micNameLower = (micName || '').toLowerCase().trim();
        let dec = (data.decimal !== undefined && data.decimal !== null && data.decimal !== '')
            ? parseInt(data.decimal)
            : ((window.micDecimalsMap && window.micDecimalsMap[micNameLower] !== undefined)
                ? window.micDecimalsMap[micNameLower]
                : 2);
        if (isNaN(dec)) dec = 2;

        const isCustom = !micName;
        const micDisplay = isCustom
            ? `<input type="text" name="mic_name[${idx}]" class="form-control form-control-sm input-mic-name" placeholder="Nama MIC..." required>`
            : `<span class="text-xs font-weight-bold text-dark mic-name-text">${micName}</span>
               <input type="hidden" name="mic_name[${idx}]" class="input-mic-name" value="${micName}">`;

        const unitDisplay = isCustom
            ? `<input type="text" name="unit[${idx}]" class="form-control form-control-sm text-center" placeholder="Unit">`
            : `<span class="text-xs text-muted font-weight-bold unit-text">${unit || '-'}</span>
               <input type="hidden" name="unit[${idx}]" value="${unit}">`;

        const minDisplay = (lower !== null && lower !== '')
            ? `<span class="text-xs font-weight-bold text-dark min-text">${lower}</span>`
            : `<span class="text-xs text-muted min-text">-</span>`;

        const maxDisplay = (upper !== null && upper !== '')
            ? `<span class="text-xs font-weight-bold text-dark max-text">${upper}</span>`
            : `<span class="text-xs text-muted max-text">-</span>`;

        let runInputsHtml = '';
        for (let r = 1; r <= 100; r++) {
            const isVisible = (r <= activeRunCols);
            const displayStyle = isVisible ? '' : 'display:none;';
            const disabledAttr = isVisible ? '' : 'disabled';
            const val = (data.runs && data.runs[`run_${r}`]) ? data.runs[`run_${r}`] : '';
            runInputsHtml += `
                <td class="col-run col-run-${r} p-1" style="${displayStyle}">
                    <div class="run-input-wrapper">
                        <input type="text" name="runs[${idx}][${r}]" class="form-control form-control-sm text-center input-run" value="${val}" data-row="${idx}" data-run="${r}" ${disabledAttr}>
                        <span class="run-status-icon" style="display: none;"></span>
                    </div>
                </td>
            `;
        }

        const tr = `
            <tr id="row_${idx}" data-row="${idx}">
                <td class="p-2 text-start align-middle sticky-col sc-mic">
                    ${micDisplay}
                </td>
                <td class="p-2 text-center align-middle sticky-col sc-unit">
                    ${unitDisplay}
                </td>
                <td class="p-2 text-center align-middle sticky-col sc-min">
                    ${minDisplay}
                    <input type="hidden" name="lower[${idx}]" class="input-lower" value="${lower}" data-row="${idx}">
                </td>
                <td class="p-2 text-center align-middle sticky-col sc-max">
                    ${maxDisplay}
                    <input type="hidden" name="upper[${idx}]" class="input-upper" value="${upper}" data-row="${idx}">
                    <input type="hidden" name="standard[${idx}]" value="${standard}">
                    <input type="hidden" name="target[${idx}]" class="input-target" value="${target}">
                </td>
                ${runInputsHtml}
                <td class="p-2 text-center align-middle">
                    <span id="avg_display_${idx}" class="text-xs text-muted avg-display">-</span>
                    <input type="hidden" name="average[${idx}]" id="avg_input_${idx}" class="input-avg" value="">
                    <input type="hidden" name="decimal[${idx}]" class="input-decimal" value="${dec}">
                </td>
                <td class="p-2 text-center align-middle">
                    <span id="val_display_${idx}" class="text-xs text-muted val-display">-</span>
                </td>
            </tr>
        `;

        $('#tbodyRunGrid').append(tr);
        recalcRow(idx);
        if (typeof initExcelTableNavigation === 'function') {
            initExcelTableNavigation();
        }
    }

    function addNewRow() {
        addRow({
            mic_name: '',
            unit: '',
            target: '',
            lower: '',
            upper: ''
        });
    }

    // Toggle Mic Checkbox saat baris di-klik (seperti Trscoa)
    function toggleMicCheckbox(event, row) {
        if (event.target.tagName.toLowerCase() === 'input') return;
        const checkbox = row.querySelector('.mic-checkbox');
        if (checkbox) checkbox.checked = !checkbox.checked;
    }

    // Tambah MIC yang dipilih dari Modal (seperti Trscoa)
    function addSelectedMic() {
        const selectedMic = [];
        $('#micTable .mic-checkbox:checked').each(function () {
            const micName = $(this).data('mic');
            const unit = $(this).data('unit');
            const decimal = $(this).data('decimal') !== undefined ? parseInt($(this).data('decimal')) : 2;
            selectedMic.push({ micName, unit, decimal });
        });

        if (!selectedMic.length) {
            if (typeof Swal !== 'undefined') {
                return Swal.fire({
                    title: 'Pilih MIC!',
                    text: 'Silakan pilih setidaknya satu MIC sebelum menambah.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            } else {
                return alert('Silakan pilih setidaknya satu MIC sebelum menambah.');
            }
        }

        const confirmAction = () => {
            selectedMic.forEach(item => {
                addRow({
                    mic_name: item.micName,
                    unit: item.unit || '',
                    decimal: item.decimal,
                    target: '',
                    lower: '',
                    upper: '',
                    min_val: '',
                    max_val: '',
                    standard: ''
                });
            });

            // Reset checkboxes dan tutup modal
            $('#micTable .mic-checkbox').prop('checked', false);
            closeModalSafely('micModal');
        };

        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Konfirmasi!',
                text: `Anda yakin ingin menambahkan ${selectedMic.length} MIC ke form?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#00878a',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Tambah!',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then(result => {
                if (result.isConfirmed) {
                    confirmAction();
                }
            });
        } else {
            if (confirm(`Anda yakin ingin menambahkan ${selectedMic.length} MIC ke form?`)) {
                confirmAction();
            }
        }
    }

    // Modal Confirmation before removing row
    function confirmDeleteRow(idx) {
        const micName = $(`#row_${idx} .input-mic-name`).val() || 'parameter ini';
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Hapus Parameter?',
                text: `Apakah Anda yakin ingin menghapus baris "${micName}" dari titik uji?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ea0606',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="fas fa-trash me-1"></i> Ya, Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    removeRow(idx);
                }
            });
        } else {
            if (confirm(`Apakah Anda yakin ingin menghapus "${micName}"?`)) {
                removeRow(idx);
            }
        }
    }

    function removeRow(idx) {
        $(`#row_${idx}`).remove();
        updateRowNumbers();
    }

    function updateRowNumbers() {
        $('#tbodyRunGrid tr').each(function (i) {
            $(this).find('.row-no').text(i + 1);
        });
    }

    // Realtime Calculation of Average and Tolerance Evaluation
    function recalcRow(rowIdx) {
        let sum = 0;
        let count = 0;
        let textVal = '';
        let maxRunFound = 0;

        $(`#row_${rowIdx} .input-run`).each(function () {
            let raw = $(this).val();
            let runNum = parseInt($(this).data('run')) || 0;
            if (raw !== undefined && raw !== null && raw.trim() !== '') {
                let trimmed = raw.trim();
                let numVal = trimmed.replace(',', '.');
                if (!isNaN(numVal) && numVal !== '') {
                    sum += parseFloat(numVal);
                    count++;
                } else if (!textVal) {
                    textVal = trimmed;
                }
                if (runNum > maxRunFound) {
                    maxRunFound = runNum;
                }
            }
        });

        // Otomatis expand kolom jika ada nilai run yang melebihi activeRunCols (misal hasil paste dari Excel)
        if (!window.isExpandingRunCols && maxRunFound > activeRunCols) {
            window.isExpandingRunCols = true;
            setRunColumns(Math.min(100, maxRunFound));
            window.isExpandingRunCols = false;
            setTimeout(() => {
                const container = $('.table-responsive');
                if (container.length > 0) {
                    container.animate({ scrollLeft: container[0].scrollWidth }, 350);
                }
            }, 80);
        }

        let dec = parseInt($(`#row_${rowIdx} .input-decimal`).val());
        if (isNaN(dec)) {
            const micName = ($(`#row_${rowIdx} .input-mic-name`).val() || $(`#row_${rowIdx} .mic-name-text`).text() || '').trim().toLowerCase();
            dec = (window.micDecimalsMap && window.micDecimalsMap[micName] !== undefined) ? window.micDecimalsMap[micName] : 2;
            if (isNaN(dec)) dec = 2;
        }

        let avg = 0;
        if (count > 0) {
            avg = sum / count;
            const avgFormatted = avg.toFixed(dec);
            $(`#avg_display_${rowIdx}`).text(avgFormatted).removeClass('text-muted').addClass('text-dark font-weight-bold');
            $(`#avg_input_${rowIdx}`).val(avgFormatted);
        } else if (textVal) {
            $(`#avg_display_${rowIdx}`).text(textVal).removeClass('text-muted').addClass('text-dark font-weight-bold');
            $(`#avg_input_${rowIdx}`).val(textVal);
        } else {
            $(`#avg_display_${rowIdx}`).text('-').removeClass('text-dark font-weight-bold').addClass('text-muted');
            $(`#avg_input_${rowIdx}`).val('');
        }

        // Check against upper and lower limits
        let lower = $(`#row_${rowIdx} .input-lower`).val();
        let upper = $(`#row_${rowIdx} .input-upper`).val();
        let hasMin = (lower !== undefined && lower !== null && lower.trim() !== '' && !isNaN(parseFloat(lower.replace(',', '.'))));
        let hasMax = (upper !== undefined && upper !== null && upper.trim() !== '' && !isNaN(parseFloat(upper.replace(',', '.'))));
        let minVal = hasMin ? parseFloat(lower.replace(',', '.')) : null;
        let maxVal = hasMax ? parseFloat(upper.replace(',', '.')) : null;

        // Evaluasi warna & ikon tiap sel RUN secara real-time
        $(`#row_${rowIdx} .input-run`).each(function () {
            let $input = $(this);
            let raw = $input.val();
            let $wrapper = $input.closest('.run-input-wrapper');
            let $icon = $wrapper.find('.run-status-icon');

            if (raw === undefined || raw === null || raw.trim() === '') {
                $input.removeClass('run-valid run-invalid');
                $icon.hide().empty();
                return;
            }

            let num = parseFloat(raw.replace(',', '.'));
            if (isNaN(num)) {
                $input.removeClass('run-valid run-invalid');
                $icon.hide().empty();
                return;
            }

            let cellOutOfSpec = false;
            let hasSpec = false;

            if (hasMin && !isNaN(minVal)) {
                hasSpec = true;
                if (num < minVal) cellOutOfSpec = true;
            }
            if (hasMax && !isNaN(maxVal)) {
                hasSpec = true;
                if (num > maxVal) cellOutOfSpec = true;
            }

            if (!hasSpec) {
                $input.removeClass('run-valid run-invalid');
                $icon.hide().empty();
            } else if (cellOutOfSpec) {
                // Nilai di luar batas (<= Min atau >= Max): Background merah + tanda X
                $input.removeClass('run-valid').addClass('run-invalid');
                $icon.html('<i class="fas fa-times text-danger font-weight-bolder"></i>').show();
            } else {
                // Nilai di antara Min dan Max: Background hijau + centang hijau
                $input.removeClass('run-invalid').addClass('run-valid');
                $icon.html('<i class="fas fa-check text-success font-weight-bolder"></i>').show();
            }
        });

        let isOutOfSpec = false;
        let hasSpecForAvg = false;
        if (count > 0) {
            if (lower && lower.trim() !== '') {
                let minVal = parseFloat(lower.replace(',', '.'));
                if (!isNaN(minVal)) {
                    hasSpecForAvg = true;
                    if (avg < minVal) {
                        isOutOfSpec = true;
                    }
                }
            }
            if (upper && upper.trim() !== '') {
                let maxVal = parseFloat(upper.replace(',', '.'));
                if (!isNaN(maxVal)) {
                    hasSpecForAvg = true;
                    if (avg > maxVal) {
                        isOutOfSpec = true;
                    }
                }
            }
        }

        const $valBadge = $(`#val_display_${rowIdx}`);
        if ($valBadge.length) {
            if (count === 0 || !hasSpecForAvg) {
                $valBadge
                    .html('-')
                    .removeClass('text-success text-danger font-weight-bold')
                    .addClass('text-muted');
            } else if (isOutOfSpec) {
                // Out of Spec: Ikon silang merah
                $valBadge
                    .html('<i class="fas fa-times text-danger font-weight-bolder"></i>')
                    .removeClass('text-muted text-success')
                    .addClass('text-danger font-weight-bold');
            } else {
                // In Spec: Ikon centang hijau
                $valBadge
                    .html('<i class="fas fa-check text-success font-weight-bolder"></i>')
                    .removeClass('text-muted text-danger')
                    .addClass('text-success font-weight-bold');
            }
        }

        if (!hasSpecForAvg || count === 0) {
            $(`#stat_display_${rowIdx}`)
                .text('-')
                .removeClass('bg-danger bg-success')
                .addClass('bg-secondary');
        } else if (isOutOfSpec) {
            $(`#stat_display_${rowIdx}`)
                .text('Out of Spec')
                .removeClass('bg-success bg-secondary')
                .addClass('bg-danger');
        } else {
            $(`#stat_display_${rowIdx}`)
                .text('OK')
                .removeClass('bg-danger bg-secondary')
                .addClass('bg-success');
        }
    }

    // Otomatis expand kolom jika paste dari Excel memiliki kolom lebih banyak dari activeRunCols
    $(document).on('paste', '.input-run', function (e) {
        const clipboardData = (e.originalEvent || e).clipboardData || window.clipboardData;
        if (!clipboardData) return;
        const text = clipboardData.getData('text');
        if (!text) return;

        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
        let maxCols = 0;
        lines.forEach(line => {
            if (line.trim() !== '') {
                const cols = line.split('\t').length;
                if (cols > maxCols) maxCols = cols;
            }
        });

        if (maxCols > 0) {
            const startRun = parseInt($(this).data('run')) || 1;
            const neededRun = startRun + maxCols - 1;
            if (neededRun > activeRunCols) {
                setRunColumns(Math.min(100, neededRun));
                setTimeout(() => {
                    const container = $('.table-responsive');
                    if (container.length > 0) {
                        container.animate({ scrollLeft: container[0].scrollWidth }, 350);
                    }
                }, 80);
            }
        }
    });

    // Navigasi Keyboard (Tombol Panah > < ^ v dan Enter) antar kolom RUN seperti Excel
    $(document).on('keydown', '.input-run', function (e) {
        const runIdx = parseInt($(this).data('run'));
        const $currentRow = $(this).closest('tr');

        if (e.key === 'ArrowRight') {
            // Pindah ke kolom run sebelah kanan (RUN 1 -> RUN 2 -> RUN 3 ...)
            if (runIdx < activeRunCols) {
                e.preventDefault();
                const $nextInput = $currentRow.find(`.col-run-${runIdx + 1} .input-run`);
                if ($nextInput.length) {
                    $nextInput.focus().select();
                }
            } else {
                // Jika sudah di run paling kanan, pindah ke run 1 baris berikutnya
                const $nextRow = $currentRow.next('tr');
                if ($nextRow.length) {
                    e.preventDefault();
                    $nextRow.find('.col-run-1 .input-run').focus().select();
                }
            }
        } else if (e.key === 'ArrowLeft') {
            // Pindah ke kolom run sebelah kiri (RUN 2 -> RUN 1 ...)
            if (runIdx > 1) {
                e.preventDefault();
                const $prevInput = $currentRow.find(`.col-run-${runIdx - 1} .input-run`);
                if ($prevInput.length) {
                    $prevInput.focus().select();
                }
            } else {
                // Jika di run 1, pindah ke run terakhir baris sebelumnya
                const $prevRow = $currentRow.prev('tr');
                if ($prevRow.length) {
                    e.preventDefault();
                    $prevRow.find(`.col-run-${activeRunCols} .input-run`).focus().select();
                }
            }
        } else if (e.key === 'ArrowDown' || e.key === 'Enter') {
            // Pindah ke baris bawah pada kolom run yang sama
            e.preventDefault();
            const $nextRow = $currentRow.next('tr');
            if ($nextRow.length) {
                $nextRow.find(`.col-run-${runIdx} .input-run`).focus().select();
            }
        } else if (e.key === 'ArrowUp') {
            // Pindah ke baris atas pada kolom run yang sama
            e.preventDefault();
            const $prevRow = $currentRow.prev('tr');
            if ($prevRow.length) {
                $prevRow.find(`.col-run-${runIdx} .input-run`).focus().select();
            }
        }
    });

    // Otomatis select text saat input-run di-klik atau di-focus
    $(document).on('focus', '.input-run', function () {
        $(this).select();
    });

    // Global listener for recalculating runs and limits
    $(document).on('input change', '.input-run, .input-lower, .input-upper, .input-target', function () {
        const rowIdx = $(this).data('row');
        if (rowIdx) {
            recalcRow(rowIdx);
        }
    });

    // Otomatis sinkronkan decimal jika pengguna mengetik nama MIC manual
    $(document).on('input change', '.input-mic-name', function () {
        const $row = $(this).closest('tr');
        const rowIdx = $row.data('row');
        const name = $(this).val().toLowerCase().trim();
        if (window.micDecimalsMap && window.micDecimalsMap[name] !== undefined) {
            $row.find('.input-decimal').val(window.micDecimalsMap[name]);
            if (rowIdx) recalcRow(rowIdx);
        }
    });

    // Helper to hide bootstrap modal cleanly
    function closeModalSafely(modalId) {
        const modalEl = document.getElementById(modalId);
        if (modalEl && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            try {
                const modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                modalInstance.hide();
            } catch (e) {
                $('#' + modalId).modal('hide');
            }
        } else {
            $('#' + modalId).modal('hide');
        }
        setTimeout(function () {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open').css('padding-right', '');
        }, 200);
    }

    // Master Jenis Material map for auto-detection
    const masterJenisMaterialMap = @json(($master_jenis_material ?? collect())->pluck('jenis_material', 'kode'));

    // Master Warna map for auto-detection
    const masterWarnaMap = @json(($master_warna ?? collect())->pluck('warna', 'kode'));

    // Detect Jenis Material from material code (e.g., 8P00S30-HZ0Y20-01500 -> S30 -> Big Sock)
    function detectJenisMaterial(matCode) {
        if (!matCode) return '';
        matCode = matCode.trim().toUpperCase();

        let subKode = '';
        if (matCode.startsWith('8') && matCode.length >= 7) {
            subKode = matCode.substring(4, 7); // Karakter 5, 6, 7 (misal S30)
        } else if (matCode.length >= 6) {
            subKode = matCode.substring(3, 6);
        }

        if (subKode && masterJenisMaterialMap[subKode]) {
            return masterJenisMaterialMap[subKode];
        }

        // Fallback: pencocokan kode master yang terkandung di dalam material code
        for (const [k, name] of Object.entries(masterJenisMaterialMap)) {
            if (matCode.includes(k)) {
                return name;
            }
        }

        return '';
    }

    // Detect Warna from material code (bagian 2, misal 8P00S10-000W10-00650 -> 000W10 -> W10 -> WHITE W10)
    function detectWarna(matCode) {
        if (!matCode) return '';
        const str = String(matCode).trim().toUpperCase();
        const parts = str.split('-');
        if (parts.length >= 2) {
            const part2 = parts[1].trim();
            // 3 karakter terakhir dari bagian 2 (misal 000W10 -> W10, HZ0Y20 -> Y20)
            const last3 = part2.slice(-3);
            if (masterWarnaMap[last3]) return masterWarnaMap[last3];

            if (part2.length >= 6) {
                const sub2 = part2.substring(3, 6);
                if (masterWarnaMap[sub2]) return masterWarnaMap[sub2];
            }

            if (masterWarnaMap[part2]) return masterWarnaMap[part2];

            for (const [k, v] of Object.entries(masterWarnaMap)) {
                if (k && part2.includes(k)) return v;
            }
        } else {
            if (str.length >= 14) {
                const sub = str.substring(11, 14);
                if (masterWarnaMap[sub]) return masterWarnaMap[sub];
            }
            if (str.length >= 13) {
                const sub = str.substring(10, 13);
                if (masterWarnaMap[sub]) return masterWarnaMap[sub];
            }
        }
        return '';
    }

    // Select Material from Modal & Auto-Fetch Specs
    function selectMaterial(code, name, custCode, custName, supplier) {
        $('#materialCode').val(code);
        if (name) {
            $('#materialName').val(name);
            $('#materialDesc').val(name);
        }
        if (custCode) {
            $('#customerCode').val(custCode);
        }
        if (custName && custName !== 'General') {
            $('#customerName').val(custName);
        }
        if (supplier && !$('#supplierName').val()) {
            $('#supplierName').val(supplier);
        }

        // Auto-detect Jenis Material dari kode material (karakter ke-5)
        const autoJenis = detectJenisMaterial(code);
        if (autoJenis) {
            $('#materialType').val(autoJenis);
        }

        // Auto-detect Warna dari kode material (bagian 2)
        const autoWarna = detectWarna(code);
        if (autoWarna) {
            $('#warna').val(autoWarna);
        }

        closeModalSafely('modalSelectMaterial');

        // Fetch specs via AJAX
        loadMaterialSpecs(code, custCode, $('#customerName').val());
    }

    // Select Customer from Modal
    function selectCustomer(code, name) {
        $('#customerCode').val(code);
        $('#customerName').val(name);
        closeModalSafely('modalSelectCustomer');

        const matCode = $('#materialCode').val();
        if (matCode) {
            loadMaterialSpecs(matCode, code, name);
        }
    }

    // Select Supplier from Modal (Master Customer)
    function selectSupplier(code, name) {
        $('#supplierCode').val(code);
        $('#supplierName').val(name);
        closeModalSafely('modalSelectSupplier');
    }

    // Event delegation for Material row selection
    $(document).on('click', '.row-select-material, .btn-choose-material', function (e) {
        e.preventDefault();
        const row = $(this).closest('tr');
        const code = row.attr('data-code') || '';
        const name = row.attr('data-name') || '';
        const custCode = row.attr('data-customer-code') || '';
        const custName = row.attr('data-customer-name') || '';
        const supplier = row.attr('data-supplier') || '';
        selectMaterial(code, name, custCode, custName, supplier);
    });

    // Event delegation for Customer row selection
    $(document).on('click', '.row-select-customer, .btn-choose-customer', function (e) {
        e.preventDefault();
        const row = $(this).closest('tr');
        const code = row.attr('data-code') || '';
        const name = row.attr('data-name') || '';
        selectCustomer(code, name);
    });

    // Event delegation for Supplier row selection
    $(document).on('click', '.row-select-supplier, .btn-choose-supplier', function (e) {
        e.preventDefault();
        const row = $(this).closest('tr');
        const code = row.attr('data-code') || '';
        const name = row.attr('data-name') || '';
        selectSupplier(code, name);
    });

    // Explicit modal button openers & field click openers
    $(document).on('click', '#btnOpenModalMaterial, .btn-modal-material', function (e) {
        e.preventDefault();
        const modalEl = document.getElementById('modalSelectMaterial');
        if (modalEl && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
            modalInstance.show();
        } else {
            $('#modalSelectMaterial').modal('show');
        }
    });



    // AJAX Load Specs from mst_outsource_spec
    function loadMaterialSpecs(materialCode, customerCode, customerName) {
        if (!materialCode) return;

        // Catat data runs dan baris yang sudah diisi pengguna agar TIDAK TERHAPUS / TER-RESET
        const existingRowsData = [];
        let hasExistingRuns = false;

        $('#tbodyRunGrid tr').each(function () {
            const $tr = $(this);
            const micName = ($tr.find('.input-mic-name').val() || $tr.find('.mic-name-text').text() || '').trim();
            const unit = ($tr.find('input[name^="unit"]').val() || $tr.find('.unit-text').text() || '').trim();
            const lower = ($tr.find('.input-lower').val() || '').trim();
            const upper = ($tr.find('.input-upper').val() || '').trim();
            const standard = ($tr.find('input[name^="standard"]').val() || '').trim();
            const target = ($tr.find('.input-target').val() || '').trim();
            const dec = ($tr.find('.input-decimal').val() || '').trim();
            const runs = {};

            $tr.find('.input-run').each(function () {
                const r = $(this).data('run');
                const v = $(this).val();
                if (v !== undefined && v !== null && v.trim() !== '') {
                    runs[`run_${r}`] = v.trim();
                    hasExistingRuns = true;
                }
            });

            existingRowsData.push({
                mic_name: micName,
                unit: unit,
                lower: lower,
                upper: upper,
                standard: standard,
                target: target,
                decimal: dec,
                runs: runs
            });
        });

        $.ajax({
            url: "{{ route('troutp.getMaterialSpec') }}",
            type: "GET",
            data: {
                material_code: materialCode,
                customer_code: customerCode || '',
                customer_name: customerName || ''
            },
            success: function (res) {
                if (res.material_type && !$('#materialType').val()) {
                    $('#materialType').val(res.material_type);
                }

                // Update badge informasi spesifikasi yang digunakan
                const $badge = $('#badgeSpecSource');
                const specSource = res.source;
                const specLabel = res.spec_label || '';
                if (specSource === 'mst_outsource_spec' || specLabel === 'spesial spec') {
                    $badge.removeClass('bg-primary bg-secondary bg-warning bg-info')
                          .addClass('bg-success text-white')
                          .html('<i class="fas fa-exclamation-circle text-xs me-1"></i> spesial spec')
                          .show();
                } else if (specSource === 'mst_standart_spec' || specLabel === 'standart spec') {
                    $badge.removeClass('bg-primary bg-secondary bg-warning bg-success')
                          .addClass('bg-info text-white')
                          .html('<i class="fas fa-exclamation-circle text-xs me-1"></i> standart spec')
                          .show();
                } else {
                    $badge.hide();
                }

                const specs = (res.status === 'success' && res.specs && res.specs.length > 0)
                    ? res.specs
                    : (defaultMics || []);

                // Jika pengguna SUDAH mengisi data di baris / kolom run:
                if (hasExistingRuns && existingRowsData.length > 0) {
                    const matchedSpecIndexes = new Set();

                    existingRowsData.forEach((row, rowIdx) => {
                        const rowMicLower = (row.mic_name || '').toLowerCase().trim();
                        let matchedSpec = null;
                        for (let sIdx = 0; sIdx < specs.length; sIdx++) {
                            const specMicLower = (specs[sIdx].mic_name || specs[sIdx].parameter_name || '').toLowerCase().trim();
                            if (specMicLower === rowMicLower && !matchedSpecIndexes.has(sIdx)) {
                                matchedSpec = specs[sIdx];
                                matchedSpecIndexes.add(sIdx);
                                break;
                            }
                        }

                        // Jika nama MIC tidak sama persis, cocokkan berdasarkan urutan baris
                        if (!matchedSpec && specs[rowIdx] && !matchedSpecIndexes.has(rowIdx)) {
                            matchedSpec = specs[rowIdx];
                            matchedSpecIndexes.add(rowIdx);
                        }

                        if (matchedSpec) {
                            row.unit     = matchedSpec.unit ?? row.unit;
                            row.standard = matchedSpec.standard ?? row.standard;
                            row.target   = matchedSpec.target ?? row.target;
                            row.upper    = (matchedSpec.upper !== undefined && matchedSpec.upper !== null && matchedSpec.upper !== '') ? matchedSpec.upper : ((matchedSpec.max_val !== undefined && matchedSpec.max_val !== null) ? matchedSpec.max_val : row.upper);
                            row.lower    = (matchedSpec.lower !== undefined && matchedSpec.lower !== null && matchedSpec.lower !== '') ? matchedSpec.lower : ((matchedSpec.min_val !== undefined && matchedSpec.min_val !== null) ? matchedSpec.min_val : row.lower);
                        }
                    });

                    // Jika ada spec dari master baru yang belum ada di baris tabel, tambahkan di bawahnya
                    specs.forEach((s, sIdx) => {
                        if (!matchedSpecIndexes.has(sIdx)) {
                            existingRowsData.push({
                                mic_name: s.mic_name || s.parameter_name || '',
                                unit: s.unit || '',
                                standard: s.standard || '',
                                target: s.target || '',
                                upper: s.upper || s.max_val || '',
                                lower: s.lower || s.min_val || '',
                                runs: {}
                            });
                        }
                    });

                    // Render ulang dengan tetap mempertahankan nilai runs
                    $('#tbodyRunGrid').empty();
                    existingRowsData.forEach(rData => {
                        addRow(rData);
                    });
                } else {
                    // Jika belum ada data run yang diisi sama sekali
                    $('#tbodyRunGrid').empty();
                    if (specs.length > 0) {
                        specs.forEach(s => {
                            addRow(s);
                        });
                    } else {
                        populateDefaultMics();
                    }
                }

                if (typeof initExcelTableNavigation === 'function') {
                    initExcelTableNavigation();
                }
            },
            error: function () {
                if (!hasExistingRuns) {
                    $('#tbodyRunGrid').empty();
                    populateDefaultMics();
                }
            }
        });
    }

    const defaultMics = @json($default_mics ?? []);

    function populateDefaultMics() {
        $('#tbodyRunGrid').empty();
        if (defaultMics && defaultMics.length > 0) {
            defaultMics.forEach(m => {
                addRow({
                    mic_name: m.mic_name,
                    unit: m.unit || '',
                    decimal: m.decimal,
                    target: '',
                    lower: '',
                    upper: '',
                    standard: ''
                });
            });
        } else {
            addNewRow();
        }
    }

    function switchToTab(btnId, paneId) {
        $('#tabHeaderOutsource button').removeClass('active').addClass('text-secondary').attr('aria-selected', 'false');
        $(`#${btnId}`).addClass('active').removeClass('text-secondary').attr('aria-selected', 'true');
        $('#tabHeaderOutsourceContent .tab-pane').removeClass('show active');
        $(`#${paneId}`).addClass('show active');
    }

    // Tab switching handler
    $(document).on('click', '#tabHeaderOutsource button', function (e) {
        e.preventDefault();
        const targetId = $(this).attr('data-bs-target') || $(this).attr('data-target');
        $('#tabHeaderOutsource button').removeClass('active').addClass('text-secondary').attr('aria-selected', 'false');
        $(this).addClass('active').removeClass('text-secondary').attr('aria-selected', 'true');
        $('#tabHeaderOutsourceContent .tab-pane').removeClass('show active');
        $(targetId).addClass('show active');
    });

    // Validasi Dinamis: Setiap field yang labelnya memiliki <span class="text-danger">*</span> wajib diisi
    function validateRequiredFields() {
        let isValid = true;
        let firstErrorElement = null;
        let firstErrorMessage = '';
        let targetTabBtn = null;
        let targetTabPane = null;

        $('#formQcOutsource label').each(function () {
            if (!isValid) return;

            const $label = $(this);
            const $danger = $label.find('.text-danger');
            if ($danger.length === 0 || $danger.text().indexOf('*') === -1) {
                return;
            }

            const targetId = $label.attr('for');
            if (!targetId) return;

            const $input = $(`#${targetId}`);
            if (!$input.length) return;

            const labelText = $label.clone().find('.text-danger').remove().end().text().trim();
            const val = $input.val();

            if (val === null || val === undefined || (typeof val === 'string' && val.trim() === '')) {
                isValid = false;
                firstErrorElement = $input;
                const kataPilih = ($input.is('select') || targetId.toLowerCase().indexOf('code') !== -1) ? 'pilih' : 'isi';
                firstErrorMessage = `Silakan ${kataPilih} ${labelText} terlebih dahulu!`;

                const $pane = $input.closest('.tab-pane');
                if ($pane.length) {
                    targetTabPane = $pane.attr('id');
                    const ariaLabel = $pane.attr('aria-labelledby');
                    if (ariaLabel) {
                        targetTabBtn = ariaLabel;
                    }
                }
            }
        });

        if (!isValid) {
            if (targetTabBtn && targetTabPane) {
                switchToTab(targetTabBtn, targetTabPane);
            }
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Wajib Diisi',
                    text: firstErrorMessage,
                    confirmButtonColor: '#028284'
                }).then(() => {
                    if (firstErrorElement) {
                        firstErrorElement.focus();
                    }
                });
            } else {
                alert(firstErrorMessage);
                if (firstErrorElement) {
                    firstErrorElement.focus();
                }
            }
            return false;
        }

        return true;
    }

    // Submit handler (Simpan Draft)
    function submitForm(action = 'draft') {
        if (!validateRequiredFields()) {
            return;
        }

        if ($('#tbodyRunGrid tr').length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Data Belum Lengkap',
                text: 'Tabel titik uji minimal memiliki 1 baris parameter!',
                confirmButtonColor: '#028284'
            });
            return;
        }

        $('#statusAction').val(action);
        Swal.fire({
            title: 'Simpan Draft?',
            text: 'Simpan data pengetesan baru ini sebagai draft?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#5e72e4',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-save me-1"></i> Ya, Simpan!',
            cancelButtonText: 'Batal',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Nonaktifkan input run yang kosong agar tidak membebani POST melebihi max_input_vars PHP (1000)
                $('#formQcOutsource .input-run').each(function () {
                    if (!this.value || this.value.trim() === '') {
                        $(this).prop('disabled', true);
                    }
                });
                $('#formQcOutsource').submit();
            }
        });
    }

    // Double-guard pada submit event agar field kosong tidak terkirim dan tidak melebihi batas max_input_vars
    $('#formQcOutsource').on('submit', function () {
        $(this).find('.input-run').each(function () {
            if (!this.value || this.value.trim() === '') {
                $(this).prop('disabled', true);
            }
        });
        setTimeout(() => {
            for (let i = 1; i <= activeRunCols; i++) {
                $(`.col-run-${i}`).find('.input-run').prop('disabled', false);
            }
        }, 1500);
    });

    // Document Ready Initializations
    $(document).ready(function () {
        setRunColumns(5);

        // Initial Load: If materialCode is already filled (e.g. from previous input / prefill), fetch its specs. Otherwise load default MICs.
        const initMat = $('#materialCode').val();
        if (initMat) {
            if (!$('#materialType').val()) {
                const autoJenis = detectJenisMaterial(initMat);
                if (autoJenis) $('#materialType').val(autoJenis);
            }
            if (!$('#warna').val()) {
                const autoWarna = detectWarna(initMat);
                if (autoWarna) $('#warna').val(autoWarna);
            }
            loadMaterialSpecs(initMat, $('#customerCode').val(), $('#customerName').val());
        } else {
            populateDefaultMics();
        }

        // Filter for modals (bisa mencari 3 segmen pertama bila user paste kode panjang)
        $('#searchMaterialInput').on('keyup input paste', function () {
            const raw = $(this).val().toLowerCase().trim();
            const parts = raw.split('-');
            const base3 = (parts.length >= 3) ? parts.slice(0, 3).join('-') : raw;

            $('#tableModalMaterial tbody tr').filter(function () {
                const text = $(this).text().toLowerCase();
                $(this).toggle(text.indexOf(raw) > -1 || (base3 && text.indexOf(base3) > -1));
            });
        });



        $('#searchMicInput').on('keyup', function () {
            const val = $(this).val().toLowerCase();
            $('#micTable tbody tr').filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(val) > -1);
            });
        });

        // =========================================================================
        // LIVE AJAX SEARCH MATERIAL (TANPA MODAL - BISA KETIK / PASTE KODE PANJANG)
        // =========================================================================
        let materialSearchTimer = null;

        function escapeHtml(text) {
            return $('<div>').text(text).html();
        }

        function doMaterialSearch(query, isPaste = false) {
            query = (query || '').trim();
            if (query.length < 2) {
                $('#materialSearchResults').hide().empty();
                return;
            }

            const $results = $('#materialSearchResults');
            const $icon = $('#btnOpenModalMaterial i');
            $icon.removeClass('fa-search').addClass('fa-spinner fa-spin text-primary');

            $results.html(`
                <div class="p-3 text-center text-muted">
                    <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                    <span class="text-xs">Mencari material "<b>${escapeHtml(query)}</b>"...</span>
                </div>
            `).show();

            $.ajax({
                url: '{{ route("troutp.searchMaterial") }}',
                type: 'GET',
                data: { q: query },
                dataType: 'json',
                success: function (res) {
                    $icon.removeClass('fa-spinner fa-spin text-primary').addClass('fa-search');
                    if (res.status === 'success' && res.data && res.data.length > 0) {
                        const currentVal = $('#materialCode').val().trim();
                        const isPastedLong = currentVal.length > 15 && currentVal.split('-').length >= 4;

                        // Jika trigger berasal dari PASTE atau kode panjang:
                        // Otomatis langsung terapkan ke yang di-paste pengguna ("otomatis milih ke yang di pasternya")!
                        if (isPaste || isPastedLong) {
                            const firstMat = res.data[0];
                            let finalCode = firstMat.item_code;
                            if (currentVal && currentVal.length > firstMat.item_code.length && currentVal.indexOf(firstMat.item_code) === 0) {
                                finalCode = currentVal;
                            }
                            selectMaterial(finalCode, firstMat.item_name, firstMat.customer_code, firstMat.customer_name, firstMat.supplier_name);

                            // Jika hasil hanya 1, langsung sembunyikan dropdown agar bersih tanpa perlu aksi tambahan
                            if (res.data.length === 1) {
                                $results.hide().empty();
                                return;
                            }
                        }

                        let html = `
                            <div class="bg-light px-3 py-1 border-bottom d-flex justify-content-between align-items-center">
                                <span class="text-xxs font-weight-bold text-uppercase text-muted">Hasil Pencarian Material (${res.data.length})</span>
                                <span class="text-xxs text-primary font-weight-bold">
                                    ${(isPaste || isPastedLong) ? 'Otomatis terpilih (klik jika ingin ganti)' : 'Pilih item di bawah'}
                                </span>
                            </div>
                        `;

                        res.data.forEach(function (mat, idx) {
                            html += `
                            <div class="material-search-item px-3 py-2 border-bottom ${(idx === 0 && (isPaste || isPastedLong)) ? 'bg-light' : ''}" style="cursor: pointer;"
                                 data-code="${mat.item_code}"
                                 data-name="${mat.item_name || ''}"
                                 data-customer-code="${mat.customer_code || ''}"
                                 data-customer-name="${mat.customer_name || ''}"
                                 data-supplier="${mat.supplier_name || ''}">
                                <div class="font-monospace text-xs font-weight-bold text-primary">${mat.item_code}</div>
                                <div class="text-xs font-weight-bold text-dark mt-1">${mat.item_name || '-'}</div>
                                <div class="text-xxs text-muted mt-1 d-flex align-items-center">
                                    <i class="fas fa-building me-1 text-secondary"></i>
                                    <span class="text-secondary me-1">Customer:</span>
                                    <span class="badge bg-light text-dark border text-xxs font-weight-normal">${mat.customer_name || 'General'}</span>
                                </div>
                            </div>`;
                        });

                        $results.html(html).show();
                    } else {
                        $results.html(`
                            <div class="p-3 text-center text-muted small">
                                <i class="fas fa-info-circle me-1 text-warning"></i>
                                Material tidak ditemukan untuk pencarian "<b>${escapeHtml(query)}</b>"
                            </div>
                        `).show();
                    }
                },
                error: function () {
                    $icon.removeClass('fa-spinner fa-spin text-primary').addClass('fa-search');
                    $results.html(`
                        <div class="p-3 text-center text-danger small">
                            <i class="fas fa-exclamation-circle me-1"></i>Gagal melakukan pencarian material.
                        </div>
                    `).show();
                }
            });
        }

        // Trigger pencarian live saat user ketik di input material
        $('#materialCode').on('input', function () {
            const val = $(this).val().trim();
            clearTimeout(materialSearchTimer);
            if (val.length < 2) {
                $('#materialSearchResults').hide().empty();
                return;
            }
            materialSearchTimer = setTimeout(function () {
                doMaterialSearch(val);
            }, 250);
        });

        // Trigger pencarian live saat user copy paste kode material
        $('#materialCode').on('paste', function (e) {
            const clipboardData = (e.originalEvent || e).clipboardData;
            const pastedText = clipboardData ? clipboardData.getData('text/plain').trim() : '';
            clearTimeout(materialSearchTimer);
            setTimeout(function () {
                const currentVal = $('#materialCode').val().trim() || pastedText;
                doMaterialSearch(currentVal, true);
            }, 80);
        });

        // Klik salah satu item dari dropdown pencarian AJAX
        $(document).on('click', '.material-search-item', function (e) {
            e.preventDefault();
            const currentVal = $('#materialCode').val().trim();
            const code = $(this).attr('data-code');
            const name = $(this).attr('data-name');
            const custCode = $(this).attr('data-customer-code');
            const custName = $(this).attr('data-customer-name');
            const supplier = $(this).attr('data-supplier');

            // Pertahankan kode yang di-paste user jika diawali kode SAP base ("ke yang di pasternya")
            let finalCode = code;
            if (currentVal && currentVal.length > code.length && currentVal.indexOf(code) === 0) {
                finalCode = currentVal;
            }

            selectMaterial(finalCode, name, custCode, custName, supplier);
            $('#materialSearchResults').hide().empty();
        });

        // Tutup dropdown pencarian material jika klik di luar area
        $(document).on('click', function (e) {
            if (!$(e.target).closest('#colMaterialWrapper').length) {
                $('#materialSearchResults').hide();
            }
        });

        // Tutup dropdown pencarian jika tombol Escape ditekan
        $(document).on('keydown', '#materialCode', function (e) {
            if (e.key === 'Escape') {
                $('#materialSearchResults').hide();
            }
        });

        // Auto-detect Jenis Material & Warna serta load specs bila materialCode berubah secara manual
        $('#materialCode').on('change blur', function () {
            const code = $(this).val();
            if (code) {
                const autoJenis = detectJenisMaterial(code);
                if (autoJenis) {
                    $('#materialType').val(autoJenis);
                }
                const autoWarna = detectWarna(code);
                if (autoWarna) {
                    $('#warna').val(autoWarna);
                }
                loadMaterialSpecs(code, $('#customerCode').val(), $('#customerName').val());
            }
        });

        if (typeof initExcelTableNavigation === 'function') {
            initExcelTableNavigation();
        }

        // Auto-fetch Qty dari SAP jika field masih kosong saat load
        if (!$('#qtyBale').val() && $('#materialCode').val() && $('#batch').val() && $('#arrivalDate').val()) {
            $.ajax({
                url: "{{ route('troutp.getGrQty') }}",
                type: 'GET',
                data: {
                    material_code: $('#materialCode').val().trim(),
                    batch: $('#batch').val().trim(),
                    arrival_date: $('#arrivalDate').val().trim()
                },
                dataType: 'json',
                success: function (res) {
                    if (res && res.status === 'S' && res.qty !== null && res.qty !== undefined) {
                        $('#qtyBale').val(res.qty);
                    }
                }
            });
        }

        $('.btn-back-to-last').on('click', function (e) {
            if (document.referrer && document.referrer.indexOf('/troutp/result') !== -1) {
                e.preventDefault();
                window.location.href = document.referrer;
            }
        });
    });
</script>
@endpush

@push('css')
<style>
    .material-search-item:hover {
        background-color: #f1f8f9 !important;
    }
    #tableRunGrid {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    #tableRunGrid th,
    #tableRunGrid td {
        white-space: nowrap;
    }
    .sticky-col {
        position: sticky;
        z-index: 10 !important;
        border-right: 1px solid #ddd !important;
    }
    .sticky-col-head {
        z-index: 20 !important;
    }
    .sc-mic   { left: 0;    min-width: 180px; max-width: 180px; width: 180px; }
    .sc-unit  { left: 180px; min-width: 70px;  max-width: 70px;  width: 70px; }
    .sc-spec  { left: 250px; min-width: 140px; max-width: 140px; width: 140px; }
    .sc-min   { left: 250px; min-width: 70px;  max-width: 70px;  width: 70px; }
    .sc-max   { left: 320px; min-width: 70px;  max-width: 70px;  width: 70px; }

    #tableRunGrid thead .sticky-col {
        background-color: #b0e9eb !important;
    }
    #tableRunGrid thead tr:last-child .sticky-col {
        background-color: #c4f0f2 !important;
    }
    #tableRunGrid tbody .sticky-col {
        background-color: #FBFBFB !important;
    }
    #tableRunGrid tbody tr:hover .sticky-col {
        background-color: #f1f7f7 !important;
    }
    .col-run {
        min-width: 100px;
        width: 100px;
    }
    .btn-outline-teal:hover {
        background-color: #00969b !important;
        color: #ffffff !important;
    }
    .run-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
    }
    .run-input-wrapper .input-run {
        padding-right: 20px !important;
        transition: all 0.2s ease-in-out;
    }
    .run-input-wrapper .run-status-icon {
        position: absolute;
        right: 6px;
        font-size: 0.75rem;
        pointer-events: none;
        z-index: 1 !important;
    }
    .input-run.run-valid {
        background-color: #e8fadf !important;
        border-color: #52c41a !important;
        color: #135200 !important;
        font-weight: 600 !important;
    }
    .input-run.run-invalid {
        background-color: #fde8e8 !important;
        border-color: #ff4d4f !important;
        color: #a8071a !important;
        font-weight: 600 !important;
    }
</style>
@endpush