@include('includes.main.header')
<script src="https://code.highcharts.com/highcharts.js"></script>  
<script src="https://code.highcharts.com/highcharts-3d.js"></script>  
<style>
    .editable-text-border
    {
        width : 100%;
    }
</style>
<!--Work-Starts-Here-->
	 <!-- content-section-starts -->
	 <div class="gallery-content">
	 <div class="container" style="background-color:white; opacity:0.9;">
		<div class="gallery-content-head text-left">
			<h3>Player - {{$player->name}}</h3>
                     
                        
		</div>
			<div class="section group">
				<div class="col-xs-12 no-padding margin-t-5">
                                    
                                    <div class="col-xs-12 margin-t-10 ">
                                        <div class="col-xs-12 error" style="margin-bottom:5px;display: none">
                                            
                                        </div>
                                        <div class="col-xs-12">
                                            <h2 class="col-xs-12 hcenter top-margin">
                                                {{$player->name}}
                                            </h2>
                                            <div class="col-xs-12 hcenter top-margin-big-2s">
                                                <img style="width:100px" src="/uploads/player/{{$player->photo}}" />
                                                
                                            </div>
                                            
                                            @if ($player->dob != '')
                                                <div class="col-xs-12 top-margin hcenter">
                                                    {{date("d M Y", strtotime($player->dob))}}
                                                </div>
                                            @endif
                                            <div class="col-xs-12 table-responsive top-margin-big-2">
                                            <table class="table table-bordered table-striped  col-xs-12">
                                                @if ($player->dob != '')
                                                <tr>
                                                    <td>
                                                        Date of birth
                                                    </td>
                                                    <td>
                                                        {{date("d M Y", strtotime($player->dob))}}
                                                    </td>
                                                </tr>
                                                @endif
                                                <tr>
                                                    <td>Value</td> <td>{{$player->value}}</td>
                                                </tr>
                                                <tr>
                                                    <td>T-shirt number</td> <td>{{$player->tshirt_number}}</td>
                                                </tr>
                                                <tr>
                                                    <td >
                                                        Status
                                                    </td>
                                                    <td @if($player['status'] == 'Available') 
                                                            style="color:green"
                                                        @else
                                                            style="color:salmon"
                                                         @endif>
                                                        {{$player->status}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Player Evaluation Rating</td> <td>{{round($rating,2)}}</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        Position
                                                    </td>
                                                    <td>
                                                        
                                                            <div class='col-xs-12 player-position' data-player="{{$player['UUID']}}">
                                                                Loading....
                                                            </div>
                                                         
                                                    </td>
                                                </tr>
                                            </table>
                                            </div>
                                        </div>
                                    </div>
				</div>
				
			</div> 	
			
   </div>
</div>
         
         <div class="col-xs-12">
             
         </div>
         
    <div class="graph-main-container col-xs-12">
        <div id="performance" style="width: 550px; height: 400px; margin: 0 auto;margin-top:20px;margin-bottom:70px;opacity:0.9;"></div>
   </div>
         <!-- Modal -->

<script>
    
    $(document).ready(function(){
            var playerID = '{{$player->UUID}}';
            $.get('/api/v1/player/' + playerID + '/positions', function(res){
              //  var res = xhr.responseJSON;
                var html = '';
                $(res).each(function(i, value){
                    html+= value.name + ' (' + value.short_form + ')<br/>';
                });
                $('.player-position').html(html);
            },'json');
    });
    
    $(document).ready(function(){
        $('#btn-edit').click(function(){
           $('.editable-text-border1').addClass('editable-text-border');
           $('#account-table tfoot').show();
        });
    });
</script>

<script language="JavaScript">
$(document).ready(function() {
   $('.charts-tabs').removeClass('active');
    $('.module-performance-graphs-area').addClass('active');
   var chart = {
               type: 'column'
            };
            var title = {
               text: 'Average Ratings'   
            };
            var subtitle = {
               text: 'Calcualted Values'  
            };
            var xAxis = {
                
               categories: null,
               title: {
                  text: null
               }
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Ratings',
                  align: 'high'
               },
               labels: {
                  overflow: 'justify'
               }
            };
            var tooltip = {
             //  valueSuffix: ' millions'
            };
            var plotOptions = {
               bar: {
                  dataLabels: {
                     enabled: true
                  }
               }
            };
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'top',
               x: -40,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
                     '#FFFFFF'),
               shadow: true
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: '{{$player->name}}',
                  data: []
               }
            ];
      
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.subtitle = subtitle; 
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;
            json.legend = legend;
            json.credits = credits;
   $('#performance').highcharts(json);
   
});
</script>
	 <!-- content-section-ends -->
@include('includes.main.footer')