<div data-ng-controller="InstagramcustomreportController">
    <!-- 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>
            </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 darken-4 white-text" style="background-color:#ed409f">
                    <i class="fa fa-instagram fa-fw" aria-hidden="true"></i>Instagram Custom Report Stats</span>
                </h5>
                <div class="collection">
                    <div class="row">
                        <div class="col l6 m6 s12">
                            <blockquote class="groupbox_padding lighten-1" style="background-color:#ce8744">
                                <h5><i class="fa fa-instagram fa-fw" aria-hidden="true"></i>PROFILE DESCRIPTION</h5>
                            </blockquote>
                            <div class="row">
                                <div class="col m2">
                                    <img src="{{instagramdata.profileUrl}}" class="responsive-img">
                                </div>
                                <div class="col m8">
                                    <div class="dl-horizontal">
                                        <div class="inst_name_big_dt">Full Name : {{instagramdata.insUserName}}</div>

                                        <br />
                                        <div class="inst_name_big_dt">Instagram Name : {{instagramdata.insUserName}}</div>

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

                        <div class="col l6 m6 s12">
                            <blockquote class="groupbox_padding lighten-1" style="background-color:#ce8744">
                                <h5><i class="fa fa-instagram fa-fw" aria-hidden="true"></i>INSTAGRAM DASHBOARD</h5>
                            </blockquote>
                            <div class="row center">
                                <div class="col m4">
                                    <h5 class="GroupStats_twt">
                                        <i class="icon-anchor fa-2x fa-fw blue-text text-darken-3"></i>
                                    </h5><h5><strong>{{totalMedia}}</strong></h5>
                                    <span>Total Media</span>
                                </div>
                                <div class="col m4">
                                    <h5 class="GroupStats_twt">
                                        <i class="icon-user fa-2x fa-fw  blue-text text-darken-3"></i>
                                    </h5><h5><strong>{{totalFollower}}</strong></h5>
                                    <span>Total Follower</span>
                                </div>
                                <div class="col m4">
                                    <h5 class="GroupStats_twt">
                                        <i class="icon-users fa-2x fa-fw blue-text text-darken-3"></i>
                                    </h5><h5><strong>{{totalFollowing}}</strong></h5>
                                    <span>Total Following</span>
                                </div>
                            </div>
                        </div>


                        <div class="col l12 m12 s12">
                            <blockquote class="row  groupbox_padding lighten-1" style="background-color:#ce8744">
                                <h5 class="left">FOLLOWER</h5>
                                <h5 class="right">{{totalFollower}}</h5>
                            </blockquote>
                            <div id="FollowersGraph" class="charts" style="height: 200px;"></div>
                        </div>

                        <div class="col l12 m12 s12">
                            <blockquote class="row  groupbox_padding lighten-1" style="background-color:#ce8744">
                                <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:#ce8744">
                                <h5 class="left">POST-COMMENTS</h5>
                                <h5 class="right">{{totalPOSTCOMMENTS}}</h5>
                            </blockquote>
                            <div id="POSTCOMMENTSGraph" class="charts" style="height: 200px;"></div>
                        </div>

                        <div class="col l12 m12 s12">
                            <blockquote class="row  groupbox_padding lighten-1" style="background-color:#ce8744">
                                <h5 class="left">POST-LIKES</h5>
                                <h5 class="right">{{totalPOSTLIKES}}</h5>
                            </blockquote>
                            <div id="POSTLIKESGraph" class="charts" style="height: 200px;"></div>
                        </div>

                        <div class="col l12 m12 s12">
                            <blockquote class="row  groupbox_padding lighten-1" style="background-color:#ce8744">
                                <h5 class="left">MEDIA</h5>
                                <h5 class="right">{{totalMedia}}</h5>
                            </blockquote>
                            <div id="MEDIAGraph" class="charts" style="height: 200px;"></div>
                        </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>
