<style>
    .centerClass{ text-align:center;}
</style>   

 <div data-ng-controller="FacebookreportController">
            <!-- 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:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'} " my-repeat-tab-directive value="{{profile.profileId}}" data-icon="">
                                    <img src="http://graph.facebook.com/{{profile.profileId}}/picture?type=small" class="circle">{{profile.profileName}}
                                </option>
                            </select>
                        </div>
                        <span class="grey-text text-darken-1">from {{fromDate}} to {{toDate}}</span>
                    </h4> 
                    <h6 class="pull-right margin-top-20" ng-if="user.TrailStatus!=2">
                        <a ng-click="getData(selectedProfile,15)" class="btn" title="Last 15 days report">15</a>
                        <a ng-click="getData(selectedProfile,30)" class="btn" title="Last 30 days report">30</a>
                        <a ng-click="getData(selectedProfile,60)" class="btn" title="Last 60 days report">60</a>
                        <a ng-click="getData(selectedProfile,90)" class="btn" title="Last 90 days report">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 blue darken-4 white-text">
                            <i class="icon-social-facebook"></i>FACEBOOK STATS <small>Stats for Facebook Pages in the Socioboard group.</small></span>
                        </h5>
                        <div class="collection">
                            <div class="row">
                                <div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">
                                        <h5><i class="fa fa-facebook-official fa-fw fa-2x blue-text text-darken-4"></i>My Facebook Pages</h5>
                                        <div class="row container">
                                        <p class="pull-left">{{totalLikes}} Total Likes and {{talkingAbout}} people talking about this</p>
                                        <p class="pull-right"><span>New Fans  {{newFans}}</span><span> 'Unliked' Your Page  {{unliked}}</span></p>
                                        </div>
                                    </blockquote>
                                    <div id="MyFacebookPages" class="charts" style="height: 200px;"></div>
                                </div>

                                <div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">                               
                                        <div class="row container-fluid">
                                            <h5 class="pull-left"><i class="fa fa-street-view fa-fw"></i>PAGE IMPRESSIONS</h5>
                                            <p class="pull-right"><span>Impressions  {{impressions}}  </span><span> by  {{usersBy}}  Users</span></p>
                                        </div>
                                    </blockquote>
                                    <div id="PAGEIMPRESSIONS" class="charts" style="height: 200px;"></div>
                                </div>

                                <div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">                      
                                        <h5><i class="fa fa-pie-chart fa-fw"></i>IMPRESSIONS BREAKDOWN</h5>
                                    </blockquote>
                                    <div id="BREAKDOWN_1" class="charts" style="height: 200px;"></div>
                                    <div id="BREAKDOWN_2" class="charts" style="height: 250px;"></div>
                                </div>

                                <div class="col l12 m12 s12">
                                    <blockquote class="groupbox_padding grey lighten-1">              
                                        <h5> <i class="fa fa-male fa-fw"></i>IMPRESSIONS BY AGE &amp; GENDER</h5>
                                    </blockquote>
                                    <div id="male_female" class="charts" style="height: 200px;"></div>
                                    <!--<div class="row center">
                                        <div class="col m6 blue-text">
                                         <i class="icon-user fa-5x"></i>
                                         <h5><strong>{{impressionsByAgeMaleFollower}}%</strong></h5>
                                         <span>MALE FOLLOWERS</span>
                                        </div>
                                        <div class="col m6 pink-text">
                                          <i class="icon-user-female fa-5x"></i>
                                          <h5><strong>{{impressionsByAgeFemaleFollower}}%</strong></h5>
                                          <span>FEMALE FOLLOWERS</span>                            
                                        </div>
                                    </div>-->
                                </div>

                                <!--<div class="col l6 m6 s12">
                                    <blockquote class="groupbox_padding grey lighten-1">              
                                        <h5> <i class="fa fa-male fa-fw"></i>STORY BY AGE &amp; GENDER</h5>
                                    </blockquote>
                                    <div id="male_female" class="charts" style="height: 200px;"></div>
                                    <div class="row center">
                                        <div class="col m6 blue-text">
                                         <i class="icon-user fa-5x"></i>
                                         <h5><strong>4%</strong></h5>
                                         <span>MALE FOLLOWERS</span>
                                        </div>
                                        <div class="col m6 pink-text">
                                          <i class="icon-user-female fa-5x"></i>
                                          <h5><strong>9%</strong></h5>
                                          <span>FEMALE FOLLOWERS</span>                            
                                        </div>
                                    </div>
                                </div>-->

                                <!--<div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">              
                                        <h5> <i class="fa fa-map-marker fa-fw"></i>IMPRESSIONS BY LOCATION</h5>
                                    </blockquote>
                                    <div  id="world" class="charts" style="height: 200px;"></div>
                                </div>-->

                            </div>
                            
                        </div>
                    </div>
                </div>


                <div class="col s12 m12 l12">
                    <div class="card" id="feeds">
                        <h5 class="feeds_title blue darken-4 white-text">
                            <i class="icon-social-facebook"></i>SHARING <small>How people are sharing your content.</small></span>
                        </h5>
                        <div class="collection">
                            <div class="row">
                                <div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">
                                        <div class="row container">
                                            <p class="pull-left">STORIES</p>
                                            <p class="pull-right"><span>Stories Created {{storiesCreated}}</span></p>
                                        </div>
                                    </blockquote>
                                    <div id="FacebookStories" class="charts" style="height: 200px;"></div>
                                </div>

                                <div class="col l12">
                                    <blockquote class="groupbox_padding grey lighten-1">   
                                        <h5><i class="fa fa-street-view fa-fw"></i>SHARE TYPE</h5>
                                    </blockquote>
                                    <div id="ShareType" class="charts" style="height: 200px;"></div>
                                </div>

                                <div class="col l12 m12 s12">
                                    <blockquote class="groupbox_padding grey lighten-1">              
                                        <h5> <i class="fa fa-male fa-fw"></i>SHARING BY AGE &amp; GENDER</h5>
                                    </blockquote>
                                    <div id="share_male_female" class="charts" style="height: 200px;"></div>
                                    <!--<div class="row center">
                                        <div class="col m6 blue-text">
                                         <i class="icon-user fa-5x"></i>
                                         <h5><strong>{{sharingByAgeMaleFollower}}%</strong></h5>
                                         <span>MALE FOLLOWERS</span>
                                        </div>
                                        <div class="col m6 pink-text">
                                          <i class="icon-user-female fa-5x"></i>
                                          <h5><strong>{{sharingByAgeFemaleFollower}}%</strong></h5>
                                          <span>FEMALE FOLLOWERS</span>                            
                                        </div>
                                    </div>-->
                                </div>

                            </div>
                            
                        </div>
                    </div>
                </div>


                <div class="col s12 m12 l12">
                    <div class="card" >
                        <h5 class="feeds_title blue darken-4 white-text">
                            <i class="icon-social-facebook"></i>YOUR CONTENT <small>A breakdown of the content you post</small></span>
                        </h5>
                        <div class="collection">
                            <div class="row">
                                <div class="col l12">

                                   <table id="Fbfeedsdetails" class="display responsive-table striped" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <!--<th>Message Sent</th>
                                                <th>Reach</th>-->
                                                <th>S.No.</th>
                                                <th>Post</th>
                                                <th>View Post</th>
                                                <th>Talking</th>
                                                <th>Likes</th>
                                                <th>Comments</th>
                                                <th>Shares</th>
                                                <th>Engagement</th>
                                            </tr>
                                        </thead>
                                     
                                        <tbody>
                                            <tr ng-repeat="facebookpagepost in FacebookPagePost" my-repeat-video-tab-directives>

                                                <td class="centerClass">{{$index+1}}</td>
                                                <td>
                                                    <img src="http://graph.facebook.com/{{facebookpagepost.pageId}}/picture?type=small" class="responsive-img" style="height: 30px; width: 30px; vertical-align:middle;">
                                                    
                                                        <a href="https://facebook.com/{{facebookpagepost.pageName}}" target="_blank">{{facebookpagepost.pageName}}</a> {{facebookpagepost.feedDate}}
                                                        <a ng-if="facebookpagepost.name != null && facebookpagepost.name != '' " class="grey-text text-darken-3" style="vertical-align: middle; white-space: nowrap;width: 138px;overflow: hidden;text-overflow: ellipsis;display:block;">{{facebookpagepost.name}}</a>
                                                        <a ng-if="facebookpagepost.name == null || facebookpagepost.name == '' " class="grey-text text-darken-3" style="vertical-align: middle; white-space: nowrap;width: 138px;overflow: hidden;text-overflow: ellipsis;display:block;">{{facebookpagepost.message}}</a>
                                                    
                                                </td>
                                                <!--<td>{{facebookpagepost.reach}}</td>
                                                <td>{{facebookpagepost.engagedUsers}}</td>-->
                                                <td class="centerClass"><a href="https://facebook.com/{{facebookpagepost.postId}}" target="_blank"><span class=" blue-text text-darken-4"><i class="fa fa-facebook"></i> facebook</span></a></td>                                    
                                                <td class="centerClass">{{facebookpagepost.talking}}</td>
                                                <td class="centerClass">{{facebookpagepost.likes}}</td>
                                                <td class="centerClass">{{facebookpagepost.comments}}</td>
                                                <td class="centerClass">{{facebookpagepost.shares}}</td>
                                                <td class="centerClass">{{facebookpagepost.engagement}}%</td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>


        <div ng-if="fetchdatacomplete!='show'">
            <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>
