@extends('kiosk.kiosk_template')
@section('content')


<section>
<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="bg-medium-color">
	<div class="container-fluid">
		<div class="row row-cols-1 row-cols-md-2 justify-content-center">
			<div class="col-12 align-self-center header-count">
			 <h4 class="mt-4 mb-4 text-center">{{$booth_details['checkpoint_name']}}<br> <span class="btn-primary p-2 counter">Inside Count : <span class="badge bg-white color-extra-dark ">0000</span></span> </h4>
			</div>	
		</div>
	</div>	
</section>	
<section>
	<div class="container-fluid">
		<div class="row row-cols-1 row-cols-md-1 justify-content-center">
			<div class="col-10 mt-4 mb-4 align-self-center">
				<input type="hidden" id="audd_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-10 align-self-center">
				<button onclick="playAudio()" type="button" id="buttonaudio" class="w-100 my-btn-org w-50">Scan Audio</button>
			</div>
		</div>
	</div>
</section>	
</main>

<div class="modal fade" id="attendeemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8">
                <div id="attendee_name"></div>
                <!-- <div id="attendee_company"></div> -->
                <!-- <div id="attendee_category"></div> -->
                <form class="form" action="{{ url('kiosk-booth-visit') }}" method="GET">
					<input type="hidden" name="m" value="1">
                    <input type="hidden" name="event_id" value="">
                    <input type="hidden" name="event_key" value="">
                    <input type="hidden" name="booth_id" value="">
                    <input type="hidden" name="attendee_id" id="attendee_id" value="">
                    <input type="hidden" name="audience_id" value="" id="audience_id" class="form-control"/>
                    
                    <select name="lead_status" id="lead_status" class="form-control">
                    <option value="">Select Status</option>
                    <option value="Hot">Hot</option>
                    <option value="Warm">Warm</option>
                    <option value="Cold">Cold</option>
                    </select>
                    <input type="text" name="lead_comment" value="" id="lead_comment" class="form-control"/>
                    <input type="submit" value="Visited" class="btn btn-success">
                </form>
                
                <div id="print_button_div">
                    <!-- <a href="#" class="btn btn-success" id="booth_button">Visited</a> -->
                </div>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
    function _qsave(){
        var audience_key = $('#audd_id').val();
        $.ajax({
            url:"{{url('kiosk_scan_qrcode_submit')}}",
            type:'POST',
            data:{"_token": "{{ csrf_token() }}", audience_id:audience_key, event_id:'', event_key:'', booth_id:''},
            error:err=>{
                console.log(err);
            },
            success:function(response){
                resp = JSON.parse(response);
                console.log(resp);
                $('#attendeemodal').modal('show');
                $('#attendee_name').text(resp.attendee.name);
                // $('#attendee_company').text(resp.attendee.company);
                // $('#attendee_category').text('Category: '+resp.audience_type[resp.attendee.usertype].name);
                // $('#attendee_category').css('background-color', resp.audience_type[resp.attendee.usertype].color);
                $('#audience_id').val(resp.attendee.id);
                $('#lead_status').find('option:selected').removeAttr('selected');
                
                if(resp.attendee.lead_status !== "")
                {
                $('#lead_status option:contains("'+resp.attendee.lead_status+'")').attr('selected', 'selected');
                }
                
                $('#lead_comment').val(resp.attendee.lead_comment);
                $('#attendee_id').val(resp.attendee.id);
                
                
            }
         })
    }
    
    function onScanSuccess(decodedText, decodedResult) {
        
        // html5QrcodeScanner.clear();
        if (decodedText !== $('#audd_id').val()) {
            playAudio();
            $('#audd_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);

    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);
                        $("#leadupdateform").trigger('reset');
                    }
                });
            }
            else
            {
                $('#scanerror').text('Please Scan Audience First');
                $('#successscan').hide();
                $('#afterscan').modal('show');
                setTimeout(function(){
                    $('#afterscan').modal('hide');
                }, 1500);
            }
        });
    });
</script>


@endsection