@extends('master')
@section('content')

    @if(session('success'))
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: '{{ session('success') }}',
                showConfirmButton: false,
                timer: 1000
            });
        });
    </script>
    @endif

    @if(session('error'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ session('error') }}',
                    showConfirmButton: false,
                    timer: 1000
                });
            });
        </script>
    @endif

<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description">
                <h1>Item Register - Batch</h1>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card h-100">
                <div class="card-body">
                    <form action="{{ route('itemregister-batch.store') }}" method="POST" id="registerForm">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="barcode" class="form-label">Barcode</label>
                                <div class="input-group">
                                    <input 
                                        placeholder="Scan Here" 
                                        type="text" 
                                        class="form-control" 
                                        id="barcode" 
                                        name="barcode" 
                                        required
                                    >
                                    <button class="btn btn-primary" type="button" id="startButton">
                                        <i class="material-icons-two-tone">qr_code_scanner</i>
                                    </button>
                                </div>
                                <small id="barcodeMessage" class="form-text text-success" style="display: none;">
                                    Barcode exist!
                                </small>
                            </div>

                            <div class="col-md-6">
                                <label for="catalog_no" class="form-label">Catalog Number</label>
                                <div class="input-group">
                                    <input placeholder="Search Catalog" type="text" class="form-control" id="catalog_no" name="catalog_no" required readonly>
                                    <button type="button" id="showCatalogModal" class="btn btn-primary" title="Browse catalog list">
                                        <i class="material-icons-two-tone">search</i>
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="item_code" class="form-label">Item Code</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="item_code" 
                                    name="item_code" 
                                    required 
                                    readonly
                                >
                            </div>

                            <div class="col-md-4">
                                <label for="item_description" class="form-label">Item Description</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="item_description" 
                                    name="item_description" 
                                    required 
                                    readonly
                                >
                            </div>

                            <div class="col-md-4">
                                <label for="uom" class="form-label">UOM</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="uom" 
                                    name="uom" 
                                    required 
                                    readonly
                                >
                            </div>

                            <div class="col-md-4">
                                <label for="lot_number" class="form-label">Lot Number</label>
                                <input 
                                    placeholder="Input Lot Number" 
                                    type="text" 
                                    class="form-control" 
                                    id="lot_number" 
                                    name="lot_number" 
                                    style="text-transform: uppercase;" 
                                    required
                                >
                            </div>

                            <div class="col-md-2">
                                <label for="quantity" class="form-label">Quantity</label>
                                <input 
                                    type="number" 
                                    class="form-control" 
                                    id="quantity" 
                                    name="quantity" 
                                    min="1" 
                                    value="0" 
                                    required 
                                    readonly
                                >
                            </div>

                            <div class="col-md-6">
                                <label for="exp_date" class="form-label">Expiration Date</label>
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <input 
                                            type="date" 
                                            class="form-control" 
                                            id="exp_date" 
                                            name="exp_date" 
                                            required
                                        >
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input 
                                                class="form-check-input" 
                                                type="checkbox" 
                                                id="no_exp_date" 
                                                name="no_exp_date"
                                            >
                                            <label class="form-check-label" for="no_exp_date">
                                                No Exp Date
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 d-flex align-items-center justify-content-center">
                                <button type="submit" class="btn-lg btn-primary" id="submitBtn">
                                    Register Item
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="form-group">
                            <label for="barcode_tags" class="form-label">Barcode Tags</label>
                            <div style="max-height: 300px; overflow-y: auto;">
                                <ul id="barcodeTags" class="list-group">
                                    <!-- Tag list will be appended here -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Historical Data</h5>
                </div>
                <div class="card-body">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-3bulan-tab" data-bs-toggle="pill" data-bs-target="#pills-3bulan" type="button" role="tab" aria-controls="pills-3bulan" aria-selected="true">Last 3 Months</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all" type="button" role="tab" aria-controls="pills-all" aria-selected="false">All History</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-3bulan" role="tabpanel" aria-labelledby="pills-3bulan-tab">
                            <div class="table-responsive">
                                <table id="datatable1" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Barcode</th>
                                            <th>Item Code</th>
                                            <th>Item Description</th>
                                            <th>UOM</th>
                                            <th>Lot Number</th>
                                            <th>Exp Date</th>
                                            <th>Qty</th>
                                            <th>Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $threeMonthsAgo = now()->subMonths(3); @endphp
                                        @foreach($historyMasterStok as $item)
                                            @if($item->created_at >= $threeMonthsAgo)
                                            <tr>
                                                <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                                <td>{{ $item->barcode }}</td>
                                                <td>{{ $item->item_code }}</td>
                                                <td>{{ $item->item_description }}</td>
                                                <td>{{ $item->uom }}</td>
                                                <td>{{ $item->lot_number }}</td>
                                                <td>{{ $item->exp_date }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ $item->inputby }}</td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-all" role="tabpanel" aria-labelledby="pills-all-tab">
                            <div class="table-responsive">
                                <table id="datatable-all" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Barcode</th>
                                            <th>Item Code</th>
                                            <th>Item Description</th>
                                            <th>UOM</th>
                                            <th>Lot Number</th>
                                            <th>Exp Date</th>
                                            <th>Qty</th>
                                            <th>Input By</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($historyMasterStok as $item)
                                            <tr>
                                                <td>{{ $item->created_at->format('Y-m-d H:i') }}</td>
                                                <td>{{ $item->barcode }}</td>
                                                <td>{{ $item->item_code }}</td>
                                                <td>{{ $item->item_description }}</td>
                                                <td>{{ $item->uom }}</td>
                                                <td>{{ $item->lot_number }}</td>
                                                <td>{{ $item->exp_date }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ $item->inputby }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal untuk scanner -->
    <div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scannerModalLabel">Scan Barcode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="reader"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk Catalog -->
    <div class="modal fade" id="catalogModal" tabindex="-1" aria-labelledby="catalogModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="catalogModalLabel">Select Item Catalog</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="catalogTable" class="display" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Catalog No</th>
                                    <th>Item Code</th>
                                    <th>Item Description</th>
                                    <th>UOM</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data akan diisi via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
<script src="{{ asset('assets/plugins/jquery/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('assets/plugins/popperjs/popper.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<script src="{{ asset('assets/js/pages/datatables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/datatables.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#datatable-all').DataTable();

        $('#registerForm').on('submit', function(e) {
            e.preventDefault();
            
            var itemDescription = $('#item_description').val();
            var quantity = $('#quantity').val();
            var uom = $('#uom').val();
            
            Swal.fire({
                title: 'Konfirmasi Pendaftaran',
                text: 'Apakah Anda yakin ingin mendaftarkan item: ' + itemDescription  + ' Qty:' + quantity + ' ' + uom + '?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                reverseButtons: false
            }).then((result) => {
                if (result.isConfirmed) {
                    this.submit();
                }
            });
        });

        $('#barcode').focus();
        
        // Kode lama tetap ada tapi sekarang dialihkan ke logic di checkBarcodeAndFillForm agar parsing berfungsi
        $('#barcode').on('change', function() {
            var barcode = $(this).val();

            if (barcode === '') {
                alert('Please enter a Barcode.');
                return;
            }

            checkBarcodeAndFillForm(barcode);
        });

        $('#barcode').on('keypress', function(e) {
            if (e.which === 13) { // 13 is the code for the "Enter" key
                e.preventDefault(); // Prevent form submission
                $(this).trigger('change'); // Trigger the change event
            }
        });

        function formatCatalogNumber(catalogNo) {
            // Hapus semua titik yang ada
            let cleaned = catalogNo.replace(/\./g, '');
            
            // Format ulang sesuai pola x.xxxxx.xxxx
            if (cleaned.length === 10) {
                return cleaned.substring(0, 1) + '.' + 
                       cleaned.substring(1, 6) + '.' +
                       cleaned.substring(6);
            }
            return catalogNo; // Return original jika tidak sesuai format
        }

        function fetchItemReferenceByCatalog(catalogNo) {
            if (!catalogNo) return;

            // Format catalog number sebelum pencarian
            var formattedCatalogNo = formatCatalogNumber(catalogNo);

            $.ajax({
                url: '{{ route("item.reference") }}',
                type: 'POST',
                data: {
                    catalog_no: formattedCatalogNo,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#item_code').val(response.item_code);
                    $('#item_description').val(response.item_description);
                    $('#uom').val(response.uom);
                },
                error: function(xhr) {
                    console.log('Item reference not found by auto barcode scan.');
                }
            });
        }

        $('#no_exp_date').on('change', function() {
            if ($(this).is(':checked')) {
                $('#exp_date').val('2999-12-30');
                $('#exp_date').prop('disabled', true);
            } else {
                $('#exp_date').val('');
                $('#exp_date').prop('disabled', false);
            }
        });

        function parseDataMatrix(dataMatrix) {
            // Hanya proses jika panjang >= 40 karakter
            if (dataMatrix.length < 40) {
                return null;
            }

            let data = {
                originalBarcode: dataMatrix, // Simpan barcode asli
                gtin: null,
                expDate: null,
                lotNumber: null,
                catalogNo: null
            };

            // Extract GTIN (13 digits after '01' dan '0')
            if (dataMatrix.startsWith('01')) {
                // Skip '01' dan leading '0', ambil 13 digit
                data.gtin = dataMatrix.substring(3, 16);
            }
            
            // Cari tanggal kadaluarsa dengan mencari pola yang lebih spesifik
            let matches = dataMatrix.match(/17(\d{6})/);
            if (matches && matches[1]) {
                let expDate = matches[1];
                
                try {
                    // Pastikan kita mendapatkan 6 digit
                    if (expDate.length === 6 && /^\d+$/.test(expDate)) {
                        let year = '20' + expDate.substring(0, 2);
                        let month = expDate.substring(2, 4);
                        let day = expDate.substring(4, 6);
                        
                        // Validasi tanggal
                        if (month >= '01' && month <= '12' && day >= '01' && day <= '31') {
                            data.expDate = `${year}-${month}-${day}`;
                        }
                    }
                } catch (error) {
                    console.log('Error parsing date:', error);
                }
            }

            // Extract Lot Number - Cari pola VM/K diikuti angka sebelum 240
            let lotMatch = dataMatrix.match(/([A-Z]+\d+)(?=240)/);
            if (lotMatch) {
                data.lotNumber = lotMatch[1];
            }

            // Extract Catalog Number (10 digit setelah 240)
            let catalogMatch = dataMatrix.match(/240(\d{10})/);
            if (catalogMatch) {
                data.catalogNo = catalogMatch[1];
            }

            return data;
        }

        function parseLiofilchem(barcode) {
            // Hanya proses jika panjang tepat 16 karakter dan mengandung '+'
            if (barcode.length !== 16 || !barcode.includes('+')) {
                return null;
            }

            let data = {
                originalBarcode: barcode, // Simpan barcode asli
                gtin: null,
                expDate: null,
                lotNumber: null,
                catalogNo: null
            };

            // Extract catalog number (6 karakter pertama)
            data.catalogNo = barcode.substring(0, 6);
            
            // Extract lot number (9 karakter terakhir)
            data.lotNumber = barcode.substring(7);

            return data;
        }

        function parseLiofilchemSupp(barcode) {
            // Hanya proses jika panjang tepat 16 karakter dan mengandung '+'
            if (barcode.length !== 15 || !barcode.includes('+')) {
                return null;
            }

            let data = {
                originalBarcode: barcode, // Simpan barcode asli
                gtin: null,
                expDate: null,
                lotNumber: null,
                catalogNo: null
            };

            // Extract catalog number (6 karakter pertama)
            data.catalogNo = barcode.substring(0, 5);
            
            // Extract lot number (9 karakter terakhir)
            data.lotNumber = barcode.substring(6);

            return data;
        }

        function checkBarcodeAndFillForm(decodedText) {
            let barcodeToCheck = decodedText;
            let extractedData = null;
            
            // Jika panjang >= 40, ini kemungkinan DataMatrix, extract GTIN dulu
            if (decodedText.length >= 40) {
                let sanitizedText = sanitizeInput(decodedText);
                extractedData = parseDataMatrix(sanitizedText);
                if (extractedData && extractedData.gtin) {
                    barcodeToCheck = extractedData.gtin;
                }
            }
            
            // Set barcode value dengan nilai yang akan dicek
            $('#barcode').val(barcodeToCheck);
            
            // Cek existing item
            $.ajax({
                url: '{{ route("item.checkBarcode") }}',
                type: 'POST',
                data: {
                    barcode: barcodeToCheck,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    // Gunakan updateQuantity untuk cek jumlah barcode
                    var tagCount = $('#barcodeTags li').length;
                    
                    // Jika belum ada barcode di list, isi form
                    if (tagCount === 0) {
                        if (response.exists) {
                            // Jika item sudah ada, isi form dengan data existing
                            $('#catalog_no').val(response.catalog_no).prop('readonly', true);
                            $('#item_code').val(response.item_code);
                            $('#item_description').val(response.item_description);
                            $('#uom').val(response.uom);
                            $('#lot_number').val(response.lot_number).prop('readonly', true);
                            $('#exp_date').val(response.exp_date).prop('readonly', true);
                            $('#no_exp_date').prop('checked', response.no_exp_date).prop('disabled', true);
                            $('#barcodeMessage').show(); // Show the message
                        } else {
                            // Jika item baru, reset form dan coba parse barcode
                            $('#catalog_no').val('').prop('readonly', true); // Changed to true as per instruction
                            $('#item_code').val('');
                            $('#item_description').val('');
                            $('#uom').val('');
                            $('#lot_number').val('').prop('readonly', false);
                            $('#exp_date').val('').prop('readonly', false);
                            $('#no_exp_date').prop('checked', false).prop('disabled', false);
                            $('#barcodeMessage').hide();

                            // Jika sudah ada extracted data dari DataMatrix, gunakan itu
                            if (extractedData) {
                                if (extractedData.lotNumber) {
                                    $('#lot_number').val(extractedData.lotNumber);
                                }
                                if (extractedData.expDate) {
                                    $('#exp_date').val(extractedData.expDate);
                                }
                                if (extractedData.catalogNo) {
                                    $('#catalog_no').val(extractedData.catalogNo);
                                    fetchItemReferenceByCatalog(extractedData.catalogNo); // Replaced click trigger
                                }
                            }
                            // Jika tidak ada extracted data, coba parse sebagai Liofilchem
                            else if (decodedText.length === 16) {
                                let parsedData = parseLiofilchem(decodedText);
                                if (parsedData) {
                                    if (parsedData.lotNumber) {
                                        $('#lot_number').val(parsedData.lotNumber);
                                    }
                                    if (parsedData.catalogNo) {
                                        $('#catalog_no').val(parsedData.catalogNo);
                                        fetchItemReferenceByCatalog(parsedData.catalogNo); // Replaced click trigger
                                    }
                                }
                            }
                            else if (decodedText.length === 15) {
                                let parsedData = parseLiofilchemSupp(decodedText);
                                if (parsedData) {
                                    if (parsedData.lotNumber) {
                                        $('#lot_number').val(parsedData.lotNumber);
                                    }
                                    if (parsedData.catalogNo) {
                                        $('#catalog_no').val(parsedData.catalogNo);
                                        fetchItemReferenceByCatalog(parsedData.catalogNo); // Replaced click trigger
                                    }
                                }
                            }
                            // Jika tidak ada extracted data, coba parse sebagai Labscan
                            else {
                                let parsedData = parseLabscan(decodedText);
                                if (parsedData) {
                                    if (parsedData.lotNumber) {
                                        $('#lot_number').val(parsedData.lotNumber);
                                    }
                                    if (parsedData.catalogNo) {
                                        $('#catalog_no').val(parsedData.catalogNo);
                                        fetchItemReferenceByCatalog(parsedData.catalogNo);
                                    }
                                }
                            }
                        }
                    }
                    
                    // Tambahkan barcode ke tags
                    addBarcodeTag(barcodeToCheck);
                },
                error: function(xhr) {
                    alert('Error checking barcode');
                }
            });
        }

        function addBarcodeTag(barcode) {
            // Cek jumlah barcode yang sudah ada
            var tagCount = $('#barcodeTags li').length;
            
            // Cek apakah sudah ada barcode sebelumnya yang berbeda
            if (tagCount > 0) {
                var firstBarcode = $('#barcodeTags li').first().attr('data-value');
                if (firstBarcode !== barcode) {
                    alert('Batch registration hanya untuk barcode yang sama. Barcode ini berbeda dengan yang sudah di-scan.');
                    return;
                }
            }

            // Tambahkan tag baru
            var newTag = $('<li>')
                .addClass('list-group-item d-flex justify-content-between align-items-center')
                .attr('data-value', barcode);
            
            var badge = $('<span>')
                .addClass('badge bg-primary')
                .text(barcode);
            
            var removeButton = $('<button>')
                .addClass('btn btn-danger btn-sm remove-tag ms-2')
                .html('<i class="material-icons-two-tone">close</i>');
            
            newTag.append(badge).append(removeButton);
            $('#barcodeTags').append(newTag);
            
            // Update quantity menggunakan fungsi yang sudah ada
            updateQuantity();
            
            // Clear barcode input dan fokus kembali
            $('#barcode').val('').focus();
        }

        function sanitizeInput(input) {
            // Hapus semua karakter non-alphanumeric
            return input.replace(/[^a-zA-Z0-9]/g, '');
        }

        let html5QrcodeScanner = null;

        $('#startButton').on('click', function() {
            $('#scannerModal').modal('show');
            setTimeout(() => {
                if (!html5QrcodeScanner) {
                    html5QrcodeScanner = new Html5QrcodeScanner(
                        "reader",
                        { 
                            fps: 30,
                            qrbox: {width: 200, height: 200},
                            aspectRatio: 1.5,
                            formatsToSupport: [
                                Html5QrcodeSupportedFormats.DATA_MATRIX,
                                Html5QrcodeSupportedFormats.QR_CODE,
                                Html5QrcodeSupportedFormats.EAN_13,
                                Html5QrcodeSupportedFormats.CODE_128
                            ],
                            experimentalFeatures: {
                                useBarCodeDetectorIfSupported: true
                            },
                            videoConstraints: {
                                focusMode: "continuous",
                                facingMode: "environment",
                                frameRate: { ideal: 30, min: 15 },
                                width: { min: 640, ideal: 1280 },
                                height: { min: 480, ideal: 720 }
                            },
                            showTorchButtonIfSupported: true,
                            defaultZoomValueIfSupported: 1
                        }
                    );

                    html5QrcodeScanner.render((decodedText, decodedResult) => {
                        checkBarcodeAndFillForm(decodedText);
                        $('#scannerModal').modal('hide');
                        if (html5QrcodeScanner) {
                            html5QrcodeScanner.clear();
                            html5QrcodeScanner = null;
                        }
                    }, (error) => {
                        // Handle errors silently
                    });
                }
            }, 500);
        });

        $('#scannerModal').on('hidden.bs.modal', function () {
            if (html5QrcodeScanner) {
                html5QrcodeScanner.clear();
                html5QrcodeScanner = null;
            }
        });

        // Function to update quantity based on the number of barcode tags
        function updateQuantity() {
            var tagCount = $('#barcodeTags li').length;
            $('#quantity').val(tagCount);
        }



        $('#barcodeTags').on('click', '.remove-tag', function() {
            $(this).parent().remove();
            updateQuantity(); // Update quantity after removing a tag
        });

        document.getElementById('submitBtn').addEventListener('click', function(event) {
            var barcodeTags = document.getElementById('barcodeTags');
            if (barcodeTags.children.length > 0) {
                var firstTag = barcodeTags.children[0].getAttribute('data-value');
                document.getElementById('barcode').value = firstTag;
            }
        });


                // DataTable untuk Modal Catalog
        let catalogTable = $('#catalogTable').DataTable({
            responsive: true,
            deferRender: true
        });

        // Event handler untuk tombol buka modal catalog
        $('#showCatalogModal').on('click', function() {
            // Tampilkan modal loader atau loading state bisa diletakkan di sini
            
            $.ajax({
                url: '{{ route("item.reference.all") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    catalogTable.clear();
                    
                    $.each(response, function(index, item) {
                        let safeCatalog = (item.item_description || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                        let safeCode = (item.item_code || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                        let safeDesc = (item.item_description || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                        let safeUom = (item.uom || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');

                        let btnSelect = `<button type="button" class="btn btn-sm btn-success btn-select-catalog" 
                            data-catalog="${safeCatalog}" 
                            data-code="${safeCode}" 
                            data-desc="${safeDesc}" 
                            data-uom="${safeUom}">
                            Select
                        </button>`;
                        
                        // Perhatikan: di DB nama kolom catalog_no sering disimpan di item_description atau ada kolom khusus
                        // Jika ada kolom catalog_no khusus di tabel master, ganti item.item_description pertama dengan item.catalog_no
                        catalogTable.row.add([
                            item.item_description, // Gunakan catalog no jika ada
                            item.item_code,
                            item.item_description,
                            item.uom,
                            btnSelect
                        ]);
                    });
                    
                    catalogTable.draw();
                    $('#catalogModal').modal('show');
                },
                error: function(xhr) {
                    alert('Gagal mengambil data katalog');
                }
            });
        });

        // Event handler untuk tombol pilih di dalam modal
        $('#catalogTable tbody').on('click', '.btn-select-catalog', function() {
            let catalogNo = $(this).data('catalog');
            let itemCode = $(this).data('code');
            let itemDesc = $(this).data('desc');
            let uom = $(this).data('uom');

            $('#catalog_no').val(catalogNo);
            $('#item_code').val(itemCode);
            $('#item_description').val(itemDesc);
            $('#uom').val(uom);

            $('#catalogModal').modal('hide');
        });
    });
</script>
@endpush
@endsection