@section('script')
@append

@once
    @push('script')
        <script>
            $(document).ready(function() {
                const modal = $('#popup_stock_tracking');
                const tableContainer = $('#stock-tracking-table-container');

                $('#stock-tracking-btn').on('click', function() {
                    loadPopup('popup_stock_tracking');
                });

                modal.on('show.bs.modal', function() {
                    loadStockData();
                });

                function loadStockData() {
                    tableContainer.html('<div class="text-center my-5"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div>');

                    $.ajax({
                        url: AJAX_URL + 'combination-stock-status',
                        method: 'GET',
                        success: function(response) {
                            if (response && response.success) {
                                renderStockTable(response.data);
                            } else {
                                handleError(response.message || 'Failed to load stock data');
                            }
                        },
                        error: function(error) {
                            handleError('Error loading stock data');
                            console.error('Error fetching stock data:', error);
                        }
                    });
                }

                /**
                 * render simplified stock data as a table showing only sizes
                 *
                 * @param {Object} data - Aggregated stock data
                 */
                function renderStockTable(data) {
                    if (!data || !data.combinations || data.combinations.length === 0) {
                        tableContainer.html('<div class="alert alert-info">No stock data available</div>');
                        return;
                    }

                    const { sizes, combinations, thresholds } = data;
                    const sizeMap = {};
                    combinations.forEach(combo => {
                        sizeMap[combo.size] = combo.used_stock;
                    });

                    let html = `
                <div class="stock-legend mb-4">
                    <div class="d-flex justify-content-center align-items-center flex-wrap">
                        <div class="d-flex align-items-center mx-3">
                            <div class="stock-indicator available mr-2"></div>
                            <span>{{ __('label.stock_tracking_available') }}</span>
                        </div>
                        <div class="d-flex align-items-center mx-3">
                            <div class="stock-indicator running-low mr-2"></div>
                            <span>{{ __('label.stock_tracking_running_low') }}</span>
                        </div>
                        <div class="d-flex align-items-center mx-3">
                            <div class="stock-indicator no-stock mr-2"></div>
                            <span>{{ __('label.stock_tracking_low_stock') }}</span>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="stock_tracking_table_header">
                        <thead class="thead-light" style="text-align:center;">
                            <tr>
                                <th>Size</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

                    sizes.forEach(size => {
                        const usedStock = sizeMap[size] || 0;
                        const lowStockThreshold = thresholds.lowStock[size];
                        const availableThreshold = thresholds.available[size];

                        // determine status based on used stock -> lower used stock means more available inventory
                        // in documentation/AMs understanding, used stock = sold_count which is (total_stock-remaining_stock)
                        let indicatorClass = '';

                        // note: availableThreshold = STOCK_AVAILABLE, lowStockThreshold = STOCK_LOW in sys config
                        if (usedStock >= availableThreshold) {
                            // sold count ≥ STOCK_AVAILABLE -> no stock
                            indicatorClass = 'no-stock';
                        }
                        else if (usedStock >= lowStockThreshold) {
                            // sold count ≥ STOCK_LOW (but < STOCK_AVAILABLE) -> running low
                            indicatorClass = 'running-low';
                        }
                        else {
                            // sold count < STOCK_LOW -> available
                            indicatorClass = 'available';
                        }

                        html += `
                    <tr>
                        <td class="text-center"><strong style="font-size: 1.25rem;">${size}</strong></td>
                        <td class="text-center">
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="stock-indicator ${indicatorClass} mr-2"></div>
                            </div>
                        </td>
                    </tr>
                `;
                    });

                    html += `</tbody></table></div>`;

                    tableContainer.html(html);
                }

                function handleError(message) {
                    tableContainer.html(`<div class="alert alert-danger">${message}</div>`);
                }
            });
        </script>

        <style>
            .stock-indicator {
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
            .stock-indicator.available {
                background-color: #3c9d84;
            }
            .stock-indicator.running-low {
                background-color: yellow;
            }
            .stock-indicator.no-stock {
                background-color: red;
            }
        </style>
    @endpush
@endonce

@component(getPopupLayout(), ['id' => 'popup_stock_tracking', 'class' => 'modal-md'])
    <h5>{!! __('heading.stock_status_track_title') !!}</h5>

    <div id="stock-tracking-table-container">
        <div class="text-center my-5">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
@endcomponent