@extends('layouts.app')
@section('content')
    <div class="card">
        <div class="card-header bg-transparent">
            <h1 class="mt-4 text-secondary"><b>Comentários da Live </b></h1>
            <div class="text-muted" id="video_id">
            </div>
            <span class="d-flex justify-content-end align-items-end">
                <button class="btn btn-danger me-2" onclick="exportA4()"><i class="fa-solid fa-file-pdf"></i> Exportar para A4</button>
                <button class="btn btn-success me-2" onclick="exportExcel()"><i class="fa-solid fa-file-excel"></i> Exportar para Excel</button>
                <button class="btn btn-danger" onclick="exportPdf()"><i class="fa-solid fa-file-pdf"></i> Exportar para ET</button>
            </span>
        </div>
        <div class="card-body">
            <div class=" d-flex justify-content-between align-items-start px-0 ">
            <div class="ms-0"><b>Rede Social</b></div>
                    <span class="ms-4 me-auto"><b>Comentário</b></span>
                    <span class="me-4"><b>Print</b></span>
                    <span class="me-4"><b>BL&nbsp;&nbsp;</b></span>
                    <span class="me-4"><b>RS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></span>
                    <span class="me-4"><b>Data/Hora</b></span>
                </div>
            </div>
            <ol class="list-group list-group-numbered" id="comentarios">
            </ol>

        </div>
        <div class="card-footer bg-transparent">
            <small class="px-4">
                <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 video_id = "{{ $video_id }}";
        const duration = 10;
        var comments = [];
        var page = 1;
        var totalPage = 0;
        var perPage = 20;
        const url = "{{ url('/') }}";
        display = document.querySelector('#timer');

        $(document).ready(async function() {
            await getComentarios()
            await startTimer(duration, display);
            setInterval( async () => {
                await getComentarios()
                await startTimer(duration, display);
            }, 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 exportExcel() {
           window.open("{{ url('/export-comments/excel/'.$video_id.'/'. $token.'/facebook') }}", 'blank')
        }

        function exportA4() {
            window.open("{{ url('/export-comments/pdf-a4/'.$video_id.'/'. $token.'/facebook') }}", 'blank')
        }

        function exportPdf(etiqueta) {

            window.open("{{ url('/export-comments/pdf/'.$video_id.'/'. $token.'/facebook') }}", 'blank')

        }

        function getComentarios() {
            const url = "{{ url('/') }}";
            $.ajax({
                //url: `https://graph.facebook.com/v13.0/${video_id}/comments?access_token=${token}`,
                url: "{{ url('/facebook-comments') }}/"+ video_id + '/'+ token +'/',
                type: "get",
                success: function(response) {
                    if (!response.data?.comments) {
                        console.log('nenhum comentário encontrado.');
                        return
                    }
                    let video = response.data?.video || null
                     //console.log(video, 'video')
                    document.getElementById('video_id').innerHTML = `
                    <span>ID Vídeo: ${video_id}</span>
                    <span class="d-flex justify-content-end mb-2">

                    </span>
                `;
                    comments = response.data.comments.data
                    if (comments.length > 0) {
                        comments = comments.sort((a, b) => {
                            if (a.created_time > b.created_time) {
                                return -1
                            }
                            if (a.created_time < b.created_time) {
                                return 1
                            }
                            return 0
                        })
                    }
                    // console.log(comments, ' ---> resposta')
                    if (comments.length > 0) {

                        let result = [];
                        totalPage = Math.ceil( comments.length / perPage );
                        let count = ( page * perPage ) - perPage;
                        let delimiter = count + perPage;

                        if(page <= totalPage){
                            for (let i = count; i < delimiter; i++){
                                if (comments[i] != null){
                                    result.push(comments[i]);
                                }
                            }
                        }   


                        let html = ''
                        comments.forEach(item => {
                            html += `<div class="list-group-item d-flex justify-content-between align-items-start">
                            <div class="ms-4 ">
                            <i class="fa-brands fa-facebook text-primary me-3"></i>
                        </div>
                        <span  class="ms-2 ps-5 me-auto"> <b>${item.from ? item.from.name : ''}:</b> ${item.message}</span>
                        <span class="badge bg-secondary rounded-pill me-2">
                            <a class="text-white" href="${url}/export-comment/pdf/${item.id}/${token}/facebook" target="_blank">
                                <i class="fa-solid fa-print"></i>
                            </a>
                        </span>
                        ${item.from ?
                        `<span class="badge bg-dark rounded-pill me-2">
                            <a class="text-white" href="javascript:blackList('${item.from.name}')" target="_blank">
                                <i class="fa-solid fa-user-slash"></i>
                            </a>
                        </span>` :
                        `<span class="badge bg-ligth rounded-pill me-2">
                            <span class="text-white" href="#">
                                <i class="fa-solid fa-user-slash"></i>
                            </span>
                        </span>`
                        }
                        <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_time).format('DD/MM/YYYY HH:mm:ss')}</small>
                        </span>
                    </div>
                        `
                        });



                        html += `
                                <div class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        <label>Registo por página</label>
                                        <select id="perpage" class="form-control" onchange="changePerPage()">
                                            <option value="20" ${ (perPage == 20) ? 'selected': ''}>20</option>
                                            <option value="40" ${ (perPage == 40) ? 'selected': ''}>40</option>
                                            <option value="80" ${ (perPage == 80) ? 'selected': ''}>80</option>
                                            <option value="100" ${ (perPage == 100) ? 'selected': ''}>100</option>
                                        </select>
                                    </div>

                            `;
                            if (page <= totalPage) {
                                html += `
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item">
                                            <a class="page-link" href="javascript:nextPage(${page === totalPage ? 1 : page - 1})" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">Voltar</span>
                                            </a>
                                            </li>
                                            `

                                                for (let i = 1; i <= totalPage; i++) {
                                                    html += `<li class="page-item"><a class="page-link" href="javascript:nextPage(${i})">${i}</a></li>`
                                                }

                                            `
                                            <li class="page-item">
                                            <a class="page-link" href="javascript:nextPage(${page + 1})" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">Proximo</span>
                                            </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                                `
                            }
                        document.getElementById('comentarios').innerHTML = html

                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        }


        function nextPage(value) {

            console.log(page, ' <--- antes pagina')
            if (value) {
                page = parseInt(value)
            } else {
                page = 1
            }
            console.log(page, ' <--- depois pagina')
            if (comments.length > 0) {

                let result = [];
                totalPage = Math.ceil( comments.length / perPage );
                let count = ( page * perPage ) - perPage;
                let delimiter = count + perPage;

                if (page <= totalPage){

                    for (let i = count; i < delimiter; i++){
                        if (comments[i] != null){
                            result.push(comments[i]);
                        }
                    }
                }


                let html = ''
                result.forEach(item => {
                    html += `<div class="list-group-item d-flex justify-content-between align-items-start">
                    <div class="ms-4 ">
                            <i class="fa-brands fa-facebook text-primary me-3"></i>
                        </div>
                        <span  class="ms-2 ps-5 me-auto"> <b>${item.from ? item.from.name : ''}:</b> ${item.message}</span>
                         
                        <span class="badge bg-secondary rounded-pill me-2">
                            <a class="text-white" href="${url}/export-comment/pdf/${item.id}/${token}/facebook" target="_blank">
                                <i class="fa-solid fa-print"></i>
                            </a>
                        </span>
                        ${item.from ?
                        `<span class="badge bg-dark rounded-pill me-2">
                            <a class="text-white" href="javascript:blackList('${item.from.name}')" target="_blank">
                                <i class="fa-solid fa-user-slash"></i>
                            </a>
                        </span>` :
                        `<span class="badge bg-ligth rounded-pill me-2">
                            <span class="text-white" href="#">
                                <i class="fa-solid fa-user-slash"></i>
                            </span>
                        </span>`
                        }
                        <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_time).format('DD/MM/YYYY HH:mm:ss')}</small>
                        </span>
                    </div>
                        `
                });
                html += `
                    <div class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto">
                            <label>Registo por página</label>
                            <select id="perpage" class="form-control" onchange="changePerPage()">
                                <option value="20">20</option>
                                <option value="40">40</option>
                                <option value="80">80</option>
                                <option value="100">100</option>
                            </select>
                        </div>

                `;
                if (page <= totalPage) {
                    html += `
                            <nav aria-label="Page navigation example mt-3">
                                <ul class="pagination">
                                    <li class="page-item">
                                    <a class="page-link" href="javascript:nextPage(${page === totalPage ? 1 : page - 1})" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Voltar</span>
                                    </a>
                                    </li>
                                    `
                                        for (let i = 1; i <= totalPage; i++) {
                                            html += `<li class="page-item"><a class="page-link" href="javascript:nextPage(${i})">${i}</a></li>`
                                        }
                                    `
                                    <li class="page-item">
                                    <a class="page-link" href="javascript:nextPage(${page + 1})" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Proximo</span>
                                    </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    `
                }
                document.getElementById('comentarios').innerHTML = html
                
                }

            }
            function changePerPage() {

            perPage = document.getElementById("perpage").value;
            // console.log(' por pagina ', perPage)
            nextPage(1);
            const mySelect = document.querySelector('#perpage');
            mySelect.value = perPage
            }

        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 eliminar este comentário da rede social ?")) {
                $.ajax({
                    //url: "https://graph.facebook.com/v14.0/" + id + "?access_token=" + token,
                    url: "{{ url('/comment-facebook') }}/" + id + "/" + token,
                    type: "delete",
                    datatype: "json",
                    success: function(response) {
                        console.log(response, ' Resposta AJAX')
                        location.reload()
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error(textStatus, errorThrown);
                    }
                });
            }
        }
        async function blackList(userId = null){
            let pageID = null;
            if (userId) {
                if (confirm("Realmente deseja Bloquear este usuário do Facebook ?")) {
                    await $.ajax({
                        url: "https://graph.facebook.com/v14.0/" + userId + "/me?access_token=" + token,
                        type: "get",
                        datatype: "json",
                        success: function(response) {
                            console.log(response, ' ME')
                            pageID = response.id
                            $.ajax({
                                url: "https://graph.facebook.com/v14.0/" + pageID + "/blocked?access_token=" + token,
                                type: "post",
                                data: {
                                    user: pageID
                                },
                                datatype: "json",
                                success: function(resp) {
                                    console.log(resp, ' resp Block')
                                    location.reload()
                                },
                                error: function(jqXHR, textStatus, errorThrown) {
                                    console.error(textStatus, errorThrown);
                                }
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error(textStatus, errorThrown);
                        }
                    });
                }
            } else {
                alert("Este usuário não pode ser bloqueado pois o facebook, não informou seu user_id!!")
            }
        }

        function deletedb(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 deletar este comentário da base de dados ?")) {
                $.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