<style>
    td{
        max-width:200px; 
        word-wrap: break-word;
    }
</style>
<div class="row" >
    <form class="form-horizontal">
        <div class="form-group" style="float:left;padding-left:30px;margin-bottom:0px;">
            <h1 class="page-header">
                Setup App Groups
            </h1>
        </div>
        <div class="form-group" style="width:56%;float:right;margin-bottom:0px;/*padding-right:10px*/" id="divFilter">
            <div class="col-md-6" style="float:right;">
                <div id="advance-daterange" class="btn btn-white" >
                    <span></span>
                    <i class="fa fa-angle-down fa-fw"></i>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row" style="height:330px;width:1000px;">
    <div class="col-md-6 col-sm-6 ui-sortable">
        <div class="panel panel-warning ">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Avg. Session Length</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats" style="order-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                    <!-- <div style="overflow-x:scroll;overflow-y:hidden;"> -->
                    <!-- <div style="width:450px;"> -->
                    <div style="overflow-x: scroll; overflow-y: hidden; width: 458px;" ng-if="sessionData.length > 7">

                        <table class="table table-striped" id="tblActiveUsers" style="width: 700px;max-width:700px;">
                            <thead >
                            <tr>
                                <th style="text-align:left;padding:5px;" ng-cloak>Avg Sessions Length</th>
                                <th ng-repeat="sessionlength in avgSessions track by $index" style="text-align:right;padding:5px;">{{sessionlength.mins}} , {{sessionlength.seconds}}</th>
                            </tr>
                            <th style="text-align:left;padding:5px;" ng-cloak>Sessions Length</th>
                            <th style="text-align:right;padding:5px;" ng-repeat="appName in sessionData" ng-if="appName != 'currentU' && appName != 'previousU' && appName != 'currentTsd' && appName != 'previousTsd' && appName != 'currentTotalSc' && appName != 'previousTotalSc' ">{{appName}}</th>

                            </thead>
                            <tbody ng-repeat="(sessionKey, session) in compAppsData">
                            <tr ng-repeat="(key, value) in session track by $index">
                                <td ng-if="key == '<30' ">{{key}}secs</td>
                                <td ng-if="key != '<30' ">{{key}}mins</td>
                                <td ng-repeat="v in value track by $index" style="text-align:right"> {{ v}}</td>
                            </tr>
                            </tbody>

                        </table>
                    </div>
                    <table ng-if="sessionData.length == 7" class="table table-striped" id="tblActiveUsers" >
                        <thead >
                        <tr>
                            <th style="text-align:left;padding:5px;" ng-cloak>Avg Sessions Length</th>
                            <th ng-repeat="sessionlength in avgSessions track by $index" style="text-align:right;padding:5px;">{{sessionlength.mins}} , {{sessionlength.seconds}}</th>
                        </tr>
                        <th style="text-align:left;padding:5px;" ng-cloak>Sessions Length</th>
                        <th style="text-align:right;padding:5px;" ng-repeat="appName in sessionData" ng-if="appName != 'currentU' && appName != 'previousU' && appName != 'currentTsd' && appName != 'previousTsd' && appName != 'currentTotalSc' && appName != 'previousTotalSc' ">{{appName}}</th>

                        </thead>
                        <tbody ng-repeat="(sessionKey, session) in compAppsData">
                        <tr ng-repeat="(key, value) in session track by $index">
                            <td ng-if="key == '<30' ">{{key}}secs</td>
                            <td ng-if="key != '<30' ">{{key}}mins</td>
                            <td ng-repeat="v in value track by $index" style="text-align:right"> {{ v}}</td>
                        </tr>
                        </tbody>

                    </table>
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 ui-sortable">
        <!--<div id="venn" style="/*margin-left: 52px;*/margin-top: -22px;"></div>-->

        <div class="panel panel-warning ">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Competitive Apps</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats" style="order-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000000">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><strong>App Name</strong></th>
                            <th style="text-align:right;"><strong>Users</strong></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="apps in competingApps">
                            <td>{{apps.competingapps}}</td>
                            <td style="text-align:right;">{{apps.per}}%</td>
                        </tr>
                        <tr ng-if="!competingApps">
                            <td colspan="2">NA</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="text-align:right;padding:5px;">
    <!-- <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editModule(module)" href="#group-dialog" data-toggle="modal">
                Add New Group
            </button> -->
    <!--    <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="showCompetingApps()">
           Show Competing Apps
       </button> -->

</div>
<div class="row">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h4 class="panel-title p-heading">Define Competitive Apps</h4>
        </div>
        <div class="panel-body">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default overflow-hidden" ng-repeat="group in groups" ng-show="group.type=='system'">
                    <div class="panel-heading">

                        <table class="table" style="margin-bottom:0px">
                            <tr>
                                <td>{{group.name}}</td>
                                <td>{{group.description}}</td>
                                <td style="text-align:right;">
                                    <button type="button" class="btn btn-primary btn-sm editable-submit"  href="#groupapps-dialog" data-toggle="modal" title="Add new app to this group." ng-click="setGroupId(group._id)">
                                        <!-- <i class="fa fa-plus"></i> -->
                                        Add App
                                    </button>

                                    <!-- <button ng-show="group.type!='system'" type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editGroup(group)" href="#group-dialog" data-toggle="modal" title="Edit this group.">
                                    <i class="fa fa-edit"></i>
                                    </button>
                                    <button ng-show="group.type!='system'" type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteGroup(group._id)" title="Delete this group">
                                    <i class="fa fa-minus"></i>
                                    </button>
                                    <button type="button" ng-show="group.type!='system'" class="btn btn-primary btn-sm editable-submit" ng-click="editModule(module)" href="#group-dialog" data-toggle="modal">
                                        Add New Group
                                    </button> -->
                                </td>
                            </tr>
                        </table>
                        <div ng-show="false" style="padding-left:14px"><strong>{{group.name}} : {{group.list.length}}</strong></div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" ng-show="group.list.length>0">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <th>Name</th>
                                    <th>Package(Android)</th>
                                    <th>Url Scheme(iOS)</th>
                                    <th>Added On</th>
                                    <th style="text-align:left;">Action</th>
                                </tr>
                                <tr ng-repeat="app in group.list">
                                    <td>{{app.name}}</td>
                                    <td>{{app.package}}</td>
                                    <td>{{app.urlscheme}}</td>
                                    <td>{{app.addedOn}}</td>
                                    <td style="text-align:right;">
                                        <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editGroupApp(app,group._id)" href="#groupapps-dialog" data-toggle="modal" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteAppFromGroup(app.id,group._id)" title="Delete">
                                            <i class="fa fa-minus"></i>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <table class="table" style="margin-bottom:0px">
                    <tr>
                        <td>User Apps Group</td>
                        <td>This group will define a list of apps which are your groups wise competitive apps</td>
                        <td style="text-align:right;">
                            <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editModule(module)" href="#group-dialog" data-toggle="modal">
                                Add New Group
                            </button>
                        </td>
                    </tr>
                </table>

                <div class="panel panel-default overflow-hidden" ng-repeat="group in groups" ng-show="group.type=='user'">
                    <div class="panel-heading">

                        <table class="table" style="margin-bottom:0px">
                            <tr>
                                <td>{{group.name}}</td>
                                <td>{{group.description}}</td>
                                <td style="text-align:right;">
                                    <button type="button" class="btn btn-primary btn-sm editable-submit"  href="#groupapps-dialog" data-toggle="modal" title="Add new app to this group." ng-click="setGroupId(group._id)">
                                        <!-- <i class="fa fa-plus"></i> -->
                                        Add App
                                    </button>

                                    <button ng-show="group.type!='system'" type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editGroup(group)" href="#group-dialog" data-toggle="modal" title="Edit this group.">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <button ng-show="group.type!='system'" type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteGroup(group._id)" title="Delete this group">
                                        <i class="fa fa-minus"></i>
                                    </button>

                                </td>
                            </tr>
                        </table>
                        <div ng-show="false" style="padding-left:14px"><strong>{{group.name}} : {{group.list.length}}</strong></div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" ng-show="group.list.length>0">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <th>Name</th>
                                    <th>Package(Android)</th>
                                    <th>Url Scheme(iOS)</th>
                                    <th>Added On</th>
                                    <th style="text-align:left;">Action</th>
                                </tr>
                                <tr ng-repeat="app in group.list">
                                    <td>{{app.name}}</td>
                                    <td>{{app.package}}</td>
                                    <td>{{app.urlscheme}}</td>
                                    <td>{{app.addedOn}}</td>
                                    <td style="text-align:right;">
                                        <button type="button" class="btn btn-primary btn-sm editable-submit" ng-click="editGroupApp(app,group._id)" href="#groupapps-dialog" data-toggle="modal" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm editable-submit" ng-click="deleteAppFromGroup(app.id,group._id)" title="Delete">
                                            <i class="fa fa-minus"></i>
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

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

<!-- Dialog  Group Start-->
<div class="modal fade" id="group-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Add/Edit Group</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">Group Name</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter group name" class="form-control" ng-model="groupname">
                            <span class="groupnameError" style="display: none;">Please enter a valid Group name !</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Group Description</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter group description" class="form-control" ng-model="groupdescription">
                            <span class="groupDescError" style="display: none;">Please enter a valid Group description name !</span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="saveOtherAppGroup()" ng-show="!edit" ng-disabled="!groupname.length>0" >Save</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="updateOtherAppGroup()" ng-show="edit"  ng-disabled="!groupname.length>0">Update</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="cancel()" data-dismiss="modal">Cancel</button>

            </div>
        </div>
    </div>
</div>
<!-- Dialog  Group End-->

<!-- Dialog  GroupApps Start-->
<div class="modal fade" id="groupapps-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Add/Edit Group Apps</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">App Name</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter app name" class="form-control" ng-model="appname">
                            <span class="appNameError" style="display: none;">Please enter a valid App name !</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Package(Android)</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter app id as on app store" class="form-control" ng-model="package">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label">UrlScheme(iOS)</label>
                        <div class="col-md-9">
                            <input type="text" placeholder="Enter app id as on app store" class="form-control" ng-model="urlscheme">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label"></label>
                        <div class="col-md-9">
                            <span ng-if="addError" style="color:red;">Enter Valid Package name or Url Scheme required</span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="addAppToGroup()" ng-show="!edit" ng-disabled="!appname.length>0">Save</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="updateAppToGroup()" ng-show="edit" ng-disabled="!appname.length>0" >Update</button>
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="cancel()" data-dismiss="modal">Cancel</button>

            </div>
        </div>
    </div>
</div>
<!-- Dialog  Group End-->
