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

    <div class="card shadow-lg mx-4" style="margin-bottom: 30px;">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'">
                            <i class="fas fa-chevron-left me-1"></i>Kembali
                        </button>
                        <button type="submit" id="saveButton" class="btn btn-primary mb-0" onclick="saveData(event)">
                            <i class="fas fa-download me-1"></i>Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="lock_dmenu" value="{{ $lock_dmenu }}">
    <input type="hidden" id="lock_record_id" value="{{ $lock_record_id }}">
    <input type="hidden" id="content_hash" value="{{ $content_hash }}">

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header py-2" style="margin-top: 20px;">
                        <h5 class="mb-0 pb-2">Header {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body py-3">
                        <form id="my-form" autocomplete="off">
                            @csrf
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="id_transaksi" class="form-label me-2"
                                            style="min-width:100px;">ID</label>
                                        <input type="text" class="form-control" id="id_transaksi" name="id_transaksi"
                                            value="{{ $pembelian->id_transaksi ?? '' }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="tanggal" class="form-label me-2"
                                            style="min-width:100px;">Tanggal</label>
                                        <input type="date" class="form-control" id="tanggal" name="tanggal"
                                            value="{{ $pembelian->tanggal ?? date('Y-m-d') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="tipe_barang" class="form-label me-2" style="min-width:100px;">Tipe
                                            Barang</label>
                                        <select id="tipe_barang" name="tipe_barang" class="form-control" disabled>
                                            <option value="">-- Pilih Tipe --</option>
                                            <option value="Sparepart"
                                                {{ ($pembelian->tipe_barang ?? '') == 'Sparepart' ? 'selected' : '' }}>
                                                Sparepart</option>
                                            <option value="Penunjang"
                                                {{ ($pembelian->tipe_barang ?? '') == 'Penunjang' ? 'selected' : '' }}>
                                                Penunjang</option>
                                        </select>
                                        <input type="hidden" name="tipe_barang"
                                            value="{{ $pembelian->tipe_barang ?? '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="supplier" class="form-label me-2"
                                            style="min-width:100px;">Vendor</label>
                                        <select id="supplier" name="supplier" class="form-control">
                                            <option value="">-- Pilih Vendor --</option>
                                            @foreach ($supplier as $s)
                                                <option value="{{ $s->id }}"
                                                    {{ ($pembelian->supplier ?? '') == $s->id ? 'selected' : '' }}>
                                                    {{ $s->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header py-2">
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        @php
                            $hasInactiveBarang = $details->contains(function ($d) {
                                return ($d->barang_isactive ?? '1') == '0';
                            });
                        @endphp
                        @if ($hasInactiveBarang)
                            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center p-3 mb-3 text-white" id="alert-has-inactive" role="alert" style="background-color: #dc3545 !important; border: 1px solid #b02a37 !important; color: #ffffff !important; border-radius: 8px; box-shadow: 0 2px 6px rgba(220, 53, 69, 0.2);">
                                <i class="fas fa-exclamation-circle me-2 fs-5 text-white" style="color: #ffffff !important;"></i>
                                <div style="font-size: 14px; line-height: 1.5; color: #ffffff !important;">
                                    <strong style="color: #ffffff !important;">Perhatian:</strong> Transaksi ini memuat barang yang berstatus <strong style="color: #ffffff !important;">Non-Aktif</strong> di Master Barang.
                                </div>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close" style="filter: brightness(0) invert(1);"></button>
                            </div>
                        @endif
                        <button type="button" id="btnRefreshSelectedStok" class="btn btn-sm btn-primary">
                            <i class="fas fa-sync-alt"></i> Refresh Stok & Min Stok
                        </button>
                        <div class="table-responsive">
                            <table id="tgrpo-tbl-detail" class="table table-bordered table-striped">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        {{-- <th class="text-center" style="width:40px;">
                                            <input type="checkbox" id="checkAllRefreshStok" class="form-check-input">
                                        </th> --}}
                                        <th style="text-align:center; border-color: #daecff;">Act</th>
                                        <th style="text-align:center; border-color: #daecff;">No</th>
                                        <th style="text-align:center; border-color: #daecff;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff;">Stok</th>
                                        <th style="text-align:center; border-color: #daecff;">Min Stok</th>
                                        <th style="text-align:center; border-color: #daecff;">Kelipatan</th>
                                        <th style="text-align:center; border-color: #daecff;">QTY</th>
                                        <th style="text-align:center; border-color: #daecff;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff;">Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-grpo">
                                    @foreach ($details as $index => $detail)
                                        <tr class="form-row">
                                            {{-- <td class="text-center" style="width:40px;">
                                                <input type="checkbox" class="form-check-input refresh-stok-check">
                                            </td> --}}
                                            <td class="text-center" style="white-space:nowrap;">
                                                <button type="button" class="btn btn-danger btn-sm btn-cancel"><i
                                                        class="fas fa-times"></i></button>
                                            </td>
                                            <td class="text-center">{{ ($index + 1) * 10 }}
                                                <input type="hidden" name="tmp_urut[]" value="{{ ($index + 1) * 10 }}">
                                            </td>
                                            <td>
                                                <div class="input-group input-group-sm">
                                                    <input name="tmp_nama_barang[]" class="form-control form-control-sm"
                                                        value="{{ $detail->barang_name }}" readonly required>
                                                    <input type="hidden" name="tmp_id_barang[]"
                                                        value="{{ $detail->id_barang }}">
                                                    <input type="hidden" name="tmp_nama_barang_id[]"
                                                        value="{{ $detail->kode_baru }}">
                                                    <input type="hidden" name="tmp_kode_lama[]"
                                                        value="{{ $detail->kode_lama }}">
                                                    <input type="hidden" name="tmp_satuan_id[]"
                                                        value="{{ $detail->satuan }}">
                                                    <button type="button" class="btn btn-outline-primary btn-find-barang"
                                                        title="Cari Barang">
                                                        <i class="fas fa-search"></i>
                                                    </button>
                                                </div>
                                                @if (($detail->barang_isactive ?? '1') == '0')
                                                    <span class="badge bg-danger mt-1 badge-inactive-warning" style="font-size: 10px;">
                                                        <i class="fas fa-exclamation-circle me-1"></i>Tidak Aktif
                                                    </span>
                                                @endif
                                            </td>
                                            <td><input name="tmp_kode_lama_display[]" class="form-control form-control-sm"
                                                    value="{{ $detail->kode_lama }}" readonly></td>
                                            <td><input name="tmp_kode_baru_display[]"
                                                    class="form-control form-control-sm kode-baru-input"
                                                    value="{{ $detail->kode_baru }}" readonly></td>
                                            <td style="width:80px">
                                                <input name="tmp_stok_display[]"
                                                    class="form-control form-control-sm stok-input"
                                                    value="{{ intval($detail->stok) }}"
                                                    data-original="{{ intval($detail->stok) }}" readonly>
                                            </td>
                                            <td style="width:80px">
                                                <input name="tmp_min_stok_display[]"
                                                    class="form-control form-control-sm min-stok-input"
                                                    value="{{ intval($detail->min_stok) }}"
                                                    data-original="{{ intval($detail->min_stok) }}" readonly>

                                            </td>
                                            <td style="width:80px">
                                                <input type="number" step="1" min="0"
                                                    name="tmp_kelipatan_display[]"
                                                    class="form-control form-control-sm kelipatan-input"
                                                    value="{{ intval($detail->kelipatan ?? 0) }}" required>
                                            </td>
                                            <td style="width:120px">
                                                <input type="number" name="tmp_qty[]"
                                                    class="form-control form-control-sm qty-input"
                                                    value="{{ intval($detail->qty) }}"
                                                    data-original="{{ intval($detail->qty) }}">
                                            </td>
                                            <td style="width:120px"><input type="text" name="tmp_satuan[]"
                                                    class="form-control form-control-sm"
                                                    value="{{ $detail->satuan_nama }}" disabled></td>
                                            <td><input name="tmp_catatan[]" class="form-control form-control-sm"
                                                    value="{{ $detail->catatan }}"></td>
                                        </tr>
                                    @endforeach
                                    <tr id="add-row">
                                        <td colspan="11" class="text-left">
                                            <span type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                <i class="fas fa-plus"></i> Tambah
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Barang --}}
    <div class="modal fade bd-example-modal-lg" id="barangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Nama Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tbl-barang" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Kode Baru</th>
                                    <th style="border-color: #daecff;">Kode Lama</th>
                                    <th style="border-color: #daecff;">Nama</th>
                                    <th style="border-color: #daecff;">Stok</th>
                                    <th style="border-color: #daecff;">Min Stok</th>
                                    <th style="border-color: #daecff;">Kelipatan</th>
                                    <th style="border-color: #daecff;">Satuan</th>
                                </tr>
                            </thead>
                            <tbody id="tbl-barang-body"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @include('partials.idle-lock-detection')

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <style>
            .input-changed {
                border: 2px solid #dc3545 !important;
                background-color: #ffe5e5 !important;
                color: #b02a37 !important;
                font-weight: 700 !important;
            }

            .input-changed:read-only {
                background-color: #ffe5e5 !important;
                border-color: #dc3545 !important;
                color: #b02a37 !important;
            }

            .input-group .form-control {
                border-right: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-group .btn {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            .input-group.input-group-sm .form-control {
                height: calc(1.5em + .5rem + 2px);
            }

            .input-group .form-control:focus {
                box-shadow: none;
            }
        </style>
        <script>
            $(document).on('click', '#btnRefreshSelectedStok', function() {
                let kodeBaruList = [];

                $('input[name="tmp_kode_baru_display[]"]').each(function() {
                    let kodeBaru = $(this).val();

                    if (kodeBaru) {
                        kodeBaruList.push(kodeBaru);
                    }
                });

                kodeBaruList = [...new Set(kodeBaruList)];

                if (kodeBaruList.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum ada barang',
                        text: 'Belum ada barang yang bisa di-refresh stoknya.'
                    });
                    return;
                }

                $.ajax({
                    url: "{{ route('barang.refresh-stok-from-master') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        kode_baru: kodeBaruList
                    },
                    beforeSend: function() {
                        $('#btnRefreshSelectedStok')
                            .prop('disabled', true)
                            .html('<i class="fas fa-spinner fa-spin"></i> Refreshing...');
                    },
                    success: function(res) {
                        if (!res.success) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: res.message || 'Refresh stok gagal.'
                            });
                            return;
                        }

                        let stokMap = {};

                        res.data.forEach(function(item) {
                            stokMap[item.kode_baru] = {
                                stok: item.stok,
                                min_stok: item.min_stok
                            };
                        });

                        $('input[name="tmp_kode_baru_display[]"]').each(function() {
                            let $row = $(this).closest('tr');
                            let kodeBaru = $(this).val();

                            if (stokMap[kodeBaru] !== undefined) {
                                let $stokInput = $row.find('input[name="tmp_stok_display[]"]');
                                let $minStokInput = $row.find(
                                    'input[name="tmp_min_stok_display[]"]');
                                let $qtyInput = $row.find('input[name="tmp_qty[]"]');

                                let oldStok = $stokInput.attr('data-original');
                                let oldMinStok = $minStokInput.attr('data-original');
                                let oldQty = $qtyInput.attr('data-original');

                                if (oldStok === undefined) oldStok = $stokInput.val();
                                if (oldMinStok === undefined) oldMinStok = $minStokInput.val();
                                if (oldQty === undefined) oldQty = $qtyInput.val();

                                let newStok = stokMap[kodeBaru].stok;
                                let newMinStok = stokMap[kodeBaru].min_stok;

                                $stokInput.val(newStok);
                                $minStokInput.val(newMinStok);

                                recalcQtyByRow($row);

                                let newQty = $qtyInput.val();

                                markInputChanged($stokInput, oldStok, newStok);
                                markInputChanged($minStokInput, oldMinStok, newMinStok);
                                markInputChanged($qtyInput, oldQty, newQty);
                            }
                        });

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: res.message || 'Stok berhasil di-refresh dan qty dihitung ulang.'
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON?.message ||
                                'Terjadi kesalahan saat refresh stok.'
                        });
                    },
                    complete: function() {
                        $('#btnRefreshSelectedStok')
                            .prop('disabled', false)
                            .html('<i class="fas fa-sync-alt"></i> Refresh Semua Stok');
                    }
                });
            });

            $(document).on('input change', 'input[name="tmp_kelipatan_display[]"]', function() {
                let $row = $(this).closest('tr');
                recalcQtyByRow($row);
            });



            function parseNumberValue(value) {
                value = String(value ?? '').trim();

                if (value === '') return 0;

                if (/^\d{1,3}([.,]\d{3})+$/.test(value)) {
                    value = value.replace(/[.,]/g, '');
                } else {
                    value = value.replace(',', '.');
                }

                return parseFloat(value) || 0;
            }

            function markInputChanged($input, oldValue, newValue) {
                let oldNumber = parseNumberValue(oldValue);
                let newNumber = parseNumberValue(newValue);

                console.log('MARK CHECK:', {
                    name: $input.attr('name'),
                    oldValue: oldValue,
                    newValue: newValue,
                    oldNumber: oldNumber,
                    newNumber: newNumber,
                    beda: oldNumber !== newNumber
                });

                if (oldNumber !== newNumber) {
                    $input.addClass('input-changed');
                    $input.attr('title', 'Sebelumnya: ' + oldValue + ', sekarang: ' + newValue);
                } else {
                    $input.removeClass('input-changed');
                    $input.removeAttr('title');
                }
            }

            function calcRecommendedQty(stok, minStok, kelipatan) {
                stok = parseNumberValue(stok);
                minStok = parseNumberValue(minStok);
                kelipatan = parseNumberValue(kelipatan);

                if (stok >= minStok) {
                    return 0;
                }

                let selisih = minStok - stok;

                if (kelipatan > 0) {
                    return Math.ceil(selisih / kelipatan) * kelipatan;
                }

                return selisih;
            }

            function recalcQtyByRow($row) {
                let stok = $row.find('.stok-input').val();
                let minStok = $row.find('.min-stok-input').val();
                let kelipatan = $row.find('.kelipatan-input').val();

                let qty = calcRecommendedQty(stok, minStok, kelipatan);

                console.log('RECALC:', {
                    stok: stok,
                    minStok: minStok,
                    kelipatan: kelipatan,
                    qty: qty
                });

                $row.find('.qty-input').val(qty);
            }

            function highlightSelectedBarang() {
                $('#tbl-barang tbody tr').removeClass('table-success').find('.choose-barang').removeClass('btn-success')
                    .addClass('btn-primary').text('Pilih').css('cursor', 'pointer');

                const selectedIds = new Set();
                const selectedCodesNoId = new Set();
                const allSelectedCodes = new Set();

                document.querySelectorAll('#tbody-grpo tr.form-row').forEach(row => {
                    const idVal = String(row.querySelector('[name="tmp_id_barang[]"]')?.value || '').trim();
                    const rawKode = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                    const kodeVal = rawKode.includes('|') ? rawKode.split('|')[0] : rawKode;

                    if (idVal) {
                        selectedIds.add(idVal);
                    } else if (kodeVal) {
                        selectedCodesNoId.add(kodeVal);
                    }

                    if (kodeVal) {
                        allSelectedCodes.add(kodeVal);
                    }
                });

                $('#tbl-barang tbody tr').each(function() {
                    const idBarang = String($(this).data('id') || '').trim();
                    const kodeBaru = String($(this).data('kode-baru') || '').trim();

                    let isSelected = false;
                    if (idBarang) {
                        isSelected = selectedIds.has(idBarang) || (kodeBaru && selectedCodesNoId.has(kodeBaru));
                    } else if (kodeBaru) {
                        isSelected = allSelectedCodes.has(kodeBaru);
                    }

                    if (isSelected) {
                        $(this).addClass('table-success');
                        $(this).find('.choose-barang').removeClass('btn-primary').addClass('btn-success').text(
                            'Terpilih').css('cursor', 'not-allowed');
                    }
                });
            }

            function calcRecommendedQty(stok, minStok, kelipatan) {
                stok = parseFloat(stok) || 0;
                minStok = parseFloat(minStok) || 0;
                kelipatan = parseFloat(kelipatan) || 0;
                if (stok >= minStok) return 0;
                var selisih = minStok - stok;
                if (kelipatan > 0) return Math.ceil(selisih / kelipatan) * kelipatan;
                return selisih;
            }
        </script>
        <script>
            const allBarang = @json($barang);

            function populateBarangModal(tipe) {
                const tipeNormalized = String(tipe || '').trim().toLowerCase();

                // Destroy DataTable first to avoid stale rows being restored on re-init.
                if ($.fn.DataTable.isDataTable('#tbl-barang')) {
                    $('#tbl-barang').DataTable().destroy();
                }

                const filtered = allBarang.filter(b => String(b.tipe || '').trim().toLowerCase() === tipeNormalized);
                const tbody = document.getElementById('tbl-barang-body');
                tbody.innerHTML = '';
                filtered.forEach(b => {
                    const tr = document.createElement('tr');
                    tr.dataset.id = b.id;
                    tr.dataset.kodeBaru = b.kode_baru;
                    tr.dataset.kodeLama = b.kode_lama;
                    tr.dataset.name = b.nama;
                    tr.dataset.stok = b.stok;
                    tr.dataset.minStok = b.min_stok;
                    tr.dataset.kelipatan = b.kelipatan;
                    tr.dataset.satuan = b.satuan_nama;
                    tr.dataset.satuanId = b.satuan_id;
                    tr.innerHTML =
                        '<td><button type="button" class="btn btn-primary btn-sm choose-barang mb-0">Pilih</button></td>' +
                        '<td>' + (b.kode_baru || '') + '</td>' +
                        '<td>' + (b.kode_lama || '') + '</td>' +
                        '<td>' + (b.nama || '') + '</td>' +
                        '<td>' + parseFloat(b.stok || 0) + '</td>' +
                        '<td>' + parseFloat(b.min_stok || 0) + '</td>' +
                        '<td>' + (b.kelipatan || 0) + '</td>' +
                        '<td>' + (b.satuan_nama || '') + '</td>';
                    tbody.appendChild(tr);
                });
                const dt = $('#tbl-barang').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [3, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "0 data",
                        sSearch: "Cari:"
                    }
                });
                dt.on('draw', function() {
                    highlightSelectedBarang();
                });
                highlightSelectedBarang();
            }

            let rowIdx = {{ count($details) * 10 }};
            let activeRow = null;

            function setInputValueOriginal(row, selector, value) {
                const input = row.querySelector(selector);

                if (!input) return;

                input.value = value ?? '';
                input.setAttribute('data-original', value ?? '');
                input.classList.remove('input-changed');
                input.removeAttribute('title');
            }

            document.addEventListener('DOMContentLoaded', () => {
                const tbody = document.getElementById('tbody-grpo');
                const btnAdd = document.getElementById('btnAddRow');

                btnAdd.addEventListener('click', () => {
                    rowIdx += 10;
                    const formRow =
                        '<tr class="form-row">' +
                        '  <td class="text-center" style="white-space:nowrap;"><button type="button" class="btn btn-danger btn-sm btn-cancel"><i class="fas fa-times"></i></button></td>' +
                        '  <td class="text-center">' + rowIdx +
                        '<input type="hidden" name="tmp_urut[]" value="' + rowIdx + '"></td>' +
                        '  <td><div class="input-group input-group-sm"><input name="tmp_nama_barang[]" class="form-control form-control-sm" placeholder="Pilih Barang…" readonly required><input type="hidden" name="tmp_id_barang[]"><input type="hidden" name="tmp_nama_barang_id[]"><input type="hidden" name="tmp_kode_lama[]"><input type="hidden" name="tmp_satuan_id[]"><button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang"><i class="fas fa-search"></i></button></div></td>' +
                        '  <td><input name="tmp_kode_lama_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td><input name="tmp_kode_baru_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td style="width:80px"><input name="tmp_stok_display[]" class="form-control form-control-sm stok-input" readonly></td>' +
                        '  <td style="width:80px"><input name="tmp_min_stok_display[]" class="form-control form-control-sm min-stok-input" readonly></td>' +
                        '  <td style="width:80px"><input type="number" step="1" min="0" name="tmp_kelipatan_display[]" class="form-control form-control-sm kelipatan-input" required></td>' +
                        '  <td style="width:120px"><input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required></td>' +
                        '  <td style="width:120px"><input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled></td>' +
                        '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                        '</tr>';

                    document.getElementById('add-row').insertAdjacentHTML('beforebegin', formRow);
                });

                tbody.addEventListener('click', (e) => {
                    const tr = e.target.closest('tr.form-row');
                    if (!tr) return;
                    if (e.target.closest('.btn-cancel')) {
                        tr.remove();
                        highlightSelectedBarang();
                        return;
                    }
                    if (e.target.closest('.btn-find-barang')) {
                        activeRow = tr;
                        const tipe = document.querySelector('input[name="tipe_barang"][type="hidden"]').value;
                        populateBarangModal(tipe);
                        new bootstrap.Modal(document.getElementById('barangModal')).show();
                        return;
                    }
                });

                document.getElementById('tbl-barang').addEventListener('click', (e) => {
                    const btn = e.target.closest('.choose-barang');

                    if (!btn || !activeRow) return;
                    if (btn.classList.contains('btn-success')) return;

                    const row = btn.closest('tr');

                    const kodeBaru = row.dataset.kodeBaru || '';
                    const kodeLama = row.dataset.kodeLama || '';
                    const nama = row.dataset.name || '';
                    const satuan = row.dataset.satuan || '';
                    const satuanId = row.dataset.satuanId || '';
                    const stok = parseFloat(row.dataset.stok || 0) || 0;
                    const minStok = parseFloat(row.dataset.minStok || 0) || 0;
                    const kelipatan = parseFloat(row.dataset.kelipatan || 0) || 0;

                    const qty = calcRecommendedQty(stok, minStok, kelipatan);

                    setInputValueOriginal(activeRow, '[name="tmp_nama_barang[]"]', nama);
                    setInputValueOriginal(activeRow, '[name="tmp_id_barang[]"]', row.dataset.id || '');
                    setInputValueOriginal(activeRow, '[name="tmp_nama_barang_id[]"]', kodeBaru);
                    setInputValueOriginal(activeRow, '[name="tmp_kode_lama[]"]', kodeLama);

                    setInputValueOriginal(activeRow, '[name="tmp_kode_baru_display[]"]', kodeBaru);
                    setInputValueOriginal(activeRow, '[name="tmp_kode_lama_display[]"]', kodeLama);

                    setInputValueOriginal(activeRow, '[name="tmp_satuan[]"]', satuan);
                    setInputValueOriginal(activeRow, '[name="tmp_satuan_id[]"]', satuanId);

                    setInputValueOriginal(activeRow, '[name="tmp_stok_display[]"]', stok);
                    setInputValueOriginal(activeRow, '[name="tmp_min_stok_display[]"]', minStok);
                    setInputValueOriginal(activeRow, '[name="tmp_kelipatan_display[]"]', kelipatan);
                    setInputValueOriginal(activeRow, '[name="tmp_qty[]"]', qty);

                    // Hapus badge tidak aktif jika ada di baris ini
                    activeRow.querySelector('.badge-inactive-warning')?.remove();

                    // Sembunyikan alert atas jika sudah tidak ada barang tidak aktif
                    if (document.querySelectorAll('.badge-inactive-warning').length === 0) {
                        document.getElementById('alert-has-inactive')?.remove();
                    }

                    bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();

                    setTimeout(() => highlightSelectedBarang(), 100);
                });
            });

            // Release lock on page leave
            window.addEventListener('beforeunload', function(e) {
                const dmenu = document.getElementById('lock_dmenu')?.value;
                const recordId = document.getElementById('lock_record_id')?.value;
                if (dmenu && recordId) {
                    const payload = new FormData();
                    payload.append('_token', '{{ csrf_token() }}');
                    payload.append('dmenu', dmenu);
                    payload.append('record_id', recordId);
                    payload.append('username', '{{ auth()->user()->username ?? '' }}');
                    navigator.sendBeacon('{{ url('/riwayat/edit') }}', payload);
                }
            });
        </script>
        <script>
            function saveData(event) {
                event.preventDefault();
                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('_method', 'PUT');
                formData.append('content_hash', document.getElementById('content_hash').value);

                const getVal = f => (document.querySelector(`[name="${f}"]`)?.value || '').trim();
                ['tanggal', 'supplier', 'tipe_barang'].forEach(f => formData.set(f, getVal(f)));

                if (!getVal('tanggal') || !getVal('supplier') || !getVal('tipe_barang')) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data header belum lengkap',
                        text: 'Silakan lengkapi Tanggal, Vendor, dan Tipe Barang.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');
                if (rows.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Data Detail!',
                        text: 'Silakan tambahkan minimal 1 data detail.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                let validationError = '';
                rows.forEach((row, i) => {
                    const rowNum = i + 1;
                    if (!(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value)) validationError +=
                        `Baris ${rowNum}: Barang harus dipilih\n`;
                    const qty = row.querySelector('[name="tmp_qty[]"]')?.value || '';
                    if (!qty || parseFloat(qty) <= 0) validationError += `Baris ${rowNum}: Qty harus lebih dari 0\n`;
                });
                if (validationError) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Detail Belum Sesuai!',
                        html: '<pre style="text-align:left; white-space:pre-wrap;">' + validationError + '</pre>',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                rows.forEach((row, i) => {
                    formData.append(`details[${i}][urut]`, row.querySelector('[name="tmp_urut[]"]')?.value || ((i + 1) *
                        10));
                    formData.append(`details[${i}][id_barang]`, row.querySelector('[name="tmp_id_barang[]"]')?.value || '');
                    formData.append(`details[${i}][kode_baru]`, row.querySelector('[name="tmp_nama_barang_id[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][kode_lama]`, row.querySelector('[name="tmp_kode_lama[]"]')?.value ||
                        '');
                    formData.append(`details[${i}][qty]`, row.querySelector('[name="tmp_qty[]"]')?.value || '');
                    formData.append(`details[${i}][satuan]`, row.querySelector('[name="tmp_satuan_id[]"]')?.value ||
                        '');
                    formData.append(`details[${i}][catatan]`, row.querySelector('[name="tmp_catatan[]"]')?.value || '');
                    formData.append(`details[${i}][kelipatan]`, row.querySelector('[name="tmp_kelipatan_display[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][stok]`, row.querySelector('[name="tmp_stok_display[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][min_stok]`, row.querySelector('[name="tmp_min_stok_display[]"]')
                        ?.value || '');
                });

                fetch("{{ URL::to($url_menu) }}/{{ $idencrypt }}", {
                        method: "POST",
                        body: formData,
                    })
                    .then(async res => {
                        const text = await res.text();
                        try {
                            const data = JSON.parse(text);
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sukses',
                                    text: 'Data berhasil diupdate.',
                                    showConfirmButton: true
                                }).then(() => {
                                    window.location.href = "{{ url($url_menu) }}";
                                });
                            } else {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Gagal!',
                                    text: data.message,
                                    confirmButtonText: 'OK'
                                });
                            }
                        } catch (err) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Kesalahan!',
                                html: '<pre>' + text + '</pre>',
                                confirmButtonText: 'Tutup'
                            });
                        }
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal konek!',
                            text: 'Cek koneksi internet.',
                            confirmButtonText: 'OK'
                        });
                    });
            }
        </script>
    @endpush