
<style>
    ul.shinh li label {
        font-size: 14px;
        color: grey;
        padding: 0 10px;
        color: #ff4081;
    }

    ul.shinh li:hover {
        background: #e5e5e5;
        color: #ff4081;
        cursor: pointer;
        padding: 0 10px;
    }

    ul.shinh li label input {
        margin-right: 10px;
        height: 20px;
        width: 20px;
        background: transparent !important;
    }
</style>
<div data-ng-controller="MostSharedController">
    <!-- Page name -->
    <div class="container">
        <div class="row">
            <div class="col m9 s12">
                <h5>Most Shared</h5>
            </div>
            <div class="col m3 s12 margin-top-20">
               <a class="btn btn_style img_comp_btn right" ng-if="user.AccountType==7" ng-click="sorttype()"><i class="fa fa-share-alt" aria-hidden="true"></i> Shareathon</a>
                <a class="btn btn_style img_comp_btn right" ng-if="user.AccountType!=7" ng-click="message()"><i class="fa fa-share-alt" aria-hidden="true"></i> Shareathon</a>
            </div>
        </div>
    </div>
    <!-- START CONTENT -->
    <section id="content">
        <form class="row">
            <div class="col m4">
                <input id="textSearch" type="text" placeholder="Search" />
            </div>
            <div class="col m2">
                <button type="submit" class="btn-floating waves-effect waves-light blue darken-4 center" ng-click="SearchData()"><i class="fa fa-search"></i></button>
            </div>
        </form>
        <!-- Compose Email Structure -->
        <div class="row">
            <div class="col s12 m12">
                <table id="MostShared" class="display responsive-table striped" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Articles</th>
                            <th>Action</th>
                            <th>Facebook Engagements</th>
                            <th>Linkedin Shares</th>
                            <th>Twitter Shares</th>
                            <th>Pinterest Shares</th>
                            <!--<th>Google+ Shares</th>-->
                            <th>Total Shares</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr ng-repeat="lstData in lstAdvSearhDataaa" content="text/html" charset="utf-8">
                            <td>
                                <input name="selectedContentfeed[]" class="filled-in subcheckbox" id="{{lstData.postId}}" type="checkbox" ng-checked="selectedContentfeed.indexOf(lstData) > -1" ng-click="Toggle(lstData)" />
                                <label for="{{lstData.postId}}">&nbsp;</label>
                            </td>
                            <td class="">
                                <a class="grey-text text-darken-3" target="_blank" href="{{lstData.postUrl}}">{{lstData.title}} <br />By:{{lstData.userName}}</a>                                
                            </td>
                            <td class="center">
                                <a class="btn-floating btn-large red modal-trigger center" ng-click="ComposeMessageModal(lstData)" href="javascript:void(0)">
                                    <i class="large icon-share"></i>
                                </a>
                            </td>
                            <td class="center" ng-if="lstData.fbengagementCount<1000">
                                <a class="btn-floating waves-effect waves-light btn-large indigo darken-3 center">{{lstData.fbengagementCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.fbengagementCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large indigo darken-3 center">{{lstData.fbengagementCount/1000 |number:0}}k</a>
                            </td>
                            <td class="center" ng-if="lstData.linShareCount<1000">
                                <a class="btn-floating waves-effect waves-light btn-large blue darken-4 center">{{lstData.linShareCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.linShareCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large blue darken-4 center">{{lstData.linShareCount/1000 |number:0}}k</a>
                            </td>
                            <td class="center" ng-if="lstData.twtShareCount<1000">
                                <a class="btn-floating waves-effect waves-light btn-large light-blue accent-2 center">{{lstData.twtShareCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.twtShareCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large light-blue accent-2 center">{{lstData.twtShareCount/1000 |number:0}}k</a>
                            </td>
                            <td class="center" ng-if="lstData.pinShareCount<1000">
                                <a class="btn-floating waves-effect waves-light btn-large red darken-4 center">{{lstData.pinShareCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.pinShareCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large red darken-4 center">{{lstData.pinShareCount/1000 |number:0}}k</a>
                            </td>
                            <!--<td class="center" ng-if="lstData.gplusShareCount<1000">
                                <a class="btn-floating waves-effect waves-light btn-large red accent-4 center">{{lstData.gplusShareCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.gplusShareCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large red accent-4 center">{{lstData.gplusShareCount/1000 |number:0}}k</a>
                            </td>-->
                            <td class="center" ng-if="lstData.totalShareCount<1000" >
                                <a class="btn-floating waves-effect waves-light btn-large grey darken-3 center">{{lstData.totalShareCount}}</a>
                            </td>
                            <td class="center" ng-if="lstData.totalShareCount>1000">
                                <a class="btn-floating waves-effect waves-light btn-large grey darken-3 center">{{lstData.totalShareCount/1000|number:0}}k</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <!-- END CONTENT -->
    <!-- Compose Email Structure -->
    <div id="ComposePostModal" class="modal">
        <div class="modal-content">
            <nav class="red">
                <div class="nav-wrapper">
                    <div class="left col s12 m5 l5">
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="email-type">Compose</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="model-email-content">
            <div class="row no-space">
                <form class="col s12">
                    <div class="row no-space">
                        <div class="col s12 m6">
                            <div class="input-field col s12">
                                <div class="emoji-picker-container">
                                    <textarea id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="500">{{composePostdata.link}}</textarea>
                                </div>
                            </div>
                            <div class="row no-space">
                                <div class="col s12 m12 l12">
                                    <p>Select your file [Ex: gif, jpeg, png, mp4, ...]</p>
                                </div>
                                <input type="hidden" id="imageUrl" value="{{composePostdata.image}}" />
                                <div class="col s12 m12 l12">
                                    <input type="file" id="composeImage" class="dropify" after-render data-default-file="{{composePostdata.image}}" />
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input ng-model="query[queryBy]" id="search_name" type="text" class="validate">
                                    <label for="search_name">Search Profile</label>
                                </div>
                                <ul class="col s12 shinh" id="checkboxdata" style="max-height:250px; overflow-y:scroll;">
                                    <li style="padding:5px 0;">
                                        <label>
                                            <input type="checkbox" style="visibility:visible;position:relative;left:5px; float:left" id="checkAll" onclick="check();" />
                                            <span style="float:left;">Check All</span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:0} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13' }" style="padding:5px 0;">
                                        <label>
                                            <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/fb_icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                        <label>
                                            <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/Fb_page-icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:2}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="tw_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/twticon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query | filter:{profileType:3} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="lin_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:4}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="Cmpylinpage_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row no-space">
                        <!--<a href="" class="btn btn_style blue_btn_style left" ng-click="draftMsg()">Save as Draft</a>-->
                        <div class="right btn btn_style blue_btn_style">
                            <div ng-show="disbtncom" ng-click="ComposeMessage()">send</div>
                            <div ng-show="!disbtncom"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

 
    <!-- ShareathonModal Structure -->
    <div id="ShareathonModal" class="modal">
        <div class="modal-content">
            <div class="row">
                <div class="col s12">
                    <h4>Shareathon Post</h4>
                </div>
                <form class="col s12">
                    <!--<div class="input-field col s12">
                        <select multiple id="shraeathonfacebookpage">
                            <option value="" disabled selected>Choose your option</option>
                            <option ng-repeat="profile in lstProfiles |filter:{profileType:0} && filter:{profileType:1} && filter:{profileType:2} && filter:{profileType:3} | filter:{profileType:'!5'}|filter:{profileType:'!6'}|filter:{profileType:'!7'}|filter:{profileType:'!8'} |filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'}" value="{{profile.profileId}}" my-repeat-timeout-directive my-repeat-dropdown-directive>  {{profile.profileName}} </option>
                        
                        </select>
                       
                        <label>Select an Account to Automate post</label>
                    </div>-->

                    <div class="col s12 m12">
                        <div class="row">
                            <b class="grey-text text-darken-3" style="font-size: 17px;">Select social profile</b>

                            <ul class="col s12 shinh" id="checkboxdataAa" style="max-height:250px; overflow-y:scroll;">
                                <li style="padding:5px 0;">
                                    <label>
                                        <!----------------<input  type="checkbox" style="visibility:visible;position:relative;left:5px; float:left" ng-model="allSelected" ng-model-options="{getterSetter: true}" />------------->
                                        <input type="checkbox" style="visibility:visible;position:relative;left:5px; float:left" id="checkAlll" onclick="checkK();" />
                                        <span style="float:left;">Check All</span>
                                    </label>
                                </li>
                                <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:0} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13' }" style="padding:5px 0;">
                                    <label>
                                        <input onclick="otherprofile();" name="selector[]" class="subcheckbox" id="{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                        <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                        <span style="float:left;">{{profile.profileName}}</span>
                                        <span style="float:right;"><img ng-src="/contents/socioboard/images/fb_icon.png"></span>
                                    </label>
                                </li>
                                <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                    <label>
                                        <input onclick="otherprofile();" name="selector[]" class="subcheckbox" id="{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                        <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                        <span style="float:left;">{{profile.profileName}}</span>
                                        <span style="float:right;"><img ng-src="/contents/socioboard/images/Fb_page-icon.png"></span>
                                    </label>
                                </li>

                            </ul>
                        </div>
                    </div>
                 
                    <div class="input-field col s12">
                        <select id="shraeathontimeinterval">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="10">10 min</option>
                            <option value="15">15 min</option>
                            <option value="30">30 min</option>
                            <option value="45">45 min</option>
                            <option value="60">1 hr</option>
                        </select>
                        <label>Set Your Time Interval</label>
                    </div>

                    <div ng-init="dispbtn= {{dispbtn}}"></div>
                    <div class="col l12 center margin-top-50">
                        <a ng-show="dispbtn" ng-click="saveshreathondata()" class="btn grey darken-4 waves-effect waves-light">post</a>
                        <a ng-show="!dispbtn" ng-click="saveshreathondata()" class="btn grey darken-4 waves-effect waves-light">wait</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div ng-if="ldoff!=true">
    <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 while we are processing</h6>

    </div>
</div>


<div class="center" ng-if="nofeeds==true">
    <br /><br /><br /><br /><br /><br />
    <h6 style="color:gray; font-size:20px; font-family:Calibri"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />Sorry, No content feeds to display<br /></h6>
</div>


<script>
    function closeModel() {
        jQuery('input:checkbox').removeAttr('checked');
    }
    $(function () {
        // Initializes and creates emoji set from sprite sheet
        window.emojiPicker = new EmojiPicker({
            emojiable_selector: '[data-emojiable=true]',
            assetsPath: '../contents/socioboard/global/plugins/emoji-picker/lib/img/',
            popupButtonClasses: 'fa fa-smile-o'
        });
        window.emojiPicker.discover();
    });
    function check() {
        var flag = $('#checkAll').is(":checked");
        $('#checkboxdata input:checkbox').each(function () {
            $(this).prop('checked', flag);
        });
    }
    function profile() {
        var count = 0;
        $("#checkboxdata  :checkbox").each(function () {
            if (this.id != 'checkAll') {
                if (!($("#" + this.id).prop('checked'))) {
                    count++;
                }
            }
        });
        if (count > 0) {
            $("#checkAll").prop('checked', false);
        }
        if (count == 0) {
            $("#checkAll").prop('checked', true);
        }
    }

    function checkK() {
        var flag = $('#checkAlll').is(":checked");
        $('#checkboxdataAa input:checkbox').each(function () {
            $(this).prop('checked', flag);
        });
    }

    function otherprofile() {
        var count = 0;
        $("#checkboxdataAa  :checkbox").each(function () {
            if (this.id != 'checkAlll') {
                if (!($("#" + this.id).prop('checked'))) {
                    count++;
                }
            }
        });
        if (count > 0) {
            $("#checkAlll").prop('checked', false);
        }
        if (count == 0) {
            $("#checkAlll").prop('checked', true);
        }
    }
</script>

