@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">
        <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="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->edit == '1')
                            <button type="button" class="btn btn-primary mb-0" id="btn-simpan">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Form Penerimaan Barang</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6">
                                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="dailya-form"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">ID</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="text" class="form-control" id="did" name="did"
                                                    value="{{ $h->id }}" disabled>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Date <code> *</code></label>
                                                <input type="date" class="form-control" id="date" name="date"
                                                    value="{{ $h->date }}" readonly>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="d-flex align-items-center">
                                            <label for="inputdate" class="form-label me-2"
                                                style="min-width: 150px;">Keterangan <code> *</code></label>
                                            <input type="text" class="form-control" id="keterangan" name="keterangan"
                                                value="{{ $h->remark }}" disabled>
                                        </div>
                                        <p></p>


                                        <div class="d-flex align-items-center">
                                            <label for="status" class="form-label me-2" style="min-width: 150px;">Status
                                                <code>*</code></label>

                                            @php
                                                $statusClass = '';
                                                $statusText = '';

                                                if ($h->status === 'E') {
                                                    $statusClass = 'bg-info text-white';
                                                    $statusText = 'Entry';
                                                } elseif ($h->status === 'F') {
                                                    $statusClass = 'bg-success text-white';
                                                    $statusText = 'Finish';
                                                } else {
                                                    $statusClass = 'bg-secondary text-white';
                                                    $statusText = $h->status ?? '-';
                                                }
                                            @endphp

                                            <input type="text" class="form-control {{ $statusClass }}"
                                                value="{{ $statusText }}" readonly>
                                        </div>
                                        <p></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <br>
                        <h6>Note : (<code>*</code>) Wajib diisi.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- List Detail --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Detail</p>
                        <hr class="horizontal dark mt-0">

                        <!-- Buttons -->
                        <div class="d-flex mb-3">
                            <button type="button" class="btn btn-primary  me-2" id="add-frompp" data-bs-toggle="modal">
                                <i class="fas fa-plus"></i> Add from PO
                            </button>
                            <button type="button" class="btn btn-primary me-2" id="additem">
                                <i class="fas fa-plus"></i> Add Item
                            </button>
                        </div>

                        <!-- Table  ADD PR-->
                        <div class="table-responsive">
                            <table class="table table-hover" id="detail-item">
                                <thead style="background-color: #daecff; text-align: left;">
                                    <tr>
                                        <th style="width:60px">Action</th>
                                        <th style="width:60px">Item</th>
                                        <th>Type</th>
                                        <th>Uraian Barang</th>
                                        <th>ID Barang</th>
                                        <th>Qty</th>
                                        <th>Satuan</th>
                                        <th>Jenis Asset</th>
                                        <th>Kode SAP</th>
                                        <th>Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="table-data">
                                    @php
                                        $noItem = 0;
                                    @endphp
                                    @foreach ($detail as $d)
                                        @php
                                            $noItem += 10;
                                        @endphp
                                        <tr class="detail-row" data-rowid="{{ $d->id }}">
                                            <td>
                                                <button class="btn btn-danger btn-sm hapus" type="button"
                                                    data-existing="1">X</button>
                                                <input type="hidden" name="detail-no[]" value="update" />
                                                <input type="hidden" name="detail-rowid[]"
                                                    value="{{ $d->id }}" />
                                                <input type="hidden" name="detail-ppnumber[]"
                                                    value="{{ $d->ppnumber ?? '' }}" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="detail-item[]"
                                                    value="{{ $d->item }}" disabled>
                                            </td>
                                            <td>
                                                <select name="detail-type[]" class="form-select"
                                                    onchange="change_type(this)" style="width:150px;">
                                                    @foreach ($type as $t)
                                                        <option value="{{ $t->value }}"
                                                            {{ $t->value == $d->type ? 'selected' : '' }}>
                                                            {{ $t->value }} - {{ $t->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>

                                            <td>
                                                <div class="detail-barang input-group mb-3">
                                                    <input type="text" name="detail-barang[]" class="form-control"
                                                        readonly value="{{ $d->uraian }}">

                                                </div>
                                            </td>
                                            <td>
                                                <div class="detail-id input-group mb-3">
                                                    <input type="text" name="detail-id[]" class="form-control"
                                                        value="{{ $d->id_barang }}" readonly>

                                                    <span class="input-group-text bg-primary text-light btn-search"
                                                        style="cursor:pointer;">
                                                        <i class="fas fa-search"></i>
                                                    </span>
                                                </div>
                                            </td>

                                            <td>
                                                <input type="number" class="form-control" name="detail-qty[]"
                                                    value="{{ $d->qty }}" min="0.01">
                                            </td>

                                            <td>
                                                <select name="detail-uom[]" class="form-select" disabled>
                                                    <option value="" disabled selected>Pilih UOM</option>
                                                    @foreach ($uomval as $uom)
                                                        <option value="{{ $uom->value }}"
                                                            @if ($uom->value == $d->uom) selected @endif>
                                                            {{ $uom->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select name="detail-asset[]" class="form-select" disabled>
                                                    <option value="" disabled selected>Pilih Nama Asset</option>
                                                    @foreach ($assetval as $asset)
                                                        <option value="{{ $asset->value }}"
                                                            @if ($asset->value == $d->asset ?? '') selected @endif>
                                                            {{ $asset->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="detail-kodesap[]"
                                                    value="{{ $d->kode_sap }}">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="detail-remark[]"
                                                    value="{{ $d->remark }}">
                                            </td>
                                            <input type="hidden" name="detail-idtrans-formpph[]"
                                                value="{{ $d->idtrans_formpph ?? '' }}">
                                            <input type="hidden" name="detail-id-formpp[]"
                                                value="{{ $d->idpp ?? '' }}">
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <input type="hidden" id="jumlah_item" name="jumlah_item" value="0" />
                            <input type="hidden" id="no_item" name="no_item" value="{{ $noItem }}" />

                        </div>


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

    {{-- Modal PR --}}
    <div class="modal fade" id="modalPP" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List PR</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="overflow-x: hidden; max-height: 60vh; overflow-y: auto;">
                    <div style="overflow-x: hidden;">
                        <table id="tableStock" class="table table-bordered table-striped table-sm" style="width: 100%; font-size: 0.875rem;">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="width: 40px; text-align: center; vertical-align: middle;">
                                        <div class="form-check d-flex justify-content-center">
                                            <input class="form-check-input" type="checkbox" id="checkAll">
                                        </div>
                                    </th>
                                    <th style="width: auto; text-align: center; vertical-align: middle;">Nama Barang</th>
                                    <th style="width: 80px; text-align: center; vertical-align: middle;">Qty PP</th>
                                    <th style="width: 80px; text-align: center; vertical-align: middle;">Qty Sisa</th>
                                    <th style="width: 80px; text-align: center; vertical-align: middle;">UoM</th>
                                    <th style="width: 120px; text-align: center; vertical-align: middle;">No Asset</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($frompp as $pp)
                                    <tr>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <div class="form-check d-flex justify-content-center">
                                                <input class="form-check-input chk-stock" type="checkbox" 
                                                    data-idtrans="{{ $pp->idtrans }}" 
                                                    data-id="{{ $pp->id }}"
                                                    data-nama="{{ $pp->uraian }}" 
                                                    data-qty="{{ $pp->quantity }}"
                                                    data-uom="{{ $pp->satuan }}"
                                                    data-sisa="{{ $pp->sisa ??  $pp->quantity }}"
                                                    data-type="{{ $pp->type_barang }}" 
                                                    data-asset="{{ $pp->kode_aset }}"
                                                    data-itemid="{{ $pp->item_id }}"
                                                    @if ($pp->type_barang == '2' && empty($pp->kode_aset)) disabled @endif>
                                            </div>
                                        </td>
                                        <td style="white-space: normal; word-wrap: break-word;">{{ $pp->uraian }}</td>
                                        <td style="text-align: center;">{{ $pp->quantity }}</td>
                                        <td style="text-align: center;">{{ $pp->sisa ?? $pp->quantity }}</td>
                                        <td style="text-align:  center;">{{ $pp->satuan }}</td>
                                        <td style="text-align: center;">
                                            @if ($pp->type_barang == '2' && empty($pp->kode_aset))
                                                <span class="text-danger" style="font-style: italic; font-size: 0.75rem;">
                                                    (harap isi kode aset)
                                                </span>
                                            @else
                                                {{ $pp->kode_aset }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btnConfirmBarang">
                        <i class="fas fa-plus me-1"></i> Tambahkan ke List
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Stock IT -->
    <div class="modal fade" id="modalStock" tabindex="-1" aria-labelledby="modalStock" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMaterial">List Stock IT</h5>
                    <button type="button" class="btn-close text-muted" data-bs-dismiss="modal"
                        aria-label="Close">X</button>
                </div>
                <div class="modal-body" id="obatDetail">
                    <div class="table-responsive">
                        <table id="tableMaterial" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Uraian Barang</th>
                                    <th scope="col">Qty</th>
                                    <th scope="col">UoM</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($stock_it as $d)
                                    <tr>
                                        <td>
                                            <span class="btn badge bg-primary"
                                                onclick="select_barang('{{ $d->id }}','{{ $d->name }}', '{{ $d->unit }}')">
                                                <i class="bi-check-circle me-1"></i>Select
                                            </span>
                                        </td>
                                        <td>{{ $d->name }}</td>
                                        <td>{{ $d->qty }}</td>
                                        <td>{{ $d->uom }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- <script>
        const uomData = @json($uomval);
        const assetData = @json($assetval);

        const types = @json($type);
        var statPR = false;
        var id_item = $('input[name="no_item"]').val();
        var jumlah_item = 0;
        var idx = 0;

        // console.log('uom', uomData);

        $(document).ready(function() {
            $('select[name="detail-type[]"]').each(function() {
                change_type(this, true);
            });
            $('#addItemModal .js-select2').each(function() {
                $(this).select2({
                    dropdownParent: $(this).closest('.position-relative'), // ⬅️ kunci
                    width: '100%',
                    dropdownAutoWidth: true,
                    minimumResultsForSearch: 0
                });
            });
            $('#tableMaterial').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });
            $('#tableStock').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });
            change_type();
        });


        $('#btn-simpan').click(function(e) {

            e.preventDefault();
            // Ambil data header
            var date = $('input[name="date"]').val();
            var remarkH = $('input[name="keterangan"]').val();
            var did = $('input[name="did"]').val();
            // var idpureq = $('input[name="tpuror-idpureq"]').val();

            // Validasi header
            if (!date) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Harap lengkapi semua data pada bagian header!',
                });
                return;
            }

            // Ambil data detail
            var detail_no = document.querySelectorAll('input[name="detail-no[]"]');
            var item = document.querySelectorAll('input[name="detail-item[]"]');
            var type = document.querySelectorAll('select[name="detail-type[]"]');
            var barang = document.querySelectorAll('input[name="detail-barang[]"]');
            var idbarang = document.querySelectorAll('input[name="detail-id[]"]') || [];
            var qty = document.querySelectorAll('input[name="detail-qty[]"]');
            var uom = document.querySelectorAll('select[name="detail-uom[]"]');
            var remark_detail = document.querySelectorAll('input[name="detail-remark[]"]') || [];
            var asset = document.querySelectorAll('select[name="detail-asset[]"]') || [];

            var idtranspp = document.querySelectorAll('input[name="detail-idtrans-formpph[]"]') || [];
            var idpp = document.querySelectorAll('input[name="detail-id-formpp[]"]') || [];
            var kodesap = document.querySelectorAll('input[name="detail-kodesap[]"]') || [];


            var jumlah_item = detail_no.length;

            // Validasi jika tidak ada detail
            if (jumlah_item === 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Data detail tidak boleh kosong!',
                });
                return;
            }

            const isBlank = (v) => v == null || String(v).trim() === '';
            let hasError = false;
            let hasErrorShown = false;

            document.querySelectorAll('select[name="detail-type[]"]').forEach((sel) => {
                const row = sel.closest('tr');
                const typeVal = sel.value;

                // lewati jika baris dihapus
                if (row && row.dataset.deleted === '1') return;

                if (String(typeVal) === '0') { // <-- tetap
                    // cari input idbarang di baris yang sama
                    const row = sel.closest('tr, .row') || document; // <-- tetap
                    // perbaiki selector: coba beberapa kemungkinan
                    const idEl =
                        row.querySelector('input[name="detail-id[]"]') ||
                        row.querySelector('#idbarang');

                    const idbarang = idEl ? idEl.value : null;

                    // pakai helper isBlank supaya ringkas
                    const isEmptyId = isBlank(idbarang);

                    if (isEmptyId) {
                        hasError = true;

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Harap lengkapi ID Barang!',
                        }).then(() => {
                            if (idEl) {
                                idEl.classList.add('is-invalid');
                                if (window.jQuery && jQuery.fn.select2 && idEl.tagName ===
                                    'SELECT') {
                                    jQuery(idEl).select2('open');
                                } else {
                                    idEl.focus();
                                }
                            }
                        });

                    } else {
                        idEl?.classList.remove('is-invalid');
                    }

                } else if (String(typeVal) === '2') { // <-- tetap
                    // cari input di baris yang sama
                    const row = sel.closest('tr, .row') || document; // <-- tetap

                    // ambil element input Kode SAP (tambah fallback satu lagi)
                    const kodesapEl =
                        row.querySelector('input[name="detail-kodesap[]"]') ||
                        row.querySelector('#kodesap');

                    // nilai Kode SAP (string)
                    const kodesapVal = kodesapEl ? kodesapEl.value : '';

                    // fungsi cek kosong -> pakai helper di atas
                    const isBlankLocal = (v) => isBlank(v); // biar barismu tetap “ada fungsi lokal”

                    if (isBlankLocal(kodesapVal)) {
                        hasError = true;

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Harap lengkapi Kode SAP!',
                        }).then(() => {

                            if (kodesapEl) {
                                kodesapEl.focus();
                                kodesapEl.classList.add('is-invalid');
                                if (window.jQuery && jQuery.fn.select2 && kodesapEl.tagName ===
                                    'SELECT') {
                                    jQuery(kodesapEl).select2('open');
                                } else {
                                    kodesapEl.focus();
                                }

                            }
                        });

                        return; // <-- tetap sesuai punyamu
                    } else {
                        kodesapEl?.classList.remove('is-invalid');
                    }
                }
            });

            if (hasError) return;


            var detail = [];
            for (var i = 0; i < jumlah_item; i++) {
                detail.push({
                    'keterangan': detail_no[i].value,
                    'item': item[i].value,
                    'barang': barang[i].value,
                    'idbarang': idbarang[i].value,
                    'qty': qty[i].value,
                    'uom': uom[i].value,
                    'remark': remark_detail[i].value,
                    'asset': asset[i].value,
                    'kodesap': kodesap[i].value,
                    'idtranspp': idtranspp[i].value,
                    'idpp': idpp[i].value,
                    'type': type[i].value
                });
            }
            console.log('detail', detail);

            if (detail.length > 0) {
                var params = {
                    'date': date,
                    'remarkH': remarkH,
                    'did': did,
                    'detail': detail,
                };

                console.log('params', params);
                $(this).append(
                    ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                );
                $(this).attr('disabled', '');

                $.ajax({
                    url: "{{ URL::to('/') }}/trpnbg/update/" + did,
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: {
                        params: params
                    },
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Data berhasil disimpan.',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "{{ URL::to('/') }}/trpnbg";
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat menyimpan data!',
                        });
                    },
                });
            }
        });


        function change_type(el, isInit = false) {
            const $row = $(el).closest('tr');
            const tipe = $row.find('select[name="detail-type[]"]').val();

            const $idInput = $row.find('input[name="detail-id[]"]'); // ID Barang
            const $idGroup = $idInput.closest('.input-group'); // grup ID + tombol search
            const $kodesap = $row.find('input[name="detail-kodesap[]"]'); // Kode SAP (jika ada)
            const $asset = $row.find('select[name="detail-asset[]"]'); // Kode SAP (jika ada)


            // cache nilai sekali saat init
            if (isInit && !$row.data('cached')) {
                $row.data('keepId', $idInput.val());
                $row.data('keepSap', $kodesap.length ? $kodesap.val() : '');
                $row.data('cached', true);
            }

            // update cache sesuai tipe aktif sebelum ubah state (opsional, aman)
            if (!isInit) {
                if (String(tipe) === '0') {
                    $row.data('keepId', $idInput.val());
                } else if (String(tipe) === '2') {
                    if ($kodesap.length) $row.data('keepSap', $kodesap.val());
                }
            }

            if (String(tipe) === '0') {
                // tipe = 0 → pakai ID Barang, jangan hapus valuenya
                $idGroup.show();
                $idInput.prop('disabled', false).prop('readonly', false);

                // nonaktifkan input kodesap tapi JANGAN kosongi
                $kodesap.prop('disabled', true);

                // pastikan nilai id tetap terisi (restore dari cache jika perlu)
                if ($row.data('keepId') != null) $idInput.val($row.data('keepId'));

            } else if (String(tipe) === '1') {
                // tipe = 1 → keduanya nonaktif/tersembunyi, TETAP pertahankan value
                $idGroup.hide();
                $idInput.prop('disabled', true);

                $kodesap.prop('disabled', true);

                // tidak ada .val('') di sini

            } else if (String(tipe) === '2') {
                // tipe = 2 → pakai Kode SAP, jangan hapus valuenya
                $idGroup.hide();
                $idInput.prop('disabled', true);
                $asset.prop('disabled', false);
                $kodesap.prop('disabled', false);

                // pastikan nilai kodesap tetap terisi (restore dari cache jika perlu)
                if ($kodesap.length && $row.data('keepSap') != null) {
                    $kodesap.val($row.data('keepSap'));
                }
            }
        }

        // panggil saat halaman EDIT dibuka agar tampilan sesuai tanpa mereset value
        $(document).ready(function() {
            $('select[name="detail-type[]"]').each(function() {
                change_type(this, true); // init: pertahankan nilai
            });
        });



        function searchItems() {
            var category = 'null';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $.ajax({
                url: "{{ url('/trpnbg/search-pp') }}",
                type: 'GET',
                data: {
                    category
                },
                success: function(response) {
                    console.log('response', response);

                    const listCode = response.map(r => ({
                        ID: r.id,
                        URAIAN: r.uraian,
                        QTY: r.quantity,
                        SISA: r.sisa,
                        SATUAN: r.satuan,
                    }));



                    const dt = $('#myTableMaster').DataTable({
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Halaman _PAGE_ dari _PAGES_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        destroy: true,
                        responsive: true,
                        data: listCode,
                        columns: [{ // checkbox
                                data: 'ID',
                                orderable: false,
                                searchable: false,
                                className: 'text-center',
                                render: function(code, type, row) {
                                    const id = 'chk_' + code.replace(/[^a-zA-Z0-9]/g, '');
                                    const disabled = existingSet.has(code) ?
                                        'disabled checked' : '';
                                    return `<div class="form-check"> <input class="form-check-input row-check" type="checkbox" id="${id}" value="${code}" ${disabled}> </div>`;
                                }
                            },
                            {
                                data: 'URAIAN'
                            },
                            {
                                data: 'QTY'
                            },
                            {
                                data: 'SATUAN'
                            }
                        ]
                    });

                    // Select All → centang semua checkbox yang terlihat di halaman aktif
                    $('#chkMasterAll').off('change').on('change', function() {
                        $('#myTableMaster tbody input.row-check:visible:not(:disabled)')
                            .prop('checked', this.checked);
                    });

                    // Jika user centang/uncentang per-baris → update master (sederhana)
                    $('#myTableMaster').off('change', 'tbody input.row-check')
                        .on('change', 'tbody input.row-check', function() {
                            const $all = $('#myTableMaster tbody input.row-check:visible:not(:disabled)');
                            const allChecked = $all.length && $all.filter(':checked').length === $all
                                .length;
                            $('#chkMasterAll').prop('checked', allChecked);
                        });

                    // Buka modal
                    $('#codeModal').modal('show');

                    // Tombol Tambah Terpilih
                    $('#btnAddSelected').off('click').on('click', function() {
                        const nodes = dt.rows().nodes(); // semua halaman
                        $(nodes).each(function() {
                            const $row = $(this);
                            const $chk = $row.find('input.row-check');
                            if ($chk.is(':checked') && !$chk.is(':disabled')) {
                                const data = dt.row($row).data(); // {KAT,CODE,MERK,DEPT,USER}

                                // mapping ke format yang dibutuhkan addRow()
                                const mapped = {
                                    source: data.SOURCE,
                                    kategori: data.KAT,
                                    code: data.CODE,
                                    kode_sap: data.KODE_SAP,
                                    merk: data.MERK,
                                    type: data.TYPE,
                                    qty: data.QTY,
                                    user: data.USER,
                                    user_location: data.USER
                                };

                                addRow(mapped); // gunakan function addRow kamu
                                $chk.prop('disabled', true).prop('checked',
                                    true); // tandai sudah ditambahkan
                            }
                        });

                        // reset master checkbox, lalu tutup modal
                        $('#checkAllMaster').prop('checked', false);
                        $('#codeModal').modal('hide');
                    });
                },
                error: function(xhr) {
                    console.error('AJAX request error:', xhr.responseText);
                    Swal.fire({
                        title: 'Warning!',
                        text: 'Data tidak ditemukan.',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                }
            });

        }
        $('#detail-item').on('click', '.btn-search', function() {
            // bersihkan tanda waiting lama
            $('.waiting, .waiting-barang, .waiting-uom')
                .removeClass('waiting waiting-barang waiting-uom');

            // tandai elemen di baris ini
            const $row = $(this).closest('tr');
            $row.find('input[name="detail-id[]"]').addClass('waiting');
            $row.find('input[name="detail-barang[]"]').addClass('waiting-barang');
            $row.find('select[name="detail-uom[]"]').addClass('waiting-uom');

            $('#modalStock').modal('show'); // pastikan ID modalnya ini yg bener
        });

        $("#additem").click(function() {
            jumlah_item++;
            id_item = (parseInt(id_item, 10) || 0) + 10;
            console.log('uom', uomData);
            console.log('types', types);


            // Tambahkan baris baru
            var newRow = $(`
                    <tr class="detail-row">
                        <td scope="row">
                            <button class="btn btn-danger btn-sm hapus" type="button">X</button>
                            <input type="hidden" name="detail-no[]" id="detail-no-${idx}" value="insert"/>
                            <input type="hidden" name="detail-ppnumber[]" id="detail-ppnumber-${idx}"/>

                        </td>
                        <td>
                            <input type="text" class="form-control" name="detail-item[]" value="` + id_item + `" disabled>
                        </td>
                           <td scope="row">
                            <select name="detail-type[]" class="form-select" onchange="change_type(this)" id="detail-type-${idx}" style="width: 150px;">
                                ` + types.map(type =>
                `<option value="${type.value}">${type.value} - ${type.name}</option>`).join('') + `
                            </select>
                        </td>                    
                        <td scope="row">
                            <div class="detail-barang input-group mb-3">

                                <!-- nama barang -->
                                <input type="text" name="detail-barang[]" 
                                    placeholder="Uraian Barang" 
                                    class="form-control id-barang">

                            </div>
                        </td>
                         <td scope="row">
                            <div class="detail-barang input-group mb-3">
                              <!-- nama barang -->
                                <input type="text" name="detail-id[]" 
                                    placeholder="ID Barang" 
                                    class="form-control id-barang" readonly>
                                <span class="input-group-text bg-primary text-light btn-search" 
                                    style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </td>

                        <td scope="row">
                        <input type="number" class="form-control" name="detail-qty[]" id="detail-qty-${idx}" value="1">
                        </td>

                    <td scope="row">
                        <!-- Select UOM -->
                        <select name="detail-uom[]" class="form-select" id="detail-uom-${idx}" >
                            <option value="" disabled selected></option>
                            ${Object.entries(uomData).map(([key, uom]) => `<option value="${key}">${uom.name}</option>`).join('')}
                        </select>
                    </td>    

                     <td scope="row">
                        <!-- Select UOM -->
                        <select name="detail-asset[]" class="form-select" id="detail-asset-${idx}" >
                            <option value="" disabled selected></option>
                            ${Object.entries(assetData).map(([key, asset]) => `<option value="${key}">${asset.name}</option>`).join('')}
                        </select>
                    </td>  
                       <td><input type="text" class="form-control" name="detail-kodesap[]" disabled></td>
                    <td scope="row">
                        <input type="text" class="form-control" name="detail-remark[]" value="">
                    </td>
                                 <input type="hidden" name="detail-idtrans-formpph[]" value="">
                    <input type="hidden" name="detail-id-formpp[]" value="">
                </tr>
                `);

            // Tambahkan baris baru ke dalam tabel
            $('#detail-item').append(newRow);

            // // Fungsi klik untuk tombol hapus
            // newRow.find('.hapus').on('click', function() {
            //     $(this).closest('tr').remove();
            //     jumlah_item--;
            // });

            idx++

        });

        // Tombol hapus pada row (lama/baru)
        $('#detail-item').on('click', '.hapus', function() {
            const $tr = $(this).closest('tr');
            const isExisting = $(this).data('existing') === 1; // row dari DB?

            if (isExisting) {
                // tandai delete, tapi biarkan tampak menghilang di UI
                $tr.attr('data-deleted', '1').hide();
                $tr.find('input[name="detail-no[]"]').val('delete');
            } else {
                // baris baru: hapus langsung
                $tr.remove();
            }
        });
        // Event delegation: listen klik tombol .hapus di dalam tabel #detail-item



        $("#add-frompp").click(function() {
            // buka modal daftar stok
            $('#modalPP').modal('show');
        });


        $("#checkAll").on("change", function() {
            $(".chk-stock").prop("checked", $(this).is(":checked"));
        });

        $("#btnConfirmBarang").click(function() {
            const checked = $(".chk-stock:checked");

            if (checked.length === 0) {
                Swal.fire('Perhatian', 'Belum ada barang yang dipilih!', 'warning');
                return;
            }

            checked.each(function() {
                jumlah_item++;
                id_item = (parseInt(id_item, 10) || 0) + 10;

                const id = $(this).data('id');
                const nama = $(this).data('nama');
                const qty = $(this).data('qty');
                const sisa = $(this).data('sisa');
                const uom = $(this).data('uom');
                const asset = $(this).data('asset');
                const type = $(this).data('type');
                const idtrans = $(this).data('idtrans');

                // console.log('sisa', sisa);

                const newRow = $(`
                    <tr class="detail-row">
                    <td>
                        <button class="btn btn-danger btn-sm hapus" type="button">X</button>
                        <input type="hidden" name="detail-no[]" value="insert"/>
                        <input type="hidden" name="detail-ppnumber[]"/>
                    </td>
                    <td>
                        <input type="hidden" name="detail-item[]" value="${id_item}" />
                        ${id_item}
                    </td>
                    <td scope="row">
                                    <select name="detail-type[]" class="form-select" onchange="change_type(this)" id="detail-type-${idx}" style="width: 150px;" data-type="${type}">
                                      ${
            types.map(t => `
                                                <option value="${t.value}" ${String(t.value) === String(type) ? 'selected' : ''}>
                                                    ${t.value} - ${t.name}
                                                </option>
                                            `).join('')
        }
                                    </select>
                                </td> 
                                <td scope="row">
                                    <div class="detail-id input-group mb-3">
                                
                                        <!-- nama barang -->
                                        <input type="text" name="detail-barang[]" 
                                            placeholder="Uraian Barang" 
                                            class="form-control id-barang" value="${nama}" readonly>
                                    
                                    </div>
                                </td>
                                <td scope="row">
                                    <div class="detail-barang input-group mb-3">
                                    <!-- nama barang -->
                                        <input type="text" name="detail-id[]" 
                                            placeholder="ID Barang" 
                                            class="form-control id-barang" readonly>
                                        <span class="input-group-text bg-primary text-light btn-search" 
                                            style="cursor: pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    
                                </td>
                            
                    
                    <td><input type="number" class="form-control" name="detail-qty[]" value="${sisa}" min="0.01"></td>
                    <td>
                        <select name="detail-uom[]" class="form-select">
                            <option value="" disabled></option>
                            ${uomData.map(u => `<option value="${u.value}" ${u.value === uom ? 'selected' : ''}>${u.name}</option>`).join('')}
                        </select>
                    </td>
                          <td>
                        <select name="detail-asset[]" class="form-select">
                            <option value="" disabled></option>
                            ${assetData.map(a => `<option value="${a.value}" ${a.value === asset ? 'selected' : ''}>${a.name}</option>`).join('')}
                        </select>
                    </td>
                    <td><input type="text" class="form-control" name="detail-kodesap[]" value="${asset}" disabled></td>
                    <td><input type="text" class="form-control" name="detail-remark[]" ></td>
                <input type="hidden" name="detail-idtrans-formpph[]" value="${idtrans}">
                <input type="hidden" name="detail-id-formpp[]" value="${id}">

                </tr>
                `);

                $('#detail-item').append(newRow);
                const $sel = newRow.find(`#detail-type-${idx}`);
                if ($sel.length) {
                    change_type($sel[0]);
                }
                // tombol hapus
                newRow.find('.hapus').on('click', function() {
                    $(this).closest('tr').remove();
                    jumlah_item--;
                });

                idx++;
            });

            // tutup modal setelah selesai
            $('#modalPP').modal('hide');
        });


        function select_item(obj) {
            $('.waiting').removeClass('waiting');
            $('.waiting-barang').removeClass('waiting-barang');
            $('.waiting-uom').removeClass('waiting-uom');

            $(obj).parents('.input-group').find('input[name="detail-id[]"]').addClass('waiting');
            $(obj).parents('tr').find('input[name="detail-barang[]"]').addClass('waiting-barang');
            $(obj).parents('tr').find('select[name="detail-uom[]"]').addClass('waiting-uom');
        }


        function select_barang(id, barang, uom) {
            // isi field yang sedang menunggu
            $('.waiting').val(id);
            $('.waiting-barang').val(barang);
            $('.waiting-uom').val(uom);

            // hapus tanda waiting
            $('.waiting, .waiting-barang, .waiting-uom')
                .removeClass('waiting waiting-barang waiting-uom');

            // tutup modal
            $('#modalStock').modal('hide');
        }
    </script> --}}
    <script>
        const uomData = @json($uomval);
        const assetData = @json($assetval);
        const types = @json($type);
        var statPR = false;
        var id_item = $('input[name="no_item"]').val();
        var jumlah_item = 0;
        var idx = 0;
        
        // Tracking data yang sudah ditambahkan
        let addedItems = new Set();
        let tableStockDT;
    
        $(document).ready(function() {
            // Inisialisasi addedItems dari data yang sudah ada
            $('tr.detail-row').each(function() {
                const idtrans = $(this).find('input[name="detail-idtrans-formpph[]"]').val();
                const idpp = $(this).find('input[name="detail-id-formpp[]"]').val();
                if (idtrans && idpp) {
                    addedItems.add(`${idtrans}-${idpp}`);
                }
            });
    
            // Inisialisasi change_type untuk data existing
            $('select[name="detail-type[]"]').each(function() {
                change_type(this, true);
            });
    
            $('#addItemModal .js-select2').each(function() {
                $(this).select2({
                    dropdownParent: $(this).closest('.position-relative'),
                    width: '100%',
                    dropdownAutoWidth: true,
                    minimumResultsForSearch: 0
                });
            });
            
            $('#tableMaterial').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu":  "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered":  "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });
            
            tableStockDT = $('#tableStock').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords":  "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered":  "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
                "drawCallback": function() {
                    $('.chk-stock').each(function() {
                        const idtrans = $(this).data('idtrans');
                        const id = $(this).data('id');
                        const uniqueKey = `${idtrans}-${id}`;
                        
                        if (addedItems.has(uniqueKey)) {
                            $(this).prop('disabled', true).prop('checked', true);
                        }
                    });
                }
            });
    
            // Event handler untuk button search - HARUS di dalam document.ready
            $('#detail-item').on('click', '.btn-search', function(e) {
                e.preventDefault();
                
                console.log('Button search clicked'); // Untuk debugging
                
                // Bersihkan tanda waiting lama
                $('.waiting, .waiting-barang, .waiting-uom')
                    .removeClass('waiting waiting-barang waiting-uom');
    
                // Tandai elemen di baris ini
                const $row = $(this).closest('tr');
                $row.find('input[name="detail-id[]"]').addClass('waiting');
                $row.find('input[name="detail-barang[]"]').addClass('waiting-barang');
                $row.find('select[name="detail-uom[]"]').addClass('waiting-uom');
    
                $('#modalStock').modal('show');
            });
    
            // Event handler untuk Add Item
            $("#additem").on('click', function() {
                jumlah_item++;
                id_item = (parseInt(id_item, 10) || 0) + 10;
    
                var newRow = $(`
                    <tr class="detail-row">
                        <td scope="row">
                            <button class="btn btn-danger btn-sm hapus" type="button">X</button>
                            <input type="hidden" name="detail-no[]" id="detail-no-${idx}" value="insert"/>
                            <input type="hidden" name="detail-ppnumber[]" id="detail-ppnumber-${idx}"/>
                        </td>
                        <td>
                            <input type="text" class="form-control" name="detail-item[]" value="${id_item}" disabled>
                        </td>
                        <td scope="row">
                            <select name="detail-type[]" class="form-select" onchange="change_type(this)" id="detail-type-${idx}" style="width: 150px;">
                                ${types.map(type => `<option value="${type.value}">${type.value} - ${type.name}</option>`).join('')}
                            </select>
                        </td>                    
                        <td scope="row">
                            <div class="detail-barang input-group mb-3">
                                <input type="text" name="detail-barang[]" 
                                    placeholder="Uraian Barang" 
                                    class="form-control id-barang">
                            </div>
                        </td>
                        <td scope="row">
                            <div class="detail-barang input-group mb-3">
                                <input type="text" name="detail-id[]" 
                                    placeholder="ID Barang" 
                                    class="form-control id-barang" readonly>
                                <span class="input-group-text bg-primary text-light btn-search" 
                                    style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </td>
                        <td scope="row">
                            <input type="number" class="form-control" name="detail-qty[]" id="detail-qty-${idx}" value="1">
                        </td>
                        <td scope="row">
                            <select name="detail-uom[]" class="form-select" id="detail-uom-${idx}">
                                <option value="" disabled selected></option>
                                ${Object.entries(uomData).map(([key, uom]) => `<option value="${key}">${uom. name}</option>`).join('')}
                            </select>
                        </td>    
                        <td scope="row">
                            <select name="detail-asset[]" class="form-select" id="detail-asset-${idx}">
                                <option value="" disabled selected></option>
                                ${Object.entries(assetData).map(([key, asset]) => `<option value="${key}">${asset.name}</option>`).join('')}
                            </select>
                        </td>  
                        <td><input type="text" class="form-control" name="detail-kodesap[]" disabled></td>
                        <td scope="row">
                            <input type="text" class="form-control" name="detail-remark[]" value="">
                        </td>
                        <input type="hidden" name="detail-idtrans-formpph[]" value="">
                        <input type="hidden" name="detail-id-formpp[]" value="">
                    </tr>
                `);
    
                $('#detail-item tbody').append(newRow);
                idx++;
            });
    
            // Event handler untuk Add from PO
            $("#add-frompp").on('click', function() {
                $('#modalPP').modal('show');
            });
    
            // CHECK ALL HANDLER
            $("#checkAll").on("change", function() {
                const isChecked = $(this).is(":checked");
                $(".chk-stock: not(:disabled)").prop("checked", isChecked);
            });
    
            // HAPUS ROW (dengan tracking untuk existing dan new rows)
            $('#detail-item').on('click', '.hapus', function() {
                const uniqueKey = $(this).data('unique');
                const $tr = $(this).closest('tr');
                const isExisting = $(this).data('existing') === 1;
    
                // Hapus dari tracking jika ada
                if (uniqueKey) {
                    addedItems.delete(uniqueKey);
                    
                    // Re-enable checkbox di modal
                    $('.chk-stock').each(function() {
                        const itemKey = `${$(this).data('idtrans')}-${$(this).data('id')}`;
                        if (itemKey === uniqueKey) {
                            $(this).prop('disabled', false).prop('checked', false);
                        }
                    });
                }
    
                if (isExisting) {
                    // Row dari DB:  tandai delete tapi hide di UI
                    $tr.attr('data-deleted', '1').hide();
                    $tr.find('input[name="detail-no[]"]').val('delete');
                } else {
                    // Row baru:  hapus langsung
                    $tr.remove();
                }
                
                jumlah_item--;
            });
    
        }); // End of document.ready
    
        // ========== BUTTON SIMPAN ==========
        $('#btn-simpan').click(function(e) {
            e.preventDefault();
            
            // Ambil data header
            var date = $('input[name="date"]').val();
            var remarkH = $('input[name="keterangan"]').val();
            var did = $('input[name="did"]').val();
    
            // Validasi header
            if (!date) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal! ',
                    text: 'Harap lengkapi semua data pada bagian header!',
                });
                return;
            }
    
            // Ambil data detail (termasuk yang di-hide tapi marked delete)
            var detail_no = document.querySelectorAll('input[name="detail-no[]"]');
            var item = document.querySelectorAll('input[name="detail-item[]"]');
            var type = document. querySelectorAll('select[name="detail-type[]"]');
            var barang = document.querySelectorAll('input[name="detail-barang[]"]');
            var idbarang = document.querySelectorAll('input[name="detail-id[]"]') || [];
            var qty = document.querySelectorAll('input[name="detail-qty[]"]');
            var uom = document. querySelectorAll('select[name="detail-uom[]"]');
            var remark_detail = document.querySelectorAll('input[name="detail-remark[]"]') || [];
            var asset = document.querySelectorAll('select[name="detail-asset[]"]') || [];
            var idtranspp = document.querySelectorAll('input[name="detail-idtrans-formpph[]"]') || [];
            var idpp = document.querySelectorAll('input[name="detail-id-formpp[]"]') || [];
            var kodesap = document.querySelectorAll('input[name="detail-kodesap[]"]') || [];
    
            var jumlah_item = detail_no.length;
    
            // Validasi jika tidak ada detail (kecuali yang di-delete)
            var activeItems = Array.from(detail_no).filter((el, i) => el.value !== 'delete');
            if (activeItems.length === 0) {
                Swal. fire({
                    icon: 'error',
                    title: 'Gagal!',
                    text: 'Data detail tidak boleh kosong!',
                });
                return;
            }
    
            const isBlank = (v) => v == null || String(v).trim() === '';
            let hasError = false;
    
            // Validasi hanya untuk row yang tidak di-delete
            document.querySelectorAll('select[name="detail-type[]"]').forEach((sel, index) => {
                const row = sel.closest('tr');
                
                // Skip validasi jika baris dihapus
                if (row && row.dataset.deleted === '1') return;
                
                const typeVal = sel.value;
    
                if (String(typeVal) === '0') {
                    const idEl = row.querySelector('input[name="detail-id[]"]') || row.querySelector('#idbarang');
                    const idbarang = idEl ? idEl.value : null;
                    const isEmptyId = isBlank(idbarang);
    
                    if (isEmptyId) {
                        hasError = true;
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Harap lengkapi ID Barang!',
                        }).then(() => {
                            if (idEl) {
                                idEl. classList.add('is-invalid');
                                if (window.jQuery && jQuery.fn.select2 && idEl.tagName === 'SELECT') {
                                    jQuery(idEl).select2('open');
                                } else {
                                    idEl.focus();
                                }
                            }
                        });
                    } else {
                        idEl?. classList.remove('is-invalid');
                    }
    
                } else if (String(typeVal) === '2') {
                    const kodesapEl = row.querySelector('input[name="detail-kodesap[]"]') || row.querySelector('#kodesap');
                    const kodesapVal = kodesapEl ? kodesapEl.value : '';
    
                    if (isBlank(kodesapVal)) {
                        hasError = true;
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text:  'Harap lengkapi Kode SAP!',
                        }).then(() => {
                            if (kodesapEl) {
                                kodesapEl.focus();
                                kodesapEl.classList.add('is-invalid');
                            }
                        });
                        return;
                    } else {
                        kodesapEl?.classList.remove('is-invalid');
                    }
                }
            });
    
            if (hasError) return;
    
            var detail = [];
            for (var i = 0; i < jumlah_item; i++) {
                detail.push({
                    'keterangan': detail_no[i].value,
                    'item': item[i].value,
                    'barang': barang[i].value,
                    'idbarang': idbarang[i].value,
                    'qty':  qty[i].value,
                    'uom': uom[i].value,
                    'remark': remark_detail[i]. value,
                    'asset': asset[i].value,
                    'kodesap': kodesap[i].value,
                    'idtranspp': idtranspp[i].value,
                    'idpp': idpp[i].value,
                    'type': type[i].value
                });
            }
    
            if (detail.length > 0) {
                var params = {
                    'date': date,
                    'remarkH': remarkH,
                    'did': did,
                    'detail': detail,
                };
    
                console.log('params', params);
                $(this).append(
                    ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                );
                $(this).attr('disabled', '');
    
                $.ajax({
                    url: "{{ URL::to('/') }}/trpnbg/update/" + did,
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: {
                        params: params
                    },
                    success: function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text:  'Data berhasil disimpan.',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "{{ URL::to('/') }}/trpnbg";
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal!',
                            text: 'Terjadi kesalahan saat menyimpan data! ',
                        });
                    },
                });
            }
        });
    
        // CONFIRM BARANG (Ambil SEMUA data yang di-check dari DataTable)
        $("#btnConfirmBarang").click(function() {
            const allRows = tableStockDT.rows().nodes();
            const checkedItems = [];
            
            $(allRows).each(function() {
                const checkbox = $(this).find('.chk-stock');
                if (checkbox.is(':checked') && ! checkbox.is(':disabled')) {
                    checkedItems.push({
                        checkbox: checkbox,
                        idtrans: checkbox.data('idtrans'),
                        id: checkbox.data('id'),
                        nama: checkbox.data('nama'),
                        qty: checkbox.data('qty'),
                        sisa: checkbox. data('sisa'),
                        uom: checkbox. data('uom'),
                        asset: checkbox.data('asset'),
                        type: checkbox.data('type'),
                        itemid: checkbox.data('itemid')
                    });
                }
            });
    
            if (checkedItems.length === 0) {
                Swal.fire('Perhatian', 'Belum ada barang yang dipilih!', 'warning');
                return;
            }
    
            checkedItems.forEach(function(item) {
                jumlah_item++;
                id_item = (parseInt(id_item, 10) || 0) + 10;
    
                const uniqueKey = `${item.idtrans}-${item.id}`;
    
                const newRow = $(`
                    <tr class="detail-row">
                        <td>
                            <button class="btn btn-danger btn-sm hapus" type="button" data-unique="${uniqueKey}">X</button>
                            <input type="hidden" name="detail-no[]" value="insert"/>
                            <input type="hidden" name="detail-ppnumber[]"/>
                        </td>
                        <td>
                            <input type="text" class="form-control" name="detail-item[]" value="${id_item}" disabled>
                        </td>
                        <td scope="row">
                            <select name="detail-type[]" class="form-select" onchange="change_type(this)" id="detail-type-${idx}" style="width: 150px;" data-type="${item.type}">
                                ${types.map(t => `
                                    <option value="${t. value}" ${String(t.value) === String(item.type) ? 'selected' : ''}>
                                        ${t. value} - ${t.name}
                                    </option>
                                `).join('')}
                            </select>
                        </td> 
                        <td scope="row">
                            <div class="detail-id input-group mb-3">
                                <input type="text" name="detail-barang[]" 
                                    placeholder="Uraian Barang" 
                                    class="form-control id-barang" value="${item.nama}" readonly>
                            </div>
                        </td>
                        <td scope="row">
                            <div class="detail-barang input-group mb-3">
                                <input type="text" name="detail-id[]" 
                                    placeholder="ID Barang" 
                                    class="form-control id-barang" readonly value="${item.itemid || ''}">
                                <span class="input-group-text bg-primary text-light btn-search" 
                                    style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </td>
                        <td><input type="number" class="form-control" name="detail-qty[]" value="${item.sisa}" min="0. 01"></td>
                        <td>
                            <select name="detail-uom[]" class="form-select">
                                <option value="" disabled></option>
                                ${uomData.map(u => `<option value="${u.value}" ${u.value === item.uom ?  'selected' : ''}>${u.name}</option>`).join('')}
                            </select>
                        </td>
                        <td>
                            <select name="detail-asset[]" class="form-select">
                                <option value="" disabled></option>
                                ${assetData.map(a => `<option value="${a.value}" ${a.value === item.asset ? 'selected' : ''}>${a.name}</option>`).join('')}
                            </select>
                        </td>
                        <td><input type="text" class="form-control" name="detail-kodesap[]" value="${item. asset}" disabled></td>
                        <td><input type="text" class="form-control" name="detail-remark[]"></td>
                        <input type="hidden" name="detail-idtrans-formpph[]" value="${item.idtrans}">
                        <input type="hidden" name="detail-id-formpp[]" value="${item. id}">
                    </tr>
                `);
    
                $('#detail-item tbody').append(newRow);
                
                const $sel = newRow.find(`#detail-type-${idx}`);
                if ($sel.length) {
                    change_type($sel[0], true);
                }
                
                // Tambahkan ke tracking
                addedItems.add(uniqueKey);
                
                // Disable checkbox
                item.checkbox.prop('disabled', true).prop('checked', true);
    
                idx++;
            });
    
            // Reset checkAll
            $('#checkAll').prop('checked', false);
            
            $('#modalPP').modal('hide');
            
            Swal.fire({
                icon: 'success',
                title: 'Berhasil! ',
                text: `${checkedItems.length} item berhasil ditambahkan`,
                timer: 1500,
                showConfirmButton: false
            });
        });
    
        // ========== HELPER FUNCTIONS ==========
        function select_item(obj) {
            $('.waiting').removeClass('waiting');
            $('.waiting-barang').removeClass('waiting-barang');
            $('.waiting-uom').removeClass('waiting-uom');
    
            $(obj).parents('. input-group').find('input[name="detail-id[]"]').addClass('waiting');
            $(obj).parents('tr').find('input[name="detail-barang[]"]').addClass('waiting-barang');
            $(obj).parents('tr').find('select[name="detail-uom[]"]').addClass('waiting-uom');
        }
    
        // Function change_type dengan mode init untuk preserve value
        function change_type(el, isInit = false) {
            const $row = $(el).closest('tr');
            const tipe = $row.find('select[name="detail-type[]"]').val();
    
            const $idInput = $row.find('input[name="detail-id[]"]'); // ID Barang
            const $idGroup = $idInput.closest('.input-group'); // grup ID + tombol search
            const $kodesap = $row.find('input[name="detail-kodesap[]"]'); // Kode SAP
            const $asset = $row.find('select[name="detail-asset[]"]'); // Asset
    
            // Cache nilai sekali saat init
            if (isInit && ! $row.data('cached')) {
                $row.data('keepId', $idInput.val());
                $row.data('keepSap', $kodesap.length ?  $kodesap.val() : '');
                $row.data('cached', true);
            }
    
            // Update cache sesuai tipe aktif sebelum ubah state (opsional)
            if (!isInit) {
                if (String(tipe) === '0') {
                    $row.data('keepId', $idInput.val());
                } else if (String(tipe) === '2') {
                    if ($kodesap.length) $row.data('keepSap', $kodesap.val());
                }
            }
    
            if (String(tipe) === '0') {
                // tipe = 0 → pakai ID Barang, jangan hapus valuenya
                $idGroup.show();
                $idInput.prop('disabled', false).prop('readonly', false);
                $kodesap.prop('disabled', true);
                $asset.prop('disabled', true);
    
                // Restore nilai dari cache jika perlu
                if ($row.data('keepId') != null) $idInput.val($row.data('keepId'));
    
            } else if (String(tipe) === '1') {
                // tipe = 1 → keduanya nonaktif, pertahankan value
                $idGroup.hide();
                $idInput.prop('disabled', true);
                $kodesap.prop('disabled', true);
                $asset.prop('disabled', true);
    
            } else if (String(tipe) === '2') {
                // tipe = 2 → pakai Kode SAP, jangan hapus valuenya
                $idGroup.hide();
                $idInput.prop('disabled', true);
                $asset.prop('disabled', false);
                $kodesap.prop('disabled', false);
    
                // Restore nilai dari cache jika perlu
                if ($kodesap.length && $row.data('keepSap') != null) {
                    $kodesap.val($row.data('keepSap'));
                }
            }
        }
    
        function select_barang(id, barang, uom) {
            $('.waiting').val(id);
            $('.waiting-barang').val(barang);
            $('.waiting-uom').val(uom);
    
            $('.waiting, .waiting-barang, .waiting-uom')
                .removeClass('waiting waiting-barang waiting-uom');
    
            $('#modalStock').modal('hide');
        }
    </script>
@endsection