@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 justify-content-between">
                <div class="col-lg-8 col-12 align-self-center"><h4 class="mb-0">{{$gethall['name']}} - {{$gethallsession['name']}} Scanning</h4></div>
                <div class="col-lg-4 col-12">
                    <div class="row justify-content-end p-3 text-white">
                        <div class="col-lg-auto col-4 btn-primary mt-2 mb-2 p-2 text-center">Capacity<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['capacity'] }}</span></div>
                        <div class="col-lg-auto col-4 bg-purple-color mt-2 mb-2 p-2 text-center">Entered<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['entered'] }}</span></div>
                        <div class="col-lg-auto col-4 bg-org-color mt-2 mb-2 p-2 text-center">Remaining<br>
<span class="badge bg-white color-extra-dark">{{ $gethallsession['capacity'] - $gethallsession['entered'] }}</span></div>
                      </div>
                </div>
            </div>
        </div>  
    </section>
    <section class="breadcrumb-con mb-5 mt-2">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 align-self-center">
                    <input type="hidden" id="audience_id" value="">
                    <div id="reader"  style="max-height:70vh;"></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-12 align-self-center">
                    <button onclick="playAudio()" type="button" id="buttonaudio" class="w-100 my-btn-org ">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" aria-label="Close" style="float:right"></button>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-md-8  pt-4 pb-4">
              <div class="aaaa"></div>
              <div id="attendee_name"></div>
              <!-- <div id="attendee_company"></div> -->
              <!-- <div id="attendee_category"></div> -->
              <input type="hidden" id="checkinurl" value="">
              <div class="mt-4 mb-4" id="print_button_div">
                  <a href="#" class="my-btn-org text-decoration-none" id="checkin_button">Check In</a>
                  <!-- <a href="#" class="my-btn-org-border text-decoration-none" id="checkout_button">Check Out</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">
                <h5 class="modal-title text-center" id="checkinmsg"></h5>
                <h4 class="modal-title text-center" id="checkinattendee"></h4>
            </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_key = $('#audience_id').val();
        //alert(audience_key);
        $.ajax({
            url:"{{url('kiosk_scan_qrcode_submit')}}",
            type:'POST',
            data:{"_token": "{{ csrf_token() }}", audience_id:audience_key, event_id:'', event_key:'', hall_id:'', hallsessionid:''},
            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
                {
                    $('#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);
                    
                    var checkinurl = '