lubelog/Views/Vehicle/_Report.cshtml

@model ReportViewModel
<div class="row">
    <div class="col-md-3 col-12 mt-2">
        <div class="row">
            <div class="col-12">
                <select class="form-select" id="yearOption" onchange="yearUpdated()">
                    <option value="0">All Time</option>
                    @foreach (int year in Model.Years)
                    {
                        <option value="@year">@year</option>
                    }
                </select>
            </div>
        </div>
        <div class="row">
            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="costMakeUpReportContent">
                @await Html.PartialAsync("_CostMakeUpReport", Model.CostMakeUpForVehicle)
            </div>
        </div>
    </div>
    <div class="col-md-6 col-12 mt-2">
        <div class="row">
            <div class="col-12 d-flex justify-content-center reportsCheckBoxContainer">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" onChange="updateCheck(this)" type="checkbox" id="serviceExpenseCheck" value="1" checked>
                    <label class="form-check-label" for="serviceExpenseCheck">Service</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" onChange="updateCheck(this)" type="checkbox" id="repairExpenseCheck" value="2" checked>
                    <label class="form-check-label" for="repairExpenseCheck">Repairs</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" onChange="updateCheck(this)" type="checkbox" id="upgradeExpenseCheck" value="3" checked>
                    <label class="form-check-label" for="upgradeExpenseCheck">Upgrades</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" onChange="updateCheck(this)" type="checkbox" id="gasExpenseCheck" value="4" checked>
                    <label class="form-check-label" for="gasExpenseCheck">Gas</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" onChange="updateCheck(this)" type="checkbox" id="taxExpenseCheck" value="5" checked>
                    <label class="form-check-label" for="taxExpenseCheck">Tax</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="gasCostByMonthReportContent">
                @await Html.PartialAsync("_GasCostByMonthReport", Model.CostForVehicleByMonth)
            </div>
        </div>
    </div>
    <div class="col-md-3 col-12 mt-2">
        <div class="row">
            <div class="col-12">
                <select class="form-select" onchange="updateReminderPie()" id="reminderOption">
                    <option value="0">As of Today</option>
                    <option value="30">+30 Days</option>
                    <option value="60">+60 Days</option>
                    <option value="90">+90 Days</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="reminderMakeUpReportContent">
                @await Html.PartialAsync("_ReminderMakeUpReport", Model.ReminderMakeUpForVehicle)
            </div>
        </div>
    </div>
</div>
<hr />
<div class="row">
</div>
<script>
    function getYear() {
        return $("#yearOption").val();
    }
    var debounce = null;
    function updateCheck(sender) {
        clearTimeout(debounce);
        debounce = setTimeout(function () {
            refreshBarChart();
        }, 1000);
    }
    function refreshBarChart(callBack) {
        var selectedMetrics = [];
        var vehicleId = GetVehicleId().vehicleId;
        var year = getYear();

        if ($("#serviceExpenseCheck").is(":checked")) {
            selectedMetrics.push('ServiceRecord');
        }
        if ($("#repairExpenseCheck").is(":checked")) {
            selectedMetrics.push('RepairRecord');
        }
        if ($("#upgradeExpenseCheck").is(":checked")) {
            selectedMetrics.push('UpgradeRecord');
        }
        if ($("#gasExpenseCheck").is(":checked")) {
            selectedMetrics.push('GasRecord');
        }
        if ($("#taxExpenseCheck").is(":checked")) {
            selectedMetrics.push('TaxRecord');
        }

        $.post('/Vehicle/GetCostByMonthByVehicle',
            {
                vehicleId: vehicleId,
                selectedMetrics: selectedMetrics,
                year: year
            }, function (data) {
                $("#gasCostByMonthReportContent").html(data);
                if (callBack != undefined) {
                    callBack();
                }
            });
    }
    function updateReminderPie() {
        var vehicleId = GetVehicleId().vehicleId;
        var daysToAdd = $("#reminderOption").val();
        $.get(`/Vehicle/GetReminderMakeUpByVehicle?vehicleId=${vehicleId}`, { daysToAdd: daysToAdd }, function (data) {
            $("#reminderMakeUpReportContent").html(data);
        });
    }
    //called when year selected is changed.
    function yearUpdated() {
        var vehicleId = GetVehicleId().vehicleId;
        var year = getYear();
        $.get(`/Vehicle/GetCostMakeUpForVehicle?vehicleId=${vehicleId}`, { year: year }, function (data) {
            $("#costMakeUpReportContent").html(data);
            refreshBarChart();
        })
    }
</script>