@extends('layouts.layout')

@section('content')

    <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>
            <div>

                <div class="dropdown" id="dropdown1">
                    <button id="btn_startround" onclick="toggleDropdown('dropdown_startround'); return false;" class="dropbtn">{{$start_round_name}}</button>
                    <div id="dropdown_startround" class="dropdown-content">
                        @foreach($rounds as $round)
                            <a onclick="setStartRound('{{$round->name}}',{{$round->id}});return false;" >{{ $round->name }}</a>
                        @endforeach
                    </div>
                </div>


                <h3>Anzahl Runden:</h3>
                <input id="input_round_count" value="{{$round_count}}"></input>


                <p>&nbsp;</p>

                <div >
                    <button onclick="createLeague(); return false;" class="btn btn-primary">Liga neu erzeugen</button>
                </div>

            </div>
        </div>
    </section>

    <script>

        global_start_round_id={!! $start_round_id !!};

        console.log(global_start_round_id);

        function createLeague() {
            console.log("create League");
            //alert($global_selected_round_id);

            var round_count=document.getElementById("input_round_count").value;
            var link = '/league_settings/create_league/start_round_id='+global_start_round_id+"/round_count="+round_count;
            //alert(link);
            window.location=link;
        }

        function setStartRound($roundname, $round_id) {
            document.getElementById("btn_startround").innerHTML=$roundname;
            //alert($round_id);
            global_start_round_id = $round_id;
            console.log("Setting global_statr_round_id="+$round_id)
        }

        // 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;
        }
    </script>

@endsection