@extends('layouts.app', ['pageSlug' => 'dashboard'])

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header ">
                    <div class="row">
                        <div class="small-col-sm-6 text-left">
                            <h5 class="card-category">Player Stats for</h5>
                            <h2 class="card-title">{{$player_info['first_name'] }} {{ $player_info['last_name'] }}</h2>
                        </div>
                        <div class="stat-point">
                            <h4 class='stat-point-title'>Skill Level</h4>
                            <h3>Beginner</h3>
                        </div>
                        <div class="stat-point">
                            <h4 class='stat-point-title'>Sessions</h4>
                            <h3>6</h3>
                        </div>
                        <div class="stat-point">
                            <h4 class='stat-point-title'>Rating</h4>
                            <h3>{{$player_info['rating'] }}</h3>
                        </div>
                        <div class="stat-point">
                            <h4 class='stat-point-title'>Percentile</h4>
                            <h3>Top {{$player_info['percentile'] }}%</h3>
                        </div>
                        <div class="stat-point">
                            <h4 class='stat-point-title'>Club</h4>
                            <a href='{{ action("ClubController@index", ["clubid" => $player_info["club_id"]]) }}'>
                                {{$player_info['club_name'] }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card card-chart">
                <div class="card-header ">
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <h5 class="card-category">Recent Sessions</h5>
                            <h2 class="card-title">Time Series Performance</h2>
                        </div>
                        <div class="col-sm-6">
                            <select class="browser-default custom-select main-select float-right">
                                <option class="dropdown-select" selected value="All">All Sessions</option>
                                @foreach ($data as $session)
                                        <option class="dropdown-option" value="{{ $session['info']['session_id'] }}">{{ $session['info']['session_name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                        <canvas id="myChart"></canvas>
                </div>
                <div class="card-header ">
                    <div class="row">
                        <div class="col-sm-6 text-left">
                            <h2 class="card-title">Session Notes</h2>
                            <h4 class="card-description session-notes">No session selected</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="card card-chart">
                <div class="card-header ">
                    <div class="row">
                        <div class="sequence-chart col-sm-6 text-left">
                            <h5 class="card-category">Recent Sessions</h5>
                            <h2 class="card-title">Time Sequence</h2>
                        </div>
                        <div class="dropdown-group col-sm-6 float-right">
                            <select class="custom-select pad-select float-right">
                                <option class="dropdown-select" selected value="All">All Pads</option>
                                <option class="dropdown-option" value="1">1 (Blue)</option>
                                <option class="dropdown-option" value="2">2 (Yellow)</option>
                                <option class="dropdown-option" value="3">3 (Green)</option>
                                <option class="dropdown-option" value="4">4 (Purple)</option>
                                <option class="dropdown-option" value="5">5 (Pink)</option>
                            </select>
                            <select class="custom-select game-select float-right">
                                <option class="dropdown-select" selected value="All">No Game Selected</option>
                            </select>
                            <select class="custom-select session-select float-right">
                                <option class="dropdown-select" selected value="All">No Session Selected</option>
                                @foreach ($data as $session)
                                    <option class="dropdown-option" value="{{ $session['info']['session_id'] }}">{{ $session['info']['session_name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="background">
                        <canvas id="myCanvas" width="600" height="600"></canvas>
                    </div>
                    <canvas id="sequenceChart" height="200"></canvas>    
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm-12 text-left">
                            <h3 class="card-title">Game Specs</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive ps">
                        <table class="table tablesorter">
                            <tbody class="spec-list">
                                <tr> 
                                    <th class="spec-attr" data-spec="game_id">Game Id </th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="description">Game Description</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="sequence">Pad Sequence</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr> 
                                    <th class="spec-attr" data-spec="mode">Mode</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="time">Game Length</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="delay_time">Delay Time</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="num_of_pads"># of Pads</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="type">Game Type</th>
                                    <td class="spec-val"></td>
                                </tr>
                                <tr>
                                    <th class="spec-attr" data-spec="station_id">Station Id</th>
                                    <td class="spec-val"></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="animation-controls">
                            <button type="button" class="btn btn-dark" id="control-play" data-mode="pause">Play</button>
                            <button type="button" class="btn btn-dark" id="control-restart">Restart</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script> var dashboardData = {data : "{{json_encode($data)}}"}; </script>
    <script>
        $(document).ready(function() {
          demo.initDashboardPageCharts();
        });
    </script>
    <script src="{{ asset('black') }}/js/plugins/chartjs.min.js"></script>
    <script src="{{ asset('black') }}/js/theme.js"></script>
    <script src="{{ asset('black') }}/js/padanimation.js"></script>
    
@endsection