@extends('app')
@section('page_title') Sentiment Analysis @stop
@push('styles')
    <link rel="stylesheet" type="text/css" href="{{asset('NewUI/dashboard/assets/css/sentiment_fb.css')}}">
@endpush


<div class='container-fluid' style="margin-top: 4em">
    <div class='blog-posts'>
        <div class='post featured' style="height: 11em;overflow-y: scroll">
            <div id="mainhead">

{{--                <div id="sel_img" class='image' style=' margin-right: 1em'>--}}
{{--                    <div class='time'>--}}
{{--                        <div class='date'> <i class="fa fa-faceb9 ook-square fa-2x" style=";color:#fff;float: left;margin-top: -0.1em;border-radius: 0.1em;margin-left: 0.2em"></i> Npontu Technologies Ltd -  <small id="sel_date" ><i class="fa fa-world"></i> 3 Days Ago</small></div>--}}
{{--                    </div>--}}
{{--                </div>--}}

            </div>

            <div style="padding: 2em;" id="sel_caption">
{{--                <p style="color: #212121;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas illo tempore at eveniet adipisci harum error deserunt in sint aspernatur magni asperiores explicabo corporis ratione praesentium illum magnam esse ipsa dignissimos quaerat perferendis dolor vero? Maiores hic modi optio eaque...</p>--}}
            </div>

            <div class="col-lg-3">
                <div class="card">
                    <h4 style="font-family: Raleway">Positive <font id="pos" style="font-family: Roboto"></font></h4>
                    <div class="progress">
                        <div id="pos_sub" data-percentage="0%" style="background-color: #0d47a1" class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p>Sentiments</p>
                </div>

            </div>

            <div class="col-lg-3">
                <div class="card">
                    <h4 style="font-family: Raleway">Negative <font id="neg" style="font-family: Roboto"></font></h4>
                    <div class="progress">
                        <div id="neg_sub" data-percentage="0%" style="background-color: #CC0000" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p> Sentiments</p>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="card">
                    <h4 style="font-family: Raleway">Neutral <font id="neu" style="font-family: Roboto"></font></h4>
                    <div class="progress">
                        <div id="neu_sub" data-percentage="0%" style="background-color: #FF8800" class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <p>Sentiments</p>
                </div>

            </div>
            <br>


        </div>

    </div>

<br>
    <p style="font-size: 1.4em" align="middle">Analysed Comments on Posts</p>
    <hr>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <canvas id="oilChart"></canvas>
            </div>
        </div>

    </div>

    <div class="col-lg-8">

        <div id="exTab1" class="container">
            <ul  class="nav nav-pills">
                <li class="active">
                    <a  href="#1a" data-toggle="tab">All</a>
                </li>
                <li><a href="#2a" data-toggle="tab">Positive Sentiments</a>
                </li>
                <li><a href="#3a" data-toggle="tab">Negative Sentiments</a>
                </li>
                <li><a href="#4a" data-toggle="tab">Neutral Sentiments</a>
                </li>
            </ul>
            <hr>
            <div class="tab-content clearfix">
{{--                All--}}
                <div class="tab-pane active" id="1a">

                        <div class="comments-container" style="margin-top: -1em;height: 30em;overflow-y: scroll">
                            <ul class="comments-list" id="1a_all">
{{--                                <li>--}}
{{--                                    <div class="comment-main-level">--}}
{{--                                        <!-- Avatar -->--}}
{{--                                        <div class="comment-avatar"><img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-1/p200x200/62572451_690090351427003_4432513958661849088_n.jpg?_nc_cat=102&_nc_sid=0c64ff&_nc_eui2=AeFZc3hgsw53xNUDN6XP1Ael55tzDJaWD3nnm3MMlpYPeVqsizDf68bm7bqKjPuFDl4Clsdtpkrh7mrbOV4D4Trj&_nc_ohc=D8ijUXmBvMcAX9ch0wu&_nc_ht=scontent-frt3-1.xx&_nc_tp=6&oh=e8cff1e5fca9886424d27915895ad9bf&oe=5EE02F28" alt=""></div>--}}

{{--                                        <div class="comment-box">--}}
{{--                                            <div class="comment-head">--}}
{{--                                                <h6 class="comment-name">Agustin Ortiz</h6>--}}
{{--                                                <span style="margin-top: 0.5em"><span class="badge badge-dark" style="background-color: #0d47a1;padding-left: 1em;padding-right: 1em;margin-right: 1em;color:#fff">Positive</span> Accuracy : 20%</span>--}}
{{--                                                <i class="fa fa-reply"></i>--}}
{{--                                                <i class="fa fa-heart"></i>--}}
{{--                                            </div>--}}
{{--                                            <div class="comment-content">--}}
{{--                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </li>--}}

                            </ul>
                        </div>

                </div>

{{--                Positive--}}
                <div class="tab-pane" id="2a">

                    <div class="comments-container" style="margin-top: -1em;height: 30em;overflow-y: scroll">
                        <ul class="comments-list" id="2a_positive">


                        </ul>
                    </div>

                </div>

{{--                Negative--}}
                <div class="tab-pane" id="3a">

                    <div class="comments-container" style="margin-top: -1em;height: 30em;overflow-y: scroll">
                        <ul  class="comments-list" id="3a_negative">

                        </ul>
                    </div>

                </div>

{{--                Neutral--}}
                <div class="tab-pane" id="4a">

                    <div class="comments-container" style="margin-top: -1em;height: 30em;overflow-y: scroll">
                        <ul class="comments-list" id="4a_neutral">

                        </ul>
                    </div>

                </div>

            </div>
        </div>



    </div>


</div>




@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript" src="{{ asset("NewUI/dashboard/bower_components/chart.js/js/Chart.js") }}"></script>

    <script>
{{--        Arrange header--}}
    $('document').ready(function () {
        // alert('sds');

    $('#mainhead').append("<div id='sel_img' class='image' style='background-image: url("+localStorage.getItem('selected_fullimg')+");margin-right: 1em'><div class='time'>\n" +
        "                        <div class='date'> <i class=\"fa fa-facebook-square fa-2x\" style=\";color:#fff;float: left;margin-top: -0.1em;border-radius: 0.1em;margin-left: 0.2em\"></i> "+localStorage.getItem('page_name')+" -  <small id=\"sel_date\" ><i class=\"fa fa-world\"></i> "+localStorage.getItem('selected_date')+"</small></div>\n" +
        "                    </div>");

    $('#sel_caption').append("<p style='color: #212121;'>"+decodeURIComponent(unescape(localStorage.getItem('selected_caption')))+"</p>");

    console.log(localStorage.getItem('selected_postid').toString());
    console.log(localStorage.getItem('selected_page_id').toString());

//    Consume the comments API
    var mydata = {
        'page_access_token': localStorage.getItem('selected_access_token').toString(),
        'post_id': localStorage.getItem('selected_postid').toString()
    };

    var url = 'https://social.snwolley.com/facebook-api/get/comments';


    $.post(url,mydata,function (data) {

        console.log(data);

        //Loop Comments

        if(data.code == 200) {

            //Push Count
            if(data.count.Positive){
                $('#pos').append(data.count.Positive+'%');
                $('#pos_sub').css('width',data.count.Positive+'%');
                localStorage.setItem('pos',data.count.Positive);
            }
            else{
                $('#pos').append('0%');
                localStorage.setItem('pos','0');
            }

            if(data.count.Negative){
                $('#neg').append(data.count.Negative+'%');
                $('#neg_sub').css('width',data.count.Negative+'%');
                localStorage.setItem('neg',data.count.Negative);
            }
            else{
                $('#neg').append('0%');
                localStorage.setItem('neg','0');
            }


            if(data.count.Neutral){
                $('#neu').append(data.count.Neutral+'%');
                $('#neu_sub').css('width',data.count.Neutral+'%');
                localStorage.setItem('neu',data.count.Neutral);
            }
            else{
                $('#neu').append('0%');
                localStorage.setItem('neu','0');
            }



            var got_comments =JSON.parse(data.data);

            console.log(got_comments);

            $.each(got_comments, function (i, item) {

                //Color scheme
                var color;

                if(item.sentiment == 'Positive')
                    color = '#0d47a1';
                else if(item.sentiment == 'Negative')
                    color = '#CC0000';
                else if(item.sentiment == 'Neutral')
                    color = '#FF8800';



                $('#1a_all').append('<li>\n' +
                    '                                    <div class="comment-main-level">\n' +
                    '                                        <!-- Avatar -->\n' +
                    '                                        <div class="comment-avatar"><img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-1/p200x200/62572451_690090351427003_4432513958661849088_n.jpg?_nc_cat=102&_nc_sid=0c64ff&_nc_eui2=AeFZc3hgsw53xNUDN6XP1Ael55tzDJaWD3nnm3MMlpYPeVqsizDf68bm7bqKjPuFDl4Clsdtpkrh7mrbOV4D4Trj&_nc_ohc=D8ijUXmBvMcAX9ch0wu&_nc_ht=scontent-frt3-1.xx&_nc_tp=6&oh=e8cff1e5fca9886424d27915895ad9bf&oe=5EE02F28" alt=""></div>\n' +
                    '\n' +
                    '                                        <div class="comment-box">\n' +
                    '                                            <div class="comment-head">\n' +
                    '                                                <h6 class="comment-name">'+item.from.name+'</h6>\n' +
                    '                                                <span style="margin-top: 0.5em"><span class="badge badge-dark" style="background-color:'+color+';padding-left: 1em;padding-right: 1em;margin-right: 1em;color:#fff">'+item.sentiment+'</span> Accuracy : '+item.confidence_level+'%</span>\n' +
                    '                                                <i class="fa fa-reply"></i>\n' +
                    '                                                <i class="fa fa-heart"></i>\n' +
                    '                                            </div>\n' +
                    '                                            <div class="comment-content">\n' +
                    '                                                '+item.comment+'\n' +
                    '                                            </div>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </li>');


                if (item.sentiment == 'Positive')


                    $('#2a_positive').append('<li>\n' +
                        '                                    <div class="comment-main-level">\n' +
                        '                                        <!-- Avatar -->\n' +
                        '                                        <div class="comment-avatar"><img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-1/p200x200/62572451_690090351427003_4432513958661849088_n.jpg?_nc_cat=102&_nc_sid=0c64ff&_nc_eui2=AeFZc3hgsw53xNUDN6XP1Ael55tzDJaWD3nnm3MMlpYPeVqsizDf68bm7bqKjPuFDl4Clsdtpkrh7mrbOV4D4Trj&_nc_ohc=D8ijUXmBvMcAX9ch0wu&_nc_ht=scontent-frt3-1.xx&_nc_tp=6&oh=e8cff1e5fca9886424d27915895ad9bf&oe=5EE02F28" alt=""></div>\n' +
                        '\n' +
                        '                                        <div class="comment-box">\n' +
                        '                                            <div class="comment-head">\n' +
                        '                                                <h6 class="comment-name">'+item.from.name+'</h6>\n' +
                        '                                                <span style="margin-top: 0.5em"><span class="badge badge-dark" style="background-color: '+color+';padding-left: 1em;padding-right: 1em;margin-right: 1em;color:#fff">'+item.sentiment+'</span> Accuracy : '+item.confidence_level+'%</span>\n' +
                        '                                                <i class="fa fa-reply"></i>\n' +
                        '                                                <i class="fa fa-heart"></i>\n' +
                        '                                            </div>\n' +
                        '                                            <div class="comment-content">\n' +
                        '                                                '+item.comment+'\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </li>');


                else if (item.sentiment == 'Negative')

                    $('#3a_negative').append('<li>\n' +
                        '                                    <div class="comment-main-level">\n' +
                        '                                        <!-- Avatar -->\n' +
                        '                                        <div class="comment-avatar"><img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-1/p200x200/62572451_690090351427003_4432513958661849088_n.jpg?_nc_cat=102&_nc_sid=0c64ff&_nc_eui2=AeFZc3hgsw53xNUDN6XP1Ael55tzDJaWD3nnm3MMlpYPeVqsizDf68bm7bqKjPuFDl4Clsdtpkrh7mrbOV4D4Trj&_nc_ohc=D8ijUXmBvMcAX9ch0wu&_nc_ht=scontent-frt3-1.xx&_nc_tp=6&oh=e8cff1e5fca9886424d27915895ad9bf&oe=5EE02F28" alt=""></div>\n' +
                        '\n' +
                        '                                        <div class="comment-box">\n' +
                        '                                            <div class="comment-head">\n' +
                        '                                                <h6 class="comment-name">'+item.from.name+'</h6>\n' +
                        '                                                <span style="margin-top: 0.5em"><span class="badge badge-dark" style="background-color: '+color+';padding-left: 1em;padding-right: 1em;margin-right: 1em;color:#fff">'+item.sentiment+'</span> Accuracy : '+item.confidence_level+'%</span>\n' +
                        '                                                <i class="fa fa-reply"></i>\n' +
                        '                                                <i class="fa fa-heart"></i>\n' +
                        '                                            </div>\n' +
                        '                                            <div class="comment-content">\n' +
                        '                                                '+item.comment+'\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </li>');


                else if (item.sentiment == 'Neutral')

                    $('#4a_neutral').append('<li>\n' +
                        '                                    <div class="comment-main-level">\n' +
                        '                                        <!-- Avatar -->\n' +
                        '                                        <div class="comment-avatar"><img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-1/p200x200/62572451_690090351427003_4432513958661849088_n.jpg?_nc_cat=102&_nc_sid=0c64ff&_nc_eui2=AeFZc3hgsw53xNUDN6XP1Ael55tzDJaWD3nnm3MMlpYPeVqsizDf68bm7bqKjPuFDl4Clsdtpkrh7mrbOV4D4Trj&_nc_ohc=D8ijUXmBvMcAX9ch0wu&_nc_ht=scontent-frt3-1.xx&_nc_tp=6&oh=e8cff1e5fca9886424d27915895ad9bf&oe=5EE02F28" alt=""></div>\n' +
                        '\n' +
                        '                                        <div class="comment-box">\n' +
                        '                                            <div class="comment-head">\n' +
                        '                                                <h6 class="comment-name">'+item.from.name+'</h6>\n' +
                        '                                                <span style="margin-top: 0.5em"><span class="badge badge-dark" style="background-color: '+color+';padding-left: 1em;padding-right: 1em;margin-right: 1em;color:#fff">'+item.sentiment+'</span> Accuracy : '+item.confidence_level+'%</span>\n' +
                        '                                                <i class="fa fa-reply"></i>\n' +
                        '                                                <i class="fa fa-heart"></i>\n' +
                        '                                            </div>\n' +
                        '                                            <div class="comment-content">\n' +
                        '                                                '+item.comment+'\n' +
                        '                                            </div>\n' +
                        '                                        </div>\n' +
                        '                                    </div>\n' +
                        '                                </li>');
            });
        }

    else{

            $('#1a_all').append('<p align="middle">There are no comments under this post yet</p>');
            $('#2a_positive').append('<p align="middle">There are no comments under this post yet</p>');
            $('#3a_negative').append('<p align="middle">There are no comments under this post yet</p>');
            $('#4a_neutral').append('<p align="middle">There are no comments under this post yet</p>');
        }





//    Pie Chart
        var my_sentiments = document.getElementById("oilChart");

        // Chart.defaults.global.defaultFontFamily = "Lato";
        // Chart.defaults.global.defaultFontSize = 18;

        var oilData = {
            labels: [
                "Positive",
                "Negative",
                "Neutral",
            ],
            datasets: [
                {
                    data: [localStorage.getItem('pos'), localStorage.getItem('neg'), localStorage.getItem('neu')],
                    backgroundColor: [
                        "#0d47a1",
                        "#CC0000",
                        "#FF8800",
                    ]
                }]
        };

        var pieChart = new Chart(my_sentiments, {
            type: 'pie',
            data: oilData
        });

});

});

    </script>


@endpush