@extends('layouts.app')
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    <div class="left-card">

                        <div class="card border-top border-0 border-4 border-primary">
                            <div class="card-header">
                                Print Label
                            </div>
                            <div class="card-body">

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="product_search"
                                                placeholder="Type product name or code">
                                            <div id="product_suggestions" class="suggestions dropdown-menu"
                                                style="display: none;">
                                            </div>
                                            <input type="hidden" id="product_id">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <input type="number" class="form-control" id="sale_price"
                                                placeholder="Sale Price" step="any" name="sale_price">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <input type="number" class="form-control" step="any" id="qty"
                                                placeholder="Opening Quantity">
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <button id="add_row" class="btn btn-primary" style="width:100%;">Enter</button>
                                    </div>
                                </div>

                                <div class="row">
                                    <form id="barcode_print_form" action="{{ route('product.print_barcode') }}"
                                        method="GET" target="_blank">
                                        <div id="hidden_inputs"></div>
                                        <div class="col-md-12">
                                            <div class="table-fixed-head">
                                                <table class="table table-responsive" style="width: 100%;"
                                                    id="barcode_table">
                                                    <thead>
                                                        <tr>
                                                            <th rowspan="2" class="text-center">Sl</th>
                                                            <th rowspan="2" class="text-center">BarCode</th>
                                                            <th rowspan="2" class="text-center">Product</th>
                                                            <th rowspan="2" class="text-center">Sale price</th>
                                                            <th rowspan="2" class="text-center">Quanity</th>
                                                            <th rowspan="2" class="text-center">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="data"></tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-primary">Print</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            let selectedProductId = null;
            let selectedProductCode = null;
            let rowCount = 0;

            $("#product_search").focus();

            // Product search autocomplete
            $("#product_search").on("input", function() {
                let inputWidth = $(this).outerWidth();
                $('#product_suggestions').css('width', inputWidth);
                var branch_id = $("#branch_id").val();
                const query = $(this).val();
                if (query.length >= 2) {
                    $.ajax({
                        url: "{{ route('product.search') }}",
                        type: 'GET',
                        data: {
                            query: query,
                            branch_id: branch_id
                        },
                        success: function(data) {
                            let suggestions = '';
                            data.forEach(product => {
                                suggestions +=
                                    `<a href="#" class="dropdown-item" 
                                data-id="${product.id}"
                                data-product_code="${product.product_code || ''}"
                                data-name="${product.name}" 
                                data-sale_price="${product.sale_price || ''}"
                                data-purchase_price="${product.purchase_price || ''}">
                                ${product.name} - ${product.product_code || ''}
                            </a>`;
                            });
                            $("#product_suggestions").html(suggestions).show();
                        }
                    });
                } else {
                    $("#product_suggestions").hide();
                }
            });

            // Handle product selection from suggestions
            $("#product_suggestions").on("click", ".dropdown-item", function(e) {
                e.preventDefault();
                selectedProductId = $(this).data("id");
                selectedProductCode = $(this).data("product_code") ?? '';
                const productName = $(this).data("name") ?? '';
                const sale_price = $(this).data("sale_price") ?? '';

                $("#product_id").val(selectedProductId);
                $("#product_search").val(productName);
                $("#sale_price").val(sale_price);
                $("#qty").val('');
                $("#qty").focus();
                $("#product_suggestions").hide();
            });

            $("#add_row").click(function() {
                addRow();
            });

            function addRow() {
                const productId = $("#product_id").val();
                const productCode = selectedProductCode || '';
                const productName = $("#product_search").val();
                const salePrice = $("#sale_price").val();
                const quantityRaw = $("#qty").val();
                const quantity = parseFloat(quantityRaw);

                // Validation
                if (!productId) {
                    alert('Please select a product first.');
                    return;
                }

                const codeStr = String(productCode || '').trim();
                if (!codeStr) {
                    alert('This product has no code — it will not be added to the table.');
                    return;
                }

                if (isNaN(quantity) || quantity <= 0) {
                    alert('Please enter a valid quantity.');
                    return;
                }

                // Check if row with this productId already exists
                let existingRow = null;
                $("#data tr").each(function() {
                    const hiddenProductId = $(this).find('input[name$="[product_id]"]').val();
                    if (String(hiddenProductId) === String(productId)) {
                        existingRow = $(this);
                        return false; // break
                    }
                });

                if (existingRow) {
                    // Update quantity in the existing row
                    const qtyInput = existingRow.find('input[name$="[quantity]"]');
                    let currentQty = parseFloat(qtyInput.val()) || 0;
                    qtyInput.val(currentQty + quantity);
                } else {
                    // Add new row
                    rowCount++;
                    const rowIndex = rowCount;

                    $("#data").append(`
                <tr data-row="${rowIndex}">
                    <td class="text-center sl-number">${rowIndex}</td>
                    <td>
                        ${escapeHtml(productCode)}
                        <input type="hidden" name="products[${rowIndex}][product_id]" value="${productId}">
                        <input type="hidden" name="products[${rowIndex}][product_code]" value="${escapeHtml(productCode)}">
                    </td>
                    <td>${escapeHtml(productName)}</td>
                    <td>${escapeHtml(salePrice)}</td>
                    <td style="padding:0px;">
                        <input type="number" name="products[${rowIndex}][quantity]" value="${quantity}" min="1" class="form-control qty-input">
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm delete-row">Remove</button>
                    </td>
                </tr>
            `);
                }

                // Clear inputs for next entry
                $("#product_id").val('');
                $("#product_search").val('');
                $("#sale_price").val('');
                $("#qty").val('');
                selectedProductCode = '';
                $("#product_search").focus();
            }

            // Delete row and renumber
            $('#barcode_table').on('click', '.delete-row', function() {
                $(this).closest('tr').remove();
                renumberRows();
            });

            function renumberRows() {
                let i = 0;
                $("#data tr").each(function() {
                    i++;
                    $(this).attr('data-row', i);
                    $(this).find('.sl-number').text(i);
                    // rename inputs to keep indexes contiguous
                    $(this).find('input, select, textarea').each(function() {
                        const name = $(this).attr('name');
                        if (!name) return;
                        const newName = name.replace(/products\[\d+\]/, `products[${i}]`);
                        $(this).attr('name', newName);
                    });
                });
                rowCount = i;
            }

            // Enter key press on qty input triggers add row
            $("#qty").on("keypress", function(e) {
                if (e.which === 13) { // Enter key
                    e.preventDefault();
                    addRow();
                }
            });

            // Form submit: build hidden inputs (if needed) from current table rows
            $('#barcode_print_form').on('submit', function(e) {
                // Remove any previous hidden inputs
                $('#hidden_inputs').empty();

                // Iterate rows and collect product_id and quantity
                $("#data tr").each(function() {
                    const pid = $(this).find('input[name$="[product_id]"]').val();
                    const qty = $(this).find('input[name$="[quantity]"]').val();
                    if (pid && qty && parseFloat(qty) > 0) {
                        // You can pick any format the server expects. Example: products[][product_id]=id & products[][quantity]=qty
                        // Here I append as products[index][product_id] etc which already exist in the table,
                        // but in case your form processing expects a flat array, you can append a hidden combined value:
                        $('#hidden_inputs').append(
                            `<input type="hidden" name="print_items[]" value="${pid}:${qty}">`);
                    }
                });

                // If no rows, prevent submit
                if ($("#data tr").length === 0) {
                    alert('টেবিলে কোনো আইটেম নেই। আগে আইটেম যোগ করুন।');
                    e.preventDefault();
                    return false;
                }

                // allow submit to proceed
            });

            // helper: escape html for safety
            function escapeHtml(text) {
                if (text === null || text === undefined) return '';
                return String(text)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }
        });
    </script>
@endpush