@include('includes.admin.header')
@include('includes.admin.sidebar')
<style>
    .each-player-holder .player-area-schedule
    {
        position : absolute;
        color:darkblue !important;
        top : 0px;
    }
    
    .each-player-holder, .player-area-schedule
    {
        height : 120px;
    }
    </style>
      
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Formation Proposal
            <small>From Formation Proposal</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Formation Proposal</a></li>
            <li class="active">Formation Proposal</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                  <div class="error col-xs-12" style="display: none">
                      
                  </div>
                <div class="box-header with-border">
                    <h3 class="box-title col-xs-12"><span class="pull-left">Add players for a schedule</span></h3>
                </div><!-- /.box-header -->
                <div class="col-xs-12 hcenter" id="loading">
                    <img src="/images/loading.gif" />
                </div>
                           <div class='col-xs-12 no-padding' id="main-content" style="display: none"> 
                    <div class='col-xs-12 col-sm-4 pull-left no-padding left-side-player-container' style="display:none">
                        @if($players->count() > 0)
                            @foreach($players AS $player)
                                <div class='col-xs-12 player-area-schedule ' id="each-player-{{$player['UUID']}}" data-player-id="{{$player['UUID']}}" draggable="true"
            ondragstart="return dragStart(event)">
                                    <div class='col-xs-12 col-sm-4 player-img-container' >
                                        <img src='/uploads/player/{{$player['photo']}}' class='col-xs-12 no-padding' id="img-{{$player['UUID']}}"/>
                                    </div>
                                    <div class='col-xs-12 col-sm-8 player-det' id="player-det-{{$player['UUID']}}">
                                        <div class='col-xs-12 player-name' style="font-size: 16px">{{$player['name']}}</div>
                                        <div class='col-xs-12 player-position' style="font-size: 14px;font-weight: normal">{{$player['playerPosition']['name']}}</div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <div class='col-xs-12 pull-right' id="football-field"style="overflow: auto;">
                        <div class='col-xs-12 no-padding' style="height: 70vh;overflow: auto;background-color: green">
                                                <div class="each-player-holder" id="field-position-0" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-1" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-2" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-3" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-4" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-5" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-6" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-7" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-8" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-9" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-10" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-11" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-12" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-13" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-14" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-15" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-16" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-17" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-18" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-19" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-20" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-21" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-22" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-23" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-24" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-25" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-26" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-27" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-28" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-29" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-30" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-31" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-32" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-33" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-34" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-35" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-36" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-37" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-38" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-39" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-40" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-41" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-42" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-43" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-44" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-45" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-46" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-47" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder" id="field-position-48" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </section>
</div>

<script>
          $(document).ready(function(){
              $.get('/admin/positions/columns/all', function(res){
                  $('.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){
                        $('[data-id=' + value.column_count + ']').attr('style','background-color:green');
                        $('[data-id=' + value.column_count + ']').find('.position-desc-area').text(value.position.name);
                        $('[data-id=' + value.column_count + ']').attr('data-position_id', value.position_id);
                        $('[data-id=' + value.column_count + ']').attr('data-position_count_id', value.UUID);
                    });
                    getCurrentlyAddedPlayers('{{$UUID}}');
                    
              });
             $('#btn-save').click(function(){
                var columns = 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();
                        
                    }
                 });
                 
                 $.post('/api/v1/schedule/{{$UUID}}/players/save', {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 getCurrentlyAddedPlayers(UUID)
          {
              $.get('/admin/formations/suggestions/' + 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);
                      $('[data-position_count_id=' + value.position_columns_id + ']').append(newDiv);
                      $('.left-side-player-container').find('[data-player-id=' + playerID + ']').remove();
                    });
              });
              
              $('#main-content').show();
            $('#loading').hide();
          }
          </script>
	 <!-- content-section-ends -->
@include('includes.admin.footer')