<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<style>
	

.nav {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
}

.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 0 6px;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: .3s;
}

.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}

.nav-item:not(.is-active):hover {
  color: #333;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: .4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav {
    overflow: auto;
  }
}

.nav2 {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
}

.nav-item2 {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: .3s;
  margin: 0 6px;
  z-index: 1;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item2:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: .3s;
}

.nav-item2:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}

.nav-item2:not(.is-active):hover {
  color: #333;
}

.nav-indicator2 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: .4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav2 {
    overflow: auto;
  }
}
</style>
<div class="content_wrapper">

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>市场投放地区</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-inline" role="form" method="POST" action="#operate/marketLaunch/2" name="stanpform">
                                        <input type="hidden" name="payuserpost" value="1">
                                        <span class="gap"></span>
                                        <div class="form-group">
                                                <label>开始时间</label>
                                                <input type="text" class="form-control datetimepicker" value="<?php if($stime) echo $stime;?>" placeholder="开始时间" name="payuserindex_stime" />
                                        </div>
                                        <span class="gap"></span>
                                        <div class="form-group">
                                                <label>结束时间</label>
                                                <input type="text" class="form-control datetimepicker" value="<?php if($etime) echo $etime;?>" placeholder="结束时间" name="payuserindex_etime" />
                                        </div>
                                        <button type="submit" class="btn btn-primary">查询</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
        
        
        <div class="row">
            <div class="col-sm-12">
            	<nav class="nav"> 
            		<?php foreach($country as $key => $row){ ?>
					<a href="#" class="nav-item market-nav" active-color="orange"><?php echo $row; ?></a> 
					<?php } ?>
					<span class="nav-indicator" style="width: 104px; background-color: rebeccapurple;"></span>
				</nav>
				<hr>
				<div class="tab-content">
					<?php foreach($country as $key => $row){ ?>
                    <div class="tab-pane market-nav-box">
                    	<nav class="nav2"> 
	                    	<?php foreach($adType[$row] as $k => $vo){ ?>
								<a href="#" class="nav-item2 market-nav-<?php echo $key;?>" active-color="orange"><?php echo $vo; ?></a> 
							<?php } ?>
							
						</nav>
						
						<div class="tab-content">
							<?php foreach($adType[$row] as $k => $vo){ ?>
							<div class="tab-pane market-nav-box-<?php echo $key;?>">
								
								<div class="table-responsive">
				                    <table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
				                    	<thead>
											<tr>
												<th>序号</th>
												<th>广告说明</th>
												<th>展示次数</th>
												<th>千次展示费用</th>
												<th>点击量</th>
												<th>点击率</th>
												<th>转化率</th>
												<th>应用安装</th>
												<th>单次安装费用</th>
												<th>花费金额</th>
												<th>投放人</th>
												<th>设计师</th>
											</tr>
										</thead>
										<tbody>
											<?php
												foreach($data[$row][$vo] as $num => $temp){
											?>
												<tr>
													<td><?php echo $num+1;?></td>
													<td><?php echo $temp['name'];?></td>
													<td><?php echo $temp['kpi_values'][0];?></td>
													<td><?php echo round($temp['kpi_values'][11],2);?></td>
													<td><?php echo round($temp['kpi_values'][8],2);?></td>
													<td><?php echo round($temp['kpi_values'][12]*100,2);?></td>
													<td><?php echo (empty($temp['kpi_values'][8])?0:(round($temp['kpi_values'][2]/$temp['kpi_values'][8]*100,2))); ?></td>
													<td><?php echo $temp['kpi_values'][2]; ?></td>
													<td><?php echo $temp['kpi_values'][13]; ?></td>
													<td><?php echo $temp['kpi_values'][6]; ?></td>
													<td><?php echo $temp['people']; ?></td>
													<td></td>
												</tr>
											<?php
												}
											?>
										</tbody>
				                    </table>
				                </div>
							</div>
							<?php } ?>
						</div>
                    </div>
                    <?php } ?>
                    
                </div>
                
            </div>                    
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="--><?php //echo base_url().'public/js/chart/chart.js';?><!--"></script>-->
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>public/js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">
    //选择日期
    $('.datetimepicker').datepicker({
        language:'zh-CN',
        format:'yyyy-mm-dd',
        zIndexOffset:906  //控制z-index
    });
    
    $(document).on("click",".market-nav",function(){
    	var idx = $(this).index();
    	console.log(idx);
    	$(".market-nav-box").removeClass("active");
    	$(".market-nav-box").eq(idx).addClass("active");
    });
    <?php foreach($country as $key => $row){ ?>
	    $(document).on("click",".market-nav-<?php echo $key; ?>",function(){
	    	var idx = $(this).index();
	    	console.log(idx);
	    	$(".market-nav-box-<?php echo $key; ?>").removeClass("active");
	    	$(".market-nav-box-<?php echo $key; ?>").eq(idx).addClass("active");
	    });
    <?php } ?>
    
</script>
<script>
	const indicator = document.querySelector('.nav-indicator');
	const items = document.querySelectorAll('.nav-item');
	
	function handleIndicator(el) {
	  items.forEach(item => {
	    item.classList.remove('is-active');
	    item.removeAttribute('style');
	  });
	
	  indicator.style.width = `${el.offsetWidth}px`;
	  indicator.style.left = `${el.offsetLeft}px`;
	  indicator.style.backgroundColor = el.getAttribute('active-color');
	
	  el.classList.add('is-active');
	  el.style.color = el.getAttribute('active-color');
	}
	
	
	items.forEach((item, index) => {
	  item.addEventListener('click', e => {handleIndicator(e.target);});
	  item.classList.contains('is-active') && handleIndicator(item);
	});
	
	const indicator2 = document.querySelector('.nav-indicator2');
	const items2 = document.querySelectorAll('.nav-item2');
	
	function handleIndicator2(el) {
	  items2.forEach(item => {
	    item.classList.remove('is-active');
	    item.removeAttribute('style');
	  });
	
	  indicator2.style.width = `${el.offsetWidth}px`;
	  indicator2.style.left = `${el.offsetLeft}px`;
	  indicator2.style.backgroundColor = el.getAttribute('active-color');
	
	  el.classList.add('is-active');
	  el.style.color = el.getAttribute('active-color');
	}
	
	
	items2.forEach((item, index) => {
	  item.addEventListener('click', e => {handleIndicator2(e.target);});
	  item.classList.contains('is-active') && handleIndicator2(item);
	});
</script>