@extends('layouts.layout')

@section('content')
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <section class="jumbotron text-center">
        <div class="container">
            <h2>Liga-Spiel Einstellungen</h2>
            <h2 style="width: 400px;">{{ $season->name }}</h2>

            <p>&nbsp;</p>

            <h3>Startrunde:</h3>
            <form>

                <div class="dropdown">
                    <button onclick="toggleDropdown('dropdown_startround'); return false;" class="dropbtn">{{$startRound['name']}}</button>
                    <div id="dropdown_startround" class="dropdown-content">
                        @foreach($rounds as $round)
                            <a onclick="false;" href="/league_settings/set_start_round/roundid_{{ $round->id }}">{{ $round->name }}</a>
                        @endforeach
                    </div>
                </div>


                <h3>Anzahl Runden:</h3>
                <input></input>

                <h3>Liga-Modus</h3>

                <div class="dropdown">
                    <button onclick="toggleDropdown('dropdown_leaguemode'); return false;" class="dropbtn">Modus einstellen</button>
                    <div id="dropdown_leaguemode" class="dropdown-content">
                        <a onclick="false;" href="">Qualifikation</a>
                        <a onclick="false;" href="">Liga-Spiel</a>
                    </div>
                </div>

                <p>&nbsp;</p>



                <div >
                    <button class="btn btn-primary">Liga neu erzeugen</button>
                </div>

            </form>



        </div>



    </section>







    <script>
        // When the user clicks on the button,toggle between hiding and showing the dropdown content
        function toggleDropdown($elementName) {
            document.getElementById($elementName).classList.toggle("show");
        }

        // Close the dropdown menu if the user clicks outside of it
        window.onclick = function(event) {
            if (!event.target.matches('.dropbtn')) {

                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
            event.cancelBubble=true;
            event.cancel();
        }
    </script>

@endsection