@php use Seka\Vzdelavanie\Enums\ModelStatusEnum; @endphp
@extends('Vzdelavanie::layout.integrated')

@section('content')
    @parent
    @isset($kategoria)
        <section class="bg-white space-sm">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-auto">
                        <h1 class="h2 mb-2">{{ $kategoria->nazov }}</h1>
                        <span>Zoznam učebných materiálov kategórie</span>
                    </div>
                    <div class="col-auto">
                        @can('vzdelavanie_kniznica')
                            <a href="{{ route('vzdelavanie.sprava.kniznica.kategoria.ucebnice.create', $kategoria) }}"
                               class="btn btn-primary">
                                <i class="fa fa-plus"></i>
                                Vytvoriť učebný materiál
                            </a>
                        @endcan
                    </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></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 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">
                                                        <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 === ModelStatusEnum::PUBLIKOVANE) 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->longRelativeDiffForHumans() ?? '-' }}</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-dot-3"></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 class="card-footer bg-secondary d-flex justify-content-between align-items-center">
                                    {{ $ucebneMaterialy->onEachSide(5)->links() }}
                                    {{ $ucebneMaterialy->links('partials.pagination.pagination-summary') }}
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="col-12 col-md-3 mb-1 order-md-1">
                        @include('Vzdelavanie::partials.kniznica.kategorie.menu', [compact('kategorie')])
                    </div>
                </div>
            </div>
        </section>
    @endisset
@endsection

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

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