<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Healthcare Cost Calculator</title>

    <meta name="description" content="A customizable calculator for healthcare costs allowing users to estimate their healthcare expenses by inputting monthly premiums, deductible, coinsurance rates, out-of-pocket max, and service-specific copays or coinsurance percentages.">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>

        .plan-color-aetna {background-color: purple; color: white;}

        .plan-color-uhc {background-color: red; color: white;}

        .plan-color-bcbs {background-color: blue; color: white;}

    </style>

</head>

<body>

    <div class="container my-5">

        <h1 class="text-center">Healthcare Cost Calculator</h1>

        

        <form id="healthcare-calculator">

            <h2>Select Plan</h2>

            <div class="row mb-3">

                <div class="col plan-color-aetna">

                    <label><input type="radio" name="plan" value="Aetna"> Aetna</label>

                </div>

                <div class="col plan-color-uhc">

                    <label><input type="radio" name="plan" value="UHC"> UHC</label>

                </div>

                <div class="col plan-color-bcbs">

                    <label><input type="radio" name="plan" value="BCBS"> BCBS</label>

                </div>

            </div>



            <h2>Inputs</h2>

            <label>Monthly Premium ($): <input type="number" id="monthly-premium" class="form-control"></label>

            <label>Deductible ($): <input type="number" id="deductible" class="form-control"></label>

            <label>Coinsurance Rate (%): <input type="number" id="coinsurance-rate" class="form-control"></label>

            <label>Out-of-Pocket Max ($): <input type="number" id="out-of-pocket-max" class="form-control"></label>



            <h2>Service Usage Estimates</h2>

            <label>Doctor Visits: <input type="number" id="doctor-visits" class="form-control"></label>

            <label>Specialist Visits: <input type="number" id="specialist-visits" class="form-control"></label>

            <label>Inpatient Days: <input type="number" id="inpatient-days" class="form-control"></label>

            <label>Emergency Room Visits: <input type="number" id="er-visits" class="form-control"></label>

            <label>Prescriptions Filled: <input type="number" id="rx-fills" class="form-control"></label>



            <button type="button" id="calculate" class="btn btn-primary my-3">Calculate</button>

        </form>



        <h2>Results</h2>

        <p id="results"></p>



        <canvas id="comparisonChart" width="400" height="200"></canvas>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            $('#calculate').click(function() {

                // Fetch user inputs

                const plan = $('input[name="plan"]:checked').val();

                const monthlyPremium = parseFloat($('#monthly-premium').val()) || 0;

                const deductible = parseFloat($('#deductible').val()) || 0;

                const coinsuranceRate = parseFloat($('#coinsurance-rate').val()) / 100 || 0;

                const oopMax = parseFloat($('#out-of-pocket-max').val()) || 0;

                const doctorVisits = parseInt($('#doctor-visits').val()) || 0;

                const specialistVisits = parseInt($('#specialist-visits').val()) || 0;

                const inpatientDays = parseInt($('#inpatient-days').val()) || 0;

                const erVisits = parseInt($('#er-visits').val()) || 0;

                const rxFills = parseInt($('#rx-fills').val()) || 0;



                // Example cost calculations

                const annualPremium = monthlyPremium * 12;

                let outOfPocketCost = deductible + ((doctorVisits + specialistVisits + inpatientDays + erVisits + rxFills) * coinsuranceRate * 100);

                if (outOfPocketCost > oopMax) outOfPocketCost = oopMax;

                const totalCost = annualPremium + outOfPocketCost;



                // Display results

                $('#results').html(`<b>Plan:</b> ${plan}<br><b>Total Annual Cost:</b> $${totalCost.toFixed(2)}`);



                // Chart.js to create a comparison chart

                const ctx = document.getElementById('comparisonChart').getContext('2d');

                new Chart(ctx, {

                    type: 'bar',

                    data: {

                        labels: ['Annual Premium', 'Out-of-Pocket Cost'],

                        datasets: [{

                            label: `${plan} Total Costs`,

                            data: [annualPremium, outOfPocketCost],

                            backgroundColor: plan === 'Aetna' ? 'purple' : plan === 'UHC' ? 'red' : 'blue'

                        }]

                    },

                    options: {

                        scales: {

                            y: {

                                beginAtZero: true

                            }

                        }

                    }

                });

            });

        });

    </script>

</body>

</html>