@include('includes.main.header')
<script src="/countdown/jquery.countdown.js"></script>
<style>
    .each-player-holder .player-area-schedule
    {
        position : absolute;
        color:darkblue !important;
        top : 0px;
    }
    
    .each-player-holder, .each-player-holder .player-area-schedule
    {
        height : 100px;
    }
    
    .player-img-container
    {
        background-position: 50% 50%;
        background-size: cover;
    }
</style>
    <script type="text/javascript">
         function dragStart(ev) {
             var id =  ev.target.getAttribute('id');
             var parent = $('#' + id).parents('.each-player-holder').first();
             $(parent).find('.each-column-count-block').attr('style', 'background-color:black');
             if($('#' + id).hasClass('red-bg'))
             {
                 alert("This player cannot be selectedd since he is Injured / Suspended");
                 return false;;
             }
             if($('#' + id).hasClass('orange-bg'))
             {
                 var conf = confirm("This player is Injured. Are you sure you want to add him");
                 if(!conf)
                 {
                     return false;
                 }
             }
            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>
<!--Work-Starts-Here-->
    <!-- content-section-starts -->
    <div class="gallery-content">
	<div class="container">
		<div class="gallery-content-head text-left">
			<h3>Tactics</h3>
                        
                        <h4>Recommend the line-up and tactics for Match: <span id="match_name"></span></h4>
		</div>
			<div class="section group">
                            <div class="col-xs-12 no-padding margin-t-5" id="main-area" >
                                    
                                    <div class="col-xs-12 margin-t-10 ">
                                        <div class="col-xs-12 error" style="margin-bottom:5px;display: none">
                                            
                                        </div>
                                        <div class="col-xs-12 hcenter" id="loading">
                    <img src="/images/loading.gif" />
                </div>       
                                        <h3 class="not-available col-xs-12 hcenter" style="display:none;color:brown">
                                            There is no match scheduled in the next <span id="no_of_days"></span> days!
                                        </h3>
                                       
                                        
                                        <div id="tactics-head" style="margin-bottom: 10px"><span class="pull-right">&nbsp; votes&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> <span class="editable-text-border pull-right hcenter vote-count" contenteditable="true">7</span>&nbsp;<span class="pull-right">Use &nbsp;</span></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 hidden-xs' id="player-drag-area" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"  ondragover="return dragOver(event)" style="position:relative;padding-bottom: 60px">
                                                    <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"
                                    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-{{$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'>{{$player['name']}}</div>
                                        <div class='col-xs-12 player-position' style="font-size: 14px;font-weight: normal">{{$player['playerPosition']['name']}}</div>
                                    </div>
                                </div>
                            
                            
                            
                                
                            @endforeach
                        @endif
                                                </div>
                        <div class="col-xs-12 hcenter" id="drop-players">
                            Drop Players Below....
                        </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">{{$player['playerPosition']['name']}}</div>
                                    </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)" >
                        <div class='col-xs-12 no-padding' style="position: relative">
                            <img src='/images/field.png' style="position:absolute;width:100%;height:600px;" />
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-0" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-1" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-2" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-3" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-4" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-5" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-6" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-7" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-8" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-9" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-10" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-11" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-12" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-13" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-14" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-15" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-16" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-17" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-18" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-19" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-20" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-21" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-22" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-23" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-24" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-25" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-26" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-27" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-28" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-29" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-30" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-31" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-32" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-33" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-34" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-35" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-36" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-37" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-38" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-39" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-40" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                <div class="each-player-holder
                             @if ($i == 38)
                             goal-keeper
                             @endif
                             " id="field-position-41" data-id="{{$count}}" style="">
                            <span class="each-column-count-block" style="display:none">{{$count}}</span>
                        </div>
                                                </div>
                    </div>
                                            
                                            <div class="col-xs-12 top-margin">
                                                <div class="form-group">
                                                    <label class="col-xs-12 col-sm-3 top-margin">
                                                        Captain
                                                    </label>
                                                    <div class="col-xs-12 col-sm-9 top-margin">
                                                        <select class="form-control" id="captain">
                                                            <option value="">---select Captain---</option>
                                                            @if($players->count() > 0)
                                                                @foreach($players AS $player)
                                                                <option value="{{$player['UUID']}}">{{$player['name']}}
                                                                </option>
                                
                            @endforeach
                        @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-xs-12 col-sm-3 top-margin">
                                                        Freekick Taker
                                                    </label>
                                                    <div class="col-xs-12 col-sm-9 top-margin">
                                                        <select class="form-control" id="freekick">
                                                            <option value="">---select Freekick Taker---</option>
                                                            @if($players->count() > 0)
                                                                @foreach($players AS $player)
                                                            <option value="{{$player['UUID']}}">{{$player['name']}}
                                                                </option>
                                                                @endforeach
                        @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-xs-12 col-sm-3 top-margin">
                                                        Corner Taker
                                                    </label>
                                                    <div class="col-xs-12 col-sm-9 top-margin">
                                                        <select class="form-control" id="corner">
                                                            <option value="">---select Corner Taker---</option>
                                                            @if($players->count() > 0)
                                                                @foreach($players AS $player)
                                                            <option value="{{$player['UUID']}}">{{$player['name']}}
                                                                </option>
                                                                @endforeach
                        @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-xs-12 col-sm-3 top-margin">
                                                        Penalty Taker
                                                    </label>
                                                    <div class="col-xs-12 col-sm-9 top-margin">
                                                        <select class="form-control" id="penalty">
                                                            <option value="">---select Penalty Taker---</option>
                                                            @if($players->count() > 0)
                                                                @foreach($players AS $player)
                                                            <option value="{{$player['UUID']}}">{{$player['name']}}
                                                                </option>
                                                                @endforeach
                        @endif
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group top-margin">
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="More Defensive" id="str-1-1" name="str-1">&nbsp;&nbsp;&nbsp;More Defensive
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="Balanced" id="str-1-2" name="str-1">&nbsp;&nbsp;&nbsp;Balanced
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="More Attacking" id="str-1-3" name="str-1">&nbsp;&nbsp;&nbsp;More Attacking
                                                    </div>
                                                </div>
                                                <div class="form-group top-margin">
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="Counter Attack" id="str-2-1" name="str-2">&nbsp;&nbsp;&nbsp;Counter Attack
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="Possession Game" id="str-2-2" name="str-2">&nbsp;&nbsp;&nbsp;Possession Game
                                                    </div>
                                                    <div class="col-xs-12 col-sm-4 top-margin">
                                                        <input type="radio" value="Long Ball" id="str-2-3" name="str-2">&nbsp;&nbsp;&nbsp;Long Ball
                                                    </div>
                                                </div>
                                                <div class="col-xs-12 top-margin hcenter pull-right">
                                                    <span class="pull-right">&nbsp; votes</span> <span class="editable-text-border pull-right  vote-count" id="vote-count" contenteditable="true">7</span>&nbsp;<span class="pull-right">Use &nbsp;</span>
                                                </div>
                                                <button type="button" class="btn btn-success pull-right btn-save" style="margin-bottom: 10px;margin-top:15px">Save Tactics</button>
                                            </div>
                                    
                                            
                                            </div>
                                        <div class="gallery-content-head text-left col-xs-12"  style="margin-top:25px">
                                         <h3 class="xol-xs-12">Tactic Suggestions</h3>   
                                            </div>   
                                         <form class="col-xs-12" >
                                        <div class="col-xs-12">
                                            <textarea class="form-control" placeholder="Tactic Suggestions" id="suggestions"></textarea>
                                        </div>
                                        
                                        <div class="col-sm-2 col-xs-12  margin-t-5">
                                            <button class="btn btn-success pull-right col-xs-12" id="btn-propose" type="button">Propose</button>
                                        </div>
                                    </form>
                                    <div class="col-xs-12 margin-t-10 table-responsive">
                                    <table class="table table-bordered  table-striped table-condensed" id="proposal-table">
                                        <thead>
                                            <tr>
                                                <th colspan="3" style="text-align:center">
                                                    Tactics Proposals/ Coach Response
                                                </th>
                                            </tr>
                                            <tr>
                                                <th>
                                                    Player Details
                                                </th>
                                                <th>Admin Response</th>
                                               
                                            </tr>
                                        </thead>
                                        <tbody>
                                           
                                        </tbody>
                                    </table>
                                       
                                    </div>
                                    </div>
				</div>
                            
				
			</div> 	
             
             <div class="col-xs-12">
                 
             </div>
			
   </div>
        
</div>

<script>
    var current = 0;
    var scheduleID = 0;
    
    $(window).resize(function() {
        setPlayerContainerHeight();
    });
    
          $(document).ready(function(){
              getAllTacticSuggestions();
              $.get('/api/v1/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">Position not specified</span>');
                  $(res).each(function(i, value){
                       
                        $('[data-id=' + value.column_count + ']').addClass('green-field-background');
                      //  $('[data-id=' + value.column_count + ']').find('span').show();
                        
                        if(value.position.short_form == 'GK')
                        {
                            $('[data-id=' + value.column_count + ']').html(value.position.short_form + '<br/>').attr('style', 'background-image:url("/uploads/goalKeeper/{{$profile->default_goal_keeper}}")');
                        }
                        
                        $('[data-id=' + value.column_count + ']').find('span').html(value.position.short_form).attr('style', 'z-index:1000;background-color:black').hide();
                        $('[data-id=' + value.column_count + ']').attr('data-position_id', value.position_id);
                        $('[data-id=' + value.column_count + ']').attr('data-position_count_id', value.UUID);
                    });
                    getComingSchedulePre();
                  //   $('#main-content').show();
                 //   $('#loading').hide();
              });
              
              
              $('#btn-propose').click(function(){
                    var current = $(this);
                    $(this).attr('disabled', 'disabled').text('Saving Proposal...');
                    var data = new Object();
                    data['suggestions'] = $('#suggestions').val();
                    $.post('/api/v1/tactic/suggestion/add', {data:data,_token:'{{ csrf_token() }}'}, function(res){
                        alert("Suggestion Updated Successfully");
                        $('.error').hide();
                        getAllTacticSuggestions();
                        current.removeAttr('disabled').text('Propose');
                        $('.gallery-content').find('.form-control').val('');
                    })
                    .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= '<p>' + value + '</p>';
                        });
                        $('.error').html(html).show();
                        current.html('Propose').removeAttr('disabled');
                        window.location.href = '#body';
                    },'json');
                });
              
              
             $('.btn-save').click(function(){
                var columns = new Object();
                 $('.each-player-holder').each(function(){
                   
                    if($(this).find('.player-area-schedule').length > 0)
                    {
                        columns[$(this).attr('data-position_count_id')] = $(this).find('.player-area-schedule').attr('data-player-id');
                        
                    }
                 });
                 
                 var data = new Object();
                 data['schedule_id'] = scheduleID;
                 data['captain'] = $('#captain').val();
                 data['freekick'] = $('#freekick').val();
                 data['corner'] = $('#corner').val();
                 data['penalty'] = $('#penalty').val();
                if($('#str-1-1').is(':checked'))
                {
                     data['str-1'] = 'More Defensive';
                }
                else if($('#str-1-2').is(':checked'))
                {
                     data['str-1'] = 'Balanced';
                }
                else if($('#str-1-3').is(':checked'))
                {
                     data['str-1'] = 'More Attacking';
                }
                
                if($('#str-2-1').is(':checked'))
                {
                     data['str-2'] = 'Counter Attack';
                }
                else if($('#str-2-2').is(':checked'))
                {
                     data['str-2'] = 'Possession Game';
                }
                else if($('#str-2-3').is(':checked'))
                {
                     data['str-2'] = 'Long Ball';
                }
                data['votes'] = $('#vote-count').text();
                 
                 $.post('/api/v1/tactics/players/save', {columns:columns,data:data, "_token": "{{ csrf_token() }}"}, function(res){
                     alert(res);
                     window.location.href = '/tactics/results';
                 },'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');;;
             });
             
             $('.vote-count').blur(function(){
                var count = $(this).text();
                var availableVotes = $(this).attr('data-votes');
                if(isNaN($(this).text()))
                {
                    alert("Please enter a digit");
                    $(this).text(availableVotes);
                    return;
                }
                
                if(Number(count) > availableVotes)
                {
                    alert("Only " + availableVotes + " votes available");
                    $(this).text(availableVotes).focus();
                    return;
                }
                
                if(!isNaN(count))
                {
                    $('.vote-count').text(count);
                }
                else
                {
                    $('.vote-count').text(7);
                    $(this).focus();
                }
             });
          });
          
        $(document).on('blur', '.no_of_likes', function(){
            var count = $(this).text();
            var availableVotes = $(this).attr('data-like');
            if(isNaN($(this).text()))
            {
                alert("Please enter a digit");
                $(this).text(availableVotes);
                return;
            }

            if(Number(count) > availableVotes)
            {
                alert("Only " + availableVotes + " votes available");
                $(this).text(availableVotes).focus();
                return;
            }
        });
          
          
          $(document).on('click','.like-icon', function(){
                var current = $(this);
                $(this).attr('disabled', 'disabled');
                $('#loading').show();
                var id = $(this).attr('data-id');
                var parent = $(this).parents('td').first();
                var noOfLikes = $(parent).find('.no_of_likes').text();
                $.post('/api/v1/tactic/suggestions/like', {id:id,noOfLikes:noOfLikes,_token:'{{ csrf_token() }}'}, function(res){
                    alert(res);
                    getAllTacticSuggestions();
                },'json')
                .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= value;
                        });
                        alert(html);
                        current.removeAttr('disabled');
                        $('#loading').hide();
                    },'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');
                }
                current = $(this).attr('id');
                $('.extra-container').html('');
                
                $('#all-players .player-area-schedule').each(function(i, value){
                    var positionString = $(value).attr('data-position');
                    if(positionString.trim() != '')
                    {
                        var postionStringArray = positionString.split(',');
                        $(postionStringArray).each(function(i1, value1)
                        {
                            if(value1 == positionID)
                            {
                                var clone = $(value).clone();
                                var id = $(clone).attr('id');
                                clone = $(clone).attr('id', id + '1');
                                $('.extra-container').append(clone)
                            }
                        });
                        
                    }
                });
            });
            
            $(document).on('click', '#player-drag-area-hidden .player-area-schedule', function(){
                
                var id = $(this).attr('data-player-id');
                if($('#football-field').find('[data-player-id="' + id + '"]').length)
                {
                    alert("Player already selected at a different position");
                    return 0;
                }
                console.log(id);
                if($(this).hasClass('red-bg'))
                {
                    alert("This player cannot be selectedd since he is Injured / Suspended");
                    return false;;
                }
                if($(this).hasClass('orange-bg'))
                {
                    var conf = confirm("This player is Injured. Are you sure you want to add him");
                    if(!conf)
                    {
                        return false;
                    }
                }
                
                
                var expectedPositons = $(this).attr('data-position');
                var expectedPositionsArray = expectedPositons.split(',');
                var currentPosition = $('#' + current).attr('data-position_id');
                //var goalKeeperPositionID = $('.goal-keeper').attr('data-id');
                var goalKeeperPositionID = $('.goal-keeper').attr('data-position_id');
                var goalKeeper = 0;
                
                var color = 'orange';
                var count = 0;
                $(expectedPositionsArray).each(function(i,value){
                
                if(value == currentPosition)
                {
                    color = 'green';
                }
                if(value == goalKeeperPositionID)
                {
                    goalKeeper = 1;
                }
                if(value.trim() != '')
                {
                    count++;
                }
                
            });
                
            if(goalKeeper == 0 && color == 'orange' && $('#' + current).hasClass('goal-keeper'))
            {
                alert("This position is reserved for goal keeper");
                return false;
            }
            
            if(goalKeeper == 1 && count == 1 && !$('#' + current).hasClass('goal-keeper'))
            {
                alert("Goal Keeper cannot be selected for a adifferent position");
                return false;
            }
                
                var div = $(this).clone().attr('style', 'background-color:' + color);
                var playerID = $(div).attr('data-player-id');
                $(this).remove();
                $('#player-drag-area').find('[data-player-id="' + playerID + '"]').remove();
                if($('#' + current).find('.player-area-schedule').length != 0)
                {
                    var alreadyAdded = $('#' + current).find('.player-area-schedule').clone().removeAttr('style');
                    var alreadyAdded1 = alreadyAdded.clone();
                    $('#' + current).find('.player-area-schedule').remove();
                    console.log("a");
                    $('#player-drag-area-hidden').append(alreadyAdded);
                    $('#player-drag-area').append(alreadyAdded1);
                }
                $('#' + current).append(div);
                current  = 0;
                $("#player-drag-area-hidden").hide();
                
                
            });
            
            $(document).on('click', '#btn-hide-player-list', function(){
                $('#player-drag-area-hidden').hide();
                current  = 0;
            });
            
            function getAllTacticSuggestions()
            {
                $('#proposal-table tbody').html('');
                $('#loading').show();
                
                $.get('/api/v1/tactic/suggestions/active', function(res){
                    $('#loading').hide();
                    var html = '';
                    $(res.tactics).each(function(i,value){
                        var likeCount =  res.votes - value.max_likes;
                        
//                        if($(value.likes) != null)
//                        {
//                            $(value.likes).each(function(i1, value1){
//                                likeCount = likeCount - value1.no_of_likes;
//                            })
//                        }
                      //  likeCount = res.totalMaxAllowedVotes - value.max_likes;
                        var totalMaxAllowedVotes = res.totalMaxAllowedVotes - value.max_likes;
                        if(totalMaxAllowedVotes < likeCount)
                        {
                            likeCount = totalMaxAllowedVotes;
                            console.log(likeCount);
                        }
//                        if(res.totalMaxAllowedVotes < likeCount)
//                        {
//                            likeCount = res.totalMaxAllowedVotes;
//                            console.log(likeCount);
//                        }
                        if(likeCount < 0)
                        {
                            likeCount = 0;
                        }
                        var adminResponse = '';
                        if(value.admin_response != '' && value.admin_response != null)
                        {
                            adminResponse = '<span style="color:brown">Admin Reponse : ' + value.admin_response.replace(/\n/g, "<br />") + '</span>';
                        }
                        
                        var someDate = new Date(value.expiry_date);
//                        var numberOfDaysToAdd = 14;
//                        someDate.setDate(someDate.getDate() + numberOfDaysToAdd); 
                        var dd = someDate.getDate();
                        var mm = someDate.getMonth() + 1;
                        var y = someDate.getFullYear();

                        var someFormattedDate = dd + '/'+ mm + '/'+ y;
                        
                        if(value.confirm == 1)
                        {
                            html = '<span><strong>Sustained decision</strong> </span>';
                        }
                        else
                        {
                            html = '<div class="pull-left"><span class="editable-text-border pull-left no_of_likes" contenteditable="true" data-like="' + likeCount + '">' + likeCount + '</span> support &nbsp;&nbsp;<a class="like-icon" data-id="' + value.UUID + '"><i class="glyphicon glyphicon-thumbs-up"></i></a></div>'
                        }
                        html+='<div class="pull-left"><div class="pull-left" style="padding-left:15px">' + value.no_of_likes + ' Supporters</div></div><span style="color:red" class="count_down_poll pull-right" data-date="' + value.expiry_date + '"></span>';
                        $('#proposal-table tbody').append('<tr><td>' + value.suggestions.replace(/\n/g, "<br />") + '</td><td>' + adminResponse + '</td></tr><tr><td colspan="2" style="vertical-align:middle">' + html + '</td></tr><tr><td colspan="2" class="hcenter" style="background-color:darkcyan"></td></tr>');
                    });
                    makeAllCountDownTimers();
                });
            }
            
            function makeAllCountDownTimers()
            {
                $('.count_down_poll').each(function(){
                    var expiryDate = $(this).attr('data-date');
                    $(this).countdown(expiryDate, function(event) {
                        $(this).text(
                            event.strftime('Expiry By : %D days %H:%M:%S')
                        );
                    }); 
                });
            }
            
            function getComingSchedulePre()
            {
                $.get('/api/v1/tactics/latest/formation', function(res, xhr, code){
                    if(code.status == 202)
                    {
                        $('.btn-save').hide();
                        $('#tactics-head').hide();
                        $('.not-available').show();
                        $('#no_of_days').text(res.days);
                        getAllTacticSuggestions();
                    }
                    else
                    {
                        $('#match_name').text(res.name);
                        scheduleID = res.formation.UUID;
                        getTacticVoteCount(scheduleID);
                        getFormation(res.formation.formation_id);
                        getPlayerRatings(scheduleID);
                        $('#main-content').show();
                    }
                     
                    $('#loading').hide();
                    setPlayerContainerHeight();
              },'json');
            }
            
            function setPlayerContainerHeight()
            {
                var fieldHeight = $('#football-field').height();
                $('#player-container-actual-container').attr('style', 'height:' + fieldHeight + 'px')
            } 
            
            function getFormation(UUID)
            {
                $('.green-field-background').removeClass('green-field-background');
                $('#main-content').hide();
                $('#loading').show();
                $.get('/api/v1/formations/' + UUID + '/players/get',function(res){
                    var count = 1;
                    $(res.formation_positions).each(function(i,value){
                        if(value.inactive == 0)
                        {
                            var attr = $('[data-position_count_id=' + value.position_columns_id + ']').attr('data-id');
                            if (attr == 39) {
                                $('[data-position_count_id=' + value.position_columns_id + ']').addClass('green-field-background');
                            }
                            else
                            {
                                $('[data-position_count_id=' + value.position_columns_id + ']').addClass('green-field-background').attr('style', "background-image: url('/uploads/player/{{$profile->default_tshirt}}')");
                            }
                            
                            
                            $('[data-position_count_id=' + value.position_columns_id + ']').addClass('green-field-background');
                            $('.green-field-background').find('span').show();
                        }
                    });
                    $('#main-content').show();
                   // $('#formation-container').show();
                    $('#loading').hide();
              });
            }
            
            function getPlayerRatings(scheduleID)
            {
                $.get('/api/v1/schedule/' + scheduleID + '/players/ratings', function(res){
                    $(res.formation).each(function(i,value){
                        
                        $('[data-player-id="' + value.player_id + '"]').find('.player-name').append('(' + Number(value.rating_count).toFixed(1) + ')');
                    })
                    $('#sub_content_1').text('Rating : ' + Number(res.sub.rating_count1).toFixed(1));
                    $('#sub_content_2').text('Rating : ' + Number(res.sub.rating_count2).toFixed(1));
                    $('#sub_content_3').text('Rating : ' + Number(res.sub.rating_count3).toFixed(1));
                },'json');
            }
            
            function getTacticVoteCount(scheduleID)
            {
                $.get('/api/v1/schedule/' + scheduleID + '/players/ratings/votes', function(res){
                    if(res <  0)
                    {
                        $('.vote-count').text(0);
                        $('.vote-count').attr('data-votes', 0);
                    }
                    else
                    {
                        $('.vote-count').text(res);
                        $('.vote-count').attr('data-votes', res);
                    }
                });
            }
          </script>
	 <!-- content-section-ends -->
@include('includes.main.footer')