<?= $this->extend('admin/layout/main.php') ?>

<?= $this->section('content') ?>
<datalist id='liscode'>
<?php
echo "";
foreach($tests as $data) {
	$testcode = $data['TESTCODE'];
	echo "<option value='$testcode' />";
}
?>
</datalist>
<div class="card border-0 m-1">
	<div class="card-header bg-success text-white">
		<div class='card-title m-0'><b>Dictionary Mapping Order</b></div>
	</div>
	<div class="card-body">	
		<div class='row mb-2'>
			<div class='col-2'>HIS code</div>
			<div class='col-2'><input type='text' class='form-control form-control-sm' id='search_hiscode' oninput='this.value = this.value.toUpperCase();' /></div>
		</div>
		<div class='row mb-2'>
			<div class='col-2'>LIS code</div>
			<div class='col-2'><input type='text' class='form-control form-control-sm' id='search_liscode' oninput='this.value = this.value.toUpperCase();' /></div>
		</div>
		<div class='row mb-2'>
			<div class='col-2'>Mapping text</div>
			<div class='col-3'><input type='text' class='form-control form-control-sm' id='search_maptext' oninput='this.value = this.value.toLowerCase();' /></div>
		</div>
		<button class='btn btn-sm btn-success-2' onclick='search()'>Search</button>
	</div>
</div>

<div class="card border-0 m-1">
	<div class="card-body">
		<!-- <div class='card-title'>Dictionary Mapping Order</div> -->
		<button class='btn btn-sm btn-success-2' onclick="createSingle()"><i class="bi bi-plus-circle"></i> Create Single</button>
		<button class='btn btn-sm btn-success-2' onclick="createProfile()"><i class="bi bi-journal-plus"></i> Create Profile</button>
		
		<div class="table-responsive mt-3">
			<table id="myTable" class="table">
				<thead>
					<tr>
						<th>Type</th>
						<th>Tube</th>
						<th>HIS Code</th>
						<th>LIS Code</th>
						<th>Description</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody id='table-body'>
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- Single -->
<div class="modal fade" id="modal_single" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Edit Single Test</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
			</div>
			<div class="modal-body" id='modal_bodySingle' style='background-color:#F4F6FF'>
				<div class="row">
					<div class="col-12">
						<table class="table table-sm table-borderless">
							<input type='hidden' id='updateSingle' value='' />
							<tr class="align-middle"> <th>HIS Code</th> <th>:</th> <td><input class='form-control' type='text' id='hiscodeSingle'/></td> </tr>
							<tr class="align-middle"> <th>LIS Code</th> <th>:</th> <td><input list='liscode' class='form-control' type='text' id='liscodeSingle' oninput='this.value = this.value.toUpperCase();' /></td> </tr>
							<tr class="align-middle"> <th>Tube</th> <th>:</th> 
								<td>
									<select class='form-control' id='tubeidSingle'>
										<option value=''></option>
										<?php
										foreach($tubes as $data) {
											$tubeid = $data['TUBEID'];
											$tubecode = $data['TUBECODE'];
											$tubename = $data['TUBENAME'];
											echo "<option value='$tubeid'>$tubecode - $tubename</option>";
										} 
										?> 
									</select>
								</td> 
							</tr>
							<tr class="align-middle"> <th>Desc.</th> <th>:</th> <td><textarea class='form-control' id='descsSingle'></textarea></td> </tr>
						</table>
						<button class='btn btn-sm btn-primary' onclick='saveSingle()'>Save</button>
						<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Profile -->
<div class="modal fade" id="modal_profile" aria-hidden="true" tabindex="-1">
	<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Edit Profile Test</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" ></button>
			</div>
			<div class="modal-body" style='background-color:#F4F6FF'>
				<div class="row">
					<div class="col-6">
						<table class="table table-sm table-borderless">
							<input type='hidden' id='updateProfile' value='' />
							<tr class="align-middle"> <th>HIS Code</th> <th>:</th> <td><input class='form-control' type='text' id='hiscodeProfile'/></td> </tr>
							<tr class="align-middle"> <th>Tube</th> <th>:</th> 
								<td>
									<select class='form-control' id='tubeidProfile'>
										<option value=''></option>
										<?php
										foreach($tubes as $data) {
											$tubeid = $data['TUBEID'];
											$tubecode = $data['TUBECODE'];
											$tubename = $data['TUBENAME'];
											echo "<option value='$tubeid'>$tubecode - $tubename</option>";
										} 
										?> 
									</select>
								</td> 
							</tr>
							<tr class="align-middle"> <th>Desc.</th> <th>:</th> <td><textarea class='form-control' id='descsProfile'></textarea></td> </tr>
						</table>
					</div>
					<div class="col-6">
						<p><b>LIS Code<b></p>
						<table class="table table-sm table-borderless">
							<tr class="align-top"> 
								<?php $j=1; ?>
								<td> <?php for($i=1;$i<=11;$i++) { echo "<input class='mliscode$j' list='liscode' type='text' maxlength='5' size='7' oninput='this.value = this.value.toUpperCase();' /> <br />\n";$j++; } ?> </td>
								<td> <?php for($i=1;$i<=11;$i++) { echo "<input class='mliscode$j' list='liscode' type='text' maxlength='5' size='7' oninput='this.value = this.value.toUpperCase();' /> <br />\n";$j++; } ?> </td>
								<td> <?php for($i=1;$i<=11;$i++) { echo "<input class='mliscode$j' list='liscode' type='text' maxlength='5' size='7' oninput='this.value = this.value.toUpperCase();' /> <br />\n";$j++; } ?> </td>
								<td> <?php for($i=1;$i<=11;$i++) { echo "<input class='mliscode$j' list='liscode' type='text' maxlength='5' size='7' oninput='this.value = this.value.toUpperCase();' /> <br />\n";$j++; } ?> </td>
							</tr>
						</table>
					</div>
				</div>
				<button class='btn btn-sm btn-primary' onclick='saveProfile()'>Save</button>
				<button class='btn btn-sm btn-secondary' data-bs-dismiss="modal">Cancel</button>
			</div>
		</div>
	</div>
</div>

<?= $this->endSection() ?>

<?= $this->section('script') ?>
<script>
function search() {
	let url = '<?=base_url('');?>api/dictMappings/search';
	var liscode = $('#search_liscode').val();
	var hiscode = $('#search_hiscode').val();
	var maptext = $('#search_maptext').val();
	let data = { liscode:liscode, hiscode:hiscode, maptext:maptext };
	$.ajax({
		url: url,
		method: 'POST',
		data : data,
		success: function(response) {
			$("#table-body").html("");
			var data = response['dictMappings'];
			for (var i = 0; i < data.length; i++) {
				liscode = data[i].LISCODE;
				hiscode = data[i].HISCODE;
				maptype = data[i].MAPTYPE;
				mapid = data[i].MAPID;
				descs = data[i].DESCS;
				tubecode = data[i].TUBECODE;
				editBtn = '';
				if(data[i].LISCODE == null) { liscode = '-'; }
				if(data[i].TUBECODE == null) { tubecode = '-'; }
				if(maptype == 'S') {
					editBtn =  '<button class="btn btn-sm btn-success-2" ' + ' onclick="editSingle(' + mapid+ ')">Edit' + '</button> ';
				} else {
					editBtn =  '<button class="btn btn-sm btn-success-2" ' + ' onclick="editProfile(' + mapid+ ')">Edit' + '</button> ';
				}
				let datarow = '<tr class="align-middle">' + 
					'<td>' + maptype + '</td>' + '<td>' + tubecode + '</td>' + '<td>' + hiscode+ '</td> <td>' + liscode + '</td>' + '<td>' + descs + '</td>' + '<td>' + editBtn + '</td>' +
				'</tr>';
				$("#table-body").append(datarow);
			}			
		},
		error: function(response) { console.log(response.responseJSON); }
	});
}

function createSingle() {
	$("#alertSingle").html();
	$("#updateSingle").val("0");
	$("#hiscodeSingle").val("");
	$("#liscodeSingle").val("");
	$("#descsSingle").val("");
	$(`#tubeidSingle option[value='']`).prop('selected', true);
	$("#modal_single").modal('show'); 
}

function editSingle(mapid) {
	let url = '<?=base_url('');?>api/dictMappings/detail/'+mapid;
	$.ajax({
		url: url,
		method: "GET",
		success: function(response) {
			let data = response;
			$("#updateSingle").val(mapid);
			$("#liscodeSingle").val(data.LISCODE);
			$("#hiscodeSingle").val(data.HISCODE);
			$("#descsSingle").val(data.DESCS);
			$("#tubeidSingle").val(data.TUBEID);
			$(`#tubeidSingle option[value='${data.TUBEID}']`).prop('selected', true);
			$("#modal_single").modal('show'); 
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}

function createProfile() {
	$("#updateProfile").val("0");
	$("#hiscodeProfile").val("");
	$("#descsProfile").val("");
	$(`#tubeidProfile option[value='']`).prop('selected', true);
	for (let i = 1; i <= 44; i++) {
		let id = `.mliscode${i}`;
		let element = $(id);
		element.val('');
	}
	$("#modal_profile").modal('show'); 
}

function editProfile(mapid) {
	let url = '<?=base_url('');?>api/dictMappings/detail/'+mapid;
	$.ajax({
		url: url,
		method: "GET",
		success: function(response) {
			let data = response;
			$("#updateProfile").val(mapid);
			$("#hiscodeProfile").val(data.HISCODE);
			$("#descsProfile").val(data.DESCS);
			// empty mliscode
			for (let i = 1; i <= 44; i++) {
				let id = `.mliscode${i}`;
				let element = $(id);
				element.val('');
			}
			// populate mliscode
			for (let i = 0; i < data.mliscodes.length; i++) {
				const fieldId = `mliscode${i + 1}`;
				$(`.${fieldId}`).val(data.mliscodes[i].LISCODE);
			}
			$("#modal_profile").modal('show'); 
		},
		error: function(response) {
			console.log(response.responseJSON)
		}
	});
}

function saveSingle() {
	let url = '<?=base_url('');?>api/dictMappings/saveSingle';
	var update = $("#updateSingle").val();
	var hiscode = $("#hiscodeSingle").val();
	var liscode = $("#liscodeSingle").val();
	var descs = $("#descsSingle").val();
	var tubeid = $("#tubeidSingle").val();
	let data = { update: update, hiscode: hiscode, liscode:liscode, descs:descs, tubeid:tubeid };
	$.ajax({
		url: url,
		method: "POST",
		data: data,
		success: function(response) {
			$(".liscodeSingle").val('');			
			$("#hiscodeSingle").val('');
			$("#descsSingle").val('');
			$("#updateSingle").val('');
			$("#tubeidSingle").val('');
			$("#modal_single").modal('hide');
			search();
		},
		error: function(response) {
			alert(response.responseJSON.messages.errors);
		}
	});
}

function saveProfile() {
	let url = '<?=base_url('');?>api/dictMappings/saveProfile';
	var update = $("#updateProfile").val();
	var hiscode = $("#hiscodeProfile").val();
	var tubeid = $("#tubeidProfile").val();
	var descs = $("#descsProfile").val();
	let data = { update: update, hiscode: hiscode, descs:descs, tubeid:tubeid };
	for (let i = 1; i <= 44; i++) {
		let className = `.mliscode${i}`; 
		let value = $(className).val(); 
		if (value !== undefined && value != '') {
			data[`mliscode${i}`] = value;
		}
	}
	$.ajax({
		url: url,
		method: "POST",
		data: data,
		success: function(response) {
			$("#modal_profile").modal('hide');
			search();
		},
		error: function(response) {
			alert(response.responseJSON.messages.errors);
		}
	});
}
</script>
<?= $this->endSection() ?>