{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{% import 'bootstrap/utils.html' as utils %}

{% block app_content %}
<h2>  </h2>
    
<br>
<div class="container">
	<div class="panel panel-default ">
		<form class="navbar-form navbar-left" role="navigate" method="post" aria-label="Right Align" id="editCESform">
<!--		<div class="panel-heading">-->
<!--		  <h3 class="panel-title"><b>Evaluation</b></h3>-->
<!--		</div>-->
			<div class="panel-body">
	<!--			<h4><b> Illustrative case: </b></h4>-->
				<div class="row">
				  <div class="col-sm-6">
					<div class="card h-100">
					  <div class="card-body">
						  <h4>Scenario</h4>
						<p class="card-text">
						A fire emergency occurs in a University campus.
						Among the persons in the building is Anne.
						Her health record includes the condition displayed on the right.
						Our Intelligent system needs to decide whether Anne requires special assistance during the emergency.
						Therefore, it needs to decide whether the condition found in the health record may still be ongoing at the time of the emergency event.
						The system is required to make a timely assessment based on the information in the health record only.
						Luckily, the system can use a dataset of Condition Evolution Statements.
						</p>
					  </div>
					</div>
				  </div>
				  <div class="col-sm-6">
					<div class="card h-100" >
						<div class="card-body">
							<h4><b>{{ concepts[0]['conditionName'] }}</b></h4>
							<ul class="list-group list-group-flush">
								<li class="list-group-item"><b>Snomed CT Concept</b>
									{% if concepts[0]['snomedConcept'] %}
										{{ concepts[0]['snomedConcept'] }} ({{ concepts[0]['snomedIdentifier'] }})
									{% endif %}
								</li>

								<li class="list-group-item">
									Source(s):
									{% if sources %}
										<table class="table table-borderless">
										  <tbody>
											{% for sourceLink in sources %}
											<tr>
												<td>
													{{ sourceLink['source'] }}
												</td>
											  <td>
												  <a href="{{ sourceLink['url'] }}" target="_blank" rel="noopener noreferrer">{{ sourceLink['type'] }}</a>
											  </td>
											</tr>
											{% endfor %}
										  </tbody>
										</table>
									{% endif %}

								</li>
							</ul>
							<div class="panel-body container-sm table-responsive">
								<div class="row"><p><strong>How familiar are you with this concept?</strong></p></div>
								<div class="row">
									<div class="col">
										<input class="" type="radio" name="confidence" id="inlineRadio1" value="1" checked>
										<label class="" for="inlineRadio1">Unfamiliar</label>
									</div>
									<div class="col">
										<input class="" type="radio" name="confidence" id="inlineRadio2" value="2">
										<label class="" for="inlineRadio2">Partially familiar</label>
									</div>
									<div class="col">
										<input class="" type="radio" name="confidence" id="inlineRadio3" value="3">
										<label class="" for="inlineRadio3">Familiar</label>
									</div>
								</div>
							</div>
						</div>
					</div>
				  </div>
				</div>

	<!--			<p><h4>Our system indicates this condition evolves as indicated in the following list.</h4></p>-->
				<!-- Listing the CES and controls to indicate correctness-->

				<div class="panel-body container-sm table-responsive">
					<p>
						<h4>
							<b>Considering the scenario above, how do you agree with the following Condition Evolution Statements?</b>
						</h4>
					</p>
					{% if concepts %}
					<table id="table_details" class="table table-striped table-bordered table-sm">
						<thead>
							<tr>
								<th>Condition Evolution Statement</th>
								<th class="text-center">Incorrect <br><input type="radio" name="cb" id="cb1"></th>
								<th class="text-center">Partially incorrect <br><input type="radio" name="cb" id="cb2"></th>
								<th class="text-center">Neither correct nor incorrect <br><input type="radio" name="cb" id="cb3"></th>
								<th class="text-center">Partially correct <br><input type="radio" name="cb" id="cb4"></th>
								<th class="text-center">Correct <br><input type="radio" name="cb" id="cb5"></th>
							</tr>
						</thead>
						<tbody>
							{% for dataCell in concepts %}
							<tr>
<!--								<td>-->
<!--&lt;!&ndash;									<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#healthDetailsModal">More info</button>&ndash;&gt;-->
<!--									<a data-toggle="modal" href="#healthDetailsModal" data-id="{{dataCell['index']}}" data-source="{{dataCell['source']}}" data-sentence="{{dataCell['sentence']}}">More info</a>-->
<!--								</td>-->
								{% if dataCell['predictedTag'] %}
								   <td> {{ dataCell['predictedTag'] }}</td>
								{% else %}
									<td> </td>
								{% endif %}
								<td class="text-center">
									<input class="form-check-input" type="radio" name="inlineRadioOptions{{dataCell['index']}}" id="inlineRadioI" value="5">
								</td>
								<td class="text-center">
									<input class="form-check-input" type="radio" name="inlineRadioOptions{{dataCell['index']}}" id="inlineRadioPI" value="4" >
								</td>
								<td class="text-center">
									<input class="form-check-input" type="radio" name="inlineRadioOptions{{dataCell['index']}}" id="inlineRadioNCNI" value="3" checked>
								</td>
								<td class="text-center">
									<input class="form-check-input" type="radio" name="inlineRadioOptions{{dataCell['index']}}" id="inlineRadioPC" value="2"><!--  data-bs-toggle="collapse" data-bs-target="#collapseImprove" aria-expanded="false" aria-controls="collapseImprove">!-->
								</td>
								<td class="text-center">
									<input class="form-check-input" type="radio" name="inlineRadioOptions{{dataCell['index']}}" id="inlineRadioCorrect" value="1">
								</td>
							</tr>
							{% endfor %}
						</tbody>
					</table>
					{% else %}
						<br><strong> No health condition to validate  </strong>
					{% endif %}
				</div>
				<!-- Vertically centered modal -->
				<div id="healthDetailsModal" class="modal fade" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="healthDetailsTitle">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 id="healthDetailsTitle" class="modal-title">CES details</h5>
								<button class="close" type="button" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<b>Source:</b>
								<p id="lblSource"></p>
								<b>Sentence:</b>
								<p id="lblSentence"></p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div>

				<div  id="main_answer" class="panel-body container-sm table-responsive">
<!--					<div  id="editCES" class="panel-body container-sm table-responsive">-->
						<!-- Asking if possible to improve -->
						<div class="row" id="editCES">
							<div class="col-12 collapse multi-collapse show" id="collapseImprove">
								<h4> Can you help us improve this Condition Evolution Statement?</h4>
								<div>
<!--									<button type="button" class="btn btn-primary btn-lg" value="Y" id="buttonYes">Yes</button>-->
<!--									<button type="button" class="btn btn-primary btn-lg" value="N" id="buttonNo">No</button>-->
								</div>
							</div>
						</div>
						<p></p>

						<!-- Controls to input a new value for CES-->
						<div class="collapse multi-collapse show" id="collapseEditCES">
							<div class="card">
								<div class="card-header">
									{{ concepts[0]['conditionName'] }}
								</div>
								<div class="card-body">
									<div class="row input-group input-group-lg">
										<div class="col-md-2">
											<label class="input-group-text input-group-lg" for="direction">Direction: </label>
											<select class="form-select form-select-lg" id="direction" name="direction">
												<option value="IMPROVE" selected>IMPROVE</option>
												<option value="DECLINE">DECLINE</option>
												<option value="PERMANENT">PERMANENT</option>
												<option value="NONE">NONE</option>
											</select>
										</div>
										<div class="col-md-2">
											<label class="input-group-text" for="pace">Pace: </label>
											<select class="form-select form-select-lg" aria-label="Default select example" id="pace" name="pace">
											  <option value="SLOWLY" selected>SLOWLY</option>
											  <option value="MODERATELY">MODERATELY</option>
											  <option value="FAST">FAST</option>
											</select>
										</div>
										<div class="col-md-3">
											<div class="row">
												<label class="input-group-text" for="value-from">From: </label>
											</div>
											<div class="row">
												<div class="col-4 p-0">
													<input type="text" size="5" class="form-control" placeholder="0" id="value-from" name="value-from">
												</div>
												<div class="col-8 p-1">
													<select class="form-select form-select-lg" aria-label="Default select example" id="from-lb" name="from-lb">
														<option value="MINUTES" selected>MINUTES</option>
														<option value="DAYS">DAYS</option>
														<option value="WEEKS">WEEKS</option>
														<option value="MONTHS">MONTHS</option>
														<option value="YEARS">YEARS</option>
													</select>
												</div>
											</div>
										</div>
										<div class="col-md-3">
											<div class="row">
												<label class="input-group-text" for="value-to">To: </label>
											</div>
											<div class="row">
												<div class="col-4 p-0">
													<input type="text" size="5" class="form-control" placeholder="0" id="value-to" name="value-to">
												</div>
												<div class="col-8 p-1">
													<select class="form-select form-select-lg" aria-label="Default select example" id="to-ub" name="to-ub">
														<option value="MINUTE" selected>MINUTES</option>
														<option value="DAY">DAYS</option>
														<option value="WEEK">WEEKS</option>
														<option value="MONTH">MONTHS</option>
														<option value="YEAR">YEARS</option>
													</select>
												</div>
											</div>
										</div>
										<div class="col-md-2">
											<div class="form-check">
											  <input class="form-check-input" type="checkbox" id="noImprove" value="newCES" checked>
											  <label class="form-check-label" for="noImprove">
												  No, I can't think of a better CES
											  </label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					<!-- Collapse Next button to continue with annotations -->
					<div id="NextButton" class="panel-body container-sm table-responsive">
						<div class="row justify-content-end">
							<div class="d-grid gap-2 col-3 collapse multi-collapse in" id="collapseNext">
								<button type="submit" class="btn btn-primary btn-lg" value="next" name="next" id="buttonNext" >Next</button>
<!--								<button class="btn btn-primary btn-lg" value="next" name="next" id="buttonNext" disabled>Next</button>-->
							</div>
						</div>
						<p></p>
						<input type="hidden" id="totalCES" name="totalCES" value="{{ items }}">
						<input type="hidden" id="errorValue" name="errorValue" value="">
						<input type="hidden" id="improveAnswer" name="improveAnswer" value="">
						<input type="hidden" id="snmdIdentifier" name="snmdIdentifier" value="{{ concepts[0]['snomedIdentifier'] }}">
						<input type="hidden" id="snmdConcept" name="snmdConcept" value="{{ concepts[0]['snomedConcept'] }}">
						<input type="hidden" id="confidenceResult" name="confidenceResult" value="1">

					</div>
				</div>
			</div>
		</form>
	</div>
</div>
{% endblock %}
{% block additional_scripts %}
<script type="text/javascript">

	$(document).ready(function(){
		$('#healthDetailsModal').on('show.bs.modal', function (event) {
			//console.log('MODAL');
			var button = $(event.relatedTarget); // Button that triggered the modal
			var recipient = button.data('id'); // Extract info from data-* attributes
			var source = button.data('source');
			var sentence = button.data('sentence');

			var modal = $(this);
			//modal.find('.modal-title').text('New message to ' + recipient);
			modal.find('#lblSource').text(source);
			modal.find('#lblSentence').text(sentence);
		});

		$('input[type=radio][name=confidence]').change(function() {
            if (this.value == 1) {
                $("#confidenceResult").removeAttr("value");
				$("#confidenceResult").attr("value", "1");
            }else if (this.value == 2) {
                $("#confidenceResult").removeAttr("value");
				$("#confidenceResult").attr("value", "2");
            }else if (this.value == 3) {
                $("#confidenceResult").removeAttr("value");
				$("#confidenceResult").attr("value", "3");
            }
            //console.log(this.value);
        });

		$(".form-check-input").click(function(){
		//$("input:radio").click(function(){
			//console.log('button click');//output the description to the console
			// if all checked then value = True, if at least one is not checked then false
			var check = validateAllRadiosCheck();
			//console.log(check);
			if(check){
				//console.log("True");
				// activate Next button
				$("#buttonNext").removeAttr("disabled");
				$('#buttonNext').removeClass('disabled');
				// activate question to improve value
				//$('#collapseImprove').addClass('collapse multi-collapse in');
			}
		});

		$("#buttonNo").click(function(){
			// enable the controls for Next
			$("#buttonNext").removeAttr("disabled");
			$('#buttonNext').removeClass('disabled');
			$("#collapseEditCES").removeClass("collapse multi-collapse in");
			$('#collapseEditCES').addClass('collapse multi-collapse');
			$("#improveAnswer").removeAttr("value");
			$("#improveAnswer").attr("value", "NO");
		});

		$("#buttonYes").click(function(){
			// enable the controls to input a new CES value
			$("#buttonNext").removeAttr("disabled");
			$('#buttonNext').removeClass('disabled');
			$('#collapseEditCES').addClass('collapse multi-collapse in');
			$("#improveAnswer").removeAttr("value");
			$("#improveAnswer").attr("value", "YES");
		});

		$("#buttonNext").click(function(){
			// validate all radio input check
			var check = validateAllRadiosCheck();
			if(check){
				$("#errorValue").removeAttr("value");
				$("#errorValue").attr("value", "");
				//$('#buttonNext').addClass('value');
				//alert('One radio in each group is checked.');
			}else{
				$("#errorValue").removeAttr("value");
				$("#errorValue").attr("value", "incompleteCheckBox");
				//$('#buttonNext').addClass('value');
				//alert('Please select one option in each question.');
			}

			// validate two digits are not zero at the same time
			var valueSelected  = $("#improveAnswer").val();

			// validate if participant can improve value or not numberValidation
			if (valueSelected == "newCES"){
				console.log("TRUE");
				// validate that both input boxes contain a number and not other characters
				// if true, the value is a number
				var isNumber  = validateInputIsNumber();
				if (isNumber == true){
					// verify that the values are not zero
					var checkDigits = validateZeroDigits();
				}
			}
		});

		$('input[type="checkbox"]').click(function() {
			// If checked it means that the user cannot provide a new CES
		  if($(this).prop("checked") == true) {
			//alert("Checkbox is checked.");
			$("#improveAnswer").removeAttr("value");
			$("#improveAnswer").attr("value", "");
			//console.log("TRUE");
		  }
		  else if($(this).prop("checked") == false) {
			//alert("Checkbox is unchecked.");
			$("#improveAnswer").removeAttr("value");
			$("#improveAnswer").attr("value", "newCES");
			//console.log("FALSE");
		  }
		});

		$('#direction').find('option').click(function () {
			var optionSelected = $(this);
			var valueSelected  = optionSelected.val();
			var textSelected   = optionSelected.text();

			if (textSelected == "NONE" || textSelected == "PERMANENT"){
				// disable from controls
				$("#pace").prop("disabled", true);
				$("#value-to").prop("disabled", true);
				//$("#digitFrom1").prop("disabled", true);
				$("#from-lb").prop("disabled", true);

				// disable from controls
				$("#value-from").prop("disabled", true);
				//$("#digitTo1").prop("disabled", true);
				$("#to-ub").prop("disabled", true);
			}else{
				// enable controls
				$("#pace").prop("disabled", false);
				$("#value-to").prop("disabled", false);
				//$("#digitFrom1").prop("disabled", false);
				$("#from-lb").prop("disabled", false);

				// disable from controls
				$("#value-from").prop("disabled", false);
				//$("#digitTo1").prop("disabled", false);
				$("#to-ub").prop("disabled", false);
			}
		});

		// validate all radio button groups have one checked
		function validateAllRadiosCheck() {
			var check = true;
			$("input:radio").each(function(){
				var name = $(this).attr("name");
				// excluding the header radio buttons
				if (name != "cb"){
					// if one radio button is not checked then return false
					if($("input:radio[name="+name+"]:checked").length == 0){
						check = false;
					}
				}
			});
			return check;
		};

		// validate two digits are not zero at the same time
		function validateZeroDigits() {
			var check = true;
			var digitFrom = $("#value-from").val();
			//var digitFrom1 = $("#digitFrom1").val();

			var digitTo = $("#value-to").val();
			//var digitTo1 = $("#digitTo1").val();

			var direction = $("#direction").val();

			if (direction != "PERMANENT" && direction != "NONE"){
				if (digitFrom == "0" || digitFrom == ""){
					check = false
					$("#errorValue").removeAttr("value");
					$("#errorValue").attr("value", "digitFromInvalid");
				}else if (digitTo == "0" || digitTo == ""){
					check = false
					$("#errorValue").removeAttr("value");
					$("#errorValue").attr("value", "digitToInvalid");
				}
			}
			return check;
		};

		// this function is called to validate the input value is a number
		function validateInputIsNumber() {
			var inputTo = $("#value-to").val();
			var inputFrom = $("#value-from").val();
			var check = true;
			if (isNaN(inputTo)) {
				check = false
				$("#errorValue").removeAttr("value");
				$("#errorValue").attr("value", "needANumberTo");
			}
			if (isNaN(inputFrom)){
				check = false;
				$("#errorValue").removeAttr("value");
				$("#errorValue").attr("value", "needANumberFrom");
			}
			return check;
		};

		$('[id^="cb1"]').on('change', function(){
			var checked = $(this).prop('checked');
			var index = $(this).parent().index();

			$('tr').each(function(i, val){
				$(val).children().eq(index).children('input[type=radio]').prop('checked', checked);
			});
		});

		$('[id^="cb2"]').on('change', function(){
			var checked = $(this).prop('checked');
			var index = $(this).parent().index();

			$('tr').each(function(i, val){
				$(val).children().eq(index).children('input[type=radio]').prop('checked', checked);
			});
		});

		$('[id^="cb3"]').on('change', function(){
			var checked = $(this).prop('checked');
			var index = $(this).parent().index();

			$('tr').each(function(i, val){
				$(val).children().eq(index).children('input[type=radio]').prop('checked', checked);
			});
		});

		$('[id^="cb4"]').on('change', function(){
			var checked = $(this).prop('checked');
			var index = $(this).parent().index();

			$('tr').each(function(i, val){
				$(val).children().eq(index).children('input[type=radio]').prop('checked', checked);
			});
		});

		$('[id^="cb5"]').on('change', function(){
			var checked = $(this).prop('checked');
			var index = $(this).parent().index();

			$('tr').each(function(i, val){
				$(val).children().eq(index).children('input[type=radio]').prop('checked', checked);
			});
		});

	});
</script>
{% endblock %}