@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($zoznamPouzivatelov 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