<section class="flush-with-above bg-gradient text-white p-0 pb-5">
    <svg class="decorative-divider" preserveAspectRatio="none" viewbox="0 0 100 100">
        <polygon fill="#F8F9FB" points="0 0 0 100 100 0"></polygon>
    </svg>
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-auto">
                <h3 class="h4">Najpopulárnejšie testy</h3>
            </div>
        </div>
        @if($testy->isEmpty())
        <div class="alert alert-primary text-small">
            <i class="icon-info mr-2"></i>
            <span>Zatiaľ nebol vytvorený žiadny test.</span>
        </div>
        @else
        <div class="row feature-list feature-list-sm justify-content-center">
            @foreach($testy as $_test)
            <div class="col-12 col-md-4">
                <div class="card">
                    <div class="card-body text-center">
                        <h4 class="text-truncate">{{ $_test->nazov }}</h4>
                        <p class="text-body text-truncate">{{ $_test->popis }}</p>
                        <hr>
                        <h1 class="display-1">
                            <span class="badge badge-success" id="counter-{{ $_test->hashId() }}">{{ $_test->popularita_count }}</span>
                        </h1>
                        <p class="text-small text-uppercase text-muted">Počet vygenerovaných testov používateľmi</p>
                        @if($_test->popularita_count > 0)
                        @push('scripts')
                        <script type="text/javascript">
                          document.addEventListener('DOMContentLoaded', function () {
                            animateValue('counter-{{ $_test->hashId() }}', 0, {{ $_test->popularita_count }}, 1000)
                          }, false)
                        </script>
                        @endpush
                        @endif
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-primary btn-block" title="Spustiť test" onclick="event.preventDefault();(confirm('Prajete si spustiť test s názvom {{ json_encode($_test->nazov, JSON_ERROR_UTF8) }}?')) ? document.getElementById('generovanie-testu-{{ $_test->hashId() }}-form').submit() : null;">
                            <i class="icon-play"></i>
                            Spustiť nový test
                        </button>
                        <form id="generovanie-testu-{{ $_test->hashId() }}-form" action="{{ route('vzdelavanie.testy.pouzivatela.test.generovanie', $_test) }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div class="row justify-content-center text-center section-outro">
            <div class="col-lg-4 col-md-5">
                <a class="btn btn-outline-light" href="{{ route('vzdelavanie.testy.zoznam') }}">Zobraziť všetky existujúce testy ›</a>
            </div>
        </div>
        @endif
        <div class="row justify-content-center text-center section-outro">
            <div class="col-lg-4 col-md-5">
                <h5>Nenašli ste čo ste hľadali?</h5>
                <p>Neustále sa snažíme rozširovať obsah našeho online vzdelávacieho systému, Vaša spätná väzba je vítaná.</p>
                <a class="btn btn-outline-light" href="mailto:{{ config('vzdelavanie.podpora.email') }}">Kontaktujte nás ›</a>
            </div>
        </div>
    </div>
</section>

@push('scripts')
    <script type="text/javascript">
      function animateValue(id, start, end, duration) {
        const obj = document.getElementById(id)
        const range = end - start
        const minTimer = 50
        let stepTime = Math.abs(Math.floor(duration / range))

        stepTime = Math.max(stepTime, minTimer);

        const startTime = new Date().getTime()
        const endTime = startTime + duration
        let timer

        function run() {
          const now = new Date().getTime()
          const remaining = Math.max((endTime - now) / duration, 0)
          const value = Math.round(end - (remaining * range))
          obj.innerHTML = value;
          if (value === end) {
            clearInterval(timer);
          }
        }

        timer = setInterval(run, stepTime);
        run();
      }
    </script>
@endpush