@extends('admin_template')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js" integrity="sha512-r6rDA7W6ZeQhvl8S7yRVQUKVHdexq+GAlNkNNqVC7YyIV+NwqCTJe2hDWCiffTyRNOeGEzRRJ9ifvRm/HCzGYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container" style="margin-top:85px;">
	<div class="row">
		<div class="col-md-12">
            <div class="alert alert-success" id="scansuccess"></div>
			<div class="alert alert-warning" id="scanerror"></div>
			<input type="hidden" id="audience_id" value="">
			<div id="reader"></div>

            <audio id="myAudio" autoplay="autoplay">
            <source src="https://neonichesolutions.co.in/onsite/assets/sounds/beep.ogg" type="audio/ogg">
            <source src="https://neonichesolutions.co.in/onsite/assets/sounds/beep.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
            <button onclick="playAudio()" type="button" id="buttonaudio">Scan Audio</button>
            <button type="button" onClick="window.location.reload();" class="btn btn-primary">Fetch Data</button>
		</div>
        <div class="col-6">
            <p>Capacity: <span id="capacitycount">{{ $event_data['capacity']; }}</span></p>
            <p>Entered: <span id="enteredcount">{{ $event_data['entered']; }}</span></p>
            <p>Remaining: <span id="remainingcount">{{ $event_data['capacity']-$event_data['entered']; }}</span></p>
        </div>
        <div class="col-6 text-end">
            <a href="{{ url('hall-session-scanner').(isset($_GET) ? '?'.http_build_query($_GET):''); }}" class="btn btn-primary">Fetch Data</a>
        </div>
	</div>
	<div class="row">
        <div class="col-12">
            <h2>{{$allhalls[$_GET['hallid']]}} - {{$allsessions[$_GET['hall_sessionid']]}},  Attendance List</h2>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Company</th>
                            <th>Designation</th>
                            <th>Visit Count</th>
                        </tr>
                    </thead>
                    <tbody>
                                                <tr>
                            <td colspan="5">No Visitor Found</td>
                        </tr>
                                                  
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
	function _qsave(){
		var audience_id = $('#audience_id').val();
		$.ajax({
	      	url:"{{url('hall-session-scanner-submit')}}",
	      	type:'POST',
	      	data:{"_token": "{{ csrf_token() }}", audience_id:audience_id, eid:'', ekey:'', hallid:'', hall_sessionid:''},
	      	error:err=>{
	      		console.log(err)
	      	},
	      	success:function(resp){
				resp = JSON.parse(resp);
	      		if(resp.success == 0)
	      		{
                    console.log(resp.msg);
                    $('#scanerror').text(resp.msg);
                    $('#scanerror').show();
                    setTimeout(function(){
                        $('#scanerror').hide();
                    }, 1500);
	      		}

	      		if(resp.success == 1)
	      		{
                    console.log(resp.msg);
                    $('#scansuccess').text(resp.msg);
                    $('#scansuccess').show();
                    setTimeout(function(){
                        $('#scansuccess').hide();
                    }, 1500);
                    $('#capacitycount').text(resp.capacity);
                    $('#enteredcount').text(resp.entered);
                    $('#remainingcount').text(parseInt(resp.capacity) - parseInt(resp.entered));  
	      		}
	      		// window.location.reload(1);
	      	}
	     })
	}
    
	function onScanSuccess(decodedText, decodedResult) {
        
	    // html5QrcodeScanner.clear();
		if (decodedText !== $('#audience_id').val()) {
            playAudio();
			$('#audience_id').val(decodedText);
			_qsave(); 
		} 
	}
    let config = { fps: 1000, qrbox : 300 }
	var html5QrcodeScanner = new Html5Qrcode(
		"reader", { fps: 1000, qrbox: 300 });
	// html5QrcodeScanner.render(onScanSuccess);
    html5QrcodeScanner.start({ facingMode: { exact: "environment" } }, config, onScanSuccess);

    $(document).ready(function(){
		$('#scanerror, #scansuccess').hide();
    });
    
    function playAudio() { 
    var x = document.getElementById("myAudio"); 
    x.play(); 
    } 

    function pauseAudio() { 
    x.pause(); 
    } 

</script>
@endsection