@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']}} <span class="btn-primary p-2 counter">Count : <span class="badge bg-white color-extra-dark" id="insidecount"></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 modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" style="float: right;" aria-label="Close"></button>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8 col-12 pt-4 pb-4">
                <div class="mb-3" id="attendee_name"></div>
             <!--   <div class="mb-3" id="attendee_company"></div>
                <div class="mb-3" id="attendee_category"></div>-->
                <form class="form" action="#" method="GET" id="bootvisited_form">
					<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 mb-3">
                        <option value="">Select Status</option>
                        <option value="Hot Lead">Hot Lead</option>
                        <option value="Warm Lead">Warm Lead</option>
                        <option value="Booth Visitor">Booth Visitor</option>
                    </select>
                    <textarea name="lead_comment" value="" id="lead_comment" class="form-control mb-3" placeholder="Leave a comment here"/></textarea>
                    <input type="submit" value="Visited" class="my-btn-org w-100">
                </form>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal pt-4 pb-4 resultaftermodal" id="same" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5 class="modal-title text-center resultaftermsg"></h5>
                <strong>
                    <h4 class="modal-title text-center resultaftername">
                    <h4>
                </strong>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
               <!--                  <a href="{{ url('kiosk_booth_search?event_id='.$_GET['event_id'].'&event_key='.$_GET['event_key'].'&booth_id='.$_GET['booth_id']) }}" class="btn btn-secondary btn-lg d-block col-6">Close</a>
                 -->
                <button type="button" class="btn btn-secondary btn-lg d-block col-6" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal pt-4 pb-4 erroraftermodal" id="same" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5 class="modal-title text-center text-danger erroraftermsg"></h5>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
                <button type="button" class="btn btn-danger text-white btn-lg d-block col-6 btn-danger" onClick="window.location.reload();">Reload</button>
            </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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
    setInterval(function(){
        $('#audd_id').val('');
    }, 3000);

    function _qsave(){
        $('#bootvisited_form').trigger("reset");
        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);
                if(resp.success == 0)
                {
                    $('#attendeemodal').modal('hide');
                    $('.erroraftermsg').text(resp.err_msg);
                    $('.erroraftermodal').modal('show');
                }
                else
                {
                    $('#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.boothsearch.lead_status !== "")
                    {
                        $('#lead_status option:contains("'+resp.boothsearch.lead_status+'")').attr('selected', 'selected');
                    }
                    $('#lead_comment').val(resp.boothsearch.lead_comment);
                    $('#attendee_id').val(resp.attendee.id);
                    $('.erroraftermodal').modal('hide');
                    $('#attendeemodal').modal('show');
                }                
            }
         })
    }
    
    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);
            }
        });


        $("#bootvisited_form").validate({
            rules:
            {
                
            },
            messages: {
                    
            },    
            errorElement: 'p',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            submitHandler: function (form) {
                $.ajax({
                    type: "GET",
                    url: "{{ url('kiosk-booth-visit') }}",
                    data: $(form).serialize(),
                    success: function (data) {
                        var resp = JSON.parse(data);
                        console.log(resp);     
                        $('#bootvisited_form').trigger("reset");
                        $('#attendeemodal').modal('hide');
                        $('#lead_comment').val('');
                        $('#attendee_id').val('');
                        $('#audience_id').val('');
                        if(resp.success === 0)
                        {
                            $('.resultaftermodal').modal('hide');
                            $('.erroraftermsg').text(resp.err_msg);
                            $('.erroraftermodal').modal('show');
                        }
                        else
                        {
                            $('.erroraftermodal').modal('hide');
                            $('.resultaftermsg').text(resp.checkinmsg);
                            $('.resultaftername').text(resp.attendee.name);
                            $('#insidecount').text(resp.inside_cnt);
                            $('.resultaftermodal').modal('show');
                        }
                    },
                    error: function (data) {
                        alert("Some Error Occurred Please reload Page.");  
                    }
                });
                return false;
            }
        });
    });
</script>


@endsection