@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@model CostMakeUpForVehicle
@if (Model.CollisionRecordSum + Model.ServiceRecordSum + Model.GasRecordSum + Model.TaxRecordSum + Model.UpgradeRecordSum > 0)
{
    <canvas id="pie-chart"></canvas>
    <script>
        renderChart();
        function renderChart() {
            var useDarkMode = getGlobalConfig().useDarkMode;
            new Chart($("#pie-chart"), {
                type: 'pie',
                data: {
                    labels: [decodeHTMLEntities('@translator.Translate(userLanguage, "Service Records")'),
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Repairs")'),
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Upgrades")'),
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Tax")'),
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel")')],
                    datasets: [
                        {
                            label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'),
                            backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361", "#ffa600"],
                            data: [
                                globalParseFloat('@Model.ServiceRecordSum'),
                                globalParseFloat('@Model.CollisionRecordSum'),
                                globalParseFloat('@Model.UpgradeRecordSum'),
                                globalParseFloat('@Model.TaxRecordSum'),
                                globalParseFloat('@Model.GasRecordSum')
                            ]
                        }
                    ]
                },
                options: {
                    onClick: (e) => {
                        showDataTable();
                    },
                    plugins: {
                        legend: {
                            position: "bottom",
                            labels: {
                                color: useDarkMode ? "#fff" : "#000"
                            }
                        },
                        title: {
                            display: true,
                            text: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Type")'),
                            color: useDarkMode ? "#fff" : "#000"
                        },
                    }
                }
            });
        }
    </script>
}
else
{
    <div class="text-center">
        <h4>@translator.Translate(userLanguage, "No data found or all records have zero sums, insert records with non-zero sums to see visualizations here.")</h4>
    </div>
}