@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">Gift Scanning - {{$getgift['name']}} </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">Total<br>
                                <span class="badge bg-white color-extra-dark">{{isset($getgift['total']) ? $getgift['total'] : 0}}</span>
                            </div>
                            <div class="col-lg-auto col-4 bg-purple-color mt-2 mb-2 p-2 text-center">Given<br>
                                <span class="badge bg-white color-extra-dark">{{isset($getgift['given']) ? $getgift['given'] : 0}}</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">{{$getgift['total'] - $getgift['given']}}</span>
                            </div>
                        </div>
                    </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 text-end">
                        <button onclick="playAudio()" type="button" id="buttonaudio" class="pt-1 pb-1 my-btn-dark-border">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 pt-4 pb-4">
                                <div id="attendee_name"></div>
                                <div id="attendee_company" class="mb-4"></div>
                                <!-- <div id="attendee_category"></div> -->
                                <div id="attendee_checkin" class="bg-light text-danger"></div>
                                <div id="print_button_div row">
                                    <a href="#" class="my-btn-purple w-100 col-12 text-center" id="print_button">Give Gift</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="errorattendeemodal" 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 pt-4 pb-4">
                                <h5 class="modal-title text-center text-danger" id="err_title"></h5>
                            </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>
    setInterval(function(){
        $('#audience_id').val('');
    }, 3000);

    function _qsave(){
        var audience_key = $('#audience_id').val();
        $.ajax({
            url:"{{url('kiosk_scan_qrcode_submit')}}",
            type:'POST',
            data:{"_token": "{{ csrf_token() }}", audience_id:audience_key, event_id:'', event_key:'', gift_id:''},
            error:err=>{
                console.log(err);
            },
            success:function(response){
                var resp = JSON.parse(response);
                console.log(resp);
                if(resp.success===0)
                {
                    $('#errorattendeemodal').show();
                    $('#errorattendeemodal').modal('show');
                    $('#attendeemodal').hide();
                    $('#err_title').text(resp.err_msg);
                }
                else
                {
                    $('#errorattendeemodal').hide();
                    $('#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);
        
                    if(resp.giftsearch != null && resp.giftsearch.length > 0)
                    {
                      $('#attendee_checkin').text('Gift Already Taken/Given').show();
                      $('#print_button').hide();
                    }
                    else
                    {
                      $('#print_button').show();
                      $('#attendee_checkin').empty().hide();
                      var url = '