@extends('Vzdelavanie::pages.testovanie.historia.layout')

@section('historia_testov_pouzivatela_subtitle')
    <span>Grafické znázornenie výsledku vyhodnotených testov</span>
@endsection

@section('historia_testov_pouzivatela_graf')
    @parent
    <div class="row">
        <div class="col-12">
            <div class="alert alert-primary text-small">
                <i class="icon-info mr-2"></i>
                <span>Zobrazuje sa maximálne <b>posledných 50 vyhodnotených</b> testov.</span>
            </div>
        </div>
    </div>
    <div class="card card-sm shadow">
        <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
            <div>
                <h6>Úspešnosť riešenia testov graficky</h6>
            </div>
            @hasrole('spravca_pek')
            <form class="d-flex align-items-center">
                <span class="mr-2 text-muted text-small text-nowrap">Používateľ:</span>
                <select class="custom-select mr-2" id="chartUser" autocomplete="off">
                    @foreach($zoznamPouzivatelovPek as $pouzivatel)
                        <option value="{{ $pouzivatel->hashId() }}"
                                @if($pouzivatel->id == auth()->id()) selected="selected" @endif>{{ $pouzivatel->cele_meno }}</option>
                    @endforeach
                </select>
            </form>
            @endhasrole
        </div>
        <div id="chart" class="mt-1" style="height: 300px;"></div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    <script src="{{ mix('/js/echarts/echarts.min.js', '/vendor/seka/vzdelavanie') }}"></script>
    <script src="{{ mix('/js/chartisan/chartisan_echarts.js', '/vendor/seka/vzdelavanie') }}"></script>

    <script type="application/javascript">
        let urlParams = {
            pouzivatelId: '{!! \Elceka\Laravel\HashId\Hasher::encode(auth()->id()) !!}'
        }

        const url = function () {
            return "@chart('vzdelavanie_testy_uspesnost_riesenia_na_pek')" + '?pouzivatel_id=' + urlParams.pouzivatelId
        }

        const hooks = new ChartisanHooks()
            .datasets(['bar', 'bar', {type: 'line', fill: false}])
            .colors([
                '#02b875',
                '#d9534f',
                '#4582ec'
            ])
            .legend({
                position: 'bottom',
            })
            .tooltip(true);

        const chart = new Chartisan({
            el: '#chart',
            url: "@chart('vzdelavanie_testy_uspesnost_riesenia_na_pek')",
            loader: {
                color: '#333',
                size: [30, 30],
                type: 'bar',
                textColor: '#333',
                text: 'Získavajú sa údaje...',
            },
            error: {
                color: '#f33',
                size: [30, 30],
                text: 'Vyskytla sa chyba...',
                textColor: '#f33',
                type: 'general',
                debug: false,
            },
            type: 'line',
            hooks
        })

        @hasrole('spravca_pek')
        const selectUser = document.getElementById('chartUser');
        selectUser.addEventListener('change', function (event) {
            urlParams.pouzivatelId = event.target.value
            chart.update({
                url: url()
            })
        })
        @endhasrole
    </script>
@endpush