@extends('layouts.app')

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

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Rozgrywki</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="Miasto"
                                    placeholder="Miasto" id="city">
                                <input class="d-inline w-auto form-control ml-1" type="text" aria-label="Lokal"
                                    placeholder="Lokal" id="place">
                                <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="number" aria-label="Liczba punktów"
                                    placeholder="Liczba punktów" id="points">
                            </label>
                            <br>
                            <label class="ml-3">
                                Quizy rozegrane od<br>
                                <input class="d-inline w-auto form-control ml-1" type="date" id="dateFrom">
                            </label>
                            <label>
                                Quizy rozegrane do<br>
                                <input class="d-inline w-auto form-control ml-1" type="date" id="dateTo">
                            </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="gameDate"> Daty quizu</option>
                                    <option value="created_at" selected> Daty dodania</option>
                                </select>
                            </label>
                            <button id="finalTable" class="btn ml-2 btn-small btn-light">Tabela zbiorcza</button>
                        </div>
                    </div>
                    <div id="tableOverflow" class="w-100 overflow-auto position-relative">
                        <table id="table" class="table table-striped table-sm mt-4">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="finalTable">
                                        <form id="finalTableForm" method="post" action="/summarytable">
                                            @csrf
                                            <input type="hidden" name="ids" value="">
                                            <button class="btn btn-sm btn-success">Pokaż tabelę</button>
                                        </form>
                                    </th>
                                    <th>Miasto</th>
                                    <th>Lokal</th>
                                    <th>Typ gry</th>
                                    <th>Data rozgrywki</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>
                        @include('blocks.quiz.result')

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style scoped>
        .changeTeamNameButton {
            margin-top: 3px;
            float: right;
            background-color: rgb(33, 114, 59);
            color: white;
            border-radius: 4px;
            border: 0;
            padding: 2px 8px;
            display: none;
            font-size: 7.5pt;
            cursor: pointer;
            transition-duration: 0.3s;
        }

        .myTable td {
            width: 40px;
        }

        .tableOvertime {
            width: 71px !important;
        }

        .tablePenalty {
            width: 47px !important;
        }

        .info {
            width: 100%;
            white-space: nowrap;
        }

        .info input {
            width: 200px;
            max-width: 200px;
            height: 31px !important;
            background-color: #eee;
            margin: 15px;
            padding: 2px 5px;
        }

        .close {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 10px;
            padding: 7px;
            cursor: pointer;
        }

        #quizResultContainer {
            position: fixed;
            transition-duration: 0.4s;
            right: 0;
            z-index: 2;
            max-width: 830px;
            overflow: auto;
            background-color: white;
            border-radius: 5px;
            border: 3px solid #5ac085;
            bottom: 0;
            height: 50vh;
            width: 0;
        }

        #showResultHead table td {
            min-width: 40px;
            vertical-align: middle;
        }

        .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;
        }

        .table td form {
            display: table-cell;
            vertical-align: middle;
        }

        .finalTable {
            display: none;
            width: 128px;
        }

        /* The container of checkbox style*/
        .containerCheckbox {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            cursor: pointer;
            font-size: 22px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .containerCheckbox input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 23px;
            width: 23px;
            background-color: #bbb;
        }

        /* On mouse-over, add a grey background color */
        .containerCheckbox:hover input~.checkmark {
            background-color: #999;
        }

        /* When the checkbox is checked, add a blue background */
        .containerCheckbox input:checked~.checkmark {
            background-color: #4CAF50;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .containerCheckbox input:checked~.checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .containerCheckbox .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>
@endsection