@* File: Plugins/YourCompany.ProductAttributes/Views/ProductList.cshtml *@
@* This view component will inject into the product list page *@

<script>
    $(document).ready(function () {
        // Wait for the DataTable to be initialized
        console.log('custom product list JS triggered');
        var checkDataTable = setInterval(function() {
            if (typeof $('#products-grid').DataTable !== 'undefined') {
                clearInterval(checkDataTable);
                customizeProductGrid();
            }
        }, 500);
    });

    function customizeProductGrid() {
        var table = $('#products-grid').DataTable();

        // Add custom columns after initialization
        if (table.column('ismeasurable:name').length === 0) {
            table.column.add([
                {
                    data: 'CustomProperties.IsMeasurable',
                    title: 'Measurable',
                    width: '80px',
                    render: function (data, type, row) {
                        return data ? '<i class="fas fa-check true-icon"></i>' : '<i class="fas fa-times false-icon"></i>';
                    }
                },
                {
                    data: 'CustomProperties.NetWeight',
                    title: 'Net Weight (kg)',
                    width: '100px'
                },
                {
                    data: 'CustomProperties.IncomingQuantity',
                    title: 'Incoming Qty',
                    width: '100px'
                }
            ]);
        }
    }
</script>

<style>
    .true-icon {
        color: green;
    }

    .false-icon {
        color: red;
    }
</style>