@include('includes.main.header')
<script src="/countdown/jquery.countdown.js"></script>
<style>
    #proposal-table tbody iframe
    {
        max-width: 200px;
        height : auto;
    }
</style>
	<!--Work-Starts-Here-->
	 <!-- content-section-starts -->
	 <div class="gallery-content">
	 <div class="container">
		<div class="gallery-content-head text-left">
			<h3>DECIZIE PRINCIPALA</h3>
                        
                       
		</div>
			<div class="section group">
				<div class="col-xs-12 no-padding margin-t-5" style="background-color:white; opacity:0.9">
                                    <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>
                                    
                                    
                                    <div class="col-xs-12 hcenter" id="loading" style='display: none'>
                                            <img src="/images/loading.gif" />
                                        </div>
                                    <div id="content_body">
                                        <div class="col-xs-12 margin-t-10 table-responsive no-padding">
                                            <table class="table table-bordered  table-striped table-condensed " id="polls-table">
                                                
                                            </table>
                                            
                                            <div class="col-xs-12 hidden-sm hidden-md hidden-lg hidden-desktop hidden-xs no-padding" id="polls-table-mobile">
                                                
                                            </div>
<!--                                        <table class="table table-bordered  table-striped table-condensed" id="polls-table">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        Polls
                                                    </th>
                                                    <th>
                                                        Options
                                                    </th>
                                                    <th>

                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>-->

<div class='col-xs-12 '>
                                        
                                        <div id="count_down_poll" class="hcenter"></div>
                                    </div>

                                        </div>
                                    
                                        <form class="col-xs-12">
                                            <div class="col-xs-12">
                                                <textarea class="form-control" placeholder="Propune urmatoarea decizie care sa fie supusa la vot! Asteptam propuneri care sa duca la dezvoltarea clubului! Pentru injuraturi, confruntari si neintelegeri, ne vedem pe retelele de socializare! :)" id="decision"></textarea>
                                            </div>



                                            <div class=" col-xs-12  margin-t-5">
                                                <button class="btn btn-success pull-right col-xs-12" id="btn-propose" type="button">Propune</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">
                                                        Decizii propuse/ Raspunsurile conducerii <br>
                                                        Utilizati translate.google.com pentru traduceri.
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        Decizie
                                                    </th>
                                                    <th>
                                                        Raspunsul conducerii
                                                    </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>
</div>
         <script>
            
            var pollVotes = 0;
            $(document).ready(function(){
                getAllDecisionPolls();
                getAllDecisionProposals();
                $('#btn-propose').click(function(){
                    var current = $(this);
                    $(this).attr('disabled', 'disabled').text('Saving Proposal...');
                    var data = new Object();
                    data['decision'] = $('#decision').val();
                    $.post('/api/v1/decision/proposal/add', {data:data,_token:'{{ csrf_token() }}'}, function(res){
                        alert("Propunere adaugata cu succes");
                        $('.error').hide();
                        getAllDecisionProposals();
                        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();
                $('#content_body').hide();
                var id = $(this).attr('data-id');
                var parent = $(this).parents('td').first();
                var noOfLikes = $(parent).find('.no_of_likes').text();
                $.post('/api/v1/decision/proposal/like', {id:id,noOfLikes:noOfLikes,_token:'{{ csrf_token() }}'}, function(res){
                    alert(res);
                    getAllDecisionProposals();
                },'json')
                .fail(function(xhr) {
                        var html = '';
                        var res = xhr.responseJSON;
                        $(res).each(function(i, value){
                                html+= value;
                        });
                        alert(html);
                        current.removeAttr('disabled');
                        $('#loading').hide();
                        $('#content_body').show();
                    },'json');
            });
            
            $(document).on('click', '.btn-submit', function(){
                $('.btn-submit').attr('disabled', 'disabled');
                $('#loading').show();
                $('#content_body').hide();
                var parent = $(this).parents('.big-td').first();
                var votes = $(parent).find('.no_of_votes').text();
                var id = $(this).attr('data-id');
                if(isNaN(votes))
                {
                    alert("Vote should be a number");
                    return;
                }
                $.post("/api/v1/decision/proposal/poll/vote/" + id, {'votes' : votes,_token:'{{ csrf_token() }}'}, function(res){
                   alert(res.message);
                   $('#loading').hide();
                    $('#content_body').show();
                    getAllDecisionPolls();
                   // $('.btn-submit').removeAttr('disabled');
                },'json')
                .fail(function(xhr) {
                    var html = '';
                    var res = xhr.responseJSON;
                    $(res).each(function(i, value){
                            html+= value.message;
                    });
                    alert(html);
                    $('.btn-submit').removeAttr('disabled');
                    $('#loading').hide();
                    $('#content_body').show();
                },'json');
            });
             
            function getAllDecisionProposals()
            {
                $('#proposal-table tbody').html('');
                $('#loading').show();
                $.get('/api/v1/decision/proposals/active', 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;
//                            })
//                        }


                        
                        var totalMaxAllowedVotes = res.totalMaxAllowedVotes - value.max_likes;
                        if(totalMaxAllowedVotes < likeCount)
                        {
                            likeCount = totalMaxAllowedVotes;
                            console.log(likeCount);
                        }
                        var adminResponse = '';
                        if(value.admin_response != '' && value.admin_response != null)
                        {
                            adminResponse = '<span style="color:brown">Raspuns conducere : ' + 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(likeCount < 0)
                        {
                            likeCount = 0;
                        }  
                        console.log(likeCount);
                        if(value.confirm == 1)
                        {
                            html = '<span><strong>Sustained decision</strong> </span>';
                        }
                        else
                        {
                            html = '<span class="editable-text-border pull-left no_of_likes" contenteditable="true" data-like="' + likeCount + '">' + likeCount + '</span>  &nbsp;&nbsp;<a class="like-icon pull-left" data-id="' + value.UUID + '" style="padding-left:5px"><i class="glyphicon glyphicon-thumbs-up"></i> Sustine</a>&nbsp;&nbsp;&nbsp;&nbsp;'
                        }
                        html+='<div class="pull-left" style="padding-left:15px">' + value.no_of_likes + ' Sustinatori</div><span style="color:red" class="count_down_poll pull-right" data-date="' + value.expiry_date + '">Expiring In: </span>';
                        $('#proposal-table tbody').append('<tr><td>' + value.decision.replace(/\n/g, "<br />") + '</td><td style="color:brown">' + adminResponse + '</td></tr><tr><td style="vertical-align:middle" colspan="2">' + html + '</td></tr><tr><td colspan="2" class="hcenter" style="background-color:darkcyan"></td></tr>');
                        
                    });
                    $('#content_body').show();
                    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 getAllDecisionPolls()
            {
                $('#polls-table tbody').html('');
                $('#polls-table thead').html('');
                $('#loading').show();
                $.get('/api/v1/decision/polls/all', function(res){
                    
                    $('#loading').hide();
                    var html = '';
                    var htmlMobile = '';
                    var pollVotes = res.vote;
                    if(pollVotes < 0)
                    {
                        pollVotes = 0;
                    }
                    
                    html = "<thead><tr><td id='table-header-name' style='vertical-align:middle;text-align:center;font-weight:bold'>" + res.polls.name + "</td></tr></thead><tbody>";
                    htmlMobile+= "<div class='col-xs-12 no-padding'><div class='col-xs-12 no-padding hcenter' style='font-weight:bold;text-decoration:underline'>" + res.polls.name + "</div>";
                    //$(res.polls).each(function(i,value){
                       
                        //var html1 = '';
                        var count = 0;
                        html+= "<tr>";
                    //    html+= "<tr><td class='hcenter'>" + value.options[0]['options'] + "</td><td class='hcenter'>" + value.options[1]['options'] + "</td><td class='hcenter'>" + value.options[2]['options'] + "</td></tr>";
                    //    html+= "<tr><td class='hcenter'><div class='pull-left'><span class='pull-left '>Use </span> <span class='editable-text-border pull-left no_of_votes' style='margin-left:5px' contenteditable='true'>" + pollVotes + "</span> <span class='pull-left' style='padding-left:5px'>Votes </span></div><button type='button' class='btn btn-success btn-sm btn-submit pull-right ' data-id='" + value.options[0]['UUID'] + "'>Submit</button></td>";
                    //    html+= "<td class='hcenter '><div class='pull-left'><span class='pull-left '>Use </span> <span class='editable-text-border pull-left no_of_votes' style='margin-left:5px' contenteditable='true'>" + pollVotes + "</span> <span class='pull-left' style='padding-left:5px'>Votes </span></div><button type='button' class='btn btn-success btn-sm btn-submit pull-right ' data-id='" + value.options[1]['UUID'] + "'>Submit</button></td>";
                    //    html+= "<td class='hcenter'><div class='pull-left'><span class='pull-left '>Use </span> <span class='editable-text-border pull-left no_of_votes' style='margin-left:5px' contenteditable='true'>" + pollVotes + "</span> <span class='pull-left' style='padding-left:5px'>Votes </span></div><button type='button' class='btn btn-success btn-sm btn-submit pull-right ' data-id='" + value.options[2]['UUID'] + "'>Submit</button></td></tr>";
                       
                        $(res.polls.options).each(function(i1, value1){
                            html+= "<td>" + value1.options + "</td>";
                            htmlMobile+= "<div class='col-xs-12 no-padding' style='border-bottom : 1px solid lightgray;padding:15px'><div class='col-xs-12 '>" + value1.options + "</div>";
                            if(res.expired == 0)
                            {
                                htmlMobile+= "<div class='col-xs-12 no-padding big-td' style='border-bottom : 1px solid lightgray;padding:15px'><span class='pull-left'>Use </span> <span class='editable-text-border pull-left no_of_votes' style='margin-left:5px' contenteditable='true' data-votes='" + res.vote + "'>" + res.vote + "</span> <span class='pull-left'>Voturi </span><button type='button' class='btn btn-success btn-sm btn-submit pull-right' style='margin-left:5px' data-id='" + value1.UUID + "'>Voteaza</button></div>";
                            }
                            htmlMobile+= "<div class='col-xs-12 ' style='padding-top:15px'><div class='pull-left'>" + Number(value1.percentage).toFixed(2) + "% </div><div class='pull-right'>" + value1.total_votes + " votes</div></div></div>";
                            count = count + 1;
                        });
                        html+= "</tr>";
                        htmlMobile+= '</div>';
                        if(res.expired == 0)
                        {
                            html+= "<tr>";
                            $(res.polls.options).each(function(i2, value2){
                                html+= "<td style='vertical-align:middle' class='big-td'><span class='pull-left'>Use </span> <span class='editable-text-border pull-left no_of_votes' style='margin-left:5px' contenteditable='true' data-votes=" + res.vote + ">" + res.vote + "</span> <span class='pull-left'>Votes </span><button type='button' class='btn btn-success btn-sm btn-submit pull-right' style='margin-left:5px' data-id='" + value2.UUID + "'>Voteaza</button></td>";

                            });
                            html+= "</tr>";
                        }
                        html+= "<tr>";
                        
                        if(res.hide_results == 0)
                        {
                            $(res.polls.options).each(function(i3, value3){
                                html+= "<td style='vertical-align:middle'><span class='pull-left'>" + Number(value3.percentage).toFixed(2) + " % </span><span class='pull-right'>" + value3.total_votes + " voturi</span></td>";
                            });
                        }
                        
                        html+= "</tr>";
                        //html+= html1;
                        
                   // });
                    html+= "</tbody>";
                    $('#polls-table').append(html);
                    $('#polls-table-mobile').append(htmlMobile);
                    $('#table-header-name').attr('colspan', count);
                  //  $('#count_down_poll').text(res.polls.expiry_date);
                    $("#count_down_poll").countdown(res.polls.expiry_date, function(event) {
                        $(this).text(
                            event.strftime('Votarea expira in : %D zile %H:%M:%S')
                        );
                    }); 
                },'json');
            }
            
            $(document).on('blur', '.no_of_votes', function(){
                var pollVotes = $(this).attr('data-votes');
                if(isNaN($(this).text()))
                {
                    alert("Please enter a digit");
                    $(this).text(pollVotes);
                }
                if(Number($(this).text()) > pollVotes)
                {
                    alert("Only " + pollVotes + " vote available");
                    $(this).text(pollVotes).focus();
                }
            });
            
            $(document).on('blur', '.no_of_likes', function(){
                var maxLikes = $(this).attr('data-like');
                if(isNaN($(this).text()))
                {
                    alert("Please enter a digit");
                    $(this).text(maxLikes);
                }
                if(Number($(this).text()) > maxLikes)
                {
                    alert("Only " + maxLikes + " Votes available");
                    $(this).text(maxLikes).focus();
                }
            });
            
            </script>
	 <!-- content-section-ends -->
	<!--Work-Ends-Here-->
@include('includes.main.footer')