@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

{{-- Card for Navigation Buttons - Framework Style --}}
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper d-flex justify-content-between align-items-center">
                    <div>
                        {{-- Excel export all - Framework MSJ Style --}}
                        <button class="btn btn-msj-primary mb-0" id="exportAll"
                            title="Export hanya data yang dicentang/checked">
                            <i class="fas fa-file-excel me-1"></i>
                            <span class="font-weight-bold">Export Data Terpilih</span>
                            <span class="badge bg-white text-dark ms-2" id="selectedCount">0</span>
                        </button>
                        {{-- Info Badge for Selection Status --}}
                        <small class="text-muted ms-2" id="selectionInfo">
                            <i class="fas fa-info-circle"></i> Tidak ada data
                        </small>
                    </div>
                    <div class="d-flex gap-2">
                        {{-- ✅ BARU: Button Sudah Upload - hanya muncul jika ada data yang sedang diproses (Sedang Diproses) --}}
                        @if(!empty($can_sudah_upload))
                        <button class="btn btn-msj-primary mb-0" id="btnSudahUpload"
                            title="Tandai data yang dicentang sebagai sudah diupload ke SAP">
                            <i class="fas fa-cloud-upload-alt me-1"></i>
                            <span class="font-weight-bold">Sudah Upload</span>
                        </button>
                        @endif
                        {{-- Button Update Status SAP - Framework MSJ Success Gradient --}}
                        <button class="btn bg-gradient-success shadow-success mb-0" id="btnUpdateStatusSAP"
                            title="Update status material dan komponen dari SAP">
                            <i class="fas fa-sync-alt me-1"></i>
                            <span class="font-weight-bold">Update Status SAP</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        {{-- Card 1: List Upload BOM --}}
        <div class="col-md-12">
            <div class="card mb-2" style="min-height: 50px;">
                <div class="card-header">
                    <h5 class="mb-0">List Upload BOM</h5>
                </div>
                <hr class="horizontal dark mt-0">
                {{-- alert --}}
                @include('components.alert')
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0 display" id="table_upload_bom">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="40px">
                                        <input type="checkbox" id="selectAll_upload_bom" class="form-check-input" checked disabled title="Otomatis mencentang semua data yang siap" style="pointer-events: none;">
                                    </th>
                                    <th width="12%">Keterangan</th>
                                    <th>Material FG/SFG</th>
                                    <th>Header Desc (40)</th>
                                    <th>Plant</th>
                                    <th>Usage</th>
                                    <th>Alt.Bom.No</th>
                                    <th>Valid From</th>
                                    <th>Alternative BOM</th>
                                    <th>Product Qty</th>
                                    <th>Base UoM Header</th>
                                    <th>Item Number</th>
                                    <th>Type</th>
                                    <th>Comp Material Code (18)</th>
                                    <th>Comp Desc (40)</th>
                                    <th>Comp Qty</th>
                                    <th>UOM</th>

                                </tr>
                            </thead>
                            <tbody>
                                @forelse($upload_bom_data as $index => $row)
                                @php
                                // ✅ BARU: Check Material FG/SFG status dari database
                                $materialStatus = $row->status_mat_fg_sfg ?? null;
                                $isMaterialInvalid = in_array($materialStatus, ['Tidak Ditemukan', 'Dihapus']);

                                // Blade-level validation: Check if row can be selected based on comp_desc
                                // This provides immediate server-side disable logic (same criteria as controller)
                                $isCompInvalid = empty($row->limited_comp_desc) || $row->limited_comp_desc === '-' || $row->limited_comp_desc === null;

                                $isProcessing = ($row->upload_status ?? 'Ready Upload') === 'Sedang Diproses';

                                $canSelect = !$isCompInvalid && !$isMaterialInvalid && !$isProcessing; // ✅ BARU: Disable jika material invalid atau sedang diproses

                                // Determine row CSS class based on comp_desc status
                                // All disabled rows (regardless of reason) get red background
                                $rowClass = '';
                                if (!$canSelect && !$isProcessing) {
                                $rowClass = 'row-disabled'; // Red background for error
                                } elseif ($isProcessing) {
                                $rowClass = 'row-unchecked'; // Let's keep it unchecked/normal color for processing
                                } else {
                                $rowClass = 'row-checked'; // Yellow background for valid but unchecked (will be changed by JS)
                                }

                                @endphp
                                <tr class="{{ $rowClass }}" data-can-select="{{ $canSelect ? 'true' : 'false' }}" data-is-processing="{{ $isProcessing ? 'true' : 'false' }}" data-header-id="{{ $row->fk_trs_bom_h_id }}">
                                    <td>
                                        <input type="checkbox"
                                            class="form-check-input row-checkbox upload-bom-checkbox"
                                            data-material="{{ $row->material_fg_sfg }}"
                                            data-header-id="{{ $row->fk_trs_bom_h_id }}"
                                            data-detail-id="{{ $row->trs_bom_d_id }}"
                                            data-row-index="{{ $index }}"
                                            {{ !$canSelect ? 'disabled' : 'checked onclick="return false;"' }}
                                            style="{{ $canSelect ? 'pointer-events: none;' : '' }}"
                                            {{ !$canSelect && !$isProcessing ? 'title="Tidak dapat dipilih - Data tidak valid untuk ekspor"' : ($isProcessing ? 'title="Data sedang diproses"' : 'title="Data valid dan siap diekspor"') }}>
                                    </td>
                                    <td class="export-skip">
                                        <div class="error-description-container">
                                            @if(!$isCompInvalid && !$isMaterialInvalid)
                                            @if($isProcessing)
                                            <span class="error-badge" style="border-color: #17a2b8; color: #17a2b8; background-color: #d1ecf1;" title="Sedang diproses">
                                                <i class="fas fa-spinner fa-spin"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #0c5460;">Sedang Diproses</span>
                                                </span>
                                            </span>
                                            @else
                                            <span class="error-badge" style="border-color: #28a745; color: #28a745; background-color: #d4edda;" title="Data siap diexport">
                                                <i class="fas fa-check-circle"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #155724;">Ready Upload</span>
                                                </span>
                                            </span>
                                            @endif
                                            @endif
                                            @if($isMaterialInvalid)
                                            <span class="error-badge error-badge-material" title="Material FG/SFG tidak ditemukan di SAP" {!! $is_admins ? 'style="cursor: pointer;" onclick="openEditMaterialModal(\'' . $row->fk_trs_bom_h_id . ' \', \'' . htmlspecialchars($row->material_fg_sfg, ENT_QUOTES) . '\')"' : '' !!}>
                                                <i class="fas fa-solid fa-circle-exclamation"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title">Material FG/SFG</span>
                                                    <span class="error-badge-subtitle">Tidak ditemukan di SAP</span>
                                                </span>
                                            </span>
                                            @endif
                                            @if($isCompInvalid)
                                            <span class="error-badge error-badge-material" title="Comp Material Code tidak ditemukan di SAP" {!! $is_admins ? 'style="cursor: pointer;" onclick="openEditCompModal(\'' . $row->trs_bom_d_id . ' \', \'' . htmlspecialchars($row->comp_material_code, ENT_QUOTES) . '\', \'' . htmlspecialchars($row->comp_desc, ENT_QUOTES) . '\', \'' . htmlspecialchars($row->uom, ENT_QUOTES) . '\')"' : '' !!}>
                                                <i class="fas fa-solid fa-triangle-exclamation"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title">Comp Material Code</span>
                                                    <span class="error-badge-subtitle">tidak ditemukan di SAP</span>
                                                </span>
                                            </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{{ $row->material_fg_sfg }}</td>
                                    <td>{{ $row->limited_header_desc }}</td>
                                    <td>{{ $row->plant }}</td>
                                    <td>{{ $row->usage }}</td>
                                    <td>{{ $row->alt_bom_no }}</td>
                                    <td>{{ $row->formatted_valid_from }}</td>
                                    <td>{{ $row->alternative_bom_text }}</td>
                                    <td>{{ $row->product_qty }}</td>
                                    <td>{{ $row->base_uom_header }}</td>
                                    <td>{{ $row->formatted_item_number }}</td>
                                    <td>{{ $row->type }}</td>
                                    <td>{{ $row->limited_comp_material_code }}</td>
                                    <td>{{ $row->limited_comp_desc }}</td>
                                    <td>{{ $row->comp_qty }}</td>
                                    <td>{{ $row->uom }}</td>

                                </tr>
                                @empty
                                <tr>
                                    <td colspan="16" class="text-center">No data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Card 2: List Recipe --}}
        <div class="col-md-12">
            <div class="card mb-2" style="min-height: 50px;">
                <div class="card-header">
                    <h5 class="mb-0">List Recipe</h5>
                    <small class="text-muted">
                        <i class="fas fa-info-circle"></i>
                        Pemilihan data dikontrol oleh tabel Upload BOM di atas
                    </small>
                </div>
                <hr class="horizontal dark mt-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0 display" id="table_recipe">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="40px">
                                        <input type="checkbox" id="selectAll_recipe" class="form-check-input" checked disabled
                                            title="Otomatis mencentang semua data yang siap"
                                            style="opacity: 0.6; cursor: not-allowed; pointer-events: none;">
                                    </th>
                                    <th width="12%">Keterangan</th>
                                    <th>Kode Group</th>
                                    <th>Plant (4)</th>
                                    <th>Recipe Group (8)</th>
                                    <th>Material</th>
                                    <th>Description</th>
                                    <th>Recipe Description (40)</th>
                                    <th>Recipe Counter (2)</th>
                                    <th>Operation No. (4)</th>
                                    <th>Phase</th>
                                    <th>Rel</th>
                                    <th>MOPER</th>
                                    <th>Resource (8)</th>
                                    <th>Control Key</th>
                                    <th>Description</th>
                                    <th>Base QTY</th>
                                    <th>UoM</th>
                                    <th>Charge</th>
                                    <th>UOM charge</th>
                                    <th>Operation</th>
                                    <th>Setup</th>
                                    <th>UoM Setup</th>
                                    <th>DLBC</th>
                                    <th>UoM DLBC</th>
                                    <th>DEPA</th>
                                    <th>UoM DEPA</th>
                                    <th>REPM</th>
                                    <th>UoM REPM</th>
                                    <th>OVHD</th>
                                    <th>UoM OVHD</th>

                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recipe_data as $index => $recipe)
                                @php
                                // ✅ BARU: Check Material FG/SFG status dari database
                                $materialStatus = $recipe->status_mat_fg_sfg ?? null;
                                $isMaterialInvalid = in_array($materialStatus, ['Tidak Ditemukan', 'Dihapus']);

                                $isProcessing = ($recipe->upload_status ?? 'Ready Upload') === 'Sedang Diproses';

                                // Disable jika material invalid atau sedang diproses
                                $canSelect = !$isMaterialInvalid && !$isProcessing;

                                // Row class berdasarkan status
                                $rowClass = '';
                                if (!$canSelect && !$isProcessing) {
                                $rowClass = 'row-disabled';
                                } elseif ($isProcessing) {
                                $rowClass = 'row-unchecked';
                                } else {
                                $rowClass = 'row-checked';
                                }

                                // ✅ Badge text untuk error status
                                $statusBadgeText = '';
                                if ($isMaterialInvalid) {
                                $statusBadgeText = 'MATERIAL FG/SFG BELUM ADA DI SAP';
                                }
                                @endphp
                                <tr class="{{ $rowClass }}" data-can-select="{{ $canSelect ? 'true' : 'false' }}" data-is-processing="{{ $isProcessing ? 'true' : 'false' }}" data-header-id="{{ $recipe->fk_trs_bom_h_id }}">
                                    <td>
                                        <input type="checkbox"
                                            class="form-check-input row-checkbox recipe-checkbox"
                                            data-material="{{ $recipe->material ?? '' }}"
                                            data-original-material="{{ $recipe->material_fg_sfg ?? '' }}"
                                            data-header-id="{{ $recipe->fk_trs_bom_h_id }}"
                                            data-detail-id="{{ $recipe->trs_bom_d_id ?? '' }}"
                                            data-recipe-id="{{ $recipe->trs_bom_d_id ?? '' }}"
                                            data-resource="{{ $recipe->resource_display ?? '' }}"
                                            data-row-index="{{ $index }}"
                                            {{ !$canSelect ? 'disabled' : 'checked onclick="return false;"' }}
                                            style="{{ $canSelect ? 'pointer-events: none;' : '' }}"
                                            {{ !$canSelect && !$isProcessing ? 'title="Tidak dapat dipilih - Material FG/SFG tidak valid"' : ($isProcessing ? 'title="Data sedang diproses"' : 'title="Data valid dan siap diekspor"') }}>
                                    </td>
                                    <td class="export-skip">
                                        <div class="error-description-container">
                                            @if(!$isMaterialInvalid)
                                            @if($isProcessing)
                                            <span class="error-badge" style="border-color: #17a2b8; color: #17a2b8; background-color: #d1ecf1;" title="Sedang diproses">
                                                <i class="fas fa-spinner fa-spin"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #0c5460;">Sedang Diproses</span>
                                                </span>
                                            </span>
                                            @else
                                            <span class="error-badge" style="border-color: #28a745; color: #28a745; background-color: #d4edda;" title="Data siap diexport">
                                                <i class="fas fa-check-circle"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #155724;">Ready Upload</span>
                                                </span>
                                            </span>
                                            @endif
                                            @endif
                                            @if($statusBadgeText)
                                            <span class="error-badge error-badge-material" title="Material FG/SFG tidak ditemukan di SAP" {!! $is_admins ? 'style="cursor: pointer;" onclick="openEditMaterialModal(\'' . $recipe->fk_trs_bom_h_id . ' \', \'' . htmlspecialchars($recipe->material_fg_sfg, ENT_QUOTES) . '\')"' : '' !!}>
                                                <i class="fas fa-solid fa-circle-exclamation"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title">Material</span>
                                                    <span class="error-badge-subtitle">Tidak ditemukan di SAP</span>
                                                </span>
                                            </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{{ $recipe->kode_group }}</td>
                                    <td>{{ $recipe->plant }}</td>
                                    <td>{{ $recipe->recipe_group }}</td>
                                    <td>{{ $recipe->material }}</td>
                                    <td>{{ $recipe->description }}</td>
                                    <td>{{ $recipe->recipe_description }}</td>
                                    <td>{{ $recipe->recipe_counter }}</td>
                                    <td>{{ $recipe->operation_no }}</td>
                                    <td>{{ $recipe->phase }}</td>
                                    <td>{{ $recipe->rel }}</td>
                                    <td>{{ $recipe->moper }}</td>
                                    <td>{{ $recipe->resource_display }}</td>
                                    <td>{{ $recipe->control_key }}</td>
                                    <td>{{ $recipe->description_process }}</td>
                                    <td>{{ $recipe->base_qty }}</td>
                                    <td>{{ $recipe->uom }}</td>
                                    <td>{{ $recipe->charge }}</td>
                                    <td>{{ $recipe->uom_charge }}</td>
                                    <td>{{ $recipe->operation }}</td>
                                    <td>{{ $recipe->setup }}</td>
                                    <td>{{ $recipe->uom_setup }}</td>
                                    <td>{{ $recipe->dlbc }}</td>
                                    <td>{{ $recipe->uom_dlbc }}</td>
                                    <td>{{ $recipe->depa ?? '1' }}</td>
                                    <td>{{ $recipe->uom_depa ?? 'H' }}</td>
                                    <td>{{ $recipe->repm }}</td>
                                    <td>{{ $recipe->uom_repm }}</td>
                                    <td>{{ $recipe->ovhd }}</td>
                                    <td>{{ $recipe->uom_ovhd }}</td>

                                </tr>
                                @empty
                                <tr>
                                    <td colspan="28" class="text-center">No recipe data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Card 3: List Production Version --}}
        <div class="col-md-12">
            <div class="card" style="min-height: 50px;">
                <div class="card-header">
                    <h5 class="mb-0">List Production Version</h5>
                    <small class="text-muted">
                        <i class="fas fa-info-circle"></i>
                        Pemilihan data dikontrol oleh tabel Upload BOM di atas
                    </small>
                </div>
                <hr class="horizontal dark mt-0">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0 display" id="table_pv">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th width="40px">
                                        <input type="checkbox" id="selectAll_pv" class="form-check-input" checked disabled
                                            title="Otomatis mencentang semua data yang siap"
                                            style="opacity: 0.6; cursor: not-allowed; pointer-events: none;">
                                    </th>
                                    <th width="12%">Keterangan</th>
                                    <th>MATERIAL FG/SFG</th>
                                    <th>WERKS/PLANT</th>
                                    <th>VERID/PRODUCTION VERSION</th>
                                    <th>TEXT1/DESCRIPTION</th>
                                    <th>ADATU/VALID FROM</th>
                                    <th>BDATU/VALID TO</th>
                                    <th>PLNNR/KEY FOR TASK LIST GROUP</th>
                                    <th>PLNAL/GROUP COUNTER</th>
                                    <th>STLAN/BOM USAGE</th>
                                    <th>STLAL/ALTERNATIVE BOM</th>
                                    <th>ELPRO/PROPOSED ISSUE SLOC</th>
                                    <th>ALORT/RECEIVING SLOC</th>
                                    <th>Resource</th>
                                    <th>Column 3</th>

                                </tr>
                            </thead>
                            <tbody>
                                @forelse($product_version_data as $index => $pv)
                                @php
                                // ✅ BARU: Check Material FG/SFG status dari database
                                $materialStatus = $pv->status_mat_fg_sfg ?? null;
                                $isMaterialInvalid = in_array($materialStatus, ['Tidak Ditemukan', 'Dihapus']);

                                $isProcessing = ($pv->upload_status ?? 'Ready Upload') === 'Sedang Diproses';

                                // Disable jika material invalid atau sedang diproses
                                $canSelect = !$isMaterialInvalid && !$isProcessing;

                                // Row class berdasarkan status
                                $rowClass = '';
                                if (!$canSelect && !$isProcessing) {
                                $rowClass = 'row-disabled';
                                } elseif ($isProcessing) {
                                $rowClass = 'row-unchecked';
                                } else {
                                $rowClass = 'row-checked';
                                }

                                // ✅ Badge text untuk error status
                                $statusBadgeText = '';
                                if ($isMaterialInvalid) {
                                $statusBadgeText = 'MATERIAL FG/SFG BELUM ADA DI SAP';
                                }
                                @endphp
                                <tr class="{{ $rowClass }}" data-can-select="{{ $canSelect ? 'true' : 'false' }}" data-is-processing="{{ $isProcessing ? 'true' : 'false' }}" data-header-id="{{ $pv->fk_trs_bom_h_id }}">
                                    <td>
                                        <input type="checkbox"
                                            class="form-check-input row-checkbox pv-checkbox"
                                            data-material="{{ $pv->material ?? '' }}"
                                            data-original-material="{{ $pv->material_fg_sfg ?? '' }}"
                                            data-header-id="{{ $pv->fk_trs_bom_h_id }}"
                                            data-detail-id="{{ $pv->trs_bom_d_id ?? '' }}"
                                            data-pv-id="{{ $pv->trs_bom_d_id ?? '' }}"
                                            data-resource="{{ $pv->resource_display ?? '' }}"
                                            data-row-index="{{ $index }}"
                                            {{ !$canSelect ? 'disabled' : 'checked onclick="return false;"' }}
                                            style="{{ $canSelect ? 'pointer-events: none;' : '' }}"
                                            {{ !$canSelect && !$isProcessing ? 'title="Tidak dapat dipilih - Material FG/SFG tidak valid"' : ($isProcessing ? 'title="Data sedang diproses"' : 'title="Data valid dan siap diekspor"') }}>
                                    </td>
                                    <td class="export-skip">
                                        <div class="error-description-container">
                                            @if(!$isMaterialInvalid)
                                            @if($isProcessing)
                                            <span class="error-badge" style="border-color: #17a2b8; color: #17a2b8; background-color: #d1ecf1;" title="Sedang diproses">
                                                <i class="fas fa-spinner fa-spin"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #0c5460;">Sedang Diproses</span>
                                                </span>
                                            </span>
                                            @else
                                            <span class="error-badge" style="border-color: #28a745; color: #28a745; background-color: #d4edda;" title="Data siap diexport">
                                                <i class="fas fa-check-circle"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title" style="color: #155724;">Ready Upload</span>
                                                </span>
                                            </span>
                                            @endif
                                            @endif
                                            @if($statusBadgeText)
                                            <span class="error-badge error-badge-material" title="Material FG/SFG tidak ditemukan di SAP" {!! $is_admins ? 'style="cursor: pointer;" onclick="openEditMaterialModal(\'' . $pv->fk_trs_bom_h_id . ' \', \'' . htmlspecialchars($pv->material_fg_sfg, ENT_QUOTES) . '\')"' : '' !!}>
                                                <i class="fas fa-solid fa-circle-exclamation"></i>
                                                <span class="error-badge-text">
                                                    <span class="error-badge-title">Material FG/SFG</span>
                                                    <span class="error-badge-subtitle">Tidak ditemukan di SAP</span>
                                                </span>
                                            </span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{{ $pv->material_display ?? '' }}</td>
                                    <td>{{ $pv->werks_plant ?? '' }}</td>
                                    <td>{{ $pv->verid_production_version ?? '' }}</td>
                                    <td>{{ $pv->text1_description ?? '' }}</td>
                                    <td>{{ $pv->adatu_valid_from ?? '' }}</td>
                                    <td>{{ $pv->bdatu_valid_to ?? '' }}</td>
                                    <td>{{ $pv->plnnr_key_task_list ?? '' }}</td>
                                    <td>{{ $pv->plnal_group_counter ?? '' }}</td>
                                    <td>{{ $pv->stlan_bom_usage ?? '' }}</td>
                                    <td>{{ $pv->stlal_alternative_bom ?? '' }}</td>
                                    <td>{{ $pv->elpro_proposed_issue_sloc ?? '' }}</td>
                                    <td>{{ $pv->alort_receiving_sloc ?? '' }}</td>
                                    <td>{{ $pv->resource_display ?? '' }}</td>
                                    <td>{{ $pv->column_3 ?? '' }}</td>

                                </tr>
                                @empty
                                <tr>
                                    <td colspan="15" class="text-center">No product version data available</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{{-- Static UI - No JS menu check needed for static display --}}
{{-- @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
{{-- @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif --}}
<!-- ✅ Modal Edit Material FG/SFG -->
<div class="modal fade" id="editMaterialModal" tabindex="-1" role="dialog" aria-labelledby="editMaterialModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editMaterialModalLabel">Edit Material FG/SFG</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formEditMaterial">
                    <input type="hidden" id="edit_material_header_id" name="trs_bom_h_id">
                    <div class="form-group">
                        <label for="edit_material_fg_sfg" class="form-control-label">Material FG/SFG</label>
                        <input class="form-control" type="text" id="edit_material_fg_sfg" name="material_fg_sfg" required>
                        <small id="material_fg_sfg_status" class="form-text mt-1"></small>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-msj-primary" id="btnSaveMaterial">Simpan Perubahan</button>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Modal Edit Component Material -->
<div class="modal fade" id="editCompModal" tabindex="-1" role="dialog" aria-labelledby="editCompModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCompModalLabel">Edit Component Material</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formEditComp">
                    <input type="hidden" id="edit_comp_detail_id" name="trs_bom_d_id">

                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="edit_comp_material_code" class="form-control-label">Component Material Code</label>
                                <input class="form-control" type="text" id="edit_comp_material_code" name="comp_material_code" required>
                                <small id="comp_material_status" class="form-text mt-1"></small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="edit_comp_uom" class="form-control-label">UoM</label>
                                <input class="form-control" type="text" id="edit_comp_uom" name="uom" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_comp_desc" class="form-control-label">Component Description</label>
                        <input class="form-control" type="text" id="edit_comp_desc" name="comp_desc" readonly>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-msj-primary" id="btnSaveComp">Simpan Perubahan</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<style>
    /* ✅ BARU: Badge Material FG/SFG Status - Framework MSJ Color */
    .badge-material-status {
        display: inline-block;
        padding: 3px 8px;
        margin-left: 8px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 4px;
        background-color: #028284;
        /* MSJ Color */
        color: white;
        text-transform: lowercase;
        vertical-align: middle;
        white-space: nowrap;
    }

    .badge-material-not-found,
    .badge-material-deleted {
        background-color: #028284;
        /* MSJ Color untuk semua status */
    }

    /* Incomplete group styling - visual warning for partially selected groups */
    .row-incomplete-group {
        background-color: #fff3cd !important;
        border-left: 4px solid #ffc107 !important;
    }

    .row-incomplete-group td {
        background-color: #fff3cd !important;
        color: #856404 !important;
    }

    /* Incomplete group with alternating colors */
    .row-incomplete-group.row-group-light {
        background-color: #fff8e1 !important;
        /* Light yellow */
    }

    .row-incomplete-group.row-group-light td {
        background-color: #fff8e1 !important;
    }

    .row-incomplete-group.row-group-dark {
        background-color: #ffe082 !important;
        /* Darker yellow */
    }

    .row-incomplete-group.row-group-dark td {
        background-color: #ffe082 !important;
    }

    .row-incomplete-group .form-check-input {
        border-color: #ffc107 !important;
    }

    .row-incomplete-group .form-check-input:checked {
        background-color: #ffc107 !important;
        border-color: #ffc107 !important;
    }

    /* Framework MSJ Button Styling */
    .btn-msj-primary {
        background-color: #028284;
        border-color: #028284;
        color: white;
        font-weight: bold;
    }

    .btn-msj-primary:hover {
        background-color: #026d6f;
        border-color: #026d6f;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(2, 130, 132, 0.3);
    }

    .btn-msj-primary:focus,
    .btn-msj-primary:active {
        background-color: #025a5c;
        border-color: #025a5c;
        color: white;
        box-shadow: 0 0 0 0.2rem rgba(2, 130, 132, 0.5);
    }

    .btn-msj-primary:disabled {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white;
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* Selected count badge styling */
    #selectedCount {
        font-size: 0.75rem;
        font-weight: bold;
        min-width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        animation: none;
    }

    .btn-msj-primary #selectedCount {
        background-color: white !important;
        color: #028284 !important;
    }

    .btn-msj-primary:disabled #selectedCount {
        background-color: #f8f9fa !important;
        color: #6c757d !important;
    }

    /* Selection info styling */
    #selectionInfo {
        font-size: 0.85rem;
        display: inline-block;
        vertical-align: middle;
    }

    #selectionInfo .text-success {
        color: #198754 !important;
    }

    /* Framework MSJ Secondary Button Styling */
    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white;
        font-weight: bold;
    }

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
    }

    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: #545b62;
        border-color: #4e555b;
        color: white;
        box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
    }

    /* Custom Checkbox Styling - Kotak Centang - Override Bootstrap */
    .form-check-input,
    input[type="checkbox"].form-check-input,
    .upload-bom-checkbox,
    .recipe-checkbox,
    .pv-checkbox {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 3px !important;
        /* Membuat kotak, bukan bulat */
        border: 2px solid #6c757d !important;
        background-color: white !important;
        background-image: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }

    .form-check-input:checked,
    input[type="checkbox"].form-check-input:checked,
    .upload-bom-checkbox:checked,
    .recipe-checkbox:checked,
    .pv-checkbox:checked {
        background-color: #028284 !important;
        border-color: #028284 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .form-check-input:focus,
    input[type="checkbox"].form-check-input:focus,
    .upload-bom-checkbox:focus,
    .recipe-checkbox:focus,
    .pv-checkbox:focus {
        border-color: #028284 !important;
        box-shadow: 0 0 0 0.2rem rgba(2, 130, 132, 0.25) !important;
        outline: none !important;
    }

    .form-check-input:hover:not(:disabled),
    input[type="checkbox"].form-check-input:hover:not(:disabled),
    .upload-bom-checkbox:hover:not(:disabled),
    .recipe-checkbox:hover:not(:disabled),
    .pv-checkbox:hover:not(:disabled) {
        border-color: #028284 !important;
        transform: scale(1.1) !important;
    }

    .form-check-input:disabled,
    input[type="checkbox"].form-check-input:disabled,
    .upload-bom-checkbox:disabled,
    .recipe-checkbox:disabled,
    .pv-checkbox:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        background-color: #e9ecef !important;
        border-color: #ced4da !important;
    }

    .form-check-input[title] {
        cursor: help;
    }

    /* Enhanced disabled checkbox styling for all tables */
    .upload-bom-checkbox:disabled,
    .recipe-checkbox:disabled,
    .pv-checkbox:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background-color: #f8d7da !important;
        border-color: #dc3545 !important;
    }

    /* Locked checkbox styling - follows Upload BOM selection */
    .locked-checkbox {
        background-color: #028284 !important;
        border-color: #028284 !important;
        cursor: not-allowed !important;
        opacity: 0.9 !important;
    }

    .locked-checkbox:checked {
        background-color: #028284 !important;
        border-color: #026d6f !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

    .locked-checkbox:hover {
        background-color: #026d6f !important;
        border-color: #025a5c !important;
        transform: none !important;
        /* Tidak ada efek hover untuk locked */
    }

    /* Waiting checkbox styling - Recipe and PV waiting for Upload BOM completion */
    .recipe-checkbox:not(.locked-checkbox):not(:disabled),
    .pv-checkbox:not(.locked-checkbox):not(:disabled) {
        opacity: 0.7;
        cursor: help;
        background-color: #fff3cd !important;
        border-color: #ffc107 !important;
    }

    .recipe-checkbox:not(.locked-checkbox):not(:disabled):hover,
    .pv-checkbox:not(.locked-checkbox):not(:disabled):hover {
        opacity: 0.9;
        background-color: #fff3cd !important;
        border-color: #ffcd39 !important;
        transform: scale(1.05);
    }

    .recipe-checkbox:not(.locked-checkbox):not(:disabled):checked,
    .pv-checkbox:not(.locked-checkbox):not(:disabled):checked {
        background-color: #ffc107 !important;
        border-color: #ffc107 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    }

    /* Indeterminate checkbox styling - kotak centang dengan garis */
    input[type="checkbox"]:indeterminate {
        background-color: #6c757d;
        border-color: #6c757d;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Select All checkbox khusus untuk header tabel */
    .form-check-input[id^="selectAll"] {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }

    .form-check-input[id^="selectAll"]:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }

    /* Checkbox container styling untuk alignment yang lebih baik */
    .form-check {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .form-check .form-check-input {
        margin: 0;
        float: none;
    }

    /* Styling khusus untuk checkbox di dalam tabel */
    td .form-check,
    th .form-check {
        min-height: auto;
        padding-left: 0;
    }

    /* Animation untuk efek check */
    .form-check-input:checked {
        animation: checkboxPop 0.2s ease-in-out;
    }

    @keyframes checkboxPop {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Hover effect yang lebih halus */
    .form-check-input:not(:disabled):not(.locked-checkbox):hover {
        box-shadow: 0 0 0 3px rgba(2, 130, 132, 0.1);
    }

    /* FORCE OVERRIDE - Styling Kotak Centang untuk Tabel */
    table input[type="checkbox"],
    .table input[type="checkbox"],
    tbody input[type="checkbox"],
    td input[type="checkbox"],
    th input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #6c757d !important;
        border-radius: 3px !important;
        background-color: white !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    table input[type="checkbox"]:checked,
    .table input[type="checkbox"]:checked,
    tbody input[type="checkbox"]:checked,
    td input[type="checkbox"]:checked,
    th input[type="checkbox"]:checked {
        background-color: #028284 !important;
        border-color: #028284 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    table input[type="checkbox"]:focus,
    .table input[type="checkbox"]:focus,
    tbody input[type="checkbox"]:focus,
    td input[type="checkbox"]:focus,
    th input[type="checkbox"]:focus {
        border-color: #028284 !important;
        box-shadow: 0 0 0 0.2rem rgba(2, 130, 132, 0.25) !important;
        outline: none !important;
    }

    /* SUPER SPECIFIC OVERRIDE untuk checkbox dalam tabel dengan class spesifik */
    tr td input.form-check-input,
    tr td input.upload-bom-checkbox,
    tr td input.recipe-checkbox,
    tr td input.pv-checkbox,
    tbody tr td input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        border: 2px solid #6c757d !important;
        border-radius: 3px !important;
        background-color: white !important;
        background-image: none !important;
        background-size: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
        position: relative !important;
    }

    tr td input.form-check-input:checked,
    tr td input.upload-bom-checkbox:checked,
    tr td input.recipe-checkbox:checked,
    tr td input.pv-checkbox:checked,
    tbody tr td input[type="checkbox"]:checked {
        background-color: #028284 !important;
        border-color: #028284 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* ULTIMATE OVERRIDE - Pastikan semua checkbox berbentuk kotak */
    #table_upload_bom input[type="checkbox"],
    #table_recipe input[type="checkbox"],
    #table_pv input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #6c757d !important;
        border-radius: 3px !important;
        background-color: white !important;
        background-image: none !important;
        cursor: pointer !important;
        vertical-align: middle !important;
        margin: 0 auto !important;
        display: block !important;
    }

    #table_upload_bom input[type="checkbox"]:checked,
    #table_recipe input[type="checkbox"]:checked,
    #table_pv input[type="checkbox"]:checked {
        background-color: #028284 !important;
        border-color: #028284 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Button spacing and transitions - Framework MSJ */
    .btn+.btn {
        margin-left: 0.5rem;
    }

    .btn {
        transition: all 0.3s ease;
    }

    /* Table responsiveness */
    .table-responsive {
        overflow-x: auto;
    }

    /* Row background colors based on comp_desc and checkbox status */
    .row-disabled {
        background-color: rgba(255, 138, 128, 0.4) !important;
        /* Soft transparent red for disabled rows */
        color: #212529 !important;
        /* Dark text for better readability */
    }

    .row-disabled td {
        background-color: rgba(255, 138, 128, 0.4) !important;
        color: #212529 !important;
    }

    /* Alternating group background colors - Light and Dark per group */
    .row-group-light.row-checked {
        background-color: #f8f9fa !important;
        /* Light gray - Bootstrap gray-100 */
    }

    .row-group-light.row-checked td {
        background-color: #f8f9fa !important;
    }

    .row-group-dark.row-checked {
        background-color: #dee2e6 !important;
        /* Darker gray - Bootstrap gray-300 */
    }

    .row-group-dark.row-checked td {
        background-color: #dee2e6 !important;
    }

    /* Unchecked rows keep yellow background regardless of group */
    .row-group-light.row-unchecked,
    .row-group-dark.row-unchecked {
        background-color: #fff6a5ff !important;
    }

    .row-group-light.row-unchecked td,
    .row-group-dark.row-unchecked td {
        background-color: #fff6a5ff !important;
    }

    /* Override group colors for disabled rows */
    .row-disabled.row-group-light,
    .row-disabled.row-group-dark {
        background-color: #ffd6d9 !important;
    }

    .row-disabled.row-group-light td,
    .row-disabled.row-group-dark td {
        background-color: #ffd6d9 !important;
    }

    .row-unchecked {
        background-color: #fff6a5ff !important;
        /* Yellow background for unchecked but valid rows */
        color: #212529 !important;
    }

    .row-unchecked td {
        background-color: #fff6a5ff !important;
        color: #212529 !important;
    }

    .row-checked {
        /* No default background - will use group alternating colors */
        color: #212529 !important;
    }

    .row-checked td {
        /* No default background - will use group alternating colors */
        color: #212529 !important;
    }

    /* Ensure checkbox visibility on colored backgrounds */
    .row-disabled .form-check-input,
    .row-unchecked .form-check-input,
    .row-checked .form-check-input {
        opacity: 1 !important;
    }

    /* Override hover effects for colored rows */
    .table tbody tr.row-disabled:hover td,
    .table tbody tr.row-unchecked:hover td,
    .table tbody tr.row-checked:hover td {
        background-color: inherit !important;
    }

    /* Checkbox column width */
    th:first-child,
    td:first-child {
        width: 40px;
        text-align: center;
    }

    /* Fallback styling for tables without DataTable */
    .table-fallback {
        width: 100%;
        border-collapse: collapse;
    }

    .table-fallback th,
    .table-fallback td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .table-fallback th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    /* FORCE APPLY - JavaScript akan menambahkan inline style jika perlu */
    .checkbox-square-forced {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        border: 2px solid #6c757d !important;
        border-radius: 3px !important;
        background-color: white !important;
    }

    .error-description-container {
        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-height: auto;
        max-height: none;
        padding: 2px 0;
        overflow: visible;
    }

    .error-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        flex-shrink: 1;
    }

    .error-badge:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    /* Material FG/SFG Error Badge */
    .error-badge-material {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-color: #bd2130;
    }

    .error-badge-material i {
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .error-badge-material .error-badge-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: 1;
        min-width: 0;
    }

    .error-badge-material .error-badge-title {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: 0.68rem;
    }

    .error-badge-material .error-badge-subtitle {
        font-weight: 500;
        font-size: 0.65rem;
        opacity: 0.95;
        line-height: 1.1;
    }

    /* Component Material Error Badge */
    .error-badge-component {
        background: linear-gradient(135deg, #fd7e14 0%, #f76707 100%);
        color: white;
        border-color: #e76904;
    }

    .error-badge-component i {
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .error-badge-component .error-badge-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: 1;
        min-width: 0;
    }

    .error-badge-component .error-badge-title {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-size: 0.68rem;
    }

    .error-badge-component .error-badge-subtitle {
        font-weight: 500;
        font-size: 0.65rem;
        opacity: 0.95;
        line-height: 1.1;
    }

    /* No Error Badge - Success State */
    .error-badge-success {
        background-color: #f8f9fa;
        color: #6c757d;
        border: 1px dashed #dee2e6;
        padding: 5px 8px;
        font-size: 0.80rem;
        font-weight: 600;
        letter-spacing: 1px;
    }

    .error-badge-success i {
        color: #198754;
        font-size: 0.9rem;
    }

    .table tbody tr {
        height: auto;
        min-height: 50px;
    }

    .table tbody td {
        vertical-align: middle;
        padding: 6px 10px !important;
    }

    #table_upload_bom tbody tr,
    #table_recipe tbody tr,
    #table_pv tbody tr {
        height: auto;
        min-height: 50px;
    }

    #table_upload_bom tbody td,
    #table_recipe tbody td,
    #table_pv tbody td {
        vertical-align: top;
        padding: 6px 10px !important;
    }
</style>
<script>
    var uploadBomTable, recipeTable, pvTable;

    // Function to force checkbox styling - KOTAK CENTANG
    function forceCheckboxStyling() {
        // Target semua checkbox dalam tabel
        const checkboxes = document.querySelectorAll('#table_upload_bom input[type="checkbox"], #table_recipe input[type="checkbox"], #table_pv input[type="checkbox"]');

        checkboxes.forEach(function(checkbox) {
            // Hapus appearance default browser
            checkbox.style.setProperty('-webkit-appearance', 'none', 'important');
            checkbox.style.setProperty('-moz-appearance', 'none', 'important');
            checkbox.style.setProperty('appearance', 'none', 'important');

            // Set ukuran dan styling kotak
            checkbox.style.setProperty('width', '18px', 'important');
            checkbox.style.setProperty('height', '18px', 'important');
            checkbox.style.setProperty('border', '2px solid #6c757d', 'important');
            checkbox.style.setProperty('border-radius', '3px', 'important');
            checkbox.style.setProperty('background-color', 'white', 'important');
            checkbox.style.setProperty('cursor', 'pointer', 'important');
            checkbox.style.setProperty('vertical-align', 'middle', 'important');
            checkbox.style.setProperty('margin', '0 auto', 'important');
            checkbox.style.setProperty('display', 'block', 'important');

            // Set background image untuk checked state
            if (checkbox.checked) {
                checkbox.style.setProperty('background-color', '#028284', 'important');
                checkbox.style.setProperty('border-color', '#028284', 'important');
                checkbox.style.setProperty('background-image', "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\")", 'important');
                checkbox.style.setProperty('background-size', '100% 100%', 'important');
                checkbox.style.setProperty('background-position', 'center', 'important');
                checkbox.style.setProperty('background-repeat', 'no-repeat', 'important');
            }
        });
    }

    // Global error handler to prevent uncaught errors
    window.addEventListener('error', function(e) {
        console.error('Global error caught:', e.error);

        // If it's a DataTables related error, ensure tables are visible with proper styling
        if (e.message && e.message.toLowerCase().includes('datatable')) {
            $('#table_upload_bom, #table_recipe, #table_pv').show();
        }

        // Don't prevent default to allow other error handlers
        return false;
    });

    // Global DataTables error handler
    $.fn.dataTable.ext.errMode = 'none';

    // Pass disabled header IDs from controller to JavaScript
    var disabledHeaderIds = @json($disabled_header_ids);

    $(document).ready(function() {
        // Check if required libraries are loaded
        if (typeof jQuery === 'undefined') {
            console.error('jQuery is not loaded');
            return;
        }

        if (typeof $.fn.DataTable === 'undefined') {
            console.error('DataTables is not loaded');
            // Show tables without DataTable features
            $('#table_upload_bom, #table_recipe, #table_pv').show();
            return;
        }

        // Get disabled header IDs from controller (proper implementation)
        const disabledIds = @json($disabled_header_ids ?? []);


        if (Array.isArray(disabledIds) && disabledIds.length > 0) {
            // JavaScript-level validation: Apply disable logic consistently across all tables
            // This works in conjunction with Blade-level $canSelect validation for Upload BOM

            // Disable Upload BOM checkboxes (same criteria as Recipe and PV)
            disabledIds.forEach(function(headerId) {
                $('.upload-bom-checkbox[data-header-id="' + headerId + '"]').each(function() {
                    // Note: Some checkboxes may already be disabled by Blade template $canSelect logic
                    if (!$(this).is(':disabled')) {
                        $(this).prop('disabled', true);
                        $(this).attr('title', 'Tidak dapat dipilih - Data memiliki comp_desc invalid (kosong, null, atau "-")');
                    }
                });

                // Disable Recipe checkboxes
                $('.recipe-checkbox[data-header-id="' + headerId + '"]').each(function() {
                    $(this).prop('disabled', true);
                    $(this).attr('title', 'Tidak dapat dipilih - Terhubung dengan Upload BOM yang memiliki comp_desc invalid');
                });

                // Disable PV checkboxes
                $('.pv-checkbox[data-header-id="' + headerId + '"]').each(function() {
                    $(this).prop('disabled', true);
                    $(this).attr('title', 'Tidak dapat dipilih - Terhubung dengan Upload BOM yang memiliki comp_desc invalid');
                });
            });
        }

        // Update background colors after all disable logic is applied
        setTimeout(function() {
            updateRowBackgroundColors();
        }, 100);

        // Global DataTables error handler
        $(document).on('error.dt', function(e, settings, techNote, message) {
            console.error('DataTables error:', message);
            console.error('Technical note:', techNote);

            // Find the table that caused the error
            var tableId = settings.nTable ? settings.nTable.id : 'unknown';

            // Show the table with standard framework styling
            if (tableId && tableId !== 'unknown') {
                $('#' + tableId).show();
            }

            // Prevent the error modal from showing
            e.preventDefault();
            return false;
        });

        // Function to safely initialize DataTable
        function initializeDataTable(tableId, tableName) {
            try {
                const tableElement = $(tableId);

                // Check if table exists
                if (tableElement.length === 0) {
                    return null;
                }

                // Check table structure
                const headers = tableElement.find('thead th').length;
                const bodyRows = tableElement.find('tbody tr').length;
                const emptyMessageRows = tableElement.find('tbody tr td[colspan]').length;
                const actualDataRows = bodyRows - emptyMessageRows;

                // Validate table structure
                if (headers === 0) {
                    tableElement.show();
                    return null;
                }

                // Destroy existing DataTable instance if exists
                if ($.fn.DataTable.isDataTable(tableId)) {
                    tableElement.DataTable().destroy();
                }

                // Check if we have actual data rows
                const hasActualData = actualDataRows > 0;

                // Framework DataTable configuration (consistent with company style)
                let config = {
                    "language": {
                        "search": "Cari :",
                        "lengthMenu": "Tampilkan _MENU_ baris",
                        "zeroRecords": "Maaf - Data tidak ada",
                        "info": "Data _START_ - _END_ dari _TOTAL_",
                        "infoEmpty": "Tidak ada data",
                        "infoFiltered": "(pencarian dari _MAX_ data)",
                        "emptyTable": "Tidak ada data tersedia dalam tabel",
                        "paginate": {
                            "first": "Pertama",
                            "last": "Terakhir",
                            "next": "Next",
                            "previous": "Previous"
                        }
                    },
                    "pageLength": tableId === '#table_upload_bom' ? 25 : 25, // Default 25 for all tables
                    "lengthMenu": [25, 50, 100, 200, 500], // Options untuk jumlah data per halaman
                    responsive: true,
                    dom: 'lfrtip',
                    "order": [],
                    "paging": true,
                    "searching": true,
                    "info": true,
                    "lengthChange": true,
                    "columnDefs": [{
                            "orderable": false,
                            "targets": 0
                        } // Disable sorting on checkbox column
                    ],
                    "destroy": true,
                    "autoWidth": false,
                    "processing": false,
                    "serverSide": false,
                    "deferRender": false,
                    "initComplete": function(settings, json) {
                        // Add alert for high page length selection
                        if (tableId === '#table_upload_bom') {
                            $(tableId + '_length select').on('change', function() {
                                const selectedValue = $(this).val();
                                if (parseInt(selectedValue) >= 100) {
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Perhatian!',
                                        text: 'Anda memilih untuk menampilkan ' + selectedValue + ' baris. Ini mungkin mempengaruhi performa aplikasi. Disarankan menggunakan filter 100 data terlebih dahulu.',
                                        confirmButtonText: 'OK, Saya Mengerti',
                                        confirmButtonColor: '#028284'
                                    });
                                }

                                // Apply same page length to other tables
                                if (recipeTable) {
                                    recipeTable.page.len(selectedValue).draw();
                                }
                                if (pvTable) {
                                    pvTable.page.len(selectedValue).draw();
                                }
                            });
                        }

                        // Update row background colors after DataTable initialization
                        setTimeout(() => {
                            updateRowBackgroundColors();
                            // Force apply checkbox styling setelah DataTable selesai
                            forceCheckboxStyling();
                        }, 100);
                    },
                    "drawCallback": function(settings) {
                        // Update row background colors after DataTable redraw
                        setTimeout(() => {
                            updateRowBackgroundColors();
                            // Force apply checkbox styling setiap kali table di-redraw
                            forceCheckboxStyling();
                        }, 50);
                    }
                };

                if (!hasActualData) {
                    // For empty tables, keep full features but show empty message
                    config.language.emptyTable = "Tidak ada data tersedia";
                    config.language.zeroRecords = "Tidak ada data tersedia";
                }

                // Initialize DataTable with error handling
                const table = tableElement.DataTable(config);

                // Bind error handler specifically for this table
                tableElement.on('error.dt', function(e, settings, techNote, message) {
                    console.error(tableName + ' DataTable error:', message);
                    e.stopPropagation(); // Prevent bubbling to global handler

                    // Fallback: show table with basic styling
                    tableElement.show();
                    return false;
                });

                return table;

            } catch (error) {
                console.error('Error initializing ' + tableName + ' table:', error);

                // Fallback: show table without DataTable features but with basic styling
                try {
                    const tableElement = $(tableId);
                    tableElement.show();
                } catch (fallbackError) {
                    console.error('Fallback also failed for ' + tableName + ':', fallbackError);
                }

                return null;
            }
        }

        // Initialize all tables
        uploadBomTable = initializeDataTable('#table_upload_bom', 'Upload BOM');
        recipeTable = initializeDataTable('#table_recipe', 'Recipe');
        pvTable = initializeDataTable('#table_pv', 'Production Version');

        // Copy Recipe Group to PLNNR after data loaded (PLNNR = Recipe Group)
        setTimeout(function() {
            copyRecipeGroupToPlnnr();
        }, 1000);

        // Initialize checkbox relationships after DataTables are created
        // (Logic moved to document.ready above for better timing)

        // Initialize checkbox event handlers after DataTables are created
        initializeCheckboxHandlers();

        // Force apply checkbox styling pada akhir initialization
        setTimeout(function() {
            forceCheckboxStyling();
        }, 500);

        // Export All Tables Event Handler
        $('#exportAll').on('click', function(e) {
            e.preventDefault();

            // Validate Upload BOM data groups first
            const uploadBomValidation = validateUploadBomGroups();

            // Count checked items in each table using DataTables API (ALL PAGES)
            let checkedUploadBom = 0;
            uploadBomTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.upload-bom-checkbox');
                const headerId = String($row.data('header-id'));
                const isInValidGroup = uploadBomValidation.validGroups.includes(headerId);
                if (checkbox.is(':checked') && !checkbox.is(':disabled') && isInValidGroup) {
                    checkedUploadBom++;
                }
            });

            let checkedRecipe = 0;
            recipeTable.rows().every(function() {
                const checkbox = $(this.node()).find('.recipe-checkbox');
                if (checkbox.is(':checked') && !checkbox.is(':disabled')) {
                    checkedRecipe++;
                }
            });

            let checkedPv = 0;
            pvTable.rows().every(function() {
                const checkbox = $(this.node()).find('.pv-checkbox');
                if (checkbox.is(':checked') && !checkbox.is(':disabled')) {
                    checkedPv++;
                }
            });

            // Check if there are any checked rows to export
            if (checkedUploadBom === 0 && checkedRecipe === 0 && checkedPv === 0) {
                Swal.fire({
                    title: 'Tidak Ada Data Terpilih',
                    text: 'Silakan centang data yang ingin diekspor terlebih dahulu.',
                    icon: 'warning',
                    confirmButtonColor: '#ffc107',
                    timer: 3000,
                    showConfirmButton: false
                });
                return;
            }

            // Build confirmation message
            let confirmationMessage = `
                    <div style="text-align:left; padding: 4px 8px;">
                        <p style="margin-bottom:8px;">Pastikan sebelum export:</p>
                        <ul style="padding-left:18px; margin-bottom:12px; font-size:0.9em;">
                            <li>📋 Data <strong>List Recipe</strong> sudah benar</li>
                            <li>⚙️ <strong>Resource</strong> dan <strong>Recipe Group</strong> sudah sesuai</li>
                            <li>🏭 Data <strong>Production Version</strong> sudah sesuai</li>
                        </ul>
                        <div style="background:#f0f9f0; border-left:4px solid #028284; padding:8px 12px; border-radius:0 4px 4px 0; margin-bottom:10px;">
                            Upload BOM: <strong>${checkedUploadBom}</strong> &nbsp;|&nbsp;
                            Recipe: <strong>${checkedRecipe}</strong> &nbsp;|&nbsp;
                            PV: <strong>${checkedPv}</strong>
                        </div>`;

            if (uploadBomValidation.incompleteGroups.length > 0) {
                confirmationMessage += `<div style="background:#fff3cd; border:1px solid #ffeaa7; padding:8px 12px; border-radius:4px; font-size:0.85em;">
                        ⚠️ <strong>${uploadBomValidation.incompleteGroups.length}</strong> grup tidak lengkap akan diabaikan.
                    </div>`;
            }

            confirmationMessage += `</div>`;

            Swal.fire({
                title: 'Konfirmasi Export',
                html: confirmationMessage,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#028284',
                cancelButtonColor: '#6c757d',
                confirmButtonText: '<i class="fas fa-file-excel me-1"></i> Ya, Export',
                cancelButtonText: 'Batal',
                width: '520px'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tampilkan indikator loading segera agar tidak ada jeda tanpa respon
                    Swal.fire({
                        title: 'Memeriksa Data...',
                        html: 'Mohon tunggu, sedang memverifikasi status data BOM...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // CRITICAL: Regenerate Recipe Group secara async
                    // Ini memastikan recipe_group urut dari nomor terakhir di sap_recipe tanpa memblokir render UI
                    regenerateRecipeGroupForSelectedRows().then(() => {
                        // Copy Recipe Group yang baru ke PLNNR (PLNNR = Recipe Group)
                        copyRecipeGroupToPlnnr();

                    // Collect IDs for each export type before export
                    const uploadBomResult = collectSelectedIds('table_upload_bom');

                    // CRITICAL: Get header IDs that were actually exported from Upload BOM
                    const exportedHeaderIds = new Set();
                    uploadBomTable.rows().every(function() {
                        const $row = $(this.node());
                        const checkbox = $row.find('.upload-bom-checkbox');
                        const headerId = String(checkbox.data('header-id') || '');
                        const isInValidGroup = uploadBomValidation.validGroups.includes(headerId);

                        if (checkbox.is(':checked') && !checkbox.is(':disabled') && isInValidGroup && headerId) {
                            exportedHeaderIds.add(headerId);
                        }
                    });

                    console.log('Exported Upload BOM Header IDs:', Array.from(exportedHeaderIds));

                    // Check if any selected data is currently being processed by another IT user
                    const exportedHeaderArray = Array.from(exportedHeaderIds);


                    fetch("{{ url($url_menu) }}?action=check_export_conflict", {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                header_ids: exportedHeaderArray
                            })
                        })
                        .then(res => res.json())
                        .then(conflictData => {
                            if (conflictData.conflict) {
                                const names = conflictData.conflict_names.join(', ') +
                                    (conflictData.conflict_count > 3 ? `, dan ${conflictData.conflict_count - 3} BOM lainnya` : '');
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Sedang Diproses User Lain',
                                    html: `<div class="text-start">
                                        <p>Data BOM yang akan Anda download sedang dalam proses oleh <strong>${conflictData.processed_by}</strong>.</p>
                                        <p class="mt-2 text-muted small">Material: ${names}</p>
                                        <p class="mt-2">Mohon tunggu hingga proses selesai atau refresh halaman untuk melihat status terkini.</p>
                                    </div>`,
                                    confirmButtonColor: '#028284',
                                    confirmButtonText: 'Mengerti'
                                }).then(() => location.reload());
                                return;
                            }

                            // CRITICAL: Only collect Recipe/PV data that matches exported Upload BOM headers
                            const recipeResult = collectSelectedIdsFiltered('table_recipe', exportedHeaderIds);
                            const pvResult = collectSelectedIdsFiltered('table_pv', exportedHeaderIds);

                            const uploadBomIds = uploadBomResult.selectedIds;
                            const recipeIds = recipeResult.selectedIds;
                            const recipeData = recipeResult.recipeData; // Recipe data for sap_recipe insert
                            const pvIds = pvResult.selectedIds;

                            // Update counts to reflect filtered data
                            const actualRecipeCount = recipeIds.length;
                            const actualPvCount = pvIds.length;

                            // Show single loading indicator for ALL exports
                            Swal.fire({
                                title: 'Mengekspor Data...',
                                html: 'Mohon tunggu sementara kami menyiapkan file Excel Anda.<br><small>Sedang mengekspor: Upload BOM, Recipe, Production Version</small>',
                                icon: 'info',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                showConfirmButton: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            // Export all tables wrapped to one file
                            const exportsList = [{
                                    tableId: 'table_upload_bom',
                                    sheetName: 'Upload BOM',
                                    validationCallback: uploadBomValidationCallback,
                                    filterHeaderIds: null
                                },
                                {
                                    tableId: 'table_recipe',
                                    sheetName: 'Recipe',
                                    validationCallback: null,
                                    filterHeaderIds: exportedHeaderIds
                                },
                                {
                                    tableId: 'table_pv',
                                    sheetName: 'Production Version',
                                    validationCallback: null,
                                    filterHeaderIds: exportedHeaderIds
                                }
                            ];

                            // Generate dynamic filename (Pilihan A: Upload_BOM_YYYYMMDD_HHmmss)
                            const now = new Date();
                            const pad = num => String(num).padStart(2, '0');
                            const dateStr = now.getFullYear() + pad(now.getMonth() + 1) + pad(now.getDate());
                            const timeStr = pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds());
                            const exportFilename = `Upload_BOM_${dateStr}_${timeStr}`;

                            exportMultipleTablesToExcel(exportsList, exportFilename)
                                .then(exportResults => {
                                    // Update export status in database after exports complete
                                    const updatePromises = [];

                                    // Update Upload BOM status
                                    if (uploadBomIds.length > 0) {
                                        updatePromises.push(updateExportStatus('upload_bom', uploadBomIds, null));
                                    }

                                    // CRITICAL: Update Recipe status with recipe_data for sap_recipe insert
                                    if (recipeIds.length > 0) {
                                        updatePromises.push(updateExportStatus('recipe', recipeIds, recipeData));
                                    }

                                    // Update Production Version status (no additional data needed - PLNNR comes from Recipe)
                                    if (pvIds.length > 0) {
                                        updatePromises.push(updateExportStatus('production_version', pvIds, null));
                                    }

                                    // Wait for all database updates to complete
                                    Promise.allSettled(updatePromises).then(results => {
                                        results.forEach(result => {
                                            if (result.status === 'rejected') {
                                                console.error('Failed to update export status:', result.reason);
                                            }
                                        });

                                        // Success with OK button + auto-close
                                        Swal.fire({
                                            icon: 'success',
                                            title: 'Ekspor Berhasil!',
                                            html: `File <strong>${exportFilename}.xlsx</strong> telah diunduh.`,
                                            confirmButtonColor: '#028284',
                                            confirmButtonText: 'OK',
                                            showConfirmButton: true,
                                            timer: 3000,
                                            timerProgressBar: true,
                                            allowOutsideClick: false
                                        }).then(() => {
                                            location.reload();
                                        });
                                    });
                                })
                                .catch(error => {
                                    console.error('Export error:', error);
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Ekspor Gagal',
                                        text: 'Terjadi kesalahan saat mengekspor data: ' + error.message,
                                        confirmButtonColor: '#028284'
                                    });
                                });
                        })
                        .catch(err => {
                            console.error('Conflict check error:', err);
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal Memeriksa Status',
                                text: 'Terjadi kesalahan saat memeriksa status data. Silakan coba lagi.',
                                confirmButtonColor: '#028284'
                            });
                        });
                    }); // end regenerateRecipeGroupForSelectedRows().then()
                } // end if (result.isConfirmed)
            }); // end Swal.fire Konfirmasi Export .then()
        }); // end #exportAll click

        // Select All functionality for Upload BOM - Master control
        $('#selectAll_upload_bom').on('click', function() {
            const isChecked = $(this).is(':checked');

            // ✅ OPTIMIZED: Batch process without triggering change event for each checkbox
            // Step 1: Collect ALL materials that will be affected
            const affectedMaterials = new Set();

            if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                // First pass: Check ALL Upload BOM checkboxes (ALL PAGES)
                uploadBomTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        $checkbox.prop('checked', isChecked);

                        // Collect material for cascade logic
                        if (isChecked) {
                            const material = $checkbox.data('material');
                            const headerId = $checkbox.data('header-id');
                            if (material && headerId) {
                                affectedMaterials.add(`${headerId}_${material}`);
                            }
                        }
                    }
                });

                // Step 2: Cascade to Recipe & PV based on collected materials
                if (isChecked) {
                    // Check ALL Recipe items with matching materials (ALL PAGES)
                    if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                        recipeTable.rows().every(function() {
                            const $checkbox = $(this.node()).find('.recipe-checkbox');
                            if ($checkbox.length && !$checkbox.is(':disabled')) {
                                const headerId = $checkbox.data('header-id');
                                const material = $checkbox.data('original-material');
                                const key = `${headerId}_${material}`;

                                if (affectedMaterials.has(key)) {
                                    $checkbox.prop('checked', true);
                                    $checkbox.addClass('locked-checkbox');
                                    $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                                }
                            }
                        });
                    }

                    // Check ALL PV items with matching materials (ALL PAGES)
                    if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                        pvTable.rows().every(function() {
                            const $checkbox = $(this.node()).find('.pv-checkbox');
                            if ($checkbox.length && !$checkbox.is(':disabled')) {
                                const headerId = $checkbox.data('header-id');
                                const material = $checkbox.data('original-material');
                                const key = `${headerId}_${material}`;

                                if (affectedMaterials.has(key)) {
                                    $checkbox.prop('checked', true);
                                    $checkbox.addClass('locked-checkbox');
                                    $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                                }
                            }
                        });
                    }
                } else {
                    // Uncheck ALL Recipe & PV items (ALL PAGES)
                    if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                        recipeTable.rows().every(function() {
                            const $checkbox = $(this.node()).find('.recipe-checkbox');
                            if ($checkbox.length && !$checkbox.is(':disabled')) {
                                $checkbox.prop('checked', false);
                                $checkbox.removeClass('locked-checkbox');
                                $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM terkait terchecklist');
                            }
                        });
                    }

                    if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                        pvTable.rows().every(function() {
                            const $checkbox = $(this.node()).find('.pv-checkbox');
                            if ($checkbox.length && !$checkbox.is(':disabled')) {
                                $checkbox.prop('checked', false);
                                $checkbox.removeClass('locked-checkbox');
                                $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM terkait terchecklist');
                            }
                        });
                    }
                }
            }

            // Step 3: Update UI states (once at the end)
            setTimeout(() => {
                updateSelectAllState('recipe', 'recipe-checkbox');
                updateSelectAllState('pv', 'pv-checkbox');
                updateRowBackgroundColors();
                updateSelectedCountBadge();
                forceCheckboxStyling();
            }, 100);
        });

        // Select All functionality for Recipe - DISABLED (controlled by Upload BOM validation)
        $('#selectAll_recipe').on('click', function(e) {
            e.preventDefault();
            $(this).prop('checked', false);

            // Show message that Recipe selection is controlled by Upload BOM validation
            Swal.fire({
                title: 'Recipe Belum Dapat Dipilih',
                text: 'Pemilihan Recipe akan aktif setelah semua data valid di tabel Upload BOM terchecklist.',
                icon: 'info',
                confirmButtonColor: '#ffc107',
                timer: 3000
            });
            return false;
        });

        // Select All functionality for PV - DISABLED (controlled by Upload BOM validation)
        $('#selectAll_pv').on('click', function(e) {
            e.preventDefault();
            $(this).prop('checked', false);

            // Show message that PV selection is controlled by Upload BOM validation
            Swal.fire({
                title: 'Production Version Belum Dapat Dipilih',
                text: 'Pemilihan Production Version akan aktif setelah semua data valid di tabel Upload BOM terchecklist.',
                icon: 'info',
                confirmButtonColor: '#ffc107',
                timer: 3000
            });
            return false;
        });

        // Individual checkbox change handlers with relationship updates
        $(document).on('change', '.upload-bom-checkbox', function() {
            // Skip processing if checkbox is disabled
            if ($(this).is(':disabled')) {
                return;
            }

            const currentHeaderId = $(this).data('header-id');
            const currentMaterial = $(this).data('material');
            const isChecked = $(this).is(':checked');

            // AUTO-SELECT ALL IN GROUP: If one checkbox is checked, check all in same group
            // ✅ FIX: Use DataTables API to access ALL rows (including hidden pages)
            if (isChecked && currentHeaderId && currentMaterial) {
                // Auto-check all enabled checkboxes with EXACT same header ID AND material (ALL PAGES)
                if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                    uploadBomTable.rows().every(function() {
                        const $row = $(this.node());
                        const $checkbox = $row.find('.upload-bom-checkbox');
                        if ($checkbox.length &&
                            $checkbox.data('header-id') === currentHeaderId &&
                            $checkbox.data('material') === currentMaterial &&
                            !$checkbox.is(':disabled')) {
                            $checkbox.prop('checked', true);
                        }
                    });
                }
            } else if (!isChecked && currentHeaderId && currentMaterial) {
                // If unchecked, uncheck all in same group (ALL PAGES)
                if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                    uploadBomTable.rows().every(function() {
                        const $row = $(this.node());
                        const $checkbox = $row.find('.upload-bom-checkbox');
                        if ($checkbox.length &&
                            $checkbox.data('header-id') === currentHeaderId &&
                            $checkbox.data('material') === currentMaterial &&
                            !$checkbox.is(':disabled')) {
                            $checkbox.prop('checked', false);
                        }
                    });
                }
            }

            // Auto-check logic: if all valid checkboxes with same header ID AND material are checked,
            // auto-check related Recipe and PV items with EXACT same header ID AND material
            if (currentHeaderId && currentMaterial) {
                // ✅ FIX: Count ALL rows using DataTables API (not just visible)
                let totalSameHeader = 0;
                let checkedSameHeader = 0;

                if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                    uploadBomTable.rows().every(function() {
                        const $row = $(this.node());
                        const $checkbox = $row.find('.upload-bom-checkbox');
                        if ($checkbox.length &&
                            $checkbox.data('header-id') === currentHeaderId &&
                            $checkbox.data('material') === currentMaterial &&
                            !$checkbox.is(':disabled')) {
                            totalSameHeader++;
                            if ($checkbox.is(':checked')) {
                                checkedSameHeader++;
                            }
                        }
                    });
                }

                const allSameHeaderChecked = totalSameHeader > 0 && checkedSameHeader === totalSameHeader;

                // Auto-check Recipe and PV with EXACT same header ID AND material (ALL PAGES)
                if (allSameHeaderChecked) {
                    // ✅ FIX: Check Recipe items using DataTables API
                    if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                        recipeTable.rows().every(function() {
                            const $row = $(this.node());
                            const $checkbox = $row.find('.recipe-checkbox');
                            if ($checkbox.length &&
                                $checkbox.data('header-id') === currentHeaderId &&
                                $checkbox.data('original-material') === currentMaterial &&
                                !$checkbox.is(':disabled') &&
                                !$checkbox.is(':checked')) {
                                $checkbox.prop('checked', true);
                            }
                        });
                    }

                    // ✅ FIX: Check PV items using DataTables API
                    if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                        pvTable.rows().every(function() {
                            const $row = $(this.node());
                            const $checkbox = $row.find('.pv-checkbox');
                            if ($checkbox.length &&
                                $checkbox.data('header-id') === currentHeaderId &&
                                $checkbox.data('original-material') === currentMaterial &&
                                !$checkbox.is(':disabled') &&
                                !$checkbox.is(':checked')) {
                                $checkbox.prop('checked', true);
                            }
                        });
                    }
                } else {
                    // ✅ FIX: Uncheck Recipe items using DataTables API
                    if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                        recipeTable.rows().every(function() {
                            const $row = $(this.node());
                            const $checkbox = $row.find('.recipe-checkbox');
                            if ($checkbox.length &&
                                $checkbox.data('header-id') === currentHeaderId &&
                                $checkbox.data('original-material') === currentMaterial &&
                                !$checkbox.is(':disabled') &&
                                $checkbox.is(':checked')) {
                                $checkbox.prop('checked', false);
                            }
                        });
                    }

                    // ✅ FIX: Uncheck PV items using DataTables API
                    if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                        pvTable.rows().every(function() {
                            const $row = $(this.node());
                            const $checkbox = $row.find('.pv-checkbox');
                            if ($checkbox.length &&
                                $checkbox.data('header-id') === currentHeaderId &&
                                $checkbox.data('original-material') === currentMaterial &&
                                !$checkbox.is(':disabled') &&
                                $checkbox.is(':checked')) {
                                $checkbox.prop('checked', false);
                            }
                        });
                    }
                }
            }

            updateSelectAllState('upload_bom', 'upload-bom-checkbox');

            // Check if ALL valid Upload BOM checkboxes are now checked
            // ✅ FIX: Use DataTables API to count ALL rows (not just visible)
            let totalValidUploadBom = 0;
            let checkedValidUploadBom = 0;

            if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                uploadBomTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        totalValidUploadBom++;
                        if ($checkbox.is(':checked')) {
                            checkedValidUploadBom++;
                        }
                    }
                });
            }

            const allValidUploadBomChecked = (totalValidUploadBom > 0 && checkedValidUploadBom === totalValidUploadBom);

            // Update Recipe and PV checkboxes based on whether ALL valid Upload BOM items are checked
            if (allValidUploadBomChecked) {
                // All valid Upload BOM items are checked - enable and check all Recipe and PV items
                // ✅ FIX: Use DataTables API for ALL pages
                if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                    recipeTable.rows().every(function() {
                        const $checkbox = $(this.node()).find('.recipe-checkbox');
                        if ($checkbox.length && !$checkbox.is(':disabled')) {
                            $checkbox.prop('checked', true);
                            $checkbox.addClass('locked-checkbox');
                            $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                        }
                    });
                }

                if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                    pvTable.rows().every(function() {
                        const $checkbox = $(this.node()).find('.pv-checkbox');
                        if ($checkbox.length && !$checkbox.is(':disabled')) {
                            $checkbox.prop('checked', true);
                            $checkbox.addClass('locked-checkbox');
                            $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                        }
                    });
                }
            } else {
                // Not all valid Upload BOM items are checked - validate each item
                // ✅ FIX: Use DataTables API for Recipe table
                if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                    recipeTable.rows().every(function() {
                        const $checkbox = $(this.node()).find('.recipe-checkbox');
                        if ($checkbox.length && !$checkbox.is(':disabled')) {
                            const recipeHeaderId = $checkbox.data('header-id');
                            const recipeMaterial = $checkbox.data('original-material');

                            // Count related Upload BOM using DataTables API
                            let relatedTotal = 0;
                            let relatedChecked = 0;
                            if (uploadBomTable) {
                                uploadBomTable.rows().every(function() {
                                    const $ubCheckbox = $(this.node()).find('.upload-bom-checkbox');
                                    if ($ubCheckbox.length &&
                                        $ubCheckbox.data('header-id') === recipeHeaderId &&
                                        $ubCheckbox.data('material') === recipeMaterial &&
                                        !$ubCheckbox.is(':disabled')) {
                                        relatedTotal++;
                                        if ($ubCheckbox.is(':checked')) {
                                            relatedChecked++;
                                        }
                                    }
                                });
                            }

                            if (relatedTotal === 0 || relatedChecked < relatedTotal) {
                                $checkbox.removeClass('locked-checkbox');
                                $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM terkait terchecklist');
                            }
                        }
                    });
                }

                // ✅ FIX: Use DataTables API for PV table
                if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                    pvTable.rows().every(function() {
                        const $checkbox = $(this.node()).find('.pv-checkbox');
                        if ($checkbox.length && !$checkbox.is(':disabled')) {
                            const pvHeaderId = $checkbox.data('header-id');
                            const pvMaterial = $checkbox.data('original-material');

                            // Count related Upload BOM using DataTables API
                            let relatedTotal = 0;
                            let relatedChecked = 0;
                            if (uploadBomTable) {
                                uploadBomTable.rows().every(function() {
                                    const $ubCheckbox = $(this.node()).find('.upload-bom-checkbox');
                                    if ($ubCheckbox.length &&
                                        $ubCheckbox.data('header-id') === pvHeaderId &&
                                        $ubCheckbox.data('material') === pvMaterial &&
                                        !$ubCheckbox.is(':disabled')) {
                                        relatedTotal++;
                                        if ($ubCheckbox.is(':checked')) {
                                            relatedChecked++;
                                        }
                                    }
                                });
                            }

                            if (relatedTotal === 0 || relatedChecked < relatedTotal) {
                                $checkbox.removeClass('locked-checkbox');
                                $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM terkait terchecklist');
                            }
                        }
                    });
                }
            }


            // Update select all states for related tables
            updateSelectAllState('recipe', 'recipe-checkbox');
            updateSelectAllState('pv', 'pv-checkbox');

            // Update row background colors after checkbox changes
            updateRowBackgroundColors();

            // Update selected count badge
            updateSelectedCountBadge();

            // Re-apply checkbox styling setelah perubahan
            setTimeout(() => {
                forceCheckboxStyling();
            }, 100);
        });

        // LOCKED: Recipe checkboxes cannot be changed manually - they follow Upload BOM validation
        $(document).on('click', '.recipe-checkbox', function(e) {
            // Check if all valid Upload BOM items are checked
            // ✅ FIX: Use DataTables API to count ALL rows
            let totalValidUploadBom = 0;
            let checkedValidUploadBom = 0;

            if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                uploadBomTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        totalValidUploadBom++;
                        if ($checkbox.is(':checked')) {
                            checkedValidUploadBom++;
                        }
                    }
                });
            }

            const allValidUploadBomChecked = (totalValidUploadBom > 0 && checkedValidUploadBom === totalValidUploadBom);

            // If not all Upload BOM are checked, prevent Recipe changes and show message
            if (!allValidUploadBomChecked) {
                e.preventDefault();
                $(this).prop('checked', false);

                Swal.fire({
                    title: 'Recipe Belum Dapat Dipilih',
                    text: 'Silakan checklist semua data valid di tabel Upload BOM terlebih dahulu sebelum memilih Recipe.',
                    icon: 'warning',
                    confirmButtonColor: '#ffc107',
                    timer: 3000
                });
                return false;
            }

            updateSelectAllState('recipe', 'recipe-checkbox');
            updateSelectedCountBadge();
        });

        // LOCKED: PV checkboxes cannot be changed manually - they follow Upload BOM validation
        $(document).on('click', '.pv-checkbox', function(e) {
            // Check if all valid Upload BOM items are checked
            // ✅ FIX: Use DataTables API to count ALL rows
            let totalValidUploadBom = 0;
            let checkedValidUploadBom = 0;

            if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
                uploadBomTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        totalValidUploadBom++;
                        if ($checkbox.is(':checked')) {
                            checkedValidUploadBom++;
                        }
                    }
                });
            }

            const allValidUploadBomChecked = (totalValidUploadBom > 0 && checkedValidUploadBom === totalValidUploadBom);

            // If not all Upload BOM are checked, prevent PV changes and show message
            if (!allValidUploadBomChecked) {
                e.preventDefault();
                $(this).prop('checked', false);

                Swal.fire({
                    title: 'Production Version Belum Dapat Dipilih',
                    text: 'Silakan checklist semua data valid di tabel Upload BOM terlebih dahulu sebelum memilih Production Version.',
                    icon: 'warning',
                    confirmButtonColor: '#ffc107',
                    timer: 3000
                });
                return false;
            }

            updateSelectAllState('pv', 'pv-checkbox');
            updateSelectedCountBadge();
        });

        // ✅ BARU: Auto checklist di trdbom ketika buka trdbom
        setTimeout(function() {
            const selectAllUploadBom = $('#selectAll_upload_bom');
            if (selectAllUploadBom.length && !selectAllUploadBom.is(':checked')) {
                selectAllUploadBom[0].click();
            }
        }, 800);
    });


    // Function to update selected count badge
    function updateSelectedCountBadge() {
        // Validate Upload BOM groups first
        const validation = validateUploadBomGroups();

        // ✅ FIX: Use DataTables API to count ALL checked items (not just visible)
        let checkedUploadBom = 0;
        let checkedRecipe = 0;
        let checkedPv = 0;

        // Count Upload BOM (all checked + enabled rows, regardless of group validity)
        if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
            uploadBomTable.rows().every(function() {
                const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                if ($checkbox.length && $checkbox.is(':checked') && !$checkbox.is(':disabled')) {
                    checkedUploadBom++;
                }
            });
        }

        // Count Recipe
        if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
            recipeTable.rows().every(function() {
                const $checkbox = $(this.node()).find('.recipe-checkbox');
                if ($checkbox.length && $checkbox.is(':checked') && !$checkbox.is(':disabled')) {
                    checkedRecipe++;
                }
            });
        }

        // Count PV
        if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
            pvTable.rows().every(function() {
                const $checkbox = $(this.node()).find('.pv-checkbox');
                if ($checkbox.length && $checkbox.is(':checked') && !$checkbox.is(':disabled')) {
                    checkedPv++;
                }
            });
        }

        const totalSelected = checkedUploadBom + checkedRecipe + checkedPv;

        // Update badge
        $('#selectedCount').text(totalSelected);

        // Update info text with validation warnings
        if (totalSelected === 0) {
            let infoText = '<i class="fas fa-info-circle"></i> Tidak ada data';
            if (validation.incompleteGroups.length > 0) {
                infoText += ` <span class="text-warning"><i class="fas fa-exclamation-triangle"></i> ${validation.incompleteGroups.length} grup tidak lengkap</span>`;
            }
            $('#selectionInfo').html(infoText);
            $('#exportAll').prop('disabled', true);
        } else {
            let infoText = `<i class="fas fa-check-circle text-success"></i> Terpilih: Upload BOM (${checkedUploadBom}), Recipe (${checkedRecipe}), PV (${checkedPv})`;
            if (validation.incompleteGroups.length > 0) {
                infoText += ` <span class="text-warning"><br><i class="fas fa-exclamation-triangle"></i> ${validation.incompleteGroups.length} grup Upload BOM tidak lengkap</span>`;
            }
            $('#selectionInfo').html(infoText);
            $('#exportAll').prop('disabled', false);
        }
    }

    // Function to update row background colors based on checkbox status and group validation
    function updateRowBackgroundColors() {
        // First, validate groups to identify incomplete groups
        const validation = validateUploadBomGroups();

        // Apply alternating group colors for Upload BOM table
        applyAlternatingGroupColors('table_upload_bom', 'header-id');

        // Update Upload BOM table row colors
        $('#table_upload_bom tbody tr').each(function() {
            const $row = $(this);
            const $checkbox = $row.find('.upload-bom-checkbox');
            const canSelect = $row.data('can-select');
            const isProcessing = $row.data('is-processing') === true || $row.data('is-processing') === 'true';
            const headerId = String($row.data('header-id')); // Convert to string for consistency
            const isInIncompleteGroup = validation.incompleteGroups.some(g => String(g.headerId) === headerId);

            // Check if checkbox is disabled (either by canSelect or by JavaScript disable logic)
            const isDisabled = $checkbox.is(':disabled') || canSelect === false || canSelect === 'false';

            // Remove specific background classes (keep group colors)
            $row.removeClass('row-disabled row-unchecked row-checked row-incomplete-group');

            if (isProcessing) {
                $row.addClass('row-unchecked');
            } else if (isDisabled) {
                // Row is disabled (any reason) - Red background
                $row.addClass('row-disabled');
            } else if (isInIncompleteGroup) {
                // Incomplete group - warning yellow background with stripe
                $row.addClass('row-incomplete-group');

                // Add tooltip to inform user about incomplete group
                const groupInfo = validation.incompleteGroups.find(g => String(g.headerId) === headerId);
                const tooltipText = `Grup tidak lengkap! Header ID: ${headerId} - ${groupInfo.checked}/${groupInfo.enabled} tercentang. Semua baris dalam grup harus dicentang atau dikosongkan untuk dapat diexport.`;
                $row.attr('title', tooltipText);
                $checkbox.attr('title', tooltipText);
            } else if ($checkbox.is(':checked')) {
                // Row is checked and valid - Keep group color
                $row.addClass('row-checked');
            } else {
                // Row is unchecked but valid - Keep group color
                $row.addClass('row-unchecked');
            }
        });

        // Apply alternating group colors for Recipe table
        applyAlternatingGroupColors('table_recipe', 'header-id');

        // Update Recipe table row colors (follow Upload BOM status)
        $('#table_recipe tbody tr').each(function() {
            const $row = $(this);
            const $checkbox = $row.find('.recipe-checkbox');
            const isProcessing = $row.data('is-processing') === true || $row.data('is-processing') === 'true';

            // Remove specific background classes (keep group colors)
            $row.removeClass('row-disabled row-unchecked row-checked');

            if (isProcessing) {
                $row.addClass('row-unchecked');
            } else if ($checkbox.is(':disabled')) {
                // Row is disabled - Red background
                $row.addClass('row-disabled');
            } else if ($checkbox.is(':checked')) {
                // Row is checked - Keep group color
                $row.addClass('row-checked');
            } else {
                // Row is unchecked but valid - Keep group color
                $row.addClass('row-unchecked');
            }
        });

        // Apply alternating group colors for Production Version table
        applyAlternatingGroupColors('table_pv', 'header-id');

        // Update PV table row colors
        $('#table_pv tbody tr').each(function() {
            const $row = $(this);
            const $checkbox = $row.find('.pv-checkbox');
            const isProcessing = $row.data('is-processing') === true || $row.data('is-processing') === 'true';

            // Remove specific background classes (keep group colors)
            $row.removeClass('row-disabled row-unchecked row-checked');

            if (isProcessing) {
                $row.addClass('row-unchecked');
            } else if ($checkbox.is(':disabled')) {
                // Row is disabled - Red background
                $row.addClass('row-disabled');
            } else if ($checkbox.is(':checked')) {
                // Row is checked - Keep group color
                $row.addClass('row-checked');
            } else {
                // Row is unchecked but valid - Keep group color
                $row.addClass('row-unchecked');
            }
        });
    }

    // Function to apply alternating group colors (light/dark) per group
    function applyAlternatingGroupColors(tableId, groupAttribute) {
        const groups = {};
        let groupIndex = 0;

        // First pass: identify unique groups in order
        $(`#${tableId} tbody tr`).each(function() {
            const groupId = String($(this).data(groupAttribute));

            if (!groups[groupId]) {
                groups[groupId] = groupIndex++;
            }
        });

        // Second pass: apply alternating colors
        $(`#${tableId} tbody tr`).each(function() {
            const $row = $(this);
            const groupId = String($row.data(groupAttribute));
            const groupNum = groups[groupId];

            // Remove previous group color classes
            $row.removeClass('row-group-light row-group-dark');

            // Apply alternating group color (even = light, odd = dark)
            if (groupNum % 2 === 0) {
                $row.addClass('row-group-light');
            } else {
                $row.addClass('row-group-dark');
            }
        });
    }

    // Function to initialize checkbox handlers
    function initializeCheckboxHandlers() {
        // Update initial state of select all checkboxes
        updateSelectAllState('upload_bom', 'upload-bom-checkbox');
        updateSelectAllState('recipe', 'recipe-checkbox');
        updateSelectAllState('pv', 'pv-checkbox');

        // ✅ FIX: Check if ALL valid Upload BOM items are initially checked - use DataTables API
        let totalValidUploadBom = 0;
        let checkedValidUploadBom = 0;

        if (uploadBomTable && $.fn.DataTable.isDataTable('#table_upload_bom')) {
            uploadBomTable.rows().every(function() {
                const $checkbox = $(this.node()).find('.upload-bom-checkbox');
                if ($checkbox.length && !$checkbox.is(':disabled')) {
                    totalValidUploadBom++;
                    if ($checkbox.is(':checked')) {
                        checkedValidUploadBom++;
                    }
                }
            });
        }

        const allValidUploadBomChecked = (totalValidUploadBom > 0 && checkedValidUploadBom === totalValidUploadBom);

        // Set initial state for Recipe and PV based on Upload BOM validation
        // ✅ FIX: Use DataTables API
        if (allValidUploadBomChecked) {
            // All valid Upload BOM items are checked - enable Recipe and PV
            if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                recipeTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.recipe-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        $checkbox.prop('checked', true);
                        $checkbox.addClass('locked-checkbox');
                        $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                    }
                });
            }

            if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                pvTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.pv-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        $checkbox.prop('checked', true);
                        $checkbox.addClass('locked-checkbox');
                        $checkbox.attr('title', 'Terkunci - Semua Upload BOM valid sudah terchecklist');
                    }
                });
            }
        } else {
            // Not all valid Upload BOM items are checked - disable Recipe and PV
            if (recipeTable && $.fn.DataTable.isDataTable('#table_recipe')) {
                recipeTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.recipe-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        $checkbox.prop('checked', false);
                        $checkbox.removeClass('locked-checkbox');
                        $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM valid terchecklist');
                    }
                });
            }

            if (pvTable && $.fn.DataTable.isDataTable('#table_pv')) {
                pvTable.rows().every(function() {
                    const $checkbox = $(this.node()).find('.pv-checkbox');
                    if ($checkbox.length && !$checkbox.is(':disabled')) {
                        $checkbox.prop('checked', false);
                        $checkbox.removeClass('locked-checkbox');
                        $checkbox.attr('title', 'Akan aktif setelah semua Upload BOM valid terchecklist');
                    }
                });
            }
        }

        // Update select all states after initialization
        updateSelectAllState('recipe', 'recipe-checkbox');
        updateSelectAllState('pv', 'pv-checkbox');

        // Initialize row background colors
        updateRowBackgroundColors();

        // Initialize selected count badge
        updateSelectedCountBadge();
    }

    // Function to update Select All checkbox state
    function updateSelectAllState(tableType, checkboxClass) {
        // ✅ FIX: Use DataTables API to count ALL rows (not just visible)
        const tableMap = {
            'upload_bom': uploadBomTable,
            'recipe': recipeTable,
            'pv': pvTable
        };

        const table = tableMap[tableType];
        let totalCheckboxes = 0;
        let checkedCheckboxes = 0;

        if (table && $.fn.DataTable.isDataTable(`#table_${tableType}`)) {
            table.rows().every(function() {
                const $checkbox = $(this.node()).find(`.${checkboxClass}`);
                if ($checkbox.length && !$checkbox.is(':disabled')) {
                    totalCheckboxes++;
                    if ($checkbox.is(':checked')) {
                        checkedCheckboxes++;
                    }
                }
            });
        }

        const selectAllCheckbox = $(`#selectAll_${tableType}`);

        if (checkedCheckboxes === 0) {
            selectAllCheckbox.prop('indeterminate', false);
            selectAllCheckbox.prop('checked', false);
        } else if (checkedCheckboxes === totalCheckboxes) {
            selectAllCheckbox.prop('indeterminate', false);
            selectAllCheckbox.prop('checked', true);
        } else {
            selectAllCheckbox.prop('indeterminate', true);
        }
    }

    // Function to validate Upload BOM groups (trs_bom_h_id validation)
    function validateUploadBomGroups() {
        const groups = {};
        const validGroups = [];
        const incompleteGroups = [];

        // ✅ FIX: Use DataTables API to iterate ALL rows (including hidden pages)
        uploadBomTable.rows().every(function() {
            const $row = $(this.node());
            const headerId = String($row.data('header-id')); // Convert to string for consistency
            const checkbox = $row.find('.upload-bom-checkbox');
            const material = checkbox.data('material'); // Get material for unique identification
            const isDisabled = checkbox.is(':disabled');
            const isChecked = checkbox.is(':checked');

            // Create unique group key using both header_id and material
            const groupKey = `${headerId}_${material}`;

            if (!groups[groupKey]) {
                groups[groupKey] = {
                    headerId: headerId,
                    material: material,
                    groupKey: groupKey,
                    total: 0,
                    enabled: 0,
                    checked: 0,
                    unchecked: 0,
                    disabled: 0
                };
            }

            groups[groupKey].total++;

            if (isDisabled) {
                groups[groupKey].disabled++;
            } else {
                groups[groupKey].enabled++;
                if (isChecked) {
                    groups[groupKey].checked++;
                } else {
                    groups[groupKey].unchecked++;
                }
            }
        });

        // Validate each group
        for (const groupKey in groups) {
            const group = groups[groupKey];

            // Skip groups that are entirely disabled (all rows disabled)
            if (group.enabled === 0) {
                continue;
            }

            // Group is valid if ALL enabled rows are checked OR ALL enabled rows are unchecked
            const allEnabledChecked = (group.enabled > 0 && group.checked === group.enabled && group.unchecked === 0);
            const allEnabledUnchecked = (group.enabled > 0 && group.unchecked === group.enabled && group.checked === 0);

            if (allEnabledChecked) {
                // Store header_id for backward compatibility (not groupKey)
                validGroups.push(group.headerId);
            } else if (!allEnabledUnchecked) {
                incompleteGroups.push(group);
            }
        }

        return {
            isValid: incompleteGroups.length === 0,
            validGroups: validGroups,
            incompleteGroups: incompleteGroups
        };
    }

    // Validation callback function for Upload BOM (group validation)
    // This function will be passed to exportTableToExcel() from component
    function uploadBomValidationCallback(rows, config, tableId) {
        // Get valid groups from validateUploadBomGroups()
        const uploadBomValidation = validateUploadBomGroups();
        const validGroups = uploadBomValidation.validGroups;

        if (!validGroups || validGroups.length === 0) {
            return {
                rows: [],
                exportedRowCount: 0,
                groupBorders: []
            };
        }

        // Filter rows to only include those from valid groups
        const validRows = [];
        const groupBorders = []; // Track group boundaries for borders
        let skippedRowCount = 0;
        let currentGroup = null;
        let groupStartRow = 0;

        // Use DataTables API to iterate ALL rows (including hidden pages)
        uploadBomTable.rows().every(function() {
            const $row = $(this.node());
            const checkbox = $row.find('.upload-bom-checkbox');

            // Only include checked and enabled rows
            if (checkbox.is(':checked') && !checkbox.is(':disabled')) {
                const headerId = String($row.data('header-id')); // Convert to string for consistency

                // Check if this row belongs to a valid group
                if (validGroups.includes(headerId)) {
                    // Track group changes for borders
                    if (currentGroup !== headerId) {
                        // Save previous group border info
                        if (currentGroup !== null && groupStartRow < validRows.length) {
                            groupBorders.push({
                                startRow: groupStartRow + 2, // +2 because Excel is 1-indexed and has header row
                                endRow: validRows.length + 1 // +1 for header row
                            });
                        }

                        // Start new group
                        currentGroup = headerId;
                        groupStartRow = validRows.length;
                    }

                    const row = [];
                    let adjustedIndex = 0;

                    $row.find('td').each(function(index) {
                        // Skip checkbox column (index 0) AND columns with export-skip class (e.g., Keterangan column)
                        if (index > 0 && !$(this).hasClass('export-skip')) {
                            let cellText = $(this).text().trim();

                            // Format cell value based on column type - use adjustedIndex to match config
                            if (config.specialColumns && config.specialColumns[adjustedIndex]) {
                                const specialType = config.specialColumns[adjustedIndex];

                                if (specialType === 'valid_from') {
                                    cellText = cellText.replace(/'/g, ''); // Remove quotes
                                }

                                if (specialType === 'component_qty') {
                                    const numValue = parseFloat(cellText);
                                    if (!isNaN(numValue)) {
                                        cellText = numValue % 1 === 0 ? numValue.toString() : numValue.toString();
                                    }
                                }
                            }

                            row.push(cellText);
                            adjustedIndex++;
                        }
                    });

                    validRows.push(row);
                } else {
                    skippedRowCount++;
                }
            }
        });

        // Add border for last group
        if (currentGroup !== null && groupStartRow < validRows.length) {
            groupBorders.push({
                startRow: groupStartRow + 2, // +2 because Excel is 1-indexed and has header row
                endRow: validRows.length + 1 // +1 for header row
            });
        }

        // Show additional info if rows were skipped
        if (skippedRowCount > 0 && validRows.length > 0) {
            setTimeout(() => {
                Swal.fire({
                    icon: 'info',
                    title: 'Export dengan Validasi',
                    text: `${validRows.length} data diekspor, ${skippedRowCount} data diabaikan karena grup tidak lengkap`,
                    timer: 3000,
                    showConfirmButton: false
                });
            }, 2500);
        }

        return {
            rows: validRows,
            exportedRowCount: validRows.length,
            groupBorders: groupBorders
        };
    }

    // Function to update export status in database
    function updateExportStatus(exportType, selectedIds, additionalData = null) {
        if (!selectedIds || selectedIds.length === 0) {
            return Promise.resolve();
        }

        const requestData = {
            action: 'update_export_status',
            export_type: exportType,
            selected_ids: selectedIds
        };

        // CRITICAL: Include recipe_data for Recipe export to save recipe_group to sap_recipe
        if (exportType === 'recipe' && additionalData && additionalData.length > 0) {
            requestData.recipe_data = additionalData;
        }

        return $.ajax({
            url: "{{ url($url_menu) }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: requestData,
            timeout: 30000 // 30 second timeout
        }).done(function(response) {
            // Success - status updated in database
            console.log('Export status updated successfully:', response);
        }).fail(function(xhr, status, error) {
            console.error('Export status update failed:', status);
            console.error('DEBUG: Error:', error);
            console.error('DEBUG: XHR Response:', xhr.responseText);
            console.error('Failed to update export status:', error);

            // Show error notification (non-blocking)
            Swal.fire({
                icon: 'warning',
                title: 'Peringatan',
                text: 'Data berhasil diexport, namun gagal mengupdate status di database.',
                timer: 3000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        });
    }

    // Function to collect selected IDs for export status update
    // For Recipe: also collect recipe_group and other data needed for sap_recipe insert
    function collectSelectedIds(tableId) {
        const selectedIds = [];
        const recipeData = []; // Store recipe data for sap_recipe insert

        if (tableId === 'table_upload_bom') {
            // Validate groups first
            const validation = validateUploadBomGroups();

            // Use DataTables API to iterate ALL rows (including hidden pages)
            uploadBomTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.upload-bom-checkbox');

                // Get data attributes from checkbox
                const headerId = String(checkbox.data('header-id') || '');
                const detailId = checkbox.data('detail-id') || '';

                const isInValidGroup = validation.validGroups.includes(headerId);
                const isChecked = checkbox.is(':checked');
                const isDisabled = checkbox.is(':disabled');

                // Only collect IDs from checked rows in valid groups
                if (isChecked && !isDisabled && isInValidGroup && detailId && detailId !== '') {
                    const numericId = parseInt(detailId);
                    if (!isNaN(numericId) && numericId > 0) {
                        selectedIds.push(numericId);
                    }
                }
            });
        } else if (tableId === 'table_recipe') {
            // Use DataTables API to iterate ALL rows (including hidden pages)
            recipeTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.recipe-checkbox');

                // Get data attributes from checkbox
                const recipeId = checkbox.data('recipe-id') || '';
                const headerId = checkbox.data('header-id') || ''; // CRITICAL: Get header ID for sap_recipe tracking

                const isChecked = checkbox.is(':checked');
                const isDisabled = checkbox.is(':disabled');

                if (isChecked && !isDisabled && recipeId && recipeId !== '') {
                    const numericId = parseInt(recipeId);
                    if (!isNaN(numericId) && numericId > 0) {
                        selectedIds.push(numericId);

                        // CRITICAL: Collect recipe data from table cells for sap_recipe insert
                        const $cells = $row.find('td');
                        recipeData.push({
                            detail_id: numericId,
                            header_id: headerId, // CRITICAL: Track header ID for cleanup when reset
                            recipe_group: $cells.eq(4).text().trim(), // Column 4: Recipe Group (already generated)
                            recipe_counter: $cells.eq(7).text().trim(), // Column 7: Recipe Counter
                            operation_no: $cells.eq(8).text().trim(), // Column 8: Operation No
                            phase: $cells.eq(9).text().trim(), // Column 9: Phase
                            control_key: $cells.eq(11).text().trim(), // Column 11: Control Key
                            base_qty: $cells.eq(13).text().trim(), // Column 13: Base QTY
                            charge: $cells.eq(15).text().trim(), // Column 15: Charge
                            uom_charge: $cells.eq(16).text().trim(), // Column 16: UOM charge
                            operation: $cells.eq(17).text().trim(), // Column 17: Operation
                            setup: $cells.eq(18).text().trim(), // Column 18: Setup
                            uom_setup: $cells.eq(19).text().trim(), // Column 19: UoM Setup
                            dlbc: $cells.eq(20).text().trim(), // Column 20: DLBC
                            uom_dlbc: $cells.eq(21).text().trim(), // Column 21: UoM DLBC
                            depa: $cells.eq(22).text().trim(), // Column 22: DEPA
                            uom_depa: $cells.eq(23).text().trim(), // Column 23: UoM DEPA
                            repm: $cells.eq(24).text().trim(), // Column 24: REPM
                            uom_repm: $cells.eq(25).text().trim(), // Column 25: UoM REPM
                            ovhd: $cells.eq(26).text().trim(), // Column 26: OVHD
                            uom_ovhd: $cells.eq(27).text().trim() // Column 27: UoM OVHD
                        });
                    }
                }
            });
        } else if (tableId === 'table_pv') {
            // Use DataTables API to iterate ALL rows (including hidden pages)
            pvTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.pv-checkbox');

                // Get data attributes from checkbox
                const pvId = checkbox.data('pv-id') || '';

                const isChecked = checkbox.is(':checked');
                const isDisabled = checkbox.is(':disabled');

                if (isChecked && !isDisabled && pvId && pvId !== '') {
                    const numericId = parseInt(pvId);
                    if (!isNaN(numericId) && numericId > 0) {
                        selectedIds.push(numericId);
                    }
                }
            });
        }

        // Return both selectedIds and recipeData
        return {
            selectedIds: selectedIds,
            recipeData: recipeData.length > 0 ? recipeData : null
        };
    }

    /**
     * CRITICAL: Collect selected IDs filtered by exported header IDs from Upload BOM
     * This ensures Recipe and PV only export rows matching the Upload BOM groups that were actually exported
     *
     * @param {string} tableId - Table identifier ('table_recipe' or 'table_pv')
     * @param {Set} exportedHeaderIds - Set of header IDs that were exported from Upload BOM
     * @return {Object} {selectedIds: Array, recipeData: Array|null}
     */
    function collectSelectedIdsFiltered(tableId, exportedHeaderIds) {
        const selectedIds = [];
        const recipeData = [];

        if (tableId === 'table_recipe') {
            // Use DataTables API to iterate ALL rows (including hidden pages)
            recipeTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.recipe-checkbox');

                // Get data attributes from checkbox
                const recipeId = checkbox.data('recipe-id') || '';
                const headerId = String(checkbox.data('header-id') || '');

                const isChecked = checkbox.is(':checked');
                const isDisabled = checkbox.is(':disabled');

                // CRITICAL: Only collect if header ID matches exported Upload BOM headers
                if (isChecked && !isDisabled && recipeId && recipeId !== '' && exportedHeaderIds.has(headerId)) {
                    const numericId = parseInt(recipeId);
                    if (!isNaN(numericId) && numericId > 0) {
                        selectedIds.push(numericId);

                        // Collect recipe data from table cells for sap_recipe insert
                        const $cells = $row.find('td');
                        recipeData.push({
                            detail_id: numericId,
                            header_id: headerId,
                            recipe_group: $cells.eq(4).text().trim(),
                            recipe_counter: $cells.eq(7).text().trim(),
                            operation_no: $cells.eq(8).text().trim(),
                            phase: $cells.eq(9).text().trim(),
                            control_key: $cells.eq(11).text().trim(),
                            base_qty: $cells.eq(13).text().trim(),
                            charge: $cells.eq(15).text().trim(),
                            uom_charge: $cells.eq(16).text().trim(),
                            operation: $cells.eq(17).text().trim(),
                            setup: $cells.eq(18).text().trim(),
                            uom_setup: $cells.eq(19).text().trim(),
                            dlbc: $cells.eq(20).text().trim(),
                            uom_dlbc: $cells.eq(21).text().trim(),
                            depa: $cells.eq(22).text().trim(),
                            uom_depa: $cells.eq(23).text().trim(),
                            repm: $cells.eq(24).text().trim(),
                            uom_repm: $cells.eq(25).text().trim(),
                            ovhd: $cells.eq(26).text().trim(),
                            uom_ovhd: $cells.eq(27).text().trim()
                        });
                    }
                }
            });
        } else if (tableId === 'table_pv') {
            // Use DataTables API to iterate ALL rows (including hidden pages)
            pvTable.rows().every(function() {
                const $row = $(this.node());
                const checkbox = $row.find('.pv-checkbox');

                // Get data attributes from checkbox
                const pvId = checkbox.data('pv-id') || '';
                const headerId = String(checkbox.data('header-id') || '');

                const isChecked = checkbox.is(':checked');
                const isDisabled = checkbox.is(':disabled');

                // CRITICAL: Only collect if header ID matches exported Upload BOM headers
                if (isChecked && !isDisabled && pvId && pvId !== '' && exportedHeaderIds.has(headerId)) {
                    const numericId = parseInt(pvId);
                    if (!isNaN(numericId) && numericId > 0) {
                        selectedIds.push(numericId);
                    }
                }
            });
        }

        console.log(`${tableId} filtered IDs:`, selectedIds.length, 'matching exported headers');

        return {
            selectedIds: selectedIds,
            recipeData: recipeData.length > 0 ? recipeData : null
        };
    }

    /**
     * Copy Recipe Group to PLNNR
     * PLNNR = Recipe Group (same value, matching by header_id + material)
     * Called after data tables are loaded or after Recipe Group regeneration
     */
    function copyRecipeGroupToPlnnr() {
        if (!recipeTable || !pvTable) {
            console.log('Tables not initialized yet');
            return;
        }

        // Build mapping: header_id|material => recipe_group
        const recipeMapping = {};

        recipeTable.rows().every(function() {
            const $row = $(this.node());
            const $checkbox = $row.find('.recipe-checkbox');
            const headerId = $checkbox.data('header-id') || '';
            const material = $checkbox.data('original-material') || '';
            const $cells = $row.find('td');
            const recipeGroup = $cells.eq(4).text().trim(); // Column 4 = Recipe Group

            if (headerId && material && recipeGroup) {
                const key = headerId + '|' + material;
                recipeMapping[key] = recipeGroup;
            }
        });

        console.log('Recipe Group mapping built:', Object.keys(recipeMapping).length, 'entries');

        // Update PLNNR di tabel Production Version
        let updatedCount = 0;
        pvTable.rows().every(function() {
            const $row = $(this.node());
            const $checkbox = $row.find('.pv-checkbox');
            const headerId = $checkbox.data('header-id') || '';
            const material = $checkbox.data('original-material') || '';

            if (headerId && material) {
                const key = headerId + '|' + material;
                const recipeGroup = recipeMapping[key];

                if (recipeGroup) {
                    const $cells = $row.find('td');
                    const $plnnrCell = $cells.eq(8); // Column 8 = PLNNR
                    $plnnrCell.text(recipeGroup); // PLNNR = Recipe Group (sama persis!)
                    updatedCount++;
                }
            }
        });

        console.log('PLNNR updated:', updatedCount, 'rows');
    }

    /**
     * Regenerate Recipe Group untuk baris yang tercentang, urut sesuai urutan checkbox
     * FITUR: Recipe Group harus urut dari nomor terakhir di sap_recipe
     */
    function regenerateRecipeGroupForSelectedRows() {
        // Cek jika tidak ada recipe rows yang dicentang, langsung resolve
        const $checkedRecipeBoxes = $('#table_recipe tbody .recipe-checkbox:checked:not(:disabled)');
        if ($checkedRecipeBoxes.length === 0) {
            return $.Deferred().resolve().promise();
        }

        // Get last group from server (Asynchronous)
        return $.ajax({
            url: "{{ url($url_menu) }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                action: 'get_last_recipe_group'
            }
        }).done(function(response) {
            let counter = response.next_counter || 1;
            // Prefix dari server
            const serverPrefix = response.last_group ? response.last_group.charAt(0) : 'A';
            // Set nomor yang sudah terpakai di DB (dari server) — untuk skip jika ada lompatan
            const occupiedSet = new Set(response.occupied_groups || []);

            // Helper: generate next available recipe group (skip occupied, auto-rollover prefix)
            let currentPrefix = serverPrefix;
            function nextAvailableGroup() {
                let candidate;
                do {
                    // Guard: jika counter melebihi 9999999, rollover ke prefix berikutnya (A→B→C...)
                    if (counter > 9999999) {
                        currentPrefix = String.fromCharCode(currentPrefix.charCodeAt(0) + 1);
                        counter = 1;
                        console.log('Prefix rollover to:', currentPrefix);
                    }
                    candidate = currentPrefix + String(counter).padStart(7, '0');
                    counter++;
                } while (occupiedSet.has(candidate));
                occupiedSet.add(candidate); // Mark as used so next call also skips it
                return candidate;
            }

            console.log('Starting Recipe Group counter from:', response.next_counter, '(Last group:', response.last_group, ', prefix:', serverPrefix, ', occupied:', occupiedSet.size, 'entries)');

            // Loop through CHECKED recipe rows IN ORDER
            const $table = $('#table_recipe');

            // Get all checked checkboxes in DOM order (bukan DataTable order)
            $table.find('tbody tr').each(function() {
                const $row = $(this);
                const $checkbox = $row.find('.recipe-checkbox');

                if ($checkbox.is(':checked') && !$checkbox.is(':disabled')) {
                    const $recipeGroupCell = $row.find('td').eq(4);
                    const currentGroup = $recipeGroupCell.text().trim();

                    const newRecipeGroup = nextAvailableGroup();
                    $recipeGroupCell.text(newRecipeGroup);

                    console.log('Updated row recipe_group from', currentGroup, 'to:', newRecipeGroup);
                }
            });

            console.log('Recipe Group regeneration complete. Final counter:', counter);
        }).fail(function(xhr, status, error) {
            console.error('Failed to get last recipe group:', error);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal mendapatkan nomor recipe group terakhir dari server.',
                confirmButtonText: 'OK'
            });
        });
    }

    // BARU: Update Status SAP Handler with Progress Bar
    $('#btnUpdateStatusSAP').on('click', function() {
        const $btn = $(this);
        const originalHtml = $btn.html();

        // Disable button and show loading
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');

        // Show loading alert with progress bar
        Swal.fire({
            title: 'Memproses Update Status SAP',
            html: `
                    <div class="mb-3">
                        Sedang melakukan pengecekan ulang data dari SAP...<br>
                        <strong>Mohon tunggu, proses ini mungkin memakan waktu.</strong>
                    </div>
                    <div class="progress" style="height: 30px; background-color: #e0e0e0; border-radius: 5px; overflow: hidden;">
                        <div id="sapUpdateProgressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar"
                             style="width: 0%; background: linear-gradient(90deg, #028284 0%, #81E6D9 100%);
                                    font-weight: bold; font-size: 16px; line-height: 30px;"
                             aria-valuenow="0"
                             aria-valuemin="0"
                             aria-valuemax="100">
                            0%
                        </div>
                    </div>
                `,
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                // Simulate progress animation while waiting for response
                let progress = 0;
                const progressBar = document.getElementById('sapUpdateProgressBar');

                const progressInterval = setInterval(() => {
                    if (progress < 95) {
                        progress += Math.random() * 10;
                        if (progress > 95) progress = 95;

                        progressBar.style.width = progress + '%';
                        progressBar.setAttribute('aria-valuenow', progress);
                        progressBar.textContent = Math.floor(progress) + '%';
                    }
                }, 500);

                // Store interval ID for cleanup
                window.sapProgressInterval = progressInterval;
            }
        });

        $.ajax({
            url: window.location.href,
            type: 'POST',
            timeout: 600000,
            data: {
                action: 'update_sap_status',
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Update SAP Status Response:', response);

                // Clear progress interval
                if (window.sapProgressInterval) {
                    clearInterval(window.sapProgressInterval);
                }

                // Complete progress to 100%
                const progressBar = document.getElementById('sapUpdateProgressBar');
                if (progressBar) {
                    progressBar.style.width = '100%';
                    progressBar.setAttribute('aria-valuenow', 100);
                    progressBar.textContent = '100%';
                }

                // Wait a moment to show 100% before showing result
                setTimeout(() => {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Update Berhasil',
                            html: `
                                    <div class="text-start">
                                        <p><strong>Ringkasan Update:</strong></p>
                                        <ul>
                                            <li>Material FG/SFG diupdate: <strong>${response.summary.material_updated || 0}</strong></li>
                                            <li>Component Material diupdate: <strong>${response.summary.component_updated || 0}</strong></li>
                                            <li>Total records diproses: <strong>${response.summary.total_processed || 0}</strong></li>
                                        </ul>
                                        ${response.summary.errors && response.summary.errors.length > 0 ?
                                            '<p class="text-warning mb-0"><small>Beberapa error terjadi saat update. Cek console log untuk detail.</small></p>' : ''}
                                    </div>
                                `,
                            confirmButtonText: 'OK',
                            allowOutsideClick: false
                        }).then((result) => {
                            if (result.isConfirmed) {
                                // Reload halaman untuk menampilkan data terbaru
                                window.location.reload();
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Update Gagal',
                            text: response.message || 'Terjadi kesalahan saat update status SAP.',
                            confirmButtonText: 'OK'
                        });

                        // Re-enable button
                        $btn.prop('disabled', false).html(originalHtml);
                    }
                }, 300);
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                console.error('Status:', status);
                console.error('Response:', xhr.responseText);

                if (window.sapProgressInterval) {
                    clearInterval(window.sapProgressInterval);
                }

                let errorMessage = 'Gagal melakukan update status SAP. Silakan coba lagi.';

                if (status === 'timeout') {
                    errorMessage = 'Request timeout. Proses memakan waktu terlalu lama. Silakan coba lagi atau hubungi IT.';
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.message) {
                            errorMessage = response.message;
                        }
                    } catch (e) {
                        errorMessage = 'Server error: ' + xhr.status;
                    }
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: errorMessage,
                    confirmButtonText: 'OK'
                });

                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // ✅ BARU: Sudah Upload Handler - Preview dulu, baru konfirmasi update
    $('#btnSudahUpload').on('click', function() {
        const $btn = $(this);
        const originalHtml = $btn.html();

        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Mengecek...');

        Swal.fire({
            title: 'Mengecek SAP...',
            html: 'Sedang mengambil status BOM dari SAP.<br><small>Mohon tunggu sebentar.</small>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: {
                action: 'preview_sap_upload_status',
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                Swal.close();
                $btn.prop('disabled', false).html(originalHtml);

                if (!response.success) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: response.message || 'Terjadi kesalahan.',
                        confirmButtonColor: '#d33'
                    });
                    return;
                }

                if (!response.items || response.items.length === 0) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Informasi',
                        text: response.message || 'Tidak ada data yang sedang diproses.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                // Build preview rows
                let rows = '';
                response.items.forEach(function(item) {
                    let badge = '';
                    if (item.status === 'found') {
                        badge = '<span class="badge" style="background-color: #dcfce7; color: #166534; font-weight: 600; border: 1px solid #86efac; padding: 5px 12px; border-radius: 50rem; font-size: 0.75rem;"><i class="fas fa-check-circle me-1"></i>Ditemukan</span>';
                    } else if (item.status === 'not_found') {
                        badge = '<span class="badge" style="background-color: #fee2e2; color: #991b1b; font-weight: 600; border: 1px solid #fca5a5; padding: 5px 12px; border-radius: 50rem; font-size: 0.75rem;"><i class="fas fa-times-circle me-1"></i>Belum Ada</span>';
                    } else {
                        badge = '<span class="badge" style="background-color: #f1f5f9; color: #475569; font-weight: 600; border: 1px solid #cbd5e1; padding: 5px 12px; border-radius: 50rem; font-size: 0.75rem;"><i class="fas fa-exclamation-triangle me-1"></i>Error Koneksi</span>';
                    }
                    rows += `<tr>
                            <td class="text-start align-middle ps-3" style="font-family: var(--bs-font-monospace, monospace); font-weight: 600; color: #1e293b; font-size: 0.825rem;">${item.material_fg_sfg}</td>
                            <td class="align-middle text-secondary fw-semibold" style="font-size: 0.8rem;">${item.bom_type}</td>
                            <td class="align-middle text-center fw-bold text-dark" style="font-size: 0.8rem;"><span class="badge bg-light text-dark border px-2 py-1">${item.alt_bom_no || '-'}</span></td>
                            <td class="align-middle text-center">${badge}</td>
                        </tr>`;
                });

                const foundCount = response.found_count ?? 0;
                const notFoundCount = response.not_found_count ?? 0;
                const errorKoneksiCount = response.items.filter(i => i.status === 'error_koneksi').length;

                const hasConnectionError = errorKoneksiCount > 0;
                const confirmBtnText = hasConnectionError ? '<i class="fas fa-sync-alt me-1"></i> Cek Ulang SAP' : '<i class="fas fa-save me-1"></i> Update BOM';
                const confirmBtnColor = hasConnectionError ? '#0284c7' : (notFoundCount > 0 ? '#dc2626' : '#16a34a');

                const summaryHtml = `
                        <div class="d-flex gap-2 mb-3 justify-content-center flex-wrap">
                            <div class="px-3 py-2 rounded-3 d-flex align-items-center gap-2" style="background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;">
                                <i class="fas fa-check-circle text-success fs-6"></i>
                                <span class="fw-bold fs-6">${foundCount}</span>
                                <span class="small fw-semibold">Ditemukan</span>
                            </div>
                            <div class="px-3 py-2 rounded-3 d-flex align-items-center gap-2" style="background-color: #fef2f2; border: 1px solid #fecaca; color: #991b1b;">
                                <i class="fas fa-times-circle text-danger fs-6"></i>
                                <span class="fw-bold fs-6">${notFoundCount}</span>
                                <span class="small fw-semibold">Belum Ada di SAP</span>
                            </div>
                            ${errorKoneksiCount > 0 ? `
                            <div class="px-3 py-2 rounded-3 d-flex align-items-center gap-2" style="background-color: #f8fafc; border: 1px solid #cbd5e1; color: #475569;">
                                <i class="fas fa-exclamation-triangle text-secondary fs-6"></i>
                                <span class="fw-bold fs-6">${errorKoneksiCount}</span>
                                <span class="small fw-semibold">Error Koneksi</span>
                            </div>` : ''}
                        </div>

                        <div class="rounded-3 border mb-3 text-start" style="max-height: 260px; overflow-y: auto; background-color: #ffffff; border-color: #e2e8f0 !important; scrollbar-width: thin;">
                            <table class="table table-hover table-sm align-middle mb-0" style="font-size: 0.825rem;">
                                <thead style="position: sticky; top: 0; z-index: 10; background-color: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                                    <tr>
                                        <th class="py-2 ps-3 text-start text-uppercase text-muted fw-bold" style="font-size: 0.68rem; letter-spacing: 0.5px; background-color: #f8fafc;">Material Code</th>
                                        <th class="py-2 text-uppercase text-muted fw-bold" style="font-size: 0.68rem; letter-spacing: 0.5px; background-color: #f8fafc;">Tipe</th>
                                        <th class="py-2 text-center text-uppercase text-muted fw-bold" style="font-size: 0.68rem; letter-spacing: 0.5px; background-color: #f8fafc;">Alt BOM</th>
                                        <th class="py-2 text-center text-uppercase text-muted fw-bold" style="font-size: 0.68rem; letter-spacing: 0.5px; background-color: #f8fafc;">Status SAP</th>
                                    </tr>
                                </thead>
                                <tbody>${rows}</tbody>
                            </table>
                        </div>

                        ${hasConnectionError ? `
                        <div class="text-start d-flex align-items-center gap-3 mb-1" style="padding: 12px 16px; background-color: #fffbe6; border: 1px solid #ffe58f; border-left: 4px solid #faad14; color: #735c0f; font-size: 0.825rem; border-radius: 10px;">
                            <i class="fas fa-exclamation-triangle text-warning flex-shrink-0" style="font-size: 1.1rem;"></i>
                            <div style="line-height: 1.45;">
                                Kendala koneksi API SAP terdeteksi. Klik <strong>Cek Ulang SAP</strong> untuk memuat kembali status validasi.
                            </div>
                        </div>
                        ` : (notFoundCount > 0 ? `
                        <div class="text-start d-flex align-items-center gap-3 mb-1" style="padding: 12px 16px; background-color: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444; color: #991b1b; font-size: 0.825rem; border-radius: 10px;">
                            <i class="fas fa-exclamation-circle text-danger flex-shrink-0" style="font-size: 1.1rem;"></i>
                            <div style="line-height: 1.45;">
                                Terdapat <strong>${notFoundCount} material</strong> belum ada di SAP. Klik <strong>Update BOM</strong> untuk memperbarui status ke database.
                            </div>
                        </div>
                        ` : `
                        <div class="text-start d-flex align-items-center gap-3 mb-1" style="padding: 12px 16px; background-color: #f0f9ff; border: 1px solid #bae6fd; border-left: 4px solid #0284c7; color: #0369a1; font-size: 0.825rem; border-radius: 10px;">
                            <i class="fas fa-info-circle text-info flex-shrink-0" style="font-size: 1.1rem;"></i>
                            <div style="line-height: 1.45;">
                                Semua material ditemukan. Klik <strong>Update BOM</strong> untuk menyimpan perubahan status BOM ke database.
                            </div>
                        </div>
                        `)}`;

                Swal.fire({
                    title: '<div class="d-flex align-items-center justify-content-center gap-2" style="color: #0f172a; font-weight: 700; font-size: 1.15rem;"><i class="fas fa-search me-1" style="color:#028284;"></i> Validasi SAP</div>',
                    html: summaryHtml,
                    width: '640px',
                    showCancelButton: true,
                    confirmButtonColor: confirmBtnColor,
                    cancelButtonColor: '#64748b',
                    confirmButtonText: confirmBtnText,
                    cancelButtonText: '<i class="fas fa-times me-1"></i> Batal',
                    allowOutsideClick: false,
                    customClass: {
                        popup: 'rounded-4 shadow-lg border-0 p-3.5',
                        confirmButton: 'btn btn-sm px-3 py-1.5 fw-bold rounded-2 shadow-sm fs-7',
                        cancelButton: 'btn btn-sm px-3 py-1.5 fw-bold rounded-2 fs-7'
                    }
                }).then((result) => {
                    if (!result.isConfirmed) return;

                    if (hasConnectionError) {
                        // Revalidasi ulang dengan trigger tombol
                        setTimeout(() => {
                            $('#btnSudahUpload').click();
                        }, 100);
                        return;
                    }

                    $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');

                    Swal.fire({
                        title: 'Memproses...',
                        html: 'Sedang mengupdate status BOM.<br><small>Mohon tunggu sebentar.</small>',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: window.location.href,
                        type: 'POST',
                        data: {
                            action: 'confirm_sap_upload_status',
                            items: response.items,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(res) {
                            $btn.prop('disabled', false).html(originalHtml);
                            if (res.success) {
                                if (res.selesai === 0 && res.revert === 0) {
                                    Swal.fire({
                                        icon: 'info',
                                        title: 'Informasi',
                                        text: res.message,
                                        confirmButtonColor: '#028284'
                                    });
                                } else if (res.selesai > 0 && res.revert === 0) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Update Selesai',
                                        text: res.selesai + ' data berhasil diupdate ke Selesai.',
                                        confirmButtonColor: '#028284',
                                        timer: 4000,
                                        timerProgressBar: true
                                    }).then(() => location.reload());
                                } else if (res.selesai === 0 && res.revert > 0) {
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Update Selesai',
                                        text: res.revert + ' data dikembalikan ke Ready Upload.',
                                        confirmButtonColor: '#e67e22',
                                        timer: 4000,
                                        timerProgressBar: true
                                    }).then(() => location.reload());
                                } else {
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Update Selesai',
                                        text: res.selesai + ' Selesai, ' + res.revert + ' dikembalikan ke Ready Upload.',
                                        confirmButtonColor: '#e67e22',
                                        timer: 4000,
                                        timerProgressBar: true
                                    }).then(() => location.reload());
                                }
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: res.message || 'Terjadi kesalahan saat mengupdate.',
                                    confirmButtonColor: '#d33'
                                });
                            }
                        },
                        error: function(xhr) {
                            $btn.prop('disabled', false).html(originalHtml);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Gagal menghubungi server.',
                                confirmButtonColor: '#d33'
                            });
                        }
                    });
                });
            },
            error: function(xhr) {
                Swal.close();
                $btn.prop('disabled', false).html(originalHtml);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Gagal menghubungi server.',
                    confirmButtonColor: '#d33'
                });
            }
        });
    });

    // ✅ Logic Edit Material FG/SFG
    let typingTimerMaterial;
    let typingTimerComp;
    const doneTypingInterval = 800; // time in ms

    window.openEditMaterialModal = function(headerId, currentMaterial) {
        $('#edit_material_header_id').val(headerId);
        $('#edit_material_fg_sfg').val(currentMaterial);
        $('#material_fg_sfg_status').removeClass('text-success text-danger text-warning').html('');
        $('#btnSaveMaterial').prop('disabled', false);
        $('#editMaterialModal').modal('show');
    };

    $('#edit_material_fg_sfg').on('input', function() {
        clearTimeout(typingTimerMaterial);
        const materialCode = $(this).val();
        const $status = $('#material_fg_sfg_status');
        const $btnSave = $('#btnSaveMaterial');

        $status.removeClass('text-success text-danger text-warning').html('');

        if (materialCode) {
            $status.html('<i class="fas fa-spinner fa-spin text-info"></i> Mengecek ke SAP...');
            $btnSave.prop('disabled', true);

            typingTimerMaterial = setTimeout(function() {
                $.ajax({
                    url: window.location.href,
                    type: 'POST',
                    data: {
                        action: 'validate_material_sap',
                        material_code: materialCode,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.exists) {
                            if (response.deleted) {
                                $status.html('<i class="fas fa-exclamation-triangle"></i> Material ditemukan, namun berstatus DELETED (LVORM = X).').addClass('text-warning');
                                $btnSave.prop('disabled', false);
                            } else {
                                $status.html('<i class="fas fa-check-circle"></i> Material Valid di SAP.').addClass('text-success');
                                $btnSave.prop('disabled', false);
                            }
                        } else {
                            $status.html('<i class="fas fa-times-circle"></i> Material TIDAK ditemukan di SAP.').addClass('text-danger');
                            $btnSave.prop('disabled', true);
                        }
                    },
                    error: function() {
                        $status.html('<i class="fas fa-times-circle"></i> Gagal mengecek ke SAP.').addClass('text-danger');
                        $btnSave.prop('disabled', false); // Allow override if SAP API error
                    }
                });
            }, doneTypingInterval);
        } else {
            $btnSave.prop('disabled', false);
        }
    });

    $('#btnSaveMaterial').on('click', function() {
        const headerId = $('#edit_material_header_id').val();
        const material = $('#edit_material_fg_sfg').val();

        if (!material) {
            Swal.fire('Error', 'Material FG/SFG tidak boleh kosong', 'error');
            return;
        }

        const $btn = $(this);
        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');

        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: {
                action: 'update_material_header',
                trs_bom_h_id: headerId,
                material_fg_sfg: material,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    $('#editMaterialModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire('Error', response.message, 'error');
                    $btn.prop('disabled', false).html(originalHtml);
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Terjadi kesalahan saat menyimpan data', 'error');
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // ✅ Logic Edit Comp Material Code
    window.openEditCompModal = function(detailId, compCode, compDesc, uom) {
        $('#edit_comp_detail_id').val(detailId);
        $('#edit_comp_material_code').val(compCode);
        $('#edit_comp_desc').val(compDesc);
        $('#edit_comp_uom').val(uom);
        $('#comp_material_status').removeClass('text-success text-danger text-warning').html('');
        $('#btnSaveComp').prop('disabled', false);
        $('#editCompModal').modal('show');
    };

    $('#edit_comp_material_code').on('input', function() {
        clearTimeout(typingTimerComp);
        const materialCode = $(this).val();
        const $status = $('#comp_material_status');
        const $btnSave = $('#btnSaveComp');

        $status.removeClass('text-success text-danger text-warning').html('');
        $('#edit_comp_desc').val('');
        $('#edit_comp_uom').val('');

        if (materialCode) {
            $status.html('<i class="fas fa-spinner fa-spin text-info"></i> Mengecek ke SAP...');
            $btnSave.prop('disabled', true);

            typingTimerComp = setTimeout(function() {
                $.ajax({
                    url: window.location.href,
                    type: 'POST',
                    data: {
                        action: 'validate_comp_material_sap',
                        material_code: materialCode,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.exists) {
                            if (response.deleted) {
                                $status.html('<i class="fas fa-exclamation-triangle"></i> Material ditemukan, namun berstatus DELETED (LVORM = X).').addClass('text-warning');
                                $('#edit_comp_desc').val('-');
                                $('#edit_comp_uom').val('-');
                                $btnSave.prop('disabled', false);
                            } else {
                                $status.html('<i class="fas fa-check-circle"></i> Material Valid di SAP.').addClass('text-success');
                                $('#edit_comp_desc').val(response.comp_desc || '-');
                                $('#edit_comp_uom').val(response.comp_uom === 'ST' ? 'PC' : (response.comp_uom || '-'));
                                $btnSave.prop('disabled', false);
                            }
                        } else {
                            $status.html('<i class="fas fa-times-circle"></i> Material TIDAK ditemukan di SAP.').addClass('text-danger');
                            $('#edit_comp_desc').val('-');
                            $('#edit_comp_uom').val('-');
                            $btnSave.prop('disabled', true);
                        }
                    },
                    error: function() {
                        $status.html('<i class="fas fa-times-circle"></i> Gagal mengecek ke SAP.').addClass('text-danger');
                        $btnSave.prop('disabled', false); // Allow override if SAP API error
                    }
                });
            }, doneTypingInterval);
        } else {
            $btnSave.prop('disabled', false);
        }
    });

    $('#btnSaveComp').on('click', function() {
        const detailId = $('#edit_comp_detail_id').val();
        const compCode = $('#edit_comp_material_code').val();
        const compDesc = $('#edit_comp_desc').val();
        const uom = $('#edit_comp_uom').val();

        if (!compCode) {
            Swal.fire('Error', 'Component Material Code tidak boleh kosong', 'error');
            return;
        }

        const $btn = $(this);
        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');

        $.ajax({
            url: window.location.href,
            type: 'POST',
            data: {
                action: 'update_comp_material',
                trs_bom_d_id: detailId,
                comp_material_code: compCode,
                comp_desc: compDesc,
                uom: uom,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    $('#editCompModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        timer: 1500,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire('Error', response.message, 'error');
                    $btn.prop('disabled', false).html(originalHtml);
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Terjadi kesalahan saat menyimpan data', 'error');
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });
</script>

@include('components.export-excel')
@endpush