@model  Neo.LegitimateLicences.Dashboards.DashboardModel
@using Neo.Afx.ComponentModel
@using Neo.Afx.Security
@using Neo.Afx.Mvc

<script>
@Html.Raw("$.extend(ViewModel" + Model.AjaxRequestTicket + ".prototype,")
{
    AvgTimeToProcessApplications: @Html.Raw(Model.AverageProcessingTime.ToJson(JsonSerializerOptions.None))
});
</script>

@*<div class="col-sm-12 col-lg-6 col-xl-3">*@
    <div class="card">
        <div class="card-header">
            <div class="card-title">Avg. time to process applications</div>
            <div class="card-subtitle text-muted" data-bind="text: viewModel.AvgTimeToProcessApplications.TotalApplications + ' applications completed over the last month'"></div>
        </div>
        <div class="card-body p-1">
            <div class="chart-container">
                <div id="AvgTimeToVerifyApplications" data-bind="dxCircularGauge: {
                     value: viewModel.AvgTimeToProcessApplications.AvgProcessingTime,
                     palette: ['#7CBAB4', '#92C7E2' , '#75B5D6' , '#B78C9B' , '#F2CA84' , '#A7CA74' ],
                     scale: {
                     startValue: 0,
                     endValue: 90,
                     tickInterval: 10,
                     label: {
                     customizeText: function (arg) {
                            if (arg.valueText == 1)
                                    {
                                        return arg.valueText + ' day';
                                    }
                                    else {
                                        return arg.valueText + ' days';
                                    }
                                }
                            }
                        },
                        rangeContainer: {
                            ranges: [
                                { startValue: 0, endValue: 40, color: '#228B22' },
                                { startValue: 40, endValue: 70, color: '#FFD700' },
                                { startValue: 70, endValue: 90, color: '#CE2029' }
                            ]
                        }
                }">
                </div>
            </div>
        </div>
    </div>
@*</div>*@