<style>
    #content {
        overflow-x: hidden;
    }
</style>
<div class="row" id="divMainHeader" style="display:block">
    <form class="form-horizontal">
        <div class="form-group" style="width:30%;float:left;padding-left:40px;margin-bottom:0px;">
            <h1 class="page-header">
                Churn
            </h1>
        </div>
        <div class="form-group" style="width:35%;float:right;margin-bottom:0px;padding-right:25px;">
            <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">
                    <span></span>
                    <i class="fa fa-angle-down fa-fw"></i>
                </div>
            </div>
        </div>

    </form>

</div>

<div class="row" id="divMain" style="display:block">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12 col-sm-12 ui-sortable">
                <div class="panel panel-info ">
                    <div class="panel-heading"
                        style="display: flex; align-items: center; justify-content: space-between;">
                        <h4 class="panel-title p-heading">Churn</h4>
                        <a onclick="toggleplatformCharts()" type="button" style="text-decoration: none; height: 22px;
                        text-align: center;
                        padding-top: 0px;
                        margin-right: 5px;
                        margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; "><i style="display: none;"
                                class="fa fa-2x fa-pie-chart fa-pie-chart-platform"></i><i
                                class="fa fa-2x fa-table fa-table-platform"></i></a>
                    </div>
                    <div class="panel-body" style="padding:0px;">
                        <div id="platform_tableChart" style="height: 245px; display: none;">
                            <div class="widget widget-stats "
                                style="height:150px;border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;">
                                <table class="table table-striped">
                                    <tbody>
                                        <tr>
                                            <th>Platforms</th>
                                            <th>Total</th>
                                            <th>Unique</th>
                                            <th>Re-gained</th>
                                        </tr>
                                        <tr>
                                            <td>Android</td>
                                            <td id="androidTotal">0</td>
                                            <td id="androidUnique">0</td>
                                            <td id="androidRegainedUsers">0</td>
                                        </tr>
                                        <tr>
                                            <td>iOS</td>
                                            <td id="iosTotal">0</td>
                                            <td id="iosUnique">0</td>
                                            <td id="iosRegainedUsers">0</td>
                                        </tr>
                                    </tbody>

                                </table>

                            </div>
                        </div>
                        <div id="platform_pieChart" style="height: 245px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading"
                        style="display: flex; align-items: center; justify-content: space-between;">

                        <h6 class="panel-title p-heading"> App Versions</h6>
                        <div style="display:flex; align-items: center;">
                            <a onclick="toggleOsCharts()" type="button" style="text-decoration: none; height: 22px;
                                    text-align: center;
                                    padding-top: 0px;
                                    margin-right: 5px;
                                    margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; "><i
                                    style="display: none;" class="fa fa-2x fa-pie-chart fa-pie-chart-os"></i><i
                                    class="fa fa-2x fa-table fa-table-os"></i></a>
                            <div class="btn-group pull-right">
                                <select id="ddlAppPlatform" 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="appPltf" 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: 5px;">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a class="app-select" data-attr="all" href="javascript:void(0)">All</a></li>
                                    <li><a class="app-select" data-attr="android" href="javascript:void(0)">Android</a>
                                    </li>
                                    <li><a class="app-select" data-attr="web" href="javascript:void(0)">Web</a></li>
                                    <li><a class="app-select" data-attr="ios" href="javascript:void(0)">iOS</a></li>
                                </ul>
                                <!--  <div class="panel-heading-btn"> -->
                                <i id="topappversions-downloadLink" title="Download App Version Csv"
                                    class="fa fa-2x fa-download" style="cursor:pointer"></i><!-- </div> -->
                            </div>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div id="os__tableChart">
                            <div class="col-md-12 col-sm-12 ui-sortable">
                                <div class="widget widget-stats"
                                    style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;padding:0px;">

                                    <table class="table table-striped" id="tblOS">
                                        <thead>
                                            <th style="padding:3px;">Version</th>
                                            <th style="padding:3px;">Total</th>
                                            <th style="padding:3px;"></th>

                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>

                                </div>

                            </div>
                        </div>

                        <div id="os__pieChart">
                            <div id="os__pie-content" style="height: 200px; padding: 0"></div>
                            <a class="uninstallclass" style="cursor: pointer;" class="pull-right">View
                                Detail <i class="fa fa-arrow-circle-o-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-info">
            <div class="panel-heading" style="display: flex;align-items: center; justify-content: space-between;">
                <h5 class="panel-title p-heading"> Locations</h5>

                <div style="display: flex; align-items: center;">
                    <!-- <a onclick="toggleLocationCharts()" type="button" style="text-decoration: none; height: 22px;
                    text-align: center;
                    padding-top: 0px;
                    margin-top: -8px; color: #fff; font-size: 20px; cursor: pointer; margin-right: 10px;"><i class="fa fa-2x fa-table fa-table-location"></i><i class="fa fa-2x fa-map-marker fa-map-marker-location" style="display: none;"></i></a> -->
                <div class="btn-group pull-right">
                    <!-- <div class="panel-heading-btn"> -->
                    <select id="ddlLocation" class="custom-select" style="display: none;">
                        <option value="cty" selected>City</option>
                        <option value="cc">Country</option>
                    </select>
                    <button type="button" id="locationTxt" class="btn btn-white btn-xs">Location</button>
                    <button type="button" class="btn btn-white btn-xs dropdown-toggle" data-toggle="dropdown"
                        style="margin-right: 5px;">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class="location-select" data-attr="cty" href="javascript:void(0)">City</a></li>
                        <li><a class="location-select" data-attr="cc" href="javascript:void(0)">Country</a></li>
                    </ul>
                    <i id="toplocations-downloadLink" title="Download Location Csv" class="fa fa-2x fa-download"
                        style="cursor:pointer"></i><!-- </div> -->
                </div>
                </div>
               
            </div>
            <div class="panel-body">
                <div id="location__tablechart">
                    <table class="table table-striped" id="tblLocation">
                        <thead>
                            <th style="padding:3px;">Location</th>
                            <th style="padding:3px;">Total</th>
                            <th style="padding:3px;"></th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div style="display: none;"  id="location__map">
                    <div class="container-fluid w-100 h-100 d-flex flex-column ">
                            <div style="background-color: white;">
                                <div class="row" style="height: 225px;">
                                    <div class="col-md-8" style="height:100%" id="container" >
                                    </div>
                                    <div class="col-md-4" style="height:100%" id="progressContent">
                                        
                                    </div>  
                                </div>
                            </div>
                        </div>
                        <a class="showLocationChartsAll" style="cursor: pointer; " class="pull-right">View Detail <i class="fa fa-arrow-circle-o-right"></i></a>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="row" id="divGraphs" style="display:block">
    <div class="col-md-12 ui-sortable">
        <div class="panel panel-info" data-sortable-id="chart-js-6">
            <div class="panel-heading">
                <div class="btn-group pull-right">
                    <div id="daywise-daterange" class="btn btn-white">
                        <span></span>
                        <i class="fa fa-angle-down fa-fw"></i>
                    </div>
                    <select id="ddlPlatform1" class="custom-select" style="display: none;">
                        <option value="all" selected>All</option>
                        <option value="android">Android</option>
                        <option value="ios">iOS</option>
                        <option value="web">Web</option>
                    </select>
                    <button type="button" id="dwu" 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: 3px;">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class="day-wise-select" data-attr="all">All</a></li>
                        <li><a class="day-wise-select" data-attr="android">Android</a></li>
                        <li><a class="day-wise-select" data-attr="ios">iOS</a></li>
                        <li><a class="day-wise-select" data-attr="web">Web</a></li>
                    </ul>
                    <!-- <div class="panel-heading-btn"> -->
                    <i id="daywise-downloadLink" title="Download Day Wise Csv" class="fa fa-2x fa-download"
                        style="cursor:pointer"></i><!-- </div> -->
                </div>
                <h5 class="panel-title p-heading">Day-Wise Churn</h5>
            </div>
            <div class="panel-body">

                <div>
                    <canvas id="dayWiseBarchart" height="450" width="900"></canvas>
                    <!-- <div id="legend1" class="legend"></div> -->
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12 ui-sortable">
        <div class="panel panel-info" data-sortable-id="chart-js-6">
            <div class="panel-heading">
                <div class="btn-group pull-right">
                    <div id="timewise-daterange" class="btn btn-white">
                        <span></span>
                        <i class="fa fa-angle-down fa-fw"></i>
                    </div>
                    <select id="ddlPlatform2" class="custom-select" style="display: none;">
                        <option value="all" selected>All</option>
                        <option value="android">Android</option>
                        <option value="ios">iOS</option>
                        <option value="web">Web</option>
                    </select>
                    <button type="button" id="twu" 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: 3px;">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class="time-wise-select" data-attr="all">All</a></li>
                        <li><a class="time-wise-select" data-attr="android">Android</a></li>
                        <li><a class="time-wise-select" data-attr="ios">iOS</a></li>
                        <li><a class="time-wise-select" data-attr="web">Web</a></li>
                    </ul>
                    <!-- <div class="panel-heading-btn"> -->
                    <i id="hourwise-downloadLink" title="Downlaod TimeWise Csv" class="fa fa-2x fa-download"
                        style="cursor:pointer"></i><!-- </div> -->
                </div>
                <h4 class="panel-title p-heading">Time-Wise Churn</h4>
            </div>
            <div class="panel-body">
                <div>
                    <canvas id="timeWiseBarchart" height="450" width="900"></canvas>
                    <!-- <div id="legend2" class="legend"></div> -->
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" id="divOSInstalls" style="display:none">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <!-- <i id="hourwise-downloadLink" class="fa fa-2x fa-download" style="cursor:pointer"></i> -->
            </div>
            <h4 class="panel-title p-heading">Platform wise Un Acquisition
                <span style="float:right;cursor:pointer;" onclick="goToHome('divOSInstalls');">Back</span>
            </h4>

        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered" id="tblOsAll">
                <thead>
                    <th>Platform</th>
                    <th>Version</th>
                    <th>Total</th>
                    <th></th>
                </thead>
            </table>
        </div>
    </div>
</div>

<div class="row" id="divLocationInstalls" style="display:none">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h4 class="panel-title p-heading">Location Wise Churn
                <span style="float:right;cursor:pointer" value='divLocationInstalls' class="goToHomeNew">Back</span>
            </h4>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered" id="tblLocationAll">
                <thead>
                    <th>Location</th>
                    <th>Total</th>
                    <th></th>
                </thead>
            </table>
        </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 Acquisition/Churn
                <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%">Acquisition</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%">Churn</th>
                        <th style="text-align:right;width:10%;border:none;"></th>
                    </thead>
                    <tbody style="border:1px solid;">

                    </tbody>
                </table>

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

<div id="divOSChurnPieData" style="display: none;">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h4 class="panel-title p-heading">Platform wise Churn
                <span style="float:right;cursor:pointer;" class="goToHomeNew">Back</span>
            </h4>

        </div>
        <div class="panel-body" id="os__pie-content-all" style="height: 95vh; padding: 0;">

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

<div  id="world_chart" style="display:none">
    <div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title p-heading">Churn World-Wide
            <span style="float:right;cursor:pointer" class="goToHomeNew">Back</span>
        </h4>
    </div>
<div  class="container-fluid w-100 h-100 d-flex flex-column p-2 " style="background-color: #b2ebf2;">
    <div class="d-flex flex-column w-100 h-100" style="background-color: white;">
   
        <div class="row world_all">
            <div class="col-md-8" id="containerAll" style="height: 80vh;">
            </div>
            <div class="col-md-4" id="progressContentAll">
                
            </div>  
        </div>
    </div>
</div>
</div>
</div>