@extends('layouts.master')

@section('title', __('Penerimaan Maklon'))

@section('css')
    <style>
        .dropdown-menu {
            position: absolute;
            z-index: 1000;
            background-color: white;
            border: 1px solid #ccc;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .item-list li {
            padding: 8px;
            cursor: pointer;
        }

        .item-list li:hover,
        .item-list li.highlight {
            background-color: #007bff;
            color: white;
        }

        .alert {
            display: none;
            margin-top: 5px;
            padding: 15px;
            border-radius: 5px;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .fade {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .fade.show {
            opacity: 1;
        }

        .card {
            margin-bottom: 1rem;
            padding: 15px;
        }

        .form-group label {
            margin-bottom: 0.5rem;
        }

        .qtyw {
            min-width: 150px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            margin-bottom: 0.5rem;
        }

        .content {
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
            max-width: 100%;
            width: calc(100% - 240px);
            margin-left: 240px;
        }

        .submit-btn {
            margin-top: 20px;
        }

        @media (max-width: 768px) {
            .content {
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                width: 100%;
                margin-left: 0;
            }
        }
    </style>
@endsection

@section('content')
<div class="row">
    <x-page-title title="Transaction" pagetitle="{{__('Penerimaan Maklon')}}" />
    <hr>
    <div class="container content">
        <h2>{{__('Penerimaan Maklon')}} Transaction</h2>
        <form id="po-form" action="{{ route('transaction.gr_maklon.store') }}" method="POST">
            @csrf
            <div class="card mb-3">
                <div class="card-header">{{__('Penerimaan Maklon')}} {{__('Information')}}</div>
                <div class="card-body">
                    <input type="hidden" id="checkHPP" value="0">
                    <input type="hidden" name="token" id="token" value="{{$token}}">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="search">{{__('Search Supplier')}}</label>
                                <input type="text" id="search" class="form-control"
                                    placeholder="Search by Vendor Code, Name, or Address">
                                <div id="search-results" class="list-group"
                                    style="display:none; position:relative; z-index:1000; width:100%;"></div>
                            </div>
                            <div class="form-group">
                                <label for="supplier_code">{{__('Supplier Code')}}</label>
                                <input type="text" name="supplier_code" id="supplier_code" class="form-control" readonly >
                            </div>
                            <div class="form-group">
                                <label for="supplier_name">{{__('Supplier Name')}}</label>
                                <input type="text" name="supplier_name" id="supplier_name" class="form-control" readonly>
                            </div>
                            <div class="form-group">
                                <label for="address">{{__('Address')}}</label>
                                <input type="text" name="address" id="address" class="form-control" readonly>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                {{-- <label for="department_code">Department</label> --}}
                                <input type="hidden" name="department_code" id="department_code" class="form-control" readonly value="{{ $departments->department_code }}" required>
                            </div>
                            <div class="form-group">
                                <label for="notes">{{__('Notes')}}</label>
                                <textarea name="notes" class="form-control" rows="4">{{ old('notes') }}</textarea>
                            </div>
                            <div class="form-group">
                                <label for="vendor_number">Biaya Tambahan</label>
                                <input type="text"  name="add_expense" id="add_expense"
                                    class="form-control text-end" required placeholder="Enter Add Expense" value="0" oninput="formatNumber(this)" >
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="document_date">{{__('Document Date')}}</label>
                                <input type="date" id="document_date" name="document_date" class="form-control date-picker" required
                                    value="{{ old('document_date') }}" readonly>
                                    {{-- <input type="text" class="form-control  " name="" id="doc_date_show" readonly> --}}
                                </div>
                                <div class="form-group">
                                    <label for="due_date">{{__('Due Date')}} Hutang</label>
                                    <input type="date" id="due_date" name="due_date" class="form-control  date-picker" required
                                    value="{{ old('due_date') }}" readonly>
                                    {{-- <input type="text" class="form-control  " name="" id="due_date_show" readonly> --}}
                            </div>

                            <div class="form-group">
                                <label for="tax">{{__('Tax')}}</label>
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" value="PPN / VAT" readonly>
                                    <select hidden class="form-select" id="tax" name="tax">
                                        @foreach ($taxs as $tax)
                                            <option value="{{ $tax->tax_code }}" {{ old('tax') === $tax->tax_code ? 'selected' : '' }}>
                                                {{ $tax->tax_name . ' (' . $tax->tax_code . ')' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tax">{{__('Revenue Tax')}}</label>
                                <div class="input-group mb-3">
                                    <select class="form-select" id="tax_revenue" name="tax_revenue">
                                        <option value="0">Tidak kena pajak</option>
                                        @foreach ($taxs as $tax)
                                            <option value="{{ $tax->tax_code }}" {{ old('tax') === $tax->tax_code ? 'selected' : '' }}>
                                                {{ $tax->tax_name . ' (' . $tax->tax_code . ')' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="company_code" value="{{ $company->company_code }}"
                                class="form-control" readonly>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card mb-3">
                <div class="card-header">{{__('Penerimaan Maklon')}} Details</div>
                <h5 class="text-end">Total: <span id="total-value">0</span></h5>
                <div class="card-body">
                    <div style="overflow-x: auto;">
                    <table class="table" id="dynamicTable">
                        <thead>
                            <td style="min-width: 270px">{{__('Nomor SJ')}}</td>
                            <td style="min-width: 230px">{{__('Item')}} Lama</td>
                            <td style="min-width: 150px">Unit</td>
                            <td style="min-width: 150px">Qty</td>
                            <td style="min-width: 230px">{{__('Item')}} Baru</td>
                            <td style="min-width: 150px">Harga</td>
                            <td style="min-width: 150px">Nominal</td>
                            <td>Action</td>
                        </thead>
                        <tbody id="parentTbody">
                            <!-- Parent rows will be added dynamically here -->
                        </tbody>
                    </table>
                    </div>
                    <button type="button" class="btn btn-secondary mt-3" id="addRow">{{__('Select Document')}}</button>
                    <button type="button" onclick="addNewRow()" class="btn btn-primary mt-3 d-none">Tambah Barang</button>
                </div>
            </div>

            <div class="modal fade" id="selectInvoiceModal" tabindex="-1" aria-labelledby="selectInvoiceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="selectInvoiceModalLabel">Select {{__('Good Receipt')}}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <table class="table table-bordered" id="invoiceTable">
                                <thead>
                                    <tr>
                                        <th>Select</th>
                                        <th>{{__('Nomor Surat Jalan Maklon')}}</th>
                                        <th>{{__('Tanggal Pembuatan SJ')}}</th>
                                        <th>Vendor</th>
                                        <th>Details</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($sjMaklon as $pi)
                                    <tr data-supplier-id="{{ $pi->supplier_code }}" data-document-number="{{ $pi->document_number }}" class="parent-row">
                                        <td style="text-align: center; vertical-align: middle;">
                                            <input type="checkbox" name="selectedInvoice" class="invoice-checkbox" value="{{ $pi->document_number }}">
                                        </td>
                                        <td>{{ $pi->document_number }}</td>
                                        <td>{{ \Carbon\Carbon::parse($pi->created_at)->format('d M Y') }}</td>
                                        <td>{{ $pi->suppliers->supplier_name }}</td>
                                        <td style="text-align: center; vertical-align: middle;">
                                            <button type="button" class="btn btn-sm btn-info toggle-details-btn">
                                                <i class="material-icons-outlined">visibility</i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="detail-row" style="display: none;">
                                        <td colspan="5">
                                            <div class="p-3">
                                                <h6>Details for {{ $pi->document_number }}</h6>
                                                <table class="table table-sm table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>Nama Barang</th>
                                                            <th>Qty Kirim</th>
                                                            <th>Qty Sisa</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="details-tbody-{{ $pi->document_number }}">
                                                        </tbody>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" id="selectInvoicesButton">Select</button>
                            <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="mb-3 btn btn-success" @if(!in_array('create', $privileges)) disabled @endif>Submit {{__('Penerimaan Maklon')}}</button>
        </form>
    </div>



    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
</div>
@endsection



@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
            // Check if the success message is present
            @if(session('success'))
                // Show SweetAlert confirmation modal
                Swal.fire({
                    title: '{{__('Penerimaan Maklon')}} Created',
                    text: 'Do you want to print it?',
                    icon: 'success',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                }).then((result) => {
                    if (result.isConfirmed) {
                        // User clicked "Yes"
                        var id = "{{ session('id') }}"; // Get the id from the session
                        if (id) {
                            // Navigate to the edit route with the id
                            window.open("{{ route('transaction.gr_maklon.print', ['id' => ':id']) }}".replace(':id', id), '_blank');
                        }
                    }
                });
            @endif
        });

         // SECTION SUPPLIER SEARCH
    const suppliers = @json($suppliers);
    let supplierId='';
    let itemIds=[];
    let items = @json($items);
    let prices = @json($prices);
    const goodReceipt = @json($sjMaklon);
    let goodReceiptD = @json($sjMaklonD);
    let rowCount = 0; // Initialize row count
    let SO = [];
    let reimbursement = true;

    $('#addRow').click(function() {
        $('#selectInvoiceModal').modal('show');
    });

    // Initialize default values for document date and delivery date
    document.getElementById('document_date').valueAsDate = new Date();
    document.getElementById('due_date').valueAsDate = new Date();
    document.getElementById('department_code').value = '';
    //  document.getElementById('salesOrderNumber').value = '';
    document.getElementById('tax').value = '';


    function setupUnitChangeListener(rowNumber) {
        // Construct the IDs based on the row number
        var selectId = 'unit_' + rowNumber;
        var hiddenInputId = 'conversion_value_' + rowNumber;



        document.getElementById(selectId).addEventListener('change', function() {
            var itemCode = document.getElementById(`item_code_${rowNumber}`).value;
            var selectedOption = this.options[this.selectedIndex];
            var conversionValue = itemDetails.find((i)=>i.item_code == itemCode&&i.unit_conversion ==selectedOption.value).conversion;
            document.getElementById(hiddenInputId).value = conversionValue;

        });
    }
    let itemDetails = @json($itemDetails);
    let activeIndex = -1;
    function setupItemSearch(rowId) {
        // Track the active item in the dropdown
        const searchInput = document.getElementById(`item-search-${rowId}`);
        const resultsContainer = document.getElementById(`item-search-results-${rowId}`);

        // Input event listener for filtering
        searchInput.addEventListener('input', function() {
            activeIndex = -1; // Reset active index on new input
            let query = this.value.toLowerCase();
            resultsContainer.innerHTML = '';
            resultsContainer.style.display = 'none';

            if (query.length > 0) {
                let filteredItems = items.filter(item =>
                    item.item_code.toLowerCase().includes(query) ||
                    item.items.item_name.toLowerCase().includes(query)
                );

                if (filteredItems.length > 0) {
                    resultsContainer.style.display = 'block';
                    filteredItems.forEach((item, index) => {
                        let listItem = document.createElement('a');
                        listItem.className = 'list-group-item list-group-item-action';
                        listItem.href = '#';
                        listItem.innerHTML = `
                            <small><strong>${item.items.item_name}</strong> (${item.item_code})</small>
                        `;

                        listItem.addEventListener('click', function(e) {
                            e.preventDefault();
                            selectItem(item, rowId);
                        });

                        resultsContainer.appendChild(listItem);
                    });
                }
            }
        });

        // Keydown event listener for navigation
        searchInput.addEventListener('keydown', function(e) {
            const items = resultsContainer.querySelectorAll('.list-group-item');
            if (items.length === 0) return;

            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (activeIndex < items.length - 1) {
                    activeIndex++;
                    updateActiveItem(items);
                }
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (activeIndex > -1) { // Allow going back to no selection
                    activeIndex--;
                    updateActiveItem(items);
                }
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (activeIndex >= 0 && items[activeIndex]) {
                    items[activeIndex].click();
                }
            }
        });
    }

    // Helper function to update active item
    function updateActiveItem(items) {
        items.forEach((item, index) => {
            item.classList.toggle('active', index === activeIndex);
        });
        if (activeIndex >= 0) {
            items[activeIndex].scrollIntoView({ block: 'nearest' });
        }
    }

    // Helper function to handle item selection
    function selectItem(item, rowId) {


        document.querySelector(`input[name="details[${rowId}][item_result_id]"]`).value = item.item_code;
        document.querySelector(`input[name="details[${rowId}][item_result_name]"]`).value = item.items.item_name;
        const qty = parseFloat(document.getElementById(`qty_${rowId}`).value);
        document.getElementById(`item-search-results-${rowId}`).style.display = 'none';
        document.getElementById(`price_${rowId}`).value = item.purchase_price.split('.')[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        document.getElementById(`nominal_${rowId}`).value =
            (qty*item.purchase_price).toString().split('.')[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        calculateTotals();
    }

    function updatePrice() {
        const rowId = this.closest('tr').getAttribute('data-row-id');
        const itemCode = document.getElementById(`item_code_${rowId}`).value;

        const itemDetail = itemDetails.find(detail => detail.item_code === itemCode);
    }

    function addNewRow() {
        const detailsTableBody = document.querySelector('#parentTbody');
        const newRow = document.createElement('tr');
        newRow.setAttribute('data-row-id', rowCount); // Set unique row identifier
        const currentRow = rowCount;
        newRow.innerHTML = `
            <td>
                <div class="input-group">
                    <input type="hidden" id="item_code_${rowCount}" class="form-control item-input" name="details[${rowCount}][item_id]" placeholder="{{__('Search Item')}}">
                    <input type="text" class="form-control item-input" name="details[${rowCount}][item_name]" id="item-search-${rowCount}" placeholder="{{__('Search Item')}}">
                    <div id="item-search-results-${rowCount}" class="list-group" style="display:none; position:relative; z-index:1000; width:100%;">
                        <!-- Search results will be injected here -->
                    </div>
                </div>
            </td>
            <td>
                <select id="unit_${rowCount}" name="details[${rowCount}][unit]" class="form-control unit-dropdown">
                    @foreach ($itemUnits as $unit)
                        <option value="{{$unit->unit}}">{{$unit->unit_name}}</option>
                    @endforeach
                </select>
                <input type="hidden" id="conversion_value_${rowCount}" name = "details[${rowCount}][conversion_value]" />
            </td>
            <td>
                <input type="number" id="qty_${rowCount}" name="details[${rowCount}][qty]" class="form-control" value="1" min="1" step="0.5" required placeholder="Quantity">
            </td>
            <td>
                <div class="input-group">
                    <input type="hidden" id="item_code_${rowCount}" class="form-control item-input" name="details[${rowCount}][item_id]" placeholder="{{__('Search Item')}}">
                    <input type="text" class="form-control item-input" name="details[${rowCount}][item_name]" id="item-search-${rowCount}" placeholder="{{__('Search Item')}}">
                    <div id="item-search-results-${rowCount}" class="list-group" style="display:none; position:relative; z-index:1000; width:100%;">
                        <!-- Search results will be injected here -->
                    </div>
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-danger deleteRow"><i class="material-icons-outlined deleteRow">remove</i></button>
            </td>
        `;

        detailsTableBody.appendChild(newRow);
        setupItemSearch(rowCount);
        setupUnitChangeListener(currentRow);
        document.getElementById(`item_code_${rowCount}`).addEventListener('change', updatePrice);

        rowCount++; // Increment row count for the next row
    }

    $('#invoiceTable').on('click', '.toggle-details-btn', function() {
        const $parentRow = $(this).closest('.parent-row');
        const docNumber = $parentRow.data('document-number');

        // Select the next TR which is the detail row
        const $detailRow = $parentRow.next('.detail-row');

        // Toggle the visibility of the detail row
        if ($detailRow.is(':visible')) {
            $detailRow.hide();
            $(this).html('<i class="material-icons-outlined">visibility</i>');
            return; // Exit if we were just closing it
        }

        // Hide any other open detail rows and reset their buttons
        $('#invoiceTable .detail-row').not($detailRow).hide();
        $('#invoiceTable .toggle-details-btn').not(this).html('<i class="material-icons-outlined">visibility</i>');

        // Show the current detail row
        $detailRow.show();
        $(this).html('<i class="material-icons-outlined">visibility_off</i>');


        // 1. Find the corresponding parent record (which contains nested details)
        const receipt = goodReceiptD.filter(item => item.document_number == docNumber);
        const escapedDocNumber = $.escapeSelector(docNumber);

        // Use the escaped document number to safely select the detail table body
        const $detailsTableBody = $(`#details-tbody-${escapedDocNumber}`)

        $detailsTableBody.empty(); // Clear previous content

        // 2. CHECK AND POPULATE DETAILS FROM THE NESTED RELATIONSHIP
        if (receipt) {
            const details = receipt;

            if (details.length > 0) {
                details.forEach(detail => {
                    // Access the nested 'items' relation
                    const itemName = detail.items && detail.items.item_name ? detail.items.item_name : 'N/A';

                    const row = `
                        <tr>
                            <td>${itemName}</td>
                            <td>${detail.qty}</td>
                            <td>${detail.qty_left}</td>
                        </tr>
                    `;
                    $detailsTableBody.append(row);
                });
            } else {
                $detailsTableBody.append('<tr><td colspan="3">No details found.</td></tr>');
            }
        } else {
            $detailsTableBody.append('<tr><td colspan="3">Data not found.</td></tr>');
        }
    });


    $(document).ready(function() {
        document.getElementById('po-form').addEventListener('submit', function(event) {
            const supplierCode = document.getElementById('supplier_code').value;

            // Check if supplier_code is null or empty
            if (!supplierCode) {
                event.preventDefault(); // Prevent form submission
                Swal.fire({
                    title: 'Error!',
                    text: 'Please select a supplier before submitting the form.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        });
    });



    function formatNumber(input) {
        // Get the cursor position
        const cursorPosition = input.selectionStart;
        input.value = input.value.replace(/[^0-9]/g, '');
        // Remove any existing thousand separators
        let value = input.value.replace(/,/g, '');

        // Format the number with thousand separators
        let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        // Set the new value
        input.value = formattedValue;

        // Adjust the cursor position
        const newCursorPosition = formattedValue.length - (value.length - cursorPosition);
        input.setSelectionRange(newCursorPosition, newCursorPosition);
    }




    $('#selectInvoicesButton').click(function() {
    const selectedGood = [];

        $('#invoiceTable .invoice-checkbox:checked').each(function() {
            const requNumber = $(this).val();

            selectedGood.push({
                requNumber: requNumber
            });


            let selectedGoodReceipt = goodReceipt.find((e)=>e.document_number == requNumber);


            const dates = new Date(selectedGoodReceipt.document_date);
            const formattedDate = dates.toLocaleDateString('en-GB', {
            day: '2-digit', month: 'short', year: 'numeric'
            }).replace(/ /g, ' ');
        });

        // console.log(goodReceiptD);


        filteredPRdetails = goodReceiptD.filter(detail =>
            selectedGood.some(selectedDetail =>
                detail.document_number === selectedDetail.requNumber
            )
        );

        filteredPrices = prices.filter(detail =>
        filteredPRdetails.some(selectedDetail =>
            detail.item_code === selectedDetail.item_id
        ));
        const datas = [];
        filteredPrices.forEach(prices => {
            filteredPRdetails.forEach(detail => {

                if(prices.item_code === detail.item_id){

                    const a={
                        'id': detail.id,
                        'item_id':detail.item_id,
                        'item_name':detail.items.item_name,
                        'sj_number':detail.document_number,
                        'price':prices.purchase_price,
                        'qty':detail.qty,
                        'qty_left':detail.qty_left,
                        'base_qty':detail.base_qty,
                        'unit':detail.unit,
                        'nominal':detail.nominal,
                        'unit_name':detail.units.unit_name,
                        'notes':detail.description,
                    }
                    const idExists = datas.some(data => data.id === a.id);

                    if (detail.qty_left > 0 && !idExists) {
                        datas.push(a);
                    }
                }

            });
        });
        datas.sort((a, b) => a.id - b.id);

        $('#parentTbody').empty();

        datas.forEach(requisit => {
            const currentRow = rowCount;
            const newRow = `
                <tr>
                    <td>
                        <input type="text" name="details[${rowCount}][sj_number]" class="form-control" value="${requisit.sj_number}" readonly />
                    </td>
                    <td>
                        <input type="hidden" id="item_code_${rowCount}" name="details[${rowCount}][item_id]" class="form-control" value="${requisit.item_id}" readonly />
                        <input type="text" name="details[${rowCount}][item_name]" class="form-control" value="${requisit.item_name}" readonly />
                    </td>
                    <td>
                        <input type="hidden" name="details[${rowCount}][unit]" class="form-control" value="${requisit.unit}" readonly />
                        <input type="text" name="details[${rowCount}][unit_name]" class="form-control" value="${requisit.unit_name}" readonly />
                    </td>
                    <td>
                        <input type="hidden" id="conversion_value_${rowCount}" name="details[${rowCount}][base_qty]" value="${requisit.base_qty}" readonly />
                        <input type="number" id="qty_${rowCount}" name="details[${rowCount}][qty]" class="form-control" value="${requisit.qty_left}" min="1"/>
                        <input type="hidden" id="nominal_origin_${rowCount}" name="details[${rowCount}][nominal_original]" class="form-control" value="${requisit.nominal}" readonly/>
                    </td>
                    <td>
                        <div class="input-group">
                            <input type="hidden" id="item_result_code_${rowCount}" class="form-control item-input" name="details[${rowCount}][item_result_id]" placeholder="{{__('Search Item')}}">
                            <input type="text" class="form-control item-input" name="details[${rowCount}][item_result_name]" id="item-search-${rowCount}" placeholder="{{__('Search Item')}}">
                            <div id="item-search-results-${rowCount}" class="list-group" style="display:none; position:relative; z-index:1000; width:100%; max-height:250px; overflow:scroll;">
                                <!-- Search results will be injected here -->
                            </div>
                        </div>
                    </td>
                    <td>
                        <input type="text" oninput="formatNumber(this)" name="details[${currentRow}][price]" id="price_${currentRow}" class="form-control text-end" value="" />
                    </td>
                    <td>
                        <input type="text" oninput="formatNumber(this)" name="details[${currentRow}][nominal]" id="nominal_${currentRow}" class="form-control text-end nominal" value="" readonly/>
                    </td>
                    <td id="pay-row-${rowCount}">
                        <button type="button" class="btn btn-danger deleteRow"><i class="material-icons-outlined ">remove</i></button>
                    </td>
                </tr>
            `;
        $('#parentTbody').append(newRow);
        setupItemSearch(currentRow);
        document.getElementById(`qty_${currentRow}`).addEventListener('input', function() {
            updateNominalValue(currentRow); // Call the function when the event occurs
        });
        document.getElementById(`price_${currentRow}`).addEventListener('input', function() {
            updateNominalValue(currentRow); // Call the function when the event occurs
        });
        rowCount++;
        });

        $('#selectInvoiceModal').modal('hide');

    });




    $(document).on('click', '.deleteRow', function() {
        const rowCount = $(this).closest('tr');
        const detailRow = rowCount.next('.detail-row');

        // Remove detail row if it exists
        if (detailRow.length) {
            detailRow.remove();
        }
        calculateTotals();
        // Remove the main row
        rowCount.remove();
    });

    let activeIndexCust = -1; // Track the active supplier in the dropdown

    document.getElementById('search').addEventListener('input', function () {
        activeIndexCust = -1; // Reset active index on new input
        let query = this.value.toLowerCase();
        let resultsContainer = document.getElementById('search-results');
        resultsContainer.innerHTML = ''; // Clear previous results
        resultsContainer.style.display = 'none'; // Hide dropdown by default

        if (query.length > 0) {
            let filteredSuppliers = suppliers.filter(s =>
                s.supplier_code.toLowerCase().includes(query) ||
                s.supplier_name.toLowerCase().includes(query) ||
                s.address.toLowerCase().includes(query)
            );

            if (filteredSuppliers.length > 0) {
                resultsContainer.style.display = 'block'; // Show dropdown if matches found
                filteredSuppliers.forEach((supplier, index) => {
                    let listItem = document.createElement('a');
                    listItem.className = 'list-group-item list-group-item-action';
                    listItem.href = '#';
                    listItem.dataset.index = index; // Store index for reference
                    listItem.innerHTML = `
                        <strong>${supplier.supplier_code}</strong> - ${supplier.supplier_name} <br>
                        <small>${supplier.address}</small>
                    `;
                    listItem.addEventListener('click', function (e) {
                        e.preventDefault();
                        selectSupplier(supplier);
                    });
                    resultsContainer.appendChild(listItem); // Add item to dropdown
                });
            }
        }
    });

    function updateNominalValue(row) {
        const qty = parseFloat(document.getElementById(`qty_${row}`).value) || 0;
        const price = document.getElementById(`price_${row}`).value.replace(/,/g, '') || 0;
        const nominalInput = document.getElementById(`nominal_${row}`);
        const nominalValue = (qty * price)+"";

        let formattedValue = nominalValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        nominalInput.value = formattedValue; // Update nominal value
        calculateTotals();
    }

    function calculateTotals() {
        let total = 0;
        const disc_nominal = 0;
        document.querySelectorAll('.nominal').forEach(function (input) {

            input.value = input.value.replace(/,/g, ''); // Remove any thousand separators
            if(input.id=='disc_nominal'){
                total -= parseFloat(input.value) || 0;
            }else{
                total += parseFloat(input.value) || 0;
            }
            const cursorPosition = input.selectionStart;
            let value = input.value.replace(/,/g, '');
            // Format the number with thousand separators
            let formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            // Set the new value
            input.value = formattedValue;

            // Adjust the cursor position
            const newCursorPosition = formattedValue.length - (value.length - cursorPosition);
            input.setSelectionRange(newCursorPosition, newCursorPosition);
        });
        let strTotal = (total)+"";
        let value2 = strTotal.replace(/,/g, '');
            // Format the number with thousand separators
        let formattedValue2 = value2.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        document.getElementById('total-value').innerText = formattedValue2;

        return { total }; // Return totals for validation
    }

    // Keydown event listener for navigation
    document.getElementById('search').addEventListener('keydown', function (e) {
        const resultsContainer = document.getElementById('search-results');
        const items = resultsContainer.querySelectorAll('.list-group-item');
        if (items.length === 0) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (activeIndexCust < items.length - 1) {
                activeIndexCust++;
                updateActiveSupplier(items);
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (activeIndexCust > -1) {
                activeIndexCust--;
                updateActiveSupplier(items);
            }
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (activeIndexCust >= 0 && items[activeIndexCust]) {
                items[activeIndexCust].click(); // Trigger click event
            }
        }
    });

    // Helper function to update active supplier
    function updateActiveSupplier(items) {
        items.forEach((item, index) => {
            item.classList.toggle('active', index === activeIndexCust);
        });
        if (activeIndexCust >= 0 && items[activeIndexCust]) {
            items[activeIndexCust].scrollIntoView({ block: 'nearest' });
        }
    }

    // Helper function to handle supplier selection
    function selectSupplier(supplier) {
        let supplierId = supplier.supplier_code;
        document.getElementById('search').value = '';
        document.getElementById('supplier_code').value = supplier.supplier_code;
        document.getElementById('supplier_name').value = supplier.supplier_name;
        document.getElementById('address').value = supplier.address;
        document.getElementById('search-results').style.display = 'none'; // Hide dropdown after selection

        if (!supplierId) {
            // Target all rows with the data-supplier-id attribute (the parent rows)
            $('#invoiceTable tbody tr[data-supplier-id]').show();
        } else {
            // 2. Hide rows that do not match the selected supplier

            // We only iterate over the parent rows (those with data-supplier-id)
            $('#invoiceTable tbody tr[data-supplier-id]').each(function () {
                const $parentRow = $(this);
                const $detailRow = $parentRow.next('.detail-row'); // Get the following detail row
                const selectedSuppliers = $parentRow.data('supplier-id');

                if (selectedSuppliers == supplierId) {
                    // Show the parent row
                    $parentRow.show();
                } else {
                    // Hide the parent row
                    $parentRow.hide();

                    // CRITICAL: Also hide the immediately following detail row,
                    // in case it was accidentally expanded or kept visible.
                    if ($detailRow.length) {
                        $detailRow.hide();

                        // Optional: Reset the 'View' button text on the hidden row
                        $parentRow.find('.toggle-details-btn').text('View');
                    }
                }
            });
        }
    }

    $(document).ready(function() {
        let rowCount = 0; // Initialize row count for additional rows

        // Sembunyikan item_id pada awalnya
        $('#item_id_container').hide(); // Pastikan Anda memiliki elemen dengan ID ini

        // Function to handle sales order number change without auto-submit
        $('#sales_order_number').on('change', function() {
            const salesOrderNumber = $(this).val();
            //  console.log('a');

            // Fetch items related to the selected sales order number
            if (salesOrderNumber) {
                fetchItems(salesOrderNumber); // Custom function to fetch items
            }
        });

        // Function to add new row


        // Event delegation for remove-row button

    });



    $(document).ready(function() {
        // Initialize Select2 on the department_code dropdown
        $('#department_code').select({
            tags: true, // Allows the user to create new options
            placeholder: "Select Department",
            allowClear: true
        });
    });



    $(document).ready(function() {
        document.getElementById('po-form').addEventListener('submit', function(event) {
            const supplierCode = document.getElementById('supplier_code').value;

            // Check if supplier_code is null or empty
            if (!supplierCode) {
                event.preventDefault(); // Prevent form submission
                Swal.fire({
                    title: 'Error!',
                    text: 'Please select a supplier before submitting the form.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }

            let formData = new FormData(this);
            let aa = true;
            if($("#checkHPP").val() == 1 ||$("#checkHPP").val() == "1"){
                aa = false;
            }
            if(aa){
                e.preventDefault();
                $.ajax({
                    url: "{{ route('checkUnit') }}",
                    type: "POST",
                    data: formData,
                    success: function (rs) {
                        if (rs.length > 0) {
                            let errorHtml = "";
                            rs.forEach((a) => {
                                errorHtml += "<li>" + a.item_name + "</li>";
                            });
                            errorHtml = "<ul>" + errorHtml + "</ul>";
                            Swal.fire({
                                title: 'Tidak bisa disimpan!',
                                html: "Harap ganti unit item berikut, karena sudah tidak aktif:<br/>" + errorHtml,
                                icon: 'warning',
                                confirmButtonText: 'OK'
                            });
                        } else {
                            $("#checkHPP").val(1);
                            $("#si-form").submit();
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        let errorMessage = "Terjadi kesalahan saat memeriksa stok dan unit.";
                        try {
                            let data = JSON.parse(xhr.responseText);
                            if (data.message) {
                                errorMessage = data.message;
                            }
                        } catch (e) {
                            // Use default message if parsing fails
                        }
                        Swal.fire({
                            title: 'Error!',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    },
                    cache: false,
                    contentType: false,
                    processData: false,
                });
            }
        });
    });
</script>
@endsection