<!DOCTYPE html>
<html lang="en">
<?php $this->load->view("partial/header.php"); ?>
<!-- <style type="text/css">
	body {
		font-family: Helvetica, sans-serif;
	}

	h2,
	h3 {
		margin-top: 0;
	}

	form {
		margin-top: 15px;
	}

	form>input {
		margin-right: 15px;
	}

	#my_camera {
		background: #ccc;
	}

	#results {
		float: right;
		margin: 20px;
		padding: 10px;
		border: 1px solid;
		background: #ccc;
	}

	.row li {
		width: 33.3%;
		float: left;
	}

	img {
		border: 0 none;
		display: inline-block;
		height: auto;
		max-width: 100%;
		vertical-align: middle;
	}
</style> -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet"> -->
<style>
	@font-face {
		font-family: 'Orbitron';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url('https://fonts.gstatic.com/s/orbitron/v31/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyxSmBoWgz.woff2') format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	#clock {
		font-family: 'Orbitron', sans-serif;
		/* background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 50%); */
		text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 1);
		color: #daf6ff;
		/* almost cyan colored*/
		font-size: 40px;
		text-align: center;
		padding-top: 50px;
		padding-bottom: 50px;
	}
</style>

<body style="background-color: #B0B0B0">
	<?php $this->load->view("partial/navbar.php"); ?>
	<div id="wrapper">
		<div id="content-wrapper">
			<div class="container-fluid">
				<div class="row" id="body-row">
					<div class="col-md-3" style="color: white;padding: 10px">
						<div class="card" style="background-color: #343a40">
							<div class="card-header">
								<h5>HARGA TBS : @RP <?= $harga_tbs->harga_buah; ?>/Kg <a href="<?php echo base_url('setting') ?>"><i class="fa fa-cog"></i></a></h5>

							</div>
							<div class="card-body text-center">
								<!-- <div id="clock">5000 KG</div> -->
								<div class="input-group mb-2 mr-sm-2">
									<input class="form-control" type="text" name="timbangan" id="timbangan" value="0">
									<div class="input-group-prepend">
										<div class="input-group-text">KG</div>
									</div>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="inlineRadioOptions" id="autotimbangan" value="option1">
									<label class="form-check-label" for="inlineRadio1">AUTO</label>
								</div>
								<div class="form-check form-check-inline">
									<input class="form-check-input" type="radio" name="inlineRadioOptions" id="manualtimbangan" value="option2">
									<label class="form-check-label" for="inlineRadio2">MANUAL</label>
								</div>
								<div class="form-group" style="padding: 10px">
									<button class="btn btn-primary " id="savetimbangan">CAPTURE</button>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-5" style="color: white;padding: 10px">
						<div class="card" style="background-color: #343a40">
							<div class="card-header text-center">
								<label for="inputEmail3" class="col-sm-4 col-form-label">NOMOR TIKET</label>
								<center><input class="form-control col-sm-4" type="text" name="notiket" id="notiket" value="<?php echo sprintf("%04s", $notiket) ?>" readonly="" style="text-align: center;"></center>
							</div>
							<div class="card-body">
								<form>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Nomor Kendaraan</label>
										<div class="col-sm-7 autocomplete">
											<input type="text" class="form-control formku" id="nopolisi">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Nama Supir</label>
										<div class="col-sm-7">
											<input type="text" class="form-control formku" id="namasupir">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Nama Muatan</label>
										<div class="col-sm-7">
											<select name="" id="namamuatan" class="form-control">
											</select>
										</div>
										<div class="col-sm-3">
											<a class="btn btn-sm btn-info" id="addnamamuatan">Add</a>
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Berat Total</label>
										<div class="col-sm-7 text-right">
											<input class="form-control formku" type="text" name="berattotal" id="berattotal" value="">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Berat Kosong</label>
										<div class="col-sm-7">
											<input type="text" class="form-control formku" id="beratkosong" readonly="">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Berat Muatan</label>
										<div class="col-sm-7">
											<input type="text" class="form-control formku" id="beratmuatan" readonly="">
										</div>
									</div>
									<div class="form-group row">
										<div class="col-sm-11 text-right">
											<button type="submit" class="btn btn-success navbar-btn" id="butsave"><i class="fas fa-check-circle"></i></button>
											<button type="button" class="btn btn-danger navbar-btn"><i class="far fa-times-circle"></i></button>
											<a class="btn btn-primary" href="" id="printtiket" target="_blank">Timbang Keluar</a>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="col-md-4" style="color: white;padding: 10px">
						<div class="card" style="background-color: #343a40">
							<div class="card-header text-center">
								<h2>CAMERA VIEW</h2>
							</div>
							<div class="card-body text-center">
								<div id="my_camera"></div>
								<div id="results"></div>
								<form>
									<input type="button" value="Ambil Photo" id="ambilphoto" onClick="take_snapshot()" class="btn btn-primary">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<?php $this->load->view("partial/footer.php") ?>
		</div>
	</div>
	<div class="modal fade" id="addmuatanmodal" tabindex="-1" role="dialog" aria-labelledby="addmuatanmodalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="addmuatanmodalLabel">Modal title</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<input type="text" name="muatannew" id="id_muatannew" value="" class="form-control">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="newMuatan()">Save </button>
				</div>
			</div>
		</div>
	</div>

	<script src="<?= base_url() ?>assets/js/socket.io.min.js"></script>
	<!-- <script src="<?= base_url() ?>assets/js/webcam.min.js"></script> -->
	<script>
		let timbanganisauto = true

		let socket = io.connect('http://localhost:8888');

		socket.on('data', function(message) {
			if (timbanganisauto) {
				$("#timbangan").val(message.data);
			}
		});
		let dataselect = [
			"Buah Sawit"
		]

		function inisiasiselect(datarow, fromlocalstorage = false) {
			if (fromlocalstorage) {
				datarow = datarow.split(',')
			}
			$("#namamuatan").html('')
			for (var i = datarow.length - 1; i >= 0; i--) {
				const newdata = datarow[i]
				$("#namamuatan").append(`<option value="${newdata}" selected>${newdata}</option>`)
			}
		}

		$(document).ready(function() {

			if (localStorage.dataselect) {
				inisiasiselect(localStorage.dataselect, true)
			} else {
				inisiasiselect(dataselect)
			}
			$("#namamuatan").select2();
			// $('#but_read').click(function(){
			// 	var username = $('#notiket option:selected').text();
			// 	var userid = $('#notiket').val();
			// 	$('#result').html("id : " + userid + ", name : " + username);

			// });
			$("#savetimbangan").click(function() {
				let nilai = $('#timbangan').val()
				$('#berattotal').val(nilai);
			});
			$('#printtiket').hide();
			$("#timbangan").prop('disabled', true);
			$("#autotimbangan").prop("checked", true);
			$("#autotimbangan").click(function() {
				$('#berattotal').val('');
				$('#timbangan').val('');
				$("#timbangan").prop('disabled', true);
				timbanganisauto = true;
			});
			$("#manualtimbangan").click(function() {
				$('#berattotal').val('');
				$('#timbangan').val('');
				$("#timbangan").prop('disabled', false);
				timbanganisauto = false;
			});
			$("#ambilphoto").click(function() {
				$('#my_camera').hide();
				$('#ambilphoto').hide();
			});
			$('#butsave').on('click', function() {
				var timbangan = $('#timbangan').val();
				var notiket = $('#notiket').val();
				var nopolisi = $('#nopolisi').val();
				var namasupir = $('#namasupir').val();
				var namamuatan = $('#namamuatan').val();
				var berattotal = $('#berattotal').val();
				var beratkosong = $('#beratkosong').val();
				var beratmuatan = $('#beratmuatan').val();

				// if(timbangan!="" && notiket!="" && nopolisi!="" && namasupir!=""){
				$("#butsave").attr("disabled", "disabled");
				$.ajax({
					url: "<?php echo base_url("Masuk/savedata"); ?>",
					type: "POST",
					data: {
						type: 1,
						timbangan: timbangan,
						notiket: notiket,
						nopolisi: nopolisi,
						namasupir: namasupir,
						namamuatan: namamuatan,
						berattotal: berattotal,
						beratkosong: beratkosong,
						beratmuatan: beratmuatan
						// base64image: ''
					},
					cache: false,
					success: function(dataResult) {
						var dataResult = JSON.parse(dataResult);
						if (dataResult.statusCode == 200) {
							$('#timbangan').val('');
							$('#notiket').val('');
							$('#nopolisi').val('');
							$('#namasupir').val('');
							$('#namamuatan').val('');
							$('#berattotal').val('');
							$('#beratkosong').val('');
							$('#beratmuatan').val('');
							alert('berhasil disimpan');
							$('#printtiket').attr('href', '<?= base_url() ?>Masuk/printtiket/' + dataResult.id);
							$('#printtiket').show();
						} else if (dataResult.statusCode == 201) {
							alert("Error occured !");
						}

					}
				});
				// }
				// else{
				// 	alert('Please fill all the field !');
				// }
			});
		});
		// function take_snapshot() {

		// 	Webcam.snap( function(data_uri) {
		// 		console.log(data_uri)
		// 		document.getElementById('results').innerHTML = 
		// 			'<img src="'+data_uri+'"/>';
		// 	} );
		// }
		// Webcam.set({
		// 	width: 320,
		// 	height: 280,
		// 	image_format: 'jpeg',
		// 	jpeg_quality: 90,
		// 	constraints: {
		// 		width: 320, // { exact: 320 },
		// 		height: 280, // { exact: 180 },
		// 		facingMode: 'user',
		// 		frameRate: 30
		// 	}
		// });
		// Webcam.attach( '#my_camera' );

		$("#addnamamuatan").click(() => {
			$("#addmuatanmodal").modal('show')

		})

		function newMuatan() {
			let newdata = $("#id_muatannew").val()
			if (newdata !== '') {
				if (localStorage.dataselect) {
					localStorage.dataselect += ',' + newdata
				} else {
					dataselect.push(newdata)
					localStorage.dataselect = dataselect
				}
				$("#namamuatan").append(`<option value="${newdata}" selected>${newdata}</option>`)
				$("#addmuatanmodal").modal('hide')
				$("#id_muatannew").val('')
			}
		}
		$("#nopolisi").autocomplete({
			appendTo: ".autocomplete",
			minLength: 1,
			maxShowItems: 20,
			source: function(request, response) {
				// Fetch data
				$.ajax({
					url: `<?php echo base_url("masuk/ambil_kendaraan") ?>`,
					type: "POST",
					dataType: "json",
					data: {
						term: request.term,
					},
					success: function(data) {
						response(data);
					},
				});
			},
			select: function(event, ui) {
				$("#nopolisi").val(`${ui.item.label}`);
				$("#namasupir").val(`${ui.item.value}`);
				return false;
			},
		});
	</script>
</body>

</html>