<?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">Voting</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">Voting</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" rows="3" id="original-message" placeholder="Original Message" disabled></textarea>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Select the best translated sentence</label>
                                <div class="form-group suggestion-list">

                                </div>                             
                            </div>
                        </div>
                    </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 Voting</button>
                        <button type="button" id="btn-submit" class="btn btn-success waves-effect waves-light">Submit Vote</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 voting 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 voting 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>
//var progress = 0;

change_progress();

function change_progress() {	
	var today_success_progress = 0;
	$.ajax({url: 'controllers/get_voting_count.php',
        data: {
        },
        type: 'post',
        dataType: 'json',		
        success: function (output) {    
			$("#user_current_level").text( output.user_current_level );
            success_voting = output.user_submitted_success_voting_count_for_level;
			max_submit_voting = output.max_submit_voting_count_for_level;
			progress_percentage = success_voting/max_submit_voting*100;
			$("#progress").css("width",progress_percentage+'%');
			$("#progress").html((success_voting)+'/'+max_submit_voting);	
			if( success_voting == max_submit_voting ) {
				$(".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 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_voting_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.suggestion);
						setHeight('original-message');
						$('.suggestion-div').show();
						change_progress();
                    } else {
                        $('.suggestion-div').hide();
                        $('.empty-div').show();
						$('.md-progress').hide();
                        $('.loader-div').hide();

                    }
                    $("#btn-skip").html('Skip Voting').attr('disabled', false);
                    $("#btn-submit").html('Submit Vote').attr('disabled', false);
                }
            });
        }

        function showSentence(id, original_message, suggestion) {
            $('#original-message').val(original_message);
            $('#qwrc').val(id);

            for (var i = 0; i < suggestion.length; i++) {
				var node_class = i%2==0 ? " odd":" even";
                $('.suggestion-list').append('<div class="custom-control custom-radio'+node_class+'">\n\
					<input class="custom-control-input" type="radio" value="' + suggestion[i]['suggestion_id'] + '" id="customRadio' + i + '" name="suggestionRadio">\n\
					<label for="customRadio' + i + '" class="custom-control-label">' + suggestion[i]['translation_message']+ '</label>\n\
				</div>');
            }

            $('.suggestion-div').show();
            $('.loader-div').hide();
        }

        $("#btn-skip").click(function () {
            $(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
            $("#btn-submit").attr('disabled', true);
			var skip_id = $('#qwrc').val();
            showNextSentence(skip_id);
        });

        $("#btn-submit").click(function () {
            if ($('.custom-control-input').is(':checked')) {
                $("#btn-skip").attr('disabled', true);
				$(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
                $.ajax({url: 'controllers/submit_vote2.php',
                    data: {
                        suid: $("input[name='suggestionRadio']:checked").val(),
                        sid: $('#qwrc').val()
                    },
                    type: 'post',
                    dataType: 'JSON',
                    success: function (output) {
                        if (output.status == 200) {
                            toastr.success(output.msg);
							var skip_id = 0;
                            showNextSentence(skip_id);
							//progress = progress + 10;					
							change_progress();	
							$(this).html('Submit Vote').attr('disabled', false);
                        } else {
                            $('.empty-div').hide();							
							toastr.error(output.msg);
							
							var skip_id = 0;
                            showNextSentence(skip_id);
							//progress = progress + 10;					
							change_progress();	
							$(this).html('Submit Vote').attr('disabled', false);
														
                        }
                    }
                });
            } else {
				toastr.error('Please select a 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('');
            $('.suggestion-list').html('');
			offset = offset + 1
			getSentence(offset,skip_id);
        }
		
				
<?php } ?>

</script>