@extends('app')
@push('styles')
    <link rel="stylesheet" href="{{asset('NewUI/dashboard/assets/css/twitter.css')}}">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
@endpush

<br>

<div class="col-md-12">
    <div class="widget widget-shadow text"
         style="background-image: url({{asset('NewUI/dashboard/assets/images/twitter_01.jpg')}}); background-size: cover;background-position:center;height: 20em">
        <br>
        <br>
        <div class="widget-body text-center">
        </div>
        <div class="widget-footer" style="background-color: rgba(0, 0, 0, 0.87)">
            <div class="row no-space" style="margin-top: 9em;padding: 0.5em;height: 4em">
                <p align="center" id="demo" style="font-size: 1.5em;color:#fff">Loading...</p>
            </div>
        </div>
    </div>
</div>


<br>
<br>
<br>
<br>

<div class="container-fluid" style="width:100% !important;margin-top: 1em">


    <div class="container-fluid" style="width:100% !important;margin-top: 4em">


        <div class="row" id="twitter-page">

            {{--            <div class="col-lg-6">--}}

            {{--                <div class="panel panel-default">--}}
            {{--                    <div class="panel-body row">--}}
            {{--                        <div class="row">--}}
            {{--                            <div class="col-xs-2">--}}
            {{--                                <img id="logo" src="https://github.com/taulantspahiu/Bootcards-Examples/blob/master/twitter_card/images/logo.jpg?raw=true">--}}
            {{--                            </div>--}}
            {{--                            <div class="col-xs-10">--}}
            {{--                                <div class="row">--}}
            {{--                                    <p id="title">--}}
            {{--                                        SitePoint <span class="inTitle">@sitepointdotcom &middot; 23h <i class="fa fa-twitter fa-lg" style="float: right;padding-top: 0.5em;color:#0099CC"></i></span>--}}
            {{--                                    </p>--}}
            {{--                                </div>--}}
            {{--                                <div class="row heading">--}}
            {{--                                    <p>Using Android Text-to-Speech to Create a Smart Assistant: </p>--}}
            {{--                                </div>--}}
            {{--                            </div>--}}
            {{--                        </div>--}}
            {{--                        <div class="row body-card">--}}
            {{--                                <img src="https://e0.365dm.com/20/03/2048x1152/skysports-real-madrid-zidane_4945949.jpg" style="width: 100%;border-radius: 1em">--}}
            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                    <br>--}}
            {{--                    <div class="panel-footer">--}}
            {{--                        <p><i class="fa fa-reply" aria-hidden="true"></i></p>--}}
            {{--                        <p><i class="fa fa-retweet" aria-hidden="true"></i> 3</p>--}}
            {{--                        <p><i class="fa fa-heart" aria-hidden="true"></i> 4</p>--}}
            {{--                        <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>--}}
            {{--                    </div>--}}
            {{--                    <button class="btn btn-block btn-primary" style="background-color: #0099CC">See Sentiments</button>--}}
            {{--                </div>--}}


            {{--            </div>--}}


        </div>

    </div>
    <br>
    <br>


    <div id="container-floating" class="wrapper">

        <a href="{{route('social.message.post')}}" tooltip="CREATE POST" flow="left">
            <div class="icon" id="floating-button">
                <p class="plus">+</p>
                <img class="edit"
                     src="http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/bt_compose2_1x.png">
            </div>
        </a>

    </div>


</div>




@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script>
        let td = '{{ !empty($trial) ? \Carbon\Carbon::parse($trial->created_at)->addDays(7) : (!empty($expiry) ? $expiry->expiry_date : date('Y-m-d h:i:s')) }}';

        let countDownDate = new Date(td).getTime();

        let x = setInterval(function () {

            const now = new Date().getTime();

            const distance = countDownDate - now;
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                + minutes + "m " + seconds + "s <br><small style='color:#ffc107;font-size: 0.5em'>until expiration</small>";

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "TRIAL PERIOD EXPIRED";
            }
        }, 1000);
    </script>
    <script>

    $(document).ready(function () {

    // Consume End point for user details
    var twitter_access_token = '{!!  $twitter_accesstoken->twitter_access_token !!}';
    var twitter_token_secret = '{!!  $twitter_access_secret->twitter_token_secret !!}';
    // console.log(twitter_access_token);
    // console.log(twitter_token_secret);

    var mydata = {
    'access_token': twitter_access_token,
    'access_token_secret': twitter_token_secret
    };

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


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

    console.log(data);
    localStorage.setItem('twitter_screen_name', data.screen_name);
    localStorage.setItem('twitter_profile_pic', data.profile_image_url_https);
    localStorage.setItem('twitter_followers_count', data.followers_count);
    });


    setTimeout(
    function () {

    // Consume Posts Endpoint

    var mypostdata = {
    'access_token': twitter_access_token,
    'access_token_secret': twitter_token_secret
    };

    var posturl = 'https://social.snwolley.com/twitter-api/get/recent_tweets';

    //Assign image
    $.post(posturl, mypostdata, function (data) {

    console.log(JSON.parse(data.data));
    $.each(JSON.parse(data.data), function (i, item) {

    //For date
    var post_date = moment(item.created_at, "YYYYMMDD").fromNow();
    // console.log(post_date);
    //For Post image
    var tw_img;
    if (!item.tweet_image)
    tw_img = 'https://www.millenefits.com/wp-content/uploads/2017/06/twitter-background.jpg';
    else
    tw_img = item.tweet_image;


    var content_type;
    if (item.tweet_type === 'video') {
    content_type = '<iframe class="embed-responsive-item" src="' + item.tweet_video + '" frameborder="0" allowfullscreen style="width: 100%;height:auto;border-radius: 0.4em"></iframe>';
    } else {
    content_type = '<img src="' + tw_img + '" style="width: 100%;height:auto;border-radius: 0.4em">';
    }


    var msg = item.tweet;


    $('#twitter-page').append('<div class="col-lg-6"><div class="panel panel-default" style="height: 20em;box-shadow: 0.2px 0.4px 1px rgba(0, 0, 0, 0.54);">\n' +
            '                <div class="panel-body row">\n' +
                '                    <div class="row">\n' +
                    '                        <div class="col-xs-2">\n' +
                        '                            <img style="width: 2.5em;height: 2.5em;margin-top: 1em" id="logo" src="' + localStorage.getItem('twitter_profile_pic') + '">\n' +
                        '                        </div>\n' +
                    '                        <div class="col-xs-10">\n' +
                        '                            <div class="row">\n' +
                            '                                <p id="title" style="margin-top: 1em;margin-left: -1em">\n' +
                                '                                    ' + item.screen_name + ' <span class="inTitle"> @' + item.screen_name + ' &middot; ' + post_date + '<i class="fa fa-twitter fa-lg" style="float: right;padding-top: 0.5em;color:#0099CC"></i>\n' +
                                '                                    </span>\n' +
                                '                                </p>\n' +
                            '                            </div>\n' +
                        '                        </div>\n' +
                    '                    </div>\n' +
                '                    <div class="row body-card">\n' +
                    '                        <div class="col-lg-4" style="height: 10em;overflow-y: scroll">' + content_type + '</div>\n' +
                    '\n' +
                    '                        <div class="col-lg-8" style="height: 10em;overflow-y: scroll">\n' +
                        '                            <p>' + msg + '</p>\n' +
                        '                        </div>\n' +
                    '\n' +
                    '                    </div>\n' +
                '                </div>\n' +
            '                <br>\n' +
            '                <div class="panel-footer">\n' +
                '                    <p  style="color:#1976d2" ><i class="fa fa-comment-o" aria-hidden="true"></i><span id="mycount' + item.tweet_id + '"></span> </p>\n' +
                '                    <p style="color:#007E33"><i class="fa fa-retweet" aria-hidden="true"></i> ' + item.retweet_count + '</p>\n' +
                '                    <p style="color: #CC0000"><i class="fa fa-heart" aria-hidden="true"></i> ' + item.favorite_count + '</p>\n' +
                '                    <p><i class="fa fa-ellipsis-h" aria-hidden="true"></i></p>\n' +
                '                </div>\n' +
            '            <a onclick="mytins(\'' + post_date + '\', \'' + tw_img + '\', \'' + encodeURIComponent(escape(msg)) + '\', \'' + item.tweet_id + '\')" class="btn btn-block btn-primary" style="background-color: #0099CC;bottom: 0">See Sentiments</a>' +
            '</div></div>');


    mycomments(item.tweet_id);

    });

    });

    }, 1000);

    });


    function mycomments($comm_id) {
    //Hit Commments Count API

    var mycommentdata = {
    'in_reply_to_user_id': $comm_id,
    };

    var posturl = 'https://social.snwolley.com/twitter-api/get/count';

    $.post(posturl, mycommentdata, function (response) {

    // console.log(response);

    if (response.data.length > 0) {
    $('#mycount' + $comm_id + '').text(' '+response.data[0].count.toString());
    } else {
    $('#mycount' + $comm_id + '').text(' '+'0');
    }

    });

    }

    function assign($count) {
    console.log($count);

    alert($count);
    }


    function mytins($date, $img, $caption, $postid) {
    // console.log($caption);
    localStorage.setItem('twitter_selected_date', $date);
    localStorage.setItem('twitter_selected_fullimg', $img);
    localStorage.setItem('twitter_selected_caption', $caption);
    localStorage.setItem('twitter_selected_postid', $postid);
    // console.log($postid);
    // console.log($date);
    // console.log($img);


    localStorage.setItem('tw_pos', '0');
    localStorage.setItem('tw_neg', '0');
    localStorage.setItem('tw_neu', '0');

    //    Route to sentiment page
    window.location.href = '{{URL::to('sentiment/twitter')}}';
    }


    </script>
@endpush