@include('includes.admin.header')
@include('includes.admin.sidebar')
<script>
    $(document).ready(function(){
        $('#formation-menu').addClass('active');
    });
</script>
<style>
    .each-player-holder .player-area-schedule
    {
        position : absolute;
        color:darkblue !important;
        top : 0px;
    }
    
    .each-player-holder
    {
        height : 70px !important;
        padding-top : 5px !important;
    }
    </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
         
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         
         function dragOver(ev) {
            return false;
         }
         
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            //src = $('#' + src).find('img').attr('id');
           // console.log(src);
        //    $('#' + src).removeClass('col-sm-8');
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Add Formations
            <small>From Formations</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Formations</a></li>
            <li class="active">Add Formations</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;margin-bottom: 5px">
                      
                  </div>
                <div class="box-header with-border">
                    <h3 class="box-title col-xs-12"><span class="pull-left">Add players for a schedule</span><button type="button" class="btn btn-success pull-right btn-save">Save Formation</button></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;background-color: white"> 
                    <div class="col-xs-12 top-margin">
                        
                        <input type="text" class="form-control" id="name" name="name" placeholder="Name of Formation"/>
                    </div>
                    <div class='col-xs-12 pull-right' id="football-field" style="margin-top:10px">
                        <label class="col-xs-12 no-padding">
                            Select multiple columns to a maximum of 11 columns. Select the column again to deselect it
                        </label>
                        <div class='col-xs-12 no-padding' style="background-color: green">
                            <img src='/images/field.png' style="position:absolute;width:100%;height:420px;" />
                                                <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>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </section>
</div>
      
      <script>
            $(document).ready(function(){
                $.get('/admin/positions/columns/all', function(res){
                    $('.each-player-holder').addClass('gray-field-background');
                    $('.each-player-holder').append('<span class="col-xs-12 position-desc-area" style="font-size:8px">Cannot add this position</span>');
                    $(res).each(function(i, value){
                        $('[data-id=' + value.column_count + ']').addClass('green-field-background');
                        $('[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);
                    });
                   
                    $('#main-content').show();
                    $('#loading').hide();
                });
                
            $('.btn-save').click(function(){
                var name = $('#name').val();
                var columns = new Object();
                $('.selected-field-column').each(function(){
                    if($(this).hasClass('green-field-background'))
                    {
                        columns[$(this).attr('data-position_count_id')] = $(this).attr('data-position_id');
                    }
                });
                
                $.post('/admin/formations/save', {name:name, columns:columns, "_token": "{{ csrf_token() }}"}, function(res){
                    alert(res);
                    window.location.href = '/admin/formations';
                },'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/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();
//                      $('[data-position_count_id=' + value.position_columns_id + ']').append(newDiv);
//                      $('.left-side-player-container').find('[data-player-id=' + playerID + ']').remove();
//                    });
//                    
//              });
//              
//          }


            $(document).on('click', '.green-field-background', function(){
                    
                    if($(this).hasClass('selected-field-column'))
                    {
                        $(this).removeClass('selected-field-column');
                    }
                    else
                    {
                        var numItems = $('.selected-field-column').length;
                        console.log(numItems);
                        if(numItems == 11)
                        {
                            alert("You can add only a maximum of 11 players");
                            return;
                        }
                        $(this).addClass('selected-field-column');
                    }
                });
                
                
                
          </script>
@include('includes.admin.footer')