<style>
    .a {
        position: relative;
        top: -16px;
    }
</style>

<div data-ng-controller="TwitterreportsController">
            <!-- Page name -->

            <div class="container" ng-class="fetchdatacomplete">
                <div class="col m12">
                    <h4 class="pull-left">
                        <!--<div class="input-field">
                            <select class="icons" ng-model="selectedProfile" ng-change="getReports(selectedProfile, 90)">
                                <option ng-repeat="profile in lstProfiles | filter:{profileType:8}" my-repeat-tab-directive value="{{profile.profileId}}" data-icon="">
                                    <img src="{{profile.profilePic}}" class="circle">{{profile.profileName}}
                                </option>
                            </select>
                        </div>-->
                        <!--<span class="grey-text text-darken-1">from {{fromDate}} to {{toDate}}</span>-->
                        <span class="grey-text text-darken-1">Showing last 90 days report ({{fromDate | date}} - {{toDate | date}})</span>
                    </h4> 
                    <!--<h6 class="pull-right margin-top-20" ng-if="user.TrailStatus!=2">
                        <a ng-click="getData(selectedProfile,15)" class="btn">15</a>
                        <a ng-click="getData(selectedProfile,30)" class="btn">30</a>
                        <a ng-click="getData(selectedProfile,60)" class="btn">60</a>
                        <a ng-click="getData(selectedProfile,90)" class="btn">90</a>
                    </h6>-->
                </div>
            </div>

            <div class="row" ng-class="fetchdatacomplete">
                <!-- FACEBOOK STATS -->
                <div class="col s12 m12 l12">
                    <div class="card" id="feeds">
                        <h5 class="feeds_title darken-4 white-text" style="background-color:#42c2f4">
                            <i class="fa fa-twitter fa-fw" aria-hidden="true"></i>Twitter Report Stats
                        </h5>
                        <div class="collection">
                            <div class="row">
                                <div class="col l12">
                                    <blockquote class="row  groupbox_padding lighten-1" style="background-color:#42c2f4">
                                        <h5 class="left">Total No. Of Followers</h5>
                                        <h5 class="right">{{totalNewFollowers}}</h5>
                                    </blockquote>
                                    <div id="followerchart" class="chart" style="height: 300px;"></div>
                                    <!--<div id="followerchart1" class="chart" style="height: 300px;"></div>-->
                                </div>
                                <div class="col l12">
                                    <blockquote class="row  groupbox_padding lighten-1" style="background-color:#42c2f4">
                                        <h5 class="left">Total No. Of Followings</h5>
                                        <h5 class="right">{{totalNewFollowing}}</h5>
                                    </blockquote>
                                    <div id="followingchart1" class="chart" style="height: 300px;"></div>
                                </div>



                                <!--<div class="col l12 m12 s12">
            <blockquote class="row  groupbox_padding lighten-1" style="background-color:#c65c19">
                <h5 class="left">FOLLOWING</h5>
                <h5 class="right">{{totalFollowing}}</h5>
            </blockquote>
            <div id="FOLLOWINGGraph" class="charts" style="height: 200px;"></div>
        </div>-->

                                <div class="col l12 m12 s12">
                                    <blockquote class="row  groupbox_padding lighten-1" style="background-color:#42c2f4">
                                        <h5 class="left">Twitter Retweets</h5>
                                        <h5 class="right">{{totalRetweets}}</h5>
                                    </blockquote>
                                    <div id="RetweetGraph" class="charts" style="height: 300px;"></div>
                                </div>

                                <div class="col l12 m12 s12">
                                    <blockquote class="row  groupbox_padding lighten-1" style="background-color:#42c2f4">
                                        <h5 class="left">Twitter Mentions</h5>
                                        <h5 class="right">{{totalMentions}}</h5>
                                    </blockquote>
                                    <div id="MentionsGraph" class="charts" style="height: 300px;"></div>
                                </div>

                               
                                <div class="col l12 m12 s12">
                                    <div class="col l12">
                                        <blockquote class="groupbox_padding lighten-1" style="background-color:#42c2f4">
                                            <h5><i class="fa fa-twitter fa-fw"></i>Twitter Profiles Detail</h5>
                                        </blockquote>
                                        <table id="Twtaccount" class="display responsive-table striped" cellspacing="0" width="100%">
                                            <thead>
                                                <tr>
                                                    <th>S.No.</th>
                                                    <th>Name</th>
                                                    <th>Followers</th>
                                                    <th>Following</th>
                                                   
                                                </tr>
                                            </thead>
                                            <tbody ng-repeat="twtfollowfollowing in getfollowerfollowingcount" my-repeat-video-tab-directives>
                                                <tr>
                                                    <td style="width: 1%;">{{$index+1}}</td>
                                                    <td><a href="https://twitter.com/{{twtfollowfollowing.twitterScreenName}}" target="_blank">{{twtfollowfollowing.twitterScreenName}}</a></td>
                                                    <td>{{twtfollowfollowing.followersCount}}</td>
                                                    <td>{{twtfollowfollowing.followingCount}}</td>
                                                    
                                                </tr>

                                            </tbody>
                                        </table>
                                        
                                    </div>
                                </div>
                                <div class="col l12">
                                    <blockquote class="groupbox_padding lighten-1" style="background-color:#42c2f4">
                                        <h5><i class="fa fa-twitter fa-fw"></i>Twitter Posts Detail</h5>
                                    </blockquote>
                                    <table id="all_video_table" class="display responsive-table striped" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>S.No.</th>
                                                <th>Posts</th>
                                                <th>View Post</th>
                                                <th>From</th>
                                                <th>Favourite</th>
                                                <th>Retweet</th>
                                                <!--<th>Type</th>-->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="instapostdetails in getfeedsdata" my-repeat-video-tab-directive>
                                                <td style="width: 1%;">{{$index+1}}</td>
                                                <td style="width: 50%;"><a href="https://twitter.com/{{instapostdetails.screenName}}" target="_blank">{{instapostdetails.screenName}}</a> {{instapostdetails.feedDate}} <br><a>{{instapostdetails.feed}}</a> </td>
                                                <td style="width: 10%;"><a href="https://twitter.com/{{instapostdetails.fromName}}/status/{{instapostdetails.messageId}}" target="_blank"><i class="icon-social-twitter"></i> tweet</a></td>
                                                <td><img class="responsive-img circle" src="{{instapostdetails.fromProfileUrl}}"><span class="a"> {{instapostdetails.fromName}}</span></td>
                                                <td>{{instapostdetails.likecount}}</td>
                                                <td>{{instapostdetails.retweetcount}}</td>
                                                <!--<td>{{instapostdetails.type}}</td>-->                                               
                                            </tr>
                                        </tbody>
                                    </table>                                  
                                </div>
                            </div>
                            </div>  
                        </div>
                    </div>
            </div>
            

            <div ng-if="fetchdatacomplete==false">
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <div class="center">
                    <div class="preloader-wrapper small active">
                        <div class="spinner-layer spinner-green-only">
                            <div class="circle-clipper left">
                                <div class="circle"></div>
                            </div><div class="gap-patch">
                                <div class="circle"></div>
                            </div><div class="circle-clipper right">
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <br />
                    <h6 style="color:gray; font-size:18px; font-family:Calibri;">Please wait for the Report data to be generated</h6>
                </div>
            </div>


    

    </div>
<script>
    //all_video_table
    //$(document).ready(function () {
        //$('#all_video_table').DataTable({
        //    dom: 'Bfrtip',
        //    buttons: [
        //        'copyHtml5',
        //        'excelHtml5',
        //        'csvHtml5',
        //        'pdfHtml5'
        //    ]
        //});
    //});
</script>

