@extends('layouts.app')

@section('content')
    <div class="menu">
        <a
            @auth
            href="/pubquiz">
            <span class="ml-4 pt-3 h2 float-left text-dark text-decoration-none">&larr;</span>
            @else
                >
            @endauth
            <img alt="Logo" class="logo" src="{{ asset("images/pq_logo.png") }}">
        </a>
        <div class="d-inline-block float-left mt-3 ml-4">
            <button id="all" class="btn btn-dark">Wszystkie</button>
            <button id="szostki" class="btn btn-light">Szóstki</button>
            <button id="open" class="btn btn-light">Open</button>
        </div>
        <div
            style="text-align: center; padding-right: 22%; line-height:2.4em; font-size: 2em; font-weight: 700;">
            <span class="pqyellow">Finał ligi</span> <span
                class="pqgreen">{{ date("Y")-1 }}/{{ date("Y") }}</span>
        </div>
    </div>
    <div class="background">

        <img alt="Logo" style="height: 170px; max-width: 100vw; position: absolute; "
        src="{{ asset("images/pq_logo.png") }}">
        <div class="tableBg">
            <div id="loaderImage" class="mt-5 lds-ring">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div id="error" class="mt-5 h4"></div>
            <div class="tableOverflow">
                <table class="leagueview table table-striped" id="tableLeagueteams"></table>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <style type="text/css">
        .menu {
            background-color: white;
            border-bottom: 3px solid #d0d0d0;
            min-height: 65px;
            z-index: 3;
            text-align: center;
        }

        .logo {
            height: 55px;
            float: left;
        }

        .background {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 91vh;
            background-color: #1b5b2a;
            background-image: linear-gradient(to top left, #ebb60c 50%, transparent 50.4%);
        }

        .pqyellow {
            color: #ebb60c;
        }

        .pqgreen {
            color: #1b5b2a;
        }

        .tableBg {
            text-align: center;
            padding: 20px;
            overflow: auto;
            position: relative;
            border-radius: 5px;
            white-space: nowrap;
            background-color: rgba(255, 255, 255, 0.55);
        }

        .tableOverflow {
            width: 90vw;
            height: 82vh;
            overflow: auto;
        }

        .leagueview {
            border-radius: 10px;
            cursor: default;
            box-shadow: 0 0 6px #333;
            border-spacing: 0;
        }

        .leagueview thead th {
            z-index: 2;
            vertical-align: middle;
            position: sticky;
            top: 0;
        }

        .leagueview select {
            background: rgba(0, 0, 0, 0);
            border: 0;
        }

        .leagueview tr:nth-child(even) td {
            background-color: rgba(252, 252, 252, 0.80);
        }

        .leagueview td, .leagueview th {
            background-color: rgba(241, 241, 241, 0.80);
            padding: 4px;
            border: 0.5px solid #aaa;
        }
    </style>
@endsection

@section('scripts')
    <script type="text/javascript">
        $(function () {
            const imgLoader = $("#loaderImage");
            const errorMessage = $("#error");
            const table = $("#tableLeagueteams");
            const szostki = $("#szostki");
            const open = $("#open");
            const all = $("#all");
            getQuizs();

            szostki.on("click", function () {
                changeVisible("Szóstki")
            });

            open.on("click", function () {
                changeVisible("Open")
            });

            all.on("click", function () {
                changeVisible("all");
            });

            function changeVisible(category) {
                $("#szostki, #all, #open").removeClass("btn-dark").addClass("btn-light");
                let place = 1;
                let button;
                if (category === "Szóstki") {
                    button = szostki;
                } else if (category === "Open")
                    button = open;
                else
                    button = all;

                button.removeClass("btn-light").addClass("btn-dark");

                $('select[name="category"]').each(function () {
                    const tr = $(this).closest("tr");
                    if ($(this).val() === category || category === "all") {
                        tr.show();
                        const td = tr.children("td:first-child");
                        td.html(place++);
                    } else {
                        tr.hide();
                    }
                });
            }

            function getQuizs() {
                const summaryID = "{{ $id }}";

                $.ajax({
                    method: 'GET',
                    url: '/summaryresults',
                    data: {
                        summaryID: summaryID
                    },
                    beforeSend: function () {
                        imgLoader.show();
                        errorMessage.hide();
                    },
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    dataType: 'json',
                    success: function (response) {
                        let index = 1;
                        let newArr = [];
                        let correctDogrywka = 0;
                        $.each(response, function (key, quiz) {
                            if (index === 1) {
                                table.html(`<thead class='thead-dark'>
                            <tr>
                                <th>Miejsce</th>
                                <th>Nazwa drużyny</th>
                                <th>Liczba osób</th>
                                <th>Kategoria</th>
                                <th>Kat I</th>
                                <th>Kat II</th>
                                <th>Kat III</th>
                                <th>Kat IV</th>
                                <th>Kat V</th>
                                <th>Kat VI</th>
                                <th>Kat VII</th>
                                <th>Kat VIII</th>
                                <th>Kat IX</th>
                                <th>Kat X</th>
                                <th>Kat XI</th>
                                <th>Kat XII</th>
                                <th>Suma</th>
                                <th>Dogrywka <br> ${quiz.overtime ? quiz.overtime : ""}</th>
                            </tr></thead>
                        `);
                                correctDogrywka = quiz.overtime;
                            }
                            newArr = newArr.concat(quiz.game_results);
                        });

                        newArr.sort(sortFunction);

                        function sortFunction(a, b) {
                            a['overtime'] = a['overtime'] === null && correctDogrywka != null ? 0 : a['overtime'];
                            b['overtime'] = b['overtime'] === null && correctDogrywka != null ? 0 : b['overtime'];

                            if (a["totalPoints"] === b["totalPoints"]) {
                                const diff1 = Math.abs(correctDogrywka - a["overtime"]);
                                const diff2 = Math.abs(correctDogrywka - b["overtime"]);
                                return (diff1 < diff2) ? -1 : 1;
                            } else {
                                return (a["totalPoints"] > b["totalPoints"]) ? -1 : 1;
                            }
                        }

                        $.each(newArr, function (key, team) {
                            const html = quizTemplate(team, index++);
                            table.append($.parseHTML(html));
                        });

                        $(".Open").hide();
                    },
                    error: function () {
                        errorMessage.html("Wystąpił błąd, spróbuj ponownie").show();
                    },
                    complete: function () {
                        imgLoader.hide();
                    }
                });
            }

            const quizTemplate = (quiz, index) => {
                return `<tr>
                            <td>${index}</td>
                            <td>${quiz.name}</td>
                            <td>${quiz.numberOfPeople}</td>
                            <td><select name='category'>
                                <option> </option>
                                <option ${quiz.category === 'Szóstki' ? 'selected' : ''}>Szóstki</option>
                                <option ${quiz.category === 'Open' ? 'selected' : ''}>Open</option>
                            </select></td>
                            <td>${quiz['catI'] ? quiz['catI'] : 0}</td>
                            <td>${quiz['catII'] ? quiz['catII'] : 0}</td>
                            <td>${quiz['catIII'] ? quiz['catIII'] : 0}</td>
                            <td>${quiz['catIV'] ? quiz['catIV'] : 0}</td>
                            <td>${quiz['catV'] ? quiz['catV'] : 0}</td>
                            <td>${quiz['catVI'] ? quiz['catVI'] : 0}</td>
                            <td>${quiz['catVII'] ? quiz['catVII'] : 0}</td>
                            <td>${quiz['catVIII'] ? quiz['catVIII'] : 0}</td>
                            <td>${quiz['catIX'] ? quiz['catIX'] : 0}</td>
                            <td>${quiz['catX'] ? quiz['catX'] : 0}</td>
                            <td>${quiz['catXI'] ? quiz['catXI'] : 0}</td>
                            <td>${quiz['catXII'] ? quiz['catXII'] : 0}</td>
                            <td>${quiz['totalPoints']}</td>
                            <td>${quiz['overtime'] !== null ? quiz['overtime'] : ""}</td>
                        </tr>`;
            }
        });
    </script>
@endsection