@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>Rate the players for Match <span id="match_name">{{$name}}</span></h4>
                        <h4 class="hcenter">Result : {{$result}}</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">
                                                <span class="pull-left">Use&nbsp;</span>&nbsp;<span class="editable-text-border pull-left no_of_votes" contenteditable="true">1</span>&nbsp;&nbsp;<span class="pull-left">&nbsp;Votes</span>
                                            </div>
                                                    <button type="button" class="btn btn-success col-xs-12 btn-save" id="" style="margin-top:5px;margin-bottom: 5px">Save Ratings</button>
                                                    <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" id="sub_1">
                                                            
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6">
                                                            <select class="form-control" id="sub_content_1">
                                                                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>                                                            </select>
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="col-xs-12 top-margin">
                                                        <div class="col-xs-12 col-sm-6" id="sub_2">
                                                            
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6" >
                                                            <select class="form-control" id="sub_content_2">
                                                                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>                                                            </select>
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="col-xs-12 top-margin">
                                                        <div class="col-xs-12 col-sm-6" id="sub_3">
                                                            
                                                        </div>
                                                        <div class="col-xs-12 col-sm-6">
                                                            <select class="form-control" id="sub_content_3">
                                                                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>                                                            </select>
                                                        </div>
                                                        
                                                    </div>
                                            </div>
                                            <div class="col-xs-12">
                                                <span class="pull-left">Use&nbsp;</span>&nbsp;<span class="editable-text-border pull-left no_of_votes" id="no_of_votes" contenteditable="true">1</span>&nbsp;&nbsp;<span class="pull-left">&nbsp;Votes</span>
                                            </div>
                                            
                                            <button type="button" class="btn btn-success col-xs-12 btn-save" id="" style="margin-top:5px;margin-bottom: 5px">Save Ratings</button>
                                    </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', 'z-index:1000;background-color:black;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){
//                        
//                    });
                    
                    getVotesRemaining('{{$UUID}}');
                    getLatestScheduleFormation();
                    getCurrentlyAddedPlayers('{{$UUID}}');
                    
              });
             $('.btn-save').click(function(){
                 console.log("a");
                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();
                data['no_of_votes'] = $('#no_of_votes').text();
                 $.post('/api/v1/schedule/{{$UUID}}/players/save', {scheduleID:scheduleID,data:data,columns:columns, "_token": "{{ csrf_token() }}"}, function(res){
                     alert(res);
                     window.location.href = '/tactics/player/evaluation/results';
                 },'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');
             });
             
             $('.no_of_votes').blur(function(){
                var no_of_votes = $(this).text();
                var evaluationVotes = $(this).attr('data-votes');
                if(isNaN($(this).text()))
                {
                    alert("Please enter a digit");
                    $(this).text(evaluationVotes);
                    return;
                }
                
                if(Number(no_of_votes) > evaluationVotes)
                {
                    alert("Only " + evaluationVotes + " votes available");
                    $(this).text(evaluationVotes).focus();
                    return;
                }
                if(!isNaN(no_of_votes))
                {
                    $('.no_of_votes').text(no_of_votes);
                }
                else
                {
                    $('.no_of_votes').text(1);
                }
             });
          });
          
          function getLatestScheduleFormation(UUID)
          {
              $.get('/api/v1/schedule/previous/formation', function(res, xhr, code){
                    if(code.status == 204)
                    {
                        window.location.href = '/';
                    }
                    scheduleID = res.UUID;
                    if(res.sub1 != null)
                    {
                        $('#sub_1').text(res.sub1.name);
                    }
                    else
                    {
                        $('#sub_1').text('No Substitutes');
                    }
                    if(res.sub2 != null)
                    {
                        $('#sub_2').text(res.sub2.name);
                    }
                    else
                    {
                        $('#sub_2').text('No Substitutes');
                    }
                    if(res.sub3 != null)
                    {
                        $('#sub_3').text(res.sub3.name);
                    }
                    else
                    {
                        $('#sub_3').text('No Substitutes');
                    }
                    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();
          }
          
          function getAllPlayers()
          {
              $.get('/api/v1/schedule/' + scheduleID + '/players/get', function(res){
                  $(res).each(function(i, value){
                        var positionColumnID = value.position_columns_id;
                        console.log(positionColumnID);
                        var photoLocation = '/uploads/player/' + value.player.photo;
                        
                        var html = "<div 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-8 player-det' >";
                            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);
          }
          
          function getVotesRemaining(scheduleID)
          {
              $.get("/api/v1/tactics/player/evaluation/" + scheduleID + "/votes", function(res){
                  $('.no_of_votes').text(res);
                  $('.no_of_votes').attr('data-votes', res);
              });
          }
          
          </script>
	 <!-- content-section-ends -->
@include('includes.main.footer')