@include('includes.main.header')

<title>Voteaza o schimbare</title>

<meta name="keywords" content="schimbare suporteri, schimbare facuta de suporteri, vot schimbare fotbal">

<meta name="description" content="Un concept socios nou, UN SISTEM DE MANAGEMENT AL UNUI CLUB DE FOTBAL, care poate organiza comunicarea dintre zeci de mii de suporteri finantatori ( MANAGERI ) si angajatii unui club, cu scopul de a genera decizii incontestabile, asumate de majoritatea finantatorilor.">

<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;
    }
    
    @media screen and (max-width : 600px)
    {
        .each-player-holder
        {
           margin-bottom : 0px !important; 
        }
        .each-player-holder, .each-player-holder .player-area-schedule{
            height : 70px;
        }
        
        .each-player-holder .player-area-schedule .player-det
        {
            margin-bottom : 26px !important;
        }
        
        .each-player-holder .player-img-container{
            height : 66px !important;
        }
        
        .each-player-holder .player-area-schedule select{
            padding-left: 0px;
            padding-right: 0px;
            padding-top:0px;
        }
        
        .bg-field
        {
            height : 420px !important;
        }
    }
    
    .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("Acest jucator nu poate fi selectat deoarece este accidentat, suspendat sau indisponibil");
                 return false;;
             }
             if($('#' + id).hasClass('orange-bg'))
             {
                 var conf = confirm("Acest jucator nu este refacut complet. Esti sigur ca vrei sa il selectezi?");
                 if(!conf)
                 {
                     return false;
                 }
             }
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            console.log(id);
            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;
            console.log(id);
            if(!$('#' + id).hasClass('green-field-background') && id != 'player-drag-area')
            {
                return;
            }
            console.log("b");
            
            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("Trebuie sa alegi un portar (GK)");
                return false;
            }
            
            if(goalKeeper == 1 && count == 1 && !$('#' + id).hasClass('goal-keeper'))
            {
                alert("Portarul nu poate fi folosit pe alta pozitie");
                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" id="tactics-page">
    <div class="container" style="background-color:white; opacity:0.9;">
        <div class="gallery-content-head text-left">
            <h3>Vote for substitution</h3>
                        
                        <h4 class="col-xs-12 hcenter">Vote LIVE the first substitution of the match: <span id="match_name">{{$schedule->name}}</span> until {{date("d M Y H:i", strtotime($schedule->end_time))}}</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>
                                                                                <h3 class="not-available col-xs-12 hcenter" style="display:none;color:brown;">
                                            Nu exista meci programat in urmatoarele <span id="no_of_days"></span> zile!
                                        </h3>

                                        <h3 class='col-xs-12 no-padding hcenter' id='main-content' >No Match Available right now.</h3>                                    </div>
                </div>
                            
                
            </div>  
             
             <div class="col-xs-12">
                 
             </div>
            
   </div>
        
</div>
     <!-- content-section-ends -->
@include('includes.main.footer')