@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->add == '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-6">
                <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-12">
                                <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"
                                                    placeholder="--" 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="{{ date('Y-m-d') }}" readonly>
                                            </div>
                                            <p></p>
                                            <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"
                                                    required>
                                            </div>
                                        </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 style="width:60px">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">

                                </tbody>
                            </table>
                            <input type="hidden" id="jumlah_item" value="0" />
                        </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 }}"
                                                    @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($uom);
        const assetData = @json($asset);
        const types = @json($type);
        var statPR = false;
        var id_item = 0;
        var jumlah_item = 0;
        var idx = 0;

        // Tracking data yang sudah ditambahkan
        let addedItems = new Set();
        let tableStockDT;

        $(document).ready(function() {
            $('#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,
            });
            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() {
                    // Update checkbox berdasarkan data yang sudah ditambahkan
                    $('. 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);
                        }
                    });
                }
            });
        });

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

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

            // Validasi header
            if (!date || !remarkH) {
                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 asset = document.querySelectorAll('select[name="detail-asset[]"]');

            var kodesap = document.querySelectorAll('input[name="detail-kodesap[]"]');

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

            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;
            type.forEach((sel) => {
                const typeVal = sel.value; // <-- ini yang kamu butuhkan
                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; // hentikan submit kalau ada error

            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,
                    '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/store",
                    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 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 = id_item + 10;
            // 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 scope="row"><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;">
                                    ` + 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}" >a.
                                <option value="" disabled selected></option>
                                ` + uomData.map(uom => `<option value="${uom.value}">${uom.name}</option>`).join('') + `
                            </select>
                        </td>   
                           <td scope="row">
                            <!-- Select Asset -->
                               <select name="detail-asset[]" class="form-select" disabled>
                        <option value=""></option>
                        ${assetData.map(a=> `<option value="${a.value}">${a.name}</option>`).join('')}
                    </select>
                </td>
                        </td>   
                         <td scope="row">
                            <input type="text" class="form-control" name="detail-kodesap[]" value="">
                        </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++

        });

        $("#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 += 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" disabled>
                        <option value=""></option>
                        ${assetData.map(a=> `<option value="${a.value}">${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 $selType = newRow.find('select[name="detail-type[]"]');
                if ($selType.length) {
                    change_type($selType[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 change_type(el) {
            const $row = $(el).closest('tr');
            const tipe = $row.find('select[name="detail-type[]"]').val();

            // target input ID yg benar (bukan select)
            const $idInput = $row.find('input[name="detail-id[]"]');
            // sembunyikan/ tampilkan grup input ID (pakai parent .input-group yg sudah ada)
            const $idGroup = $idInput.closest('.input-group');
            const $kodesap = $row.find('input[name="detail-kodesap[]"]');
            const $asset = $row.find('select[name="detail-asset[]"]');


            console.log('tipe', tipe);

            if (String(tipe) === '0') {
                // tipe = 0 → idGroup & idInput tampil, kodesap tidak tampil
                $idGroup.show();
                $idInput.prop('disabled', false).val('');
                $asset.prop('disabled', true).val('');

                $kodesap.prop('disabled', true).val('');
            } else if (String(tipe) === '1') {
                // tipe = 1 → idGroup & idInput tidak tampil, kodesap tidak tampil
                $idGroup.hide();
                $idInput.prop('disabled', true).val('');
                $asset.prop('disabled', true).val('');

                $kodesap.prop('disabled', true).val('');
            } else if (String(tipe) === '2') {
                // tipe = 2 → idGroup & idInput tidak tampil, kodesap tampil
                $idGroup.hide();
                $idInput.prop('disabled', true).val('');
                $asset.prop('disabled', false);

                $kodesap.prop('disabled', false);
            }

        }

        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($uom);
        const assetData = @json($asset);
        const types = @json($type);
        var statPR = false;
        var id_item = 0;
        var jumlah_item = 0;
        var idx = 0;
        
        // Tracking data yang sudah ditambahkan
        let addedItems = new Set();
        let tableStockDT; // DataTable instance
    
        $(document).ready(function() {
            $('#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,
            });
            
            // Simpan instance DataTable dengan drawCallback
            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() {
                    // Perbaiki:  Hilangkan spasi di selector
                    $('.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);
                        }
                    });
                }
            });
    
            // PENTING: Event handler untuk button search harus di dalam document.ready
            $('#detail-item').on('click', '.btn-search', function(e) {
                e.preventDefault(); // Tambahkan ini untuk mencegah default action
                
                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');
    
                // Tampilkan modal
                $('#modalStock').modal('show');
            });
    
            // Event handler untuk tombol Add Item
            $("#additem").on('click', function() {
                jumlah_item++;
                id_item = id_item + 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 scope="row"><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;">
                                ${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>
                                ${uomData.map(uom => `<option value="${uom.value}">${uom. name}</option>`).join('')}
                            </select>
                        </td>   
                        <td scope="row">
                            <select name="detail-asset[]" class="form-select" disabled>
                                <option value=""></option>
                                ${assetData.map(a => `<option value="${a.value}">${a.name}</option>`).join('')}
                            </select>
                        </td>
                        <td scope="row">
                            <input type="text" class="form-control" name="detail-kodesap[]" value="">
                        </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)
            $('#detail-item').on('click', '.hapus', function() {
                const uniqueKey = $(this).data('unique');
                const $tr = $(this).closest('tr');
                
                // 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);
                        }
                    });
                }
                
                $tr.remove();
                jumlah_item--;
            });
    
        }); // End of document. ready
    
        // ========== BUTTON SIMPAN (bisa di luar document.ready) ==========
        $('#btn-simpan').click(function(e) {
            e.preventDefault();
            
            // Ambil data header
            var date = $('input[name="date"]').val();
            var remarkH = $('input[name="keterangan"]').val();
    
            // Validasi header
            if (!date || !remarkH) {
                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 asset = document.querySelectorAll('select[name="detail-asset[]"]');
            var kodesap = document.querySelectorAll('input[name="detail-kodesap[]"]');
            var remark_detail = document.querySelectorAll('input[name="detail-remark[]"]') || [];
            var idtranspp = document.querySelectorAll('input[name="detail-idtrans-formpph[]"]') || [];
            var idpp = document.querySelectorAll('input[name="detail-id-formpp[]"]') || [];
    
            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;
    
            type.forEach((sel) => {
                const typeVal = sel.value;
                if (String(typeVal) === '0') {
                    const row = sel.closest('tr, .row') || document;
                    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 row = sel.closest('tr, .row') || document;
                    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,
                    'detail': detail,
                };
    
                $(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/store",
                    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')
                    });
                }
            });
    
            if (checkedItems.length === 0) {
                Swal.fire('Perhatian', 'Belum ada barang yang dipilih!', 'warning');
                return;
            }
    
            checkedItems.forEach(function(item) {
                jumlah_item++;
                id_item += 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="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="${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>
                                <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" disabled>
                                <option value=""></option>
                                ${assetData.map(a => `<option value="${a.value}">${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 $selType = newRow.find('select[name="detail-type[]"]');
                if ($selType.length) {
                    change_type($selType[0]);
                }
                
                //  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(el) {
            const $row = $(el).closest('tr');
            const tipe = $row.find('select[name="detail-type[]"]').val();
    
            const $idInput = $row.find('input[name="detail-id[]"]');
            const $idGroup = $idInput.closest('.input-group');
            const $kodesap = $row.find('input[name="detail-kodesap[]"]');
            const $asset = $row.find('select[name="detail-asset[]"]');
    
            if (String(tipe) === '0') {
                $idGroup.show();
                $idInput.prop('disabled', false).val('');
                $asset.prop('disabled', true).val('');
                $kodesap.prop('disabled', true).val('');
            } else if (String(tipe) === '1') {
                $idGroup. hide();
                $idInput. prop('disabled', true).val('');
                $asset.prop('disabled', true).val('');
                $kodesap.prop('disabled', true).val('');
            } else if (String(tipe) === '2') {
                $idGroup.hide();
                $idInput.prop('disabled', true).val('');
                $asset.prop('disabled', false);
                $kodesap.prop('disabled', false);
            }
        }
    
        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