@extends('layouts.app')

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

@section('content')
    <div class="container py-4" id="leagueContainer">
        <div class="card">
            <div class="card-header h2">Tabele ligowe</div>
            <div class="card-body">
                <button id="addLeagueButton" class="btn btn-success">Dodaj nową tabelę</button>

                <div id="tableOverflow" class="text-center mt-2 w-100 overflow-auto position-relative">
                    <table id="table" class="table table-striped table-sm mt-4">
                        <thead class="thead-dark">
                        <tr>
                            <th>Sezon</th>
                            <th>Opis</th>
                            <th>Start ligii</th>
                            <th>Koniec ligii</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>
            </div>
        </div>
    </div>
    @include('blocks.quiz.league_add_modal')
    @include('blocks.quiz.league_table')

    {{--    Okna do obsługi tabeli ligowej--}}
    @include('blocks.quiz.league_othersQuiz_modal')
    @include('blocks.quiz.league_moveQuiz_modal')
    @include('blocks.quiz.league_editLeague_modal')
@endsection

@section('style')
    <style type="text/css">
        .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;
        }
    </style>
@endsection