<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			PASIEN <small>Preview</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">pasien</a></li>
			<li class="active">detail_odontogram</li>
		</ol>
	</section>

	<!-- Main content -->
	<section class="content">
		<?php
		if ($this->session->flashdata('message')) {
			echo $this->session->flashdata('message');
		}

		$caseID = $this->uri->segment(3);
		$datapasien = $this->db->query("Select * from Cases where [Case ID] = '$caseID'")->row_array();
		?>
		<!-- PAGE CONTENT BEGINS -->

		<section class='content'>
			<div class='row'>
				<!-- left column -->
				<div class='col-md-12'>
					<!-- general form elements -->
					<div class='box box-primary'>
						<div class='box-header with-border'>
							<h3 class='box-title'>DETAIL PASIEN : <u><?= $datapasien['Case ID'] . '-' . $datapasien['Description']; ?></u></h3>
						</div>
						<div class='box-body table-responsive'> <!-- jQuery 3 -->

<script src="http://webmedia.esy.es/odontogram2/asset/odontograma_archivos/jquery-1.js" type="text/javascript"></script>
<script src="http://webmedia.esy.es/odontogram2/asset/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://webmedia.esy.es/odontogram2/asset/odontograma_archivos/jquery.js" type="text/javascript"></script>

<table border="1" width="100%">
	<tr>
		<td colspan="2">
			<div style="line-height:30px;height:30px;">
				<b>&nbsp;ODONTOGRAM</b>
			</div>

		</td>
	</tr>
	<tr>
		<td><br />


			<div id="svgselect" style="width: 610px; height: 230px; "> <!-- background-color:red -->
			<!-- Gambar svg -->
			<?php $this->load->view('rekamMedis/page/svg_gigi'); ?>
				<?php $caseID = $this->uri->segment(3); ?>
				<input type="hidden" name="caseid" id="caseid" class="form-control" value="<?= $caseID; ?>">
			</div>
		</td>
		<td rowspan="2" valign="top" width="35%">
			<div style="line-height:30px;height:30px;">
				&nbsp;<u>GIGI :</u>
			</div>
			<div id="piezadetail">
				<span id="piezanumero">&nbsp;XX</span>
				-
				<span id="piezacara">&nbsp;X</span>
			</div>

			<h1>
				<div id="message" style="height:20px"></div>
			</h1>
			<hr />
			<p><u>Jenis Penyakit :</u></p>
			<p style="overflow-y: scroll; height:200px;">
				&nbsp;&nbsp;<label style="background-color:Aqua;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Tambalan composite (cof)</small><br />&nbsp;&nbsp;<label style="background-color:Blue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Pit dan fissure sealant (fis)</small><br />&nbsp;&nbsp;<label style="background-color:BlueViolet ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Gigi non vital (nvt)</small><br />&nbsp;&nbsp;<label style="background-color:Brown ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Perawatan Saluran Akar (rct)</small><br />&nbsp;&nbsp;<label style="background-color:Chartreuse ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Gigi tidak ada, tidak diketahui ada atau tidak ada</small><br />&nbsp;&nbsp;<label style="background-color:CornflowerBlue ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Un-Erupted (une)</small><br />&nbsp;&nbsp;<label style="background-color:Cyan;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Partial Erupt (pre)</small><br />&nbsp;&nbsp;<label style="background-color:DarkBlue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Normal/baik(sou)</small><br />&nbsp;&nbsp;<label style="background-color:DarkCyan;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Anomali (ano)</small><br />&nbsp;&nbsp;<label style="background-color:DarkGoldenRod ;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Pegshape, micro, fusi, etc.</small><br />&nbsp;&nbsp;<label style="background-color:DarkOrange;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Caries : tambalan sementara (car)</small><br />&nbsp;&nbsp;<label style="background-color:DarkViolet;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>(Garis batas caries dibuat sesuai posisi caries, d</small><br />&nbsp;&nbsp;<label style="background-color:Fuchsia;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Fracture (cfr)</small><br />&nbsp;&nbsp;<label style="background-color:Gold;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Tambalan Amalgam pada gigi non vital = Root Canal </small><br />&nbsp;&nbsp;<label style="background-color:Green;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Tambalan Composite pada gigi non-vital =Root Canal</small><br />&nbsp;&nbsp;<label style="background-color:GreenYellow;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Full metal crown pada gigi vital (fmc)</small><br />&nbsp;&nbsp;<label style="background-color:Indigo;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Full metal crown pada gigi non-vital (fmc-rct)</small><br />&nbsp;&nbsp;<label style="background-color:HotPink;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Porcelain crown pada gigi vital (poc)</small><br />&nbsp;&nbsp;<label style="background-color:Magenta;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Porcelain crown pada gigi non vital (poc-rct)</small><br />&nbsp;&nbsp;<label style="background-color:Red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Sisa Akar (rrx)</small><br />&nbsp;&nbsp;<label style="background-color:SkyBlue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Gigi hilang (mis)</small><br />&nbsp;&nbsp;<label style="background-color:Silver;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Implant + Porcelain Crown (ipx - poc)</small><br />&nbsp;&nbsp;<label style="background-color:Yellow;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Full metal bridge 3 units. (Meb) (masing-masing gi</small><br />&nbsp;&nbsp;<label style="background-color:Teal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Porcelain bridge 4 units (pob)</small><br />&nbsp;&nbsp;<label style="background-color:Tan;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Full metal cantilever bridge (meb)</small><br />&nbsp;&nbsp;<label style="background-color:Plum;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Partial Denture/Full Denture (frm=Frame; acr = Acr</small><br />&nbsp;&nbsp;<label style="background-color:Moccasin;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> &nbsp;<small>Migrasi/Version/Rotasi dibuat panah sesuai arah</small><br /> </p>

		</td>
	</tr>

</table>


<script type="text/javascript">
	var nomencladores = {
		"practicas": [{
				"nomenclador": "02.01",
				"color": "cyan"
			},
			{
				"nomenclador": "02.02",
				"color": "magenta"
			},
		]
	};

	var odontograma = {
		"dientes": [{
				"pieza": "P18",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P17",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P16",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P15",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P14",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P13",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P12",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
			{
				"pieza": "P11",
				"anterior": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				},
				"nuevo": {
					"C": "",
					"T": "",
					"B": "",
					"L": "",
					"R": ""
				}
			},
		]
	};

	var color_lapiz = 'navy';

	$(document).ready(function() {
		$('polygon').attr('stroke', color_lapiz);
		$('text').attr('stroke', color_lapiz);
		$('text').attr('fill', color_lapiz);

		//alert(odontograma.dientes[0].pieza);
		//alert(odontograma.dientes[0].anterior.C);

		$('polygon').mouseover(function(evt) {
			var svg = $('#svgselect').svg('get');
			//alert(svg);
			var sector = $(evt.target);
			var cara = sector.attr('id');
			var diente = sector.parent().attr('id');
			$('#piezanumero').html(diente);
			$('#piezacara').html(cara);
			//sector.attr('fill', 'yellow');
			//var over = sector.clone();
			//over.attr('fill', 'yellow');
			//sector.parent().add(over);
		});

		$('polygon').mouseout(function(evt) {
			//var sector = $(evt.target);
			//sector.attr('fill', 'white');

			$('#piezanumero').html('XX');
			$('#piezacara').html('X');
		});

		$('polygon').click(function(evt) {
			var caseid = document.getElementById("caseid").value;
			var sector = $(evt.target);
			var strdebug = sector.parent().attr('id') + '-' + sector.attr('id');
			$("#message").html('<a href="<?php echo base_url() ?>PemeriksaanGigi/Addpemeriksaan/' + caseid + '/' + strdebug + '">' + strdebug + '</a>');
			//console.debug(strdebug);
		});

		$('#chkAnterior').click(function() {});

		$('#chkNuevo').click(function() {});

	});
</script>
</div>

<div class="row">
							<div class="col-xs-12">
								<div class="box">
									<div class="box-header">
										<h3 class="box-title">History Pemeriksaan</h3>


									</div>
									<!-- /.box-header -->
									<div class="box-body table-responsive">
										<table id="example1" class="table table-hover">
											<thead>
												<tr>
													<th>CaseID</th>
													<th>Tanggal</th>
													<th>Pasien</th>
													<th>Gigi</th>
													<th>Penyakit</th>
													<th>Keterangan</th>
												</tr>
											</thead>
											<tbody>
												<?php foreach ($datahasil as $d) : ?>
													<tr>
														<td><?= $d['CaseID']; ?></td>
														<td><?= $d['Tanggal']; ?></td>
														<td><?= $d['Pasien']; ?></td>
														<td><?= $d['Gigi']; ?></td>
														<td align='center' style="background-color:<?= $d['warna']; ?> ; color:white"><label>&nbsp;<?= $d['jenis']; ?>&nbsp;</label></td>
														<td><?= $d['Keterangan']; ?></td>
													</tr>
												<?php endforeach; ?>
											</tbody>
										</table>
									</div>
									<!-- /.box-body -->
								</div>
								<!-- /.box -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</section>
</div>