@extends('layouts.app')
<style>
    .comentarios {
        height: 600px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .gestor {
        height: 200px;
        overflow: auto;
    }

    .text-primary.px-0 {
    margin: 0 5px;
    }
    .list-group-item.d-flex.justify-content-between.align-items-start {
    padding-left: 5px;
}
</style>

@section('content')
    @if (session('error'))
        <div class="container my-5">
            <div class="px-4 my-2">
                <div class="mr-4 alert alert-danger" role="alert">
                    {{ session('error') }}
                </div>
            </div>
        </div>
    @endif

    <main>
        <div class="container my-5">
            <div class="row">

                <div class="col-md-4">
                    <div class="row">
                        <div class="row">
                            <div class="col bg-light border rounded-3">
                                <div class="px-3 mb-3" id="produto"></div>
                            </div>
                        </div>
                        <div class="row mt-3 ">
                            <div class="col bg-light border rounded-3 pb-3">
                                <h4 class="px-4 mt-4">Comentários do Gestor </h5>
                                    <div class="list-group" id="gestor"></div>
                            </div>
                        </div>
                        <div class="row mt-3 ">
                        <div class="col bg-light border rounded-3 mt-3">
                            <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
                            <div
                                class="fb-video px-4 my-4"
                                data-href="https://www.facebook.com/video.php?v={{ $live['video']['id'] }}"
                                data-width="300"
                                data-height="300"
                                data-allowfullscreen="true"></div>
                        </div>
                        </div>
                    </div>
                   
                </div>
                <div class="col-md-8">
                    <div class="bg-light border rounded-3">
                        <div class="d-flex justify-content-between align-items-end">
                            <span class="px-0 ms-0 me-auto"><h4 class="px-4 mt-4 ms-2 me-auto">Comentários ao Vídeo <br/> 
                                <h6  class="px-4 mt-4 ms-2 me-auto">Video ID: {{ $video_id }}</h6>
                            </h4></span>
                            
                            <span class="ms-auto me-4"><b>Print &nbsp;</b></span>
                            <span class="me-4"><b>RS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></span>
                            <span class="me-4"><b>Data / Hora</b>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        </div>

                        <div class="list-group" id="comentarios"></div>
                    </div>

                </div>
            </div>

        </div>
    </main>

    <div class="px-4 mb-4">
        <small><b>Atualizando em: <span id="timer" class="text-danger"></span></b></small>
    </div>

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

        <script type="text/javascript">
            var token = "{{ $token }}";
            var video_id = "{{ $video_id }}";
            var page = 1;
            var totalPage = 0;
            var perPage = 20;
            var comments = []
            const url = "{{ url('/') }}";
            const duration = 10;
            display = document.querySelector('#timer');

             async function refresh() {
               
                
                await getComentarios();
                await getProdutos();
                await comentarioGestor(); 
                
            }
            
            $(document).ready(async function () {

                await refresh()
                await startTimer(duration, display);
                setInterval(async () => {
                    await refresh()
                    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 getProdutos() {
                $.ajax({
                    url: "{{ url('/api/product') }}",
                    type: "get",
                    success: function(response) {
                       console.log(response, 'produtos');
                       let itens = response.variancia || []
                       var html = '<h4 class="py-4">Descrição de Produto</h4>';
                        if (response.reference) {
                            html += `<div><b>SKU: </b>${response.reference}</div>`
                        }
                        if (response.reference_sale) {
                            html += `<div><b>Referência:</b> ${response.reference_sale}</div>`
                        }
                        if (response.description) {
                            html += `<div><b>Descrição: </b>${response.description}</div>`
                        }

                        html += `<div class="mb-0 mt-0">`
                        const artigo = itens.filter(el => el.artigo).length ? true : false;
                        const size = itens.filter(el => el.size).length ? true : false;
                        const color = itens.filter(el => el.color).length ? true : false;
                        const material = itens.filter(el => el.material).length ? true : false;
                        const stock = itens.filter(el => el.stock).length ? true : false;
                        const sale = itens.filter(el => el.sale).length ? true : false;
                        itens.map(async (el, i) => {
                            if (i === 0) {
                                html += `<div>`
                                if (artigo) {
                                    html += `<b>Artigo</b>`
                                    if (size || color || material || stock || sale) {
                                        html += ` | `
                                    }
                                }
                                if (size) {
                                    html += `<b>Size</b>`
                                    if (color || color || material || stock || sale) {
                                        html += ` | `
                                    }
                                }
                                if (color) {
                                    html += `<b>Color</b>`
                                    if (material || stock || sale) {
                                        html += ` | `
                                    }
                                }
                                if (material) {
                                    html += `<b>Material</b>`
                                    if (stock || sale) {
                                        html += ` | `
                                    }
                                }

                                if (stock) {
                                    html += `<b>Stock</b>`
                                    if (sale) {
                                        html += ` | `
                                    }
                                }

                                if (sale) {
                                    html += `<b>Sale</b>`
                                }

                                html += `</div>`
                            }
                            html += `<li>`
                            if (el.artigo) {
                                html += `${el.artigo}`
                                if (el.size || el.color || el.material || el.stock || el.sale) {
                                    html += ` | `
                                }
                            }
                            if (el.size) {
                                html += `${el.size}`
                                if (el.color || el.material || el.stock || el.sale) {
                                    html += ` | `
                                }
                            }
                            if (el.color) {
                                html += `${el.color}`
                                if (el.material || el.stock || el.sale) {
                                    html += ` | `
                                }
                            }
                            if (el.material) {
                                html += `${el.material}`
                                if (el.stock || el.sale) {
                                    html += ` | `
                                }
                            }
                            if (el.stock) {
                                html += `${el.stock}`
                                if (el.sale) {
                                    html += ` | `
                                }
                            }
                            if (el.sale) {
                                html += `${el.sale}`
                            }
                            html += `</li>`
                        })

                        html += `</div>`


                        if (response.cava) {
                            html += `<div class="mt-1"><b>Cava: </b> ${response.cava} ${response?.cava_symbol || ''} </div>`
                        }
                        if (response.price) {
                            html += `<div><b>Preço: </b> ${response.price} ${response?.currency_symbol || ''}</div>`
                        }

                        document.getElementById('produto').innerHTML = html

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

            function getComentarios() {
                 console.log('getComentarios', video_id)

                $.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) {
                        comments = response.data.comments.data
                        console.log('comentarios ---> ', comments.length);
                        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
                            })
                        }


                        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]);
                                    }
                                }
                            }
                            console.log('count ', count)

                            let html = ''
                            result.forEach(item => {
                                html += `<div class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                    <span class="text-primary px-0"><i class="fa-brands fa-facebook"></i></span> <b>${item.from ? item.from.name : ''}:</b> ${item.message}
                                </div>

                                <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>
                                <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 me-2 ">
                                    <small>${moment.utc(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 changePerPage() {

                perPage = document.getElementById("perpage").value
                console.log(' por pagina ', perPage)

                
                
                nextPage(1)
                const mySelect = document.querySelector('#perpage');
                mySelect.value = perPage
            }

            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-2 me-auto">
                            <span class="text-primary px-0"><i class="fa-brands fa-facebook"></i></span>
                            <b>${item.from ? item.from.name : ''}:</b> ${item.message}
                        </div>

                        <span class="badge bg-secondary rounded-pill me-2">
                            <a class="text-white" href="${url}/export-comment/pdf/${item.id}/${token}" target="_blank">
                                <i class="fa-solid fa-print"></i>
                            </a>
                        </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 me-2 ">
                            <small>${moment.utc(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 comentarioGestor() {
                $.ajax({
                    url: `{{ url('/api/manager-comments') }}`,
                    type: "get",
                    success: function(response) {
                        let _comments = response
                        console.log(`{{ url('/api/manager-comments') }}`, ' ---> URL')
                        console.log(_comments, ' ---> resposta Gestor')
                        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.comment}
                                </div>

                                <span class="badge bg-primary rounded-pill ">
                                    <small>${moment(item.created_at).format('DD/MM/YYYY HH:mm:ss')}</small>
                                </span>
                            </div>`
                            });
                            document.getElementById('gestor').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 deletar 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);
                        }
                    });
                }
            }
        </script>
    @endpush
@endsection