@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card w-100 pb-5">
                <div class="card-header h2">Nowy test</div>
                <div class="card-body overflow-auto pb-5">
                    <div class="testMenu d-flex flex-wrap justify-content-center mb-5">
                        <label id="addTestView" class="btn btn-dark my-2">
                            Dodaj test
                            <input type="radio" value="addNew" name="testMenu">
                        </label>
                        <label class="btn btn-light my-2">
                            Wszystkie testy
                            <input type="radio" value="allTests" name="testMenu">
                        </label>
                    </div>

                    <div class="choosen addNew">
                        <form id="test_form" class="mt-5 px-2" method="POST" action="{{ route('new_fam_test') }}">
                            @csrf
                            <input type="hidden" id="test_id" name="id" value="0">
                            <div class="d-flex flex-wrap justify-content-around align-items-center">
                                <div class="mt-3">
                                    <span>Kod do gry:</span>
                                    <input title="Dozwolone są znaki od A do Z oraz cyfry" pattern="^[A-Za-z0-9]*$" type="text" name="code" placeholder="Kod" required class="form-control" aria-label="Tytuł">
                                </div>
                                <div style="min-width: 100px;" class="ml-2 mt-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="active" class="custom-control-input" id="ch1">
                                        <label class="custom-control-label mt-2" for="ch1">
                                            Udostępnij do gry
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <hr class="mt-2 mb-5"/>

                            {{-- question block will be pushed here--}}

                            <div class="p-4 pr-5 text-right fixed-bottom">
                                    <span class="error" style="font-size: 1.2em;"></span>
                                    <div id="testSaveLoader" class="float-right lds-ring">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                <button class="addQuestion mx-4 btn btn-primary">Dodaj pytanie</button>
                                <input type="submit" value="Zapisz test" class="mx-4 btn btn-success">
                            </div>
                        </form>
                    </div>

                    <div class="choosen allTests text-center">
                        <table id="tests" class="table text-center table-striped w-100">
                            <thead class="thead-dark">
                            <tr>
                                <th class="w-50">Kod</th>
                                <th>Stworzony</th>
                                <th>Aktywny</th>
                                <th style="width:100px;"></th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div id="testsLoader" class="mt-5 lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

@section('style')
    <style>
        /*
            #135589 - granatowy
            #ffe44d - zółty
        */
        @media (max-width: 1000px) {
            .closeAns {
                width: 95% !important;
                max-width: 500px;
            }

            .close-question {
                justify-content: center !important;
            }
        }

        @media (max-width: 400px) {
            .question-txt {
                margin-left: 1em !important;
            }

            .allAnswers {
                flex: none;
            }
        }

        .fixed-bottom{
            background-color: white;
            border-top: 6px solid #1b4b72aa;
        }

        .closeTitle{
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1em;
        }
        .openTitle{
            font-size: 1.15em;
        }
        .notMoveContainer .move {
            display: none;
        }

        .moveContainer .notmove {
            display: none;
        }

        .move-icon {
            width: 22px;
            cursor: pointer;
            margin-right: 4px;
        }

        .open-question {
            max-width: 500px;
            display: none;
        }

        .close-question {
            display: flex;
        }

        .closeAns {
            min-width: 49%;
        }

        .okSign{
            color: #2fa360;
            font-size: 1.5em;
        }
        .notOkSign{
            color: #e42026;
            font-size: 1.5em;
        }

        .question {
            border: 1px solid #999;
            padding: 1em;
            margin: 2em 0;
            border-radius: 10px;
            border-left: 8px solid #135589;
        }

        .question-txt {
            width: 70%;
            margin-left: 5em;
            height: 65px !important;
        }

        .info {
            background-color: #999;
            color: white;
            width: 24px;
            font-size: 1.2em;
            font-weight: bold;
            line-height: 0.9em;
            height: 24px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            padding: 4px;
            border-radius: 100%;
            margin-left: 0.8em;
        }

        .photoContainer {
            margin: 0 auto;
            display: table;
        }

        .photo {
            max-height: 210px;
        }

        .trash-container {
            opacity: 0;
            -webkit-transition: opacity 500ms, visibility 500ms;
            transition: opacity 500ms, visibility 500ms;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            z-index: 1;
            max-height: 210px;
            background-color: rgba(255, 255, 255, 0.45);
            transition-duration: 0.33s;
        }

        .trash-container:hover {
            opacity: 1;
        }

        .trash-container img {
            cursor: pointer;
            position: absolute;
            left: 42%;
            top: 39%;
            width: 55px;
            height: 55px;
            opacity: 0.8;
        }

        #tests > tbody > tr:hover td{
            background-color: rgba(255, 228, 77, 0.7);
            cursor: pointer;
        }
        .dropimgQuestion {
            position: relative;
            border-radius: 5px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.85);
            cursor: pointer;
            color: black;
            text-shadow: none;
            display: inline-block;
            box-sizing: border-box;
            font-size: 14px;
            padding: 10px 8px;
            margin: 3% auto;
        }

        .testMenu input, #testSaveLoader {
            display: none;
        }

        .testMenu label {
            margin: 0 2%;
            padding: 0.375rem 1.5rem;
            border: 1px solid #777;
        }

        .upImg {
            margin: 0 auto;
            display: block;
            width: 40px;
        }
    </style>
@endsection