<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>
<!-- START MAIN -->
    <div  data-ng-controller="ReferralController">
        <!-- START WRAPPER -->
        <div class="wrapper">

            <!-- START CONTENT -->
            <section id="content">

                <!--start container-->
                <div class="container">

                    <div class="col m12">
                        <h4>Referral</h4>
                    </div>

                    <div class="row">
                        <div class="col s12 m12 l12">
                            <div class="card-panel">
                                <div class="center-align">
                                    <!--<i></i>
                                    <h6>Do You and Your friends wants to earn a month free ? </h6>
                                    <p>Give your friends a free month of Membership. You'll get a free month when they sign up. *</p>
                                    <a class="waves-effect waves-light btn col s12">Invite Friends using Gmail</a>
                                    <hr>
                                    <p>Manual Enter Email Address </p>-->
                                    <div class="row">
                                        <form class="col s12">
                                            <!--<div class="row">
                                                <div class="input-field col s12">
                                                    <input id="input_text" type="text" length="10">
                                                    <label for="input_text">Email addresses (separate emails by commas)</label>
                                                </div>
                                            </div>-->
                                            <div class="row">
                                                <!--<div class="input-field col s12">
                                                    <textarea id="textarea1" class="materialize-textarea" length="120" placeholder="Fashion Tuts has hundreds of amazing online classes. Use the link below to get a free month of Fashion Tuts Membership and unlimited access to these classes."></textarea>
                                                    <label for="textarea1">Textarea</label>
                                                </div>-->
                                            </div>
                                            <!--<a class="waves-effect waves-light btn col s12">Invite By Email</a>-->
                                            <h5>Your Referral Code</h5>
                                            <textarea id="textarea1" class="materialize-textarea" length="120" disabled style="font:600;color:black;">{{refrralcode}}</textarea>
                                            <a class="btn btn_style col s12 img_comp_btn" ng-click="opencomposemodel()">Share</a>
                                            <!--<hr>-->
                                            <!--<a class="waves-effect waves-light btn blue darken-4">Share on Facebook</a>
                                            <a class="waves-effect waves-light btn blue">Share on Twitter</a>-->
                                            <!--<a class="waves-effect waves-light btn">Http://link</a>-->
                                            <!--<hr>-->
                                            <!--<a class="waves-effect waves-light btn grey">Invite Sent </a>
                                            <a class="waves-effect waves-light btn grey">Month Earned </a>
                                            <a class="waves-effect waves-light btn grey">Month Remaining </a>-->
                                            <p class="center-align">* For every friend who signs up with a paid membership you will get $50</p>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end container-->
            </section>
            <!-- END CONTENT -->
        </div>
        <!-- END WRAPPER -->
    </div>
<!-- END MAIN -->
<!-- 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="#!" class="email-type">Compose</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div class="model-email-content" style="padding-top: 0;">
        <div class="row">
            <form class="col s12">

                <div class="row">
                    <div class="col s12 m6">
                        <div class="input-field">
                            <textarea id="composeMessage" class="materialize-textarea" length="5000" data-emojiable="true" disabled>You can use my {{refrralcode}} referral code for singup on https://www.socioboard.com </textarea>
                        </div>
                    </div>
                    <div id="selection" 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>
                            <div style="max-height:300px; overflow-y:scroll;" class="col m12 s12">
                                <ul class="shinh" id="checkboxdata">
                                    <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="fb_{{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="profile();" name="selector[]" class="subcheckbox" id="fb_{{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>
                                    <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;">{{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;">{{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;">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="modal-footer">
                    <a href="javascript:;" class="btn blue" ng-show="dispbtn" ng-click="ComposeMessage()">Send<i class="modal-action  mdi-content-send"></i></a>
                    <a ng-show="!dispbtn" class="btn blue">Send<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a>
                </div>
            </form>
        </div>
    </div>
</div>




<script>

    function closeModel() {
        jQuery('input:checkbox').removeAttr('checked');
    }

    //$(function () {
    //    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) {
            //alert("no "+count);
            $("#checkAll").prop('checked', false);
        }
        if (count == 0) {
            //alert("yess " + count);
            $("#checkAll").prop('checked', true);
        }
    }
</script>
