@if (Request::is('league/*'))
    <div class="d-flex align-items-center justify-content-between menu">
        <img alt="Logo" class="logo" src="{{ asset('images/logo_pq_biale.png') }}">

        <div class="menuTitle">
            {{-- <span class="pqyellow">Liga</span> <span class="pqgreen">{{ $date }}</span> --}}
            {{-- <span data-type="NATIONWIDE" class="pqyellow">Ogólnopolska Liga PubQuiz</span> --}}
            <img style="width: 100%;" data-type="NATIONWIDE" class="pqyellow"
                src="{{ asset('images/logo_liga_default.png') }}">
            <span data-type="UNIVERSITY" class="pqyellow d-none">Liga Uniwersytecka PubQuiz</span>
            {{-- <span class="pqgreen">{{date('Y')}}</span> --}}
        </div>

        <div class="sortContainer">
            <button data-placement="bottom" data-toggle="popover" title="Legenda" data-content=""
                class="btn btn-light mr-2" id="legendBtn">Legenda
            </button>
            <img data-placement="bottom" data-toggle="popover" title="Sortowanie" data-content="" class="sortImg"
                id="sortBtn" alt="Sortuj" src="{{ asset('images/sort.png') }}">
            <div class="d-none">
                @include('partials.quiz_league_popover')
            </div>
        </div>
    </div>
@endif

<div id="leagueTable" class="background container py-4 {{ ($type ?? '') == 'NATIONWIDE_WITHOUT_HOME' ? 'pink-bg' : 'classic-bg' }}">
    <div class="card publicTableBg">
        @if (!Request::is('league/*'))
            <div class="card-header h2">
                <span id="backLeague" class="btn">←</span>
                <span id="season">Tabele ligowe</span>
            </div>
        @endif
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                @if (!Request::is('league/*'))
                    <span>Aktualny czas: {{ date('Y-m-d H:i:s') }}</span>
                    Udostępnij tabelę:
                    <input type="text" class="ml-2 form-control" id="shareTable" readonly value="www.liga.pl"
                        aria-label="share">

                    <div>
                        <button data-placement="bottom" data-toggle="popover" title="Legenda" data-content=""
                            class="btn btn-light mr-2" id="legendBtn">Legenda
                        </button>
                        <button data-placement="bottom" data-toggle="popover" title="Sortowanie" data-content=""
                            class="btn btn-light" id="sortBtn">Sortuj
                        </button>
                        <div>
                            <img data-placement="bottom" data-toggle="popover" title="Ustawienia"
                                data-content="Ustawienia" id="settings" src="{{ asset('images/settings.png') }}"
                                alt="Ustawienia"><br>
                            <span id="views"></span> wyświetleń
                        </div>
                        <div class="d-none">
                            @include('partials.quiz_league_popover')
                        </div>
                    </div>
                @endif
                <div id="tableOverflow" class="text-center mt-3 w-100 overflow-auto position-relative">
                    {{-- @if (Request::is('league/*'))
                        <a href="https://nofluffjobs.com/pl/?utm_source=website&utm_medium=banner&utm_campaign=p-nk&utm_content=pubquiz-liga" target="_blank">
                            <img style="width: 100px;" alt="No Fluff Jobs" src="{{ asset('images/logo_fluff.png') }}">
                        </a>
                    @endif --}}
                    <div class="tableBg">
                        <table class="leagueview" id="tableLeagueteams">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Miejsce</th>
                                    <th style="min-width: 150px;">Nazwa drużyny <span
                                            class="is-small showMore button is-info">Rozwiń
                                            kolumny</span>
                                    </th>
                                    <th data-type="NATIONWIDE" class="hide-without-home hide">Liczba<br>osób</th>
                                    <th data-type="NATIONWIDE" class="hide-without-home hide">Dzień quizu</th>
                                    <th class="hide">Miasto</th>
                                    <th data-type="NATIONWIDE" class="hide-without-home hide">Lokal</th>
                                    <th data-type="NATIONWIDE" class="hide">Kategoria</th>
                                    <th data-type="UNIVERSITY" class="hide">Średnia <br> liczba osób</th>
                                    <th data-type="UNIVERSITY" class="hide">Nazwa uczelni</th>
                                    <th data-type="UNIVERSITY" class="hide">Rodzaj uczelni</th>
                                    <th>Suma Quizów</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <table class="leagueview" id="tableLeaguemain">
                            <thead class="thead-dark"></thead>
                            <tbody></tbody>
                        </table>
                        <table data-type="NATIONWIDE" class="leagueview" id="tableLeagueadditional">
                            <thead class="thead-dark"></thead>
                            <tbody></tbody>
                        </table>
                        <table class="leagueview ml-4" id="tableLeaguetotal">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Suma</th>
                                    <th>Średnia</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                    <div id="tLoaderImage" class="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="h5 text-center p-4" id="tErrorMessage"></div>
                    <div class="h2 text-center p-2" id="closed-view-message"></div>
                    {{-- @if (Request::is('league/*'))
                        <a href="https://lock.me/" target="_blank">
                            <img style="width: 220px;" alt="LockMe Logo" src="{{ asset('images/lockme-logo.png') }}">
                        </a>
                    @endif --}}
                </div>
            </div>
        </div>
    </div>
</div>

@section('style')
    @parent
    <style scoped>
        @media (min-width: 1200px) {
            .container {
                max-width: 90%;
            }
        }

        @media (max-height: 650px) {
            #leagueTable {
                padding-top: 110px !important;
            }
        }

        @media (min-height: 651px) {
            #leagueTable {
                padding-top: 70px !important;
            }
        }

        .is-without-home {
            margin-left: auto !important;
        }

        #tableLeagueadditional td:first-child.is-without-home-td {
            border-color: transparent !important;
            background-color: transparent !important;
        }

        .showOthers {
            cursor: pointer;
        }

        #tLoaderImage {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .leagueview thead th {
            position: sticky;
            top: 0;
            height: 37px;
            z-index: 1;
        }

        .sortImg {
            margin: 5px;
            width: 40px;
            cursor: pointer;
        }

        .showMore {
            position: absolute;
            cursor: pointer;
            margin-top: -40px;
        }

        .hide {
            display: none;
        }

        #backLeague {
            font-size: 20pt;
            margin-top: -10px;
            line-height: 0;
        }

        #shareTable {
            max-width: 280px;
            width: 100%;
        }

        #settings {
            cursor: pointer;
            width: 40px;
        }

        .tableBg {
            overflow: auto;
            position: relative;
            white-space: nowrap;
            height: 71vh;
            background-color: rgba(255, 255, 255, 0);
        }

        .leagueview {
            margin-top: 30px;
            position: relative;
            display: inline-block;
            border-collapse: collapse;
            font-size: 0.65em;
        }

        .leagueview tr:nth-child(even) td {
            background-color: #fcfcfc;
        }

        .leagueview td,
        .leagueview th {
            background-color: #f1f1f1;
            padding: 4px;
            border: 0.5px solid #aaa;
        }

        #tableLeagueadditional {
            margin-left: 50px;
        }

        #tableLeaguemain {
            margin-left: 15px;
        }


        #tableLeagueadditional td:last-child {
            border: 0.5px solid rgba(0, 0, 0, 0);
            background-color: rgba(0, 0, 0, 0);
        }

        #tableLeagueadditional td:first-child {
            border: 0.5px solid #aaa !important;
            background-color: #f1f1f1;
        }

        #tableLeaguemain tr:not(:first-child) td,
        #tableLeagueadditional tr:not(:first-child) td {
            cursor: pointer;
        }

        .toomanypeople {
            background-color: rgba(255, 0, 0, 0.6) !important;
            color: rgba(0, 0, 0, 0.65);
        }

        .notclassified {
            color: #ff0000;
            font-weight: 900;
            right: -35px;
            position: absolute;
            padding-right: 3px;
        }

        .notimportant {
            background-color: rgba(0, 128, 255, 0.7) !important;
            color: rgba(0, 0, 0, 0.22);
        }

        .toomanygames {
            background-color: rgba(255, 204, 0, 0.7) !important;
            color: rgba(0, 0, 0, 0.22);
        }

        .emptygame {
            background-color: #444 !important;
            color: #00000000;
        }

        .showOthers {
            left: 2px;
            right: 2px;
            top: 2px;
            bottom: 2px;
            width: 21px;
            position: absolute;
        }

        .tableTitle {
            position: absolute;
            left: -20px;
            margin-top: -40px;
            font-size: 1.3em;
        }

        .hideRow td {
            color: #777;
            background-color: #ff000044;
        }

        /* Podstawowy styl przycisku */
        .button {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            user-select: none;

            height: 2.5em;
            padding: 0 1em;
            border: 1px solid transparent;
            border-radius: 4px;

            background-color: #fff;
            color: #363636;

            font-size: 1rem;
            line-height: 1.5;
            white-space: nowrap;
            cursor: pointer;
            vertical-align: top;
        }

        .button:hover {
            background-color: #f5f5f5;
            border-color: #b5b5b5;
        }

        .button:focus:not(:active) {
            box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
        }

        .button:active {
            background-color: #e8e8e8;
        }

        /* ---------------------- */
        /*       is-info          */
        /* ---------------------- */

        .button.is-info {
            background-color: #3e8ed0;
            color: #fff;
        }

        .button.is-info:hover {
            background-color: #3488ce;
        }

        .button.is-info:focus:not(:active) {
            box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25);
        }

        .button.is-info:active {
            background-color: #2f81c5;
        }

        /* outlined */
        .button.is-info.is-outlined {
            background-color: transparent;
            border-color: #3e8ed0;
            color: #3e8ed0;
        }

        .button.is-info.is-outlined:hover {
            background-color: #3e8ed0;
            color: #fff;
        }

        /* light */
        .button.is-info.is-light {
            background-color: #eff5fb;
            color: #3e8ed0;
        }

        /* disabled */
        .button.is-info[disabled],
        .button.is-info.is-disabled {
            opacity: 0.5;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* ---------------------- */
        /*        is-small        */
        /* ---------------------- */

        .button.is-small {
            font-size: 0.75rem;
            height: 2em;
            padding: 0 0.75em;
            border-radius: 3px;
        }
    </style>
@endsection