@extends('admin_template')
@section('content')
<!--Desktop View-->
<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-10 col-12 align-self-center">
					<h5>Attendance Check-IN For Event : {{ $event['name'] }}</h5>
				</div>
				<div class="col-lg-2  align-self-center">
					@if($session['role'] == 2 || $session['role'] == 1)
						<a href="{{ url('audience-event-list').'?event_id='.$_GET['event_id'].'&event_key='.$_GET['event_key'] }}" class="btn-info pt-1 pb-1" title="Add Checkpoint">Audience</a>
					@endif
				</div>
			</div>
		</div>	
	</section>
	<section>
		<div class="container-fluid">
			<div class="row g-5">
				<div class="col-lg-5 col-12">
					<div class="bg-l-primary-color p-4 shadow mb-4">
						<h5 class="text-start mb-3">Ready to Scan (<span id="insidecount">{{ isset($inside_count) ? $inside_count : 0; }}</span> inside)</h5>
						<hr>
						<input type="text" id="audience_id" value="" class="form-control border-0 alwaysfocus text-start" placeholder="or type here" autocomplete="off" onkeypress="enterpressalert(event, this)">
					</div>
					<div class="bg-white p-4 pt-2 pb-2 mt-2">
						<h5 class="mb-2">Checked In</h5>
						<hr class="p-0 m-0">
						<div id="scanhistory"></div>
					</div>
				</div>
				<div class="col-lg-7 col-12">
					<div class="bg-white shadow rounded p-3">
					<div id="scanhistorylist"></div>
				</div>
				</div>
			</div>
		</div>
	</section>
</main>


<script>

$(document).ready(function(){
	$('#audience_id').focus();
});

function not_connected_internet()
{
	alert('not connected');
	var audience_id = $('#audience_id').val();
	var user_id = localStorage.getItem("user_id");
	var event_id = localStorage.getItem("event_id");
	var event_key = localStorage.getItem("event_key");
	var resp={};
	var newaudience_array = [];
	var attendeeofflinecheckin = {};
	var checkin_sync = JSON.parse(localStorage.getItem('attendee_checkin_sync'));
	attendeecheckinsync = checkin_sync && checkin_sync !==null && checkin_sync !=='undefined' ? checkin_sync : [];
	if(user_id && user_id !== 'undefined')
	{
		var audience_ls = localStorage.getItem("audience");
		var audience = JSON.parse(audience_ls);
		var audience_array = Object.keys(audience).map((k)=>{
			newaudience_array.push(audience[k]);
		});
		
		var audiencefound = newaudience_array.find((ele)=>{
			if(ele.unique_key === audience_id)
			{
				return ele;
			}
		});

		if(audiencefound && audiencefound !== 'undefined')
		{
			if(audiencefound.attendance_status && audiencefound.attendance_status === 1)
			{
				resp = {success : 0, msg:'Attendance Marked Allready', aud_key: audience_id, aud_name:audiencefound.name, aud_email:audiencefound.email, aud_checkin_date:audiencefound.attendance_in_date};
				showerrordiv(resp);
			}
			else
			{
				if(audiencefound.badge_print_status && audiencefound.badge_print_status === 1)
				{
					resp = {success : 0, msg:'Badge Printed Allready', aud_key: audience_id, aud_name:audiencefound.name, aud_email:audiencefound.email, aud_checkin_date:audiencefound.attendance_in_date};
					showerrordiv(resp);
				}
				else
				{
					const datetime = (new Date ((new Date((new Date(new Date())).toISOString() )).getTime() - ((new Date()).getTimezoneOffset()*60000))).toISOString().slice(0, 19).replace('T', ' ');
					offlinecheckin = {badge_print_status:1, attendance_status:1, attendance_in_date:datetime, badge_print_date:datetime, modified_by:user_id, modified_date:datetime, aud_key:audience_id, eid:event_id, ekey:event_key};

					attendeecheckinsync.push(offlinecheckin);
					offlinecheckin = {};
					localStorage.setItem("attendee_checkin_sync", JSON. stringify(attendeecheckinsync));

					audience[audiencefound.id].attendance_status = 1;
					audience[audiencefound.id].badge_print_status = 1;
					audience[audiencefound.id].attendance_in_date = datetime;
					audience[audiencefound.id].badge_print_date = datetime;

					localStorage.setItem("audience", JSON.stringify(audience));

					resp = {success : 1, msg:'Attendance Marked and Badge Printed', aud_key: audience_id, aud_name:audiencefound.name, aud_email:audiencefound.email, aud_checkin_date:audiencefound.attendance_in_date, req_badge:1, aud_company:audiencefound.company, aud_qrcode:audiencefound.qrcode};
					showerrordiv(resp);					
				}
			}
		}
		else
		{
			const datetime = (new Date ((new Date((new Date(new Date())).toISOString() )).getTime() - ((new Date()).getTimezoneOffset()*60000))).toISOString().slice(0, 19).replace('T', ' ');
			resp = {success : 0, msg:'Audience Not Found', aud_key: audience_id, aud_name:'', aud_email:'', aud_checkin_date:datetime};
			showerrordiv(resp);
		}
	}
	else
	{
		alert('Please Connect To Internet');
	}
}

function showerrordiv(resp)
{
	var bg = '';
	console.log(resp);
	if(resp.success === 0)
	{
		$('#scanhistorylist').prepend($('#scanhistory').html())
		$('#scanhistory').empty();
		$('#insidecount').text(resp.inside_count);
		bg = 'bg-danger';
		
	}
	if(resp.success === 1)
	{
		$('#scanhistorylist').prepend($('#scanhistory').html())
		$('#scanhistory').empty();
		$('#insidecount').text(resp.inside_count);
		bg = 'bg-primary';
		if(resp.req_badge && resp.req_badge===1)
		{
			var badgeconfig = JSON.parse(localStorage.getItem("badgeconfig"));
			var badgetemplate = JSON.parse(localStorage.getItem("badgetemp"));

			const width = badgeconfig.width;
			const height = badgeconfig.height;
			const margintopaa = 'margin-top:'+badgetemplate.margintop+'%;';

			var layout = badgetemplate.badgelayout;
			layout = layout.replace('[name]', resp.aud_name);
			layout = layout.replace('[company]', resp.aud_company);
			$dummyqr = "https://neonichesolutions.co.in/onsite/public/assets/images/dummyqr.png";
			$newqr = resp.aud_qrcode;

			if (layout.includes('<img')) { 
				layout = layout.replace($dummyqr, $newqr);
				layout = layout.replace('[unique_key]', resp.aud_key);
			}
			//window.open(""+resp.aud_key);
			var htmlbody = '<div>';
			htmlbody += '<div id="wrapper" style="width:'+width+'mm; height:'+height+'mm; position: absolute;">';
			htmlbody += '<div id="dummybadge" style="'+margintopaa+'">';
			htmlbody += ''+layout+'';
			htmlbody += '</div></div></div>'

			var newWin=window.open('','Print-Window');
			newWin.document.open();
			newWin.document.write('<html><body onload="window.print()">'+htmlbody+'</body></html>');
			newWin.document.close();
		}
	}
	var applink = '&event_id='+'&event_key=';
	var reprintbtn = '{{ url("audience-print-badge?tabletop=1&key=") }}'+resp.aud_key+applink;

	$('#scanhistory').append('<div id="checkin" class="row m-0 p-0"><div class="text-white p-2 pt-0 pb-0 MSG '+bg+'">'+resp.msg+'</div><div id="checkin_key" class="m-0 col-6">'+resp.aud_key+'-'+resp.aud_category+'</div><div class="m-0 col-6 text-end"><a class="btn btn-primary btn-small" href="'+reprintbtn+'" target="_blank">Re-print Badge</a></div><div class="row row-cols-1"><div class="col-lg-3 col-12 fs-6" id="checkin_name">'+(resp.aud_name ? resp.aud_name : '')+'</div><div class="col-lg-5 col-12 fs-6" id="checkin_email">'+(resp.aud_email ? resp.aud_email : '')+'</div><div  class="col-lg-4 col-12 fs-6" id="checkin_date">'+(resp.aud_checkin_date ? resp.aud_checkin_date : '' ) +'</div></div></div>');

	setTimeout(function(){
		$('#audience_id').focus();
	}, 1500);
	$('#audience_id').focus();
	$('#audience_id').val('');
}

function enterpressalert(e, textarea){
	var code = (e.keyCode ? e.keyCode : e.which);
	if(code == 13) { 
		var isOnLine = navigator.onLine;
	   	if (isOnLine) {
	   		//if connected to internet
	   		_qsave();
			// not_connected_internet();	
	   	} else {
	   		//if Not connected to internet
	   		not_connected_internet();
	   	}
	}
}

function _qsave(){
	var audience_id = $('#audience_id').val();
	var cnt = 0;
	$.ajax({
    	url:"{{url('attendance_checkin_submit')}}",
    	type:'POST',
    	data:{"_token": "{{ csrf_token() }}", audience_id:audience_id, event_id:'', event_key:''},
    	error:function(err){
    		console.log(err);
    	},
    	success:function(resp){
    		var resp = JSON.parse(resp);
			var bg = '';
			console.log(resp);
    		if(resp.success === 0)
    		{
				bg = 'bg-danger';
    		}
    		if(resp.success === 1)
    		{
    			$('#scanhistorylist').prepend($('#scanhistory').html())
				$('#scanhistory').empty();
				$('#insidecount').text(resp.inside_count);
				bg = 'bg-primary';
				if(resp.req_badge && resp.req_badge===1)
				{
					window.open("