@extends('layouts.app')
@section('content')
<div class="container my-5">
    <div class="card p-4">
        <h1 class="card-title mt-2">
            <i class="fa-solid fa-comment-smile"></i> Comentários da Base de Dados / Live

        </h1>
        <div class="text-muted px-4">
            <span>ID Vídeo: {{ $video_id }}</span>
        </div>
        <div class="d-flex justify-content-between align-items-start px-0 mt-2">
            <div class="ms-2 me-auto"><b>Comentário</b></div>


                <span class="me-4"><b>BD&nbsp;&nbsp;&nbsp;</b></span>
                <span class="me-4"><b>Data/Hora</b></span>
            </div>
        </div>
        <ol class="list-group list-group-numbered" id="comments"></ol>

    </div>
    <div class="card-footer bg-transparent">
        <small><b>Atualizando em: <span id="timer" class="text-danger"></span></b></small>
    </div>
</div>

@push('scripts')
    <script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

        <script type="text/javascript">
            const token = "{{ $token }}";
            const videoId = "{{ $video_id }}"
            const duration = 10;

            $(document).ready(function() {

                display = document.querySelector('#timer');

                startTimer(duration, display);
                getComments()
                setInterval(() => {
                    startTimer(duration, display);
                    getComments()
                }, 10000);

            });

            function startTimer(duration, display) {
                var timer = duration, minutes, seconds;
                setInterval(function () {
                    minutes = parseInt(timer / 60, 10);
                    seconds = parseInt(timer % 60, 10);
                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;
                    display.textContent = minutes + ":" + seconds;
                    if (--timer < 0) {
                        timer = duration;
                    }
                }, 1000);
            }


            function getComments() {
                $.ajax({
                    url: `{{ url('/comments/facebook?video_id=') }}${videoId}`,
                    type: "get",
                    success: function(response) {
                        let comments = response
                        // console.log(comments, ' ---> resposta da base')
                        if (comments.length > 0) {
                            let html = ''
                            comments.forEach(item => {
                                html += `
                                <div class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        ${item.name ? '<b>'+item.name + ':</b>': ''} ${item.message}
                                    </div>
                                    <span class="badge bg-danger rounded-pill me-2">
                                        <a class="text-white" id="${item.id}" href="javascript:deleteComment('${item.id}')">
                                            Apagar
                                        </a>
                                    </span>
                                    <span class="badge bg-primary rounded-pill ">
                                        <small>${moment(item.created_at).format('DD/MM/YYYY HH:mm:ss')}</small>
                                    </span>
                                </div>`
                            });
                            document.getElementById('comments').innerHTML = html
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }
                });
            }

            function deleteComment(id) {

                const btn = document.getElementById(`${id}`)
                let html = `<div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>`
                btn.innerHTML = html

                if (confirm("Realmente deseja apagar este comentário do banco de dados\n Esta ação não poderá ser revertida. ?")) {
                    $.ajax({
                        url: "{{ url('/comment') }}/" + id,
                        type: "delete",
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' Resposta AJAX')
                            location.reload()
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error(textStatus, errorThrown);
                        }
                    });
                }
            }
        </script>
    @endpush
@endsection