@extends('layouts.master')
@section('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 class="col-md-1"
                        style="margin: 14px;display: grid;align-items: center;background: white;border: 1px  solid;border-radius: 10px;height: 129px;justify-content: center;">

                        <a href="#">

                            <img
                                src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAAUAA8DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDlP2QPiJ4a+Ef7Mun6cmoSx6Z4c0zydTeayDTPJs3YBRQp59VNcN+1Cngr9svwFLqfw5jJ1rQb1YhcXMbJMF3BXUt1ZeeM5PvXXfCH4pWo+Aui6xbeD1Nnqtil9MyuhjubnbtaPyyC2zHbOfet/wAZatZXiyaP4M8HWFq12Ve5u7RNm8rzwc4Oe9fJVq1ShXvA/TMJh6Lwjex8+fsEaOvi/wCDdtrOsajdtPpl3eR2ZSb5Y1XdgbSCO1fTnw/8IaJb/EAaBJA01rpumPJaRzNnYS4THGMjDH8aKK1rJe1ZwwnNYRan/9k=" />
                        </a>

                    </div> --}}

                </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(
            '{{ env('PUSHER_APP_KEY') }}', {
                cluster: '{{ 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>
@endsection