<?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-5">
<!-- /.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>
                <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>
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;
        getSentence(offset);
        function getSentence(offset) {
            $('.loader-div').show();
            $.ajax({url: 'controllers/get_sentence.php',
                data: {
					offset: offset
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
                    if (output.status == 200) {
                        var json = output.sentence;
                        var i = 0;
                        $.each(json, function (idx, obj) {
                            original_message_array[i] = obj.original_message;
                            translated_message_array[i] = obj.translated_message;
                            id_array[i] = obj.id;
                            i++;
                        });
                        //                    console.log(translated_message_array[0]);
                        showSentence();
						setHeight('original-message');
						setHeight('translation');
						$('.suggestion-div').show();
                    } else {
                        $('.suggestion-div').hide();
                        $('.empty-div').show();
                        $('.loader-div').hide();

                    }
                }
            });
        }

        function showSentence() {
            $('#qwrc').val(id_array[count]);
            $('#original-message').val(original_message_array[count]);
            $('#translation').val(translated_message_array[count]);
            $('.suggestion-div').show();
            $('.loader-div').hide();
        }

        $("#btn-skip").click(function () {
            showNextSentence();
        });

        $("#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_suggestion.php',
						data: {
							sid: $('#qwrc').val(),
							suggestion: $('#suggestion').val().trim()
						},
						type: 'post',
						dataType: 'JSON',
						success: function (output) {
							if (output.status == 200) {
								toastr.success(output.msg);
								showNextSentence();
							} else {
								$('.empty-div').hide();
								toastr.error(output.msg);
							}
						}
					});
					$(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 showNextSentence() {
            $('#qwrc').val('');
            $('#original-message').val('');
            $('#translation').val('');
            $('#suggestion').val('');			
            if (count < (id_array.length - 1)) {
                count++;
                $('.suggestion-div').show();
                $('.empty-div').hide();
                $('.loader-div').show();
                showSentence();
				setHeight('original-message');
				setHeight('translation');
            } else {
                /*$('.suggestion-div').hide();
                $('.empty-div').show();
                $('.loader-div').hide();*/
				count = 0;
				//offset = offset + 26;				
				offset = offset + 1;
				getSentence(offset);
            }
        }
<?php } ?>
</script>