@include('includes.admin.header')
@include('includes.admin.sidebar')
<script>
    $(document).ready(function(){
        $('#schedule-menu').addClass('active');
    });
</script>
<style>
    .each-player-holder .player-area-schedule
    {
        position : absolute;
        color:darkblue !important;
        top : 0px;
    }
    
    .player-img-container
    {
        background-position: 50% 50%;
        background-size: cover;
        height : 70px;
    }
    </style>
    
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Pre-Match Formation
            <small>From Schedules</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Schedules</a></li>
            <li class="active">Pre-Match Formation</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">Pre-Match Formation</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" id="formation-container" style="background-color:white;padding-bottom:15px">
                    <label class="col-xs-12">Select Formation</label>
                    <select class="form-control input-database" id="formation_id" style="margin-bottom: 5px">
                        <option value="">
                            ---select Formation---
                        </option>
                        @if ($formations->count() > 0)
                        @foreach($formations AS $formation)
                        <option value="{{$formation['UUID']}}">
                            {{$formation['name']}}
                        </option>
                        @endforeach
                        @endif
                    </select>
                    <button type="button" class="col-xs-12 btn btn-success" id="select-formation-button">
                        Select
                    </button>
                </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:720px;" />
                                                <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').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);
                    });
                    getCurrentPreFormationInfo();
                    $('#main-content').show();
                    $('#loading').hide();
                });
//                
            $('.btn-save').click(function(){
                var name = $('#name').val();
                var columns = new Object();
                var formationID = $('#formation_id').val();
                
                $.post('/admin/schedule/{{$UUID}}/pre/save', {formationID:formationID, "_token": "{{ csrf_token() }}"}, function(res){
                    alert(res);
                    window.location.href = '/admin/schedule/edit/{{$UUID}}';
                },'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');
            });
            
            $('#select-formation-button').click(function(){
                  var formation = $('#formation_id').val();
                  if(formation != '')
                  {
                     getCurrentlyAddedFormation(formation);
                 }
              });
        });
          

function getCurrentlyAddedFormation(UUID)
          {
              $('.green-field-background').removeClass('green-field-background');
                $('#main-content').hide();
                $('#loading').show();
                $.get('/admin/formations/' + UUID + '/players/get',function(res){
                    var count = 1;
                    $(res.formation_positions).each(function(i,value){
                        if(value.inactive == 0)
                        
                        $('[data-position_count_id=' + value.position_columns_id + ']').addClass('green-field-background');
                      //  $('.left-side-player-container').find('[data-player-id=' + playerID + ']').remove();
                     //   }
                    });
                    $('#main-content').show();
                    $('#loading').hide();
              });
              
          }
          
          function getCurrentPreFormationInfo()
          {
              $.get('/admin/schedule/{{$UUID}}/pre/formation',function(res){
                      $('#formation_id').val(res.formation_id);
                      getCurrentlyAddedFormation(res.formation_id);
              },'json');
          }

          </script>
@include('includes.admin.footer')