@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>

<main class="main-con">
<section class="breadcrumb-con align-items-center">
	<div class="container-fluid">
		<div class="row row-cols-1 row-cols-md-2">
			<div class="col-lg-6 col-12 align-self-center">
				<h5>{{$allhalls[$_GET['hallid']]}} - {{$allsessions[$_GET['hall_sessionid']]}},  Attendance List</h5>
			</div>
			<div class="col-lg-6 col-12 align-self-center">
				<div class="row row-cols-lg-2 row-cols-1 mb-2">
					<div class="col">
						<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"  class="btn-info pt-2 pb-2 rounded border-0 w-100 text-white fw-bold mt-2">Scan Audio</button>
					</div>
					<div class="col">
						<button type="button" onClick="window.location.reload();"  class="btn-warning pt-2 pb-2 d-inline mt-2">Fetch Data</button>
					</div>
				</div>
			</div>
		</div>
	</div>	
</section>
<section class="mt-3">
	<div class="container-fluid">
		<div class="row ">
			<div class="col-lg-3 col-12 order-1 order-sm-2 mb-3">
				<div class="row row-cols-1">
<!--					<div class="col mb-3">
						<a href="{{ url('hall-session-scanner').(isset($_GET) ? '?'.http_build_query($_GET):''); }}" class="btn-danger pt-4 pb-4">Fetch Data</a>
					</div>-->
					<div class="col">
						<div class="w-100 shadow p-3 mb-3 bg-body rounded border-start border-success border-5">
							<h3 id="enteredcount" class="text-primary">{{ $event_data['entered']; }}</h3>
							<h6>Entered</h6>
						</div>
					</div>
					<div class="col">
						<div class="w-100 shadow p-3 mb-3 bg-body rounded border-start border-warning border-5">
							<h3 id="remainingcount" class="text-warning">{{ $event_data['capacity']-$event_data['entered']; }}</h3>
							<h6>Remaining</h6>
						</div>
					</div>
					<div class="col">
						<div class="w-100 shadow p-3 mb-3 bg-body rounded border-start border-info border-5">
							<h3 id="capacitycount" class="text-sec">{{ $event_data['capacity']; }}</h3>
							<h6>Capacity</h6>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-9 col-12 order-2 order-sm-1">
				<div id="no-more-tables">
					<table class="col-md-12 table-bordered table-striped table-condensed cf bg-white">
						<thead class="cf">
							<tr>
								<th class="numeric bg-m pt-1 pb-1">Sr. No.</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Name</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Email</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Company</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Designation</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Scan Date</th>
								<th class="numeric bg-m bg-m pt-1 pb-1">Visit Count</th>
							</tr>
						</thead>
						<tbody>
														<tr>
								<td colspan="5">No Visitor Found</td>
							</tr>
							 
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>	
</section>
<section class="">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12">
				
			</div>
		</div>
	</div>
</section>	
	
</main>

<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