<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Pricing Comparison</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
<div class="card shadow p-4 mb-5">
            <h4 class="card-title">Select Number of Agents</h4>
            <div class="mb-3">
                <label for="agents" class="form-label">Number of Agents: <span id="agent-count">10</span></label>
                <input type="range" class="form-range" id="agents" min="1" max="50" value="10" oninput="updatePricing()">
            </div>
        </div>

        <div class="card shadow p-4">
            <h4 class="card-title">Pricing Comparison</h4>
            <canvas id="pricingChart" width="400" height="200"></canvas>
        </div>

        <script>
            // Pricing data configuration
            const pricingConfig = {
                Zendesk: { perAgentMonthly: 55 },
                SupportPal: { baseMonthly: 24.95 },
                "Provide Support": {
                    1: { monthly: 24 },
                    3: { monthly: 53 },
                    10: { monthly: 108 }
                }
            };

            // Chart.js configuration
            const ctx = document.getElementById('pricingChart').getContext('2d');
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Zendesk', 'SupportPal', 'Provide Support'],
                    datasets: [{
                        label: 'Monthly Cost ($)',
                        data: [],
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.6)',
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(153, 102, 255, 0.6)'
                        ],
                        borderColor: [
                            'rgba(75, 192, 192, 0.9)',
                            'rgba(54, 162, 235, 0.9)',
                            'rgba(153, 102, 255, 0.9)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        },
                        title: {
                            display: true,
                            text: 'Pricing Comparison for Agents'
                        },
                        datalabels: {
                            display: true,
                            color: '#000',
                            font: {
                                weight: 'bold',
                                size: 14
                            },
                            anchor: 'end',
                            align: 'start',
                            formatter: function (value) {
                                return `$${value.toFixed(2)}`;
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                },
                plugins: [ChartDataLabels]
            });

            // Update pricing data and chart dynamically
            function updatePricing() {
                const agents = parseInt(document.getElementById('agents').value, 10);
                document.getElementById('agent-count').innerText = agents;

                const zendeskCost = agents * pricingConfig.Zendesk.perAgentMonthly;
                const supportPalCost = pricingConfig.SupportPal.baseMonthly;
                let provideSupportCost;
                if (agents <= 1) {
                    provideSupportCost = pricingConfig["Provide Support"][1].monthly;
                } else if (agents <= 3) {
                    provideSupportCost = pricingConfig["Provide Support"][3].monthly;
                } else {
                    provideSupportCost = pricingConfig["Provide Support"][10].monthly;
                }

                chart.data.datasets[0].data = [zendeskCost, supportPalCost, provideSupportCost];
                chart.update();
            }

            // Initialize chart with default values for 10 agents
            updatePricing();
        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </div>
</body>
</html>
