<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
    name='Gruppenbildung',
    title='Neue Gruppe',
    headcontent=~{fragments/general :: headcontent},
    navigation=~{fragments/general :: nav(current='create')},
    bodycontent=~{:: bodycontent})}">

<body>

<main th:fragment="bodycontent">
    <div class="container-fluid">

        <h1 class="def-cursor">Neue Gruppe</h1>

        <div class="content p-2 mt-3">
            <form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create/orga}">

                <!--Gruppentitel-->
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-monospace">Gruppentitel:</span>
                    </div>
                    <input type="text" class="form-control" th:name="title" required>
                </div>

                <!--Gruppenbeschreibung-->
                <div class="input-group mb-5">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-monospace">Beschreibung:</span>
                    </div>
                    <textarea class="form-control" th:name="description" required></textarea>
                </div>

                <!--TODO: Enter AsciiDoc Description-->

                <!--Gruppentyp-->
                <label for="grouptype">Gruppentyp:</label>
                <div class="btn-toolbar row mb-3" id="grouptype">
                    <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" name="type" id="type_private" checked> Privat
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="type" id="type_public"> Öffentlich
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="type" id="type_lecture"> Veranstaltung
                        </label>
                    </div>

                    <div class="input-group col-sm-8">
                        <div class="input-group-prepend">
                            <span class="input-group-text text-monospace">Gehört zu:</span>
                        </div>
                        <select class="custom-select" id="parent" name="parent">
                            <option value="" selected>Keiner</option>
                            <option th:each="lecture : ${lectures}" th:value="${lecture.getId()}"
                                    name="parent" th:text="${lecture.getTitle()}"></option>
                        </select>
                    </div>
                </div>

                <!--Benutzerlimit-->
                <label for="userlimit">Teilnehmeranzahl:</label>
                <div class="btn-toolbar row mb-5" id="userlimit">
                    <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
                        <label class="btn btn-secondary active">
                            <input type="radio" name="limit" id="limit_no" checked> Unbegrenzt
                        </label>
                        <label class="btn btn-secondary">
                            <input type="radio" name="limit" id="limit_yes"> Begrenzt
                        </label>
                    </div>

                    <div class="input-group col-sm-8">
                        <div class="input-group-prepend">
                            <span class="input-group-text text-monospace">Limit:</span>
                        </div>
                        <input type="number" class="form-control" th:name="userlimit" value="1"
                               min="1" max="100000" required>
                        <div class="input-group-append">
                            <span class="input-group-text text-monospace">Teilnehmer</span>
                        </div>
                    </div>
                </div>

                <!--CSV-->
                <div class="input-group mb-5">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-monospace">CSV:</span>
                    </div>
                    <div class="custom-file">
                        <input class="custom-file-input" id="file" th:name="file" type="file">
                        <label class="custom-file-label" for="file">Choose file</label>
                    </div>
                </div>

                <!--Submit-->
                <div class="form-group">
                    <button class="btn btn-primary btn-block" type="submit">Erstellen</button>
                </div>

                <!--<div class="custom-control custom-checkbox" id="privateCheckbox">
                    &lt;!&ndash;DUMMY&ndash;&gt;
                    <input type="hidden" id="visibilityDummy" name="visibility" value="0"/>
                    <input class="custom-control-input" type="checkbox" id="visibility" onchange="$('#visibilityDummy').val(this.checked ? 1 : 0)"/>
                    <label class="custom-control-label" for="visibility">Privat</label>
                </div>

                <div class="custom-control custom-checkbox" id="lectureCheckbox">
                    &lt;!&ndash;DUMMY&ndash;&gt;
                    <input type="hidden" id="lectureDummy" name="lecture" value="0"/>
                    <input class="custom-control-input" type="checkbox" id="lecture" onchange="$('#lectureDummy').val(this.checked ? 1 : 0)"/>
                    <label class="custom-control-label" for="lecture">Veranstaltung</label>
                </div>

                <div class="form-group mt-3" id="lectureParent">
                    <label for="parent">Veranstaltungszugehörigkeit</label>
                    <select class="form-control" id="parent" th:name="parent">
                        <option value="" selected>&#45;&#45;Keine&#45;&#45;</option>
                        <option th:each="lecture : ${lectures}" name="parent" th:value="${lecture.getId()}" th:text="${lecture.getTitle()}"></option>
                    </select>
                </div>

                <div class="custom-control custom-checkbox">
                    &lt;!&ndash;DUMMY&ndash;&gt;
                    <input type="hidden" id="maxInfiniteUsersDummy" name="maxInfiniteUsers" value="0"/>
                    <input class="custom-control-input" type="checkbox" id="maxInfiniteUsers"
                           onchange="$('#maxInfiniteUsersDummy').val(this.checked ? 1 : 0)"/>
                    <label class="custom-control-label" for="maxInfiniteUsers">Anzahl
                                                                               unbegrenzt</label>
                </div>

                <div class="form-group mt-3" id="userMaximum">
                    <label for="userMax">Teilnehmeranzahl</label>
                    <input class="form-control" id="userMax" th:name="userMaximum" type="number" min="1" max="100000" value="1">
                </div>-->
            </form>
        </div>
    </div>

    <script>
        // Add the following code if you want the name of the file appear on select
        $(".custom-file-input").on("change", function () {
            const fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });

        // Collapse lectureParent if lecture
        $(document).ready(function () {
            $('#lecture').change(function () {
                $('#parent').prop('disable', function (i, v) { return !v; });
            });
        });

        // Collapse provateCheckbox if lecture
        $(document).ready(function () {
            $('#lecture').change(function () {
                $('#visibility').prop('disabled', function (i, v) { return !v; });
            });
        });

        // Collapse lectureCheckbox if private
        $(document).ready(function () {
            $('#visibility').change(function () {
                $('#lecture').prop('disabled', function (i, v) { return !v; });
            });
        });

        // Collapse userMaximum if infinite
        $(document).ready(function () {
            $('#maxInfiniteUsers').change(function () {
                $('#userMax').prop('readonly', function (i, v) { return !v; });
            });
        });
    </script>

</main>

</body>

</html>
