@extends('layouts.app')

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

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100">
                <div class="card-header h2">Linki do quizów online</div>
                <div class="card-body">
                    <p class="my-2">
                        Info: Linki będą pobierane do tabelek prowadzących, która będzie wyświetlała link
                        z najbliższą (przyszłą) datą wydarzenia.
                    </p>
                    <form method="post" class="mb-2 mt-3" action="/quiz-link">
                        @csrf
                        <div class="row d-flex align-items-center">
                            <h3 class="col-sm-2 my-1">Dodaj link:</h3>
                            <label class="col-sm-3 my-1">Link<input required="required" type="text" placeholder="Link" maxlength="100" name="link" class="form-control"></label>
                            <label class="col-sm-3 my-1">Data wydarzenia: <input required="required" type="date" placeholder="Data wydarzenia" name="event_date" class="form-control"></label>
                            <div class="col-sm-3 my-1"><input class="btn btn-success" type="submit" value="Dodaj link"/></div>
                        </div>
                    </form>
                    <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>Link na wydarzenie</th>
                                <th>Data wydarzenia</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>
    </div>
@endsection

@section("style")
    <style scoped>
        .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