@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" href="{{asset('NewUI/dashboard/assets/css/twitter.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'>
            <div id="mainhead">
{{--            <div class='image' style='background-image: url("https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-9/c22.0.720.720a/p720x720/95943672_929415610827808_7139350537857662976_o.jpg?_nc_cat=106&_nc_sid=b386c4&_nc_eui2=AeHib4hmwMyyraRJ_gbc58qvXmBuek6sYgBeYG56TqxiABUvxTiIVkc1a_0_5brA8D7wB5LXBg6SebSsFGFtq82P&_nc_ohc=5T6AUR9IoL4AX_VRBKi&_nc_ht=scontent-frt3-1.xx&oh=c1010da88f9788a29581cc8044023d15&oe=5EDD4273"); margin-right: 1em'>--}}
{{--                <div class='time' style="background-color: #2196f3">--}}
{{--                    <div class='date'> <i class="fa fa-twitter fa-2x" style=";color:#fff;float: left;margin-top: -0.1em;border-radius: 0.1em;margin-left: 0.2em"></i> Npontu Technologies Ltd -  <small><i class="fa fa-world"></i> 3 Days Ago</small></div>--}}
{{--                    --}}{{--                        <div class='month'>APR</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>


        </div>

    </div>

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

    <div class="row">

        <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" style="height: 25em; overflow-y: scroll">

                        <div id="1a_all">

                        </div>

                    </div>


                    {{--                Positive--}}
                    <div class="tab-pane" id="2a" style="height: 25em; overflow-y: scroll">

                        <div id="2a_positive">


                        </div>

                    </div>

                    {{--                Negative--}}
                    <div class="tab-pane" id="3a" style="height: 25em; overflow-y: scroll">

                        <div id="3a_negative">


                        </div>
                    </div>

                    {{--                Neutral--}}
                    <div class="tab-pane" id="4a" style="height: 25em; overflow-y: scroll">

                        <div id="4a_neutral">


                        </div>

                    </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>
        $('document').ready(function () {

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

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



            //    Consume the comments API
            var mydata = {
                'in_reply_to_user_id': localStorage.getItem('twitter_selected_postid').toString(),
            };

            var url = 'https://social.snwolley.com/twitter-api/get/mentions';


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

                console.log(data);


                if(data.code == 200) {
                    //Push Count

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

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


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


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

                        var comment_date = moment(item.created_at, "YYYYMMDD").fromNow();

                        //Color scheme
                        var color;

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


                        if(item.tweet_type === 'photo'){
                            $('#some_img').append('<img src="'+tweet_image+'" style="width: 100%;border-radius: 0.4em">')
                        }


                        $('#1a_all').append('    <div class="panel panel-default">\n' +
                            '                            <div class="panel-body row">\n' +
                            '                                <div class="row">\n' +
                            '                                    <div class="col-xs-2">\n' +
                            '                                        <img id="logo" src="'+item.reply_user_profile+'" style="border-radius: 2em">\n' +
                            '                                    </div>\n' +
                            '                                    <div class="col-xs-10">\n' +
                            '                                        <div class="row">\n' +
                            '                                            <p id="title" style="margin-top: 1em;margin-left: -3em">\n' +
                            '                                                '+item.reply_screen_name+' <span class="inTitle">@'+item.reply_screen_name+' &middot; '+comment_date+' <i class="fa fa-twitter fa-lg" style="padding-top: 0.5em;color:#0099CC"></i>\n' +
                            '                                    <span style="float: right;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' +
                            '                                    </span>\n' +
                            '                                            </p>\n' +
                            '                                        </div>\n' +
                            '                                    </div>\n' +
                            '                                </div>\n' +
                            '                                <div class="row body-card">\n' +
                            '                                    <div class="col-lg-12">\n' +
                            '                                       <p>'+item.comment+'</p>\n' +
                            '                                    </div>\n' +
                            '\n' +
                            '                                    <div class="col-lg-12" id="some_img">\n'+

                            '                                    </div>\n' +
                            '\n' +
                            '                                </div>\n' +
                            '                            </div>\n' +
                            '                            <br>\n' +
                            '                            <div class="panel-footer">\n' +
                            '                                <p><i class="fa fa-reply" aria-hidden="true"></i></p>\n' +
                            '                                <p><i class="fa fa-retweet" aria-hidden="true"></i> 3</p>\n' +
                            '                                <p><i class="fa fa-heart" aria-hidden="true"></i> 4</p>\n' +
                            '                                <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '\n' +
                            '                    </div>');





                        if (item.sentiment === 'Positive'){

                            $('#2a_positive').append('    <div class="panel panel-default">\n' +
                                '                            <div class="panel-body row">\n' +
                                '                                <div class="row">\n' +
                                '                                    <div class="col-xs-2">\n' +
                                '                                        <img id="logo" src="'+item.reply_user_profile+'" style="border-radius: 2em">\n' +
                                '                                    </div>\n' +
                                '                                    <div class="col-xs-10">\n' +
                                '                                        <div class="row">\n' +
                                '                                            <p id="title" style="margin-top: 1em;margin-left: -3em">\n' +
                                '                                                '+item.reply_screen_name+' <span class="inTitle">@'+item.reply_screen_name+' &middot; 23h <i class="fa fa-twitter fa-lg" style="padding-top: 0.5em;color:#0099CC"></i>\n' +
                                '                                    <span style="float: right;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' +
                                '                                    </span>\n' +
                                '                                            </p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                                <div class="row body-card">\n' +
                                '                                    <div class="col-lg-12">\n' +
                                '                                       <p>'+item.comment+'</p>\n' +
                                '                                    </div>\n' +
                                '\n' +
                                '                                    <div class="col-lg-12" id="some_img">\n'+

                                '                                    </div>\n' +
                                '\n' +
                                '                                </div>\n' +
                                '                            </div>\n' +
                                '                            <br>\n' +
                                '                            <div class="panel-footer">\n' +
                                '                                <p><i class="fa fa-reply" aria-hidden="true"></i></p>\n' +
                                '                                <p><i class="fa fa-retweet" aria-hidden="true"></i> 3</p>\n' +
                                '                                <p><i class="fa fa-heart" aria-hidden="true"></i> 4</p>\n' +
                                '                                <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>\n' +
                                '                            </div>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                    </div>');
                        }

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

                            $('#3a_negative').append('    <div class="panel panel-default">\n' +
                                '                            <div class="panel-body row">\n' +
                                '                                <div class="row">\n' +
                                '                                    <div class="col-xs-2">\n' +
                                '                                        <img id="logo" src="'+item.reply_user_profile+'" style="border-radius: 2em">\n' +
                                '                                    </div>\n' +
                                '                                    <div class="col-xs-10">\n' +
                                '                                        <div class="row">\n' +
                                '                                            <p id="title" style="margin-top: 1em;margin-left: -3em">\n' +
                                '                                                '+item.reply_screen_name+' <span class="inTitle">@'+item.reply_screen_name+' &middot; 23h <i class="fa fa-twitter fa-lg" style="padding-top: 0.5em;color:#0099CC"></i>\n' +
                                '                                    <span style="float: right;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' +
                                '                                    </span>\n' +
                                '                                            </p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                                <div class="row body-card">\n' +
                                '                                    <div class="col-lg-12">\n' +
                                '                                       <p>'+item.comment+'</p>\n' +
                                '                                    </div>\n' +
                                '\n' +
                                '                                    <div class="col-lg-12" id="some_img">\n'+

                                '                                    </div>\n' +
                                '\n' +
                                '                                </div>\n' +
                                '                            </div>\n' +
                                '                            <br>\n' +
                                '                            <div class="panel-footer">\n' +
                                '                                <p><i class="fa fa-reply" aria-hidden="true"></i></p>\n' +
                                '                                <p><i class="fa fa-retweet" aria-hidden="true"></i> 3</p>\n' +
                                '                                <p><i class="fa fa-heart" aria-hidden="true"></i> 4</p>\n' +
                                '                                <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>\n' +
                                '                            </div>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                    </div>');

                        }

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

                            $('#4a_neutral').append('    <div class="panel panel-default">\n' +
                                '                            <div class="panel-body row">\n' +
                                '                                <div class="row">\n' +
                                '                                    <div class="col-xs-2">\n' +
                                '                                        <img id="logo" src="'+item.reply_user_profile+'" style="border-radius: 2em">\n' +
                                '                                    </div>\n' +
                                '                                    <div class="col-xs-10">\n' +
                                '                                        <div class="row">\n' +
                                '                                            <p id="title" style="margin-top: 1em;margin-left: -3em">\n' +
                                '                                                '+item.reply_screen_name+' <span class="inTitle">@'+item.reply_screen_name+' &middot; 23h <i class="fa fa-twitter fa-lg" style="padding-top: 0.5em;color:#0099CC"></i>\n' +
                                '                                    <span style="float: right;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' +
                                '                                    </span>\n' +
                                '                                            </p>\n' +
                                '                                        </div>\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                                <div class="row body-card">\n' +
                                '                                    <div class="col-lg-12">\n' +
                                '                                       <p>'+item.comment+'</p>\n' +
                                '                                    </div>\n' +
                                '\n' +
                                '                                    <div class="col-lg-12" id="some_img">\n'+

                                '                                    </div>\n' +
                                '\n' +
                                '                                </div>\n' +
                                '                            </div>\n' +
                                '                            <br>\n' +
                                '                            <div class="panel-footer">\n' +
                                '                                <p><i class="fa fa-reply" aria-hidden="true"></i></p>\n' +
                                '                                <p><i class="fa fa-retweet" aria-hidden="true"></i> 3</p>\n' +
                                '                                <p><i class="fa fa-heart" aria-hidden="true"></i> 4</p>\n' +
                                '                                <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>\n' +
                                '                            </div>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                    </div>');

                        }




                    })


                }

                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>');
                }




            });

            setTimeout(
                function()
                {
            //    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('tw_pos'), localStorage.getItem('tw_neg'), localStorage.getItem('tw_neu')],
                        backgroundColor: [
                            "#0d47a1",
                            "#CC0000",
                            "#FF8800",
                        ]
                    }]
            };

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


                }, 3000);

        });


    </script>
@endpush