@extends('layouts.app')

@push('scripts')
  <script src="{{ asset('js/scoreboard.js') }}"></script>
@endpush

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">

          <table class="table scoreboard">
          <thead>
            <tr>
              <th>Team</th>
              @foreach($missions as $mission)
              <th class="score">
                <h3>{{ $mission->id }}</h3>
                <a href="{{ route('mission', $mission) }}">{{ $mission->hashtag }}</a>
              </th>
              @endforeach
              <th class="score">Score</th>
            </tr>
          </thead>
          <tbody>
          @foreach($teams as $team)
            <tr data-team="{{ $team->slug }}">
              <td>
                <div class="team">
                  <span class="team-icon" style="background-color: #{{ $team->color }};"></span> 
                  <span class="team-name"><a href="{{ route('team', $team) }}">{{ $team->name }}</a></span>
                </div>
                <div class="players">
                  @foreach($team->players as $player)
                    <div class="profile float-left">
                      <a href="https://twitter.com/{{ $player->twitter }}" title="{{ $player->twitter }}"><img src="{{ $player->photo }}" style="border-color: {{ '#'.$team->color }}"></a>
                    </div>
                  @endforeach
                </div>
              </td>
              @foreach($missions as $mission)
              <td class="score" data-mission="{{ $mission->slug }}">
                <div class="team-wrap">
                  <div class="team">
                    @if($mission->progress($team)[0] >= 1)
                      <span class="team-icon outlined {{ $mission->complete($team) ? '' : 'empty' }}" 
                        style="background-color: #{{ $team->color }}; border-color: #{{ $team->color }};">
                        @if(!Auth::guest())
                          <span>{{ $mission->score($team) }}</span>
                        @endif
                      </span> 
                    @endif
                  </div>
                </div>
              </td>
              @endforeach
              <td class="total score">
                <b>{{ $team->total_score() }}</b>
              </td>
            </tr>
          @endforeach
          </tbody>
          </table>

        </div>
    </div>
</div>
@endsection