@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Income Tax Calculator</h1>

    <div>
        <label for="grossAnnualSalary">Gross Annual Salary:</label>
        <input type="text" id="grossAnnualSalary" pattern="^[1-9]\d*$" title="Please enter a positive integer value" max="2147483647" />
        <button id="calculateButton">Calculate</button>
    </div>

    <div id="resultsSection" class="container mt-4" style="display:none; border: 1px solid #ddd; padding: 15px; text-align: center;">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedGrossAnnualSalary">Gross Annual Salary:</label>
                <span id="calculatedGrossAnnualSalary" class="ml-2"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedGrossMonthlySalary">Gross Monthly Salary:</label>
                <span id="calculatedGrossMonthlySalary" class="ml-2"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedNetAnnualSalary">Net Annual Salary:</label>
                <span id="calculatedNetAnnualSalary" class="ml-2"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedNetMonthlySalary">Net Monthly Salary:</label>
                <span id="calculatedNetMonthlySalary" class="ml-2"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedAnnualTaxPaid">Annual Tax Paid:</label>
                <span id="calculatedAnnualTaxPaid" class="ml-2"></span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mx-auto">
                <label for="calculatedMonthlyTaxPaid">Monthly Tax Paid:</label>
                <span id="calculatedMonthlyTaxPaid" class="ml-2"></span>
            </div>
        </div>
    </div>

</div>


@section Scripts {
    <script>
        $(document).ready(function () {
            $('#calculateButton').click(function () {
                var apiUrl = '@ViewBag.ApiUrl';

                toastr["info"]("Wait a second...", "Income Tax Calclator");

                var grossAnnualSalary = $('#grossAnnualSalary').val();

                // Make the AJAX request to the Web API
                $.ajax({
                    url: apiUrl + '/api/salary',
                    type: 'POST',
                    contentType: 'application/json',
                    data: grossAnnualSalary,
                    success: function (result) {
                        // Update the UI with the calculated results
                        $('#calculatedGrossAnnualSalary').text(result.grossAnnualSalary);
                        $('#calculatedGrossMonthlySalary').text(result.grossMonthlySalary);
                        $('#calculatedNetAnnualSalary').text(result.netAnnualSalary);
                        $('#calculatedNetMonthlySalary').text(result.netMonthlySalary);
                        $('#calculatedAnnualTaxPaid').text(result.annualTaxPaid);
                        $('#calculatedMonthlyTaxPaid').text(result.monthlyTaxPaid);

                        // Show the results section
                        $('#resultsSection').show();
                    },
                    error: function () {
                        // Handle error
                        toastr["error"]("An error appears during tax calculating!", "Income Tax Calclator")
                    }
                });
            });
        });
    </script>
}