<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

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



        <title>Automated Section 8.2(d) Interest Calculation Tool</title>

        <meta name="description" content="Automate your interest calculations under Section 8.2(d) of the Illinois Workers’ Compensation Act with a user-friendly and efficient tool.">

        <meta name="keywords" content="Section 8.2(d), interest calculation, Illinois Workers’ Compensation, healthcare, billing, financial management">



        <!-- Libraries -->

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

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

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here.

                document.addEventListener("DOMContentLoaded", function() {

                    const resultsEl = document.getElementById("results");

                    const entries = [];



                    function calculateInterest() {

                        resultsEl.innerHTML = '';

                        let totalInterest = 0;



                        entries.forEach(entry => {

                            const unlawfullBalance = Math.max(0, entry.originalCharge - entry.paymentSum);

                            const interest = unlawfullBalance * 0.01 * Math.max(0, Math.ceil((new Date() - new Date(entry.billReceived)) / (1000 * 3600 * 24 * 30)));

                            totalInterest += interest;



                            // Display results in a table

                            const row = `

                                <tr>

                                    <td>${entry.description}</td>

                                    <td>${entry.originalCharge}</td>

                                    <td>${entry.paymentSum}</td>

                                    <td>${unlawfullBalance}</td>

                                    <td>${interest.toFixed(2)}</td>

                                </tr>

                            `;

                            resultsEl.innerHTML += row;

                        });



                        resultsEl.innerHTML += `<tr><td colspan="4">Total Interest</td><td>${totalInterest.toFixed(2)}</td></tr>`;

                    }



                    $("#addBill").click(function() {

                        const description = $("#description").val();

                        const originalCharge = parseFloat($("#originalCharge").val());

                        const paymentAmount = parseFloat($("#paymentAmount").val());

                        entries.push({ description, originalCharge, paymentSum: paymentAmount, billReceived: $("#billReceived").val() });

                        

                        $("#description").val('');

                        $("#originalCharge").val('');

                        $("#paymentAmount").val('');

                        $("#billReceived").val('');

                        

                        calculateInterest();

                    });

                });



            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(to right, #8e44ad, #3498db);

                color: white;

                font-family: Arial, sans-serif;

            }

            #main-container {

                margin-top: 50px;

            }

            .input-group {

                margin-bottom: 15px;

            }

            table {

                width: 100%;

                border-collapse: collapse;

                margin-top: 20px;

            }

            th, td {

                padding: 10px;

                border: 1px solid white;

                text-align: center;

            }

            th {

                background: #2980b9;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1 class="text-center">Automated Section 8.2(d) Interest Calculation Tool</h1>

            <div class="input-group">

                <input type="text" class="form-control" id="description" placeholder="Service Description">

                <input type="number" class="form-control" id="originalCharge" placeholder="Original Charge">

                <input type="number" class="form-control" id="paymentAmount" placeholder="Total Payments Received">

                <input type="date" class="form-control" id="billReceived" placeholder="Bill Receipt Date">

                <button class="btn btn-success" id="addBill">Add Bill</button>

            </div>

            <table>

                <thead>

                    <tr>

                        <th>Line Item</th>

                        <th>Original Charge</th>

                        <th>Total Payments Received</th>

                        <th>Unpaid Balance</th>

                        <th>Interest Owed</th>

                    </tr>

                </thead>

                <tbody id="results">

                    <!-- Calculation results will display here -->

                </tbody>

            </table>

        </div>

    </body>

</html>