@include('includes.main.header')
<script src="/countdown/jquery.countdown.js"></script>
<style>
    #proposal-table tbody iframe
    {
        max-width: 200px;
        height : auto;
    }
    
    .editable-text-border
    {
        width : 30px;
        padding : 0px 5px;
        margin-right: 5px;
    }
    </style>
	<!--Work-Starts-Here-->
	 <!-- content-section-starts -->
	 <div class="gallery-content">
	 <div class="container">
		<div class="gallery-content-head text-left">
			<h3>PLAYER PROPOSAL</h3>
                       
                        <p>Do you know a very talented football player suitable to our club? Please send us some details about him!</p>
		</div>
			<div class="section group">
				<div class="col-xs-12 no-padding margin-t-5">
                                    <div class="col-xs-12 " style="margin-bottom:  5px">
                                        <div class="col-xs-12 " >
                                            <div class="col-xs-12 error" style="display:none">

                                            </div>
                                        </div>
                                    </div>
                                    <form class="col-xs-12">
                                        <div class="col-xs-12">
                                            <textarea class="form-control" placeholder="Name, Age, Team, Details" id="proposal"></textarea>
                                        </div>
                                        <div class="col-xs-12">
                                            <textarea class="form-control top-margin" placeholder="Contact Player Information" id="contact_player_information"></textarea>
                                        </div>
                                        <div class="col-sm-10 col-xs-12 margin-t-5">
                                            <input type="text" class="form-control" id="video" name="video" placeholder="Please enter embed url"/>
                                        </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>
                                                        Player Details
                                                    </th>
                                                    <th>Video</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                        <div class="col-xs-12 hcenter" id="loading" style='display: none'>
                                            <img src="/images/loading.gif" />
                                        </div>
                                    </div>
				</div>
				
			</div> 	
			
   </div>
</div>
         <script>
            $(document).ready(function(){
                getAllProposals();
                $('#btn-propose').click(function(){
                    var current = $(this);
                    $(this).attr('disabled', 'disabled').text('Saving Proposal...');
                    var data = new Object();
                    data['proposal'] = $('#proposal').val();
                    data['video'] = $('#video').val();
                    data['contact_player_information'] = $('#contact_player_information').val();
                    $.post('/api/v1/proposal/add', {data:data,_token:'{{ csrf_token() }}'}, function(res){
                        alert("Proposal Added Successfully");
                        $('.error').hide();
                        getAllProposals();
                        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');
                });
            });
            
            $(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/proposal/like', {id:id,noOfLikes:noOfLikes,_token:'{{ csrf_token() }}'}, function(res){
                    alert("Succesfully supported");
                   getAllProposals();
                })
                .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= value;
                        });
                        alert(html);
                        current.removeAttr('disabled');
                        
                    },'json');
            });
             
            function getAllProposals()
            {
                $('#proposal-table tbody').html('');
                $('#loading').show();
                $.get('/api/v1/proposals/all', function(res){
                    $('#loading').hide();
                    var html = '';
                    $(res.proposals).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(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 pull-left" data-id="' + value.UUID + '" style="padding-left:5px"> <i class="glyphicon glyphicon-thumbs-up"></i></a></div> &nbsp;&nbsp;'
                        }
                        html+='<div class="pull-left" style="padding-left:15px">' + value.no_of_likes + ' Supporters</div><span style="color:red" class="count_down_poll pull-right" data-date="' + value.expiry_date + '"></span>';
                        $('#proposal-table tbody').append('<tr><td>' + value.proposal.replace(/\n/g, "<br />") + '<br/><br/>' + adminResponse + '</td><td >' + value.video + '</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')
                        );
                    }); 
                });
            }
            
            
            $(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;
                }
            });
             </script>
	 <!-- content-section-ends -->
	<!--Work-Ends-Here-->
@include('includes.main.footer')