<?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 Suggestions - 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_ids">
								
								<div class="mt-3 mb-3">
									<label class="control-label d-none">Content </label>
									<label class="control-label">Original Text</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">Translated Text [Color Codes: <span style="color: red;">Red</span> - Sentence assigned, <span style="color: blue">Blue</span> - Suggestion submitted, <span style="color:silver">Silver</span> - Not yet assigned]</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">Suggest a better translation for above red colored sentence</label>
									<textarea class="form-control" rows="3" placeholder="Your Suggestion" id="suggestion_text"></textarea>
								</div>
								
								<div class="mt-3 mb-3">
									<div class="display-flex mobile-justify-center">
										<input type="hidden" id="suggestion_marketing_map_id" value="">
										<input type="hidden" id="sentence_id" value="">
										<button type="button" id="btn-skip-suggestion" class="btn btn-info waves-effect waves-light d-none">Skip Suggestion</button>
										<button type="button" id="btn-submit-suggestion" class="btn btn-success waves-effect waves-light">Submit Suggestion</button>
									</div>
								</div>
								
							</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 Suggestions</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 suggestion 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-close-modal btn-default" data-dismiss="modal">Close</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">
$(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;
    });	
	
	//$('html, body').animate({ scrollTop: $("#btn-submit-suggestion").offset().top }, 1000);	
});
    var placementFrom = "top";
    var placementAlign = "right";
    var animateEnter = "";
    var animateExit = "";
    var colorName = "bg-green";
	var progress = 0;
	var suggestionsArray = {};	
    function getInformation() {
        $.ajax({url: 'controllers/get_paragraph.php',
            data: {
				type: 0,
                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);	
					$("#sentence_ids").val(output.sentence_ids);						
					$("#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>'));
					$("#sentence_id").val( output.sentence_id );
					$("#suggestion_marketing_map_id").val( output.suggestion_marketing_map_id );
					
					$('.empty-div').hide();
					
					if( output.progress_count == output.total_sentences ) {
						window.location.href = "suggestions-marketplace.php?success=1";
					}
					
					//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();
					
				}
            }
        });
    }
	$('#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 = "suggestions-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, "asc"]
                ],
                //"lengthMenu": [[5, 10], [5, 10]],
				"fnCreatedRow": function( nRow, aData, iDataIndex ) {
					$(nRow).attr('id', 'sentence_id'+aData.id);
				},		
				//'paging': false,
                "ajax": {
                    url: "controllers/get_paragraph_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] != '') {
					$("#suggestion"+newId).val(suggestionsArray[newId]);
				}
			}					
        });

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

		$(".form-sentences").submit(function (e) {
			var sLength = Object.keys(suggestionsArray).length;
			var dataimg = new FormData(this);
			var jsonString = JSON.stringify(suggestionsArray);
			dataimg.append('specials', jsonString);
			dataimg.append('paragraph_id', $("#userId").val());
            if ($("#total_sentences").val() == sLength) {
					$(".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/save_suggestion_marketing.php',
						data: dataimg,
						type: 'post',
						processData: false,
						contentType: false,
						dataType: 'JSON',
						success: function (output) {
							if (output.status == 200) {
								//toastr.success(output.msg);								
								window.location.href = "suggestions-marketplace.php?success=1";
							} else if (output.status == 700) {
								window.location.href = 'login.php';
							} else {
								toastr.error(output.msg);
							}
						}
					});				
					$(".btn-submit").html('Submit Suggestion').attr('disabled', false);
            } else {
				toastr.error('Please enter all suggestions.');
            }
			e.preventDefault();
        });	
		$('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 = 'suggestions-marketplace.php';
					} else {
						toastr.error(output.msg);
					}
				}
			});
		});
		$('body').on('click', '.btn-save', function () {
			var sentence_id = $(this).attr("data-id");	
			if($("#suggestion"+sentence_id).val() != '') {
				$.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] = $("#suggestion"+sentence_id).val();				
							
							$("tr.sentence_id"+sentence_id).remove();
							$('tr#sentence_id'+sentence_id).removeClass("shown");
							$('tr#sentence_id'+sentence_id).addClass("submitted");
							$('tr#sentence_id'+sentence_id).removeClass("error");
							$("#tblUser").find('tbody').append($('tr#sentence_id'+sentence_id));
							$("#postcontent").html($("#postcontent").html().replace(/<[^>]+>/g, ''));
						} else if (output.status == 500) {
							window.location.href = 'suggestions-marketplace.php?error=1';
						} else if (output.status == 700) {
							window.location.href = 'login.php';
						} else {
							toastr.error(output.msg);
						}
					}
				});
			} else {
				toastr.error('Please enter suggestion.');
            }
		});
    });
	$('body').on('focusout', '.suggestion-text', function () {
		var current_id = $(this).attr("data-id");
		var current_val = $(this).val();
		var machine_suggestion = $("#machine_suggestion"+current_id).text();
		if(current_val == '' || current_val == machine_suggestion) {
			$(".btn-save"+current_id).attr('disabled', true);
			if (current_id in suggestionsArray) {
				delete suggestionsArray[current_id];
				$('tr#sentence_id'+current_id).removeClass("submitted");
				$('tr#sentence_id'+current_id).addClass("error");
			}
		} else {
			$(".btn-save"+current_id).attr('disabled', false);
		}
		var sLength = Object.keys(suggestionsArray).length + 1;
		if ($("#total_sentences").val() == sLength) {
			$(".btn-submit").attr('disabled', false);
		} else {
			$(".btn-submit").attr('disabled', true);
		}
	});
	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"));
		});
	}
	
	//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-suggestion").click(function() {
		if ($('#suggestion_text').val().trim() != '') {		
					
			var sentence_id = $("#sentence_id").val();
			var suggestion_marketing_map_id = $("#suggestion_marketing_map_id").val();
			var suggestion_text = $('#suggestion_text').val();
			$.ajax({url: 'controllers/save_suggestion_marketing_map.php',
				data: {
					sentence_id: sentence_id,
					suggestion_marketing_map_id: suggestion_marketing_map_id,
					suggestion_text: suggestion_text,
				},
				type: 'post',
				dataType: 'json',
				success: function (output) {
					if (output.status == 200) {
						toastr.success(output.msg);
						$('#suggestion_text').val('');
						getInformation();
					} else {
						toastr.error(output.msg);
					}
				}
			});
			
		} else {
			toastr.error('Please enter suggestion.');
		}
	});
	
</script>