@push('page-js')
    <script>
        const mainGraph_{{ $graphId }} = makeEpsRankingGraph(`{!! $type !!}`, `eps-chart-{!! $graphId !!}`, @json($content), @json($labels));

        $(document).ready(function () {
            let btnIndicators = $('input[name="indicator-radio_{{ $graphId }}"]');
            btnIndicators.on('change', function () {
                let _this = $(this), chart = mainGraph_{{ $graphId }};
                chart.data.datasets = makeDataset(_this.data('graph-type'), @json($content), _this.data('filter'));

                chart.options.tooltips.callbacks.label = (tooltipItem, data) => {
                    let label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;

                    return `${label}${_this.data('filter').toUpperCase() !== 'TMA' ? '%' : ''}`;
                };

                chart.options.scales.yAxes[0].ticks.callback = (label, index, labels) => {
                    if (_this.data('filter').toUpperCase() === 'TMA') {
                        return label;
                    }

                    return number_formatter(label) + '%';
                };

                chart.update();
            });

            // Para pegar o 1º gráfico correto, do primeiro indicador (Nível de Serviço)
            $(btnIndicators[0]).trigger('change');
        });
    </script>
@endpush
@if($ajax)
    <script>
        $(document).ready(function () {
            const mainGraph_{{ $graphId }} = makeEpsRankingGraph(`{!! $type !!}`, `eps-chart-{!! $graphId !!}`, @json($content), @json($labels));
            $(document).ready(function () {
                let btnIndicators = $('input[name="indicator-radio_{{ $graphId }}"]');
                btnIndicators.on('change', function () {
                    let _this = $(this), chart = mainGraph_{{ $graphId }};
                    chart.data.datasets = makeDataset(_this.data('graph-type'), @json($content), _this.data('filter'));

                    chart.options.tooltips.callbacks.label = (tooltipItem, data) => {
                        let label = data.datasets[tooltipItem.datasetIndex].label || '';

                        if (label) {
                            label += ': ';
                        }
                        label += Math.round(tooltipItem.yLabel * 100) / 100;

                        return `${label}${_this.data('filter').toUpperCase() !== 'TMA' ? '%' : ''}`;
                    };

                    chart.options.scales.yAxes[0].ticks.callback = (label, index, labels) => {
                        return `${label}${_this.data('filter').toUpperCase() !== 'TMA' ? '%' : ''}`;
                    };

                    chart.update();
                });

                // Para pegar o 1º gráfico correto, do primeiro indicador (Nível de Serviço)
                $(btnIndicators[0]).trigger('change');
            });
        });
    </script>
@endif
<div class="row">
    <div class="col-3">
        <div class="btn-group-toggle" data-toggle="buttons">
            @foreach($indicators as $indicatorIndex => $indicator)
                <label class="btn btn-secondary btn-lg btn-block {{ $loop->first ? 'active' : '' }}"
                       style="cursor: pointer;">
                    <input type="radio" name="indicator-radio_{{ $graphId }}" data-filter="{{ $indicatorIndex }}"
                           data-graph-type="{{ $type }}" id="indicator-btn-radio-{{ $loop->iteration }}"
                           checked="{{ $loop->first ? 'checked' : '' }}" style="cursor: pointer;">
                    {{ $indicator['name'] }}
                    <div class="row m-t-5">
                        <div class="col-6" style="padding-left: 10px;padding-right: 0;">
                            @if(count($content) > 0)
                                <div class="font-12 text-left">
                                    Meta:
                                    {{ str_replace(',00', '', number_format($indicator['target'], 2, ',', '.')) . ($indicator['percentage'] ? '%' : '') }}
                                </div>
                                <div class="font-12 text-left">
                                    BMG:
                                    {{ str_replace(',00', '', number_format($indicator['real'], 2, ',', '.')) . ($indicator['percentage'] ? '%' : '') }}
                                    @if($indicator['asc'])
                                        @if($indicator['real'] >= $indicator['target'])
                                            <i class="fa fa-arrow-up text-success"></i>
                                        @else
                                            <i class="fa fa-arrow-down text-danger"></i>
                                        @endif
                                    @else
                                        @if($indicator['real'] >= $indicator['target'])
                                            <i class="fa fa-arrow-down text-danger"></i>
                                        @else
                                            <i class="fa fa-arrow-up text-success"></i>
                                        @endif
                                    @endif
                                </div>
                            @endif
                        </div>
                        <div class="col-6" style="padding-left: 0;padding-right: 10px;">
                            @foreach($indicator['realByCallcenter'] as $callcenter => $real)
                                <div class="font-12 text-left">
                                    {{ $callcenter }}:
                                    {{ str_replace(',00', '', number_format($real, 2, ',', '.')) . ($indicator['percentage'] ? '%' : '') }}
                                    @if($indicator['asc'])
                                        @if($indicator['real'] >= $indicator['target'])
                                            <i class="fa fa-arrow-up text-success"></i>
                                        @else
                                            <i class="fa fa-arrow-down text-danger"></i>
                                        @endif
                                    @else
                                        @if($indicator['real'] >= $indicator['target'])
                                            <i class="fa fa-arrow-down text-danger"></i>
                                        @else
                                            <i class="fa fa-arrow-up text-success"></i>
                                        @endif
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </label>
            @endforeach
        </div>
    </div>
    <div class="{{ count($indicators) > 0 ? 'col-9' : 'col-12' }}">
        <canvas id="eps-chart-{{ $graphId }}" height="{{ count($indicators) > 0 ? '140' : '110' }}"></canvas>
    </div>
</div>