@php
    $userTimeZone = \Illuminate\Support\Facades\Auth::user()->timezone;

    if ($userTimeZone === null) {
        $userTimeZone = \Illuminate\Support\Facades\Config::get('app.timezone');
    }
@endphp

<script type="text/javascript">
    function getResponseSeriesValue(value) {
        if (/^\d{4}\-\d{2}\-\d{2}/.test(value)) {
            return new Date(value).toLocaleDateString('en-US', {
                month: '2-digit',
                day: '2-digit',
                year: 'numeric',
                timeZone: '{{$userTimeZone}}'
            });
        } else {
            return value;
        }
    }

    $(document).ready(function() {
        $.ajax({
            url: '/get-widget-data',
            data: {
                '_token': tk,
                'id': {{$widget->id}},
                'from': "{{ $from }}",
                @if(Request::input('timerange_new'))
                'timerange': "{{ Request::input('timerange_new') }}",
                @endif
                'to': "{{ $to }}"
            },
            type: "post",
            dataType: "json",
            success: function (resp) {
                $("#element{{$widget->id}} .splunk-message-container").remove();

                if (resp.data) {
                    var info_leg = resp.data_labels;
                    var data = resp.data;

                    if (info_leg) {
                        info_leg.shift();
                    }

                    $.each(info_leg, function (ind, elem) {
                        if (elem == '_tc') {
                            info_leg.pop();
                        }
                        if (elem == '_spandays') {
                            info_leg.pop();
                        }
                        if (elem == '_span') {
                            info_leg.pop();
                        }
                        if (elem == '_span') {
                            info_leg.pop();
                        }
                    });

                    var lbl = [];

                    $("#element{{$widget->id}}").empty();

                    var sector = [];

                    $.each(data, function (index, item) {
                        lbl.push(getResponseSeriesValue(item[0]));
                    });

                    if (lbl.length > 15) {
                        lbl = lbl.map(function(val, i) {
                            return  (i % 10 === 0) ? val : '';
                        });
                    }

                    $.each(info_leg, function (ii, ee) {
                        var infp = [];

                        $.each(data, function (index, item) {
                            $.each(info_leg, function (i, e) {
                                if (ee == e) {
                                    infp.push({
                                        meta: e + ' [' + getResponseSeriesValue(item[0]) + ']:',
                                        value: item[i + 1]
                                    });
                                }
                            });
                        });

                        sector.push({
                            name: ee,
                            data: infp
                        })
                    });

                    var chart = new Chartist.Bar('#element{{$widget->id}}', {
                        labels: lbl,
                        series: sector
                    }, {
                        chartPadding: {
                            top: 35,
                            right: 30,
                            bottom: 30,
                            left: 60
                        },
                        axisX: {
                            labelInterpolationFnc: function (value) {
                                return value;
                            }
                        },
                        axisY: {
                            labelInterpolationFnc: function (value) {
                                return value + ' {{$widget->y_suffix}}';
                            },
                            @if($widget->scaling_values=='integer')
                                onlyInteger: true
                            @else
                                onlyInteger: false
                            @endif
                        },
                        plugins: [
                            Chartist.plugins.tooltip(),
                            Chartist.plugins.legend(),
                            Chartist.plugins.ctAxisTitle({
                                axisX: {
                                    @if ($widget->x_name !== null)
                                    axisTitle: '{{ $widget->x_name }}',
                                    @else
                                    axisTitle: ' ',
                                    @endif
                                    axisClass: 'ct-axis-title',
                                    offset: {
                                        x: 0,
                                        y: 50
                                    },
                                    textAnchor: 'middle'
                                },
                                axisY: {
                                    labelInterpolationFnc: function (value) {
                                        return value + ' {{$widget->y_suffix}}';
                                    },
                                    @if($widget->scaling_values=='integer')
                                        onlyInteger: true,
                                    @else
                                        onlyInteger: false,
                                    @endif
                                    @if ($widget->y_name !== null)
                                    axisTitle: '{{ $widget->y_name }}',
                                    @else
                                    axisTitle: ' ',
                                    @endif
                                    axisClass: 'ct-axis-title',
                                    offset: {
                                        x: 0,
                                        y: 0
                                    },
                                    textAnchor: 'middle',
                                    flipTitle: false
                                }
                            })
                        ]
                    });
                } else {
                    displayWidgetNoDataText(
                        "#element{{ $widget->id }}",
                        {{ $widget->use_no_data_text }},
                        "{{ $widget->no_data_text }}"
                    );
                }
            }
        });
    });
</script>