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

<!-- 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="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">
                                <label>Translated  Message</label>
                                <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 tomorrow.</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) {            
            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);		
			if( success_suggestions == max_submit_suggestion ) {
				$(".suggestion-div").hide();
				$(".max-submission-reached-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 } ?>
</script>