@extends('admin_template')
@section('content')
<!--Mobile View -->

<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 mb-0">
		<div class="container-fluid">
			<div class="row row-cols-1 row-cols-md-2 justify-content-center">
				<div class="col-lg-6 col-12 align-self-center">
					<h5>Booth {{ isset($chkname['checkpoint_name']) ? '- '.$chkname['checkpoint_name'] : '' }}</h5>
				</div>
				<div class="col-lg-6 col-12">
					<div class="row justify-content-center justify-content-md-end">
						<div class="col-lg-3 col-10 mt-4 mb-4 offset-sm-1 align-self-center">
														<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>
						</div>
						<div class="col-lg-3 col-12 align-self-center">
							<button onclick="playAudio()" type="button" id="buttonaudio" class="btn-info pt-2 pb-2 rounded border-0 w-100 text-white fw-bold mb-1 mt-1">Scan Audio</button>
						</div>
						@if(isset($res) && is_array($res) && count($res) > 0)
						<div class="col-lg-3 col-12 align-self-center">
							<a type="button" href="{{ url('checkpoint_scanned_export').'?'.(isset($_GET) ? http_build_query($_GET) : '') }}" class="btn-info-border rounded border-0 w-100 pt-2 pb-2 mb-1">Export</a>
						</div>
						@endif
						<div class="col-lg-3 col-12 align-self-center">
							<button type="button" onClick="window.location.reload();" class="btn-warning pt-2 pb-2 d-inline">Fetch Data</button>
						</div>
					</div>	
				</div>
			</div>
		</div>	
	</section>
	<section class="bg-l-primary-color pt-3">
		<div class="container-fluid">
			<div class="row">
				<form class="form" 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'] }}">
					<div class="row row-cols-lg-5 row-cols-1">
						<div class="col mb-3">
							<input type="text" class="form-control" name="event_aud_id" id="event_aud_id" value="" readonly>
						</div>
						<div class="col mb-3">
							<input type="text" class="form-control" name="event_aud_name" id="event_aud_name" value="" readonly>
						</div>
						<div class="col mb-3">
							<select class="form-select form-control" 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" style="max-height: 30px;"></textarea>
						</div>
						<div class="col pb-3">
							<input type="submit" class="btn-dark w-100 border-0 text-white rounded pt-2 pb-2" value="Submit">
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
	
	<section class="mt-4">
		<div class="container-fluid">
			<div class="row">
				<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 pt-1 pb-1">Name</th>
								<th class="numeric bg-m pt-1 pb-1">Email</th>
								<th class="numeric bg-m pt-1 pb-1">Company</th>
								<th class="numeric bg-m pt-1 pb-1">Designation</th>
								<th class="numeric bg-m pt-1 pb-1">Scan Date</th>
								<th class="numeric 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>
	</section>
</main>




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

<script>
    function _qsave(){
        var audience_id = $('#audience_id').val();
        $.ajax({
            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){
                resp = JSON.parse(resp);
                console.log(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);
                // }


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

                if(resp.success == 1)
                {
                    $('#successscan').show();
                    $('#scansuccess').show();
                    $('#scansuccess').text(resp.msg);
                    $('#errorscan').hide()
                    $('#event_aud_id').val(resp.audience.id);
                    $('#event_aud_name').val(resp.audience.name);
                    $('#afterscan').modal('show');
                }
                setTimeout(function(){
                    $('#afterscan').modal('hide');
                }, 1000);
                
                // 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 : 200 }
    var html5QrcodeScanner = new Html5Qrcode(
        "reader", { fps: 1000, qrbox: 200 });
    // 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(); 
    } 

    $(document).ready(function(){
        $("#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