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

<?= $this->section('content') ?>
<?php
$dests = array();
$origins = array();
foreach($invcounters as $qdata) {
	$qid = "C|".$qdata['counterid'];
	$qname = "Counter - (".$qdata['counternumber'].") ".$qdata['countername'];
	$dests[$qid]=$qname;
	$origins[$qid]=$qname;
}
foreach($vendors as $qdata) {
	$qid = "V|".$qdata['vendorid'];
	$qname = "Vendor - (".$qdata['initial'].") ".$qdata['vendorname'];
	$origins[$qid]=$qname;
}
foreach($products as $qdata) {
	$qid = "P|".$qdata['productid'];
	$qname = $qdata['sitename']." - ".$qdata['productname']." (".$qdata['productnumber'].")";
	$dests[$qid]=$qname;
	$origins[$qid]=$qname;
}
$now = date('Y-m-d\TH:i');
$subject = '';
if(isset($itd)) { $data = $itd; }
if(isset($new_value)) { $data = $new_value; }
if(isset($data)) {
	$subject = $data[0]['subject'];
}
?>
<div class="page-wrapper">
	<div class="container-fluid">
		<div class="row page-titles">
			<div class="col-md-5 align-self-center">
				<h4 class="text-themecolor">Transaction Editor</h4>
			</div>
		</div>
		<?php if(isset($validation)) {	?>
		<div class="row">
			<div class="col-12">
				<div class='alert alert-danger alert-dismissible'>
					<?= $validation->listErrors(); ?>
					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true"></span> </button>
				</div>
			</div>
		</div>
		<?php }	?>
		<div class="row">
			<div class="col-12">
				<form method="post" enctype="multipart/form-data">
					<input type='hidden' name='itdid' value='<?=$itdid;?>' /> 
					<input type='hidden' name='itxid_delete' id='itxid_delete' />
					<!-- sparepart -->
					<div class='card'>
						<div class='card-body'>
							<div class="row mb-2">
								<div class="col-md-12">
									<div class="form-group">
										<label for="subject" class="form-label border-start border-5 border-primary ps-1">Subject</label>
										<input type="text" class="form-control form-control-sm" name="subject" id="subject" value='<?=$subject;?>' required>
									</div>
								</div>
							</div>
							<div class="d-flex flex-row justify-content-evenly align-items-center mb-1">
								<div class="col-md-3 pe-2">
									<div class="form-group">
										<label for="open" class="form-label border-start border-5 border-primary ps-1">Transaction Datetime</label>
										<input type='text' class="form-control form-control-sm itxdate" value='<?=$now;?>' />
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label for="open" class="form-label border-start border-5 border-primary ps-1">Destination</label>
										<select class='form-control form-select-sm select2 dest' id='destination'>
											<option value=''>-</option>
											<?php
											foreach($dests as $qid => $qname) {
												echo "<option value='$qid'>$qname</option>";
											}
											?>										
										</select>
									</div>
								</div>
								<div class="col-md-1 text-center">
									<button type='button' class='btn btn-sm btn-success mt-3' id='swapButton'>
										<i class="fa-solid fa-right-left "></i>
									</button>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label for="close" class="form-label border-start border-5 border-primary ps-1">Origin</label>
										<select class='form-control form-select-sm select2 origin' id='origin'>
											<option value=''>-</option>
											<?php
											foreach($origins as $qid => $qname) {
												echo "<option value='$qid'>$qname</option>";
											}
											?>										
										</select>
									</div>
								</div>
							</div>
							<div class="row mb-1">
								<div class="col-md-2">
									<div class="form-group">
										<label for="close" class="form-label border-start border-5 border-primary ps-1">Purpose</label>
										<select class='form-control form-control-sm purpose'>
											<option value=''>-</option>
											<?php
											foreach($purposes as $qid => $qval) {
												echo "<option value='$qid'>$qval</option>";
											}
											?>
										</select>
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label for="open" class="form-label border-start border-5 border-primary ps-1">Catalog</label>
										<select class='form-control form-select-sm select2 unitgroupid'>
											<option value=''>-</option>
											<?php
											$unitgroups = array();
											foreach($unitgroup as $data) {
												$qunitgroupid = $data['unitgroupid'];
												$qproductname = $data['productname'];
												$qqty = $data['quantity'];
												$qunit = $data['unit'];
												$qbaseunit = $data['baseunit'];
												$qcatalognumber = $data['catalognumber'];
												if($qunit == $qbaseunit) { echo "<option value='$qunitgroupid'>[$qqty $qbaseunit] $qcatalognumber - $qproductname</option>"; }
												else { echo "<option value='$qunitgroupid'>[$qqty $qbaseunit][$qunit] $qcatalognumber - $qproductname</option>"; }
												$unitgroups[$qunitgroupid]=$qproductname;
											}
											?>
										</select>
									</div>
								</div>
								<div class="col-md-2">
									<div class="form-group">
										<label for="close" class="form-label border-start border-5 border-primary ps-1">Lot#</label>
										<input type='text' class="form-control form-control-sm lotnumber" />
									</div>
								</div>
								<div class="col-md-1">
									<div class="form-group">
										<label for="close" class="form-label border-start border-5 border-primary ps-1">Qty#</label>
										<input type='text' class="form-control form-control-sm qty" />
									</div>
								</div>
								<div class="col-md-2">
									<div class="form-group">
										<label for="close" class="form-label border-start border-5 border-primary ps-1">Condition</label>
										<select class='form-control form-control-sm condition'>
											<option value=''>-</option>
											<?php
											foreach($conditions as $qid => $qval) {
												echo "<option value='$qid'>$qval</option>";
											}
											?>
										</select>
									</div>
								</div>
								<div class="col-md-1" style='position:relative'>
									<button type='button' class='btn btn-sm btn-success' onclick='saveRow();' style='position:absolute;bottom:10px;'>Add</button>
								</div>
							</div>
							<hr />
							<div class='table-responsive'>
								<table class='table table-bordered table-sm' id='itx_table'>
									<thead>
										<tr> 
											<th style='width:23.3%;'>Dest.</th> 
											<th style='width:23.3%;'>Orig.</th> 
											<th style='width:23.3%;'>Catalog</th> 
											<th style='width:5%;'>Lot#.</th> 
											<th style='width:5%;'>Qty.</th> 
											<th style='width:5%;'>Cond.</th> 
											<th style='width:5%;'>Purpose</th>
											<th style='width:10%;'>Trans. Date</th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<?php
										if(isset($invtrans)) {
											foreach($invtrans as $data) {
												$itxid = $data['itxid'];
												$qdest = $data['desttype']."|".$data['destid'];
												$qdest = $dests[$qdest];
												$qorigin = $data['origtype']."|".$data['origid'];
												$qorigin = $origins[$qorigin];
												$qcatalogname = $unitgroups[$data['unitgroupid']];
												$qlotnumber = $data['lotnumber'];
												$qqty = $data['qty'];
												$qpurpose = $purposes[$data['purpose']];
												$qitxdate = $data['itxdate'];
												if($data['conditions'] != '') { $qconditions = $conditions[$data['conditions']]; }
												else { $qconditions = ''; }
												echo "<tr> <td>$qdest</td> <td>$qorigin</td> <td>$qcatalogname</td> <td>$qlotnumber</td> <td>$qqty</td> <td>$qconditions</td> <td>$qpurpose</td> <td>$qitxdate</td>".
													"<td class='text-center'> <button type='button' class='btn btn-sm btn-warning' onclick='deleteRow(this, $itxid)'>delete</button> </td>".
													"</tr>";
											}
										}
										?>
									</tbody>
								</table>
							</div>
						</div>	
						<div class="card-footer">
							<button type="submit" name="submit" class="btn btn-info float-end">Save</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

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

<?= $this->section('script') ?>
<script>
$(document).ready(function() {
	$('.select2').select2({
		theme: 'bootstrap-5',
		width: '100%'
	});
	
});

//InvTrans
function deleteRow(btn, itxid) {
	if(confirm('Are you sure?')) {
		var row = btn.parentNode.parentNode;
		row.parentNode.removeChild(row);
		var itxid = itxid.toString();
		var d = $('#itxid_delete');
		d.val(d.val()+' '+itxid);
		console.log(d.val());
	}
}

function saveRow() {
	var dest = $('.dest').val();
	var desttext = $('.dest option:selected').text();
	var origin = $('.origin').val();
	var origintext = $('.origin option:selected').text();
	var unitgroupid = $('.unitgroupid').val();
	var unitgroupidtext = $('.unitgroupid option:selected').text();
	var purpose = $('.purpose').val();
	var purposetext = $('.purpose option:selected').text();
	var lotnumber = $('.lotnumber').val();
	var qty = $('.qty').val();
	var condition = $('.condition').val();
	var conditiontext = $('.condition option:selected').text();
	var itxdate = $('.itxdate').val();
	var newRow = "<tr> <input type='hidden' name='dests[]' value='"+dest+"'> <input type='hidden' name='origins[]' value='"+origin+"' /> <input type='hidden' name='unitgroupid[]' value='"+unitgroupid+
		"' /> <input type='hidden' name='lotnumber[]' value='"+lotnumber+"' /> <input type='hidden' name='qty[]' value='"+qty+"' />"+" <input type='hidden' name='conditions[]' value='"+condition+
		"' /> <input type='hidden' name='purpose[]' value='"+purpose+"'> <input type='hidden' name='itxdate[]' value='"+itxdate+"' />"+
		" <td>"+desttext+"</td> <td>"+origintext+"</td> <td>"+unitgroupidtext+"</td> <td>"+lotnumber+"</td> <td>"+qty+"</td> <td>"+conditiontext+"</td> <td>"+purposetext+"</td> <td>"+itxdate+"</td>"+
		" <td class='text-center'> <button type='button' class='btn btn-sm btn-warning' onclick='deleteRow(this, 0)'>delete</button> </td> </tr>";
	$("#itx_table").append(newRow);
	//$('.origin').val('');
	$('.unitgroupid').val('');
	$('.lotnumber').val('');
	$('.qty').val('');
	$('.condition').val('');
	$('.purpose').val('');
	$('.select2').select2({
		theme: 'bootstrap-5',
		width: '100%'
	});
}

flatpickr(".itxdate", { allowInput: true, enableTime: true, dateFormat: "Y-m-d\TH:i", time_24hr: true});

let btnSwap = document.getElementById('swapButton');
let destination = document.getElementById('destination');
let origin = document.getElementById('origin');
btnSwap.addEventListener('click', () => {
	valDestination = destination.value;
	valOrigin = origin.value;
	
	if (valDestination != valOrigin) { 
		destination.value = valOrigin;
		origin.value      = valDestination;

		triggerChange(destination);
		triggerChange(origin);
	}
});
function triggerChange(element){
	let changeEvent = new Event ('change');
	element.dispatchEvent(changeEvent);
}

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

