@extends('blocks.modal', ['modalName' => "event-results-modal"])

@section('modal-header')
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" style="text-align: center;">
            <h4 id="add-event-header" class="mdl-color-text--indigo">Wyniki</h4>
        </div>
    </div>
@overwrite

@section('modal-content')
    <div class="mdl-grid">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col" style="text-align: center;">
                <h4 id="event-results-event-header" class="mdl-color-text--indigo" style="display: none;"></h4>
            </div>
        </div>

        <table class="mdl-cell mdl-cell--12-col" id="results-table" style="display: none;">
            <thead>
            <tr>
                <td>Nazwa drużyny</td>
                <td>env(</td>
                <td>Kat I</td>
                <td>Kat II</td>
                <td>Kat III</td>
                <td>Kat IV</td>
                <td>Kat V</td>
                <td>Kat VI</td>
                <td>Kat VII</td>
                <td>Kat VIII</td>
                <td>Kat IX</td>
                <td>Dogrywka</td>
                <td>Karne</td>
                <td>Suma pkt.</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>


        <div class="mdl-cell mdl-cell--12-col" style="text-align: center; display: none;" id="no-data-wrapper">
            <span class="mdl-color-text--indigo">Brak danych</span>
        </div>

        <div class="mdl-cell mdl-cell--12-col" style="text-align: center" id="event-results-loading">
            <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
        </div>
    </div>
@overwrite

@section('modal-footer')
@overwrite

@section('modal-scripts')
    <style>
        #event-results-modal .modal-dialog { width: fit-content; min-width: 300px;     max-width: 1000px; }
        #event-results-modal .modal-footer { display: none; }

        #event-results-modal .modal-body {
            max-height: 450px;
            overflow: auto;
        }

        #results-table thead { font-weight: 700; }

        table#results-table {
            width: 100%;
            margin-top: 20px;
            text-align: center;
        }
        table#results-table,
        #results-table td,
        #results-table tr,
        #results-table th {
            border-collapse: collapse;
            border: 1px solid rgba(0,0,0,0.6);
        }

        #results-table td,
        #results-table th { padding: 10px 5px; }
    </style>
    <script>
        var rowsGroup = $('#results-table tbody');
        var html = '';
        var test;

        function addDataRow(data) {
            html = "<tr>" +
                "<td>" + data.nazwa_druzyny + "</td>" +
                "<td>" + data.liczba_osob + "</td>" +
                "<td>" + data['kat I'] + "</td>" +
                "<td>" + data['kat II'] + "</td>" +
                "<td>" + data['kat III'] + "</td>" +
                "<td>" + data['kat IV'] + "</td>" +
                "<td>" + data['kat V'] + "</td>" +
                "<td>" + data['kat VI'] + "</td>" +
                "<td>" + data['kat VII'] + "</td>" +
                "<td>" + data['kat VIII'] + "</td>" +
                "<td>" + data['kat IX'] + "</td>" +
                "<td>" + (data.dogrywka === 0 ? '-' : data.dogrywka) + "</td>" +
                "<td>" + (data.karne ? data.karne : '-') + "</td>" +
                "<td>" + data.suma_pkt + "</td>" +
                "</tr>'";
            rowsGroup.append(html);
        }

        function showTable(mode) {
            $('#results-table').toggle(mode);
            $('#event-results-event-header').toggle(mode);
            $('#no-data-wrapper').toggle(!mode);
        }

        function showEventResults(data, callback) {
            $('#event-results-loading').show();
            console.log(data);
            var params = $.param({
                'datetime': data.datetime,
                'place_name': data.place_name,
                'city_name': data.city_name
            });
            $('#event-results-event-header').html(data.title).hide();
            $('#results-table').hide();
            rowsGroup.html('');

            $.get("/api/events/results?" + params, function (data) {
                $('#event-results-loading').hide();
                if (data.results.length) {
                    showTable(true);
                    $.each(data.results, function(index, data) {
                        addDataRow(data);
                    });
                } else {
                    showTable(false);
                }
            });

            $('#event-results-modal').modal();
        }
    </script>
@overwrite