<?php $__env->startSection('content'); ?>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="card">
            <h5 class="card-header" style="color:rgb(255, 255, 255);">Real Time Attendee Monitoring</h5>
            <div class="card-body">
                <div class="row" id="face_matchs">
                    

                </div>
            </div>
        </div>
    </div>

    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        const parentContainer = document.getElementById('face_matchs');
        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;
        var pusher = new Pusher(
            '<?php echo e(env('PUSHER_APP_KEY')); ?>', {
                cluster: '<?php echo e(env('PUSHER_APP_CLUSTER')); ?>'
            });

        var channel = pusher.subscribe('mychannel1');

        channel.bind('my-event', function(data) {
            // var msgg = data['message'];
            console.log(data.message);
            var _data = data.message
            appendData(_data.face_match_id,_data.face_photo)
            //alert(JSON.stringify(data));
        });

        function appendData(face_id,photo) {
            const newDiv = document.createElement("div");
            newDiv.className = "col-md-1";
            newDiv.style.cssText =
                "margin: 14px; display: grid; align-items: center; background: white; border: 1px solid; border-radius: 10px; height: 129px; justify-content: center;";

            // Create the anchor element
            const anchor = document.createElement("a");
            anchor.href = face_id;

            // Create the img element
            const img = document.createElement("img");
            img.src =
                "data:image/jpeg;base64,"+photo;

            // Append the img to the anchor
            anchor.appendChild(img);

            // Append the anchor to the new div
            newDiv.appendChild(anchor);

            // Append the new div to an existing parent container
            document.getElementById("face_matchs").appendChild(newDiv);
        }
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\surveillance\resources\views/attendance/monitor_attendee.blade.php ENDPATH**/ ?>