<?php
// 일간베스트
$sql_daily = "SELECT wr_id, wr_subject, wr_hit, wr_datetime 
              FROM {$g5['write_prefix']}{$bo_table}
              WHERE wr_is_comment = 0 
              AND wr_datetime >= date_sub(now(), interval 1 day)
              ORDER BY wr_hit DESC, wr_datetime DESC
              LIMIT 10";
$result_daily = sql_query($sql_daily);
// 주간베스트  
$sql_weekly = "SELECT wr_id, wr_subject, wr_hit, wr_datetime 
              FROM {$g5['write_prefix']}{$bo_table}
              WHERE wr_is_comment = 0 
              AND wr_datetime >= date_sub(now(), interval 7 day)
              ORDER BY wr_hit DESC, wr_datetime DESC
              LIMIT 10";
$result_weekly = sql_query($sql_weekly);
// 월간베스트
$sql_monthly = "SELECT wr_id, wr_subject, wr_hit, wr_datetime 
              FROM {$g5['write_prefix']}{$bo_table}
              WHERE wr_is_comment = 0 
              AND wr_datetime >= date_sub(now(), interval 30 day)
              ORDER BY wr_hit DESC, wr_datetime DESC
              LIMIT 10";
$result_monthly = sql_query($sql_monthly);
?>
<!-- 인기게시물 시작 -->
<div class="best_wrap">
  <div class="best_tabs">
    <button type="button" class="tab_btn active" data-tab="daily">일간베스트</button>
    <button type="button" class="tab_btn" data-tab="weekly">주간베스트</button>
    <button type="button" class="tab_btn" data-tab="monthly">월간베스트</button>
  </div>
  <!-- 일간베스트 -->
  <div id="daily" class="best_content active">
    <ul>
    <?php for($i=0; $row=sql_fetch_array($result_daily); $i++) { ?>
      <li>
        <span class="num"><?php echo $i+1 ?></span>
        <a href="<?php echo get_pretty_url($bo_table, $row['wr_id']); ?>">
          <?php echo $row['wr_subject']; ?>
          <span class="hit">조회 <?php echo number_format($row['wr_hit']); ?></span>
        </a>
      </li>
    <?php } ?>
    <?php if(sql_num_rows($result_daily) == 0) { ?>
      <li class="empty_li">아직 게시물이 없습니다.</li>
    <?php } ?>
    </ul>
  </div>
  <!-- 주간베스트 -->
  <div id="weekly" class="best_content">
    <ul>
    <?php for($i=0; $row=sql_fetch_array($result_weekly); $i++) { ?>
      <li>
        <span class="num"><?php echo $i+1 ?></span>
        <a href="<?php echo get_pretty_url($bo_table, $row['wr_id']); ?>">
          <?php echo $row['wr_subject']; ?>
          <span class="hit">조회 <?php echo number_format($row['wr_hit']); ?></span>
        </a>
      </li>
    <?php } ?>
    <?php if(sql_num_rows($result_weekly) == 0) { ?>
      <li class="empty_li">아직 게시물이 없습니다.</li>
    <?php } ?>
    </ul>
  </div>
  <!-- 월간베스트 -->
  <div id="monthly" class="best_content">
    <ul>
    <?php for($i=0; $row=sql_fetch_array($result_monthly); $i++) { ?>
      <li>
        <span class="num"><?php echo $i+1 ?></span>
        <a href="<?php echo get_pretty_url($bo_table, $row['wr_id']); ?>">
          <?php echo $row['wr_subject']; ?>
          <span class="hit">조회 <?php echo number_format($row['wr_hit']); ?></span>
        </a>
      </li>
    <?php } ?>
    <?php if(sql_num_rows($result_monthly) == 0) { ?>
      <li class="empty_li">아직 게시물이 없습니다.</li>
    <?php } ?>
    </ul>
  </div>
</div>
<style>
.best_wrap {
  margin:20px 0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:4px;
}
.best_tabs {
  display:flex;
  border-bottom:1px solid #ddd;
}
.best_tabs .tab_btn {
  flex:1;
  height:45px;
  border:0;
  background:none;
  font-size:14px;
  color:#666;
  cursor:pointer;
  position:relative;
}
.best_tabs .tab_btn.active {
  font-weight:bold;
  color:#000;
}
.best_tabs .tab_btn.active:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:2px;
  background:#000;
}
.best_content {
  display:none;
  padding:15px 20px;
}
.best_content.active {
  display:block;
}
.best_content ul {
  list-style:none;
}
.best_content li {
  display:flex;
  align-items:center;
  margin-bottom:12px;
  font-size:13px;
}
.best_content li:last-child {
  margin-bottom:0;
}
.best_content .num {
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-right:10px;
  background:#f3f3f3;
  border-radius:3px;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  line-height:20px; 
}
.best_content li:nth-child(-n+3) .num {
  background:#ff4e59;
  color:#fff;
}
.best_content a {
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.best_content .hit {
  float:right;
  color:#999;
  font-size:12px;
}
.best_content .empty_li {
  padding:30px 0;
  text-align:center;
  color:#999;
}
</style>
<script>
$(function(){
  // 탭 클릭
  $('.tab_btn').click(function(){
    var tab_id = $(this).attr('data-tab');
    
    $('.tab_btn').removeClass('active');
    $('.best_content').removeClass('active');
    
    $(this).addClass('active');
    $('#'+tab_id).addClass('active');
  });
});
</script>