@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')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('UI/sentiments/theme-assets/css/core/colors/palette-gradient.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-facebook-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">


                        </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('linkedin_selected_fullimg')+");margin-right: 1em'><div class='time'>\n" +
                "                        <div class='date'> <i class=\"fa fa-linkedin-square fa-2x\" style=\";color:#fff;float: left;margin-top: -0.1em;border-radius: 0.1em;margin-left: 0.2em\"></i> "+localStorage.getItem('linkedin_page_name')+" -  <small id=\"sel_date\" ><i class=\"fa fa-world\"></i> "+localStorage.getItem('linkedin_selected_date')+"</small></div>\n" +
                "                    </div>");

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

            console.log(localStorage.getItem('linkedin_selected_postid').toString());

//    Consume the comments API
            var mydata = {
                'access_token': localStorage.getItem('linkedin_access_token').toString(),
                'post_urn': localStorage.getItem('linkedin_selected_postid').toString()
            };

            var url = 'https://social.snwolley.com/linkedin-api/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('lk_pos',data.count.Positive);
                    }
                    else{
                        $('#pos').append('0%');
                        localStorage.setItem('lk_pos','0');
                    }

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


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



                    $.each(data.data, 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="'+item.reply_profile_pic+'" alt=""></div>\n' +
                            '\n' +
                            '                                        <div class="comment-box">\n' +
                            '                                            <div class="comment-head">\n' +
                            '                                                <h6 class="comment-name">'+item.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="'+item.reply_profile_pic+'" alt=""></div>\n' +
                                '\n' +
                                '                                        <div class="comment-box">\n' +
                                '                                            <div class="comment-head">\n' +
                                '                                                <h6 class="comment-name">'+item.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="'+item.reply_profile_pic+'" alt=""></div>\n' +
                                '\n' +
                                '                                        <div class="comment-box">\n' +
                                '                                            <div class="comment-head">\n' +
                                '                                                <h6 class="comment-name">'+item.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="'+item.reply_profile_pic+'" alt=""></div>\n' +
                                '\n' +
                                '                                        <div class="comment-box">\n' +
                                '                                            <div class="comment-head">\n' +
                                '                                                <h6 class="comment-name">'+item.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('lk_pos'), localStorage.getItem('lk_neg'), localStorage.getItem('lk_neu')],
                            backgroundColor: [
                                "#0d47a1",
                                "#CC0000",
                                "#FF8800",
                            ]
                        }]
                };

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

            });

        });

    </script>
@endpush