@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/ranking2/{{$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>Saison: {{ App\Season::getCurrent()->name }}</h3>
            <h4>Runde: {{ $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>

                @foreach($userids as $userid)

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