@extends('admin_template')
@section('content')
<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>
<div class="container" style="margin-top:85px;">
    <div class="row mb-3">
        <div class="col-md-12">
                        <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>
            <button onclick="playAudio()" type="button" id="buttonaudio">Scan Audio</button>
            <button type="button" onClick="window.location.reload();" class="btn btn-primary">Fetch Data</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 mb-3">
            <form class="form" action="" method="post" id="leadupdateform">
                @csrf
                <input type="hidden" name="event_key" value="{{ @$_GET['ekey'] }}">
                <input type="hidden" name="event_id" value="{{ @$_GET['eid'] }}">
                <input type="hidden" name="checkpoint_id" value="{{ @$_GET['cpid'] }}">
                <div class="row">
                    <div class="col-6 mb-3">
                        <input type="text" class="form-control" name="event_aud_id" id="event_aud_id" value="" readonly>
                    </div>
                    <div class="col-6 mb-3">
                        <input type="text" class="form-control" name="event_aud_name" id="event_aud_name" value="" readonly>
                    </div>
                    <div class="col-6 mb-3">
                        <select class="form-select form-control" name="lead_status">
                            <option value="">Select...</option>
                            <option value="hot">Hot</option>
                            <option value="warm">Warm</option>
                            <option value="cold">Cold</option>
                        </select>
                    </div>
                    <div class="col-6 mb-3">
                        <textarea name="lead_comment" class="form-control"></textarea>
                    </div>
                    <div class="col-6 offset-6 text-end">
                        <input type="submit" class="btn btn-primary" value="Submit">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-12">
            <h2>Audience Checkpoint Attendance List</h2>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Sr. No.</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Company</th>
                            <th>Designation</th>
                            <th>Previous Scan</th>
                            <th>Visit Count</th>
                        </tr>
                    </thead>
                    <tbody>
                                                <tr>
                            <td colspan="5">No Visitor Found</td>
                        </tr>
                                                  
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" id="afterscan">
  <div class="modal-dialog" style="max-width:25%;">
    <div class="modal-content">
      <div class="modal-body text-center">
        <div id="successscan">
            <i class="fa fa-check-square-o text-success" style="font-size: 5rem;" aria-hidden="true"></i>
            <div class="" id="scansuccess"></div>
        </div>
        <div id="errorscan">
            <i class="fa fa-exclamation-circle text-warning" style="font-size: 5rem;" aria-hidden="true"></i>
            <div class="" id="scanerror"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    function _qsave(){
        var audience_id = $('#audience_id').val();
        $.ajax({
            url:"{{url('scan_qrcode_submit')}}",
            type:'POST',
            data:{"_token": "{{ csrf_token() }}", audience_id:audience_id, event_id:'', event_key:'', checkpoint_id:''},
            error:err=>{
                console.log(err)
            },
            success:function(resp){
                resp = JSON.parse(resp);
                console.log(resp);
                // if(resp.success == 0)
                // {
                //     console.log(resp.msg);
                //     $('#scanerror').text(resp.msg);
                //     $('#scanerror').show();
                //     setTimeout(function(){
                //         $('#scanerror').hide();
                //     }, 1500);
                // }

                // if(resp.success == 1)
                // {
                //     console.log(resp.msg);
                //     $('#scansuccess').text(resp.msg);
                //     $('#scansuccess').show();
                //     setTimeout(function(){
                //         $('#scansuccess').hide();
                //     }, 1500);
                // }


                if(resp.success == 0)
                {
                    $('#scanerror').show();
                    $('#errorscan').show();
                    $('#scanerror').text(resp.msg);
                    $('#successscan').hide();
                    $('#event_aud_id').val(resp.audience.id);
                    $('#event_aud_name').val(resp.audience.name);
                    $('#afterscan').modal('show');
                }

                if(resp.success == 1)
                {
                    $('#successscan').show();
                    $('#scansuccess').show();
                    $('#scansuccess').text(resp.msg);
                    $('#errorscan').hide()
                    $('#event_aud_id').val(resp.audience.id);
                    $('#event_aud_name').val(resp.audience.name);
                    $('#afterscan').modal('show');
                }
                setTimeout(function(){
                    $('#afterscan').modal('hide');
                }, 1000);
                
                // window.location.reload(1);
            }
         })
    }
    
    function onScanSuccess(decodedText, decodedResult) {
        
        // html5QrcodeScanner.clear();
        if (decodedText !== $('#audience_id').val()) {
            playAudio();
            $('#audience_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);

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