@extends('core::dashboard.layouts.master')
@section('title', 'NVO Container Movements')

@section('content')

    <style>
        .conatinerMovementThead {
            height: 30px;
        }

        #containerMovementTableBody td input,
        #containerMovementTableBody td select {
            margin: 2px;
            width: calc(100% - 4px);
        }

        .event-party-suggestions-box {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            width: 650px;
            max-height: 245px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 13px;
            text-align: left;
            display: none;
        }

        .form-field-gap {
            margin-right: 2px;
        }
    </style>

    <div class="loading-bar" id="loadingBar" style="display: none;">
        <div class="loading-bar--progress">
            <span class="first"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span class="last"></span>
        </div>
    </div>


    {{-- start Load Contract Data --}}
    <div class="global_container_settings">
        <div class="card global_settings">
            <div class="card-header dot_border d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0" style="font-weight: 550;">NVO Container Movement</h4>
                {{-- <button type="button" class="btn btn-primary ms-1 new_nvocc_contract_button" id="createNew1"
                    data-bs-toggle="modal">
                    {{ transText('new_nvocc_contract_button') }}
                </button> --}}
            </div>

            <div class="card-body">
                <div id="ContainerMovementloadform" class="form-horizontal">
                    <div class="row pt-1 align-items-end" style="flex-wrap: nowrap; overflow-x: auto; margin-bottom:12px">

                        <!-- Container No -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_no" style="margin-bottom: 4px;" class="form-label">Container No:</label>
                            <input class="form-control" name="container_no" id="container_no" type="text"
                                style="min-width: 140px;">
                        </div>

                        <!-- Date Type -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_date_type" style="margin-bottom: 4px;" class="form-label">Date
                                Type:</label>
                            <select class="form-select" name="container_date_type" id="container_date_type"
                                autocomplete="off" style="min-width: 110px;">
                                <option value="entry">Entry</option>
                                <option value="event">Event</option>
                            </select>
                        </div>

                        <!-- From Date -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_date_range_from" style="margin-bottom: 4px;"
                                class="form-label">From:</label>
                            <input type="date" name="container_date_range_from" id="container_date_range_from"
                                class="form-control" style="min-width: 140px;">
                        </div>

                        <!-- To Date -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_date_range_to" style="margin-bottom: 4px;" class="form-label">To:</label>
                            <input type="date" name="container_date_range_to" id="container_date_range_to"
                                class="form-control" style="min-width: 140px;">
                        </div>

                        <!-- Business Unit -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_business_unit" style="margin-bottom: 4px;" class="form-label">Business
                                Unit:</label>
                            <select name="container_business_unit" id="container_business_unit"
                                class="form-select uppercase-only" autocomplete="off" style="min-width: 130px; width:130px">
                                <option value="">Select</option>
                                @foreach ($businessUnits as $businessUnit)
                                    <option value="{{ $businessUnit['value'] }}">{{ $businessUnit['full_name'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Event Party -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_event_party" style="margin-bottom: 4px;" class="form-label">Event
                                Party:</label>
                            <input type="text" class="form-control" name="container_event_party"
                                id="container_event_party" style="min-width: 140px;">
                        </div>

                        <!-- Event Code -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_event_code" style="margin-bottom: 4px;" class="form-label">Event
                                Code:</label>
                            <select class="form-select" name="container_event_code" id="container_event_code"
                                style="min-width: 120px; width: 120px;">
                                <option value="">Select</option>
                                @foreach ($eventCodes as $eventCode)
                                    <option value="{{ $eventCode->field_id }}">{{ $eventCode->field_value }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Status -->
                        <div class="col-auto pe-0 form-field-gap">
                            <label for="container_status" style="margin-bottom: 4px;" class="form-label">Status:</label>
                            <select class="form-select" name="container_status" id="container_status"
                                style="min-width: 120px;">
                                <option value="A">Active</option>
                                <option value="D">Deleted</option>
                                <option value="N">Canceled</option>
                                <option value="All" selected>All</option>
                            </select>
                        </div>

                        <!-- Buttons -->
                        <div class="col-auto ms-auto d-flex align-items-center"
                            style="gap: 6px; min-width: 240px; padding-top: 15px;">

                            <!-- Add New -->
                            <button type="button" class="btn btn-primary bg-gradient p-1 flex-fill"
                                style="min-width: 40px; max-width: 45px;" id="addNewContainerMovement"
                                title="Add New Container">
                                <i class="fas fa-plus-square"></i>
                            </button>

                            <!-- Excel -->
                            <button type="button" class="btn btn-success bg-gradient p-1 flex-fill"
                                style="min-width: 40px; max-width: 45px;" title="Export to Excel">
                                <i class="fas fa-file-excel"></i>
                            </button>

                            <!-- PDF -->
                            <button type="button" class="btn btn-danger bg-gradient p-1 flex-fill"
                                style="min-width: 40px; max-width: 45px;" title="Export to PDF">
                                <i class="fas fa-file-pdf"></i>
                            </button>

                            <!-- LOAD Button (Bigger) -->
                            <button type="submit" class="btn btn-primary bg-gradient p-1 containerLoadButton"
                                id="loadDataBtn"
                                style="min-width: 77px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    viewBox="0 0 24 24">
                                    <g fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="2">
                                        <path stroke-dasharray="32" stroke-dashoffset="32"
                                            d="M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s"
                                                values="32;0"></animate>
                                            <set fill="freeze" attributeName="stroke-dasharray" begin="0.8s"
                                                to="2 4"></set>
                                        </path>
                                        <path stroke-dasharray="32" stroke-dashoffset="32"
                                            d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s"
                                                dur="0.4s" values="32;0"></animate>
                                        </path>
                                        <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s"
                                                dur="0.2s" values="10;0"></animate>
                                        </path>
                                        <path stroke-dasharray="6" stroke-dashoffset="6"
                                            d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
                                            <animate fill="freeze" attributeName="stroke-dashoffset" begin="1s"
                                                dur="0.2s" values="6;0"></animate>
                                        </path>
                                    </g>
                                </svg>
                                LOAD
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mb-0" id="hbl_content_div">
                    <div class="p-4 shadow rounded text-left contarct_head_message"
                        style="background: #FCFCFC; border: 1.5px solid #d9d9d9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);">
                        <h5 class="text-muted mb-0">📄 {{ transText('data_load_msg') }}...!</h5>
                    </div>
                </div>


                <div class="row">
                    <div class="table-container containerMovement mt-1 ics_ens_tb d-none">
                        <!-- Header Table -->
                        <table class="table table-bordered table-striped mb-0" id="contractTable"
                            style="table-layout: fixed; width: 100%;">
                            <thead class="table-header conatinerMovementThead">
                                <tr class="text-center align-middle">
                                    <th style="width: 25px; min-width: 25px;">SN</th>
                                    <th style="min-width: 100px; width: 100px;">BUSINSS UNIT</th>
                                    <th style="min-width: 60px; width: 60px;">BKG NO</th>
                                    <th style="min-width: 60px; width: 60px;">MBL NO</th>
                                    <th style="min-width: 95px; width: 95px;">CONAINER NO</th>
                                    <th style="min-width: 35px; width: 35px;">SIZE</th>
                                    <th style="min-width: 121px; width: 121px;">EVENT DATA TIME</th>
                                    <th style="min-width: 172px; width: 172px;">EVENT PARTY (CONTRACT)</th>
                                    <th style="min-width: 90px; width: 90px;">EVENT CODE</th>
                                    <th style="min-width: 60px; width: 60px;">BILL A/C</th>
                                    <th style="min-width: 72px; width: 72px;">CURRENCY</th>
                                    <th style="min-width: 60px; width: 60px;">AMOUNT</th>
                                    <th style="width: 33px;">ROE</th>
                                    <th style="width: 48px;">LOCAL</th>
                                    <th style="width: 45px;">VAT %</th>
                                    <th style="width: 85px;">VAT AMOUNT</th>
                                    <th style="width: 85px;">TOTAL LOCAL</th>
                                    <th style="width: 70px;">REMARKS</th>
                                    <th style="width: 45px;">-</th>
                                    <th style="width: 45px;">-</th>
                                </tr>
                            </thead>

                        </table>

                        <!-- Body Table with Scroll -->
                        <div class="table-body-scroll" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-bordered table-striped mb-0" id="containerMovementTableBody"
                                style="table-layout: fixed; width: 100%;">
                                <tbody id="containerMovementTbody">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- end col -->
    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function() {


            $('.containerLoadButton').on('click', function(event) {
                event.preventDefault();
                fetchMovementDatas();
            })

            //-- initial fetch
            fetchMovementDatas();

            // PHP data pass js
            const containerSizes = @json($containerSizes);
            const businessUnits = @json($businessUnits);
            const currences = @json($currences);
            const eventCodes = @json($eventCodes);

            //-- fetch data from database
            function fetchMovementDatas() {
                const containerNo = $('#container_no').val().trim();
                const dateType = $('#container_date_type').val(); // 'entry' or 'event'
                const fromDate = $('#container_date_range_from').val();
                const toDate = $('#container_date_range_to').val();
                const businessUnit = $('#container_business_unit').val();
                const eventParty = $('#container_event_party').val().trim();
                const eventCode = $('#container_event_code').val();
                const status = $('#container_status').val();

                const url = '/nvocc/container-movement/fetchdata';
                const queryParams = new URLSearchParams({
                    ...(containerNo && {
                        container_no: containerNo
                    }),
                    ...(dateType && {
                        date_type: dateType
                    }),
                    ...(fromDate && {
                        from_date: fromDate
                    }),
                    ...(toDate && {
                        to_date: toDate
                    }),
                    ...(businessUnit && {
                        business_unit: businessUnit
                    }),
                    ...(eventParty && {
                        event_party: eventParty
                    }),
                    ...(eventCode && {
                        event_code: eventCode
                    }),
                    ...(status && {
                        status: status !== 'All' ? status : ''
                    }),
                });

                $.ajax({
                    url: `${url}?${queryParams}`,
                    type: 'GET',
                    success: function(response) {
                        $('#containerMovementTbody').html('');
                        if (response.length > 0) {
                            $.each(response, function(index, movement) {
                                let row = makeRow(movement);
                                $('#containerMovementTbody').append(row);
                            });
                        }
                        resetSerialNumbers();
                        addNoArrowToPopulatedSelects();
                    },
                    error: function(xhr) {
                        console.error("Error fetching data:", xhr.responseText);
                    }
                });
            }

            //-- row generate and create ---
            function makeRow(data = {}) {
                // console.log(data)

                // Business Unit Options generate
                let businessUnitOptions = `<option value=""></option>`;
                businessUnits.forEach(unit => {
                    const isSelected = (data.business_unit === unit.value) || unit.selected;
                    businessUnitOptions += `
                        <option value="${unit.value}" ${isSelected ? 'selected' : ''}>
                            ${unit.full_name}
                        </option>
                    `;
                });

                // Container Size Options generate
                let containerSizeOptions = `<option value=""></option>`;
                containerSizes.forEach(size => {
                    const isSelected = data.container_size === size.eq_code;
                    containerSizeOptions += `
                        <option value="${size.eq_code}" ${isSelected ? 'selected' : ''}>
                            ${size.eq_size_display}
                        </option>
                    `;
                });

                //--- currences
                let currencesOption = `<option value=""></option>`;
                currences.forEach(currency => {
                    const isSelected = data.currency_code === currency.currency_code;
                    currencesOption += `
                        <option value="${currency.currency_code}" ${isSelected ? 'selected' : ''}>
                            ${currency.currency_code}
                        </option>
                    `;
                });

                //--- eventCodes
                let eventCodeOption = `<option value=""></option>`;
                eventCodes.forEach(eventCode => {
                    const isSelected = data.event_code === eventCode.field_id;
                    eventCodeOption += `
                        <option value="${eventCode.field_id}" ${isSelected ? 'selected' : ''}>
                            ${eventCode.field_value}
                        </option>
                    `;
                });


                return `
                    <tr class="text-center align-middle">
                        <td class="sn" style="width: 25px; min-width: 25px;"></td>
                        <input type="hidden" id="movementRowId" name="row_id[]" value="${data.row_id ?? ''}">
                        <td style="min-width: 100px; width: 100px;">
                            <select name="business_unit[]" class="form-select" required="">
                            ${businessUnitOptions}
                            </select>
                        </td>
                        <td style="min-width: 60px; width: 60px;">
                            <input type="text" name="bkg_no[]" class="form-control" value="${data.bkg_no ?? ''}" required="">
                        </td>
                        <td style="min-width: 60px; width: 60px;">
                            <input type="text" name="mbl_no[]" class="form-control" value="${data.mbl_no ?? ''}" required="">
                        </td>
                        <td style="min-width: 95px; width: 95px;">
                            <input type="text" name="container_no[]" class="form-control" value="${data.container_no ?? ''}" required="">
                        </td>
                        <td style="min-width: 35px; width: 35px;">
                            <select name="container_size[]" class="form-select" required="">
                                ${containerSizeOptions}
                            </select>
                        </td>
                        <td style="min-width: 121px; width: 121px;">
                            <input type="datetime-local" name="event_date_time[]" class="form-control" value="${data.event_date ?? ''}" required="">
                        </td>

                        <td style="min-width: 172px; width: 172px;">
                            <div class="position-relative">
                                <input
                                    type="text"
                                    name="event_party[]"
                                    class="form-control event-party-input"
                                    value="${data.event_party ?? ''}"
                                    required=""
                                    placeholder="Type party code..."
                                    autocomplete="off"
                                >
                                <div class="event-party-suggestions-box">
                                    <table class="table table-striped" style="width: 100%; border-collapse: collapse; font-size: 13px;">
                                        <thead>
                                            <tr>
                                                <th class="text-center" style="width: 15px; padding: 4px; border: 1px solid #ccc;">-</th>
                                                <th class="text-center" style="width: 40px; padding: 4px; border: 1px solid #ccc;">CODE</th>
                                                <th class="text-center" style="width: 40px; padding: 4px; border: 1px solid #ccc;">TYPE</th>
                                                <th class="text-center" style="width: 250px; padding: 4px; border: 1px solid #ccc;">NAME</th>
                                            </tr>
                                        </thead>
                                        <tbody class="event-suggestions-table-body">
                                            <!-- Rows will be injected here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </td>

                        <td style="min-width: 90px; width: 90px;">
                            <select name="event_code[]" class="form-select movement_event_code">
                                ${eventCodeOption}
                            </select>
                        </td>

                        <td style="min-width: 60px; width: 60px;">
                            <select name="bill_account[]" class="form-select" required="">
                                <option value=""></option>
                                <option value="A" ${data.billing_account == "A" ? "selected" : ""}>Agent</option>
                                <option value="P" ${data.billing_account == "P" ? "selected" : ""}>Principal</option>
                                <option value="C" ${data.billing_account == "C" ? "selected" : ""}>Customer</option>
                            </select>
                        </td>
                        <td style="min-width: 72px; width: 72px;">
                            <select name="currency[]" class="form-select" required="">
                                ${currencesOption}
                            </select>
                        </td>

                        <td style="min-width: 60px; width: 60px;">
                            <input type="text" name="amount[]" class="form-control calc-input" value="${data.currency_amount ?? ''}" required oninput="this.value = this.value.replace(/[^0-9.]/g, '')" placeholder="0.00">
                        </td>
                        <td style="width: 33px;">
                            <input type="text" name="roe[]" class="form-control calc-input" value="${data.roe ?? ''}" required oninput="this.value = this.value.replace(/[^0-9.]/g, '')" placeholder="0.0000">
                        </td>
                        <td style="width: 48px;">
                            <input type="text" name="local[]" class="form-control" value="${data.local_amount ?? ''}" readonly placeholder="0.00">
                        </td>
                        <td style="width: 45px;">
                            <input type="text" name="vat_percentage[]" class="form-control calc-input" value="${data.vat_percentage ?? ''}" required oninput="this.value = this.value.replace(/[^0-9.]/g, '')" placeholder="0.00">
                        </td>
                        <td style="width: 85px;">
                            <input type="text" name="vat_amount[]" class="form-control" value="${data.vat_amount ?? ''}" readonly placeholder="0.00">
                        </td>
                        <td style="width: 85px;">
                            <input type="text" name="total_local[]" class="form-control" value="${data.total_local_amount ?? ''}" readonly placeholder="0.00">
                        </td>



                        <td style="width: 70px;">
                            <input type="text" name="remarks[]" class="form-control uppercase-only" value="${data.remarks ?? ''}">
                        </td>
                        <td style="width: 45px;">
                            <button type="button" class="btn btn-primary bg-gradient btnSaveRow" title="save" style="width: 28px;height: 24px;">
                                <i class="fas fa-save"></i>
                            </button>
                        </td>
                        <td style="width: 45px;">
                            <button type="button" class="btn btn-danger btnDeleteRow" title="delete" style="width: 28px;height: 24px;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
            }

            //-- add new row
            $("#addNewContainerMovement").click(function() {
                let newRow = makeRow({});
                $("#containerMovementTbody").prepend(newRow);
                resetSerialNumbers();
            });


            //=== start calculate and copy paste block code =====//
            // Silent block paste on calc-input fields
            $(document).on('copy paste cut', '.calc-input', function(e) {
                e.preventDefault();
            });

            function calculateRow($row) {
                const amount = parseFloat($row.find('input[name="amount[]"]').val()) || 0;
                const roe = parseFloat($row.find('input[name="roe[]"]').val()) || 0;
                const vatPercentage = parseFloat($row.find('input[name="vat_percentage[]"]').val()) || 0;

                const local = amount * roe;
                const vatAmount = local * (vatPercentage / 100);
                const totalLocal = local + vatAmount;

                // Update fields with fixed decimal places
                $row.find('input[name="local[]"]').val(local.toFixed(2));
                $row.find('input[name="vat_amount[]"]').val(vatAmount.toFixed(2));
                $row.find('input[name="total_local[]"]').val(totalLocal.toFixed(2));
            }


            $(document).on('input', '.calc-input', function() {
                const $row = $(this).closest('tr');
                calculateRow($row);
            });


            //=== start calculate and copy paste block code =====//



            // SAVE BUTTON CLICK (Insert or Update)
            $(document).on("click", ".btnSaveRow", function() {
                const $row = $(this).closest("tr");
                const $inputs = $row.find("input, select");

                // Collect form data
                const formData = {};
                $inputs.each(function() {
                    const $el = $(this);
                    const name = $el.attr("name").replace("[]", ""); // Remove [] for key
                    formData[name] = $el.val();
                });

                // Get row_id to determine insert/update
                const rowId = $row.find("input[name='row_id[]']").val();

                const url = rowId ?
                    `/nvocc/container-movement/update/${rowId}` :
                    '/nvocc/container-movement/store';

                const method = rowId ? 'PUT' : 'POST';

                $.ajax({
                    url: url,
                    type: method,
                    data: {
                        ...formData,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        console.log(response)
                        if (!rowId && response.id) {
                            // Set the new ID after insert
                            $row.find("input[name='row_id[]']").val(response.id);
                        }
                        notyfFlash.success(response.message)
                        fetchMovementDatas();
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;

                            // Clear previous invalid classes ONLY in current row
                            $row.find('.is-invalid').removeClass('is-invalid');

                            // Collect all messages for notyf
                            Object.keys(errors).forEach(function(fieldKey) {
                                let messages = errors[fieldKey];

                                // Convert field name to match input with []
                                let inputName = fieldKey + '[]';

                                // Find input ONLY in current row ($row)
                                let $input = $row.find(
                                    `input[name="${inputName}"], select[name="${inputName}"], textarea[name="${inputName}"]`
                                );

                                if ($input.length > 0) {
                                    $input.addClass(
                                        'is-invalid'); // Highlight only in this row
                                }

                                // Show each error message via notyf
                                messages.forEach(msg => {
                                    notyfFlash.error(msg);
                                });
                            });

                        } else {
                            // For 500, 404, network errors
                            notyfFlash.error('An error occurred. Please try again.');
                        }
                    }
                });
            });

            // DELETE BUTTON CLICK
            $(document).on("click", ".btnDeleteRow", function() {
                const $row = $(this).closest("tr");
                const rowId = $row.find("input[name='row_id[]']").val();

                if (!rowId) {
                    // New row: just remove from UI
                    $row.remove();
                    resetSerialNumbers();
                    return;
                }

                // Existing row: send delete request (soft delete)
                if (rowId) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "Are you sure you want to delete this data?",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: `/nvocc/container-movement/delete/${rowId}`,
                                type: 'DELETE',
                                data: {
                                    _token: $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function(response) {
                                    notyfFlash.success(response.message);
                                    fetchMovementDatas();
                                },
                                error: function(xhr) {
                                    notyfFlash.error(
                                        'Delete failed. Please try again.');
                                }
                            });
                        }
                    });

                }
            });

            //-- reset serial numbers
            function resetSerialNumbers() {
                const $tbody = $('#containerMovementTbody');
                const $rows = $tbody.children('tr'); // শুধুমাত্র সরাসরি <tr> নাও

                $rows.each(function(index) {
                    $(this).find('td.sn').text(index + 1);
                });
            }


            //-- first loaded selected option no arrow class add
            function addNoArrowToPopulatedSelects() {
                $('#containerMovementTbody').find('select').each(function() {
                    const $select = $(this);
                    if ($select.val()) {
                        $select.addClass('no-arrow');
                    } else {
                        $select.removeClass('no-arrow');
                    }
                });
            }

            //-- chnage selected
            $(document).on('change', 'select.form-select', function() {
                if ($(this).val()) {
                    $(this).addClass('no-arrow');
                } else {
                    $(this).removeClass('no-arrow');
                }
            });



            // LIVE SEARCH: Event Party (by party_code)
            // ===================================================================
            $(document).on('keyup', '.event-party-input', function(e) {
                const $input = $(this);
                const query = $input.val().trim();

                // Find the suggestion box
                const $container = $input.siblings('.event-party-suggestions-box');
                const $tbody = $container.find('.event-suggestions-table-body');

                // Clear previous timeout
                if ($input.data('timeout')) {
                    clearTimeout($input.data('timeout'));
                }

                // Hide if empty or less than 2 characters
                if (!query || query.length < 2) {
                    $container.hide();
                    return;
                }

                // Hide if empty
                if (!query) {
                    $container.hide();
                    return;
                }

                // Set delay
                const timeout = setTimeout(() => {
                    $.ajax({
                        url: '/nvocc/container-movement/search-party',
                        type: 'GET',
                        data: {
                            q: query
                        },
                        success: function(parties) {
                            $tbody.empty();

                            if (parties.length > 0) {
                                parties.forEach((party, index) => {
                                    const code = party.party_code || '';
                                    const name = party.party_name || '';
                                    const type = party.party_type || 'N/A';

                                    const row = `
                            <tr class="suggestion-row"
                                data-party-code="${party.party_code}"
                                data-party-name="${party.party_name}"
                                data-party-type="${party.party_type}"
                                data-event-code="${party.event_code}"
                                data-bill-account="${party.bil_account}"
                                data-container-size="${party.container_size}"
                                data-currency="${party.contract_currency}"
                                data-amount="${party.applicable_rate}"
                                data-roe="${party.standard_roe}"
                                data-local="${party.local_amount}"
                                data-vat-percentage="${party.vat_percentage}"
                                data-vat-amount="${party.vat_amount}"
                                data-total-local="${party.total_local_amount}"
                                data-remarks="${party.remarks || ''}"
                                style="cursor:pointer; font-size: 12px;">
                                <td class="text-center" style="border: 1px solid #ccc; padding: 4px;">${index + 1}</td>
                                <td class="text-center" style="border: 1px solid #ccc; padding: 4px;">${code}</td>
                                <td class="text-center" style="border:1px solid #ccc; padding: 4px; text-transform: uppercase;">
                                    ${type}
                                </td>
                                <td class="" style="border: 1px solid #ccc; padding: 4px;">${name}</td>
                            </tr>
                        `;
                                    $tbody.append(row);
                                });
                            } else {
                                $tbody.append(`
                        <tr>
                            <td colspan="4" class="text-center text-muted" style="border:1px solid #ccc; padding: 8px;">
                                No results found
                            </td>
                        </tr>
                    `);
                            }
                            // Show after loading
                            $container.show();
                            // Position it relative to input
                            positionSuggestionsBox($input, $container);
                        },
                        error: function(xhr) {
                            console.error("Search error:", xhr.responseText);
                        }
                    });
                }, 300);

                $input.data('timeout', timeout);
            });

            // Function to position suggestions box
            function positionSuggestionsBox($input, $container) {
                const rect = $input[0].getBoundingClientRect(); // Get input position in viewport
                const containerRect = $container[0].getBoundingClientRect();

                // Calculate position
                const top = rect.bottom + window.scrollY + 2; // 2px gap below input
                const left = '420px';

                // Apply position
                $container.css({
                    top: top,
                    left: left,
                    width: '480px' // Fixed width
                });
            }

            // Click on suggestion
            $(document).on('click', '.suggestion-row', function() {
                const $row = $(this);
                const $container = $row.closest('.event-party-suggestions-box');
                const $input = $container.siblings('.event-party-input');
                const $tr = $input.closest('tr'); // Current row in the main table

                $input.val($row.data('party-code'));
                // Auto-fill other fields
                $tr.find('select[name="event_code[]"]').val($row.data('event-code')).trigger('change');
                $tr.find('select[name="bill_account[]"]').val($row.data('bill-account')).trigger(
                    'change');
                $tr.find('select[name="container_size[]"]').val($row.data('container-size')).trigger(
                    'change');
                $tr.find('select[name="currency[]"]').val($row.data('currency')).trigger('change');
                $tr.find('input[name="amount[]"]').val($row.data('amount'));
                $tr.find('input[name="roe[]"]').val($row.data('roe'));
                $tr.find('input[name="local[]"]').val($row.data('local'));
                $tr.find('input[name="vat_percentage[]"]').val($row.data('vat-percentage'));
                $tr.find('input[name="vat_amount[]"]').val($row.data('vat-amount'));
                $tr.find('input[name="total_local[]"]').val($row.data('total-local'));
                $tr.find('input[name="remarks[]"]').val($row.data('remarks'));

                calculateRow($tr);

                $container.hide();
            });

            // Hide suggestions when clicking outside
            $(document).click(function(e) {
                if (!$(e.target).closest('.position-relative').length) {
                    $('.event-party-suggestions-box').hide();
                }
            });

            // LIVE SEARCH END: Event Party (by party_code)

        });
    </script>

@endsection