@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>
      <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");
            var id = ev.target.id;
            
            if(!$('#' + id).hasClass('green-field-background') && id != 'player-drag-area')
            {
                return;
            }
            
            
            
            var expectedPositons = $('#' + src).attr('data-position');
            var expectedPositionsArray = expectedPositons.split(',');
            var currentPosition = $('#' + id).attr('data-position_id');
            //var goalKeeperPositionID = $('.goal-keeper').attr('data-id');
            var goalKeeperPositionID = $('.goal-keeper').attr('data-position_id');
            var goalKeeper = 0;
            
            var color = 'orange';
            var count = 0;
            $(expectedPositionsArray).each(function(i,value){
                
                if(value == currentPosition)
                {
                    color = 'green';
                }
                if(value == goalKeeperPositionID)
                {
                    goalKeeper = 1;
                }
                if(value.trim() != '')
                {
                    count++;
                }
            });
            if(goalKeeper == 0 && color == 'orange' && $('#' + id).hasClass('goal-keeper'))
            {
                alert("This position is reserved for goal keeper");
                return false;
            }
            
            if(goalKeeper == 1 && count == 1 && !$('#' + id).hasClass('goal-keeper'))
            {
                alert("Goal Keeper cannot be selected for a adifferent position");
                return false;
            }
            $('#' + id).find('span').show().attr('style', 'position: absolute;bottom: 20px;background-color: black;width: 100%;left: 0px;font-size: 10px;z-index:10;margin-left:0px');
            
            
            //src = $('#' + src).find('img').attr('id');
           // console.log(src);
        //    $('#' + src).removeClass('col-sm-8');
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            
            if(id != 'player-drag-area')
            {
                $('#' + id).find('.player-area-schedule').attr('style', 'background-color:' + color);
                var positionID = $('#' + src).attr('data-player-id');
                $('#player-drag-area-hidden').find('[data-player-id="' + positionID + '"]').remove();
            }
            else
            {
                $('#' + id).find('.player-area-schedule').removeAttr('style');
                var div = $('#' + src).clone();
                $('#player-drag-area-hidden').append(div);
            }
            
            return false;
         }
      </script>
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Add Players For a Schedule
            <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">Add players for a schedule</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>
                        <button type="button" class="btn btn-success pull-right btn-save">Save Player Positions</button>
                    </h3>
                </div><!-- /.box-header -->
                <div class="col-xs-12 hcenter" id="loading">
                    <img src="/images/loading.gif" class="col-xs-12"/>
                </div>
                <div class="col-xs-12" id="formation-container" style="background-color:white;padding-bottom:15px;display:none">
                    <label class="col-xs-12 formation-area">Select Formation</label>
                    <select class="form-control input-database formation-area" 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 formation-area" id="select-formation-button" style="margin-bottom: 15px">
                        Select
                    </button>
                
                <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' id="player-drag-area" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"  ondragover="return dragOver(event)" style="border-right:1px solid gray;height: 70vh;overflow: auto">
                        <div class="col-xs-12 no-padding" id="player-container-actual-container">
                        @if($players->count() > 0)
                            @foreach($players AS $player)
                                <div data-position="@foreach ($player['multiple_positions'] AS $pos){{$pos['position_id']}},@endforeach"
                                     class='col-xs-12 player-area-schedule
                                     @if ($player['status'] == 'Recovering')
                                        orange-bg
                                     @elseif ($player['status'] != 'Available')
                                        red-bg
                                     @endif' 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 hcenter' style="background-image: url('/uploads/player/{{$player['photo']}}')" id="img-{{$player['UUID']}}">
                                        <span>
                                            @if ($player['playerPosition'])
                                            {{$player['playerPosition']['short_form']}}
                                            @endif
                                            
<!--                                            <br/>
                                            {{$player['tshirt_number']}}-->
                                        </span>
                                    </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">
                                            (
                                                                                        @if (!empty($player->multiple_positions))
                                                @foreach ($player->multiple_positions AS $position)
                                                @if ($count != 0)
                                                    ,
                                                @endif

                                                {{$position->position->short_form}}
                                                                                                    @endforeach
                                            @endif
                                            )
                                            
                                        </div>
                                    </div>
                                    <div class='col-xs-12 player-goals-count'>
                                        <div class='form-control goal-count editable-text-border' placeholder="goal" contenteditable='true'>0</div>
                                    </div>
                                    <div class="close-x" data-id="{{$player['UUID']}}">
                                        x
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        </div>
                    </div>
                    
                    
                    <div class='col-xs-12 col-sm-4 pull-left no-padding left-side-player-container-hidden' id="player-drag-area-hidden" style="display:none" style="border-right:1px solid gray;position:relative;padding-bottom: 60px">
                                                <span id='btn-hide-player-list' style="color:brown;float:left;background-color:white;border:1px solid black;border-radius:30px;padding : 0px 6px;margin-bottom:2px;cursor:pointer">
                                                    x
                                                </span>
                                                @if($players->count() > 0)
                                                <div class="extra-container">
                                                    <div class='col-xs-12 player-area-schedule-test' style="display:none;cursor:pointer" data-test-player-id="{{$player['UUID']}}" draggable="true"
                        ondragstart="return dragStart(event)">
                                                        <div class='col-xs-12 col-sm-4 player-img-container' >
                                                        <span>

                                                        </span>
                                                        </div>
                                                        <div class='col-xs-12 col-sm-8 player-det' >
                                                            <div class='col-xs-12 player-name' style="font-size: 16px">Testing</div>
                                                            <div class='col-xs-12 player-position' style="font-size: 14px;font-weight: normal"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                <div class="container-splitter col-xs-12" style="background-color: lightslategray;color:white;font-size:12px;">
                                    All Players
                                </div>
                                                <div id="all-players">
                            @foreach($players AS $player)
                                
                                <div data-position="@foreach ($player['multiple_positions'] AS $pos){{$pos['position_id']}},@endforeach"
                                    style='cursor:pointer' class='col-xs-12 player-area-schedule 
                                     @if ($player['status'] == 'Recovering')
                                        orange-bg
                                     @elseif ($player['status'] != 'Available')
                                        red-bg
                                     @endif
                                     
                                     ' id="each-player-hidden-{{$player['UUID']}}" data-player-id="{{$player['UUID']}}" draggable="true"
            ondragstart="return dragStart(event)">
                                    <div class='col-xs-12 col-sm-4 player-img-container' style="background-image: url('/uploads/player/{{$player['photo']}}')" id="img-{{$player['UUID']}}">
                                        <span>
                                             @if ($player['playerPosition'])
                                            {{$player['playerPosition']['short_form']}}
                                            @endif
                                            {{$player['tshirt_number']}}</span>
                                    </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">
                                            (
                                                                                        @if (!empty($player->multiple_positions))
                                                @foreach ($player->multiple_positions AS $position)
                                                @if ($count != 0)
                                                    ,
                                                @endif

                                                {{$position->position->short_form}}
                                                                                                    @endforeach
                                            @endif
                                            )
                                        </div>
                                    </div>
                                     <div class='col-xs-12 player-goals-count'>
                                        <div class='form-control goal-count editable-text-border' placeholder="goal" contenteditable='true'>0</div>
                                    </div>
                                    <div class="close-x" data-id="{{$player['UUID']}}">
                                        x
                                    </div>
            
            
            
                                </div>
                            
                            
                            
                                
                            @endforeach
                        @endif
                                                </div>
                    </div>
                    
                    
                    <div class='col-xs-12 col-sm-8 pull-right' id="football-field" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"  ondragover="return dragOver(event)" style="overflow: auto;position:relative">
                        <div class='col-xs-12 no-padding' style="height: 70vh;overflow: auto;background-color: green">
                        <img src='/images/field.png' style="position:absolute;width:100%;height:620px;" />
                                                    <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-0" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-1" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-2" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-3" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-4" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-5" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-6" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-7" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-8" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-9" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-10" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-11" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-12" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-13" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-14" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-15" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-16" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-17" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-18" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-19" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-20" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-21" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-22" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-23" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-24" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-25" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-26" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-27" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-28" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-29" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-30" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-31" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-32" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-33" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-34" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-35" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-36" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-37" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-38" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-39" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-40" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                <div class="each-player-holder each-player-holder-existing
                             
                             " id="field-position-41" data-id="{{$count}}" style="">
                            <span>{{$count}}</span>
                        </div>
                                                </div>
                        <ul class='custom-menu' style="display: none">
                            
  <li data-action="first" id="li-delete">Delete</li>
</ul>
                    </div>
                    
                    
                    
                    <div class='col-xs-12'>
                       
                        <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                First Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-3'>
                                    <select class='form-control input-database' id='column_count_1' placeholder='column count'>
                                        <option value='0'>
                                            ---select Column Count---
                                        </option>
                                        
                                        <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>
                                        
                                        <option value='11'>11</option>
                                        
                                        <option value='12'>12</option>
                                        
                                        <option value='13'>13</option>
                                        
                                        <option value='14'>14</option>
                                        
                                        <option value='15'>15</option>
                                        
                                        <option value='16'>16</option>
                                        
                                        <option value='17'>17</option>
                                        
                                        <option value='18'>18</option>
                                        
                                        <option value='19'>19</option>
                                        
                                        <option value='20'>20</option>
                                        
                                        <option value='21'>21</option>
                                        
                                        <option value='22'>22</option>
                                        
                                        <option value='23'>23</option>
                                        
                                        <option value='24'>24</option>
                                        
                                        <option value='25'>25</option>
                                        
                                        <option value='26'>26</option>
                                        
                                        <option value='27'>27</option>
                                        
                                        <option value='28'>28</option>
                                        
                                        <option value='29'>29</option>
                                        
                                        <option value='30'>30</option>
                                        
                                        <option value='31'>31</option>
                                        
                                        <option value='32'>32</option>
                                        
                                        <option value='33'>33</option>
                                        
                                        <option value='34'>34</option>
                                        
                                        <option value='35'>35</option>
                                        
                                        <option value='36'>36</option>
                                        
                                        <option value='37'>37</option>
                                        
                                        <option value='38'>38</option>
                                        
                                        <option value='39'>39</option>
                                        
                                        <option value='40'>40</option>
                                        
                                        <option value='41'>41</option>
                                        
                                        <option value='42'>42</option>
                                                                            </select>
                                </div>
                                    <div class='col-xs-12 col-sm-3'>
                                        <select class='form-control input-database' id='new_player_1'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($players->count() > 0)
                                            @foreach($players AS $player)
                                            <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='date' class='form-control input-database date-game' id='date_1' placeholder='Date'/>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='time' class='form-control input-database' id='time_1' placeholder='Time'/>
                                    </div>
                           
                        </div>
                    </div>
                        <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Second Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-3'>
                                    <select class='form-control input-database' id='column_count_2' placeholder='column count'>
                                        <option value='0'>
                                            ---select Column Count---
                                        </option>
                                        
                                        <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>
                                        
                                        <option value='11'>11</option>
                                        
                                        <option value='12'>12</option>
                                        
                                        <option value='13'>13</option>
                                        
                                        <option value='14'>14</option>
                                        
                                        <option value='15'>15</option>
                                        
                                        <option value='16'>16</option>
                                        
                                        <option value='17'>17</option>
                                        
                                        <option value='18'>18</option>
                                        
                                        <option value='19'>19</option>
                                        
                                        <option value='20'>20</option>
                                        
                                        <option value='21'>21</option>
                                        
                                        <option value='22'>22</option>
                                        
                                        <option value='23'>23</option>
                                        
                                        <option value='24'>24</option>
                                        
                                        <option value='25'>25</option>
                                        
                                        <option value='26'>26</option>
                                        
                                        <option value='27'>27</option>
                                        
                                        <option value='28'>28</option>
                                        
                                        <option value='29'>29</option>
                                        
                                        <option value='30'>30</option>
                                        
                                        <option value='31'>31</option>
                                        
                                        <option value='32'>32</option>
                                        
                                        <option value='33'>33</option>
                                        
                                        <option value='34'>34</option>
                                        
                                        <option value='35'>35</option>
                                        
                                        <option value='36'>36</option>
                                        
                                        <option value='37'>37</option>
                                        
                                        <option value='38'>38</option>
                                        
                                        <option value='39'>39</option>
                                        
                                        <option value='40'>40</option>
                                        
                                        <option value='41'>41</option>
                                        
                                        <option value='42'>42</option>
                                                                            </select>
                                </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <select class='form-control input-database' id='new_player_2'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($players->count() > 0)
                                            @foreach($players AS $player)
                                            <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='date' class='form-control input-database date-game' id='date_2' placeholder='Date'/>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='time' class='form-control input-database' id='time_2' placeholder='Time'/>
                                    </div>
                           
                        </div>
                    </div>
                    <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Third Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-3'>
                                    <select class='form-control input-database' id='column_count_3' placeholder='column count'>
                                        <option value='0'>
                                            ---select Column Count---
                                        </option>
                                        
                                        <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>
                                        
                                        <option value='11'>11</option>
                                        
                                        <option value='12'>12</option>
                                        
                                        <option value='13'>13</option>
                                        
                                        <option value='14'>14</option>
                                        
                                        <option value='15'>15</option>
                                        
                                        <option value='16'>16</option>
                                        
                                        <option value='17'>17</option>
                                        
                                        <option value='18'>18</option>
                                        
                                        <option value='19'>19</option>
                                        
                                        <option value='20'>20</option>
                                        
                                        <option value='21'>21</option>
                                        
                                        <option value='22'>22</option>
                                        
                                        <option value='23'>23</option>
                                        
                                        <option value='24'>24</option>
                                        
                                        <option value='25'>25</option>
                                        
                                        <option value='26'>26</option>
                                        
                                        <option value='27'>27</option>
                                        
                                        <option value='28'>28</option>
                                        
                                        <option value='29'>29</option>
                                        
                                        <option value='30'>30</option>
                                        
                                        <option value='31'>31</option>
                                        
                                        <option value='32'>32</option>
                                        
                                        <option value='33'>33</option>
                                        
                                        <option value='34'>34</option>
                                        
                                        <option value='35'>35</option>
                                        
                                        <option value='36'>36</option>
                                        
                                        <option value='37'>37</option>
                                        
                                        <option value='38'>38</option>
                                        
                                        <option value='39'>39</option>
                                        
                                        <option value='40'>40</option>
                                        
                                        <option value='41'>41</option>
                                        
                                        <option value='42'>42</option>
                                                                            </select>
                                </div>
                                    <div class='col-xs-12 col-sm-3'>
                                        <select class='form-control input-database' id='new_player_3'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($players->count() > 0)
                                            @foreach($players AS $player)
                                            <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='date' class='form-control input-database date-game' id='date_3' placeholder='Date'/>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='time' class='form-control input-database' id='time_3' placeholder='Time'/>
                                    </div>
                           
                        </div>
                    </div>

                    <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Fourth Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-3'>
                                    <select class='form-control input-database' id='column_count_4' placeholder='column count'>
                                        <option value='0'>
                                            ---select Column Count---
                                        </option>
                                        
                                        <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>
                                        
                                        <option value='11'>11</option>
                                        
                                        <option value='12'>12</option>
                                        
                                        <option value='13'>13</option>
                                        
                                        <option value='14'>14</option>
                                        
                                        <option value='15'>15</option>
                                        
                                        <option value='16'>16</option>
                                        
                                        <option value='17'>17</option>
                                        
                                        <option value='18'>18</option>
                                        
                                        <option value='19'>19</option>
                                        
                                        <option value='20'>20</option>
                                        
                                        <option value='21'>21</option>
                                        
                                        <option value='22'>22</option>
                                        
                                        <option value='23'>23</option>
                                        
                                        <option value='24'>24</option>
                                        
                                        <option value='25'>25</option>
                                        
                                        <option value='26'>26</option>
                                        
                                        <option value='27'>27</option>
                                        
                                        <option value='28'>28</option>
                                        
                                        <option value='29'>29</option>
                                        
                                        <option value='30'>30</option>
                                        
                                        <option value='31'>31</option>
                                        
                                        <option value='32'>32</option>
                                        
                                        <option value='33'>33</option>
                                        
                                        <option value='34'>34</option>
                                        
                                        <option value='35'>35</option>
                                        
                                        <option value='36'>36</option>
                                        
                                        <option value='37'>37</option>
                                        
                                        <option value='38'>38</option>
                                        
                                        <option value='39'>39</option>
                                        
                                        <option value='40'>40</option>
                                        
                                        <option value='41'>41</option>
                                        
                                        <option value='42'>42</option>
                                                                            </select>
                                </div>
                                    <div class='col-xs-12 col-sm-3'>
                                        <select class='form-control input-database' id='new_player_4'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($players->count() > 0)
                                            @foreach($players AS $player)
                                            <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='date' class='form-control input-database date-game' id='date_4' placeholder='Date'/>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='time' class='form-control input-database' id='time_4' placeholder='Time'/>
                                    </div>
                           
                        </div>
                    </div>

                    <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Fifth Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-3'>
                                    <select class='form-control input-database' id='column_count_5' placeholder='column count'>
                                        <option value='0'>
                                            ---select Column Count---
                                        </option>
                                        
                                        <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>
                                        
                                        <option value='11'>11</option>
                                        
                                        <option value='12'>12</option>
                                        
                                        <option value='13'>13</option>
                                        
                                        <option value='14'>14</option>
                                        
                                        <option value='15'>15</option>
                                        
                                        <option value='16'>16</option>
                                        
                                        <option value='17'>17</option>
                                        
                                        <option value='18'>18</option>
                                        
                                        <option value='19'>19</option>
                                        
                                        <option value='20'>20</option>
                                        
                                        <option value='21'>21</option>
                                        
                                        <option value='22'>22</option>
                                        
                                        <option value='23'>23</option>
                                        
                                        <option value='24'>24</option>
                                        
                                        <option value='25'>25</option>
                                        
                                        <option value='26'>26</option>
                                        
                                        <option value='27'>27</option>
                                        
                                        <option value='28'>28</option>
                                        
                                        <option value='29'>29</option>
                                        
                                        <option value='30'>30</option>
                                        
                                        <option value='31'>31</option>
                                        
                                        <option value='32'>32</option>
                                        
                                        <option value='33'>33</option>
                                        
                                        <option value='34'>34</option>
                                        
                                        <option value='35'>35</option>
                                        
                                        <option value='36'>36</option>
                                        
                                        <option value='37'>37</option>
                                        
                                        <option value='38'>38</option>
                                        
                                        <option value='39'>39</option>
                                        
                                        <option value='40'>40</option>
                                        
                                        <option value='41'>41</option>
                                        
                                        <option value='42'>42</option>
                                                                            </select>
                                </div>
                                    <div class='col-xs-12 col-sm-3'>
                                        <select class='form-control input-database' id='new_player_5'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($players->count() > 0)
                                            @foreach($players AS $player)
                                            <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='date' class='form-control input-database date-game' id='date_5' placeholder='Date'/>
                                    </div>
                                    <div class='col-xs-12 col-sm-3'>
                                         <input type='time' class='form-control input-database' id='time_5' placeholder='Time'/>
                                    </div>
                           
                        </div>
                    </div>
                       
                        
                      
                      
                </div>
              </div>
               <button type="button" class="btn btn-success pull-right btn-save">Save Player Positions</button>
          </div>
          <div class="col-xs-12" id="substitution-container" style="background-color:white;padding-bottom:15px;margin-top:15px;padding-top:15[px">
            <div class="col-xs-12 hcenter" id="loading_to_be_subtituted">
                    <img src="/images/loading.gif" class="col-xs-12"/>
                </div>
                    <div class='col-xs-12' id="to_be_substituted_container" style="display:none">
                        <h3>
                            Players whom can be substituted
                        </h3>
                        <table class="table table-bordered table-striped">
                                                        <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                    <tr>
                                <th>
                                    Substitution {{$i}}
                                </th>
                                <td>
                                    <select class='form-control substitution-players substitution-player-new' id='substitution_{{$i}}' data-substitution-count-id="{{$i}}">
                                        <option value=''>
                                            ---select New Player---
                                        </option>
                                        @if($players->count() > 0)
                                        @foreach($players AS $player)
                                        <option value='{{$player['UUID']}}'>{{$player['name']}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div class="sub-error col-xs-12 no-padding">

                                    </div>
                                </td>
                            </tr>
                                                </table>
                    </div>
                    <button type="button" class="btn btn-success pull-right btn-save-subtitutions">Save Substitution Players</button>
          </div>
            </div>
          </div>
        </section>
</div>
            
            
      
      <script>
          $(document).ready(function(){
              $.get('/admin/schedule/{{$UUID}}',{"_token": "{{ csrf_token() }}"}, function(res){
                  
                        if(res.formation_id == '' || res.formation_id == null)
                        {
                            console.log("a");
                            $('#formation-container').show();
                        }
                        else
                        {
                            $('#column_count_1').val(res.column_count_1);
                            $('#new_player_1').val(res.new_player_1);
                            if(res.date_1 == '')
                            {
                                $('#date_1').val(res.date_1);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            $('#time_1').val(res.time_1);
                            
                            $('#column_count_2').val(res.column_count_2);
                            $('#new_player_2').val(res.new_player_2);
                            if(res.date_2 == '')
                            {
                                $('#date_2').val(res.date_2);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            
                            $('#time_2').val(res.time_2);
                            
                            $('#column_count_3').val(res.column_count_3);
                            $('#new_player_3').val(res.new_player_3);
                            if(res.date_3 == '')
                            {
                                $('#date_3').val(res.date_3);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            
                            $('#time_3').val(res.time_3);
                            
                            $('#column_count_4').val(res.column_count_4);
                            $('#new_player_4').val(res.new_player_4);
                            if(res.date_4 == '')
                            {
                                $('#date_4').val(res.date_4);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            $('#time_4').val(res.time_4);
                            
                            $('#column_count_5').val(res.column_count_5);
                            $('#new_player_5').val(res.new_player_5);
                            if(res.date_5 == '')
                            {
                                $('#date_5').val(res.date_5);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            $('#date_5').val(res.date_5);
                            $('#time_5').val(res.time_5);
                            
                            $('#column_count_6').val(res.column_count_6);
                            $('#new_player_6').val(res.new_player_6);
                            if(res.date_6 == '')
                            {
                                $('#date_6').val(res.date_6);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            
                            $('#time_6').val(res.time_6);
                            
                            $('#column_count_7').val(res.column_count_7);
                            $('#new_player_7').val(res.new_player_7);
                            if(res.date_7 == '')
                            {
                                $('#date_7').val(res.date_7);
                            }
                            else
                            {
                                $('.date-game').val(res.date_date);
                            }
                            
                            $('#time_7').val(res.time_7);
                            $('#formation_id').val(res.formation_id);
                            
                            getCurrentlyAddedFormation(res.formation_id);
                            $('.formation-area').hide();
                        }
                    },'json');


                    getCurrentSubstitutions('{{$UUID}}');
                      $.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 player</span>');
                        $(res).each(function(i, value){
                            if(value.inactive == 0)
                            {
                              //  $('[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);
                            }
                        });
                        getScheduledPlayersList('{{$UUID}}');
                       // $('#formation-container').show();
                        $('#loading').hide();
                 
                    
              });
              
              
              $('#select-formation-button').click(function(){
                  var formation = $('#formation_id').val();
                     getCurrentlyAddedFormation(formation);
              });


             $(document).on('click','.btn-save', function(){
                $('#player-drag-area-hidden').hide();
                current  = 0;
                var columns = new Object();
               /* $('.player-area-schedule').each(function(i, value){
                    console.log(value);
                    if($(value).find('.player-area-schedule').length > 0)
                    {
                        console.log($(value).find('.player-area-schedule').length);
                        if (typeof $(value).find('.player-area-schedule').attr('data-player-id') !== typeof undefined && $(value).find('.player-area-schedule').attr('data-player-id') !== false) {
                           
                            columns[$(value).attr('data-position_count_id')] = new Object();
                           columns[$(value).attr('data-position_count_id')]['player_id'] = $(value).find('.player-area-schedule').attr('data-player-id');
                           columns[$(value).attr('data-position_count_id')]['goal'] = $(value).find('.goal-count').text().trim();
                        }
                    }
                }); */

                $('.each-player-holder').each(function(){
                    if($(this).find('.player-area-schedule').length > 0)
                    {
                        if (typeof $(this).find('.player-area-schedule').attr('data-player-id') !== typeof undefined && $(this).find('.player-area-schedule').attr('data-player-id') !== false) {
                           
                            columns[$(this).attr('data-position_count_id')] = new Object();
                           columns[$(this).attr('data-position_count_id')]['player_id'] = $(this).find('.player-area-schedule').attr('data-player-id');
                           columns[$(this).attr('data-position_count_id')]['goal'] = $(this).find('.goal-count:visible').text().trim();
                        }
                    }
                });

                 var data = new Object();
                 $('.input-database').each(function(){
                     data[$(this).attr('id')] = $(this).val();
                 });
                 
                 console.log(columns);
                 $.post('/admin/schedule/{{$UUID}}/players/save', {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 getCurrentlyAddedFormation(UUID)
          {
              $('.green-field-background').removeClass('green-field-background');
                $('#main-content').hide();
               // $('#formation-container').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)
                        {
                        //var playerID = value.player_id;
                       // var newDiv = '';
                       // newDiv = $('[data-player-id=' + playerID + ']').clone();
                        $('[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();
                    $('#formation-container').show();
                   // $('#formation-container').show();
                    $('#loading').hide();
              });
              
          }
          
          function getScheduledPlayersList(UUID)
          {
            //  $('.green-field-background').removeClass('green-field-background');
                $('#main-content').hide();
              //  $('#formation-container').hide();
                $('#loading').show();
                $.get('/admin/schedule/' + UUID + '/players/get',function(res){
                    var count = 1;
                    $(res).each(function(i,value){
                        if(value.inactive == 0)
                        {
                            var playerID = value.player_id;
                            var newDiv = '';
                            if($('[data-position_count_id=' + value.position_columns_id + '] [data-player-id=' + playerID + ']').length == 0)
                            {
                                newDiv = $('#all-players [data-player-id="' + playerID + '"]').clone();
                                $(newDiv).find('.goal-count').text(value.goal);
                               // $(newDiv).addClass('player-area-schedule').removeClass('player-area-schedule-test');
                                console.log(newDiv);
                                $('[data-position_count_id=' + value.position_columns_id + ']').append(newDiv);
                                $('.left-side-player-container').find('[data-player-id=' + playerID + ']').remove();
                            }
                        }
                    });
                    $('#main-content').show();
                    $('#formation-container').show();
                    $('#loading').hide();
              });
          }
          
         
         $(document).on('click', '.close-x', function(){
             var playerID = $(this).attr('data-id');
             var scheduleID = '{{$UUID}}';
             $.post("/admin/schedule/players/delete", {playerID:playerID, scheduleID:scheduleID, "_token": "{{ csrf_token() }}"}, function(res){
                 location.reload();
             }).fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                            html+= value;
                        });
                        alert(html);
                    },'json');
         });
         
          $(document).on('click', '.green-field-background', function(event){
                var positionID = $(this).attr('data-position_id');
                var viewportWidth = $(window).width();
                if(viewportWidth > 768)
                {
                    $("#player-drag-area-hidden").show().attr('style', 'position:absolute; top:' + (event.pageY - $('#main-content').offset().top) + 'px;left: ' + (event.pageX - ($('#main-content').offset().left + 200))  + 'px;z-index:10000');
                }
                else
                {
                    $("#player-drag-area-hidden").show().attr('style', 'position:fixed; top:0px;left: 0px;bottom:0px;width:100%;z-index:10000;overflow:auto');
                }

                var absoluteMenuHeight = $('#player-drag-area-hidden').height();
                var absoluteMenuHeightOffset = $('#player-drag-area-hidden').offset().top;
                var bodyHeight = Number(absoluteMenuHeight) + Number(absoluteMenuHeightOffset) + Number(100);
                $('#main-content').attr('style', 'min-height:' + bodyHeight + 'px');
                current = $(this).attr('id');
                $('.extra-container').html('');
                
                $('#all-players .player-area-schedule').each(function(i, value){
                    var positionString = $(value).attr('data-position');
                    if(positionString.trim() != '')
                    {
                        var postionStringArray = positionString.split(',');
                        $(postionStringArray).each(function(i1, value1)
                        {
                            if(value1 == positionID)
                            {
                                var clone = $(value).clone();
                                var id = $(clone).attr('id');
                                clone = $(clone).attr('id', id + '1');
                                $('.extra-container').append(clone)
                            }
                        });
                        
                    }
                });
            });
            
            
            $(document).on('click', '#player-drag-area-hidden .player-area-schedule', function(){
                
                var id = $(this).attr('data-player-id');
                if($('#football-field').find('[data-player-id="' + id + '"]').length)
                {
                    alert("Player already selected at a different position");
                    return 0;
                }
                console.log(id);
                if($(this).hasClass('red-bg'))
                {
                    alert("This player cannot be selectedd since he is Injured / Suspended");
                    return false;;
                }
                if($(this).hasClass('orange-bg'))
                {
                    var conf = confirm("This player is Injured. Are you sure you want to add him");
                    if(!conf)
                    {
                        return false;
                    }
                }
                
                
                var expectedPositons = $(this).attr('data-position');
                var expectedPositionsArray = expectedPositons.split(',');
                var currentPosition = $('#' + current).attr('data-position_id');
                //var goalKeeperPositionID = $('.goal-keeper').attr('data-id');
                var goalKeeperPositionID = $('.goal-keeper').attr('data-position_id');
                var goalKeeper = 0;
                
                var color = 'orange';
                var count = 0;
                $(expectedPositionsArray).each(function(i,value){
                
                    if(value == currentPosition)
                    {
                        color = 'green';
                    }
                    if(value == goalKeeperPositionID)
                    {
                        goalKeeper = 1;
                    }
                    if(value.trim() != '')
                    {
                        count++;
                    }
                    
                });
                    
                if(goalKeeper == 0 && color == 'orange' && $('#' + current).hasClass('goal-keeper'))
                {
                    alert("This position is reserved for goal keeper");
                    return false;
                }
                
                if(goalKeeper == 1 && count == 1 && !$('#' + current).hasClass('goal-keeper'))
                {
                    alert("Goal Keeper cannot be selected for a adifferent position");
                    return false;
                }
                
                var div = $(this).clone().attr('style', 'background-color:' + color);
                var playerID = $(div).attr('data-player-id');
                $(this).remove();
                $('#player-drag-area').find('[data-player-id="' + playerID + '"]').remove();
                if($('#' + current).find('.player-area-schedule').length != 0)
                {
                    var alreadyAdded = $('#' + current).find('.player-area-schedule').clone().removeAttr('style');
                    var alreadyAdded1 = alreadyAdded.clone();
                    $('#' + current).find('.player-area-schedule').remove();
                    console.log("a");
                    $('#player-drag-area-hidden').append(alreadyAdded);
                    $('#player-drag-area').append(alreadyAdded1);
                }
                $('#' + current).append(div);
                current  = 0;
                $("#player-drag-area-hidden").hide();
                
                
            });
            
            $(document).on('click', '#btn-hide-player-list', function(){
                $('#player-drag-area-hidden').hide();
                current  = 0;
                $('#main-content').removeAttr('style');
            });
         
         
//         $(".green-field-background").on("contextmenu",function(event){
//            // Avoid the real one
//                event.preventDefault();
//
//                // Show contextmenu
//                $(".custom-menu").show().attr('style', 'position:absolute; top:' + (event.pageY - $('#main-content').offset().top) + 'px;left: ' + (event.pageX - ($('#main-content').offset().left + 100))  + 'px;z-index:10000');
//
//         }); 

            function getCurrentSubstitutions($scheduleID)
            {
                $.get('/admin/schedule/' + $scheduleID + '/substitutions/get', function(value){
                    var count = 1;
                    console.log("a");
                    console.log(value);
                    $(value).each(function(i1, value1){
                        console.log(value1);
                        $('#substitution_' + count).val(value1.player_id).removeClass('substitution-player-new').addClass('substitution-player-existing').attr('data-substitution_id', value1.UUID);
                        count++;
                    });
                    hideLoading();;
                },'json');
            }

            function hideLoading()
            {
                $('#loading_to_be_subtituted').hide();
                $('#to_be_substituted_container').show();
            }

            $(document).on('click', '.btn-save-subtitutions', function(){
                $('.btn-save-subtitutions').attr('disabled', 'disabled');
                var substitution = new Object();
                var count = 0;
                $('.substitution-player-new').each(function(i, value){
                    if($(value).val().trim() != '')
                    {
                        substitution[count] = $(value).val();
                        count++;
                    }
                });
                saveSubstitutionPlayers(substitution);
            });

            $(document).on('change', '.substitution-player-existing', function(){
                var playerID = $(this).val();
                var substitutionID = $(this).attr('data-substitution_id');
                var parent = $(this).parents('td').first();
                $(parent).find('.sub-error').html('<div class="alert alert-warning">Updating Player</div>');
                $.post('/admin/schedule/{{$UUID}}/substitution/' + substitutionID + '/update', {'player_id': playerID, "_token": "{{ csrf_token() }}"}, function(res){
                    $(parent).find('.sub-error').html('<div class="alert alert-success">' + res + '</div>');
                },'json')
                .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                            html+= '<p>' + value + '</p>';
                        });
                        $(parent).find('.sub-error').html('<div class="alert alert-danger">' + html + '</div>');
                        //$('#btn-submit').html('Submit').removeAttr('disabled');
                       // window.location.href = '#body';
                        $('.btn-save-subtitutions').removeAttr('disabled');
                    },'json');;;
            });

            function saveSubstitutionPlayers(substitution)
            {
                $.post('/admin/schedule/{{$UUID}}/substitution/save', {substitution:substitution, "_token": "{{ csrf_token() }}"}, function(res){
                     alert(res);
                     $('.btn-save-subtitutions').removeAttr('disabled');
                     window.location.href = '#body';
                 },'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';
                        $('.btn-save-subtitutions').removeAttr('disabled');
                    },'json');;;
            }
          </script>
@include('includes.admin.footer')