@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @if (empty($selected_detail_month))
        @include('layouts.navbars.auth.topnav', ['title' => ''])
    @endif
    <div class="container-fluid py-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header d-flex align-items-center justify-content-between py-2">
                <h6 class="mb-0"><i class="fas fa-filter me-2"></i>Filter Material</h6>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ url()->current() }}" id="material-filter-form">
                    {{-- Row 1: Material Type + Material --}}
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label for="filter-mtart" class="form-label mb-1">Material Type</label>
                            <select name="filter-mtart" id="filter-mtart" class="form-control select2">
                                <option value="%">-- Semua Tipe --</option>
                                @foreach ($materialTypes as $c)
                                    <option value="{{ $c->mtart }}"
                                        {{ request('filter-mtart', '%') == $c->mtart ? 'selected' : '' }}>
                                        {{ $c->mtart }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        @php
                            $selectedIds = $selectedMaterialCodes ?? [];
                            // Ambil pasangan matnr => maktx untuk yang terpilih (kalau belum ada di $materialList)
                            $selectedPairs = collect($selectedIds)->isNotEmpty()
                                ? DB::table('mst_material')->whereIn('matnr', $selectedIds)->pluck('maktx', 'matnr')
                                : collect();
                            $existingIds = collect($materialList)->pluck('matnr')->all();
                        @endphp

                        <div class="col-12 col-md-6">
                            <label for="material" class="form-label mb-1">Material</label>
                            <select name="filter-material[]" id="material" class="form-control select2" multiple>
                                {{-- opsi yang tampil di list sekarang --}}
                                @foreach ($materialList as $m)
                                    <option value="{{ $m->matnr }}"
                                        {{ in_array($m->matnr, $selectedMaterialCodes ?? []) ? 'selected' : '' }}>
                                        {{ $m->maktx }} ({{ $m->matnr }})
                                    </option>
                                @endforeach

                                {{-- fallback: pastikan pilihan lama tetap ada --}}
                                @foreach ($selectedIds as $code)
                                    @continue(in_array($code, $existingIds))
                                    <option value="{{ $code }}" selected>
                                        {{ $selectedPairs[$code] ?? $code }} ({{ $code }})
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block">Pilih satu atau lebih material.</small>
                        </div>
                    </div>

                    {{-- Row 2: MATKL (muncul hanya saat MTART = ZPCK) --}}
                    <div class="row g-3 mt-2">
                        <div class="col-12 col-md-6" id="matkl-wrapper" style="display:none;">
                            <label for="filter-matkl" class="form-label mb-1">Material Group</label>
                            <select name="filter-matkl" id="filter-matkl" class="form-control select2" disabled>
                                {{-- opsi akan diisi via AJAX --}}
                            </select>
                            <small class="text-muted d-block">Pilih grup untuk menampilkan material satu grup.</small>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <a href="{{ url()->current() }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-rotate-left me-1"></i> Reset
                        </a>
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-check me-1"></i> Terapkan
                        </button>
                    </div>
                </form>
            </div>
        </div>

        @if (isset($material_trend))
            <div class="card shadow-sm mb-4">
                <div class="card-header py-2 mt-2">
                    <h6 class="mb-0"><i class="fas fa-boxes-stacked me-2"></i>Material Terpilih</h6>
                </div>
                <div class="card-body">
                    @if (!empty($selectedMaterialCodes) && isset($materialList))
                        @php
                            $materials = $materialList->whereIn('matnr', $selectedMaterialCodes);
                        @endphp

                        @if ($materials->count() === 1)
                            @php $m = $materials->first(); @endphp
                            <div class="p-3 bg-light rounded d-flex align-items-center justify-content-between">
                                <div>
                                    <h5 class="mb-1 fw-bold">{{ $m->maktx }}</h5>
                                    <small class="text-muted">Kode: {{ $m->matnr }}</small>
                                </div>
                                <i class="fas fa-box-open fa-2x text-secondary"></i>
                            </div>
                        @else
                            <div class="d-flex flex-wrap gap-2">
                                @foreach ($materials as $index => $m)
                                    @php
                                        // Warna acak dari palet lembut (biar beda tiap material)
                                        $colors = [
                                            ['bg' => '#e3f2fd', 'text' => '#0d47a1'], // biru muda
                                            ['bg' => '#f1f8e9', 'text' => '#33691e'], // hijau muda
                                            ['bg' => '#fff3e0', 'text' => '#e65100'], // oranye muda
                                            ['bg' => '#fce4ec', 'text' => '#880e4f'], // pink muda
                                            ['bg' => '#ede7f6', 'text' => '#4a148c'], // ungu muda
                                        ];
                                        $color = $colors[$index % count($colors)];
                                    @endphp

                                    <span class="d-inline-flex align-items-center rounded-pill px-3 py-2 fw-semibold"
                                        style="background-color: {{ $color['bg'] }}; color: {{ $color['text'] }};">
                                        <i class="fas fa-box-open me-2"></i>
                                        {{ $m->maktx }}
                                        <small class="text-muted ms-2">({{ $m->matnr }})</small>
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    @else
                        <p class="text-muted mb-0">Tidak ada material yang dipilih.</p>
                    @endif
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header d-flex align-items-center justify-content-between py-2 mt-2">
                    <h6 class="mb-0"><i class="fas fa-table me-2"></i>Tren GR / GI / Stock</h6>
                    <div class="d-flex align-items-center gap-3 small">
                        <span class="badge bg-success-subtle text-success border">Dalam Target</span>
                        <span class="badge bg-danger-subtle text-danger border">Di luar Target</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <div class="table-freeze-wrapper">
                            <table class="table table-bordered table-sm mb-0 table-freeze-1 table-sticky-header">
                                <thead>
                                    <tr>
                                        <th class="text-start sticky-col"> </th>
                                        @foreach ($material_trend as $row)
                                            <th>{{ $row['month_name'] }}</th>
                                        @endforeach
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $hasMultiple =
                                            !empty($selectedMaterialCodes) && count($selectedMaterialCodes) > 1;
                                    @endphp
                                    {{-- Target Atas --}}
                                    <tr>
                                        <td class="text-start sticky-col"><strong>Target Atas</strong></td>
                                        @foreach ($material_trend as $row)
                                            <td class="text-end">{{ number_format($row['target_atas'], 2) }}%</td>
                                        @endforeach
                                        <td class="bg-light"></td>
                                    </tr>

                                    {{-- Pencapaian --}}
                                    <tr>
                                        <td class="text-start sticky-col"><strong>Pencapaian</strong></td>
                                        @foreach ($material_trend as $row)
                                            @php
                                                $out =
                                                    $row['pencapaian'] !== null &&
                                                    ($row['pencapaian'] < $row['target_bawah'] ||
                                                        $row['pencapaian'] > $row['target_atas']);
                                            @endphp
                                            <td
                                                class="text-end {{ $row['pencapaian'] === null ? 'text-muted' : ($out ? 'text-danger fw-semibold' : 'text-success fw-semibold') }}">
                                                {{ $row['pencapaian'] !== null ? number_format($row['pencapaian'], 2) . '%' : '-' }}
                                            </td>
                                        @endforeach
                                        <td class="bg-light"></td>
                                    </tr>

                                    {{-- Target Bawah --}}
                                    <tr>
                                        <td class="text-start sticky-col"><strong>Target Bawah</strong></td>
                                        @foreach ($material_trend as $row)
                                            <td class="text-end">{{ number_format($row['target_bawah'], 2) }}%</td>
                                        @endforeach
                                        <td class="bg-light"></td>
                                    </tr>

                                    {{-- ===== GR ===== --}}
                                    <tr>
                                        <td class="text-start sticky-col">
                                            @if ($hasMultiple)
                                                <button type="button" class="btn btn-link p-0 toggle-detail"
                                                    data-target=".gr-detail-row" aria-expanded="false">
                                                    <i class="bi bi-caret-right-fill me-1"></i>
                                                    <strong>Total GR (Kg)</strong>
                                                </button>
                                            @else
                                                <strong>Total GR (Kg)</strong>
                                            @endif
                                        </td>
                                        @php $sumGR = 0; @endphp
                                        @foreach ($material_trend as $row)
                                            @php $sumGR += $row['total_gr']; @endphp
                                            <td class="text-end fw-bold">{{ number_format($row['total_gr']) }}</td>
                                        @endforeach
                                        <td class="text-end fw-bold">{{ number_format($sumGR) }}</td>
                                    </tr>

                                    @if ($hasMultiple)
                                        @php
                                            // Index detail GR per bulan => (matnr => qty) + hitung total per material
                                            $grIndexByMonth = [];
                                            $grMetaByMat = []; // matnr => ['name' => ..., 'total' => float]

                                            foreach ($material_trend as $row) {
                                                $mkey = $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                $list = $detail_gr_by_month[$mkey] ?? [];
                                                $grIndexByMonth[$mkey] = collect($list)->keyBy('matnr');

                                                foreach ($list as $d) {
                                                    $matnr = $d['matnr'];
                                                    $name = $d['material_name'] ?? ($d['maktx'] ?? $matnr);
                                                    $qty = (float) ($d['qty'] ?? 0);

                                                    if (!isset($grMetaByMat[$matnr])) {
                                                        $grMetaByMat[$matnr] = [
                                                            'name' => trim($name) !== '' ? $name : $matnr,
                                                            'total' => 0.0,
                                                        ];
                                                    }
                                                    $grMetaByMat[$matnr]['total'] += $qty;
                                                }
                                            }

                                            // Urutkan desc berdasarkan total
                                            $orderedGrMatnrs = collect($grMetaByMat)
                                                ->sortByDesc(fn($v) => $v['total'])
                                                ->keys();
                                        @endphp

                                        @foreach ($orderedGrMatnrs as $matnr)
                                            @php $matName = $grMetaByMat[$matnr]['name']; @endphp
                                            <tr class="gr-detail-row d-none">
                                                <td class="text-start sticky-col bg-light-subtle">{{ $matName }}</td>
                                                @foreach ($material_trend as $row)
                                                    @php
                                                        $mkey =
                                                            $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                        $qty =
                                                            optional($grIndexByMonth[$mkey] ?? collect())->get($matnr)[
                                                                'qty'
                                                            ] ?? null;
                                                    @endphp
                                                    <td class="text-end">{{ $qty !== null ? number_format($qty) : '-' }}
                                                    </td>
                                                @endforeach
                                                <td class="bg-light"></td>
                                            </tr>
                                        @endforeach
                                    @endif

                                    {{-- ===== GI ===== --}}
                                    <tr>
                                        <td class="text-start sticky-col">
                                            @if ($hasMultiple)
                                                <button type="button" class="btn btn-link p-0 toggle-detail"
                                                    data-target=".gi-detail-row" aria-expanded="false">
                                                    <i class="bi bi-caret-right-fill me-1"></i>
                                                    <strong>Total GI (Kg)</strong>
                                                </button>
                                            @else
                                                <strong>Total GI (Kg)</strong>
                                            @endif
                                        </td>
                                        @php $sumGI = 0; @endphp
                                        @foreach ($material_trend as $row)
                                            @php $sumGI += $row['total_gi']; @endphp
                                            <td class="text-end fw-bold">{{ number_format($row['total_gi']) }}</td>
                                        @endforeach
                                        <td class="text-end fw-bold">{{ number_format($sumGI) }}</td>
                                    </tr>

                                    @if ($hasMultiple)
                                        @php
                                            $giIndexByMonth = [];
                                            $giMetaByMat = []; // matnr => ['name' => ..., 'total' => float]

                                            foreach ($material_trend as $row) {
                                                $mkey = $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                $list = $detail_gi_by_month[$mkey] ?? [];
                                                $giIndexByMonth[$mkey] = collect($list)->keyBy('matnr');

                                                foreach ($list as $d) {
                                                    $matnr = $d['matnr'];
                                                    $name = $d['material_name'] ?? ($d['maktx'] ?? $matnr);
                                                    $qty = (float) ($d['qty'] ?? 0);

                                                    if (!isset($giMetaByMat[$matnr])) {
                                                        $giMetaByMat[$matnr] = [
                                                            'name' => trim($name) !== '' ? $name : $matnr,
                                                            'total' => 0.0,
                                                        ];
                                                    }
                                                    $giMetaByMat[$matnr]['total'] += $qty;
                                                }
                                            }

                                            $orderedGiMatnrs = collect($giMetaByMat)
                                                ->sortByDesc(fn($v) => $v['total'])
                                                ->keys();
                                        @endphp

                                        @foreach ($orderedGiMatnrs as $matnr)
                                            @php $matName = $giMetaByMat[$matnr]['name']; @endphp
                                            <tr class="gi-detail-row d-none">
                                                <td class="text-start sticky-col bg-light-subtle">{{ $matName }}</td>
                                                @foreach ($material_trend as $row)
                                                    @php
                                                        $mkey =
                                                            $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                        $qty =
                                                            optional($giIndexByMonth[$mkey] ?? collect())->get($matnr)[
                                                                'qty'
                                                            ] ?? null;
                                                    @endphp
                                                    <td class="text-end">{{ $qty !== null ? number_format($qty) : '-' }}
                                                    </td>
                                                @endforeach
                                                <td class="bg-light"></td>
                                            </tr>
                                        @endforeach
                                    @endif

                                    {{-- ===== STOCK ===== --}}
                                    <tr>
                                        <td class="text-start sticky-col">
                                            @if ($hasMultiple)
                                                <button type="button" class="btn btn-link p-0 toggle-detail"
                                                    data-target=".stock-detail-row" aria-expanded="false">
                                                    <i class="bi bi-caret-right-fill me-1"></i>
                                                    <strong>Stock</strong>
                                                </button>
                                            @else
                                                <strong>Stock</strong>
                                            @endif
                                        </td>
                                        @php $sumStock = 0; @endphp
                                        @foreach ($material_trend as $row)
                                            @php $sumStock += $row['stock']; @endphp
                                            <td class="text-end">{{ number_format($row['stock'], 2) }}</td>
                                        @endforeach
                                        <td class="text-end fw-bold">{{ number_format($sumStock, 2) }}</td>
                                    </tr>

                                    @if ($hasMultiple)
                                        @php
                                            // Index detail Stock per bulan => (matnr => qty), kumpulkan nilai bulan terakhir
                                            $stockIndexByMonth = [];
                                            $stockLastByMat = []; // matnr => ['name'=>..., 'last'=>float]

                                            // Tentukan key bulan terakhir dari $material_trend
                                            $lastTrend = end($material_trend);
                                            $lastKey =
                                                $lastTrend['month_key'] ??
                                                ($lastTrend['month'] ?? $lastTrend['month_name']);
                                            reset($material_trend);

                                            foreach ($material_trend as $row) {
                                                $mkey = $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                $list = $detail_stock_by_month[$mkey] ?? [];
                                                $stockIndexByMonth[$mkey] = collect($list)->keyBy('matnr');

                                                if ($mkey === $lastKey) {
                                                    // Simpan nilai bulan terakhir untuk sorting
                                                    foreach ($list as $d) {
                                                        $matnr = $d['matnr'];
                                                        $name = $d['material_name'] ?? ($d['maktx'] ?? $matnr);
                                                        $qty = (float) ($d['qty'] ?? 0);
                                                        $stockLastByMat[$matnr] = [
                                                            'name' => trim($name) !== '' ? $name : $matnr,
                                                            'last' => $qty,
                                                        ];
                                                    }
                                                }
                                            }

                                            // Jika ada material yang tidak muncul di bulan terakhir, anggap 0
                                            // (opsional, supaya tetap tampil di bawah)
                                            $allMatnrsSeen = collect($stockIndexByMonth)
                                                ->flatMap(fn($c) => $c->keys())
                                                ->unique();
                                            foreach ($allMatnrsSeen as $matnr) {
                                                if (!isset($stockLastByMat[$matnr])) {
                                                    // cari nama dari salah satu bulan
                                                    $name = null;
                                                    foreach ($stockIndexByMonth as $c) {
                                                        $row = $c->get($matnr);
                                                        if ($row) {
                                                            $name = $row['material_name'] ?? ($row['maktx'] ?? $matnr);
                                                            break;
                                                        }
                                                    }
                                                    $stockLastByMat[$matnr] = [
                                                        'name' => trim($name ?? '') !== '' ? $name : $matnr,
                                                        'last' => 0.0,
                                                    ];
                                                }
                                            }

                                            // Urutkan desc berdasarkan nilai bulan terakhir
                                            $orderedStockMatnrs = collect($stockLastByMat)
                                                ->sortByDesc(fn($v) => $v['last'])
                                                ->keys();
                                        @endphp

                                        @foreach ($orderedStockMatnrs as $matnr)
                                            @php $matName = $stockLastByMat[$matnr]['name']; @endphp
                                            <tr class="stock-detail-row d-none">
                                                <td class="text-start sticky-col bg-light-subtle">{{ $matName }}</td>
                                                @foreach ($material_trend as $row)
                                                    @php
                                                        $mkey =
                                                            $row['month_key'] ?? ($row['month'] ?? $row['month_name']);
                                                        $qty =
                                                            optional($stockIndexByMonth[$mkey] ?? collect())->get(
                                                                $matnr,
                                                            )['qty'] ?? null;
                                                    @endphp
                                                    <td class="text-end">
                                                        {{ $qty !== null ? number_format($qty, 2) : '-' }}</td>
                                                @endforeach
                                                <td class="bg-light"></td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <small class="text-muted d-block mt-2">* Pencapaian hijau = dalam rentang target, merah = di luar
                        target.</small>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header py-2 mt-2">
                    <h6 class="mb-0"><i class="fas fa-chart-line me-2"></i>Visualisasi</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div id="chartPencapaian" class="chart-box"></div>
                        </div>
                        <div class="col-md-6">
                            <div id="chartGRGI" class="chart-box"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    @if (isset($material_trend))
        <script>
            const trendLabels = @json(array_column($material_trend, 'month_name'));
            const targetAtas = @json(array_column($material_trend, 'target_atas'));
            const targetBawah = @json(array_column($material_trend, 'target_bawah'));
            const pencapaian = @json(array_column($material_trend, 'pencapaian'));
            const totalGR = @json(array_column($material_trend, 'total_gr'));
            const totalGI = @json(array_column($material_trend, 'total_gi'));
            const stock = @json(array_column($material_trend, 'stock'));
            const monthKeys2 = @json($materialMonths); // contoh: ["202501","202502","202503","202504","202505","202506"]
            const labels2 = @json($availableLabels); // contoh: ["Jan","Feb","Mar","Apr","Mei","Jun"]
            const rows = @json($material_trend); // [{month:"202501", total_gr:..., total_gi:..., stock:...}, ...]

            // Index by YYYYMM
            const byMonth = Object.fromEntries(rows.map(r => [r.month, r]));

            // Ambil data sesuai bulan tersedia saja
            const totalGR2 = monthKeys2.map(k => byMonth[k]?.total_gr ?? 0);
            const totalGI2 = monthKeys2.map(k => byMonth[k]?.total_gi ?? 0);
            const stock2 = monthKeys2.map(k => byMonth[k]?.stock ?? 0)

            const materialName = `{{ $selectedMaterialName ?? 'Material' }}`;

            const maxAbs = Math.max(
                Math.abs(Math.min(...targetBawah)),
                Math.abs(Math.max(...targetAtas)),
                Math.abs(Math.min(...pencapaian)),
                Math.abs(Math.max(...pencapaian))
            );

            const chart1 = echarts.init(document.getElementById('chartPencapaian'));
            chart1.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Target Atas', 'Pencapaian', 'Target Bawah'],
                    top: 45,
                    left: 'center'
                },
                grid: {
                    top: 80,
                    left: '10%',
                    right: '5%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: trendLabels
                },
                yAxis: {
                    type: 'value',
                    min: -maxAbs, // bawah
                    max: maxAbs, // atas
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                color: ['#4472C4', '#ED7D31', '#70AD47'],
                series: [{
                        name: 'Target Atas',
                        type: 'line',
                        data: targetAtas
                    },
                    {
                        name: 'Pencapaian',
                        type: 'line',
                        data: pencapaian,
                        smooth: true
                    },
                    {
                        name: 'Target Bawah',
                        type: 'line',
                        data: targetBawah
                    }
                ]
            });

            const chart2 = echarts.init(document.getElementById('chartGRGI'));
            chart2.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Total GR (Kg)', 'Total GI (Kg)', 'Stock'],
                    top: 8,
                    left: 'center'
                },
                grid: {
                    top: 60,
                    left: '10%',
                    right: '5%',
                    bottom: '12%'
                },
                xAxis: {
                    type: 'category',
                    data: labels2,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'Kg'
                },
                color: ['#4472C4', '#ED7D31', '#70AD47'],
                series: [{
                        name: 'Total GR (Kg)',
                        type: 'line',
                        data: totalGR2,
                        symbolSize: 6,
                    },
                    {
                        name: 'Total GI (Kg)',
                        type: 'line',
                        data: totalGI2,
                        symbolSize: 6,
                    },
                    {
                        name: 'Stock',
                        type: 'line',
                        data: stock2,
                        symbolSize: 6,
                        lineStyle: {
                            type: 'dashed',
                            width: 8
                        }
                    }
                ]
            });
        </script>
    @endif
    <script>
        $(document).ready(function() {
            const $mtart = $('#filter-mtart');
            const $matkl = $('#filter-matkl'); // pastikan ada di Blade
            const $matklBox = $('#matkl-wrapper'); // wrapper kolom MATKL
            const $material = $('#material');
            const $form = $('#material-filter-form');

            const selectedMtart = @json(request('filter-mtart', '%'));
            const selectedMatkl = @json(request('filter-matkl'));

            let lastMaterialResults = [];

            // --- hydrate pilihan yang sudah terpilih (tetap tampil setelah reload)
            (function hydratePreselected() {
                const preselected = @json(collect($selectedMaterialCodes ?? [])->map(fn($id) => [
                            'id' => (string) $id,
                            'text' => ($selectedPairs[$id] ?? $id) . ' (' . $id . ')',
                        ]));

                const $el = $('#material');
                preselected.forEach(it => {
                    if ($el.find('option[value="' + it.id + '"]').length === 0) {
                        const opt = new Option(it.text, it.id, true, true);
                        $el.append(opt);
                    }
                });
                if (preselected.length) {
                    const ids = preselected.map(x => x.id);
                    const current = $el.val() || [];
                    $el.val(Array.from(new Set([...current, ...ids]))).trigger('change');
                }
            })();

            // --- init select2
            $mtart.select2({
                placeholder: 'Pilih Material Type',
                allowClear: true,
                width: '100%'
            });
            $matkl.select2({
                placeholder: '-- Pilih MATKL --',
                allowClear: true,
                width: '100%'
            });

            // --- helper UI
            function toggleMatkl(show) {
                if (show) {
                    $matklBox.show();
                    $matkl.prop('disabled', false).trigger('change.select2');
                } else {
                    $matklBox.hide();
                    // (biarkan nilai MATKL direset kalau perlu)
                    $matkl.val(null).trigger('change');
                    $matkl.prop('disabled', true);
                }
            }

            // ⚠️ Tidak menghapus pilihan material saat toggle enable/disable
            function setMaterialEnabled(enable) {
                $material.prop('disabled', !enable).trigger('change.select2');
                // DULU: if (!enable) $material.val(null).trigger('change');  <-- DIHAPUS
            }

            // --- (AJAX MATKL) sama seperti sebelumnya
            async function loadMatklOptions(mtart, preselect = null) {
                if (mtart !== 'ZPCK') return;
                const url = `{{ route('ajax.matkl.by.mtart') }}?mtart=${encodeURIComponent(mtart)}`;
                const rows = await (await fetch(url)).json();
                const cur = preselect || '';

                $matkl.empty().append(new Option('-- Pilih MATKL --', '', !cur, !cur));
                rows.forEach(r => {
                    const val = (r.matkl || '').toString().trim();
                    const sel = (val === cur);
                    $matkl.append(new Option(val, val, sel, sel));
                });
                $matkl.trigger('change.select2');
            }

            // --- Select2 Material (AJAX) — TANPA CACHE untuk menghindari data lama
            function initMaterialSelect2() {
                // Destroy dulu jika sudah ada
                if ($material.hasClass('select2-hidden-accessible')) {
                    $material.select2('destroy');
                }

                // Clear options kecuali yang selected (agar tidak hilang saat reinit)
                const selectedVals = $material.val() || [];
                $material.find('option:not(:selected)').remove();

                // Init ulang dengan config baru
                $material.select2({
                    placeholder: 'Pilih Material',
                    allowClear: true,
                    width: '100%',
                    closeOnSelect: false,
                    ajax: {
                        url: '{{ route('ajax.materials.by.mtart') }}',
                        dataType: 'json',
                        delay: 250,
                        cache: false, // ⚠️ DISABLE CACHE agar selalu ambil data fresh
                        data: function(params) {
                            const mt = $mtart.val();
                            const payload = {
                                q: params.term,
                                mtart: mt
                            };
                            if (mt === 'ZPCK') payload.matkl = ($matkl.val() || '').toUpperCase();
                            return payload;
                        },
                        processResults: function(data) {
                            const flat = data.map(it => ({
                                id: it.matnr,
                                text: `${it.maktx} (${it.matnr})`,
                                grp: (it.grp || 'Lainnya')
                            }));
                            lastMaterialResults = flat;

                            const isPlastic = ($mtart.val() === 'ZPCK' && ($matkl.val() || '')
                                .toUpperCase() === 'PLASTIC');
                            if (!isPlastic) {
                                return {
                                    results: [{
                                        id: '__ALL__',
                                        text: '— Pilih semua (' + flat.length + ') —'
                                    }, ...flat]
                                };
                            }
                            const order = ['Stretch Film', 'LLDPE', 'Lainnya'];
                            const buckets = {
                                'Stretch Film': [],
                                'LLDPE': [],
                                'Lainnya': []
                            };

                            function normalizeGroupName(raw) {
                            if (!raw) return 'Lainnya';

                            // Bersihkan whitespace & uppercase
                            const norm = raw.replace(/\s+/g, ' ').trim().toUpperCase();

                            // Variasi yg dianggap sama
                            if (norm === 'STRETCH FILM' || norm === 'STRECTH FILM') {
                                return 'Stretch Film';
                            }
                            if (norm === 'LLDPE') {
                                return 'LLDPE';
                            }

                            return 'Lainnya';
                        }
                        flat.forEach(x => {
                            const grp = normalizeGroupName(x.grp);

                            buckets[grp].push({
                                id: x.id,
                                text: x.text
                            });
                        });
                        return {
                            results: [{
                                    id: '__ALL__',
                                    text: '— Pilih semua (' + flat.length + ') —'
                                },
                                ...order.filter(g => buckets[g].length).map(g => ({
                                    text: g,
                                    children: [{
                                            id: `__GRP_SELECT__${g}`,
                                            text: `Pilih grup: ${g}`,
                                            _grpToggle: true
                                        },
                                        {
                                            id: `__GRP_CLEAR__${g}`,
                                            text: `Hapus pilihan grup: ${g}`,
                                            _grpToggle: true
                                        },
                                        ...buckets[g]
                                    ]
                                }))
                            ]
                        };
                    }
                },
                templateResult: function(item) {
                    if (item.id === '__ALL__') return $('<span style="font-style:italic;">' + item
                        .text + '</span>');
                    if (String(item.id || '').startsWith('__GRP_')) return $(
                        '<span style="font-weight:600;">' + item.text + '</span>');
                    return item.text;
                },
                escapeMarkup: m => m
            });

            // Restore selected values after reinit
            if (selectedVals.length > 0) {
                $material.val(selectedVals).trigger('change');
            }

            // Re-attach event handlers untuk grup & pilih semua
            $material.off('select2:select').on('select2:select', function(e) {
                const id = String(e.params.data.id || '');
                if (id === '__ALL__') {
                    const other = ($material.val() || []).filter(v => v !== '__ALL__');
                    lastMaterialResults.forEach(it => {
                        if ($material.find('option[value="' + it.id + '"]').length === 0) {
                            $material.append(new Option(it.text, it.id, true, true));
                        }
                    });
                    const ids = lastMaterialResults.map(x => x.id);
                    $material.val(uniq([...other, ...ids])).trigger('change');
                    $material.select2('close');
                } else if (id.startsWith('__GRP_SELECT__')) {
                    const grp = id.replace('__GRP_SELECT__', '');
                    selectGroup(grp);
                    $material.val(($material.val() || []).filter(v => v !== id)).trigger('change');
                } else if (id.startsWith('__GRP_CLEAR__')) {
                    const grp = id.replace('__GRP_CLEAR__', '');
                    unselectGroup(grp);
                    $material.val(($material.val() || []).filter(v => v !== id)).trigger('change');
                }
            });
        }

        // Init pertama kali
        initMaterialSelect2();

            // --- handler grup & pilih semua (tetap seperti sebelumnya)
            const uniq = arr => Array.from(new Set(arr));

            function selectGroup(grp) {
                const ids = lastMaterialResults.filter(x => x.grp === grp).map(x => x.id);
                const texts = new Map(lastMaterialResults.map(x => [x.id, x.text]));
                ids.forEach(id => {
                    if ($material.find('option[value="' + id + '"]').length === 0) {
                        $material.append(new Option(texts.get(id) || id, id, true, true));
                    }
                });
                const current = $material.val() || [];
                $material.val(uniq([...current, ...ids])).trigger('change');
            }

            function unselectGroup(grp) {
                const idsSet = new Set(lastMaterialResults.filter(x => x.grp === grp).map(x => x.id));
                const current = ($material.val() || []).filter(v => !idsSet.has(v));
                $material.val(current).trigger('change');
            }

            // --- event: MTART berubah - reinit Select2 material untuk clear cache
            $mtart.on('change', async function() {
                const mt = this.value;
                
                // Kosongkan material & disable SEGERA
                $material.val(null).prop('disabled', true).trigger('change');
                
                // Reinit Select2 untuk clear cache
                initMaterialSelect2();
                
                if (mt === 'ZPCK') {
                    toggleMatkl(true);
                    await loadMatklOptions('ZPCK', $matkl.val());
                    setMaterialEnabled(!!$matkl.val()); // aktif jika MATKL sudah ada
                } else {
                    toggleMatkl(false);
                    setMaterialEnabled(true); // langsung aktif
                }
            });

            // --- event: MATKL berubah - reinit Select2 material untuk clear cache
            $matkl.on('change', function() {
                if ($mtart.val() !== 'ZPCK') return; // abaikan jika bukan ZPCK

                // Kosongkan material & disable SEGERA
                $material.val(null).prop('disabled', true).trigger('change');

                // Reinit Select2 untuk clear cache
                initMaterialSelect2();

                // Aktif/nonaktifkan Material tergantung MATKL terisi atau tidak
                const hasMatkl = !!$(this).val();
                setMaterialEnabled(hasMatkl);
            });

            // --- sebelum submit: pastikan material tidak disabled agar nilainya terkirim
            $form.on('submit', function() {
                $material.prop('disabled', false);
            });

            // --- INIT
            if (selectedMtart === 'ZPCK') {
                toggleMatkl(true);
                setMaterialEnabled(!!selectedMatkl);
                loadMatklOptions('ZPCK', selectedMatkl);
            } else {
                toggleMatkl(false);
                setMaterialEnabled(true);
            }
        });
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.toggle-detail');
            if (!btn) return;

            const targetSel = btn.getAttribute('data-target');
            const rows = document.querySelectorAll(targetSel);
            const expanded = btn.getAttribute('aria-expanded') === 'true';

            btn.setAttribute('aria-expanded', String(!expanded));
            rows.forEach(row => row.classList.toggle('d-none', expanded));

            const icon = btn.querySelector('.bi');
            if (icon) {
                icon.classList.toggle('bi-caret-right-fill', expanded);
                icon.classList.toggle('bi-caret-down-fill', !expanded);
            }
        });
    </script>
@endpush