@include('includes.main.header')
<style>
    .each-player-holder .player-area-schedule
    {
        position : absolute;
        color:darkblue !important;
        top : 0px;
    }
    
    .each-player-holder, .each-player-holder .player-area-schedule
    {
        height : 100px;
    }
    
    .player-img-container
    {
        background-position: 50% 50%;
        background-size: cover;
       // height : 30px;
    }
    </style>
<!--Work-Starts-Here-->
	 <!-- content-section-starts -->
	 <div class="gallery-content">
	 <div class="container">
		<div class="gallery-content-head text-left">
			<h3>Players Evaluation</h3>
                    
                        <h4>Match <span id="match_name">{{$name}}</span></h4>
		</div>
			<div class="section group">
                            <div class="col-xs-12 no-padding margin-t-5" id="main-area" >
                                    
                                    <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 no-padding' id="main-content" style="display:none"> 
                                            <div class='col-xs-12 col-sm-12 pull-right left-side-player-container' id="football-field"  >
                                                
                                                <div class='col-xs-12 pull-right' id="football-field" >
                                                    
                                                    <div class='col-xs-12 no-padding' style="background-color: green">
                                                    <img src='/images/field.png' style="position:absolute;width:100%;height:600px;" />
                                                                                                            <div class="each-player-holder
                                                         
                                                         " id="field-position-0" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-1" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-2" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-3" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-4" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-5" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-6" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-7" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-8" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-9" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-10" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-11" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-12" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-13" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-14" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-15" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-16" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-17" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-18" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-19" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-20" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-21" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-22" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-23" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-24" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-25" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-26" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-27" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-28" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-29" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-30" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-31" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-32" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-33" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-34" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-35" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-36" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-37" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-38" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-39" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-40" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        <div class="each-player-holder
                                                         
                                                         " id="field-position-41" data-id="{{$count}}" style="">
                                                        <span></span>
                                                    </div>
                                                                                                        </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 well">
                                                <h3 class="col-xs-12">
                                                    Substitutions
                                                </h3>
                                                    <div class="col-xs-12 top-margin">
                                                        <div class="col-xs-12 col-sm-6" style="text-align:right" id="sub_1">
                                                            {{$sub1}}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6" id="sub_content_1">
                                                            
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="col-xs-12 top-margin">
                                                        <div class="col-xs-12 col-sm-6" style="text-align:right" id="sub_2">
                                                            {{$sub2}}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6" id="sub_content_2">
                                                           
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="col-xs-12 top-margin">
                                                        <div class="col-xs-12 col-sm-6" style="text-align:right" id="sub_3">
                                                            {{$sub3}}
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6" id="sub_content_3">
                                                           
                                                        </div>
                                                        
                                                    </div>
                                            </div>
                                            
                                    </div>
				</div>
                            
                            <div class="col-xs-12 hcenter" id="loading">
                        <img src="/images/loading.gif" />
                    </div>
				
			</div> 	
			
   </div>
</div>

<script>
    var scheduleID = 0;
          $(document).ready(function(){
              $.get('/api/v1/positions/columns/all', function(res){
                  $('.each-player-holder').addClass('gray-field-background');
                 // $('.each-player-holder').attr('style','background-color:grey');
                //  $('.each-player-holder').append('<span class="col-xs-12 position-desc-area" style="font-size:8px">Position not specified</span>');
                  $(res).each(function(i, value){
                       if(value.inactive == 0)
                        {
                       $('[data-id=' + value.column_count + ']').addClass('green-field-background').attr('data-position', value.position.short_form);
                      //  $('[data-id=' + value.column_count + ']').find('span').show();
                            
                        if(value.position.short_form == 'GK')
                        {
                            $('[data-id=' + value.column_count + ']').html(value.position.short_form + '<br/>').attr('style', 'background-image:url("/uploads/goalKeeper/{{$profile->default_goal_keeper}}")');
                        }
                        
                        $('[data-id=' + value.column_count + ']').find('span').html(value.position.short_form + '<br/>').attr('style', 'z-index:1000;background-color:black').hide();
                        $('[data-id=' + value.column_count + ']').attr('data-position_id', value.position_id);
                        $('[data-id=' + value.column_count + ']').attr('data-position_count_id', value.UUID);
                        }
                    });
//                    $.get('/api/v1/schedule/{{$UUID}}',{"_token": "{{ csrf_token() }}"}, function(res){
//                        
//                    });
                    getScheduleFormation('{{$UUID}}');
                    getCurrentlyAddedPlayers('{{$UUID}}');
                    
              });
             $('.btn-save').click(function(){
                var columns = new Object();
                var data = new Object();
                $('.each-player-holder').each(function(){
                    if($(this).find('.player-area-schedule').length > 0)
                    {
                        columns[$(this).find('.player-area-schedule').attr('data-schedule_players_id')] = $(this).find('select').val();
                    }
                    
                    
                    
                });
                data['sub_1'] = $('#sub_content_1').val();
                data['sub_2'] = $('#sub_content_2').val();
                data['sub_3'] = $('#sub_content_3').val();
                 $.post('/api/v1/schedule/{{$UUID}}/players/save', {scheduleID:scheduleID,data:data,columns:columns, "_token": "{{ csrf_token() }}"}, function(res){
                     alert(res);
                     //window.location.href = '/admin/schedule';
                 },'json')
                 .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                            html+= '<p>' + value + '</p>';
                        });
                        $('.error').html(html).show();
                        $('#btn-submit').html('Submit').removeAttr('disabled');
                        window.location.href = '#body';
                    },'json');
             });
          });
          
          function getScheduleFormation(UUID)
          {
              $.get('/api/v1/schedule/' + UUID + '/formation', function(res, xhr, code){
                    if(code.status == 204)
                    {
                        window.location.href = '/';
                    }
                    scheduleID = UUID;
                    if(res.sub1 != null)
                    {
                        $('#sub_1').text(res.sub1.name);
                    }
                   
                    if(res.sub2 != null)
                    {
                        $('#sub_2').text(res.sub2.name);
                    }
                    
                    if(res.sub3 != null)
                    {
                        $('#sub_3').text(res.sub3.name);
                    }
                    
                    getFormation(res.formation_id);
                    
              });
          }
          
          function getFormation(UUID)
            {
                $('.green-field-background').removeClass('green-field-background');
                $('#main-content').hide();
                $('#loading').show();
                $.get('/api/v1/formations/' + UUID + '/players/get',function(res){
                    var count = 1;
                    $(res.formation_positions).each(function(i,value){
                        if(value.inactive == 0)
                        {
                            var positionID = $('[data-position_count_id=' + value.position_columns_id + ']').attr('data-position_id');
//                            if(positions[positionID] > 0)
//                            {
//                                positions[positionID]++;
//                            }
//                            else
//                            {
//                                positions[positionID] = 1;
//                            }
                          //  $('[data-position_count_id=' + value.position_columns_id + ']').addClass('green-field-background');
                            $('.green-field-background').find('span').show();
                            $('.green-field-background').find('div').show();
                        }
                    });
                    getAllPlayers();
                    
              });
            }
          
          function getCurrentlyAddedPlayers(UUID)
          {
              $.get('/api/v1/schedule/' + UUID + '/players/get',function(res){
                  var count = 1;
                  $(res).each(function(i,value){
                      var playerID = value.player_id;
                      var newDiv = '';
                      newDiv = $('[data-player-id=' + playerID + ']').clone();
                      newDiv.attr('data-schedule_players_id', value.UUID);
                      $(newDiv).append('<span style="font-size:9px">Goals : ' + value.goal + '</span>');
                      $('[data-position_count_id=' + value.position_columns_id + ']').append(newDiv);
                      $('.left-side-player-container').find('[data-player-id=' + playerID + ']').remove();
                    });
              });
              
              $('#main-area').show();
              $('#football-field').show();
            $('#loading').hide();
          }
          
          $(document).on('click', '.player-area-schedule', function(){
            var url = $(this).attr('data-href');
            window.location.href = url;
          });
          
          function getAllPlayers()
          {
              $.get('/api/v1/schedule/' + scheduleID + '/players/get', function(res){
                  $(res).each(function(i, value){
                        var positionColumnID = value.position_columns_id;
                        var photoLocation = '/uploads/player/' + value.player.photo;
                        
                        var html = "<div data-href='/player/" + value.player.UUID + "' class='col-xs-12 player-area-schedule'  data-schedule_players_id='" + value.UUID + "'>";
                            html+=  "<div class='col-xs-12 col-sm-4 player-img-container' style='background-image: url("  + photoLocation + ")'>";
                            html+=  "</div>";
                              
                            html+=  "<div class='col-xs-12 col-sm-12 ' style='font-size:10px'><div class='col-xs-12 player-det' style='margin-bottom:20px'>LOADING RATING...</div>";
//                            html+=  "<select class='form-control' data-schedule_players_id='" + value.UUID + "' style='margin-bottom:16px;height:25px;font-size:10px'>";
//                                for(i = 1; i <= 10; i++)
//                                {
//                                    var select = '';
//                                    if(i == 7)
//                                    {
//                                        select = ' selected="selected"';
//                                    }
//                                    html+=  "<option value=" + i + select + ">" + i + "</option>";
//                                }
//                            html+=  "</select>";
                            html+=      "<div class='col-xs-12 player-name' style='font-size: 16px'>" + value.player.name + "</div>";
                            
                            html+=  "</div>";
                            html+= "</div>";
                        $('[data-position_count_id="' + positionColumnID + '"]').html(html);
                    });
              });
              
              
              $('select').val(7);
                $('#main-content').show();
                $('#loading').hide();
                $('select').val(7);
                setTimeout(
                function() 
                {
                    getPlayerRatings();
                },1500);
          }
          
        function getPlayerRatings()
        {
            $.get('/api/v1/schedule/' + scheduleID + '/players/ratings', function(res){
                $(res.formation).each(function(i,value){
                    console.log(value.schedule_players_id);
                    console.log($('[data-schedule_players_id="' + value.schedule_players_id + '"]').length);
                    $('[data-schedule_players_id="' + value.schedule_players_id + '"]').find('.player-det').text('Rating : ' + Number(value.rating_count).toFixed(1));
                })
                $('#sub_content_1').text('Rating : ' + Number(res.sub.rating_count1).toFixed(1));
                $('#sub_content_2').text('Rating : ' + Number(res.sub.rating_count2).toFixed(1));
                $('#sub_content_3').text('Rating : ' + Number(res.sub.rating_count3).toFixed(1));
            },'json');
        }
          </script>
	 <!-- content-section-ends -->
@include('includes.main.footer')