@extends('layouts.app')

@section("scripts")
    <script type="text/javascript" src="{{ asset('js/pq_leagueteams.js?update=1') }}"></script>
@endsection

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Drużyny ligowe</div>
                <div class="card-body">
                    <div class="text-right">
                        <div class="d-inline text-left form-group float-left">
                            <label class="ml-3">
                                Wyszukaj:<br>
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Nazwa drużyny" placeholder="Nazwa drużyny" id="teamName">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Prowadzący" placeholder="Prowadzący" id="quizMaster">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Miasto" placeholder="Miasto" id="city">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Lokal" placeholder="Lokal" id="place">
                                <label>
                                    Drużyny zapisane od<br>
                                    <input class="d-inline w-auto form-control ml-1" type="date" id="dateFrom">
                                </label>
                            </label>
                            <label class="ml-3">
                                Kategoria:
                                <select id="category" class="form-control">
                                    <option selected value=""> Wszystkie</option>
                                    <option value="Open"> Open</option>
                                    <option value="Szóstki"> Szóstki</option>
                                </select>
                            </label>
                            <label class="ml-3">
                                Typ ligi:
                                <select id="league_type" class="form-control">
                                    <option value=""> Wszystkie</option>
                                    <option selected value="NATIONWIDE">Liga ogólnopolska</option>
                                    <option value="UNIVERSITY"> Liga uniwersytecka</option>
                                </select>
                            </label>
                            <label class="ml-3">
                                Sortuj wg:
                                <select id="orderBy" class="form-control">
                                    <option selected value="city"> Miasta</option>
                                    <option value="place"> Lokalu</option>
                                    <option value="name"> Nazwy</option>
                                    <option value="registerDate"> Daty zapisu</option>
                                    <option value="created_at" selected> Daty dodania</option>
                                </select>
                            </label>
                            <label class="ml-3">
                                Sezon:
                                <select id="season" class="form-control">
                                    @for ($year = date('Y'); $year > 2020; $year--)
                                        <option {{ date('Y') == $year ? 'selected' : ''}} value="{{$year}}">{{$year}}/{{$year+1}}</option>
                                    @endfor
                                </select>
                            </label>
                        </div>
                    </div>
                    <div id="tableOverflow" class="text-center w-100 overflow-auto position-relative">
                        <table id="table" class="table table-striped table-sm mt-4">
                            <thead class="thead-dark">
                            <tr>
                                <th>Nazwa drużyny</th>
                                <th data-type="NATIONWIDE">Liczba<br>osób</th>
                                <th data-type="NATIONWIDE">Kategoria</th>
                                <th data-type="UNIVERSITY" style="display:none">Nazwa uczelni</th>
                                <th data-type="UNIVERSITY" style="display:none">Rodzaj uczelni</th>
                                <th>Miasto</th>
                                <th data-type="NATIONWIDE">Lokal</th>
                                <th data-type="NATIONWIDE">Wpisowe <br>[zł]</th>
                                <th>Numer<br>telefonu<br>do lidera</th>
                                <th>Adres e-mail<br>do lidera</th>
                                <th>Data rejestracji</th>
                                <th>Data dodania</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div id="loaderImage" class="lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div class="h5 text-center p-4" id="errorMessage"></div>
                        <div id="leagueTeamResultContainer">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('blocks.quiz.leagueteam_modal')

    </div>
@endsection

@section("style")
    <style scoped>
        .myTable td{
            width: 40px;
        }

        .container {
            max-width: 1500px !important;
        }

        .table {
            vertical-align: middle;
            border-radius: 2px;
            text-align: center;
        }

        #table td {
            transition-duration: 0.3s;
            cursor: pointer;
            vertical-align: middle !important;
        }

        .table thead th {
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 1;
        }

        table tr:hover td{
            background-color: #5ac085;
        }
        .overflow-auto {
            text-align: center;
            max-height: 75vh;
        }


    </style>
@endsection