{{--
    Free Product Selection Modal
    Injected into the POS sell screen via get_pos_screen_view hook.
    Triggered when a product with a free_product promotion is added to cart.
--}}

{{-- ===================== MODAL HTML ===================== --}}
<style>
    .fp-search-container {
        position: relative;
        margin-bottom: 15px;
    }
    .fp-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 9999;
        max-height: 280px;
        overflow-y: auto;
        border-top: none;
        margin-top: -1px;
    }
    .fp-dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 16px;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
        transition: all 0.1s ease;
        background: #fff;
    }
    .fp-dropdown-item:last-child {
        border-bottom: none;
    }
    .fp-dropdown-item:hover, .fp-dropdown-item.highlighted {
        background-color: #e6f7ed !important;
    }
    .fp-dropdown-item .prod-name {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }
    .fp-dropdown-item .prod-meta {
        font-size: 11px;
        color: #64748b;
        margin-top: 2px;
    }
</style>

<div class="modal fade" id="free_product_modal" tabindex="-1" role="dialog" aria-labelledby="freeProductModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="max-width:800px; width:90%;">
        <div class="modal-content" style="border-radius:8px; overflow:visible; border:none; box-shadow:0 10px 30px rgba(0,0,0,0.15);">
            <div class="modal-header" style="background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;padding:16px 20px; border-top-left-radius:8px; border-top-right-radius:8px; border-bottom:none;">
                <button type="button" class="close" data-dismiss="modal" style="color:#fff;opacity:1;font-size:22px;">&times;</button>
                <h4 class="modal-title" id="freeProductModalLabel" style="font-size:16px;">
                    <i class="fa fa-gift"></i> &nbsp;Choose Free Gift Product
                </h4>
            </div>

            <div class="modal-body" style="padding:20px 20px 30px 20px; min-height:360px; overflow:visible;">
                {{-- Loading state --}}
                <div id="fp_loading" class="text-center" style="padding:30px 0;">
                    <i class="fa fa-spinner fa-spin fa-2x" style="color:#27ae60;"></i>
                    <p style="margin-top:10px;color:#666;">Loading free products...</p>
                </div>

                {{-- Error state --}}
                <div id="fp_error" class="alert alert-warning" style="display:none;"></div>

                {{-- Content --}}
                <div id="fp_content" style="display:none;">
                    <div class="alert alert-success" style="margin-bottom:15px;padding:12px 15px; font-size:14px;">
                        <i class="fa fa-gift"></i>
                        <strong id="fp_promo_name"></strong> —
                        Customer qualifies for <strong id="fp_qty_label"></strong> free item(s)!
                    </div>

                    {{-- Dropdown search --}}
                    <div class="fp-search-container">
                        <div style="position:relative;">
                            <span style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#27ae60;z-index:1;font-size:16px;">
                                <i class="fa fa-search"></i>
                            </span>
                            <input type="text" id="fp_search" class="form-control" autocomplete="off"
                                placeholder="Type to search free product..."
                                style="font-size: 15px; padding: 12px 16px 12px 42px; height: 48px; border-radius: 8px; border: 2px solid #27ae60; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.08);">
                            <span id="fp_search_clear" style="position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#aaa;cursor:pointer;display:none;font-size:20px;line-height:1;user-select:none;">&times;</span>
                        </div>

                        {{-- Dropdown results --}}
                        <div id="fp_dropdown" class="fp-dropdown"></div>
                    </div>

                    {{-- Selected product display --}}
                    <div id="fp_selected_display" style="display:none;margin-top:10px;">
                        <div style="display:flex;align-items:center;gap:12px;background:#f0fff4;
                            border:2px solid #27ae60;border-radius:8px;padding:12px 15px;">
                            <div id="fp_sel_img_wrap" style="flex-shrink:0;"></div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-weight:700;font-size:14px;color:#1a7340;" id="fp_sel_name"></div>
                                <div style="font-size:11px;color:#555;margin-top:2px;" id="fp_sel_sku"></div>
                            </div>
                            <span class="label label-success" style="font-size:11px;padding:4px 8px;">&#127873; FREE</span>
                        </div>
                    </div>

                    {{-- Variation selector --}}
                    <div id="fp_variation_group" style="display:none;margin-top:12px;">
                        <label style="font-weight:600;">Select Variation:</label>
                        <select id="fp_variation_select" class="form-control" style="width:100%;">
                            <option value="">-- Select variation --</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="modal-footer" id="fp_footer" style="display:none;background:#f9f9f9; border-bottom-left-radius:8px; border-bottom-right-radius:8px; border-top:none; padding:15px 20px;">
                <button type="button" class="btn btn-success" id="fp_confirm_btn" style="min-width:130px; padding:8px 16px; font-weight:600; border-radius:6px;">
                    <i class="fa fa-plus-circle"></i> Add to Cart Free
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal" style="padding:8px 16px; border-radius:6px;">Cancel</button>
            </div>
        </div>
    </div>
</div>

{{-- ===================== JAVASCRIPT ===================== --}}
<script type="text/javascript">
(function($) {
    'use strict';

    // State
    var _promotionId      = null;
    var _freeQty          = 1;
    var _selectedVarId    = null;
    var _allVariations    = [];
    var _allProducts      = []; // full product list loaded from AJAX
    var _highlightedIndex = -1; // current highlighted item index in the visible matches
    var _editingRow       = null; // row being replaced if change is requested

    // ---- Helpers ----
    function _noImg() {
        return '<div style="width:48px;height:48px;background:#e8e8e8;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">' +
               '<i class="fa fa-image" style="color:#bbb;font-size:18px;"></i></div>';
    }
    function _img(src) {
        return '<img src="' + src + '" onerror="this.parentNode.innerHTML=\'<div style=&quot;width:48px;height:48px;background:#e8e8e8;border-radius:6px;&quot;></div>\'" ' +
               'style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0;">';
    }

    // ---- Reset UI ----
    function _resetModal() {
        _selectedVarId    = null;
        _allVariations    = [];
        _highlightedIndex = -1;
        $('#fp_search').val('');
        $('#fp_search_clear').hide();
        $('#fp_dropdown').hide().html('');
        $('#fp_selected_display').hide();
        $('#fp_variation_group').hide();
        $('#fp_variation_select').html('<option value="">-- Select variation --</option>');
    }

    /**
     * PUBLIC: trigger the modal for a given promotion
     */
    window.showFreeProductModal = function(promotionId) {
        if (!promotionId) return;

        _promotionId = promotionId;
        _allProducts = [];
        _resetModal();

        $('#fp_loading').show();
        $('#fp_content').hide();
        $('#fp_error').hide().text('');
        $('#fp_footer').hide();

        $('#free_product_modal').modal({ backdrop: 'static', keyboard: false });
        $('#free_product_modal').modal('show');

        var locationId = $('input#location_id').val() || '';

        $.ajax({
            url: '/offerandpromotion/promotions/' + promotionId + '/free-products',
            type: 'GET',
            data: { location_id: locationId },
            dataType: 'json',
            success: function(res) {
                $('#fp_loading').hide();

                if (!res.success || !res.free_products || res.free_products.length === 0) {
                    $('#fp_error').text(res.msg || 'No free products configured for this promotion.').show();
                    return;
                }

                _freeQty     = parseInt(res.free_product_qty) || 1;
                _allProducts = res.free_products;

                $('#fp_promo_name').text(res.promotion_name || 'Promotion');
                $('#fp_qty_label').text(_freeQty);
                $('#fp_content').show();
                $('#fp_footer').show();

                // Auto-select if only one product
                if (_allProducts.length === 1) {
                    _selectProduct(_allProducts[0]);
                } else {
                    // Show all as initial dropdown hint
                    _renderDropdown('');
                    $('#fp_search').focus();
                }
            },
            error: function() {
                $('#fp_loading').hide();
                $('#fp_error').text('Error loading free products. Please try again.').show();
            }
        });
    };

    // ---- Render dropdown ----
    function _renderDropdown(query) {
        var q = query.toLowerCase().trim();
        var matches = _allProducts.filter(function(p) {
            return !q || p.name.toLowerCase().indexOf(q) !== -1;
        });

        if (!matches.length) {
            $('#fp_dropdown').html(
                '<div style="padding:15px;color:#999;text-align:center;">' +
                '<i class="fa fa-search"></i> No products found</div>'
            ).show();
            _highlightedIndex = -1;
            return;
        }

        var html = '';
        $.each(matches, function(i, p) {
            var imgHtml = p.image
                ? '<img src="' + p.image + '" style="width:40px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0;" onerror="this.style.display=\'none\'">'
                : '<div style="width:40px;height:40px;background:#eee;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"><i class="fa fa-image" style="color:#ccc;font-size:16px;"></i></div>';

            // Highlight matched query in name
            var displayName = p.name;
            if (q) {
                var idx = displayName.toLowerCase().indexOf(q);
                if (idx !== -1) {
                    displayName = displayName.substring(0, idx) +
                        '<mark style="background:#d4f5e0;padding:0;">' + displayName.substring(idx, idx + q.length) + '</mark>' +
                        displayName.substring(idx + q.length);
                }
            }

            html += '<div class="fp-dropdown-item" data-product-index="' + i + '">' +
                    imgHtml +
                    '<div style="flex:1;min-width:0;">' +
                    '<div class="prod-name">' + displayName + '</div>' +
                    (p.variations && p.variations.length > 1
                        ? '<div class="prod-meta">' + p.variations.length + ' variations</div>'
                        : (p.variations && p.variations.length === 1 && p.variations[0].sku
                            ? '<div class="prod-meta">SKU: ' + p.variations[0].sku + '</div>'
                            : '')) +
                    '</div>' +
                    '<span class="label label-success" style="font-size:10px;">FREE</span>' +
                    '</div>';
        });

        $('#fp_dropdown').html(html).show();

        // Store matched products for index lookup
        $('#fp_dropdown').data('matched', matches);

        // Auto-highlight the first matched item
        _highlightItem(0);
    }

    // ---- Highlight an item by its DOM index ----
    function _highlightItem(index) {
        var $items = $('#fp_dropdown .fp-dropdown-item');
        if (!$items.length) return;

        $items.removeClass('highlighted');
        _highlightedIndex = index;

        if (_highlightedIndex >= 0 && _highlightedIndex < $items.length) {
            var $activeItem = $items.eq(_highlightedIndex);
            $activeItem.addClass('highlighted');

            // Scroll into view if needed
            var container = $('#fp_dropdown')[0];
            var item = $activeItem[0];
            
            var containerTop = container.scrollTop;
            var containerBottom = containerTop + container.clientHeight;
            
            var itemTop = item.offsetTop;
            var itemBottom = itemTop + item.clientHeight;
            
            if (itemTop < containerTop) {
                container.scrollTop = itemTop;
            } else if (itemBottom > containerBottom) {
                container.scrollTop = itemBottom - container.clientHeight;
            }
        }
    }

    // ---- Select a product ----
    function _selectProduct(product) {
        _selectedVarId = null;
        _allVariations = product.variations || [];

        // Update search box to show product name
        $('#fp_search').val(product.name);
        $('#fp_search_clear').show();
        $('#fp_dropdown').hide();

        // Show selected card
        var imgHtml = product.image ? _img(product.image) : _noImg();
        $('#fp_sel_img_wrap').html(imgHtml);
        $('#fp_sel_name').text(product.name);

        var skuText = '';
        if (_allVariations.length === 1 && _allVariations[0].sku) {
            skuText = 'SKU: ' + _allVariations[0].sku;
        }
        $('#fp_sel_sku').text(skuText);
        $('#fp_selected_display').show();

        // Handle variations
        if (_allVariations.length > 1) {
            var opts = '<option value="">-- Select variation --</option>';
            $.each(_allVariations, function(i, v) {
                opts += '<option value="' + v.id + '">' + v.name + (v.sku ? ' (' + v.sku + ')' : '') + '</option>';
            });
            $('#fp_variation_select').html(opts);
            $('#fp_variation_group').show();
        } else if (_allVariations.length === 1) {
            _selectedVarId = _allVariations[0].id;
            $('#fp_variation_group').hide();
        } else {
            $('#fp_variation_group').hide();
        }
    }

    // ---- Search input events ----
    $(document).on('input', '#fp_search', function() {
        var q = $(this).val();
        if (q.length > 0) {
            $('#fp_search_clear').show();
            _renderDropdown(q);
        } else {
            $('#fp_search_clear').hide();
            _renderDropdown('');
            // Clear selection if user erased
            $('#fp_selected_display').hide();
            $('#fp_variation_group').hide();
            _selectedVarId = null;
            _allVariations = [];
        }
    });

    $(document).on('focus', '#fp_search', function() {
        if (_allProducts.length > 0) {
            _renderDropdown($(this).val());
        }
    });

    // Keyboard arrow keys & enter on search field
    $(document).on('keydown', '#fp_search', function(e) {
        var key = e.which || e.keyCode;
        var $dropdown = $('#fp_dropdown');

        if (key === 13) { // Enter
            e.preventDefault();
            if ($dropdown.is(':visible')) {
                var $items = $dropdown.find('.fp-dropdown-item');
                if ($items.length && _highlightedIndex >= 0 && _highlightedIndex < $items.length) {
                    var idx = $items.eq(_highlightedIndex).data('product-index');
                    var matches = $dropdown.data('matched') || _allProducts;
                    var product = matches[idx];
                    if (product) {
                        _selectProduct(product);
                        // If only 1 variation, immediately add to cart
                        if (!product.variations || product.variations.length <= 1) {
                            $('#fp_confirm_btn').trigger('click');
                        } else {
                            // Focus variation selector
                            setTimeout(function() {
                                $('#fp_variation_select').focus();
                            }, 100);
                        }
                    }
                }
            } else {
                // Dropdown is closed. If a product is selected, confirm addition to cart
                if ($('#fp_selected_display').is(':visible')) {
                    $('#fp_confirm_btn').trigger('click');
                }
            }
            return;
        }

        // Rest of navigation keys only if dropdown is visible
        if (!$dropdown.is(':visible')) return;
        var $items = $dropdown.find('.fp-dropdown-item');
        if (!$items.length) return;

        if (key === 40) { // Down Arrow
            e.preventDefault();
            var nextIdx = _highlightedIndex + 1;
            if (nextIdx >= $items.length) {
                nextIdx = 0; // wrap to first
            }
            _highlightItem(nextIdx);
        } else if (key === 38) { // Up Arrow
            e.preventDefault();
            var prevIdx = _highlightedIndex - 1;
            if (prevIdx < 0) {
                prevIdx = $items.length - 1; // wrap to last
            }
            _highlightItem(prevIdx);
        } else if (key === 27) { // Escape
            e.preventDefault();
            $dropdown.hide();
        }
    });

    // Also support pressing Enter key on the variation select to add to cart
    $(document).on('keydown', '#fp_variation_select', function(e) {
        var key = e.which || e.keyCode;
        if (key === 13) { // Enter
            e.preventDefault();
            $('#fp_confirm_btn').trigger('click');
        }
    });

    // Clear button
    $(document).on('click', '#fp_search_clear', function() {
        $('#fp_search').val('').focus();
        $(this).hide();
        $('#fp_dropdown').hide();
        $('#fp_selected_display').hide();
        $('#fp_variation_group').hide();
        _selectedVarId = null;
        _allVariations = [];
    });

    // Hover dropdown item updates highlight
    $(document).on('mouseenter', '.fp-dropdown-item', function() {
        var domIdx = $('#fp_dropdown .fp-dropdown-item').index(this);
        _highlightItem(domIdx);
    });

    // Click dropdown item
    $(document).on('click', '.fp-dropdown-item', function(e) {
        e.stopPropagation();
        var idx = $(this).data('product-index');
        var matches = $('#fp_dropdown').data('matched') || _allProducts;
        var product = matches[idx];
        if (product) {
            _selectProduct(product);
        }
    });

    // Close dropdown when clicking outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#fp_search, #fp_dropdown').length) {
            $('#fp_dropdown').hide();
        }
    });

    // ---- Variation select ----
    $(document).on('change', '#fp_variation_select', function() {
        _selectedVarId = $(this).val();
    });

    // Click on free gift badge in POS table to change the product
    $(document).on('click', '.free-gift-badge', function(e) {
        e.stopPropagation();
        var $row = $(this).closest('tr.product_row');
        var promotionId = $row.attr('data-free-promotion-id');
        if (promotionId) {
            window.showFreeProductModal(promotionId);
            _editingRow = $row; // Set this after opening modal
        }
    });

    // ---- Confirm button ----
    $(document).on('click', '#fp_confirm_btn', function() {
        if (!$('#fp_selected_display').is(':visible')) {
            toastr.warning('Please search and select a free product first.');
            return;
        }

        if (_allVariations.length > 1 && !_selectedVarId) {
            toastr.warning('Please select a variation for the free product.');
            return;
        }

        if (!_selectedVarId) {
            toastr.warning('No variation available for this product.');
            return;
        }

        $('#free_product_modal').modal('hide');
        _addFreeProductToCart(_selectedVarId, _freeQty, _promotionId);
    });

    /**
     * Add free product to POS cart using the standard pos_product_row function,
     * then override price to 0 once the row appears.
     */
    function _addFreeProductToCart(variationId, qty, promotionId) {
        var rowsBefore = $('#pos_table tbody tr.product_row').length;

        // If we are changing an existing free gift row, remove it first
        if (_editingRow && _editingRow.length) {
            var $removeBtn = _editingRow.find('.pos_remove_row');
            if ($removeBtn.length) {
                $removeBtn.trigger('click');
            } else {
                _editingRow.remove();
            }
            _editingRow = null;
            rowsBefore = $('#pos_table tbody tr.product_row').length;
        }

        // Use the standard POS function to add the product row
        if (typeof pos_product_row === 'function') {
            pos_product_row(variationId, null, null, qty, null);

            // Watch for the new row to appear, then zero the price
            var attempts = 0;
            var maxAttempts = 30;
            var interval = setInterval(function() {
                attempts++;
                var $rows = $('#pos_table tbody tr.product_row');

                if ($rows.length > rowsBefore) {
                    clearInterval(interval);
                    // The newest row is the last one added
                    // Find the row matching our variation
                    var $newRow = null;
                    $rows.each(function() {
                        var $row = $(this);
                        var rowVarId = $row.find('input[name$="[variation_id]"]').val();
                        if (rowVarId == variationId) {
                            // Prefer rows without price zeroed yet
                            $newRow = $row;
                        }
                    });
                    // Use the last matching row
                    if (!$newRow) {
                        $newRow = $rows.last();
                    }

                    _zeroFreeProductRow($newRow, qty, promotionId);
                } else if (attempts >= maxAttempts) {
                    clearInterval(interval);
                    toastr.error('Free product could not be added. Please add manually and set price to 0.');
                }
            }, 100);
        } else {
            // Fallback: direct AJAX to get the product row HTML
            _addFreeProductRowAjax(variationId, qty, promotionId);
        }
    }

    /**
     * Zero the price, set qty, and mark the row as a free product.
     */
    function _zeroFreeProductRow($row, qty, promotionId) {
        if (!$row || !$row.length) return;

        // Set quantity
        var $qtyInput = $row.find('input.pos_quantity, input.input_quantity').first();
        if ($qtyInput.length) {
            if (typeof __write_number === 'function') {
                __write_number($qtyInput, qty);
            } else {
                $qtyInput.val(qty);
            }
        }

        // Set unit price to 0
        var $priceInput = $row.find('input.pos_unit_price, input[name$="[unit_price]"]').first();
        if ($priceInput.length) {
            if (typeof __write_number === 'function') {
                __write_number($priceInput, 0);
            } else {
                $priceInput.val('0.00');
            }
        }

        // Set discount to 0% (price is already 0, no need for discount)
        var $discountAmt  = $row.find('input.row_discount_amount, input[name$="[line_discount_amount]"]').first();
        var $discountType = $row.find('select.row_discount_type, select[name$="[line_discount_type]"]').first();
        if ($discountAmt.length) $discountAmt.val('0');
        if ($discountType.length) $discountType.val('percentage');

        // Add free gift badge next to product name
        var $nameCell = $row.find('td:first-child');
        if ($nameCell.find('.free-gift-badge').length === 0) {
            $nameCell.find('strong, .product-name-clickable').first().after(
                ' <span class="free-gift-badge label label-success" style="font-size:10px;vertical-align:middle;cursor:pointer;" title="Click to change free gift product">&#127873; FREE GIFT</span>'
            );
        }

        // Mark row for identification
        $row.attr('data-free-product', '1').attr('data-free-promotion-id', promotionId);

        // Add hidden field so backend knows this is a free promotion item
        if ($row.find('input[name$="[is_free_promo_item]"]').length === 0) {
            var rowName = $row.find('input[name$="[product_id]"]').attr('name');
            if (rowName) {
                var prefix = rowName.replace('[product_id]', '');
                $row.append('<input type="hidden" name="' + prefix + '[is_free_promo_item]" value="1">');
                $row.append('<input type="hidden" name="' + prefix + '[free_promo_source_id]" value="' + promotionId + '">');
            }
        }

        // Trigger recalculation
        $qtyInput.trigger('change');
        if ($priceInput.length) $priceInput.trigger('change');
        if (typeof calculate_total === 'function') calculate_total();

        toastr.success('Free gift product added to cart!');
    }

    /**
     * Fallback: AJAX add product row then zero it.
     */
    function _addFreeProductRowAjax(variationId, qty, promotionId) {
        var locationId = $('input#location_id').val() || '';

        $.ajax({
            url: '/sells/pos/get_product_row/' + variationId + '/' + locationId,
            type: 'GET',
            dataType: 'html',
            success: function(html) {
                var $html = $(html);
                var $tbody = $('#pos_table tbody');

                // Update row count
                var $rowCount = $('input#product_row_count');
                var currentCount = parseInt($rowCount.val()) || 0;

                // Replace row_count placeholder if needed
                var newCount = currentCount;
                $rowCount.val(newCount + 1);

                $tbody.append($html);

                var $newRow = $tbody.find('tr.product_row').last();
                setTimeout(function() {
                    _zeroFreeProductRow($newRow, qty, promotionId);
                }, 200);
            },
            error: function() {
                toastr.error('Could not load free product. Please add manually and set price to 0.');
            }
        });
    }

    // ===============================================================
    // MutationObserver: watch POS table for new rows that carry
    // the is_free_product_promotion hidden field (set by product_row.blade.php)
    // and auto-trigger the modal
    // ===============================================================
    var _modalTriggeredForRows = {};

    function _checkRowForFreePromo($row) {
        var rowIndex = $row.attr('data-row_index');
        if (_modalTriggeredForRows[rowIndex]) return; // already triggered

        var isFreePromo = $row.find('input[name$="[is_free_product_promotion]"]').val();
        if (isFreePromo == '1') {
            var promotionId = $row.find('input[name$="[free_promotion_id]"]').val();
            var minQty      = parseFloat($row.find('input[name$="[free_promotion_min_qty]"]').val()) || 1;

            if (!promotionId) return;

            _modalTriggeredForRows[rowIndex] = true;

            // Check quantity
            setTimeout(function() {
                var $qtyInput = $row.find('input.pos_quantity, input.input_quantity').first();
                var currentQty = $qtyInput.length ? (parseFloat($qtyInput.val()) || 1) : 1;

                if (currentQty >= minQty) {
                    window.showFreeProductModal(promotionId);
                } else {
                    // Watch for quantity to reach minimum
                    $qtyInput.on('change.freepromo', function() {
                        var newQty = parseFloat($(this).val()) || 0;
                        if (newQty >= minQty) {
                            $(this).off('change.freepromo');
                            window.showFreeProductModal(promotionId);
                        }
                    });
                }
            }, 400);
        }
    }

    // Start observing POS table
    function _startObserver() {
        var $tbody = $('#pos_table tbody');
        if (!$tbody.length) return;

        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(m) {
                Array.from(m.addedNodes || []).forEach(function(node) {
                    if (node.nodeType !== 1) return;
                    var $node = $(node);
                    if ($node.hasClass('product_row')) {
                        _checkRowForFreePromo($node);
                    } else {
                        $node.find('tr.product_row').each(function() {
                            _checkRowForFreePromo($(this));
                        });
                    }
                });
            });
        });

        observer.observe($tbody[0], { childList: true, subtree: false });
    }

    $(document).ready(function() {
        if ($('#pos_table tbody').length) {
            _startObserver();
        } else {
            // Wait for POS table to appear
            var bodyObserver = new MutationObserver(function(mutations) {
                if ($('#pos_table tbody').length) {
                    bodyObserver.disconnect();
                    _startObserver();
                }
            });
            bodyObserver.observe(document.body, { childList: true, subtree: true });
        }

        // Reset editing state when modal is dismissed
        $('#free_product_modal').on('hidden.bs.modal', function () {
            _editingRow = null;
        });
    });

})(jQuery);
</script>