@extends('layouts.layout')

@section('content')
    <style>

        .centered-header {
            width:50%;

            margin:auto;
            margin-bottom: 25px;
        }

        .page-container {
            width: 800px;
            height: 80vh;
            /*
            display: flex;
            justify-content: center;
            align-items: center;
            */
        }

        .grid-container {
            width:780px;
            display: grid;
            margin: auto;

            height: 100vh;
            grid-template-columns: 125px 5px 125px 25px 5px 25px 75px 15px 0;
            grid-template-rows: 50px 50px 50px 50px;
        }
    </style>


    <div class="page-container">

        <h2 class="centered-header">{{$round->name}}</h2>

        <form class="grid-container" method="POST" action="/tipps/store4">
            {{ csrf_field() }}
            <!-- 1 -->
            <div>{{ $game1->team1 }}</div>
            <span>:</span>
            <span>{{ $game1->team2 }}</span>

            <input type="text" class="lead" name="score1_1" value="{{ $tipp1->score1==-1? '': $tipp1->score1 }}" required>
            <span>:</span>
            <input type="text" class="lead" name="score2_1" value="{{ $tipp1->score2==-1? '': $tipp1->score2 }}" required>
            <label style="padding:5px;justify-content: center;">Joker</label>
            <input type="checkbox" name="joker_1" id="joker_1" @if($tipp1->joker===1) checked @endif>

            <span>
                <input type="hidden" name="tipp_id_1" value="{{ $tipp1->id }}">
                <input type="hidden" name="game_id_1" value="{{ $game1->id }}">
                <!-- round_id is the same for all 4 games. -->
                <input type="hidden" name="round_id" value="{{ $game1->round_id }}">
            </span>

            <!-- 2 -->
                <div>{{ $game2->team1 }}</div>
                <span>:</span>
                <span>{{ $game2->team2 }}</span>

                <input type="text" class="lead" id=""  name="score1_2" value="{{ $tipp2->score1==-1? '': $tipp2->score1 }}" required>

                <span>:</span>
                <input type="text" class="lead" id=""  name="score2_2" value="{{ $tipp2->score2==-1? '': $tipp2->score2 }}" required>
                <label>Joker</label>
                <input type="checkbox" name="joker_2" id="joker_2" @if($tipp2->joker===1) checked @endif>

                <span>
                    <input type="hidden" name="tipp_id_2" value="{{ $tipp2->id }}">
                    <input type="hidden" name="game_id_2" value="{{ $game2->id }}">
                </span>

                <!-- 3 -->
                <div>{{ $game3->team1 }}</div>
                <span>:</span>
                <span>{{ $game3->team2 }}</span>

                <input type="text" class="lead" id=""  name="score1_3" value="{{ $tipp3->score1==-1? '': $tipp3->score1 }}" required>

                <span>:</span>
                <input type="text" class="lead" id=""  name="score2_3" value="{{ $tipp3->score2==-1? '': $tipp3->score2 }}" required>
                <label>Joker</label>
                <input type="checkbox" name="joker_3" id="joker_3" @if($tipp3->joker===1) checked @endif>

                <span>
                    <input type="hidden" name="tipp_id_3" value="{{ $tipp3->id }}">
                    <input type="hidden" name="game_id_3" value="{{ $game3->id }}">
                </span>

                <!-- 4 -->
                <div>{{ $game4->team1 }}</div>
                <span>:</span>
                <span>{{ $game4->team2 }}</span>

                <input type="text" class="lead" id=""  name="score1_4" value="{{ $tipp4->score1==-1? '': $tipp4->score1 }}" required>

                <span>:</span>
                <input type="text" class="lead" id=""  name="score2_4" value="{{ $tipp4->score2==-1? '': $tipp4->score2 }}" required>
                <label>Joker</label>
                <input type="checkbox" name="joker_4" id="joker_4" @if($tipp4->joker===1) checked @endif>

                <span>
                    <input type="hidden" name="tipp_id_4" value="{{ $tipp4->id }}">
                    <input type="hidden" name="game_id_4" value="{{ $game4->id }}">
                </span>

                <div class="form-group">
                    <p>&nbsp;</p>
                    <button type="submit" id="btn_submit" class="btn btn-primary">Ok</button>
                </div>

            </form>

    </div>


<script>
    let checkbox1=document.getElementById('joker_1')
    let checkbox2=document.getElementById('joker_2')
    let checkbox3=document.getElementById('joker_3')
    let checkbox4=document.getElementById('joker_4')
    let btn_submit=document.getElementById('btn_submit');

    if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox3.checked==0 && checkbox4.checked==0) {
        btn_submit.disabled=true;
    }

    checkbox1.addEventListener('change', function() {
        if (this.checked) {
            btn_submit.disabled=false;
            checkbox2.checked=0;
            checkbox3.checked=0;
            checkbox4.checked=0;
        } else {
            if (checkbox2.checked==0 && checkbox3.checked==0 && checkbox4.checked==0) {
                checkbox1.checked=1;
            }
        }
    });

    checkbox2.addEventListener('change', function() {
        if (this.checked) {
            btn_submit.disabled=false;
            checkbox1.checked=0;
            checkbox3.checked=0;
            checkbox4.checked=0;
        } else {
            if (checkbox1.checked==0 &&  checkbox3.checked==0 && checkbox4.checked==0) {
                checkbox2.checked=1;
            }
        }
    });

    checkbox3.addEventListener('change', function() {
        if (this.checked) {
            btn_submit.disabled=false;
            checkbox1.checked=0;
            checkbox2.checked=0;
            checkbox4.checked=0;
        } else {
            if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox4.checked==0) {
                checkbox3.checked=1;
            }
        }
    });
    checkbox4.addEventListener('change', function() {
        if (this.checked) {
            btn_submit.disabled=false;
            checkbox1.checked=0;
            checkbox2.checked=0;
            checkbox3.checked=0;
        } else {
            if (checkbox1.checked==0 && checkbox2.checked==0 && checkbox3.checked==0 ) {
                checkbox4.checked=1;
            }
        }
    });
    //console.log("Event Listeners initiated");
</script>
@endsection