<!---Modal for more data--->
<style>
    #content {
        overflow-x: hidden;
    }
</style>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

<!----Modal end--->

<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">
				Acquisition
			</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 ui-sortable">
		<div class="panel panel-info" data-sortable-id="chart-js-6">
            <div class="panel-heading">
                <div style="display:flex; align-items: center; justify-content: space-between;">
                <h5 class="panel-title p-heading" >Acquisition Sources</h5>
                 <div style="display: flex; align-items: center;">      
                <a id="toggleSourceChats" type="button" style="text-decoration: none; height: 22px;
                text-align: center;
                padding-top: 0px;
                margin-top: -4px; color: #fff; font-size: 20px; margin-right: 10px; cursor: pointer; "><i style="display: none;"  class="fa fa-2x fa-pie-chart fa-pie-chart-source"></i><i class="fa fa-2x fa-table fa-table-source"></i></a>
                  <div class="btn-group pull-right">
                    <!-- <div style="margin-bottom:5px;"> -->

                        <select id="ddlPlatform" 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="Acquisitionource" 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 id="acquisitionSources" class="dropdown-menu" role="menu">
                            <li><a class="install-select" data-attr="all" href="javascript:;">All</a></li>
                            <li><a class="install-select" data-attr="android" href="javascript:;">Android</a></li>
                            <li><a class="install-select" data-attr="ios" href="javascript:;">iOS</a></li>
                            <li><a class="install-select" data-attr="web" href="javascript:;">Web</a></li>
                        </ul> 
                        <i id="sources-downloadLink" title="Download Acquisition Sources" class="fa fa-2x fa-download" style="cursor:pointer" ></i> 
                    <!-- </div> -->
                </div>
            </div>
            </div>
               <!--  <div class="panel-heading-btn"><i id="sources-downloadLink" class="fa fa-2x fa-download" style="cursor:pointer" ></i></div> -->
            	
        	</div>
            <div class="panel-body" >
                <div id="source__tableChart">
                    <table class="table table-striped" id="tblSourceData"> 
                        <thead>
                            <th style="padding:3px;">Source</th>
                            
                            <th style="padding:3px;text-align:right;">New Acquisition</th>
                            <th style="padding:3px;text-align:right;">Repeat Acquisition</th>
                            <th style="padding:3px;text-align:right;">Total</th>
                        </thead>
                        <tbody>                                                     
                            </tbody>
                    </table>
                </div>

                <div id="source__pieChart" style="display: none;">
                        <div  id="source__pieContent"style="height: 230px; padding: 0"></div>
            </div>
        </div>
    </div>

	</div>

    <div class="col-md-4 ui-sortable" >
          
        <div class="panel panel-info" data-sortable-id="chart-js-6">
        		<div class="panel-heading" style="display: flex; align-items: center; justify-content: space-between;">
                    <h4 class="panel-title p-heading" >OS</h4>
                    <div style="display:flex; align-items: center;">
                          
                            <a id="toggleOsCharts" type="button" style="text-decoration: none; height: 22px;
                            text-align: center;
                            padding-top: 0px;
                            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" style="margin-left: 9px;">
                                    <select id="ddlAppPlatform" class="custom-select appos" 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="osSelect" 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 id="osDropdown" class="dropdown-menu" role="menu">
                                        <li><a class="os-select" data-attr="all" href="javascript:void(0)">All</a></li>
                                        <li><a class="os-select" data-attr="android" href="javascript:void(0)">Android</a></li>
                                        <li><a class="os-select" data-attr="ios" href="javascript:void(0)">iOS</a></li>
                                        <li><a class="os-select" data-attr="web" href="javascript:void(0)">Web</a></li>
                                    </ul>   
                                    <!-- <div class="panel-heading-btn"> -->
                                    <i id="topos-downloadLink" title="Downlaod OS Csv" class="fa fa-2x fa-download" style="cursor:pointer" ></i><!-- </div> -->
                                </div>
                            </div>

        		</div>
            <div class="panel-body" >            	            	
				<div class="widget widget-stats" style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;padding:0px;padding-top:12px;">

                        <div id="os__tableChart">
                            <table class="table table-striped" id="tblOS"> 
                                <thead>
                                    <th style="padding:3px;">Platform</th>
                                    <th style="padding:3px;">Total</th>
                                    <th style="padding:3px;"></th>
                                
                                </thead>
                                <tbody>                 
                                </tbody>
                            </table>
                     </div>
                     <img class="daywisegraph" style="width: 70px; height: 70px; margin-left: 50px;  position: relative; display: none;" src="<%= cdnUrl %>/assets/img/appice-loader.gif"/>      
                     <div id="os__pieChart">
                            <div  id="os__pie-content" style="height: 200px; padding: 0"></div>
                            <a id="installclass" 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="col-md-4">
         <div class="panel panel-info" style="display: none;" data-sortable-id="chart-js-6">
                <div class="panel-heading" style="display: flex;align-items: center; justify-content: space-between;">
                  <h4 class="panel-title p-heading" >Locations</h4>


                <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 style="float:right;margin-bottom:5px;"> -->
                            <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: 10px;">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="location-select" data-attr="cty" href="javascript:;">City</a></li>
                                <li><a class="location-select" data-attr="cc" href="javascript:;">Country</a></li>
                            </ul>   
                            <i id="toplocations-downloadLink" title="Downlaod Location Csv" class="fa fa-2x fa-download" style="cursor:pointer" ></i>
                    
                    </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>
                <img class="daywisegraph" style="width: 70px; height: 70px; margin-left: 50px;  position: relative; display: none;" src="<%= cdnUrl %>/assets/img/appice-loader.gif"/>                                         
                <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 class="panel panel-info" data-sortable-id="chart-js-6">
                    <div class="panel-heading" style="display: flex; align-items: center; justify-content: space-between;">
                        <h4 class="panel-title p-heading" >App Versions</h4>
                        <div style="display:flex; align-items: center;">
                            <div class="btn-group pull-right" style="margin-left: 9px;">
                                <select id="avByPlatform" class="avFilterByPlatform custom-select appos filter-sc">
                                    <option value="all" selected="true">All</option>
                                    <option value="android">Android</option>
                                    <option value="ios">iOS</option>
                                    <option value="web">Web</option>
                                </select>
                            </div>
                        </div>
                    </div>
                <div class="panel-body" >            	            	
                    <div class="widget widget-stats" style="border-top-left-radius:0px;border-top-right-radius:0px;margin-bottom:0px;color:#000;padding:0px;padding-top:12px;">     
                         <div id="av__pieChart">
                                <div  id="av_container" style="height: 250px; padding: 0"></div>
                         </div>
                    </div>    			 			                
                </div>
            </div>
        </div>    
        
</div>
<!-- app version chart html -->
<div class="row">
    
</div>    
<!-- Acquisition table -->
<div class="row" style="display: none;">
    <div class="col-md-12 ui-sortable dashboard" >
        <section class="dashboard-stats-table">
              <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">Acquisition</h4>
                    <div style="display:flex; align-items: center;">
                       <!--  filter -->
                        <div class="btn-group pull-right" style="margin-left: 9px;">
                            <select id="cmpSource" class="cmpSourceFilter custom-select appos filter-sc">
                                <option value="S" selected="true">Source</option>
                                <option value="C">Campaign</option>
                            </select> 
                        </div>
                        <!-- olatform filter -->
                        <!--  filter -->
                        <div class="btn-group pull-right" style="margin-left: 85px;">
                            <select id="cmpSourceByPlatform" onchange="cmpSourceFilterByPlatform(this)" class=" custom-select appos filter-sc">
                                <option value="all" selected="true">All</option>
                                <option value="android">Android</option>
                                <option value="ios">iOS</option>
                                <option value="web">Web</option>
                            </select> 
                        </div>
                        <!-- olatform filter -->
                    </div>
        		</div>
            </div>
            <div class="progres-header">
              <div class="prog-head-col one"><b>Source</b></div>
              <div class="prog-head-col two"><b>Acquisition</b></div>
              <div class="prog-head-col three"><b>Avg.CPI</b></div>
              <div class="prog-head-col four"><b>Spend</b></div>
            </div>
            <div class="progres-table-info" id="campaignSourceData">
              
            </div>
            
          </section>
    </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" style="width: 224px" >
                            <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="dwi" 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 id="dropdownMenuDayWise" class="dropdown-menu" role="menu">
                            <li><a class="daywise-select" data-attr="all" href="javascript:void(0)">All</a></li>
                            <li><a class="daywise-select" data-attr="android" href="javascript:void(0)">Android</a></li>
                            <li><a class="daywise-select" data-attr="ios" href="javascript:void(0)">iOS</a></li>
                            <li><a class="daywise-select" data-attr="web" href="javascript:void(0)">Web</a></li>
                        </ul>  
                    <i id="daywise-downloadLink" title="Download Day Wise Acquisition Csv" class="fa fa-2x fa-download" style="cursor:pointer" ></i>

                    <!-- <div class="panel-heading-btn"><i id="daywise-downloadLink" class="fa fa-2x fa-download" style="cursor:pointer" ></i></div> -->
                    </div>
                	<h4 class="panel-title p-heading" >Day-Wise Acquisition</h4>
            	</div>
                <div class="panel-body" >
                    <div style="float:right;margin-bottom:5px;">
                    	
                    		
                    </div>
                    <div>
                        <img class="daywisegraph" style="width: 100px; height: 100px; margin-top:10px; margin-left: 40%; position: relative; display: none;" src="<%= cdnUrl %>/assets/img/appice-loader.gif"/>
                    	<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" style="width:224px;" >
                            <span></span>
                            <i class="fa fa-angle-down fa-fw"></i>
                        </div>
                        <!-- <div class="panel-heading-btn"> -->
                        <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="twi" 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 id="dropdownMenuTimeWise" class="dropdown-menu" role="menu">
                            <li><a class="timewise-select" data-attr="all" href="javascript:;">All</a></li>
                            <li><a class="timewise-select" data-attr="android" href="javascript:;">Android</a></li>
                            <li><a class="timewise-select" data-attr="ios" href="javascript:;">iOS</a></li>
                            <li><a class="timewise-select" data-attr="web" href="javascript:;">Web</a></li>
                        </ul> 
                        <i id="hourwise-downloadLink" title="Downlaod Time Wise Acquisition Csv" class="fa fa-2x fa-download" style="cursor:pointer"></i><!-- </div> -->
                    </div>
        			<h4 class="panel-title p-heading" >Time-Wise Acquisition </h4>
        		</div>
            <div class="panel-body" >
            	<div style="float:right;margin-bottom:5px;">
            		
                		
                </div>

                <div>
                    <img class="daywisegraph" style="width: 100px; height: 100px; margin-top:10px; margin-left: 40%; position: relative; display: none;" src="<%= cdnUrl %>/assets/img/appice-loader.gif"/>
                	<canvas id="timeWiseBarchart"height="450" width="900" ></canvas>
                	<!-- <div id="legend2" class="legend"></div> -->
                </div>                        	
        	</div>
    	</div>
	</div>
 </div>
		       
<div class="row" id="divOSAcquisition" style="display:none">
		<div class="panel panel-info">
	    <div class="panel-heading">
	        <h4 class="panel-title p-heading">Platform wise Acquisition
	        	<span style="float:right;cursor:pointer;" class="goToHomeNew">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="divLocationAcquisition" style="display:none">
		<div class="panel panel-info">
	    <div class="panel-heading">
	        <h4 class="panel-title p-heading">Location Wise Acquisition
	        	<span style="float:right;cursor:pointer" class="goToHomeNew">Back</span>
	        </h4>
	    </div>
	    <div class="panel-body">
            <table class="table table-striped" id="tblLocationAll">
                <thead>
                 
                    <tr><th style="padding:3px;">Location</th>
                    <th style="padding:3px;">Total</th>
                    <th style="padding:3px;"></th>
                </tr>
            </thead>                         
                
            </table>
        </div>
	</div>
</div>
<div class="row" id="divSources" style="display:none">
		<div class="panel panel-info">
	    <div class="panel-heading">
	        <h4 class="panel-title p-heading">Acquisition Sources
	        	<span style="float:right;cursor:pointer" class="goToHomeNew">Back</span>
	        </h4>
	    </div>
	    <div class="panel-body">
	        <table class="table table-striped table-bordered" id="tblAllSources">
	        	<thead>
            		<th style="padding:3px;">Source</th>
            		<!-- <th style="padding:3px;">Avg CPI</th> -->
            		<th style="padding:3px;">New Acquisition</th>
            		<th style="padding:3px;">Repeat Acquisition</th>
            		<th style="padding:3px;">Total</th>
            	</thead>
	        </table>
	    </div>
	</div>
</div>
<div id="divOSAcquisitionPieData" style="display: none;">
    <div class="panel panel-info">
	    <div class="panel-heading">
	        <h4 class="panel-title p-heading">Platform wise Acquisition
	        	<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 class="row" id="world_chart" style="display:none">
		<div class="panel panel-info">
	    <div class="panel-heading">
	        <h4 class="panel-title p-heading">Acquisition 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">
                <div class="col-md-8" id="containerAll" style="height: 80vh;">
                </div>
                <div class="col-md-4" id="progressContentAll">
                    
                </div>  
            </div>
        </div>
    </div>
    </div>
</div>
<script nonce="<%= nonce %>">
    $(".avFilterByPlatform").change(function(){
        avFilterByPlatform();
    });
    $(".cmpSourceFilter").change(function(){
        cmpSourceFilter($(this).val());
    })
    $("#cmpSourceByPlatform").change(function(){
        cmpSourceFilterByPlatform($(this).val());
    })
    $("#toggleSourceChats").click(function(){
        toggleSourceChats();
    });
    $("#toggleOsCharts").click(function(){
        toggleOsCharts();
    })

</script>
