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

{% block app_content %}

<br>
<div class="container">
	<div class="panel panel-default ">
		<div class="panel-body">
			<div class="row">
				<div class="col-sm-6">
					<div class="card bg-light mb-3">
						<div class="card-body bg-light mb-3">
							<h4><b> {{ parent['snomedConcept'] }} ({{ parent['snomedIdentifier'] }})</b></h4>
							<ul class="list-group list-group-flush bg-light mb-3">
								<li class="list-group-item">
									<b>Condition Evolution Statement(s) (CES): </b>
									{% if cess %}
									<table class="table table-borderless">
										<tbody>
										{% for item in cess %}
											<tr>
												<td>
												{{ item['CES'] }}
												</td>
											</tr>
										{% endfor %}
										</tbody>
									</table>
									{% endif %}
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card bg-light mb-3">
						<div class="card-body bg-light mb-3">
							<h4><b>Attribute(s):</b></h4>
							<ul class="list-group list-group-flush bg-light mb-3">
								{% if attributes %}
									{% for item in attributes %}
								<li class="list-group-item font-weight-light">{{ item['att_type_term'] }} : {{ item['att_value_term'] }} </li>
									{% endfor %}
								{% else %}
								<p>No attributes</p>
								{% endif %}
							</ul>
							{% if parents %}
							<h4><b>Direct Parent(s):</b></h4>
							<ul class="list-group list-group-flush bg-light mb-3">
								{% for item in parents %}
								<li class="list-group-item font-weight-light">{{ item['term'] }} </li>
								{% endfor %}
							</ul>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="panel-body">
			<form method="post" id="editCESform">
				{% if rule1|length %}
				<div class="card">
					<div class="card-header">
						<h5>
						<p class="card-text bg-light">Considering the health condition <b> " {{ parent['snomedConcept'] }} "</b> and its Condition Evolution Statement(s):</p>
						</h5>
						<h4>
							<p class="card-text fw-bold">How much do you agree with the following list of health conditions
								<b class="fst-italic"><u> sharing </u></b> the same Condition Evolution Statement (CES)
							as <b>{{ parent['snomedConcept'] }}</b> ?
						</p>
						</h4>
					</div>
					<div class="card-body">
						<div class="row">
							<p></p>
							<div>
							<table class="table table-striped table-bordered table-sm" id="tableRule1">
								<thead>
									<tr>
										<th>Condition Description</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"> I do not know <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 rule in list_rules %}
									<tr>
										<td colspan="6" class="fst-italic">
											Group {{ rule }}: {{ list_rules[rule] }}
										</td>
									</tr>
										{% for dataCell in rule1 %}
											{% if rule == dataCell['rule'] %}
									<tr>
										{% if dataCell['descendantConcept'] %}
									   	<td> {{ dataCell['descendantConcept'] }}</td>
										{% else %}
										<td> </td>
										{% endif %}
										<td class="text-center"><input type="radio" name="cb{{dataCell['index']}}" id="cba" value="5,{{ dataCell['rule'] }},{{ dataCell['descendantId'] }}"></td>
										<td class="text-center"><input type="radio" name="cb{{dataCell['index']}}" id="cbb" value="4,{{ dataCell['rule'] }},{{ dataCell['descendantId'] }}"></td>
										<td class="text-center"><input type="radio" name="cb{{dataCell['index']}}" id="cbc" value="3,{{ dataCell['rule'] }},{{ dataCell['descendantId'] }}"></td>
										<td class="text-center"><input type="radio" name="cb{{dataCell['index']}}" id="cbd" value="2,{{ dataCell['rule'] }},{{ dataCell['descendantId'] }}"></td>
										<td class="text-center"><input type="radio" name="cb{{dataCell['index']}}" id="cbe" value="1,{{ dataCell['rule'] }},{{ dataCell['descendantId'] }}"></td>
									</tr>
											{% endif %}
										{% endfor %}
									{% endfor %}
								</tbody>
							</table>
								</div>
						</div>
					</div>
				</div>
				{% else %}
<!--						<br><strong> No health condition to validate  </strong>-->
				{% endif %}

			<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="snmdIdentifier" name="snmdIdentifier" value="{{ parent['snomedIdentifier'] }}">
				<input type="hidden" id="total_rows" name="total_rows" value="{{ total_rows }}">
			</div>
		</form>
		</div>
	</div>
</div>

{% endblock %}

{% block additional_scripts %}
<script type="text/javascript">
	$(document).ready(function() {
		/*$('#tableRule1').DataTable( {
			"lengthChange":   false,
			"paging": false
		} );*/
		$('[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 %}