@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 live match
            <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 live match</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                 <div class="well col-xs-12">
                  <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 live match</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" />
                </div>
                <div class="col-xs-12" id="formation-container" style="background-color:white;padding-bottom:15px;display:none">
                    <label class="col-xs-12">Select Formation</label>
                    <select class="form-control input-database" id="formation_id" style="margin-bottom: 5px">
                        <option value="">
                            ---select Formation---
                        </option>
                        @if ($formations->count() > 0)
                        @foreach($formations AS $formation)
                        <option value="{{$formation['UUID']}}">
                            {{$formation['name']}}
                        </option>
                        @endforeach
                        @endif
                    </select>
                    <button type="button" class="col-xs-12 btn btn-success" id="select-formation-button">
                        Select
                    </button>
                </div>
                <div class='col-xs-12 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>
                                            {{$player['playerPosition']['short_form']}}
                                            
<!--                                            <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' style="display:none;cursor:pointer" data-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>
                                            
                                            {{$player['playerPosition']['short_form']}}
                                            {{$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>

                 <div class="col-xs-12 hcenter" id="loading_to_be_subtituted">
                    <img src="/images/loading.gif" />
                </div>
                    
                    <button type="button" class="btn btn-success pull-right btn-save">Save Player Positions</button>
                </div>

                <div class="col-xs-12 hcenter" id="loading_substitution">
                    <img src="/images/loading.gif" />
                </div>

                    <div class='col-xs-12' style="display:none" id="substitution_container">
                        <h3>
                            Actual Substitutions
                        </h3>
                        <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-4'>
                                    <select class='form-control sub-column-count' 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-4'>
                                        <select class='form-control sub-player' id='new_player_1'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="1">Save</button>
                                         <div class="sub_save_error"></div>
                                    </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-4'>
                                    <select class='form-control sub-column-count' 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-4'>
                                         <select class='form-control sub-player' id='new_player_2'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="2">Save</button>
                                         <div class="sub_save_error"></div>
                                    </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-4'>
                                    <select class='form-control sub-column-count' 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-4'>
                                        <select class='form-control sub-player' id='new_player_3'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="3">Save</button>
                                         <div class="sub_save_error"></div>
                                    </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-4'>
                                    <select class='form-control sub-column-count' 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-4'>
                                        <select class='form-control sub-player' id='new_player_4'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                           @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                   <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="4">Save</button>
                                         <div class="sub_save_error"></div>
                                    </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-4'>
                                    <select class='form-control sub-column-count' 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-4'>
                                        <select class='form-control sub-player' id='new_player_5'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="5">Save</button>
                                         <div class="sub_save_error"></div>
                                    </div>
                           
                        </div>
                    </div>

                     <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Sixth Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-4'>
                                    <select class='form-control sub-column-count' id='column_count_6' 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-4'>
                                        <select class='form-control sub-player' id='new_player_6'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="6">Save</button>
                                         <div class="sub_save_error"></div>
                                    </div>
                           
                        </div>
                    </div>

                     <div class='col-xs-12 well'>
                            <label class='col-xs-12'>
                                Seventh Substitution
                            </label>
                            <div class='col-xs-12'>
                                <div class='col-xs-12 col-sm-4'>
                                    <select class='form-control sub-column-count' id='column_count_7' 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-4'>
                                        <select class='form-control sub-player' id='new_player_7'>
                                            <option value=''>
                                                ---select New Player---
                                            </option>
                                            @if($substitutePlayers->count() > 0 && $schedule->formation_id != null)
                                            @foreach($substitutePlayers AS $player)
                                            <option value="{{$player->player['UUID']}}">{{$player->player['name']}}</option>
                                            @endforeach
                                            @elseif($substitutePlayers->count() == 0 && $schedule->formation_id != null)
                                                @if($players->count() > 0)
                                                    @foreach($players AS $player)
                                                        <option value="{{$player['UUID']}}">{{$player['name']}}</option>
                                                    @endforeach
                                                @endif
                                            @endif
                                        </select>
                                    </div>
                                    <div class='col-xs-12 col-sm-4'>
                                         <button type="button" class="sub-save btn btn-success" data-substitution="7">Save</button>
                                         <div class="sub_save_error"></div>
                                    </div>
                           
                        </div>
                    </div>



                       
                        
                      
                      
                </div> 
              </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();
                            $('#loading_substitution').hide();
                            $('#substitution_container').show();

                            $('#loading_to_be_subtituted').hide();
                            $('#to_be_substituted_container').show();
                        }
                        else
                        {
                            $('#column_count_1').val(res.column_count_1);
                            $('#new_player_1').val(res.new_player_1);
                            
                            $('#column_count_2').val(res.column_count_2);
                            $('#new_player_2').val(res.new_player_2);
                            
                            $('#column_count_3').val(res.column_count_3);
                            $('#new_player_3').val(res.new_player_3);
                           
                            $('#column_count_4').val(res.column_count_4);
                            $('#new_player_4').val(res.new_player_4);
                            
                            $('#column_count_5').val(res.column_count_5);
                            $('#new_player_5').val(res.new_player_5);
                            
                            $('#column_count_6').val(res.column_count_6);
                            $('#new_player_6').val(res.new_player_6);
                            
                            $('#column_count_7').val(res.column_count_7);
                            $('#new_player_7').val(res.new_player_7);
                            
                            $('#formation_id').val(res.formation_id); 
                            
                            $('#loading_substitution').hide();
                            $('#substitution_container').show();


                            getCurrentlyAddedFormation(res.formation_id);
                            getCurrentSubstitutions('{{$UUID}}');

                            $('#loading_to_be_subtituted').hide();
                            $('#to_be_substituted_container').show();

                        }
                    },'json');
              $.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();
                 $('#main-content .input-database').each(function(){
                     data[$(this).attr('id')] = $(this).val();
                 });

                 data['formation_id'] = $('#formation_id').val();

                 var substitution = new Object();
                 $('.substitution-player-new .substitution-players').each(function(i, value){
                    substitution[$(value).attr('data-substitution-count-id')] = $(value).val();
                 })
                 
                 $.post('/admin/schedule/{{$UUID}}/live/players/save', {data:data, columns:columns,substitution:substitution, "_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();
                    $('#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 = '';
                            newDiv = $('[data-player-id=' + playerID + ']').clone();
                           // $(newDiv).find('.goal-count').text(value.goal);
                            $('[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++;
                }
                $('#main-content').removeAttr('style');
            });
                
            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');
            });

            $(document).on('click', '.sub-save', function(){
                var columnNo = $(this).attr('data-substitution');
                var current = $(this);
                $(current).attr('disabled', 'disabled').text('Saving...');
                var parent = $(this).parents('.well').first();
                var data = new Object();
                data['column_count_' + columnNo] = $(parent).find('.sub-column-count').val();
                data['new_player_' + columnNo] = $(parent).find('.sub-player').val();
                $.post('/admin/schedule/{{$UUID}}/substitution/save', {data:data, "_token": "{{ csrf_token() }}"}, function(){
                    $(parent).find('.sub_save_error').html('<div class="alert alert-success">Player Updated Successfully</div>');
                    $(current).removeAttr('disabled').text('Save');
                }).fail(function(xhr) {
                    $(current).removeAttr('disabled').text('Save');
                    var html = '';
                    var res = xhr.responseJSON;
                    $(res).each(function(i, value){
                        html+= value;
                    });
                    $(parent).find('.sub_save_error').html('<div class="alert alert-danger">' + html + '</div>');
                },'json');
            });
         
         
//         $(".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');;
                        count++;
                    });
                },'json');
            }
          </script>
@include('includes.admin.footer')