@extends('layouts.layout')

@section('content')

    <div style="float:left;left:10%">

        @foreach($all_rounds as $r)
            @if (App\Round::hasLockedGame($r->id) )
                <div>
                    @if ($r->id == $round->id)
                        <label>{{$r->name}}</label>
                    @else
                        <a href="/users/ranking/{{$r->id}}">{{$r->name}}</a>
                    @endif
                </div>
            @endif
        @endforeach

    </div>


    <div style="float:left; position:relative;left:47%">
        <div style="float:left; position:relative; left:-50%;">

            <h3>{{ App\Season::getCurrent()->name }}</h3>
            <h4>{{ $round->name }}</h4>
            <h4>Rangliste und Tippübersicht</h4>
            <table>
                <tr>
                    <td style="width:50px;background-color:grey"></td>
                    <td style="width:250px;">=richtige Tendenz</td>
                </tr>
                <tr>
                    <td style="width:50px;background-color:orange"></td>
                    <td style="width:250px;">=richtiges Ergebnis</td>
                </tr>
                <tr>
                    <td style="width:50px;background-color:red"></td>
                    <td style="width:250px;">=richtiges Ergebnis mit Joker</td>
                </tr>
            </table>
            <p>&nbsp;</p>


            <table>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;width:50px;">Rang</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;width:50px;">Tagessieg</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;width:150px;">Spieler</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Punkte Gesamt</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Punkte Tag</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[0]->team1}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[0]->team2}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Joker</span>
                    </div>
                </th>

                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[1]->team1}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[1]->team2}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Joker</span>
                    </div>
                </th>

                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[2]->team1}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[2]->team2}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Joker</span>
                    </div>
                </th>

                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[3]->team1}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">{{$games[3]->team2}}</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Joker</span>
                    </div>
                </th>
                <th style="height:140px;white-space: nowrap;">
                    <div style="transform:translate(25px, 51px)  rotate(315deg);width:30px;">
                        <span style="border-bottom: 1px solid #ccc; padding: 5px 10px;">Debug (DayWinScore)</span>
                    </div>
                </th>


                <!-- Spielergebnis als erste Zeile -->

                <tr>
                    <td></td>
                    <td></td>
                    <td>Spiel-Ergebnis</td>
                    <td></td>
                    <td></td>
                    <td align="center">{{ ($game_results[0]==-1? "" : $game_results[0]) }}</td>
                    <td align="center">{{ ($game_results[1]==-1? "" : $game_results[1]) }}</td>
                    <td></td>
                    <td align="center">{{ ($game_results[2]==-1? "" : $game_results[2]) }}</td>
                    <td align="center">{{ ($game_results[3]==-1? "" : $game_results[3]) }}</td>
                    <td></td>
                    <td align="center">{{ ($game_results[4]==-1? "" : $game_results[4]) }}</td>
                    <td align="center">{{ ($game_results[5]==-1? "" : $game_results[5]) }}</td>
                    <td></td>
                    <td align="center">{{ ($game_results[6]==-1? "" : $game_results[6]) }}</td>
                    <td align="center">{{ ($game_results[7]==-1? "" : $game_results[7]) }}</td>
                    <td></td>
                    <td></td>
                </tr>

                @foreach($rankingDisplay as $entry)

                    <tr>
                        <td class="table-bordered">&nbsp;<span class="text list-unstyled" href="#" >&nbsp;{{ $entry["rank"] }}&nbsp;</span></td>
                        <td class="table-bordered"><div style="margin: 0 auto; width: 32px;"><img src="/img/crown.png" style="{{ ($entry["is_dayscorewinner"] ? 'float:left;width:32px;height:32px' : 'display: none;') }}"></div></td>
                        <td class="table-bordered">&nbsp;<a class="text list-unstyled" href="#" style="vertical-align: middle;">{{ $entry["user_name"] }} &nbsp;</a></td>
                        <td class="table-bordered" align="center">&nbsp;{{ $entry["rankscore_total"] }}&nbsp;</td>
                        <td class="table-bordered" align="center">&nbsp;{{ $entry["rankscore"] }}&nbsp;</td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol1"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score1"]) }}&nbsp;</td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol1"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score2"]) }}&nbsp;</td>
                        <td class="table-bordered"><div style="margin: 0 auto; width: 32px;"><img src="/img/joker.png" style="{{ ($entry["joker1"] ? 'float:left;width:32px;height:32px' : 'display: none;') }}"></div></td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol2"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score3"]) }}&nbsp;</td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol2"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score4"]) }}&nbsp;</td>
                        <td class="table-bordered"><div style="margin: 0 auto; width: 32px;"><img src="/img/joker.png" style="{{ ($entry["joker2"]? 'float:left;width:32px;height:32px' : 'display: none;') }}"></div></td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol3"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score5"]) }}&nbsp;</td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol3"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score6"]) }}&nbsp;</td>
                        <td class="table-bordered"><div style="margin: 0 auto; width: 32px;"><img src="/img/joker.png" style="{{ ($entry["joker3"] ? 'float:left;width:32px;height:32px' : 'display: none;') }}"></div></td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol4"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score7"]) }}&nbsp;</td>
                        <td class="table-bordered" align="center" style="{{$entry["trendCol4"]}}">&nbsp;{{ str_replace("-1","x",$entry["tipp_score8"]) }}&nbsp;</td>
                        <td class="table-bordered"><div style="margin: 0 auto; width: 32px;"><img src="/img/joker.png" style="{{ ($entry["joker4"] ? 'float:left;width:32px;height:32px' : 'display: none;') }}"></div></td>
                        <td class="table-bordered" align="center" >&nbsp;{{ $entry["dayscore"] }}&nbsp;</td>
                    </tr>

            @endforeach
            <!-- Control Cell width -->
                <tr>
                    <td> <div></div></td>
                    <td> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                    <td style="width:50px;"> <div></div></td>
                </tr>
            </table>

            <p>&nbsp;</p>

        </div>

    </div>



@endsection