@extends('Vzdelavanie::layout.integrated')

@section('content')
    @parent
    @isset($kategoria)
        <section class="bg-white space-sm">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col">
                        <h1 class="h2 mb-2">{{ $kategoria->nazov }}</h1>
                        <span>Zoznam učebných materiálov kategórie</span>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-9 mb-1 order-md-2">
                        @if(count($kategoria->ucebnice) === 0)
                        <div class="row justify-content-center">
                            <div class="col-12 col-md-8">
                                <div class="card card-lg text-center">
                                    <div class="card-body">
                                        <i class="fa fa-list-alt fa-8x opacity-20 p-2"></i>
                                        <h1 class="h5">Nie je vytvorený žiadny učebný materiál</h1>
                                        @can('vzdelavanie_kniznica')
                                        <p>Ak si želáte vytvoriť nový učebný materiál pre aktuálnu kategóriu, použite nižšie umiestnené tlačidlo.</p>
                                        <a href="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.create', $kategoria) }}" class="btn btn-lg btn-outline-success">Vytvoriť učebný materiál</a>
                                        @endcan
                                    </div>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="card card-sm shadow">
                            <script type="application/javascript">
                              function updateQueryStringParameter(key, value) {
                                let uri = window.location.search;
                                let separator;
                                let re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");

                                if(value === undefined) {
                                  if (uri.match(re)) {
                                    uri = uri.replace(re, '$1$2');
                                  }
                                } else {
                                  if (uri.match(re)) {
                                    uri = uri.replace(re, '$1' + key + "=" + value + '$2');
                                  } else {
                                    var hash =  '';
                                    if(uri.indexOf('#') !== -1){
                                      hash = uri.replace(/.*#/, '#');
                                      uri = uri.replace(/#.*/, '');
                                    }
                                    separator = uri.indexOf('?') !== -1 ? "&" : "?";
                                    uri = uri + separator + key + "=" + value + hash;
                                  }
                                }

                                window.location.search = uri;
                              }
                            </script>
                            <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="text-muted text-small">Výsledky {{ ($ucebneMaterialy->currentPage() * $ucebneMaterialy->perPage()) - $ucebneMaterialy->perPage() + 1 }} - @if($ucebneMaterialy->total() > ($ucebneMaterialy->currentPage() * $ucebneMaterialy->perPage())) {{ $ucebneMaterialy->currentPage() * $ucebneMaterialy->perPage() }} @else {{ $ucebneMaterialy->total() }} @endif z {{ $ucebneMaterialy->total() }}</span>
                                </div>
                                <form class="d-flex align-items-center" id="searchForm" action="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.filter', $kategoria) }}" method="get">
                                    <span class="mr-2 text-muted text-small text-nowrap">Zoradiť podľa:</span>
                                    <select class="custom-select" id="sort" onchange="updateQueryStringParameter('sort', document.getElementById('sort').value)">
                                        <option value="nazov" @if (request('sort') == 'nazov') selected="" @endif>Abecedne A-Z</option>
                                        <option value="-nazov" @if (request('sort') == '-nazov') selected="" @endif>Abecedne Z-A</option>
                                        <option value="-updated_at" @if (request('sort') == '-updated_at') selected="" @endif>Novšie</option>
                                        <option value="updated_at" @if (request('sort') == 'updated_at') selected="" @endif>Staršie</option>
                                    </select>
                                </form>
                            </div>
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                    <tr>
                                        <th scope="col">Názov</th>
                                        @can('vzdelavanie_kniznica')
                                        <th scope="col" class="text-center">Zverejnené</th>
                                        @endcan
                                        <th scope="col" class="text-center">Autor</th>
                                        <th scope="col" class="text-center">Posledná zmena</th>
                                        @can('vzdelavanie_kniznica')
                                        <th scope="col" class="text-center">Akcie</th>
                                        @endcan
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($ucebneMaterialy as $_ucebnica)
                                        <tr class="text-small @if(session('oznacZmenu') && session('oznacZmenu') == $_ucebnica->getKey()) notification-animation @endif">
                                            <td scope="row" class="w-auto">
                                                <a href="{{ route('vzdelavanie.kniznica.ucebnica.show', $_ucebnica) }}" @can('vzdelavanie_kniznica') target="_blank" @endcan class="align-items-center d-inline text-truncate">
                                                    <i class="fa fa-book text-muted mr-1"></i>
                                                    <span class="text-body text-uppercase">{{ $_ucebnica->nazov }}</span>
                                                </a>
                                            </td>
                                            @can('vzdelavanie_kniznica')
                                            <td class="text-center">
                                                <i class="fa fa-2x @if($_ucebnica->stav->isPublikovane()) fa-eye text-primary @else fa-eye-slash text-danger @endif"></i>
                                            </td>
                                            @endcan
                                            <td class="text-center">
                                                <span class="text-truncate">{{ $_ucebnica->autor }}</span>
                                            </td>
                                            <td class="text-center" title="{{ $_ucebnica->updated_at->format('d.m.Y') }}">{{ $_ucebnica->updated_at->diffForHumans() ?? '-' }}</td>
                                            @can('vzdelavanie_kniznica')
                                            <td class="text-center">
                                                <div class="dropdown">
                                                    <div class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-no-arrow" id="SidekickButton" data-toggle="dropdown">
                                                        <i class="icon-dots-three-horizontal"></i>
                                                    </div>
                                                    <div class="dropdown-menu dropdown-menu-sm" aria-labelledby="SidekickButton">
                                                        <a class="dropdown-item" href="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.edit', [$kategoria,  $_ucebnica]) }}">
                                                            <i class="fa fa-pen"></i> Upraviť
                                                        </a>
                                                        <a class="dropdown-item" href="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.destroy', [$kategoria,  $_ucebnica]) }}" onclick="event.preventDefault();confirm('Prajete si odstrániť učebný materiál?') ? document.getElementById('form-delete-{{ $_ucebnica->hashId() }}').submit() : null;">
                                                            <i class="fa fa-trash-alt"></i> Odstrániť
                                                        </a>
                                                        <form id="form-delete-{{ $_ucebnica->hashId() }}" action="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.destroy', [$kategoria,  $_ucebnica]) }}" method="post" class="d-inline d-inline-flex" style="display: none !important;">
                                                            @method('delete')
                                                            @csrf
                                                        </form>
                                                    </div>
                                                </div>
                                            </td>
                                            @endcan
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center">
                            <nav aria-label="Page navigation">
                                {{ $ucebneMaterialy->links() }}
                            </nav>
                        </div>
                        @endif
                    </div>
                    <div class="col-12 col-md-3 mb-1 order-md-1">
                        @can('vzdelavanie_kniznica')
                        @include('Vzdelavanie::partials.kniznica.kategorie.menu', [compact('kategorie')])
                        <a href="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.create', $kategoria) }}" class="btn btn-block btn-outline-success">
                            <i class="fa fa-plus"></i>
                            Vytvoriť učebný materiál
                        </a>
                        @else
                        @include('Vzdelavanie::partials.kniznica.kategorie.menu', [compact('kategorie')])
                        @endcan
                    </div>
                </div>
            </div>
        </section>
    @endisset
@endsection

@push('styles')
<style type="text/css">
    .notification-animation {
        background-color: transparent;
        animation: blinker 1.5s ease-in-out 2;
    }

    @keyframes blinker {
        50% {
            background-color: lightgreen;
        }
    }
</style>
@endpush