<div class="row">
    
    <form class="form-horizontal">
        <div class="form-group" style="width:50%;float:left;padding-left:24px;margin-bottom:0px;">
            <!-- begin page-header -->
            <h1 class="page-header">
                Chat Bot   
            </h1> 
            <!-- end page-header -->
        </div>

        <div class="form-group" style="width:35%;float:right;padding-right:10px;margin-bottom:0px;">
                <label class="col-md-3 control-label"><span style="font-size: 14px;">Period</span></label>
                <div class="col-md-9">
                    <div id="advance-daterange" class="btn btn-white advance-daterange-class" >
                        <span></span>
                        <i class="fa fa-angle-down fa-fw"></i>
                    </div>
                </div>
        </div>
    </form>
</div>
<div class="row" >
    <div class="col-md-3 col-sm-6"> 
    <div class="panel panel-warning ">
        <div class="panel-heading">
            <h4 class="panel-title p-heading" >Sessions</h4>
        </div>
        <div class="panel-body" style="padding:0px;">
            <div class="widget widget-stats " id="installHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="" style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                <table style="width:100%;">
                        <tbody><tr>
                            <td style="width:60%;font-weight:600;">
                                <span><small class="big-font">{{session.currentTotal}}</small></span>
                            </td>
                            <td style="font-size: 12px;width:40%;text-align:right;" id="previousTotal">
                                        NA
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-striped">                          
                    <tbody> 
                        <tr>
                            <td style="width:40%;padding:3px">Facebook</td>
                            <td style="width:30%;padding:3px" id="facebook">0</td>
                            <td style="width:30%;padding:3px; text-align:right;" id="facebook_percent">NA</td>
                        </tr>
                        <tr>
                            <td style="width:40%;padding:3px">Skype</td>
                            <td style="width:30%;padding:3px" id="skype">0</td>
                            <td style="width:30%;padding:3px; text-align:right;" id="skype_percent">NA</td>
                        </tr>
                        <tr>
                            <td style="width:40%;padding:3px">Slack</td>
                            <td style="width:30%;padding:3px" id="slack">0</td>
                            <td style="width:30%;padding:3px; text-align:right;" id="slack_percent">NA</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title p-heading"> Active Users</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td style="width:60%;font-weight:600;">
                                <span ><small class="big-font">{{session.aUsers}}</small></span>
                            </td>
                            <td style="font-size: 12px;width:40%;text-align:right;" id="previousUsers">
                                    NA
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped">                          
                        <tbody> 
                            <tr>
                                <td style="width:50%;padding:3px">DAU</td>
                                <td style="width:50% ;text-align:right;padding:3px">{{session.dau}}</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">MAU</td>
                                <td style="width:50%;text-align:right;padding:3px">{{session.mau}}</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">DAU/MAU</td>
                                <td style="width:50%;text-align:right;padding:3px">{{session.mau}}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Engagement</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td style="width:60%;font-weight:600;">
                                <span><small class="big-font">{{totalDuration}} <sub>Min</sub></small></span>
                            </td>
                            <td style="font-size: 12px;width:40%;text-align:right;" id="previousDuration">
                                    NA
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped">                          
                        <tbody> 
                            <tr>
                                <td style="width:50%;padding:3px">Session/User</td>
                                <td style="width:50% ;text-align:right;padding:3px">{{session.currentTotal/2 | round}}</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">Messages/Session</td>
                                <td style="width:50%;text-align:right;padding:3px">{{(messageIn+messageOut)/session.currentTotal | round}}</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">Avg Session Time</td>
                                <td style="width:50%;text-align:right;padding:3px">{{avgSessionTime}} <sub>Min</sub></td>
                            </tr>
                        </tbody>
                    </table>                    
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6"> 
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title p-heading" >Conversations</h4>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div class="widget widget-stats " id="uninstallHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="" style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td style="width:60%;font-weight:600;">
                                <span><small class="big-font">{{messageIn+messageOut}} </small></span>
                            </td>
                            <td style="font-size: 12px;width:40%;text-align:right;" id="previousEngagement">
                                    NA
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-striped">                          
                        <tbody> 
                            <tr>
                                <td style="width:50%;padding:3px">Message In</td>
                                <td style="width:50% ;text-align:right;padding:3px">{{messageIn}}</td>
                            </tr>
                            <tr>
                                <td style="width:50%;padding:3px">Message Out</td>
                                <td style="width:50%;text-align:right;padding:3px">{{messageOut}}</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    
    <div class="col-md-12 ui-sortable">
        <div class="panel panel-info" data-sortable-id="chart-js-2">
            <div class="panel-heading">
                <div class="btn-group pull-right">   
                </div> 
                <h4 class="panel-title p-heading" >Retention Cohort</h4>
            </div>
            <div class="panel-body">
                <div class="row">
                    
                    <form class="form-inline" >
         
                         <div class="checkbox m-r-10" style="padding-left:15px;">
                            <label>
                                Show Percentage <input id="chkPercentage" type="checkbox"  class="BSswitch" data-label-text="ON" data-on-color="success" data-off-color="danger"> 
                            </label>
                        </div>
                        
                        <div class="input-group input-daterange">
                            <input type="text" class="form-control" name="start" placeholder="Date Start" id="txtFromDate" >
                            <span class="input-group-addon">to</span>
                            <input type="text" class="form-control" name="end" placeholder="Date End" id="txtToDate" >
                        </div>
                        <div class="form-group m-r-10">
                            <label>Period</label>
                            <select id="ddlCohortDateFilter" class="form-control" >
                                <option value="daily" >D+1 (Daily)</option>
                                <option value="weekly" selected>D+7 (Weekly)</option>
                                <!-- <option value="monthly" selected>D+30 (Monthly)</option> -->
                                <option value="yearly">Yearly</option>
                            </select>
                        </div
                        <button type="submit"  class="btn btn-sm btn-primary m-r-5" style="display:none"></button>
                        <button type="button" ng-click="viewCohort()" class="btn btn-sm btn-primary m-r-5">View</button> 
                        
                    </form>
                    
                </div>
                <style type="text/css">
                    .cornelius-container{
                        overflow: auto !important;
                    }
                </style>
                <div class="row">
                    <div id="installCohort" class="col-md-12">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>