@extends('layout')

@section('content')
<div class="" ng-controller="StatsController" ng-init="getList();">

    <div class="page-header row">
        <div class="col-md-6">
            <h3>Stats</h3>
        </div>
        <div class="col-md-6 text-right">
        </div>
    </div>
        
    <div class="portlet">

        <div class="portlet-body no--pad ng-cloak">
            <div table-paginate></div>
            <div class="filters" ng-if="filter.show">
                <form name="filterForm" ng-submit="" novalidate>
                    <div class="row">
                        <div class="col-md-2 form-group">
                            <label class="form-label">Player Name</label>
                            <input type="text"  class="form-control" ng-model="filter.player_name" />
                        </div>
                        
                        <div class="col-md-2 form-group">
                            <label class="form-label">Season</label>
                            <select class="form-control" ng-model="filter.season">
                                <option value="">All</option>
                                <option ng-value="@{{season.id}}" ng-repeat="season in seasons">@{{season.season}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 form-group">
                            <label class="form-label">Tournament</label>
                            <select class="form-control" ng-model="filter.tournament_id">
                                <option value="">All</option>
                                <option ng-value="@{{tournament.id}}" ng-repeat="tournament in tournaments" ng-if="tournament.season == filter.season">@{{tournament.tournament_name}}</option>
                            </select>
                        </div>

                        <div class="col-md-2 form-group">
                            <label class="form-label">Order By</label>
                            <select class="form-control" ng-model="filter.order_by">
                                <option value="appearance">Appearance</option>
                                <option value="minutes_played">Minutes Played</option>
                                <option value="goals">Goals</option>
                                <option value="yellow_card">Yellow Card</option>
                                <option value="red_card">Red Card</option>
                            </select>
                        </div>

                        <div class="col-md-2 form-group">
                            <label class="form-label">Order Type</label>
                            <select class="form-control" ng-model="filter.order_type">
                                <option value="ASC">ASC</option>
                                <option value="DESC">DESC</option>
                            </select>
                        </div>

                        <!-- <div class="col-md-3 form-group">
                            <label class="form-label">Opponent</label>
                            <select class="form-control" ng-model="filter.club_id">
                                <option value="">All</option>
                                <option ng-value="@{{clubs.id}}" ng-repeat="clubs in clubs">@{{clubs.club_name}}</option>
                            </select>
                        </div> -->
                    </div>
                    <div>
                        <button ng-click="search()" class="btn btn-primary" ng-disabled="searching">Apply <span ng-show="searching" class="spinner-border spinner-border-sm"></span></button>
                        <button ng-click="clearData()" class="btn btn-danger" ng-disabled="clearing">Clear <span ng-show="clearing" class="spinner-border spinner-border-sm"></span></button>
                    </div>
                </form>
            </div>
            <div ng-if="loading" class="text-center mt-5 mb-5">
              <div class="spinner-grow" role="status">
                <span class="sr-only">Loading...</span>
              </div>
            </div>

            <div ng-if="dataset.length == 0 && !loading">
                @include('common.no_found',["message" => "No details found"])
            </div>
            
            <div class="table-cont" ng-if="dataset.length > 0" style="margin-bottom: 20px;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>SN</th>
                            <th>Player</th>
                            <th>Appearance</th>
                            <th>Goals</th>
                            <th>YC</th>
                            <th>RC</th>
                            <th>Minutes Played</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="player in dataset track by $index">
                            <td>@{{ (filter.page_no - 1)*filter.max_per_page + $index + 1 }}</td>
                            <td>@{{player.player_name }}</td>
                            <td>@{{player.appearance}}</td>
                            <td>@{{player.goals}}</td>
                            <td>@{{player.yellow_card}}</td>
                            <td>@{{player.red_card}}</td>
                            <td>@{{player.minutes_played}}</td>
                            <td class="text-right">
                                <button class="btn btn-xs btn-primary" ng-click="viewStatDetails(player)">View Details</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <div class="modal fade in" id="player_matches_modal" role="dialog" >
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Player Match Logs</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icons icon-close"></i></button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <div class="text-center">
                                <h4>@{{open_player.player_name}}</h4>
                            </div>
                            <div class="table-responsive" ng-if="open_matches.length > 0" style="overflow-y: scroll; height: 60vh;">
                                <table class="table table-compact table-bordered">
                                    <thead>
                                        <tr>
                                            <th>SN</th>
                                            <th></th>
                                            <th>Goals</th>
                                            <th>Minutes Played</th>
                                            <th>YC</th>
                                            <th>RC</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="match in open_matches track by $index">
                                            <td>@{{ $index + 1 }}</td>
                                            <td>
                                                <b>@{{match.team1_score}}</b> @{{match.team1}} <br/>
                                                <b>@{{match.team2_score}}</b> @{{match.team2}}
                                            </td>
                                            <td>@{{match.goals}}</td>
                                            <td>@{{match.minutes_played}}</td>
                                            <td>@{{match.yellow_card}}</td>
                                            <td>@{{match.red_card}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
      </div>

    </div>
</div>
@endsection

@section('footer_scripts')

@endsection