@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">Scan QR Code 
            <!-- <span class="btn-primary p-2 counter">Inside Count : <span class="badge bg-white color-extra-dark ">{{$inside_cnt}}</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="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-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" style="float: right;" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-11 text-center pt-5 pb-5">
              <div id="attendee_name"></div>
              <div id="attendee_company" class="mb-4"></div>
              <div id="attendee_designation" class="mb-4"></div>
              <div id="attendee_category" class="mb-4"></div>
              <div id="attendee_status" class="mb-4"></div>
              <div id="attendee_checkin"></div>
              <input type="hidden" id="printurl" value="">
              <div id="print_button_div" class="w-100">
                <a href="#" class="my-btn-purple w-100 d-block" id="print_button">Print</a>
              </div>
            </div>
          </div>
        </div>
      </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>

<div class="modal pt-4 pb-4 resultaftermodal" id="same1" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h6 class="text-center">Please Collect You Badge from </h6>
                <h2 class="text-center color-purple-color">
                  <strong> Counter <span id="counternumber">{{isset($getprinter['desk_number']) ? $getprinter['desk_number'] : 0}}</span></strong>
                </h2>
            </div>
            <div class="text-center mb-2 mt-2 row justify-content-center">
              <!--                 <a href="{{ url('kiosk-checkin-search?event_id='.$_GET['event_id'].'&event_key='.$_GET['event_key']) }}" 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>

</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>
    setInterval(function(){
        $('#audience_id').val('');
    }, 3000);

    function _qsave(){
        var audience_id = $('#audience_id').val();
        $.ajax({
            url:"{{url('kiosk_scan_qrcode_submit')}}",
            type:'POST',
            data:{"_token": "{{ csrf_token() }}", audience_id:audience_id, event_id:'', event_key:''},
            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
                {
                    var color = 'color:#fff;';
                    if(resp.audience_type[resp.attendee.usertype].color === '#ffffff')
                    {
                      color = 'color:#000;';
                    }
                    var audstat = '';
                    if(resp.attendee.audience_status == 1)
                    {
                    audstat = 'Approved';
                    }
                    if(resp.attendee.audience_status == 2)
                    {
                    audstat = 'On Hold';
                    }
                    if(resp.attendee.audience_status == 3)
                    {
                    audstat = 'Rejected';
                    }
                    if(resp.attendee.audience_status == 4)
                    {
                    audstat = 'Blacklist';
                    }
                    if(resp.attendee.audience_status == 5)
                    {
                    audstat = 'Not Of Profile';
                    }
                    if(resp.attendee.audience_status == 6)
                    {
                    audstat = 'Confirmed';
                    }
                    $('#attendee_status').text(audstat);
                    $('#attendeemodal').modal('show');
                    $('#attendee_name').text(resp.attendee.name);
                    $('#attendee_company').text(resp.attendee.company);
                    $('#attendee_designation').text(resp.attendee.designation);
                    $('#attendee_category').html('<span class="" style="'+color+'">Category: '+resp.audience_type[resp.attendee.usertype].name+'</span>');
                    $('#attendee_category').css('background-color', resp.audience_type[resp.attendee.usertype].color);
                    var url = '