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

@section('content')
    @if (empty($selected_detail_month))
        @include('layouts.navbars.auth.topnav', ['title' => ''])
    @endif

    <div class="container-fluid py-4">

        {{-- ===== Filter ===== --}}
        <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">
                    <div class="row g-3">
                        {{-- Material Type (MTART) --}}
                        <div class="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 Type --</option>
                                <option value="ZRAW"
                                    {{ ($selectedMtart ?? request('filter-mtart')) == 'ZRAW' ? 'selected' : '' }}>ZRAW
                                </option>
                                <option value="ZPCK"
                                    {{ ($selectedMtart ?? request('filter-mtart')) == 'ZPCK' ? 'selected' : '' }}>ZPCK
                                </option>
                            </select>
                        </div>

                        {{-- Material Grup (MATKL) --}}
                        <div class="col-md-6">
                            <label for="filter-matkl" class="form-label mb-1">Material Grup</label>
                            <select name="filter-matkl" id="filter-matkl" class="form-control select2">
                                <option value="%">-- Semua Grup --</option>
                                @if (!empty($materialGroups))
                                    @foreach ($materialGroups as $g)
                                        <option value="{{ $g->matkl }}"
                                            {{ ($selectedMatkl ?? request('filter-matkl')) == $g->matkl ? 'selected' : '' }}>
                                            {{ $g->matkl }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        {{-- Material (Select2 + AJAX) --}}
                        <div class="col-md-12">
                            <label for="material" class="form-label mb-1">Material</label>
                            <select name="filter-material[]" id="material" class="form-control select2" multiple>
                                @if (!empty($materialList))
                                    @foreach ($materialList as $m)
                                        @php
                                            $vendorKey = strtoupper(trim($m->name1));
                                            $val = $m->matnr . '|' . $vendorKey;
                                        @endphp
                                        <option value="{{ $val }}"
                                            {{ in_array($val, $selectedMaterialValues ?? []) ? 'selected' : '' }}>
                                            {{ $m->name1 }} — {{ $m->maktx }} ({{ $m->matnr }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>

                            {{-- vendor hidden array --}}
                            <div id="vendor-hidden-container">
                                @if (!empty($selectedVendor ?? []))
                                    @foreach ((array) $selectedVendor as $vn)
                                        <input type="hidden" name="filter-vendor[]" value="{{ $vn }}">
                                    @endforeach
                                @endif
                            </div>

                            <small class="text-muted">Pilih satu atau lebih material.</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>

        {{-- ===== History Price (NAME1 — MATNR — MAKTKX) ===== --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="fas fa-table me-2"></i>History Price
                    <small class="text-muted" id="unitBadge"></small>
                </h6>

                <div class="d-flex gap-2">
                    <!-- Currency -->
                    <div class="btn-group btn-group-sm" role="group" aria-label="Currency selector">
                        <input type="radio" class="btn-check" name="currency" id="cur-idr" value="idr"
                            autocomplete="off">
                        <label class="btn btn-outline-success" for="cur-idr">IDR</label>

                        <input type="radio" class="btn-check" name="currency" id="cur-usd" value="usd"
                            autocomplete="off" checked>
                        <label class="btn btn-outline-success" for="cur-usd">USD</label>
                    </div>

                    <!-- Unit -->
                    <div class="btn-group btn-group-sm" role="group" aria-label="Unit selector">
                        <input type="radio" class="btn-check" name="unit" id="unit-kg" value="kg"
                            autocomplete="off">
                        <label class="btn btn-outline-primary" for="unit-kg">Harga per KG</label>

                        <input type="radio" class="btn-check" name="unit" id="unit-mt" value="mt"
                            autocomplete="off" checked>
                        <label class="btn btn-outline-primary" for="unit-mt">Harga per MT</label>
                    </div>
                </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"
                            id="historyPriceTable">
                            <thead class="text-center">
                                {{-- Header Tahun --}}
                                <tr style="background-color:#b8ecec;">
                                    <th class="text-center">Vendor — Material</th>
                                    <th>Curr</th>
                                    <th>UoM</th>
                                    @forelse(($yearsGrouped ?? collect()) as $y => $ms)
                                        <th colspan="{{ $ms->count() }}">{{ $y }}</th>
                                    @empty
                                        @if (!empty($months))
                                            <th colspan="{{ count($months) }}">Periode</th>
                                        @endif
                                    @endforelse
                                </tr>

                                {{-- Header Bulan --}}
                                <tr style="background-color:#b8ecec;">
                                    <th class="text-start"></th>
                                    <th colspan="2"></th>
                                    @foreach ($months ?? [] as $m)
                                        @php
                                            $mKey = (string) $m;
                                            try {
                                                $label = \Carbon\Carbon::createFromFormat('Ym', $mKey)->format('M Y');
                                            } catch (\Exception $e) {
                                                $label = $mKey;
                                            }
                                        @endphp
                                        <th>{{ $label }}</th>
                                    @endforeach
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($pricePivot as $rowKey => $monthValues)
                                    @php
                                        $firstCell = reset($monthValues);
                                        $meins = $firstCell['meins'] ?? '';
                                    @endphp
                                    <tr>
                                        <td class="text-start">{{ $rowKey }}</td>
                                        <td class="text-center">{{ $rowCurrency[$rowKey] ?? '' }}</td>
                                        <td class="text-center">{{ $meins }}</td>

                                        @foreach ($months as $m)
                                            @php $cell = $monthValues[$m] ?? null; @endphp
                                            <td class="text-end price-cell" data-matnr="{{ $cell['matnr'] ?? '' }}"
                                                data-vendor="{{ $cell['vendor'] ?? '' }}" data-ym="{{ $m }}"
                                                data-bedat="{{ $cell['bedat'] ?? '' }}"
                                                data-peinh="{{ $cell['peinh'] ?? '' }}" {{-- nilai override/final --}}
                                                data-kg-val="{{ $cell['kg_val'] ?? '' }}"
                                                data-mt-val="{{ $cell['mt_val'] ?? '' }}" {{-- nilai history asli untuk tooltip --}}
                                                data-kg-val-history="{{ $cell['kg_val_history'] ?? '' }}"
                                                data-mt-val-history="{{ $cell['mt_val_history'] ?? '' }}"
                                                data-exrate-idr="{{ $cell['exrate_idr'] ?? '' }}"
                                                data-exrate-usd="{{ $cell['exrate_usd'] ?? '' }}"
                                                data-source="{{ $cell['source'] ?? 'history' }}"
                                                data-waers="{{ $cell['waers'] ?? '' }}"
                                                data-note="{{ $cell['note'] ?? '' }}"
                                                ondblclick="openHistPriceModal(this)">
                                                <span class="price-text">-</span>
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="card shadow-sm mb-3">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    {{ $selectedMatkl }} — Harga <span id="chartUnitBadge" class="text-muted">(USD/MT)</span>
                </h6>
            </div>

            <div class="card-body">
                <div id="priceBarChart" style="height: 360px;"></div>
            </div>
        </div>

        @php
            // Pakai urutan bulan dari $months (YYYYMM)
            $chartMonths = $months ?? [];
            $chartLabels = array_map(fn($m) => \Carbon\Carbon::createFromFormat('Ym', $m)->format('M'), $chartMonths);

            // Legend untuk setiap baris (vendor — material)
            $rowLegend = [];
            foreach ($pricePivot as $rowKey => $values) {
                $first = reset($values);
                $maktx = $first['maktx'] ?? '';
                $matnr = $first['matnr'] ?? '';
                $rowLegend[$rowKey] = trim("{$maktx} ({$matnr})");
            }

            // Seri yang akan ditampilkan (pakai semua baris by default)
            $pickedKeys = array_keys($pricePivot ?? []);
        @endphp
    </div>

    <div class="modal fade" id="editHistPriceModal" tabindex="-1" aria-labelledby="editHistPriceLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title" id="editHistPriceLabel">Edit Harga</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <form id="histPriceForm">
                        @csrf
                        <!-- kunci utama -->
                        <input type="hidden" name="matnr" id="hp-matnr">
                        <input type="hidden" name="vendor" id="hp-vendor">
                        <input type="hidden" name="yearmonth" id="hp-ym">
                        <input type="hidden" name="bedat" id="hp-bedat">
                        <input type="hidden" name="peinh" id="hp-peinh">

                        <!-- tambahan opsional -->
                        <input type="hidden" name="waers" id="hp-waers">

                        {{-- <div class="d-flex justify-content-between align-items-center mb-2">
                            <small class="text-muted">
                                <span class="me-1">Mode tampilan:</span>
                                <span class="badge bg-secondary" id="hp-badge-cur">USD</span>
                                <span class="badge bg-info text-dark" id="hp-badge-unit">/MT</span>
                            </small>
                            <small class="text-muted" id="hp-label-peinh">PEINH: 1000</small>
                        </div> --}}

                        <div class="mb-2">
                            <label class="form-label" id="hp-label-netpr">Harga Netprice</label>
                            <input type="text" id="hp-netpr" class="form-control form-control-sm text-end" required
                                placeholder="1,000.00">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Note</label>
                            <textarea name="notes" id="hp-notes" class="form-control form-control-sm" rows="3"
                                placeholder="Masukkan catatan..."></textarea>
                        </div>
                        {{--
                        <div class="mb-2">
                            <label class="form-label">Alasan (opsional)</label>
                            <input type="text" name="reason" id="hp-reason" class="form-control form-control-sm">
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Catatan</label>
                            <textarea name="notes" id="hp-notes" class="form-control form-control-sm"></textarea>
                        </div> --}}
                    </form>
                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-danger btn-sm" id="btnResetHistPrice">Reset</button>
                    <button type="button" class="btn btn-primary btn-sm" id="btnSaveHistPrice">Simpan</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // ================== SELECT2 & FILTER VENDOR ==================
            const $mtart = $('#filter-mtart'); // ambil elemen MTART
            const $matkl = $('#filter-matkl');
            const $matnr = $('#material');
            const $box = $('#vendor-hidden-container');
            const vkey = s => (s || '').toString().trim().toUpperCase();

            function rebuildVendorHiddenFromMaterials() {
                $box.find('input[name="filter-vendor[]"]').remove();
                const ids = $matnr.val() || [];
                const keys = [...new Set(
                    ids.map(id => (id || '').toString().split('|')[1] || '')
                    .map(vkey)
                    .filter(Boolean)
                )];
                keys.forEach(k => {
                    $('<input>', {
                        type: 'hidden',
                        name: 'filter-vendor[]',
                        value: k
                    }).appendTo($box);
                });
            }

            // ============ INIT SELECT2 ============
            $mtart.select2({
                width: '100%'
            });

            $matkl.select2({
                width: '100%',
                placeholder: 'Pilih grup…',
                allowClear: true,
                ajax: {
                    url: "{{ route('ajax.matkl.by-mtart') }}",
                    delay: 250,
                    data: params => ({
                        q: params.term || '',
                        mtart: $mtart.val() || '%'
                    }),
                    processResults: data => ({
                        results: data.results || []
                    }),
                    cache: true
                }
            });

            $matnr.select2({
                width: '100%',
                placeholder: 'Pilih material…',
                allowClear: true,
                ajax: {
                    url: "{{ route('ajax.materials.by-matkl') }}",
                    delay: 250,
                    data: params => ({
                        q: params.term || '',
                        matkl: $matkl.val() || '%',
                        mtart: $('#filter-mtart').val() || '%' // ✅ tambahkan ini
                    }),
                    processResults: data => ({
                        results: data.results || []
                    }),
                    cache: true
                },
                templateResult: item => item.text || ''
            });

            // ============ EVENT HANDLER ============
            $mtart.on('change', function() {
                // reset matkl & material
                $matkl.val(null).trigger('change');
                $matnr.val(null).trigger('change');
                $box.find('input[name="filter-vendor[]"]').remove();
            });

            $matkl.on('change', function() {
                // reset material + vendor
                $matnr.val(null).trigger('change');
                $box.find('input[name="filter-vendor[]"]').remove();
                // trigger ulang query ke material
                $matnr.select2('trigger', 'query', {
                    term: ''
                });
            });

            $matnr.on('change', rebuildVendorHiddenFromMaterials);
            rebuildVendorHiddenFromMaterials();

            $('#material-filter-form').on('submit', rebuildVendorHiddenFromMaterials);

            // ================== MODE & FORMAT ==================
            const fmtID = new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });

            // default awal (sesuai permintaan): USD & MT
            window.currentUnit = 'mt';
            window.currentCurrency = 'usd';

            // ================== TABEL: APPLY MODE ==================
            function applyModeTable() {
                document.querySelectorAll('#historyPriceTable td.price-cell').forEach(td => {
                    const span = td.querySelector('.price-text');

                    const kgVal = parseFloat(td.dataset.kgVal || "0") || null;
                    const mtVal = parseFloat(td.dataset.mtVal || "0") || null;

                    const kgHist = parseFloat(td.dataset.kgValHistory || "0") || null;
                    const mtHist = parseFloat(td.dataset.mtValHistory || "0") || null;

                    const exIdr = parseFloat(td.dataset.exrateIdr || "0");
                    const exUsd = parseFloat(td.dataset.exrateUsd || "0");

                    console.log("exrate:", exIdr);
                    const src = td.dataset.source || 'history';

                    let raw = null;
                    let rawHistory = null;

                    // basis override/final
                    const baseVal = (currentUnit === 'kg') ? kgVal : mtVal;
                    // basis history
                    const histVal = (currentUnit === 'kg') ? kgHist : mtHist;

                    // nilai final (tampil di cell)
                    if (baseVal != null && !isNaN(baseVal)) {
                        if (currentCurrency === 'idr' && exIdr > 0) {
                            raw = baseVal * exIdr;
                        } else if (currentCurrency === 'usd' && exUsd > 0) {
                            raw = baseVal * exUsd;
                        }
                    }

                    // nilai history (tooltip)
                    if (histVal != null && !isNaN(histVal)) {
                        if (currentCurrency === 'idr' && exIdr > 0) {
                            rawHistory = histVal * exIdr;
                        } else if (currentCurrency === 'usd' && exUsd > 0) {
                            rawHistory = histVal * exUsd;
                        }
                    }

                    // isi cell
                    span.textContent = (raw != null) ? fmtID.format(raw) : '-';

                    // styling
                    span.classList.remove('text-secondary', 'text-danger', 'fw-semibold');
                    if (src === 'override') {
                        span.classList.add('text-danger', 'fw-semibold');
                    } else {
                        span.classList.add('text-secondary');
                    }

                    // tooltip (selalu tampilkan history kalau ada)
                    const old = bootstrap.Tooltip.getInstance(td);
                    if (old) old.dispose();

                    if (rawHistory != null) {
                        const sym = (currentCurrency === 'idr') ? 'Rp' : '$';
                        const unitU = currentUnit.toUpperCase();
                        const prefix = (src === 'override') ? 'History sebelum override' : 'History';

                        td.setAttribute('data-bs-toggle', 'tooltip');
                        td.setAttribute(
                            'data-bs-title',
                            `${prefix}: ${sym} ${fmtID.format(rawHistory)} /${unitU}`
                        );

                        new bootstrap.Tooltip(td, {
                            trigger: 'hover',
                            container: 'body'
                        });
                    } else {
                        td.removeAttribute('data-bs-toggle');
                        td.removeAttribute('data-bs-title');
                    }
                });

                // badge judul
                const badge = document.getElementById('unitBadge');
                if (badge) badge.textContent = `(${currentCurrency.toUpperCase()} / ${currentUnit.toUpperCase()})`;
            }

            window.months = @json($chartMonths); // array ["202401","202402",...]
            window.chartLabels = @json($chartLabels); // array ["Jan","Feb",...]
            window.pivot = @json($pricePivot); // pivot lengkap per rowKey & month
            window.pickedKeys = @json($pickedKeys); // daftar seri yang ditampilkan
            window.rowLegend = @json($rowLegend); // label cantik tiap seri
            // ================== CHART (OPSIONAL, JIKA ADA) ==================
            function buildSeries() {
                const unit = currentUnit.toUpperCase(); // KG atau MT
                const cur = currentCurrency.toUpperCase(); // IDR atau USD
                const mths = window.months || [];
                const pvt = window.pivot || {};
                const keys = window.pickedKeys || [];

                return keys.map(name => {
                    const pretty = (window.rowLegend && window.rowLegend[name]) ? window.rowLegend[name] :
                        name;

                    return {
                        name: `${pretty} • ${cur}/${unit}`,
                        type: 'bar',
                        data: mths.map(m => {
                            const cell = pvt?.[name]?.[m];
                            if (!cell) return '-';

                            // ambil base (netral) dari pivot
                            const baseVal = (currentUnit === 'kg') ?
                                (parseFloat(cell.kg_val) || null) :
                                (parseFloat(cell.mt_val) || null);

                            const exIdr = parseFloat(cell.exrate_idr || "0");
                            const exUsd = parseFloat(cell.exrate_usd || "0");

                            if (baseVal == null || isNaN(baseVal)) return '-';

                            if (currentCurrency === 'idr' && exIdr > 0) {
                                return baseVal * exIdr * 100; // ✅ IDR ×100
                            }
                            if (currentCurrency === 'usd' && exUsd > 0) {
                                return baseVal * exUsd; // USD normal
                            }

                            return '-';
                        })
                    };
                });
            }

            function renderChart() {
                const unit = currentUnit.toUpperCase();
                const cur = currentCurrency.toUpperCase();

                if (!window.echarts || !document.getElementById('priceBarChart')) return;

                if (!window._priceChart) {
                    window._priceChart = echarts.init(document.getElementById('priceBarChart'));
                }
                window._priceChart.setOption({
                    grid: {
                        left: 60,
                        right: 20,
                        top: 40,
                        bottom: 60
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        valueFormatter: v => (v == null || v === '-') ? '-' : new Intl.NumberFormat(
                            'en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            }).format(v)
                    },
                    legend: {
                        bottom: 0,
                        type: 'scroll',
                        orient: 'horizontal'
                    },
                    xAxis: {
                        type: 'category',
                        data: window.chartLabels || []
                    },
                    yAxis: {
                        type: 'value',
                        name: `${cur}/${unit}`,
                        nameGap: 20
                    },
                    series: buildSeries()
                }, true);

                const ub = document.getElementById('chartUnitBadge');
                if (ub) ub.textContent = `(${cur}/${unit})`;
            }

            // ================== TOGGLERS (BOOTSTRAP RADIO/BTN-CHECK ATAU BUTTON BIASA) ==================
            window.setPriceMode = function(unit) {
                if (unit !== 'kg' && unit !== 'mt') return;
                currentUnit = unit;
                applyModeTable();
                renderChart();

                // Jika pakai btn-check (radio) dengan name="unit", cek-kan input sesuai value.
                const unitRadio = document.querySelector(`input[name="unit"][value="${unit}"]`);
                if (unitRadio && !unitRadio.checked) unitRadio.checked = true;
            };

            window.setCurrencyMode = function(cur, exIdr) {
                if (cur !== 'idr' && cur !== 'usd') return;
                currentCurrency = cur;
                console.log("Currency terpilih:", currentCurrency);

                applyModeTable();
                renderChart();

                // Jika pakai btn-check (radio) dengan name="currency", cek-kan input sesuai value.
                const curRadio = document.querySelector(`input[name="currency"][value="${cur}"]`);
                if (curRadio && !curRadio.checked) curRadio.checked = true;
            };

            // Jika markup memakai radio (btn-check), dengarkan perubahannya
            document.querySelectorAll('input[name="unit"]').forEach(el => {
                el.addEventListener('change', e => setPriceMode(e.target.value));
            });
            document.querySelectorAll('input[name="currency"]').forEach(el => {
                el.addEventListener('change', e => setCurrencyMode(e.target.value));
            });

            // ================== INLINE EDIT (BLUR) ==================
            $('#historyPriceTable').on('blur', 'td.editable', function() {
                const td = $(this);

                let raw = td.text()
                    .replace(/[^0-9.,-]/g, '')
                    .replace(/\./g, '')
                    .replace(',', '.')
                    .trim();

                if (raw === '' || isNaN(Number(raw))) return;
                let inputVal = Number(raw);

                // 🔑 ambil data sumber
                const waersSrc = String(td.data('waers') || '').toUpperCase();
                const peinhSrc = Number(td.data('peinh')) || 1;
                const exIdr = parseFloat(td.data('exrateIdr') || "0");
                const exUsd = parseFloat(td.data('exrateUsd') || "0");

                // 🔑 konversi ke format SAP
                const netprSrc = convertUserInputToSAP({
                    inputValue: inputVal,
                    uiCurrency: currentCurrency, // toggle UI
                    uiUnit: currentUnit,
                    sourceWaers: waersSrc,
                    sourcePeinh: peinhSrc,
                    exrateIdr: exIdr,
                    exrateUsd: exUsd
                });

                if (netprSrc == null) {
                    td.css('background', '#f8d7da'); // error merah
                    return;
                }

                // kirim ke backend
                $.ajax({
                    url: "{{ route('histprice.update') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        matnr: td.data('matnr'),
                        vendor: td.data('vendor'),
                        yearmonth: td.data('ym'),
                        bedat: td.data('bedat'),
                        netpr: netprSrc, // ✅ sudah sesuai SAP
                        peinh: peinhSrc,
                        waers: waersSrc
                    },
                    success: function(res) {
                        // tampilkan sesuai input user (bukan netprSrc)
                        td.find('.price-text').text(fmtID.format(inputVal));
                        td.css('background', '#d4edda');
                        setTimeout(() => td.css('background', ''), 1200);
                    },
                    error: function() {
                        td.css('background', '#f8d7da');
                    }
                });
            });


            // ================== MODAL EDIT ==================
            let _lastCellEl = null;

            function convertUserInputToSAP({
                inputValue, // angka input user
                uiCurrency, // currency tampilan (IDR/USD)
                uiUnit, // unit tampilan (KG/MT)
                sourceWaers, // currency sumber SAP (IDR / USD)
                sourcePeinh, // PEINH sumber SAP
                exrateIdr,
                exrateUsd
            }) {
                if (inputValue == null || isNaN(inputValue)) return null;

                // 1. Normalisasi unit (UI -> per KG)
                let perKgUI = (uiUnit.toUpperCase() === 'KG') ? inputValue : (inputValue / 1000);

                // 2. Konversi currency sesuai WAERS sumber
                let perKgSrc = perKgUI;

                if (sourceWaers.toUpperCase() === 'USD') {
                    // SAP butuh USD
                    if (uiCurrency.toUpperCase() === 'IDR') {
                        perKgSrc = exrateIdr > 0 ? (perKgUI / exrateIdr) : null; // IDR -> USD
                    } else {
                        perKgSrc = exrateIdr > 0 ? (perKgUI * exrateUsd) : null;
                    }
                    // kalau UI sudah USD → biarkan
                } else if (sourceWaers.toUpperCase() === 'IDR') {
                    // SAP butuh IDR
                    if (uiCurrency.toUpperCase() === 'USD') {
                        perKgSrc = exrateIdr > 0 ? (perKgUI / exrateUsd) : null; // USD -> IDR
                    } else {
                        perKgSrc = exrateIdr > 0 ? (perKgUI * exrateIdr) : null;
                    }
                    // kalau UI sudah IDR → biarkan
                }
                if (perKgSrc == null) return null;

                // 3. Apply PEINH (harga sesuai denominator SAP)
                let netpr = perKgSrc * sourcePeinh;

                // 4. Aturan khusus SAP: WAERS=IDR → simpan NETPR/100
                if (sourceWaers.toUpperCase() === 'IDR') {
                    netpr = netpr / 100;
                }

                return netpr;
            }

            window.openHistPriceModal = function(tdEl) {
    const el = $(tdEl);
    _lastCellEl = el;

    $('#hp-matnr').val(el.data('matnr'));
    $('#hp-vendor').val(el.data('vendor'));
    $('#hp-ym').val(el.data('ym'));
    $('#hp-bedat').val(el.data('bedat'));
    $('#hp-peinh').val(Number(el.data('peinh')) || 1);
    $('#hp-waers').val(el.data('waers'));
    $('#hp-notes').val(el.data('note') || '');

    $('#hp-badge-cur').text((window.currentCurrency || 'usd').toUpperCase());
    $('#hp-badge-unit').text('/' + (window.currentUnit || 'mt').toUpperCase());
    $('#hp-label-netpr').text(
        'Harga (' + (window.currentCurrency || 'usd').toUpperCase() + ' / ' +
        (window.currentUnit || 'mt').toUpperCase() + ')'
    );
    $('#hp-label-peinh').text('PEINH: ' + $('#hp-peinh').val());

    let shown = el.find('.price-text').text().trim();
    $('#hp-netpr').val(shown);

    const modalEl = document.getElementById('editHistPriceModal');
    const modal = new bootstrap.Modal(modalEl);
    modal.show();

    modalEl.addEventListener('shown.bs.modal', function onShown() {
        const input = document.getElementById('hp-netpr');
        input.focus();
        input.select();
        modalEl.removeEventListener('shown.bs.modal', onShown);
    });
};

            $('#btnSaveHistPrice').on('click', function() {
                const $btn = $(this).prop('disabled', true);

                const valStr = ($('#hp-netpr').val() || '').replace(/\./g, '').replace(',', '.');
                if (valStr === '' || isNaN(Number(valStr))) {
                    alert("Input harga tidak valid");
                    return $btn.prop('disabled', false);
                }
                const inputVal = Number(valStr);

                const el = _lastCellEl;
                const waersSrc = String(el.data('waers') || '').toUpperCase();
                const peinhSrc = Number(el.data('peinh')) || 1;
                const exIdr = parseFloat(el.data('exrateIdr') || "0");
                const exUsd = parseFloat(el.data('exrateUsd') || "0");

                // ✅ gunakan fungsi konversi yang benar
                const netprSrc = convertUserInputToSAP({
                    inputValue: inputVal,
                    uiCurrency: currentCurrency,
                    uiUnit: currentUnit,
                    sourceWaers: waersSrc,
                    sourcePeinh: peinhSrc,
                    exrateIdr: exIdr,
                    exrateUsd: exUsd
                });

                if (netprSrc == null) {
                    alert('Tidak bisa konversi nilai ke format sumber (cek kurs).');
                    return $btn.prop('disabled', false);
                }

                const payload = {
                    _token: "{{ csrf_token() }}",
                    matnr: $('#hp-matnr').val(),
                    vendor: $('#hp-vendor').val(),
                    yearmonth: $('#hp-ym').val(),
                    bedat: $('#hp-bedat').val(),
                    peinh: peinhSrc,
                    netpr: netprSrc, // ✅ hasil sudah sesuai WAERS + PEINH sumber
                    reason: $('#hp-reason').val(),
                    notes: $('#hp-notes').val(),
                };

                $.post("{{ route('histprice.update') }}", payload)
                    .done(res => {
                        if (res.status === 'ok') {
                            bootstrap.Modal.getInstance(document.getElementById('editHistPriceModal'))
                                .hide();
                            location.reload();
                        } else {
                            alert('Gagal menyimpan data.');
                            $btn.prop('disabled', false);
                        }
                    })
                    .fail(jq => {
                        alert('Error: ' + (jq.responseJSON?.message || jq.statusText));
                        $btn.prop('disabled', false);
                    });
            });

            $('#btnResetHistPrice').on('click', function() {
                if (!confirm('Yakin reset harga ini ke original?')) return;
                const payload = {
                    _token: "{{ csrf_token() }}",
                    matnr: $('#hp-matnr').val(),
                    vendor: $('#hp-vendor').val(),
                    yearmonth: $('#hp-ym').val(),
                    bedat: $('#hp-bedat').val(),
                    currency: $('#hp-currency').val(),
                    exrate_idr: $('#hp-exrate-idr').val(),
                    exrate_usd: $('#hp-exrate-usd').val()
                };
                $.post("{{ route('histprice.reset') }}", payload, function(res) {
                    if (res.status === 'ok') {
                        bootstrap.Modal.getInstance(document.getElementById('editHistPriceModal'))
                            .hide();
                        location.reload();
                    } else {
                        alert(res.message || 'Gagal reset data.');
                    }
                }).fail(function() {
                    alert('Terjadi error saat reset data.');
                });
            });

            // ================== INIT DEFAULT (USD & MT) ==================
            setCurrencyMode('usd');
            setPriceMode('mt');

            // Sinkronkan radio (jika ada)
            const rCur = document.querySelector('input[name="currency"][value="usd"]');
            if (rCur) rCur.checked = true;
            const rUnit = document.querySelector('input[name="unit"][value="mt"]');
            if (rUnit) rUnit.checked = true;

            // Resize chart jika ada
            window.addEventListener('resize', () => {
                if (window._priceChart) window._priceChart.resize();
            });
        });
    </script>
@endpush