@extends('layouts.grid')
@section('content')
<script>
	$(document).ready(function(){
	    $(".team").click(function(event){

		   	var vButton		= '#' + event.target.id;
	    	var vContent	= '#' + event.target.id.substr(0,5);
			$(".teamcontainer").hide();
			$(vContent).show();
			var fed_div 	= '/team/' + $(vContent).attr("data-div-id") + '/ranking';
			var fed_text	= "#rnk-" + $(vContent).attr("data-team-cd");

			if ( $(vButton).data("filled") != 'YES')
			{
				$.ajax({
					method: 'POST',
					url: fed_div,
					success: function(response){
						$(fed_text).append(response);
					    $(vButton).data("filled", "YES");
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log(JSON.stringify(jqXHR));
						console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
					}
				});
			}
	    });
	    $("#eur-A-btn").click() ;
	});
</script>
<style>
.table-container    {
    height      :300px;
    overflow-y  : auto;
}
</style>
        <div class="tabs is-small is-toggled">
            <div class="container">
            <ul>
                @foreach ($teams as $team)
                <li class="is-active"><a class="button team" id="eur-{{ $team->team_code }}-btn">{{ $team->team_code }}</a></li>
                @endforeach
            </ul>
            </div>
        </div>
	    @foreach ($teams as $team)
            <section class="section teamcontainer"
					id="eur-{{$team->team_code}}"
					data-team-cd="{{ $team->team_code }}"
					data-div-id="{{ $team->div_fed }}">
                <div class="container">
                    <h1 class="title is-size-3 has-text-link">{!! $team->team_name !!}</h1>

                    <div class="tile is-ancestor">
                        <div class="tile is-parent is-3">
                            <div class="tile is-child card" style="height:400px;">
                                <div class="card-header">
                                    <p class="card-header-title is-size-5 has-text-info">
                                        {!! trans('labels.players') !!}
                                    </p>
                                </div>
                                <div class="card-content">
                                    <div class="table-container">
                                        <table class="table is-hoverable">
                                            <tbody>
                                                @foreach ($team->players as $player)
                                                <tr>
                                                    <td>{{ $player->str_name }}</td>
                                                    <td>{{ $player->id }}</td>
                                                    <td>{{ $player->classif_code }}</td>
                                                    <td>{{ $player->classif_value }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-footer is-small">
                                    <span class="tag is-danger ">
                                        {!! trans('labels.max-points') !!} : {{$team->team_avg}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="tile is-parent is-5 ">
                            <div class="tile is-child card" style="height:400px;">
                                <div class="card-header">
                                    <p class="card-header-title is-size-5 has-text-info">
                                        {!! trans('labels.prgm-reslt') !!}
                                    </p>
                                </div>
                                <div class="card-content">
                                    <div class="table-container">
                                        <table class="table is-hoverable is-size-7" style="overflow-y: auto;">
                                            <tbody>
                                                @foreach ( App\Gamev::teamgames($team->id) as $game )
                                                <tr>
                                                    <td width="120px">{{ $game->game_date }}</td>
                                                    <td>{{ $game->game_teams }}</td>
                                                    <th>{{ $game->score_host }}</th>
                                                    <th> : </th>
                                                    <th>{{ $game->score_guest }}</th>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tile is-parent is-4">
                            <div class="tile is-child card" style="height:400px;">
                                <div class="card-header">
                                    <p class="card-header-title has-text-info is-size-5">
                                    {{ $team->div_name }} {!! trans('labels.ranking') !!} *
                                    </p>
                                </div>
                                <div class="card-content">
                                    <div class="table-container">
                                        <table class="table is-hoverable">
                                			<tbody id="rnk-{{ $team->team_code }}" class="is-size-7">
				                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <th>pts</th>
                                                    <td>P</td>
                                                    <td>W</td>
                                                    <td>D</td>
                                                    <td>L</td>
			                                	</tr>
			                                </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="card-footer is-small">
                                    <span class="tag">
                                        * {!! trans('labels.source') !!}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
    @endforeach
@endsection