<?php
// Detail page of fund request
include 'header.php';
$userId = 0;
if (isset($_GET['id']) && $_GET['id'] > 0)
    $userId = $_GET['id'];
?>
<input type="hidden" id="userId" value="<?php echo $userId; ?>"/>
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid1" style="position: relative;">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
                <h1 class="my-3 h2">Marketplace Voting - Paragraph</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Paragraph</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/0</div>
</div>

<section class="content">
    <div class="container-fluid1">
		<!-- Grid column -->
		<div class="card card-cascade narrower z-depth-0">
			<div class="col-lg-12 col-md-12 col-sm-12 table-outer">
			<!-- Tab card -->      
				<div class="section">
					<div class="section-body">
						<form name="sentences" class="form-sentences form-horizontal">
							<div class="content-div">		
								<?php /*<div class="form-group col-sm-12 col-md-12">
									<label class=" control-label">Title </label>
									<div class="">
										<input type="text" class="form-control" id="title" placeholder="" readonly>
									</div>
								</div>*/ ?>
								
								<input type="hidden" id="total_sentences">
								<input type="hidden" id="sentence_id_to_vote">
								
								<div class="mt-3 mb-3">
									<label class="control-label d-none">Content </label>
									<label class="control-label">Original Text - Document Title: <span id="document_title"></span></label>
									<div class="postcontent form-control" id="postcontent" style="height: 80px; background: #f9fbfd; overflow: auto;">
									</div>
									<div class="display-flex mobile-justify-center justify-right d-none">
										<button data-toggle="modal" data-target="#modalUsers" type="button" class="btn btn-sm btn-original-content btn-primary waves-effect waves-light">Original Content</button>
									</div>
								</div>
								
								<div class="mt-3 mb-3">
									<label class="control-label">Machine Translated Text</label>
									<div class="translated_postcontent form-control" id="translated_postcontent" style="height: 80px; background: #f9fbfd; overflow: auto;">
									</div>
								</div>
								
								<div class="mt-3 mb-3">								
									<label class="control-label">Select the best translated sentence</label>
									<div class="form-group suggestion-list">

									</div> 
								</div>
								
							</div>	
							
							<div class="display-flex mobile-justify-center justify-space mb-3">
								<button type="button" id="btn-submit-vote" class="btn btn-success waves-effect waves-light">Submit Vote</button>
							</div>	
							
							<div class="table-responsive d-none">
								<table class="datatable1 table table-hover primary " id="tblUser" cellspacing="0" width="100%">
									<thead>
										<tr>										
											<th>Sentences</th> 
											<th></th>
										</tr>
									</thead>
									<tbody class="team-members">
									</tbody>
								</table>
							</div>
							
							<div class="display-flex mobile-justify-center submit-all justify-space mb-3" style="display: none;">
								<button type="button" class="btn btn-cancel btn-secondary waves-effect waves-light">Cancel</button>
								<button type="submit" disabled class="btn btn-submit btn-success waves-effect waves-light">Submit Batch</button>
							</div>	
							
						</form>		

						<form class="empty-div" style="display:none;">
							<div class="row">
								<div class="col-sm-12">
									<div class="form-group mt-3">
										<label>No new sentences available for voting please try again tomorrow.</label>
									</div>
								</div>
							</div>
						</form>
						
					</div>
				</div>
			</div>
		</div>						<!-- Grid column -->
	</div>
</div>
<!-- Modal Small Size -->
<div class="modal fade" id="modalUsers" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Original Paragraph</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 id="original_content" class="original-paragraph"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Small Size -->
<div class="modal fade" id="modal-skip" 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 Sentence</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">
               <p>Are you sure you want to skip the sentence? <br>This sentence will not appear again. </p>
               <input type="hidden" class="form-control" id="hdn_sentence_id">
			   <input type="hidden" class="form-control" id="hdn_user_ids">
            </div>
            <div class="modal-footer">
				<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-sm btn-skip-yes btn-success">Yes</button>
            </div>	
        </div>
    </div>
</div>
<?php include 'footer.php'; ?>
<style>
.dataTables_length,
.dataTables_info,
.dataTables_paginate{ display: none; }
</style>
<!-- TinyMCE -->
<script type="text/javascript" src="js/vendor/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    var placementFrom = "top";
    var placementAlign = "right";
    var animateEnter = "";
    var animateExit = "";
    var colorName = "bg-green";

    var start_date = '';
    var end_date = '';
    var load_flag = 0;
    var load_offset = 0;
    var data_end = 0;
    var limit = 10; 
	var progress = 0;
	var suggestionsArray = {};
	 
    function getInformation() {
        $.ajax({url: 'controllers/get_paragraph_marketplace_voting.php',
            data: {
				type: 1,
                id: '<?php echo $userId; ?>',
            },
            type: 'post',
            dataType: 'json',
            success: function (output) {
                if (output.status == 200) {				
					progress = output.progress_count;
					$("#progress").html(output.progress_count);
					
					$("#total_sentences").val(output.total_sentences);
					$("#user_sentences").val(output.user_sentences);	

					$("#sentence_id_to_vote").val(output.sentence_id);
					
					$("#document_title").text(output.document_title);
					
					$("#postcontent").html(output.content);
					$("#translated_postcontent").html(output.translated_content);
					
					//$("#original_content").html(output.original_content.trim().replace(output.content.trim(), '<span id="contentHighlight" style="background-color: #f5e882;">'+output.content.trim()+'</span>'));
					
					showSuggestion(output.suggestion);
					
					$('.empty-div').hide();
					
					//move assigned sentence to top
					document.getElementsByClassName("assigned_sentence")[0].scrollIntoView(true);
					document.getElementsByClassName("assigned_sentence")[1].scrollIntoView(true);
					
					change_progress(progress);
					
                } else {
					$('.form-sentences').hide();
                    $('.empty-div').show();
				}
            }
        });
    }
	
	$('body').on('click', '.custom-radio', function () {
		var radio_id = $(this).attr("data-id");			
		if ($("input[type=radio][name=suggestionRadio"+ radio_id + "]").is(':checked')) {
			$(".btn-save"+radio_id).attr('disabled', false);
		}
	});
	$('body').on('click', '.btn-cancel', function () {
		$.ajax({url: 'controllers/cancel_job.php',
			data: {
				paragraph_id: '<?php echo $userId; ?>',
			},
			type: 'post',
			dataType: 'json',
			success: function (output) {
				if (output.status == 200) {
					window.location.href = 'voting-marketplace.php';
				} else {
					toastr.error(output.msg);
				}
			}
		});
	});
	$('#modalUsers').on('hidden.bs.modal', function () {
	  clear_url();
	});
	$('#modalUsers').on('shown.bs.modal', function(event) {
	  // reset the scroll to top
	  $('#modalUsers .modal-body').scrollTop(0);
	  
	  // get the div position
		var position = $('#contentHighlight').position();
		// scroll modal to position top
		$("#modalUsers").scrollTop(position.top);
	});
	$('body').on('click', '.btn-original-content', function () {
		var uri = window.location.toString();
		window.history.replaceState({}, document.title, uri + '#contentHighlight');
		$("#original_content").html($("#original_content").html().trim().replace($("#postcontent").html(), '<span id="contentHighlight" style="background-color: #f5e882;">'+$("#postcontent").html()+'</span>'));
	});
	function clear_url() {
        var uri = window.location.toString();
        if (uri.indexOf("#") > 0) {
            var clean_uri = uri.substring(0, uri.indexOf("#"));
            window.history.replaceState({}, document.title, clean_uri);
        }
    }
	$(document).ready(function () {

        /*checkLockedUser();
		function checkLockedUser() {
			$.ajax({url: 'controllers/check_locked_user.php',
				data: {
					type: 0,
					id: '<?php echo $userId; ?>',
				},
				type: 'post',
				dataType: 'JSON',
				success: function (output) {
					if (output.status == 200) {
						getInformation();
						initialiseDatatable();
					} else if (output.status == 700) {
						window.location.href = "voting-marketplace.php?error=1";
					} 
				}
			});
		}*/
		
		getInformation();
		initialiseDatatable();
		
        function initialiseDatatable() {
            $('.datatable1').dataTable().fnDestroy();
            $('.directory-list').html('');
            if ($.fn.dataTable.isDataTable('.datatable1')) {
                $('.datatable1').DataTable().clear().destroy();
            }
            dataTable = $('.datatable1').DataTable({
                "oLanguage": {"sLengthMenu": "\_MENU_", 'sSearch': '', 'sSearchPlaceholder': "Search...", "sEmptyTable": "No sentences found"},
                "processing": true,
                "bDestroy": true,
                "serverSide": true,
                "bAutoWidth": false,
                "searching": true,
                "destroy": true,
                "columnDefs": [
                    {
						"targets": [0],
                        "searchable": true,
                        "orderable": false,
						"data": 'original_message',
						"visible": true,  
					}, {
                        
						"targets": [1],
                        "searchable": false,
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        "className": 'details-control',						                            					
                    }
                ],	
				"columns": [
					{ "width": "95%" },
					{ "width": "5%" },
				 ],							
                "order": [
                    [0, "desc"]
                ],
                "lengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
				"fnCreatedRow": function( nRow, aData, iDataIndex ) {
					$(nRow).attr('id', 'sentence_id'+aData.id);
				},		
                "ajax": {
                    url: "controllers/get_paragraph_voting_sentences.php", // json datasource
                    type: "post", // method  , by default get
                    data: {
						id: '<?php echo $userId; ?>',
                    },
                    error: function () { // error handling
                        $(".team-members").append('<tr><td colspan="9">No data found</td></tr>');
                    }
                },
				"drawCallback": function( settings, start, end, max, total, pre ) {  
					var totalRecords = this.fnSettings().fnRecordsTotal(); // total number of rows					
					if(totalRecords > 0) {
						$(".submit-all").show();
					}
				}	
            });
            $('input[type="search"]').addClass('txt-search');
			displayPageInfo();
        }
		
		$('.datatable1 tbody').on('click', 'td.details-control', function () {
			var tr_class = $(this).closest('tr').attr("id");			
			var tr_os = $("#os"+tr_class).html();			
			var tr = $(this).closest('tr');
            var row = dataTable.row(tr);			
			// close other tr
			/*var tr1 = $(".datatable1 tbody tr.shown");
			var tr_class1 = $(".datatable1 tbody tr.shown").attr("id");
            var row1 = dataTable.row(tr1);
			if(tr_class != tr_class1) {
				row1.child.hide();
				tr1.removeClass('shown');
			}	*/
			
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
				$("#postcontent").html($("#postcontent").html().replace(/<[^>]+>/g, ''));
            }
            else {
                // Open this row
                row.child(format(row.data()), tr_class).show();
                tr.addClass('shown');
				$("#postcontent").html($("#postcontent").html().replace(/<[^>]+>/g, ''));
				$("#postcontent").html($("#postcontent").html().replace(tr_os, '<span style="background-color: #f5e882;">'+tr_os+'</span>')); 
            }	
			var newId = tr_class.split("sentence_id")[1];
			if( suggestionsArray[newId] !== undefined ) {
				if(suggestionsArray[newId] != '') {	
					$("input[name=suggestionRadio"+newId+"][value='" + suggestionsArray[newId] + "']").prop('checked', true);
				}
			}					
        });

        function format(d) {
            // `d` is the original data object for the row
            return d.suggestion;
        }

        $('#btn-filter').on('click', function (e) {
            initialiseDatatable();
        });
		
		$(".form-sentences").submit(function (e) {
			var sLength = Object.keys(suggestionsArray).length;			
            if ($("#total_sentences").val() == sLength) {
				var dataimg = new FormData(this);
				var jsonString = JSON.stringify(suggestionsArray);
				dataimg.append('specials', jsonString);
				dataimg.append('paragraph_id', $("#userId").val());
				$(".btn-submit").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
                $.ajax({url: 'controllers/submit_vote_marketing.php',
                    data: dataimg,
					type: 'post',
					processData: false,
					contentType: false,
					dataType: 'JSON',
                    success: function (output) {
                        if (output.status == 200) {
                            toastr.success(output.msg);
							//toastr.success(output.msg);								
							window.location.href = "voting-marketplace.php?success=1";
						} else if (output.status == 500) {
							window.location.href = 'voting-marketplace.php?error=1';
						} else if (output.status == 700) {
							window.location.href = 'login.php';
                        } else {
                            $('.empty-div').hide();
							toastr.error(output.msg);
                        }
                    }
                });
				$(".btn-submit").html('Submit Batch').attr('disabled', false);
            } else {
				toastr.error('Please submit all votes.');
            }
			e.preventDefault();
        });	
		$('body').on('click', '.btn-save', function () {
			var sentence_id = $(this).attr("data-id");	
			if ($('.custom-control-input1'+sentence_id).is(':checked')) {
				
				$.ajax({url: 'controllers/save_suggestion_marketing_single.php',
					data: {
						paragraph_id: '<?php echo $userId; ?>',
                    },
					type: 'post',
					dataType: 'json',
					success: function (output) {
						if (output.status == 200) {
							progress = parseInt(progress) + 1;
							change_progress(progress);
							suggestionsArray[sentence_id] = $("input[name='suggestionRadio"+sentence_id+"']:checked").val();
							
							$("tr.sentence_id"+sentence_id).remove();
							$('tr#sentence_id'+sentence_id).removeClass("shown");
							$('tr#sentence_id'+sentence_id).addClass("submitted");
							$("#tblUser").find('tbody').append($('tr#sentence_id'+sentence_id));
							$("#postcontent").html($("#postcontent").html().replace(/<[^>]+>/g, ''));
							console.log(suggestionsArray);
							
							var sLength = Object.keys(suggestionsArray).length;
							if ($("#total_sentences").val() == sLength) {
								$(".btn-submit").attr('disabled', false);
							} else {
								$(".btn-submit").attr('disabled', true);
							}
						} else if (output.status == 700) {
							window.location.href = 'login.php';
						} else {
							toastr.error(output.msg);
						}
					}
				});				
			} else {
				toastr.error('Please select a suggestion.');
            }
		});	
		$("body").on('click', '.sh-skip', function () {
            $("#hdn_sentence_id").val($(this).attr('data-id'));
			$("#hdn_user_ids").val($(this).attr('data-uids'));
            $('#modal-skip').modal('show');
        });
		$('body').on('click', '.btn-skip-yes', function () {
			$(".btn-skip-yes").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
			var sentence_id = $("#hdn_sentence_id").val();	
			var new_total = parseInt($("#total_sentences").val()) - 1;
			
			$("#total_sentences").val(new_total);
			if (sentence_id in suggestionsArray) {
				delete suggestionsArray[sentence_id];
			}				
			$.ajax({url: 'controllers/skip_voting_sentences_marketplaces.php',
				data: {
					paragraph_id: '<?php echo $userId; ?>',
					sentence_id: sentence_id,
					user_ids: $("#hdn_user_ids").val(),
					total: new_total
				},
				type: 'post',
				dataType: 'json',
				success: function (output) {
					if (output.status == 200) {
						if(progress > 0)
						progress = parseInt(progress) - 1;
						change_progress(progress);
						$("tr.sentence_id"+sentence_id).remove();
						$('tr#sentence_id'+sentence_id).remove();
						$("#postcontent").html($("#postcontent").html().replace(/<[^>]+>/g, ''));
						console.log(suggestionsArray);
						var sLength = Object.keys(suggestionsArray).length;
						if ($("#total_sentences").val() == sLength) {
							$(".btn-submit").attr('disabled', false);
						} else {
							$(".btn-submit").attr('disabled', true);
						}
						$("#hdn_sentence_id").val('');
						$('#modal-skip').modal('hide');
						if(parseInt($("#total_sentences").val()) == 0) {
							window.location.href = 'voting-marketplace.php?skip=1';
						}
					} else if (output.status == 700) {
						window.location.href = 'login.php';
					} else {
						toastr.error(output.msg);
					}
					$(".btn-skip-yes").html('YES').attr('disabled', false);
				}
			});			
		});				
    });
	function change_progress(progress) {		 
		var totalS = $("#total_sentences").val();
		var widthP = (progress * 100)/totalS;
		$("#progress").css("width",widthP+'%');
		$("#progress").html(progress+'/'+totalS);			
	}
	function displayPageInfo() {
		$(".dataTables_info").each(function() {
		  $(this).prependTo($(this).closest(".dataTables_wrapper"));
		});
	}
	
	function showSuggestion(suggestion) {		

		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>');
		}	
		
	}
	
	//on click original sentence display it's translated sentence
	$('body').on('click', '.select_original_sentence', function () {
		var selected_class_index_ori_sen = $(this).index();
		document.getElementsByClassName("select_machine_translated_sentence")[selected_class_index_ori_sen].scrollIntoView(true);
	});
	
	//on click machine translated sentence display it's original sentence 
	$('body').on('click', '.select_machine_translated_sentence', function () {	
		var selected_class_index = $(this).index();
		document.getElementsByClassName("select_original_sentence")[selected_class_index].scrollIntoView(true);		
	});	
	
	$("#btn-submit-vote").click(function () {
		if ($('.custom-control-input').is(':checked')) {			
			
			//$(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_voting_marketing_map.php',
				data: {
					suggestion_id: $("input[name='suggestionRadio']:checked").val(),
					sentence_id: $('#sentence_id_to_vote').val()
				},
				type: 'post',
				dataType: 'JSON',
				success: function (output) {
					if (output.status == 200) {
						toastr.success(output.msg);
						
						$('.suggestion-list').html('');
						
						getInformation();
						
						/*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.');
		}
	});
	
</script>