<?php include 'header.php'; ?>

<!-- Add icon library -->
<!--link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"-->

<style>
/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;  
  -moz-user-select:none;
  -webkit-user-select:none;
}

.rating-stars ul > li.star {
  display:inline-block;  
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
  font-size:1em; /* Change the size of the stars */
  color:#ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}

</style>

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid1">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
               <h1 class="my-3 h1">Suggestions</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Suggestions</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<hr class="mb-3">
<div class="mb-3">
Level: <span id="user_current_level">1</span>
</div>
<div class="progress md-progress">
<div class="progress-bar progress-bar-striped bkcolor-theme" id="progress" role="progressbar" style="width: 0%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">0/10</div>
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid1 row">
        <div class="col-lg-12">
            <?php
            if ($_SESSION['tm_language_id'] == 0) {
                echo '<p>Please select your language first</p>'
                . '<a href="settings.php" class="btn btn-primary">Go to Settings</a>';
            /*} else if ($_SESSION['tm_is_neo_verified'] == 0) {
                echo '<p>Your NEO address is not verified, please verify</p>'
                . '<a href="settings.php" class="btn btn-primary">Go to Settings</a>';
            } else if ($_SESSION['tm_is_email_verified'] == 0) {
                echo '<p>Please verify your email address first</p>'
                . '<a href="settings.php" class="btn btn-primary">Go to Settings</a>';*/
            } else {
                ?>
                <form class="suggestion-div" style="display:none;">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Original Message</label>
                                <textarea class="form-control" id="original-message" placeholder="Original Message" disabled></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group clearfix">							
								
								<label class="d-inline float-left">Translated  Message</label>
								
								<!-- Rating Stars Box -->
								<div class='rating-stars text-right d-inline float-right'>
									<ul id='stars'>
									  <label class="d-inline">Please rate translation to help TranslateMe.</label>
									  <li class='star' data-toggle="tooltip" data-placement="top" title="Cannot understand the translation at all" data-value='1'>
										<i class='fa fa-star fa-fw'></i>
									  </li>
									  <li class='star' data-toggle="tooltip" data-placement="top" title="Translation is poor but some words are correct" data-value='2'>
										<i class='fa fa-star fa-fw'></i>
									  </li>
									  <li class='star' data-toggle="tooltip" data-placement="top" title="Translation is low but I can understand the meaning" data-value='3'>
										<i class='fa fa-star fa-fw'></i>
									  </li>
									  <li class='star' data-toggle="tooltip" data-placement="top" title="Translation is good with small mistakes" data-value='4'>
										<i class='fa fa-star fa-fw'></i>
									  </li>
									  <li class='star' data-toggle="tooltip" data-placement="top" title="Translation is acceptable and clear" data-value='5'>
										<i class='fa fa-star fa-fw'></i>
									  </li>
									</ul>
								</div>
								
								
                                <textarea class="form-control" id="translation" placeholder="Translation Message" disabled></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- input states -->
                    <div class="form-group">
						<label>Suggest a better translation</label>
						<textarea class="form-control" rows="5" placeholder="Your Suggestion" id="suggestion"></textarea>                                  
                    </div>

                    <div class="display-flex mobile-justify-center">
                        <input type="hidden" id="qwrc" value=""/>
                        <button type="button" id="btn-skip" class="btn btn-info waves-effect waves-light">Skip Suggestion</button>
                        <button type="button" id="btn-submit" class="btn btn-success waves-effect waves-light">Submit Suggestion</button>
                    </div>
                </form>

                <form class="empty-div" style="display:none;">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>No new sentences available for suggestion please try again tomorrow.</label>
                            </div>
                        </div>
                    </div>
                </form>
				
				<form class="max-submission-reached-div" style="display:none;">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>You have reached max suggestion submission for the day. Please continue <span id="continue_span_text"></span></label>
                            </div>
                        </div>
                    </div>
                </form>
				
                <div class="loader-div text-center">
					<div class="preloader-wrapper active">
					  <div class="spinner-layer spinner-blue-only">
						<div class="circle-clipper left">
						  <div class="circle"></div>
						</div>
						<div class="gap-patch">
						  <div class="circle"></div>
						</div>
						<div class="circle-clipper right">
						  <div class="circle"></div>
						</div>
					  </div>
					</div>
				</div>
                <?php }
                ?>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php include 'footer.php'; ?>
<script>
$(document).ready(function () {
    //Disable cut copy paste
    $('body').bind('cut copy paste', function (e) {
        e.preventDefault();
    });
    
    //Disable mouse right click
    $("body").on("contextmenu",function(e){
        return false;
    });
	
	change_progress();
	
});



//var progress = 0;

change_progress();


function change_progress() {	
	var today_success_progress = 0;
	$.ajax({url: 'controllers/get_suggestions_count.php',
        data: {
        },
        type: 'post',
        dataType: 'json',		
        success: function (output) {    
			$("#user_current_level").text( output.user_current_level );
            success_suggestions = output.user_submitted_success_suggestions_count_for_user_level;
			max_submit_suggestion = output.max_submit_suggestions_count_for_user_level;
			progress_percentage = success_suggestions/max_submit_suggestion*100;
			$("#progress").css("width",progress_percentage+'%');
			$("#progress").html((success_suggestions)+'/'+max_submit_suggestion);			
			$("#continue_span_text").html( output.continue_label_text )
			if( success_suggestions >= max_submit_suggestion ) {
				$(".suggestion-div").hide();
				$(".max-submission-reached-div").show();				
			} else {
				$(".max-submission-reached-div").hide();	
				$(".suggestion-div").show();
			}
		}
	});
}

function setHeight(fieldId) {
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
<?php if ($_SESSION['tm_language_id'] > 0) { ?>
        var original_message_array = new Array();
        var translated_message_array = new Array();
        var id_array = new Array();
        var count = 0;
		var offset = 0;
		var skip_id = 0;
        getSentence(offset, skip_id);
        function getSentence(offset, skip_id) {
            $('.loader-div').show();
            $.ajax({url: 'controllers/get_sentence2.php',
                data: {
					offset: offset,
					skip_id: skip_id
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
                    if (output.status == 200) {
                        showSentence(output.id, output.original_message, output.translated_message);
						setHeight('original-message');
						setHeight('translation');
						$('.suggestion-div').show();
						change_progress();
                    } else {
                        $('.suggestion-div').hide();
                        $('.empty-div').show();						
						$('.md-progress').hide();
                        $('.loader-div').hide();
                    }
                }
            });
        }

        function showSentence(id, original_message, translated_message) {
            $('#qwrc').val(id);
            $('#original-message').val(original_message);
            $('#translation').val(translated_message);
            $('.suggestion-div').show();
            $('.loader-div').hide();
        }

        $("#btn-skip").click(function () {
			var skip_id = $('#qwrc').val();
            showNextSentence(skip_id);
        });

        $("#btn-submit").click(function () {
            if ($('#suggestion').val().trim() != '' && $('#qwrc').val() != '') {
				if($('#suggestion').val().trim() != $('#translation').val().trim()) {
					$(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
					$.ajax({url: 'controllers/save_suggestion2.php',
						data: {
							sid: $('#qwrc').val(),
							suggestion: $('#suggestion').val().trim()
						},
						type: 'post',
						dataType: 'JSON',
						success: function (output) {
							if (output.status == 200) {
								toastr.success(output.msg);
								var skip_id = 0;
								showNextSentence(skip_id);
								change_progress();					
							} else {
								$('.empty-div').hide();
								toastr.error(output.msg);
							}
						}
					});				
					//progress = progress + 10;					
					//change_progress();					
					$(this).html('Submit Suggestion').attr('disabled', false);
				} else {
					toastr.error('Suggested translation same as machine translation. Cannot be accepted.');
				}
            } else {
				toastr.error('Please enter suggestion.');
            }
        });
		/*function change_progress() {					
			$("#progress").css("width",progress+'%');
			$("#progress").html((progress/10)+'/10');			
			if(progress == 100)
				progress = 0;
		}*/	
        function showNextSentence(skip_id) {
            $('#qwrc').val('');
            $('#original-message').val('');
            $('#translation').val('');
            $('#suggestion').val('');	
			offset = offset + 1;
			getSentence(offset, skip_id);
        }
<?php } ?>

//Start Rating Start
$(document).ready(function(){
  
  /* 1. Visualizing things on Hover - See next part for action on click */
  $('#stars li').on('mouseover', function(){
    var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on
   
    // Now highlight all the stars that's not after the current hovered star
    $(this).parent().children('li.star').each(function(e){
      if (e < onStar) {
        $(this).addClass('hover');
      }
      else {
        $(this).removeClass('hover');
      }
    });
    
  }).on('mouseout', function(){
    $(this).parent().children('li.star').each(function(e){
      $(this).removeClass('hover');
    });
  });
  
  
  /* 2. Action to perform on click */
  $('#stars li').on('click', function(){
	  
    var onStar = parseInt($(this).data('value'), 10); // The star currently selected
    var stars = $(this).parent().children('li.star');
    
    for (i = 0; i < stars.length; i++) {
      $(stars[i]).removeClass('selected');
    }
    
    for (i = 0; i < onStar; i++) {
      $(stars[i]).addClass('selected');
    }
    
    // JUST RESPONSE (Not needed)
    var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
    var msg = "";
	
	var sentence_id = $('#qwrc').val();
	
	success_msg = "Thanks! You rated this " + ratingValue + " stars.";
	
    if ( ratingValue > 0 && sentence_id != '' ) {
		
		$.ajax({url: 'controllers/submit_reputation_suggestions_star_rating.php',
			data: {
				sid: sentence_id,
				star_rating: ratingValue
			},
			type: 'post',
			dataType: 'JSON',
			success: function (output) {
				if (output.status == 200) {
					responseMessage(success_msg);
				} else {					
					toastr.error(output.msg); 
				}
			}
		});			
        
    }
    
    
  });
  
  
});


function responseMessage(msg) {  
	toastr.success(msg);
}

//Star Rating end
</script>