@extends('admin_template')
@section('content')


<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 justify-content-between">
				<div class="col-lg-5 col-12 align-self-center">
					<h5>Booth {{ isset($chkname['checkpoint_name']) ? '- '.$chkname['checkpoint_name'] : '' }}</h5>
				</div>	
				<div class="col-lg-7 col-12 align-self-center text-end">
					<div class="row">
						@if($session['role'] == 2 || $session['role'] == 1)
						<div class="col-6">
							<input type="text" id="audience_id" placeholder="Scan QR code" value="" class="col-lg-12 col-12 border-0 pt-1 pb-1 rounded" autocomplete="off" onkeypress="enterpressalert(event, this)">
						</div>
						<div class="col-2 align-self-center">
							<button type="button" onClick="window.location.reload();" class="btn-warning pt-1 pb-1">Fetch Data</button>
						</div>
						@endif
						@if($session['role'] == 1 || $session['role'] == 2 || $session['role'] == 8)
						@if(isset($res) && is_array($res) && count($res) > 0)
						<div class="col-2 align-self-center">
							<a href="{{ url('audience-event-list').'?event_id='.$_GET['eid'].'&event_key='.$_GET['ekey'] }}" class="btn-info pt-1 pb-1" title="Add Checkpoint">Audience</a>
						</div>
						<div class="col-2 align-self-center">
							<a type="button" href="{{ url('checkpoint_scanned_export').'?'.(isset($_GET) ? http_build_query($_GET) : '') }}" class="btn-info-border pt-1 pb-1">Export</a>
						</div>
						<div class="col-2 align-self-center">
							<button type="button" onClick="window.location.reload();" class="btn-warning pt-1 pb-1">Refresh Page</button>
						</div>
						@endif
						@endif
					</div>
				</div>	
			</div>
		</div>	
	</section>
	
	<div class="container-fluid">
		<div class="row">
			@if($session['role'] == 1 || $session['role'] == 2)
			<div class="col-12">
				<form class="form p-3 bg-dg pt-2 pb-0" action="" method="post" id="leadupdateform">
					@csrf
					<input type="hidden" name="event_key" value="{{ @$_GET['ekey'] }}">
					<input type="hidden" name="event_id" value="{{ @$_GET['eid'] }}">
					<input type="hidden" name="checkpoint_id" value="{{ @$_GET['cpid'] }}">
					<input type="hidden" class="form-control  w-100" name="event_aud_id" id="event_aud_id" value="" readonly placeholder="Audience ID">
					<div class="row">
						<div class="col-12 text-dm bg-2">
							Mark lead form
						</div>
					</div>
					<div class="row">
						<div class="col-lg-11 col-12">
							
							<div class="row row-cols-lg-3 row-cols-3">
								<div class="col mb-3">
									<input type="text" class="form-control  w-100" name="event_aud_name" id="event_aud_name" value="" readonly placeholder="Audience name">
								</div>
								<div class="col mb-3">
									<select class="form-select form-control  w-100" name="lead_status">
										<option value="">Select...</option>
										<option value="hot">Hot</option>
										<option value="warm">Warm</option>
										<option value="cold">Cold</option>
									</select>
								</div>
								<div class="col mb-3">
									<textarea name="lead_comment" class="form-control w-100" style="height: 35px;"></textarea>
								</div>
							</div>
						</div>
						<div class="col-lg-1 col-12 text-end">
							<input type="submit" class="btn-reject pt-2 pb-2" value="Submit">
						</div>
					</div>
				</form>
			</div>
			@endif
			<div class="col-12">
								<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 fw-bold bg-m p-2 pt-1 pb-1">Sr. No.</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Key</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Name</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Email</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Company</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Previous Scan</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Lead Status</th>
								<th class="numeric fw-bold bg-m p-2 pt-1 pb-1">Visit Count</th>
							</tr>
						</thead>
						<tbody>
							                            <tr>
                                <td colspan="8">No Visitor Found</td>
                            </tr>
                            						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal" tabindex="-1" id="afterscan">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-body text-center">
	        <div id="successscan">
	        	<i class="fa fa-check-square text-success" style="font-size: 5rem;" aria-hidden="true"></i>
	        	<div class="" id="scansuccess"></div>
	        </div>
	        <div id="errorscan">
	        	<i class="fa fa-exclamation-circle text-warning" style="font-size: 5rem;" aria-hidden="true"></i>
	        	<div class="" id="scanerror"></div>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</main>
	<script>

		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 booth_id = localStorage.getItem("booth_id");
			var resp={};
			var newaudience_array = [];
			var checkin_update_sync = JSON.parse(localStorage.getItem('booth_audience_update_sync'));
			var booth_audience_update_sync = checkin_update_sync && checkin_update_sync !==null && checkin_update_sync !=='undefined' ? checkin_update_sync : [];

			var checkin_sync = JSON.parse(localStorage.getItem('booth_audience_sync'));
			var booth_audience_sync = checkin_sync && checkin_sync !==null && checkin_sync !=='undefined' ? checkin_sync : [];

			if(user_id && user_id !== 'undefined')
			{
				var audience = JSON.parse(localStorage.getItem("audience"));
				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;
					}
				});
				console.log('audience_found', audiencefound);
				if(audiencefound && audiencefound !== 'undefined')
				{
					var booth_audience = JSON.parse(localStorage.getItem("booth_audience"));
					var booth_audiencefound = null;
					booth_audiencefound = booth_audience.find((ele) => {
						if(ele.audience_id === audiencefound.id)
						{
							return ele;
						}
					});
					const datetime = (new Date ((new Date((new Date(new Date())).toISOString() )).getTime() - ((new Date()).getTimezoneOffset()*60000))).toISOString().slice(0, 19).replace('T', ' ');
					if(booth_audiencefound && booth_audiencefound !== 'undefined')
					{	
						var boothcount = parseInt(booth_audiencefound.booth_count) + 1;
						var newsync_update = {};
						booth_audience.map((e, i)=>{
							if(e.id === booth_audiencefound.id)
							{
								booth_audience[i].booth_count = boothcount;
							}
						});
						localStorage.setItem("booth_audience", JSON.stringify(booth_audience));

						booth_audiencefound.booth_count = boothcount;
						booth_audiencefound.msg = 'Already Marked attendance';
						booth_audiencefound.success = 0; 
						showerrordiv(booth_audiencefound);

						//to database updates
						newsync_update = {id:booth_audiencefound.id, audience_id:booth_audiencefound.audience_id, booth_count: booth_audiencefound.booth_count, modified_by: user_id, modified_date: datetime}; 
						if(booth_audience_update_sync && booth_audience_update_sync !== 'undefined' &&booth_audience_update_sync.length > 0)
						{
							booth_audience_update_sync.map((er, i)=>{
								if(er.id === booth_audiencefound.id)
								{
									booth_audience_update_sync[i].booth_count = boothcount;
								}
								else
								{
									booth_audience_update_sync.push(newsync_update);
								}
							});
						}
						else
						{
							booth_audience_update_sync.push(newsync_update);
						}
						newsync_update = {};

						booth_audience_update_sync = booth_audience_update_sync.filter((value, index, self) =>
						  index === self.findIndex((t) => (
						    t.id === value.id && t.name === value.name
						  ))
						)
						localStorage.setItem("booth_audience_update_sync", JSON.stringify(booth_audience_update_sync));
					}
					else
					{
						var new_booth_audience_sync = { audience_id:audiencefound.id, event_id:event_id, checkpoint_id:booth_id, user_id:user_id, booth_count:1, status:1, created_by:user_id, created_date:datetime, modified_by:user_id, modified_date:datetime };
						booth_audience_sync.push(new_booth_audience_sync);
						localStorage.setItem("booth_audience_sync", JSON.stringify(booth_audience_sync));
						
						var maxid = Math.max(...booth_audience.map(o => o.id));
						new_booth_audience_sync.id = parseInt(maxid)+1;

						booth_audience.push(new_booth_audience_sync);
						localStorage.setItem("booth_audience", JSON.stringify(booth_audience));

						new_booth_audience_sync = {};
					}
				}
				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);
				}
			}
		}

		function showerrordiv(resp)
		{
			$('#afterscan').modal('show');
			if(resp.success == 0)
    		{
        		$('#errorscan').show();
    			$('#scanerror').show();
    			$('#scanerror').text(resp.msg);
				$('#successscan').hide();
				$('#scansuccess').text('');
				$('#scansuccess').hide();
				// $('#event_aud_id').val(resp.audience.id);
				// $('#event_aud_name').val(resp.audience.name);
    		}

    		if(resp.success == 1)
    		{
				$('#errorscan').hide();
    			$('#scanerror').hide();
    			$('#scanerror').text('');
				$('#successscan').show();
				$('#scansuccess').show();
				$('#scansuccess').text(resp.msg);
				$('#event_aud_id').val(resp.audience.id);
				$('#event_aud_name').val(resp.audience.name);							
    		}
			setTimeout(function(){
				$('#afterscan').modal('hide');
			}, 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();

			$.ajax({
                	// url:_base_url_+'classes/Master.php?f=register',
                	url:"{{url('scan_qrcode_submit')}}",
                	type:'POST',
                	data:{"_token": "{{ csrf_token() }}", audience_id:audience_id, event_id:'', event_key:'', checkpoint_id:''},
                	error:err=>{
                		console.log(err)
                	},
                	success:function(resp){
                		$("#audience_id").val('');
						resp = JSON.parse(resp);
						$('#afterscan').modal('show');
						if(resp.success == 0)
                		{
                    		$('#errorscan').show();
                			$('#scanerror').show();
                			$('#scanerror').text(resp.msg);
							$('#successscan').hide();
							$('#scansuccess').text('');
							$('#scansuccess').hide();
							// $('#event_aud_id').val(resp.audience.id);
							// $('#event_aud_name').val(resp.audience.name);
                		}

                		if(resp.success == 1)
                		{
							$('#errorscan').hide();
                			$('#scanerror').hide();
                			$('#scanerror').text('');
							$('#successscan').show();
							$('#scansuccess').show();
							$('#scansuccess').text(resp.msg);
							$('#event_aud_id').val(resp.audience.id);
							$('#event_aud_name').val(resp.audience.name);							
                		}
						setTimeout(function(){
							$('#afterscan').modal('hide');
						}, 1500);
						
						$('#audience_id').focus();
						$('#audience_id').val('');
                	}
                })
		}

		$(document).ready(function(){
			$('#audience_id').focus();
			
			// setInterval(function () {
			// 	var myInput = document.getElementById("audience_id");
			// 	if (myInput && myInput.value) {
			// 		_qsave();
			// 	}
			// },2000);

			$("#leadupdateform").submit(function(e) {
				e.preventDefault();
				var aud_id = $('#event_aud_id').val();
				if(aud_id)
				{
					// avoid to execute the actual submit of the form.0......................
				    var form = $(this);
				    var actionUrl = "{{ url('checkpoint_audience_leadupdate') }}";
				    
				    $.ajax({
				        type: "POST",
				        url: actionUrl,
				        data: form.serialize(), // serializes the form's elements.
				        success: function(data)
				        {
				        	var resp = JSON.parse(data);
				          	alert(resp.success);
				          	$("#leadupdateform").trigger('reset');
				        }
				    });
				}
				else
				{
					$('#scanerror').text('Please Scan Audience First');
					$('#successscan').hide();
					$('#afterscan').modal('show');
					setTimeout(function(){
						$('#afterscan').modal('hide');
					}, 1500);
				}
			});
		});
	</script>
@endsection