<?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">Test 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">Test Voting</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<hr class="mb-3">
<div class="mb-3 d-none">
Level: <span id="user_current_level">0</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 {
                ?>

                <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=""/>			
						<input type="hidden" id="ttvsm_id" value=""/>
                        <button type="button" id="btn-skip-popup" class="btn btn-info waves-effect waves-light d-none" data-toggle="modal" data-target="#modalSkipVotingReason">Skip Voting</button>
						<!--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 test 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 test voting submission. Please wait until we review.</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 -->

<!-- Modal Small Size -->
<div class="modal fade" id="modalSkipVotingReason" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Skip Reason</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>                
            </div>
            <div class="modal-body">
				<div class="form-group">
					<select id="skip_reason" class="skip-reasons-options form-control"></select>
				</div>
				<div class="form-group">
					<label>Suggest a better translation</label>
					<textarea class="form-control" rows="3" placeholder="Your Suggestion" id="suggestion"></textarea>
				</div>
            </div>
            <div class="modal-footer">
				<button type="button" id="btn-skip" class="btn btn-info waves-effect waves-light">Skip Vote & Suggest</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>
<script>
//var progress = 0;

change_progress();

function change_progress() {	
	
	$.ajax({url: 'controllers/get_test_voting_count.php',
        data: {
        },
        type: 'post',
        dataType: 'json',		
        success: function (output) {    
			$("#user_current_level").text( output.user_current_level );
            success_voting = output.user_submitted_test_voting_count;
			max_submit_voting = output.max_submit_test_voting_count;
			progress_percentage = success_voting/max_submit_voting*100;
			$("#progress").css("width",progress_percentage+'%');
			$("#progress").html((success_voting)+'/'+max_submit_voting);
			
			assigned_voting = output.assigned_voting_sentences_count_for_user;
			
			if( success_voting >= max_submit_voting ) {			
				
				$(".suggestion-div").hide();
				$(".max-submission-reached-div").show();	

				$('.empty-div').hide();
				$('.md-progress').show();
				
			} else if( assigned_voting == 0 ) {
				//no sentences available for voting
			} 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();
			var skip_reason = $("#skip_reason").val();					
            $.ajax({url: 'controllers/get_test_voting_sentence.php',
                data: {
					offset: offset,
					skip_id: skip_id,
					skipped_reason_id: skip_reason,
					suggestion: $('#suggestion').val().trim()
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
                    if (output.status == 200) {
                        showSentence(output.sentence_id, output.original_message, output.suggestion, output.ttvsm_id);
						setHeight('original-message');
						$('.suggestion-div').show();
						change_progress();
                    } else {
                        $('.suggestion-div').hide();
                        $('.empty-div').show();
						$('.md-progress').hide();
                        $('.loader-div').hide();
						change_progress();
                    }
                    
					$('#suggestion').val('');
					$("#btn-skip").html('Skip Vote & Suggest').attr('disabled', false);					
                    $("#btn-submit").html('Submit Vote').attr('disabled', false);
                }
            });
        }

        function showSentence(id, original_message, suggestion,ttvsm_id) {
            $('#original-message').val(original_message);
            $('#qwrc').val(id);
			$('#ttvsm_id').val(ttvsm_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-popup").click(function() {
			
			$.ajax({url: 'controllers/get_skip_voting_reasons.php',
				data: {
					/*id: $(this).attr('data-id'),
					tele_id: $(this).attr('data-tele'),*/
				},
				type: 'post',
				success: function (output) {
					$('.skip-reasons-options').html(output);
				}
			});
			
		});
		
        $("#btn-skip").click(function () {
			var skip_reason = $("#skip_reason").val();
			if( skip_reason > 0 && $('#suggestion').val().trim() != '') {		
				
				$('#modalSkipVotingReason'). modal('hide');
				
				$(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);
				
			} else {				
				toastr.error("Please select skip reason and suggest a better translation");
			}
            
        });

        $("#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_test_vote.php',
                    data: {
                        suid: $("input[name='suggestionRadio']:checked").val(),
                        sid: $('#qwrc').val(),
						ttvsm_id: $('#ttvsm_id').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 showNextSentence(skip_id) {
            $('#qwrc').val('');
			$('#ttvsm_id').val('');
            $('#original-message').val('');
            $('.suggestion-list').html('');
			offset = offset + 1
			getSentence(offset,skip_id);
        }
		
				
<?php } ?>

</script>