<div class="row">

	<form class="form-horizontal">
        <div class="form-group" style="padding-left:24px; margin-bottom:0px;">
            <!-- begin page-header -->
            <h1 class="page-header" style="margin-bottom: 4px; text-transform: uppercase;">
              <% for (var i = 0; i < userOfApps.length; i++) { %>
                <% if (userOfApps[i]._id == currentappid) { %>
                  <% if (userOfApps[i]._id == "5d5fd1290200e5b6009d6478") { %>
                    <img src="/users/54efc41fded1e7b321000002.jpg" style="width: 30px;" /> Kotak Stock Trader App
                  <% } else { %>
                    <%= userOfApps[i].name %>
                  <% } %>
                <% } %>
              <% } %>
            </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>

<!-- begin row -->
<div class="row">
    <!-- begin col-3 -->
    <div class="col-md-3 col-sm-6" 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="">
        <div class="widget widget-stats bg-green">
            <div class="stats-icon stats-icon-lg">
                <img src="assets/img/installs-widget.svg" alt="Installs" />
            </div>
            <div class="stats-title">INSTALLS</div>
            <!-- <table class="stats-number" style="margin-top: 25px;">
                <tr id="trNewInstalls">
                    <td style="width:60%;">
                        <span id="uniqueInstalls" style="display:none;"></span>
                        <span id="lblNewInstalls" ></span>
                        <span id="lblNewInstallss" style="display: none;" ></span>
                    </td>
                    <td style="font-size: 10px;width:20%;text-align:right;">
                                <div id="i-uparrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-up"></i>
                                </div>
                                <div id="i-downarrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-down"></i>
                                </div>
                    </td>
                    <td id="lblChangeInstalls" class="big-font percent-box">
                    </td>
                </tr>
            </table> -->

            <table class="stats-number" style="margin-top: 15px;">
              <tr id="trNewInstalls">
                <td>
                    <span id="uniqueInstalls" style="display:none;"></span>
                    <span id="lblNewInstalls" style="font-weight: 500;"></span>
                    <span id="lblNewInstallss" style="display: none;" ></span>
                </td>
                <td id="lblChangeInstalls" class="percent-font"></td>
                <td style="font-size: 6px;padding-top: 6px;padding-left: 1px">
                  <div id="i-uparrow" style="display:none;">
                    <i class="fa fa-2x fa-arrow-up widget-arrow"></i>
                  </div>
                  <div id="i-downarrow" style="display:none;">
                    <i class="fa fa-2x fa-arrow-down widget-arrow"></i>
                  </div>
                </td>
              </tr>
            </table>
            <div class="stats-link">
                <a href="javascript:;"><i id="i-downloadLink" title="Download Installs Csv" class="fa fa-2x fa-download" style="cursor:pointer; float:left;" href="#modal-dialog" data-toggle="modal"></i> <span class="view-details" data-page="dashboard?action=installs">View Detail <i class="fa fa-arrow-circle-o-right"></i></span></a>
            </div>
        </div>
    </div>
    <!-- end col-3 -->
    <!-- begin col-3 -->
    <div class="col-md-3 col-sm-6" id="userHover" data-placement="top" data-trigger="hover" data-popover="true" data-html="true" data-toggle="tooltip" data-trigger="hover" data-container="body" data-title="">
        <div class="widget widget-stats bg-blue">
            <div class="stats-icon stats-icon-lg"><img src="assets/img/users-widget.svg" alt="Users" /></div>
            <div class="stats-title">USERS</div>
            <!-- <table class="stats-number" style="margin-top: 25px;">
                <tr>
                    <td class="wavy"><span id="totalUsers" ></span></td>
                    <td style="font-size: 8px;width:20%;text-align:right;">
                                <div id="users-uparrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-up"></i>
                                </div>
                                <div id="users-downarrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-down"></i>
                                </div>
                    </td>
                    <td id="lblUserChange" style="font-size:25px;font-weight:400;width:20%;padding-left:5px;">
                    </td>
                </tr>
            </table> -->
            <!-- <table class="table">
                <tbody>
                    <tr>
                        <td style="width:50%;padding:3px">Avg. DAU</td>
                        <td style="width:50% ;text-align:right;padding:3px" id="tdDAU"></td>
                    </tr>
                    <tr>
                        <td style="width:80%;padding:3px" >MAU &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><%=cMonth%></span></td>
                        <td style="width:20%;text-align:right;padding:3px" id="tdMAU"></td>
                    </tr>
                </tbody>
            </table> -->
            <table class="stats-number" style="margin-top: 15px;">
              <tr>
                <td class="wavy"><span id="totalUsers" style="font-weight: 500;"></span></td>
                <td style="font-size:6px;padding-top: 6px;padding-left: 1px">
                  <div id="users-uparrow" style="display:none">
                    <i class="fa fa-2x fa-arrow-up widget-arrow"></i>
                  </div>
                  <div id="users-downarrow" style="display:none">
                    <i class="fa fa-2x fa-arrow-down widget-arrow"></i>
                  </div>
                </td>
                <td id="lblUserChange" style="font-size:25px;font-weight:400;width:20%;padding-left:5px;">
                </td>
              </tr>
            </table>
            <div class="stats-link">
                <a href="dashboard?action=users#/users/getall">View Detail <i class="fa fa-arrow-circle-o-right"></i></a>
            </div>
        </div>
    </div>
    <!-- end col-3 -->
    <!-- begin col-3 -->
    <div class="col-md-3 col-sm-6">
        <div class="widget widget-stats bg-purple">
            <div class="stats-icon stats-icon-lg"><img src="assets/img/engagement-widget.svg" alt="Engagement" /></div>
            <div class="stats-title">ENGAGEMENT</div>
            <!-- <table class="stats-number" style="margin-top: 25px;">
                <tr>
                    <td style="width:60%;">
                        <span id="lblTotalSessions"></span></td>
                    <td style="font-size: 10px;width:20%;text-align:right;">
                                <div id="s-uparrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-up"></i>
                                </div>
                                <div id="s-downarrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-down"></i>
                                </div>
                    </td>
                    <td id="lblChangeTotalSessions" class="big-font percent-box">
                    </td>

                </tr>
                <tr style="height:63px;">
                    <td>&nbsp;</td>
                </tr>
            </table> -->
            <table class="stats-number" style="margin-top: 15px;">
              <tr>
                <td>
                  <span id="lblTotalSessions" style="font-weight: 500;">354676</span></td>
                <td id="lblChangeTotalSessions" class="percent-font">30%</td>
                <td style="font-size: 6px;padding-top: 6px;padding-left: 1px">
                    <div id="s-uparrow" style="display:none">
                        <i class="fa fa-2x fa-arrow-up widget-arrow"></i>
                    </div>
                    <div id="s-downarrow" style="display:none">
                        <i class="fa fa-2x fa-arrow-down widget-arrow"></i>
                    </div>
                </td>
              </tr>
            </table>
            <div class="stats-link">
                <a href="dashboard?action=insideapp">View Detail <i class="fa fa-arrow-circle-o-right"></i></a>
            </div>
        </div>
    </div>
    <!-- end col-3 -->
    <!-- begin col-3 -->
    <div class="col-md-3 col-sm-6" 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="">
        <div class="widget widget-stats bg-red">
            <div class="stats-icon stats-icon-lg">
                <img src="assets/img/uninstalls-widget.svg" alt="Uninstalls" />
            </div>
            <div class="stats-title">UNINSTALLS</div>
            <!-- <table class="stats-number" style="margin-top: 25px;margin-bottom:0px">
                <tr>
                    <td style="width:60%;">
                        <span id="uniqueChurn" style="display:none;"></span>
                    <span id="lblTotalChurn"></span>
                    <span id="lblTotalChurns" style="display: none;"></span>
                    </td>
                    <td style="font-size: 10px;width:20%;text-align:right;">
                                <div id="c-uparrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-up"></i>
                                </div>
                                <div id="c-downarrow" style="display:none">
                                    <i class="fa fa-2x fa-arrow-down"></i>
                                </div>
                    </td>
                    <td id="lblChangeTotalChurn" class="big-font percent-box">
                    </td>
                </tr>
                <tr style="height:63px;" class="uninstallTmpSpace">
                    <td>&nbsp;</td>
                </tr>
            </table>
            <table style="width:100%;display:none;text-align:center; margin-top:-17px; margin-bottom:0px;" id="tblRisk" class="stats-number">
                <tr>
                    <td><span id="spanUsersAtRisk" style="color:red;font-size:22px;"></span> </td>
                </tr>
                <tr>
                    <td><button type="button" class="btn btn-primary m-r-5 m-b-5" id="btnLaunch" onclick="semusiChart.launchRetentionCampaign();" style="margin-top:0px!important; margin-bottom:0px!important;">Launch Retention Campaign</button></td>
                </tr>
            </table> -->

            <table class="stats-number" style="margin-top: 15px;">
              <tr>
                <td>
                    <span id="lblTotalChurn" style="font-weight: 500;"></span>
                    <span id="uniqueChurn" style="display:none;"></span>
                    <span id="lblTotalChurns" style="display: none;"></span>
                </td>
                <td id="lblChangeTotalChurn" class="percent-font"></td>
                <td style="font-size: 6px;padding-top: 6px;padding-left: 1px">
                  <div id="c-uparrow" style="display:none;">
                    <i class="fa fa-2x fa-arrow-up widget-arrow"></i>
                  </div>
                </td>
              </tr>
              <!-- <tr class="uninstallTmpSpace">
                    <td>&nbsp;</td>
                </tr> -->
            </table>
            <!-- <table style="text-align:center; margin-top:0px; margin-bottom:-5px;" id="tblRisk" class="stats-number">
              <tr>
                <td>
                  <button type="button" class="btn btn-primary btn-sm m-r-5 m-b-5 launch-retention-campaign" id="btnLaunch" onclick="semusiChart.launchRetentionCampaign();" style="margin-top:0px!important; margin-bottom:0px!important;">Launch Retention Campaign</button>
                </td>
              </tr>
            </table> -->
            <div class="stats-link">
                <a href="javascript:;"><i id="u-downloadLink" title="Download Uninstalls Csv" class="fa fa-2x fa-download" style="cursor:pointer;float:left;" href="#modal-dialog" data-toggle="modal"></i> <span class="view-details" data-page="dashboard?action=uninstalls">View Detail <i class="fa fa-arrow-circle-o-right"></i></span></a>
            </div>
        </div>
    </div>
    <!-- end col-3 -->

		<div class="col-md-12 ui-sortable">
	      <div class="panel panel-inverse panel-dropdown-hover" data-sortable-id="chart-js-2">
					<div class="panel-heading">

							<div class="btn-group pull-right">
									<select id="ddlPlatform" name="ddlPlatform" class="custom-select" style="display: none;" >
											<option value="all" selected>All</option>
											<option value="android">Android</option>
											<option value="ios">iOS</option>
									</select>
									<button type="button" id="swiu" class="btn btn-white btn-xs">Version</button>
									<button type="button" class="btn btn-white btn-xs dropdown-toggle" data-toggle="dropdown" style="margin-right: 10px;">
											<span class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu">
											<li><a class="theme-select" data-attr="all" href="javascript:void(0)">All</a></li>
											<li><a class="theme-select" data-attr="android" href="javascript:void(0)">Android</a></li>
											<li><a class="theme-select" data-attr="ios" href="javascript:void(0)">iOS</a></li>
									</ul>
									<i id="sources-downloadLink" title="Download Source Wise Installs/Uninstalls" class="fa fa-2x fa-download" style="cursor:pointer" ></i>
							</div>
							<h5 class="panel-title p-heading" >Source Wise Installs/Uninstalls</h5>
					</div>
					<div class="panel-body">
							<table id="tblSources" width="100%">
										<thead>
											<th style="padding-right:5px;text-align:right;width:8%">Avg CPI</th>
										<th style="padding-right:5px;text-align:right;width:8%">Installs</th>
										<th width="22%"></th>
										<th style="text-align:center;width:20%">Source</th>
										<th width="22%"></th>
										<th style="padding-right:5px;text-align:right;width:10%">Uninstalls</th>
										<th style="text-align:right;width:10%;border:none;"></th>
										</thead>
										<tbody style="border:1px solid;">

										</tbody>

									</table>
									<span id="lnkMoreSources" style="float: right;padding-right: 1%;display:none;cursor:pointer" onclick="showAllSources();">+more</span>
					</div>
			 </div>
	 </div>
</div>
<div class="row">
	<div class="col-md-12 ui-sortable">
	  <div class="panel panel-inverse panel-dropdown-hover" data-sortable-id="chart-js-2">
	    <div class="panel-heading">
	      <h4 class="panel-title p-heading">Cohort Retention</h4>
	    </div>
	    <div class="panel-body">
	      <div class="row">
	        <form class="form-inline">
	          <div class="checkbox m-r-10" style="padding-left:15px;">
	            <label>
	              <input id="chkPercentage" type="checkbox" class="BSswitch" data-label-text="ON" data-on-color="success" data-off-color="danger" style="margin-right: 5px;"> Show Percentage
	            </label>
	          </div>
	          <button type="button" id="btnView" class="btn btn-sm btn-primary m-r-10 cohort-view-button pull-right">View</button>
	          <div class="input-group input-daterange pull-right" style="margin-right: 10px;">

	            <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 pull-right">
	            <label style="margin-right: 10px;">Period</label>
	            <select id="ddlCohortDateFilter" class="form-control">
	              <option value="daily">D+1 (Daily)</option>
	              <option value="weekly">D+7 (Weekly)</option>
	              <option value="monthly" selected>D+30 (Monthly)</option>
	              <option value="yearly">Yearly</option>
	            </select>
	          </div>
	        </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>
<div class="row" id="divAllSources" style="display:none">
    <div class="panel panel-info">
            <div class="panel-heading">

                <h4 class="panel-title p-heading" >Source Wise Installs/Uninstalls
                    <span style="float:right;cursor:pointer;" onclick="goToHome('divAllSources');">Back</span>
                </h4>
            </div>
            <div class="panel-body">

                <div class="col-md-12 col-sm-12 ui-sortable">
                    <table id="tblSourcesAll" width="100%">
                        <thead>
                            <th style="padding-right:5px;text-align:right;width:8%">Avg CPI</th>
                            <th style="padding-right:5px;text-align:right;width:8%">Installs</th>
                            <th width="22%"></th>
                            <th style="text-align:center;width:20%">Source</th>
                            <th width="22%"></th>
                            <th style="padding-right:5px;text-align:right;width:10%">Uninstalls</th>
                            <th style="text-align:right;width:10%;border:none;"></th>
                        </thead>
                        <tbody style="border:1px solid;">

                        </tbody>
                    </table>

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

<div class="row" id="divNodata" style="display:none">
    <h1 class="page-header">
        <% for (var i = 0; i < userOfApps.length; i++) { %>
                <% if(userOfApps[i]._id == currentappid) { %>
                    <%= userOfApps[i].name %>
                <% } %>
        <% } %>
    </h1>
    <img id="Dashbordblur_Image" src="images/dashboard/dashboardblur.png" style="opacity:0.3">
</div>

<!-- Dialog for download Start-->
<div class="modal fade" id="modal-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">Download Data</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">

                        <div class="col-md-12">
                            <div class="checkbox" id="divDownloadAll">
                                <label>
                                    <input type="checkbox" value="" name="downloadOptions" id="chkDownloadAll">
                                    Download All
                                </label>
                            </div>
                            <div class="checkbox" id="divDownloadByDate">
                                <label>
                                    <input type="checkbox" value="" name="downloadOptions" id="chkDownloadByDate">
                                    Download users who have <span id="spanTypeText">uninstalled</span> from
                                </label>
                                <input type="text" style="width:100px" id="txtStartDate"> to <input type="text" style="width:100px" id="txtEndDate" >
                            </div>
                            <div class="checkbox" id="divDownloadBySessions">
                                <label>
                                    <input type="checkbox" value="" name="downloadOptions" id="chkDownloadBySessions">
                                    Download users who have uninstalled and had
                                </label>
                                <select id="ddlSessionOperator">
                                    <option value="$eq">=</option>
                                    <option value="$gt">&gt;</option>
                                    <option value="$gte">&gt;=</option>
                                    <option value="$lt">&lt;</option>
                                    <option value="$lte">&lt;=</option>
                                </select>
                                <input type="text" style="width:90px" id="txtSessionVal">
                                sessions
                            </div>
                            <div class="checkbox" id="divDownloadByDuration">
                                <label>
                                    <input type="checkbox" value="" name="downloadOptions" id="chkDownloadByDuration">Download users who have uninstalled and used the app for
                                </label>
                                <select id="ddlDurationOperator">
                                    <option value="$eq">=</option>
                                    <option value="$gt">&gt;</option>
                                    <option value="$gte">&gt;=</option>
                                    <option value="$lt">&lt;</option>
                                    <option value="$lte">&lt;=</option>
                                </select>
                                <input type="text" style="width:90px" id="txtDurationVal">
                                minutes
                            </div>
                        </div>
                    </div>
                </form>
                <!--Note: If the download file size is > 16MB it will be emailed to your account.-->
            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-sm btn-white close-model" data-dismiss="modal">Close</a>
                <a href="javascript:constructDownloadFilterQuery();" class="btn btn-sm btn-success">Download</a>
            </div>
        </div>
    </div>
</div>
<!-- Dialog for download End-->
