<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
	<title>APK</title>
	<link rel="stylesheet" href="<?php echo $this->baseUrl ?>assets/thema/apk/js/jquery.mobile-1.4.5.min.css">
	<script src="<?php echo $this->baseUrl ?>assets/thema/apk/js/jquery-1.11.3.min.js"></script>
	<script src="<?php echo $this->baseUrl ?>assets/thema/apk/js/jquery.mobile-1.4.5.min.js"></script>
	<script src="<?php echo $this->baseUrl ?>assets/thema/apk/js/zxing_library.min.js"></script>
	<style>
	#_header{
		top: 0;
		position: fixed;
		width: 100%;
	}
	#_headerTitle{
		text-align: center;
		padding: 10px;
	}
	#_footer{
		bottom: 0;
		position: fixed;
		width: 100%;
	}
	#_tabHeader{
		width: 100%;
	}
	._right{
		text-align: right;
	}
	#pilihKamera{
        cursor: pointer;
	}
	</style>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-theme="b"> 
  <h1>
	<p style="text-align: center">
		<img src="<?php echo $this->baseUrl."assets/images/rasio.gif"; ?>" width="200px">
	</p>
  </h1>
    <a href="#" class="ui-btn">KEMBALI</a> 
  </div> 

  <div data-role="header" id="_header">
    <div id="_headerTitle">REJEKI EXPRESS</div>
    <div data-role="navbar">
      <ul>
        <li><a href="#myPanel" data-icon="bullets">Menu</a></li>
        <li><a href="https://rejeki.rasio.id/rasio/application/index/MIS" target="_blank" data-icon="home">Home</a></li>
        <li><a href="<?php echo $this->baseUrl ?>" data-icon="refresh" id="_refresh">Refresh</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content" id="mainContainer">
	<div style="margin-top: 150px; text-align: center">
		<img id="pilihKamera" src="<?php echo $this->baseUrl."assets/thema/apk/img/"; ?>iconmonstr-qr-code-2.png" style="width: 50px;">
		<br>
		<video id="previewKamera" style="width: 400px;height: 300px;"></video>
		<br>
		<input type="text" id="barcode" name="barcode" readonly>
	</div>
  </div>

  <div data-role="footer" id="_footer">
    <h1>www.rasio.id</h1>
  </div> 
</div> 

<script type="text/javascript">
$(document).ready(function(){
	$('#_refresh').click(function(){
		_conf = confirm("Yakin Memperbaharui Aplikasi ini?");
		if(_conf){
			window.location = '';
		}
	})
	
	let selectedDeviceId = null;
    const codeReader = new ZXing.BrowserMultiFormatReader();
    const sourceSelect = $("#pilihKamera");

    $(document).on('click','#pilihKamera',function(){
        selectedDeviceId = $(this).val();
        if(codeReader){
            codeReader.reset()
            initScanner()
        }
    })

    function initScanner() {
        codeReader
        .listVideoInputDevices()
        .then(videoInputDevices => {
            videoInputDevices.forEach(device =>
                console.log(`${device.label}, ${device.deviceId}`)
            );

            if(videoInputDevices.length > 0){
                 
                if(selectedDeviceId == null){
                    if(videoInputDevices.length > 1){
                        selectedDeviceId = videoInputDevices[1].deviceId
                    } else {
                        selectedDeviceId = videoInputDevices[0].deviceId
                    }
                }
                 
                 
                if (videoInputDevices.length >= 1) {
                    sourceSelect.html('');
                    videoInputDevices.forEach((element) => {
                        const sourceOption = document.createElement('option')
                        sourceOption.text = element.label
                        sourceOption.value = element.deviceId
                        if(element.deviceId == selectedDeviceId){
                            sourceOption.selected = 'selected';
                        }
                        sourceSelect.append(sourceOption)
                    })
             
                }

                codeReader
                    .decodeOnceFromVideoDevice(selectedDeviceId, 'previewKamera')
                    .then(result => {

                            //hasil scan
                            console.log(result.text)
                            $("#barcode").val(result.text);
                         
                            if(codeReader){
                                codeReader.reset()
                            }
                    })
                    .catch(err => console.error(err));
                 
            } else {
                alert("Camera not found!")
            }
        })
        .catch(err => console.error(err));
    }

    if (navigator.mediaDevices) {
        initScanner()
    } else {
        alert('Cannot access camera.');
    }
})	
</script>

</body>
</html>
