@section('warehouse_scripts')
    <script>
        let charts = {};
        let chartInitQueue = [];
        let isProcessingQueue = false;
        let isInitialized = false;

        const chartStates = {
            outPatient: false,
            b2bCredit: false,
            b2bCash: false,
            salesForecast: false,
            salesPerHour: false,
            b2bTarget: false,
            salesVsCost: false,
            bestTests: false,
            bestPackages: false,
            yoyGrowth: false
        };

        function safeQuerySelector(selector) {
            const element = document.querySelector(selector);
            if (!element) {
                console.warn(`Element not found: ${selector}`);
                return null;
            }
            return element;
        }

        function handleChartError(chartId, error) {
            console.error(`Error in chart ${chartId}:`, error);
            hideLoader(chartId);
            const chartContainer = safeQuerySelector(`#${chartId}`);
            if (chartContainer) {
                chartContainer.innerHTML = '<div class="chart-error">Unable to load chart data</div>';
            }
        }

        function showLoader(chartId) {
            const container = $(`#${chartId}`).closest('.chart-container');
            if (container.length) {
                container.find('.chart-loader').css('display', 'flex');
            }
        }

        function hideLoader(chartId) {
            const container = $(`#${chartId}`).closest('.chart-container');
            if (container.length) {
                container.find('.chart-loader').css('display', 'none');
            }
        }

        function resetChartState(chartId) {
            try {
                if (charts[chartId]) {
                    charts[chartId].destroy();
                    charts[chartId] = null;
                }
                chartStates[chartId] = false;
            } catch (error) {
                console.error(`Error resetting chart ${chartId}:`, error);
            }
        }

        async function processChartQueue() {
            if (isProcessingQueue || chartInitQueue.length === 0) return;

            isProcessingQueue = true;
            const chartInit = chartInitQueue.shift();

            try {
                await chartInit();
            } catch (error) {
                console.error('Error processing chart queue:', error);
            } finally {
                isProcessingQueue = false;
                processChartQueue();
            }
        }

        function queueChartInit(chartId, initFunction) {
            if (!chartId || typeof initFunction !== 'function') {
                console.error('Invalid chart initialization parameters');
                return;
            }

            resetChartState(chartId);

            chartInitQueue.push(async () => {
                try {
                    await initFunction();
                    chartStates[chartId] = true;
                } catch (error) {
                    handleChartError(chartId, error);
                }
            });

            processChartQueue();
        }

        function setupChartObservers() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const chartId = entry.target.id;
                        initializeVisibleChart(chartId);
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '50px'
            });

            document.querySelectorAll('.chart-container, [id$="Chart"]').forEach(chart => {
                observer.observe(chart);
            });
        }

        function initializeVisibleChart(chartId) {
            if (!chartId) {
                console.error('Invalid chart ID provided');
                return;
            }

            try {
                switch(chartId) {
                    case 'outPatientChart':
                        queueChartInit('outPatient', () => initializeOutPatientSales());
                        break;
                    case 'b2bCreditChart':
                        queueChartInit('b2bCredit', () => initializeB2BCreditSales());
                        break;
                    case 'b2bCashChart':
                        queueChartInit('b2bCash', () => initializeB2BCashSales());
                        break;
                    case 'salesForecastChart':
                        queueChartInit('salesForecast', () => initializeSalesForecast());
                        break;
                    case 'salesPerHourChart':
                        queueChartInit('salesPerHour', () => initializeSalesPerHour());
                        break;
                    case 'salesVsTargetChart':
                        queueChartInit('b2bTarget', () => initializeB2BTargetSales());
                        break;
                    case 'salesVsCostChart':
                        queueChartInit('salesVsCost', () => initializeSalesVsCost());
                        break;
                    case 'bestTestSalesChart':
                        queueChartInit('bestTests', () => initializeBestTests());
                        break;
                    case 'bestPackageSalesChart':
                        queueChartInit('bestPackages', () => initializeBestPackages());
                        break;
                    case 'yoyGrowthChart':
                        queueChartInit('yoyGrowth', () => initializeYearOverYearGrowth());
                        break;
                    default:
                        console.warn(`Unknown chart ID: ${chartId}`);
                }
            } catch (error) {
                console.error(`Error initializing chart ${chartId}:`, error);
                handleChartError(chartId, error);
            }
        }

        function initializeOutPatientSales(dateFrom = null, dateTo = null, branchId = null) {
            const chartId = 'outPatientChart';
            showLoader(chartId);

            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '/operations/sales-dashboard/outpatient',
                    type: 'GET',
                    data: {
                        date_from: dateFrom,
                        date_to: dateTo,
                        branch_id: branchId
                    },
                    success: function(response) {
                        try {
                            if (!response || !response.current_month) {
                                throw new Error('Invalid response data');
                            }

                            const polarData = {
                                patient: {
                                    qty: response.current_month.patient_count || 0,
                                    sales: 0,
                                    tax: 0,
                                    total: 0
                                },
                                test: response.current_month.test || { qty: 0, sales: 0, tax: 0, total: 0 },
                                package: response.current_month.package || { qty: 0, sales: 0, tax: 0, total: 0 },
                                service: response.current_month.service || { qty: 0, sales: 0, tax: 0, total: 0 }
                            };

                            createPolarAreaChart(chartId, {
                                test: polarData.test.qty,
                                package: polarData.package.qty,
                                service: polarData.service.qty
                            }, 'var(--blazma-primary)');

                            $('#outPatientQuantity').empty();
                            createQuantityList('outPatientQuantity', polarData, 'var(--blazma-primary)');

                            const totalAmount = (polarData.test.total || 0) +
                                             (polarData.package.total || 0) +
                                             (polarData.service.total || 0);
                            $('#outPatientTotal').html(`Total Amount: <strong>${formatCurrency(totalAmount)}</strong>`);

                            const barData = {
                                test: Array(12).fill(0),
                                package: Array(12).fill(0),
                                service: Array(12).fill(0)
                            };

                            if (response.monthly_sales && Array.isArray(response.monthly_sales)) {
                                response.monthly_sales.forEach(month => {
                                    if (month && month.month) {
                                        const monthIndex = parseInt(month.month.split('-')[1]) - 1;
                                        if (monthIndex >= 0 && monthIndex < 12) {
                                            barData.test[monthIndex] = month.test?.total || 0;
                                            barData.package[monthIndex] = month.package?.total || 0;
                                            barData.service[monthIndex] = month.service?.total || 0;
                                        }
                                    }
                                });
                            }

                            createBarChart('outPatientBarChart', 'var(--blazma-primary)', barData);
                            resolve();
                        } catch (error) {
                            console.error('Error processing outpatient sales data:', error);
                            handleChartError(chartId, error);
                            reject(error);
                        } finally {
                            hideLoader(chartId);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error('AJAX error:', textStatus, errorThrown);
                        handleChartError(chartId, new Error(textStatus));
                        hideLoader(chartId);
                        reject(errorThrown);
                    }
                });
            });
        }

        function initializeB2BCreditSales(dateFrom = null, dateTo = null, clientId = null) {
            showLoader('b2bCreditChart');
            $.ajax({
                url: '/operations/sales-dashboard/b2b-credit',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    client_id: clientId
                },
                success: function(response) {
                    const polarData = {
                        patient: {
                            qty: response.current_month.patient_count,
                            sales: 0,
                            tax: 0,
                            total: 0
                        },
                        test: response.current_month.test,
                        package: response.current_month.package,
                        service: response.current_month.service
                    };

                    const chartData = {
                        test: response.current_month.test.qty,
                        package: response.current_month.package.qty,
                        service: response.current_month.service.qty
                    };

                    createPolarAreaChart('b2bCreditChart', chartData, '#FFD15D');
                    $('#b2bCreditQuantity').empty();
                    createQuantityList('b2bCreditQuantity', polarData, '#FFD15D');

                    const totalAmount = response.current_month.test.total +
                                     response.current_month.package.total +
                                     response.current_month.service.total;
                    $('#b2bCreditTotal').html(`Total Amount: <strong>${formatCurrency(totalAmount)}</strong>`);

                    const barData = {
                        test: Array(12).fill(0),
                        package: Array(12).fill(0),
                        service: Array(12).fill(0)
                    };

                    response.monthly_sales.forEach(month => {
                        const monthIndex = parseInt(month.month.split('-')[1]) - 1;
                        barData.test[monthIndex] = month.test.total || 0;
                        barData.package[monthIndex] = month.package.total || 0;
                        barData.service[monthIndex] = month.service.total || 0;
                    });

                    createBarChart('b2bCreditBarChart', '#FFD15D', barData);
                    hideLoader('b2bCreditChart');
                },
                error: function() {
                    hideLoader('b2bCreditChart');
                }
            });
        }

        function initializeB2BCashSales(dateFrom = null, dateTo = null, clientId = null) {
            showLoader('b2bCashChart');
            $.ajax({
                url: '/operations/sales-dashboard/b2b-cash',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    client_id: clientId
                },
                success: function(response) {
                    const polarData = {
                        patient: {
                            qty: response.current_month.patient_count,
                            sales: 0,
                            tax: 0,
                            total: 0
                        },
                        test: response.current_month.test,
                        package: response.current_month.package,
                        service: response.current_month.service
                    };

                    const chartData = {
                        test: response.current_month.test.qty,
                        package: response.current_month.package.qty,
                        service: response.current_month.service.qty
                    };

                    createPolarAreaChart('b2bCashChart', chartData, '#8EB8FF');
                    $('#b2bCashQuantity').empty();
                    createQuantityList('b2bCashQuantity', polarData, '#8EB8FF');

                    const totalAmount = response.current_month.test.total +
                                     response.current_month.package.total +
                                     response.current_month.service.total;
                    $('#b2bCashTotal').html(`Total Amount: <strong>${formatCurrency(totalAmount)}</strong>`);

                    const barData = {
                        test: Array(12).fill(0),
                        package: Array(12).fill(0),
                        service: Array(12).fill(0)
                    };

                    response.monthly_sales.forEach(month => {
                        const monthIndex = parseInt(month.month.split('-')[1]) - 1;
                        barData.test[monthIndex] = month.test.total || 0;
                        barData.package[monthIndex] = month.package.total || 0;
                        barData.service[monthIndex] = month.service.total || 0;
                    });

                    createBarChart('b2bCashBarChart', '#8EB8FF', barData);
                    hideLoader('b2bCashChart');
                },
                error: function() {
                    hideLoader('b2bCashChart');
                }
            });
        }

        function initializeSalesForecast(dateFrom = null, dateTo = null, branchId = null) {
            showLoader('salesForecastChart');

            if (!$('#salesForecastProgress').length) {
                $('<div id="salesForecastProgress" class="forecast-progress mt-3">' +
                    '<div class="progress-status"></div>' +
                    '<div class="progress" style="height: 4px;">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
                    '</div>' +
                    '<div class="month-grid mt-2"></div>' +
                '</div>').insertAfter('#salesForecastChart');
            }

            $.ajax({
                url: '/operations/sales-dashboard/sales-forecast',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    branch_id: branchId
                },
                success: function(response) {
                    if (!response.monthly_sales || !response.monthly_sales.length) {
                        hideLoader('salesForecastChart');
                        $('#salesForecastProgress').remove();
                        return;
                    }

                    const emptyData = {
                        outPatient: Array(12).fill(0),
                        outPatientForecast: Array(12).fill(0),
                        b2bCredit: Array(12).fill(0),
                        b2bCreditForecast: Array(12).fill(0),
                        b2bCash: Array(12).fill(0),
                        b2bCashForecast: Array(12).fill(0)
                    };

                    createSalesForecastChart([
                        {
                            name: 'Out Patient Sales',
                            data: emptyData.outPatient
                        },
                        {
                            name: 'Out Patient Forecast',
                            data: emptyData.outPatientForecast
                        },
                        {
                            name: 'B2B Credit Sales',
                            data: emptyData.b2bCredit
                        },
                        {
                            name: 'B2B Credit Forecast',
                            data: emptyData.b2bCreditForecast
                        },
                        {
                            name: 'B2B Cash Sales',
                            data: emptyData.b2bCash
                        },
                        {
                            name: 'B2B Cash Forecast',
                            data: emptyData.b2bCashForecast
                        }
                    ]);

                    const monthGrid = $('#salesForecastProgress .month-grid');
                    monthGrid.empty();
                    response.monthly_sales.forEach((month, index) => {
                        const monthName = moment(month.month).format('MMM YYYY');
                        monthGrid.append(`
                            <div class="month-item" data-month="${month.month}">
                                <div class="month-dot"></div>
                                <div class="month-name">${monthName}</div>
                                <div class="month-status">Pending</div>
                            </div>
                        `);
                    });

                    loadMonthlyDataSequentially(response.monthly_sales);
                    hideLoader('salesForecastChart');
                },
                error: function() {
                    hideLoader('salesForecastChart');
                    $('#salesForecastProgress').remove();
                }
            });
        }

        function loadMonthlyDataSequentially(months) {
            const chartData = {
                outPatient: Array(12).fill(0),
                outPatientForecast: Array(12).fill(0),
                b2bCredit: Array(12).fill(0),
                b2bCreditForecast: Array(12).fill(0),
                b2bCash: Array(12).fill(0),
                b2bCashForecast: Array(12).fill(0)
            };

            let currentMonthIndex = 0;
            const totalMonths = months.length;
            let outPatientTotal = 0;
            let outPatientForecast = 0;
            let b2bCreditTotal = 0;
            let b2bCreditForecast = 0;
            let b2bCashTotal = 0;
            let b2bCashForecast = 0;

            function updateProgress(index) {
                const progress = ((index + 1) / totalMonths) * 100;
                $('#salesForecastProgress .progress-bar').css('width', `${progress}%`);
                $('#salesForecastProgress .progress-status').text(
                    `Loading data: ${index + 1} of ${totalMonths} months`
                );
            }

            function updateMonthStatus(monthKey, status) {
                const monthItem = $(`.month-item[data-month="${monthKey}"]`);
                monthItem.attr('data-status', status);
                monthItem.find('.month-status').text(status.charAt(0).toUpperCase() + status.slice(1));
            }

            function loadNextMonth() {
                if (currentMonthIndex >= months.length) {
                    $('#salesForecastProgress .progress-status').text('Creating visualizations...');

                    setTimeout(() => {
                        createForecastDonutChart('outPatientForecastChart', 'var(--blazma-primary)', '#FFE0E8', outPatientTotal, outPatientForecast);
                        createForecastDonutChart('b2bCreditForecastChart', '#FFD15D', '#FFF3D3', b2bCreditTotal, b2bCreditForecast);
                        createForecastDonutChart('b2bCashForecastChart', '#8EB8FF', '#EEF4FF', b2bCashTotal, b2bCashForecast);

                        $('#salesForecastProgress .progress-status').text('Data loading complete');
                        setTimeout(() => {
                            $('#salesForecastProgress').fadeOut(500, function() {
                                $(this).remove();
                            });
                        }, 1000);
                    }, 100);
                    return;
                }

                const month = months[currentMonthIndex];
                const monthIndex = parseInt(month.month.split('-')[1]) - 1;

                updateMonthStatus(month.month, 'loading');
                updateProgress(currentMonthIndex);

                chartData.outPatient[monthIndex] = parseFloat(month.outpatient_sales || 0);
                chartData.outPatientForecast[monthIndex] = parseFloat(month.outpatient_forecast || 0);
                chartData.b2bCredit[monthIndex] = parseFloat(month.b2b_credit_sales || 0);
                chartData.b2bCreditForecast[monthIndex] = parseFloat(month.b2b_credit_forecast || 0);
                chartData.b2bCash[monthIndex] = parseFloat(month.b2b_cash_sales || 0);
                chartData.b2bCashForecast[monthIndex] = parseFloat(month.b2b_cash_forecast || 0);

                outPatientTotal += chartData.outPatient[monthIndex];
                outPatientForecast += chartData.outPatientForecast[monthIndex];
                b2bCreditTotal += chartData.b2bCredit[monthIndex];
                b2bCreditForecast += chartData.b2bCreditForecast[monthIndex];
                b2bCashTotal += chartData.b2bCash[monthIndex];
                b2bCashForecast += chartData.b2bCashForecast[monthIndex];

                charts['salesForecastChart'].updateSeries([
                    {
                        name: 'Out Patient Sales',
                        data: chartData.outPatient
                    },
                    {
                        name: 'Out Patient Forecast',
                        data: chartData.outPatientForecast
                    },
                    {
                        name: 'B2B Credit Sales',
                        data: chartData.b2bCredit
                    },
                    {
                        name: 'B2B Credit Forecast',
                        data: chartData.b2bCreditForecast
                    },
                    {
                        name: 'B2B Cash Sales',
                        data: chartData.b2bCash
                    },
                    {
                        name: 'B2B Cash Forecast',
                        data: chartData.b2bCashForecast
                    }
                ]);

                updateMonthStatus(month.month, 'complete');
                currentMonthIndex++;
                setTimeout(loadNextMonth, 300);
            }

            loadNextMonth();
        }

        function initializeSalesPerHour(dateFrom = null, dateTo = null, branchId = null, salesType = null) {
            showLoader('salesPerHourChart');
            $.ajax({
                url: '/operations/sales-dashboard/sales-per-hour',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    branch_id: branchId,
                    sales_type: salesType
                },
                success: function(response) {
                    createSalesPerHourChart(response);
                    hideLoader('salesPerHourChart');
                },
                error: function() {
                    hideLoader('salesPerHourChart');
                }
            });
        }

        function initializeB2BTargetSales(dateFrom = null, dateTo = null, branchId = null) {
            showLoader('salesVsTargetChart');

            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            const currentYear = new Date().getFullYear();
            const defaultCategories = monthNames.map(month => `${month} ${currentYear}`);
            const defaultData = new Array(12).fill(0);

            createComparisonChart('salesVsTargetChart', '#8EB8FF', {
                targetName: 'Target',
                targetData: defaultData,
                salesData: defaultData,
                categories: defaultCategories,
                showRotatedLabels: false
            });

            const accountManagerIds = $('#b2bTargetAccountManagers').val();
            $.ajax({
                url: '/operations/sales-dashboard/b2b-target-sales',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    branch_id: branchId,
                    account_manager_ids: accountManagerIds
                },
                success: function(response) {
                    createComparisonChart('salesVsTargetChart', '#8EB8FF', {
                        targetName: 'Target',
                        targetData: response.map(item => item.target_amount),
                        salesData: response.map(item => item.sales_amount),
                        categories: response.map(item => {
                            const [year, month] = item.month.split('-');
                            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return monthNames[parseInt(month) - 1] + ' ' + year;
                        }),
                        showRotatedLabels: false
                    });
                    hideLoader('salesVsTargetChart');
                },
                error: function() {
                    hideLoader('salesVsTargetChart');
                }
            });
        }

        function initializeSalesVsCost(startDate = null, endDate = null, branch = null) {
            showLoader('salesVsCostChart');

            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            const currentYear = new Date().getFullYear();
            const defaultCategories = monthNames.map(month => `${month} ${currentYear}`);
            const defaultData = new Array(12).fill(0);

            createComparisonChart('salesVsCostChart', '#FFB547', {
                salesData: defaultData,
                targetData: defaultData,
                categories: defaultCategories,
                targetName: 'Cost',
                showRotatedLabels: false,
                isCostChart: true
            });

            $.ajax({
                url: '/operations/sales-dashboard/sales-comparisons',
                method: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    branch_id: branch
                },
                success: function(response) {
                    const salesData = [];
                    const costData = [];
                    const categories = [];

                    response.sales_cost.forEach(item => {
                        categories.push(item.month);
                        salesData.push(parseFloat(item.sales_amount));
                        costData.push(parseFloat(item.cost_amount));
                    });

                    createComparisonChart('salesVsCostChart', '#FFB547', {
                        salesData: salesData,
                        targetData: costData,
                        categories: categories,
                        targetName: 'Cost',
                        showRotatedLabels: false,
                        isCostChart: true
                    });
                    hideLoader('salesVsCostChart');
                },
                error: function() {
                    hideLoader('salesVsCostChart');
                }
            });
        }

        function initializeBestTests(startDate = null, endDate = null, branch = null) {
            showLoader('bestTestSalesChart');

            createComparisonChart('bestTestSalesChart', 'var(--blazma-primary)', {
                targetName: 'Count',
                targetData: [0, 0, 0, 0, 0],
                salesData: [0, 0, 0, 0, 0],
                categories: ['Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...'],
                showRotatedLabels: true
            });

            $.ajax({
                url: '/operations/sales-dashboard/best-performing-tests',
                method: 'GET',
                data: {
                    date_from: startDate,
                    date_to: endDate,
                    branch_id: branch
                },
                success: function(response) {
                    if (!response || !Array.isArray(response) || response.length === 0) {
                        createComparisonChart('bestTestSalesChart', 'var(--blazma-primary)', {
                            targetName: 'Count',
                            targetData: [0],
                            salesData: [0],
                            categories: ['No Data'],
                            showRotatedLabels: true
                        });
                        hideLoader('bestTestSalesChart');
                        return;
                    }

                    createComparisonChart('bestTestSalesChart', 'var(--blazma-primary)', {
                        targetName: 'Count',
                        targetData: response.map(item => validateNumber(item.test_count)),
                        salesData: response.map(item => validateNumber(item.sales_amount)),
                        categories: response.map(item => item.test_name || 'Unknown'),
                        showRotatedLabels: true
                    });
                    hideLoader('bestTestSalesChart');
                },
                error: function() {
                    createComparisonChart('bestTestSalesChart', 'var(--blazma-primary)', {
                        targetName: 'Count',
                        targetData: [0],
                        salesData: [0],
                        categories: ['Error Loading Data'],
                        showRotatedLabels: true
                    });
                    hideLoader('bestTestSalesChart');
                }
            });
        }

        function initializeBestPackages(startDate = null, endDate = null, branch = null) {
            showLoader('bestPackageSalesChart');

            createComparisonChart('bestPackageSalesChart', '#9CDCF1', {
                targetName: 'Count',
                targetData: [0, 0, 0, 0, 0],
                salesData: [0, 0, 0, 0, 0],
                categories: ['Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...'],
                showRotatedLabels: true
            });

            $.ajax({
                url: '/operations/sales-dashboard/best-performing-packages',
                method: 'GET',
                data: {
                    date_from: startDate,
                    date_to: endDate,
                    branch_id: branch
                },
                success: function(response) {
                    if (!response || !Array.isArray(response) || response.length === 0) {
                        createComparisonChart('bestPackageSalesChart', '#9CDCF1', {
                            targetName: 'Count',
                            targetData: [0],
                            salesData: [0],
                            categories: ['No Data'],
                            showRotatedLabels: true
                        });
                        hideLoader('bestPackageSalesChart');
                        return;
                    }

                    createComparisonChart('bestPackageSalesChart', '#9CDCF1', {
                        targetName: 'Count',
                        targetData: response.map(item => validateNumber(item.package_count)),
                        salesData: response.map(item => validateNumber(item.sales_amount)),
                        categories: response.map(item => item.package_name || 'Unknown'),
                        showRotatedLabels: true
                    });
                    hideLoader('bestPackageSalesChart');
                },
                error: function() {
                    createComparisonChart('bestPackageSalesChart', '#9CDCF1', {
                        targetName: 'Count',
                        targetData: [0],
                        salesData: [0],
                        categories: ['Error Loading Data'],
                        showRotatedLabels: true
                    });
                    hideLoader('bestPackageSalesChart');
                }
            });
        }

        function initializeSalesComparisons(dateFrom = null, dateTo = null, branchId = null) {
            initializeB2BTargetSales(dateFrom, dateTo, branchId);
            initializeSalesVsCost(dateFrom, dateTo, branchId);
            initializeBestTests(dateFrom, dateTo, branchId);
            initializeBestPackages(dateFrom, dateTo, branchId);
        }

        function initializeYearOverYearGrowth(salesType = null, branchId = null) {
            showLoader('yoyGrowthChart');
            $.ajax({
                url: '/operations/sales-dashboard/year-over-year-growth',
                type: 'GET',
                data: {
                    sales_type: salesType,
                    branch_id: branchId
                },
                success: function(response) {
                    createYearOverYearGrowthChart(response);
                    hideLoader('yoyGrowthChart');
                },
                error: function() {
                    hideLoader('yoyGrowthChart');
                }
            });
        }

        function createYearOverYearGrowthChart(data) {
            if (charts['yoyGrowthChart']) {
                charts['yoyGrowthChart'].destroy();
            }

            const options = {
                series: [
                    {
                        name: `${new Date().getFullYear()} Sales`,
                        type: 'column',
                        data: data.map(item => item.current_year_sales)
                    },
                    {
                        name: `${new Date().getFullYear() - 1} Sales`,
                        type: 'column',
                        data: data.map(item => item.last_year_sales)
                    },
                    {
                        name: 'Growth %',
                        type: 'line',
                        data: data.map(item => item.growth_percentage)
                    }
                ],
                chart: {
                    height: 320,
                    type: 'line',
                    stacked: false,
                    toolbar: {
                        show: false
                    },
                    background: '#fff',
                    parentHeightOffset: 0
                },
                stroke: {
                    width: [0, 0, 2],
                    curve: 'smooth',
                    colors: ['transparent', 'transparent', '#FF1A6C']
                },
                plotOptions: {
                    bar: {
                        columnWidth: '15%',
                        borderRadius: 0,
                        dataLabels: {
                            position: 'top'
                        }
                    }
                },
                grid: {
                    show: true,
                    borderColor: '#F3F4F6',
                    strokeDashArray: 0,
                    position: 'back',
                    xaxis: {
                        lines: {
                            show: true
                        }
                    },
                    yaxis: {
                        lines: {
                            show: true
                        }
                    },
                    padding: {
                        top: 0,
                        right: 50,
                        bottom: 0,
                        left: 50
                    }
                },
                dataLabels: {
                    enabled: false
                },
                markers: {
                    size: 4,
                    strokeWidth: 0,
                    hover: {
                        size: 6
                    },
                    colors: ['#FF1A6C'],
                    strokeColors: '#FF1A6C'
                },
                xaxis: {
                    categories: data.map(item => item.month),
                    labels: {
                        style: {
                            colors: '#64748B',
                            fontSize: '12px',
                            fontFamily: 'inherit'
                        }
                    },
                    axisBorder: {show: false},
                    axisTicks: {show: false}
                },
                yaxis: [
                    {
                        title: {
                            text: "Sales Amount",
                            style: {
                                color: '#64748B'
                            }
                        },
                        labels: {
                            style: {
                                colors: '#64748B'
                            },
                            formatter: function(value) {
                                if (value >= 1000000) {
                                    return (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return (value / 1000).toFixed(1) + 'K';
                                }
                                return value.toFixed(1);
                            },
                            offsetX: -10
                        },
                        min: 0,
                        tickAmount: 6,
                        forceNiceScale: true
                    },
                    {
                        opposite: true,
                        title: {
                            text: "Growth %",
                            style: {
                                color: '#64748B'
                            }
                        },
                        labels: {
                            style: {
                                colors: '#64748B'
                            },
                            formatter: function(value) {
                                return `${value.toFixed(1)}%`;
                            },
                            offsetX: 10
                        },
                        min: 0,
                        max: function(max) {
                            const maxGrowth = Math.max(...data.map(item => item.growth_percentage || 0));
                            return max;
                            return Math.ceil(maxGrowth * 1.2);
                        },
                        tickAmount: 6,
                        forceNiceScale: true
                    }
                ],
                tooltip: {
                    shared: true,
                    intersect: false,
                    theme: 'light',
                    style: {
                        fontSize: '12px',
                        fontFamily: 'inherit'
                    },
                    y: [{
                        formatter: function(value) {
                            if (value >= 1000000) {
                                return (value / 1000000).toFixed(1) + 'M';
                            } else if (value >= 1000) {
                                return (value / 1000).toFixed(1) + 'K';
                            }
                            return value.toFixed(1);
                        }
                    }, {
                        formatter: function(value) {
                            if (value >= 1000000) {
                                return (value / 1000000).toFixed(1) + 'M';
                            } else if (value >= 1000) {
                                return (value / 1000).toFixed(1) + 'K';
                            }
                            return value.toFixed(1);
                        }
                    }, {
                        formatter: function(value) {
                            return `${value.toFixed(1)}%`;
                        }
                    }]
                },
                colors: ['#47B5FF', '#E2E8F0', '#FF1A6C'],
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    offsetY: 0,
                    labels: {
                        colors: '#64748B'
                    },
                    markers: {
                        width: 8,
                        height: 8,
                        radius: 24
                    },
                    itemMargin: {
                        horizontal: 16
                    }
                }
            };

            charts['yoyGrowthChart'] = new ApexCharts(document.querySelector("#yoyGrowthChart"), options);
            charts['yoyGrowthChart'].render();
        }

        function createPolarAreaChart(elementId, data, color) {
            try {
                if (!elementId || !data || !color) {
                    throw new Error('Missing required parameters for polar area chart');
                }

                const chartElement = safeQuerySelector(`#${elementId}`);
                if (!chartElement) {
                    throw new Error(`Chart element not found: ${elementId}`);
                }

                if (charts[elementId]) {
                    charts[elementId].destroy();
                }

                const options = {
                    series: Object.values(data),
                    chart: {
                        type: 'polarArea',
                        height: 'auto',
                        width: '100%',
                        offsetX: 0,
                        animations: {
                            enabled: false
                        },
                        sparkline: { enabled: true }
                    },
                    colors: [
                        color,
                        color + 'CC',
                        color + '99'
                    ],
                    stroke: {
                        width: 0
                    },
                    fill: {
                        opacity: 1
                    },
                    dataLabels: {
                        enabled: true,
                        formatter: function (val, opts) {
                            return opts.w.globals.series[opts.seriesIndex] || 0;
                        },
                        style: {
                            fontSize: '12px',
                            colors: ['#000000'],
                            fontWeight: 600
                        },
                        background: {
                            enabled: false
                        },
                    },
                    labels: ['Test', 'Package', 'Service'],
                    plotOptions: {
                        polarArea: {
                            rings: {
                                strokeWidth: 0.5,
                                strokeColor: 'rgba(0,0,0,0.1)'
                            },
                            spokes: {
                                strokeWidth: 0.5,
                                connectorColors: 'rgba(0,0,0,0.1)'
                            }
                        }
                    },
                    grid: {
                        show: false,
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }
                    },
                    legend: {
                        show: false
                    },
                    yaxis: {
                        show: false
                    }
                };

                charts[elementId] = new ApexCharts(chartElement, options);
                charts[elementId].render();
            } catch (error) {
                console.error(`Error creating polar area chart ${elementId}:`, error);
                handleChartError(elementId, error);
            }
        }

        function createQuantityList(elementId, data, color) {
            const types = {
                patient: 'Patient',
                test: 'Test',
                package: 'Package',
                service: 'Service'
            };

            let totals = {
                qty: 0,
                sales: 0,
                tax: 0,
                total: 0
            };

            Object.entries(data).forEach(([key, value]) => {
                const row = $('<div>').addClass('quantity-row');
                const typeCol = $('<div>')
                    .addClass('type-col')
                    .attr('data-type', key)
                    .css('--dot-color', color)
                    .text(types[key]);

                const valuesCol = $('<div>').addClass('values-col').append(
                    $('<span>').text(value.qty.toLocaleString()),
                    $('<span>').text(formatCurrency(value.sales).toLocaleString()),
                    $('<span>').text(formatCurrency(value.tax).toLocaleString()),
                    $('<span>').text(formatCurrency(value.total).toLocaleString())
                );

                row.append(typeCol, valuesCol);
                $(`#${elementId}`).append(row);

                totals.qty += value.qty;
                totals.sales += value.sales;
                totals.tax += value.tax;
                totals.total += value.total;
            });

            const totalsRow = $('<div>').addClass('quantity-row totals-row');
            const totalsTypeCol = $('<div>')
                .addClass('type-col')
                .css({
                    'font-weight': '600',
                    'color': '#1C1C1C'
                })
                .text('Totals');

            const totalsValuesCol = $('<div>').addClass('values-col').append(
                $('<span>').text(totals.qty.toLocaleString()).css('font-weight', '600'),
                $('<span>').text(formatCurrency(totals.sales).toLocaleString()).css('font-weight', '600'),
                $('<span>').text(formatCurrency(totals.tax).toLocaleString()).css('font-weight', '600'),
                $('<span>').text(formatCurrency(totals.total).toLocaleString()).css('font-weight', '600')
            );

            totalsRow.append(totalsTypeCol, totalsValuesCol);
            $(`#${elementId}`).append(
                $('<div>').addClass('totals-separator'),
                totalsRow
            );
        }

        function createBarChart(elementId, color, data = null) {
            if (charts[elementId]) {
                charts[elementId].destroy();
            }

            let series;
            let categories = [];

            if (data && data.test) {
                series = [{
                    name: 'Test',
                    data: data.test
                }, {
                    name: 'Package',
                    data: data.package
                }, {
                    name: 'Service',
                    data: data.service
                }];

                const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                categories = data.test.map((_, index) => monthNames[index]);
            } else {
                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                const defaultData = months.map(() => 0);
                series = [{
                    name: 'Test',
                    data: defaultData
                }, {
                    name: 'Package',
                    data: defaultData
                }, {
                    name: 'Service',
                    data: defaultData
                }];
                categories = months;
            }

            const options = {
                series: series,
                chart: {
                    height: 200,
                    type: 'bar',
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: true
                    }
                },
                colors: [
                    color,
                    color + 'CC',
                    color + '99'
                ],
                plotOptions: {
                    bar: {
                        barHeight: '70%',
                        horizontal: false,
                        columnWidth: '100%',
                        borderRadius: 5,
                        endingShape: 'flat'
                    }
                },
                dataLabels: {enabled: false},
                grid: {
                    show: false,
                    padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: categories,
                    tickPlacement: 'between',
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: '#64748B',
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    show: false
                },
                legend: {
                    show: false
                },
                tooltip: {
                    enabled: true,
                    theme: 'light',
                    style: {
                        fontSize: '12px'
                    },
                    y: {
                        formatter: function(value) {
                            return value.toFixed(0);
                        }
                    },
                    marker: {
                        show: false
                    }
                }
            };

            charts[elementId] = new ApexCharts(document.querySelector(`#${elementId}`), options);
            charts[elementId].render();
        }

        function createSalesForecastChart(series) {
            if (charts['salesForecastChart']) {
                charts['salesForecastChart'].destroy();
            }

            const options = {
                series: series,
                chart: {
                    type: 'bar',
                    height: 350,
                    stacked: false,
                    toolbar: {show: false},
                    fontFamily: 'Poppins',
                    background: 'transparent'
                },
                colors: ['var(--blazma-primary)', '#FFE0E8', '#FFD15D', '#FFF3D3', '#8EB8FF', '#EEF4FF'],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%',
                        borderRadius: 8,
                        endingShape: 'flat'
                    }
                },
                grid: {
                    show: false,
                    padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                },
                dataLabels: {enabled: false},
                stroke: {show: false},
                xaxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    axisBorder: {show: false},
                    axisTicks: {show: false},
                    labels: {
                        style: {
                            colors: '#64748B',
                            fontSize: '12px',
                            fontFamily: 'Poppins',
                            fontWeight: 500
                        }
                    }
                },
                yaxis: {
                    show: false,
                    labels: {
                        formatter: function(value) {
                            return value.toLocaleString();
                        }
                    }
                },
                fill: {opacity: 1},
                legend: {show: false},
                tooltip: {
                    enabled: true,
                    y: {
                        formatter: function (value) {
                            return value.toLocaleString();
                        }
                    }
                }
            };

            charts['salesForecastChart'] = new ApexCharts(document.querySelector("#salesForecastChart"), options);
            charts['salesForecastChart'].render();
        }

        function createForecastDonutChart(elementId, color, lightColor, totalSales, totalForecast) {
            if (charts[elementId]) {
                charts[elementId].destroy();
            }

            const options = {
                series: [totalSales, totalForecast],
                chart: {
                    type: 'donut',
                    height: 300,
                    offsetY: 0
                },
                colors: [color, lightColor],
                tooltip: {
                    shared: true,
                    intersect: false,
                    theme: 'light',
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Urbanist',
                        fontWeight: 600
                    },
                    y: [{
                        formatter: function(value) {
                            return `<span style="color: #1C1C1C; font-weight: 600">${Math.round(value).toLocaleString()}</span>`;
                        }
                    }, {
                        formatter: function(value) {
                            return `<span style="color: #1C1C1C; font-weight: 600">${Math.round(value).toLocaleString()}</span>`;
                        }
                    }]
                },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            background: 'transparent',
                            labels: {
                                show: true,
                                name: {
                                    show: true,
                                    fontSize: '13px',
                                    color: '#1C1C1C',
                                    fontWeight: 500
                                },
                                value: {
                                    show: true,
                                    formatter: function(val) {
                                        return Math.round(val).toLocaleString();
                                    }
                                },
                                total: {
                                    show: true,
                                    showAlways: true,
                                    label: elementId === 'outPatientForecastChart' ? 'Out Patient Sales' :
                                        elementId === 'b2bCreditForecastChart' ? 'B2B Credit' : 'B2B Cash',
                                    fontSize: '13px',
                                    fontWeight: 500,
                                    color: '#1C1C1C',
                                    formatter: function(w) {
                                        const total = w.globals.seriesTotals.reduce((a, b) => a + parseFloat(b), 0);
                                        return Math.round(total).toLocaleString();
                                    }
                                }
                            }
                        }
                    }
                },
                labels: ['Total Sales', 'Total Forecast'],
                dataLabels: {enabled: false},
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                    fontSize: '11px',
                    fontFamily: 'Urbanist',
                    fontWeight: 400,
                    offsetY: 10,
                    markers: {
                        width: 8,
                        height: 8,
                        radius: 8
                    },
                    itemMargin: {
                        horizontal: 10,
                        vertical: 5
                    }
                },
                stroke: {width: 0},
                states: {
                    hover: {
                        filter: {
                            type: 'none'
                        }
                    }
                }
            };

            charts[elementId] = new ApexCharts(document.querySelector(`#${elementId}`), options);
            charts[elementId].render();
        }

        function createSalesPerHourChart(data) {
            if (charts['salesPerHourChart']) {
                charts['salesPerHourChart'].destroy();
            }

            const baseHeight = 400;
            const heightPerDay = 50;
            const numberOfDays = data.length;
            const dynamicHeight = Math.max(baseHeight, numberOfDays * heightPerDay);

            const formattedData = data.map(day => ({
                name: day.name,
                data: day.data.map(hour => hour.qty)
            }));

            const options = {
                series: formattedData,
                chart: {
                    height: dynamicHeight,
                    type: 'heatmap',
                    toolbar: {show: false}
                },
                dataLabels: {
                    enabled: false
                },
                colors: ["var(--blazma-primary)"],
                xaxis: {
                    type: 'category',
                    categories: Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`),
                    axisBorder: {show: false},
                    axisTicks: {show: false},
                    labels: {
                        style: {
                            colors: '#64748B',
                            fontSize: '12px'
                        }
                    }
                },
                plotOptions: {
                    heatmap: {
                        radius: 18,
                        enableShades: true,
                        shadeIntensity: 0.5,
                        colorScale: {
                            ranges: [
                                {
                                    from: 0,
                                    to: 0,
                                    color: '#B7E5E9',
                                    name: 'No Sales'
                                },
                                {
                                    from: 1,
                                    to: 30,
                                    color: '#81D0D6',
                                    name: 'Low'
                                },
                                {
                                    from: 30,
                                    to: 800,
                                    color: '#46B2BA',
                                    name: 'Medium'
                                },
                                {
                                    from: 800,
                                    to: 100000000,
                                    color: 'var(--blazma-primary)',
                                    name: 'High'
                                }
                            ]
                        }
                    }
                },
                stroke: {
                    width: 1,
                    colors: ['#fff']
                },
                grid: {
                    show: false,
                    borderColor: '#F3F4F6',
                    strokeDashArray: 4,
                    position: 'back',
                    xaxis: {
                        lines: {
                            show: false
                        }
                    },
                    yaxis: {
                        lines: {
                            show: true
                        }
                    },
                    padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                },
                yaxis: {
                    labels: {
                        offsetX: -10,
                        style: {
                            colors: '#64748B',
                            fontSize: '12px'
                        }
                    },
                    axisBorder: {show: false},
                    axisTicks: {show: false}
                },
                tooltip: {
                    custom: function({series, seriesIndex, dataPointIndex}) {
                        const hourData = data[seriesIndex].data[dataPointIndex];
                        const date = data[seriesIndex].name;
                        const hour = dataPointIndex;
                        const formattedHour = hour === 0 ? '12 AM' :
                                            hour < 12 ? `${hour} AM` :
                                            hour === 12 ? '12 PM' :
                                            `${hour - 12} PM`;
                        return `
                            <div class="custom-tooltip">
                                <div class="tooltip-header">
                                    <div class="date-time">
                                        <div class="date">${date}</div>
                                        <div class="time">${formattedHour}</div>
                                    </div>
                                </div>
                                <div class="tooltip-body">
                                    <div class="tooltip-row">
                                        <div class="label">Orders:</div>
                                        <div class="value highlight">${hourData.total_orders}</div>
                                    </div>
                                    <div class="tooltip-row">
                                        <div class="label">Patients:</div>
                                        <div class="value highlight">${hourData.total_patients}</div>
                                    </div>
                                    <div class="tooltip-row total">
                                        <div class="label">Total Tests:</div>
                                        <div class="value highlight">${hourData.qty}</div>
                                    </div>
                                    <div class="tooltip-row sub-item">
                                        <div class="label">- Tests:</div>
                                        <div class="value">${hourData.test_qty}</div>
                                    </div>
                                    <div class="tooltip-row sub-item">
                                        <div class="label">- Packages:</div>
                                        <div class="value">${hourData.package_qty}</div>
                                    </div>
                                    <div class="tooltip-row sub-item">
                                        <div class="label">- Services:</div>
                                        <div class="value">${hourData.service_qty}</div>
                                    </div>
                                    <div class="tooltip-row total">
                                        <div class="label">Sales:</div>
                                        <div class="value highlight">${formatCurrency(hourData.amount)}</div>
                                    </div>
                                    <div class="tooltip-row">
                                        <div class="label">Tax:</div>
                                        <div class="value">${formatCurrency(hourData.tax)}</div>
                                    </div>
                                </div>
                            </div>
                        `;
                    }
                }
            };

            charts['salesPerHourChart'] = new ApexCharts(document.querySelector("#salesPerHourChart"), options);
            charts['salesPerHourChart'].render();
        }

        function createComparisonChart(elementId, color, data) {
            if (charts[elementId]) {
                charts[elementId].destroy();
            }

            const options = {
                series: [{
                    name: 'Sales',
                    data: data.salesData,
                    type: 'column'
                }, {
                    name: data.targetName,
                    data: data.targetData,
                    type: 'column'
                }],
                chart: {
                    type: 'bar',
                    height: 350,
                    stacked: elementId === 'salesVsCostChart' ? false : true,
                    stackType: elementId === 'salesVsCostChart' ? undefined : '100%',
                    toolbar: {show: false},
                    background: '#fff',
                    parentHeightOffset: 0
                },
                colors: elementId === 'salesVsCostChart' ?
                    ['#FFB547', '#FFB54740'] :
                    elementId === 'bestPackageSalesChart' ?
                        ['#9CDCF1', '#9CDCF140'] :
                    (elementId === 'bestTestSalesChart' ?
                        ['var(--blazma-primary)', 'var(--blazma-primary)40'] :
                        ['#47B5FF', '#47B5FF40']),
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '50%',
                        borderRadius: 8,
                        distributed: false,
                        borderRadiusApplication: 'end',
                        borderRadiusWhenStacked: 'last'
                    },
                },
                states: {
                    hover: {
                        filter: {
                            type: 'lighten',
                            value: 0.1
                        }
                    },
                    active: {
                        filter: {
                            type: 'none'
                        }
                    }
                },
                dataLabels: {enabled: false},
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                grid: {
                    show: true,
                    borderColor: '#F3F4F6',
                    strokeDashArray: 4,
                    position: 'back',
                    xaxis: {
                        lines: {
                            show: false
                        }
                    },
                    yaxis: {
                        lines: {
                            show: true
                        }
                    },
                    padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                    }
                },
                xaxis: {
                    categories: elementId === 'salesVsCostChart'
                        ? data.categories.map(date => {
                            const [year, month] = date.split('-');
                            const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return monthNames[parseInt(month) - 1] + ' ' + year;
                          })
                        : data.categories,
                    axisBorder: {show: false},
                    axisTicks: {show: false},
                    labels: {
                        style: {
                            colors: '#64748B',
                            fontSize: '12px',
                            fontFamily: 'inherit'
                        },
                        ...(data.showRotatedLabels && {
                            rotate: -45,
                            maxHeight: 100,
                            trim: true
                        })
                    }
                },
                yaxis: {
                    show: true,
                    min: 0,
                    max: function(max) {
                        const maxSales = Math.max(...data.salesData);
                        const maxTarget = Math.max(...data.targetData);
                        return Math.max(maxSales, maxTarget) * 1.1;
                    },
                    labels: {
                        formatter: function(value) {
                            if (elementId === 'salesVsCostChart' || data.isCostChart) {
                                if (value >= 1000000) {
                                    return (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return (value / 1000).toFixed(1) + 'K';
                                }
                                return value.toFixed(0);
                            }
                            return value.toFixed(0);
                        },
                        style: {
                            colors: '#64748B',
                            fontSize: '12px',
                            fontFamily: 'inherit'
                        }
                    },
                    axisBorder: {show: false},
                    axisTicks: {show: false}
                },
                fill: {
                    opacity: elementId === 'salesVsCostChart' ? 1 : [1, 0.85]
                },
                tooltip: {
                    shared: true,
                    intersect: false,
                    y: [{
                        formatter: function(value) {
                            if (elementId === 'salesVsCostChart' || data.isCostChart) {
                                if (value >= 1000000) {
                                    return (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return (value / 1000).toFixed(1) + 'K';
                                }
                                return value.toFixed(0);
                            }
                            return value.toFixed(0);
                        }
                    }, {
                        formatter: function(value) {
                            if (elementId === 'salesVsCostChart' || data.isCostChart) {
                                if (value >= 1000000) {
                                    return (value / 1000000).toFixed(1) + 'M';
                                } else if (value >= 1000) {
                                    return (value / 1000).toFixed(1) + 'K';
                                }
                                return value.toFixed(0);
                            }
                            return value.toFixed(0);
                        }
                    }]
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right'
                },
            };

            charts[elementId] = new ApexCharts(document.querySelector(`#${elementId}`), options);
            charts[elementId].render();
        }

        function validateNumber(value) {
            const num = parseFloat(value);
            return isNaN(num) ? 0 : num;
        }

        function formatCurrency(amount) {
            return new Intl.NumberFormat('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(amount);
        }

        $(document).ready(function () {
            initializeDateRangePickers();
            initializeSelect2();
            setupEventHandlers();
            setupChartObservers();

            @if(session()->has('profile_id') && session('profile_id') == '50')

            setTimeout(function() {
                    const sixMonthsAgo = moment().subtract(6, 'months').startOf('month');
                    const today = moment().endOf('month');
                    const pickers = ['#outPatientDateRange', '#b2bCreditDateRange', '#b2bCashDateRange'];
                    pickers.forEach(function(pickerId) {
                        const picker = $(pickerId).data('daterangepicker');
                        if (picker) {
                            picker.setStartDate(sixMonthsAgo);
                            picker.setEndDate(today);
                            $(pickerId).val(sixMonthsAgo.format('YYYY-MM-DD') + ' - ' + today.format('YYYY-MM-DD'));

                            const cardTitle = $(pickerId).closest('.card-body').find('.card-title').text().trim();
                            const branchId = $(pickerId).closest('.card-body').find('.custom-select').val();

                            setTimeout(function() {
                                handleDateRangeChange(
                                    cardTitle,
                                    sixMonthsAgo.format('YYYY-MM-DD'),
                                    today.format('YYYY-MM-DD'),
                                    branchId,
                                    null
                                );
                            }, 500);
                        }
                    });
                }, 1000);
            @endif
        });

        function initializeDateRangePickers() {
            const startOfYear = moment().startOf('year');
            const endOfYear = moment().endOf('year');
            const today = moment().format('YYYY-MM-DD');
            const lastWeek = moment().subtract(6, 'days').format('YYYY-MM-DD');

            const commonOptions = {
                opens: 'left',
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD'
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'months'), moment()],
                    'Last 6 Months': [moment().subtract(6, 'months'), moment()],
                    'This Year': [moment().startOf('year'), moment()]
                },
                drops: 'down',
                buttonClasses: 'btn',
                applyButtonClasses: 'btn-primary',
                cancelButtonClasses: 'btn-default',
                showDropdowns: true,
                showCustomRangeLabel: true,
                alwaysShowCalendars: true
            };

            $('#bestTestsDateRange, #bestPackagesDateRange, #b2bTargetDateRange, #salesVsCostDateRange').daterangepicker({
                ...commonOptions,
                startDate: startOfYear,
                endDate: endOfYear,
                maxSpan: {
                    days: 365
                }
            });

            $('#outPatientDateRange, #b2bCreditDateRange, #b2bCashDateRange').daterangepicker({
                ...commonOptions,
                startDate: today,
                endDate: today
            });

            $('#salesPerHourDateRange').daterangepicker({
                ...commonOptions,
                startDate: lastWeek,
                endDate: today,
                maxSpan: {
                    days: 30
                },
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 14 Days': [moment().subtract(13, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')]
                }
            });

            $('<style>')
                .text(`
                    .daterangepicker {
                        font-family: inherit;
                        border: 1px solid #E2E8F0;
                        border-radius: 6px;
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                        background-color: #fff;
                    }
                    .daterangepicker .ranges li {
                        padding: 8px 12px;
                        font-size: 14px;
                        color: #1C1C1C;
                        cursor: pointer;
                    }
                    .daterangepicker .ranges li:hover {
                        background-color: #F8FAFC;
                    }
                    .daterangepicker .ranges li.active {
                        background-color: #EDF2F7;
                        color: #1C1C1C;
                    }
                    .daterangepicker .calendar-table {
                        border: none;
                    }
                    .daterangepicker td.active, .daterangepicker td.active:hover {
                        background-color: #3B82F6;
                    }
                    .daterangepicker .btn-primary {
                        background-color: #3B82F6;
                        border-color: #3B82F6;
                    }
                    .daterangepicker .btn-default {
                        background-color: #F3F4F6;
                        border-color: #E5E7EB;
                        color: #374151;
                    }
                    .daterangepicker .drp-buttons {
                        border-top: 1px solid #E2E8F0;
                        padding: 8px;
                    }
                    .daterangepicker .drp-selected {
                        font-size: 12px;
                        color: #64748B;
                    }
                `)
                .appendTo('head');

            $('.date-range-picker').each(function() {
                const picker = $(this).data('daterangepicker');
                if (picker) {
                    $(this).trigger('apply.daterangepicker', picker);
                }
            });
        }

        function initializeSelect2() {
            $('.custom-select').not('#salesPerHourType, #yoySalesType, #b2bTargetAccountManagers').select2({
                placeholder: 'Client',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: 1,
                templateResult: formatSelect2Option,
                templateSelection: formatSelect2Option
            });

            $('#outPatientBranch, #salesPerHourBranch, #salesForecastBranch, #salesForecastBranch,' +
                ' #salesVsCostBranch, #bestTestsBranch, #bestPackagesBranch').select2({
                placeholder: 'Branch',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: Infinity
            });

            $('#salesPerHourType, #yoySalesType').select2({
                placeholder: 'Select Type',
                allowClear: true,
                width: '100%',
                minimumResultsForSearch: Infinity
            });

            $('#b2bTargetAccountManagers').select2({
                placeholder: 'Account Managers',
                allowClear: true,
                width: '100%',
                templateResult: formatSelect2Option,
                templateSelection: formatSelect2Option
            });
        }

        function formatSelect2Option(data) {
            if (!data.id) return data.text;
            return $('<span>').text(data.text);
        }

        function setupEventHandlers() {
            $('.date-range-picker').on('apply.daterangepicker', function(ev, picker) {
                const cardBody = $(this).closest('.card-body');
                const cardTitle = cardBody.find('.card-title').text().trim();
                const filterSelect = cardBody.find('.custom-select');
                const selectedId = filterSelect.val();
                const salesType = $('#salesPerHourType').val();

                handleDateRangeChange(
                    cardTitle,
                    picker.startDate.format('YYYY-MM-DD'),
                    picker.endDate.format('YYYY-MM-DD'),
                    selectedId,
                    salesType
                );
            });

            $('.custom-select').on('select2:select select2:unselect', function(e) {
                const cardBody = $(this).closest('.card-body');
                const dateRange = cardBody.find('.date-range-picker').data('daterangepicker');
                const cardTitle = cardBody.find('.card-title').text().trim();

                if (dateRange) {
                    handleDateRangeChange(
                        cardTitle,
                        dateRange.startDate.format('YYYY-MM-DD'),
                        dateRange.endDate.format('YYYY-MM-DD'),
                        $(this).val(),
                        $('#salesPerHourType').val()
                    );
                }
            });

            $('#yoyBranch, #yoySalesType').on('change', function() {
                queueChartInit('yoyGrowth', () =>
                    initializeYearOverYearGrowth(
                        $('#yoySalesType').val(),
                        $('#yoyBranch').val()
                    )
                );
            });

            $('#salesPerHourType').on('change', function() {
                const dateRange = $('#salesPerHourDateRange').data('daterangepicker');
                if (dateRange) {
                    queueChartInit('salesPerHour', () =>
                        initializeSalesPerHour(
                            dateRange.startDate.format('YYYY-MM-DD'),
                            dateRange.endDate.format('YYYY-MM-DD'),
                            $('#salesPerHourBranch').val(),
                            $(this).val()
                        )
                    );
                }
            });

            $('#exportSalesPerHour').on('click', function() {
                const $btn = $(this);
                const originalHtml = $btn.html();

                $btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Exporting...');
                $btn.prop('disabled', true);

                const dateRange = $('#salesPerHourDateRange').val();
                const [dateFrom, dateTo] = dateRange ? dateRange.split(' - ') : [null, null];
                const branchId = $('#salesPerHourBranch').val();
                const salesType = $('#salesPerHourType').val();

                setTimeout(() => {
                    window.location.href = `/operations/sales-dashboard/sales-per-hour/export?date_from=${dateFrom || ''}&date_to=${dateTo || ''}&branch_id=${branchId || ''}&sales_type=${salesType || ''}`;

                    setTimeout(() => {
                        $btn.html(originalHtml);
                        $btn.prop('disabled', false);
                    }, 2000);
                }, 300);
            });
        }

        function handleDateRangeChange(cardTitle, dateFrom, dateTo, selectedId, salesType) {
            const chartInitMap = {
                'Out Patient Sales': () => queueChartInit('outPatient', () => initializeOutPatientSales(dateFrom, dateTo, selectedId)),
                'B2B Sales / Credit': () => queueChartInit('b2bCredit', () => initializeB2BCreditSales(dateFrom, dateTo, selectedId)),
                'B2B Sales Cash': () => queueChartInit('b2bCash', () => initializeB2BCashSales(dateFrom, dateTo, selectedId)),
                'Sales Forecast': () => queueChartInit('salesForecast', () => initializeSalesForecast(dateFrom, dateTo, selectedId)),
                'Sales Per Hour': () => queueChartInit('salesPerHour', () => initializeSalesPerHour(dateFrom, dateTo, selectedId, salesType)),
                'B2B Sales vs Target': () => queueChartInit('b2bTarget', () => initializeB2BTargetSales(dateFrom, dateTo, selectedId)),
                'Sales vs Cost': () => queueChartInit('salesVsCost', () => initializeSalesVsCost(dateFrom, dateTo, selectedId)),
                'Best Performing Tests': () => queueChartInit('bestTests', () => initializeBestTests(dateFrom, dateTo, selectedId)),
                'Best Package Sales': () => queueChartInit('bestPackages', () => initializeBestPackages(dateFrom, dateTo, selectedId))
            };

            if (chartInitMap[cardTitle]) {
                chartInitMap[cardTitle]();
            }
        }
    </script>
@endsection