@using MotoVaultPro.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@model ReminderMakeUpForVehicle
@if (Model.UrgentCount + Model.VeryUrgentCount + Model.NotUrgentCount + Model.PastDueCount > 0)
{
    <canvas id="donut-chart"></canvas>
    <script>
        renderChart();
        function renderChart() {
            var useDarkMode = getGlobalConfig().useDarkMode;
            new Chart($("#donut-chart"), {
                type: 'doughnut',
                data: {
                    labels: [
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Not Urgent")'), 
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Urgent")'), 
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Very Urgent")'), 
                    decodeHTMLEntities('@translator.Translate(userLanguage, "Past Due")')
                    ],
                    datasets: [
                        {
                            label: decodeHTMLEntities('@translator.Translate(userLanguage, "Reminders by Category")'),
                            backgroundColor: ["#488f31", "#ffa600", "#de425b", "#cccccc"],
                            data: [
                                @Model.NotUrgentCount,
                                @Model.UrgentCount,
                                @Model.VeryUrgentCount,
                                @Model.PastDueCount
                            ]
                        }
                    ]
                },
                options: {
                    plugins: {
                        legend: {
                            position: "bottom",
                            labels: {
                                color: useDarkMode ? "#fff" : "#000"
                            }
                        },
                        title: {
                            display: true,
                            text: decodeHTMLEntities('@translator.Translate(userLanguage, "Reminders by Urgency")'),
                            color: useDarkMode ? "#fff" : "#000"
                        },
                    }
                }
            });
        }
    </script>
}
else
{
    <div class="text-center">
        <h4>@translator.Translate(userLanguage,"No data found, create reminders to see visualizations here.")</h4>
    </div>
}