<?php
header("Content-Type: text/html; charset=UTF-8");
@include('system/config_eddga_b3eo2c84w.php');

$rank_limit = isset($rank_display) ? (int)$rank_display : 10;
if ($rank_limit <= 0) $rank_limit = 10;

$top_rows = array();

/*
  ดึง Top Vote + cache
*/
$cache_file = __DIR__ . '/cache_topvote.json';
$cache_ttl  = 30;

if (file_exists($cache_file) && (time() - filemtime($cache_file) <= $cache_ttl)) {
    $json = @file_get_contents($cache_file);
    $arr  = @json_decode($json, true);
    if (is_array($arr)) {
        $top_rows = $arr;
    }
}

if (count($top_rows) <= 0) {

    if (function_exists('mysql_query')) {

        $sql_top = "
        SELECT 
            t.account_id,
            t.total_point,
            l.userid,
            c.name AS char_name
        FROM (
            SELECT 
                account_id,
                total_point
            FROM duckdig
            WHERE total_point > 0
            ORDER BY total_point DESC
            LIMIT {$rank_limit}
        ) t
        LEFT JOIN login l
            ON l.account_id = t.account_id
        LEFT JOIN `char` c
            ON c.account_id = t.account_id
           AND c.char_id = (
                SELECT c2.char_id
                FROM `char` c2
                WHERE c2.account_id = t.account_id
                ORDER BY c2.base_level DESC, c2.base_exp DESC, c2.char_id DESC
                LIMIT 1
           )
        ORDER BY t.total_point DESC
        ";

        $res_top = @mysql_query($sql_top);
        if ($res_top) {
            while ($row = mysql_fetch_assoc($res_top)) {
                $top_rows[] = $row;
            }
        }

    } else if (class_exists('mysqli') && isset($db_host, $db_user, $db_pass, $db_name)) {

        $mysqli = @new mysqli($db_host, $db_user, $db_pass, $db_name);
        if (!$mysqli->connect_errno) {
            $mysqli->set_charset("utf8");

            $sql_top = "
            SELECT 
                t.account_id,
                t.total_point,
                l.userid,
                c.name AS char_name
            FROM (
                SELECT 
                    account_id,
                    total_point
                FROM duckdig
                WHERE total_point > 0
                ORDER BY total_point DESC
                LIMIT {$rank_limit}
            ) t
            LEFT JOIN login l
                ON l.account_id = t.account_id
            LEFT JOIN `char` c
                ON c.account_id = t.account_id
               AND c.char_id = (
                    SELECT c2.char_id
                    FROM `char` c2
                    WHERE c2.account_id = t.account_id
                    ORDER BY c2.base_level DESC, c2.base_exp DESC, c2.char_id DESC
                    LIMIT 1
               )
            ORDER BY t.total_point DESC
            ";

            if ($res = $mysqli->query($sql_top)) {
                while ($row = $res->fetch_assoc()) {
                    $top_rows[] = $row;
                }
                $res->free();
            }

            $mysqli->close();
        }
    }

    @file_put_contents($cache_file, json_encode($top_rows, JSON_UNESCAPED_UNICODE));
}

$news_cards = [
    [
        'title' => 'CARD COLLECTION',
        'desc'  => 'เอาใจสายชอบเก็บสะสม ยิ่งเก็บยิ่งเก่ง',
        'img'   => 'images/event/collection.png',
        'link'  => 'collection',
        'tag'   => 'update'
    ],
    [
        'title' => 'WORLD MAP',
        'desc'  => 'หยิบอาวุธ กางแผนที่ ตะลุยโลก Ragnarok',
        'img'   => 'images/event/worldmap.png',
        'link'  => 'maps_server',
        'tag'   => 'update'
    ],
    [
        'title' => 'VOTE SERVER',
        'desc'  => 'สะสมแต้มแลกรางวัลมากมาย',
        'img'   => 'images/event/vote_server.png',
        'link'  => 'vote_server',
        'tag'   => 'update'
    ],
    [
        'title' => 'CHARACTER PASS SYSTEM',
        'desc'  => 'เก็บเลเวลตัวละคร สะสมอาชีพ',
        'img'   => 'images/event/union.png',
        'link'  => 'characterpass',
        'tag'   => 'update'
    ],
    [
        'title' => 'GUILD UNION',
        'desc'  => 'สหกรณ์ Guild ร่วมแรงร่วมใจ พัฒนาสมาคม',
        'img'   => 'images/event/guild.png',
        'link'  => 'guild_union',
        'tag'   => 'update'
    ],
    [
        'title' => 'PET SYSTEM',
        'desc'  => 'ระบบสัตว์เลี้ยง',
        'img'   => 'images/event/pet.png',
        'link'  => 'pet_evolution',
        'tag'   => 'update'
    ],
    [
        'title' => 'RANK STATUS',
        'desc'  => 'เก็บสะสมยศ เพื่อครองความเป็น 1',
        'img'   => 'images/event/rank_status.png',
        'link'  => 'rank_status',
        'tag'   => 'update'
    ],
    [
        'title' => 'ENCHANTMENT',
        'desc'  => 'ระบบเพิ่มความสามารถอุปกรณ์',
        'img'   => 'images/event/option.png',
        'link'  => 'enchant',
        'tag'   => 'update'
    ],
    [
        'title' => 'GOVERNMENT BONDS',
        'desc'  => 'ระบบพันธบัตรรัฐบาล',
        'img'   => 'images/event/gvm.png',
        'link'  => 'government',
        'tag'   => 'update'
    ],
    [
        'title' => 'REFINE SYSTEM',
        'desc'  => 'ระบบตีบวกอุปกรณ์ครบเซ็ต',
        'img'   => 'images/event/refine.png',
        'link'  => 'refine',
        'tag'   => 'update'
    ],
    [
        'title' => 'PARTY PASS',
        'desc'  => 'ยิ่งรวมกัน ยิ่งได้เพิ่ม',
        'img'   => 'images/event/party.png',
        'link'  => 'party',
        'tag'   => 'update'
    ],
    [
        'title' => 'HELPER LEVELING',
        'desc'  => 'ระบบผู้ช่วยผจญภัย',
        'img'   => 'images/event/help.png',
        'link'  => 'helper',
        'tag'   => 'update'
    ],
    [
        'title' => 'ทอยเต๋า มหาสนุก',
        'desc'  => 'เปิดทุกวัน เวลา 19:55 เป็นต้นไป',
        'img'   => 'images/event/dice.png',
        'link'  => 'government',
        'tag'   => 'event'
    ],
];

function e($str) {
    return htmlspecialchars((string)$str, ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rheumatoid</title>
<link rel="shortcut icon" href="images/eddga_studio.png" type="image/x-icon">

<style>
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: Tahoma, Arial, sans-serif;
    color: #f5f7fb;
    background:
      radial-gradient(circle at top, rgba(92,76,180,.35), transparent 35%),
      linear-gradient(180deg, #0c1220 0%, #111a2d 40%, #0f1422 100%);
  }

  a { color: inherit; text-decoration: none; }

  .container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
  }

  .hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 24px;
  }

  .hero-box {
    position: relative;
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    background:
      linear-gradient(rgba(8,13,25,.45), rgba(8,13,25,.72)),
      url('images/nomnaa-pvp_09.png') center/cover no-repeat;
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    padding: 28px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .brand img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255,255,255,.08);
  }

  .brand-text h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .3px;
  }

  .brand-text p {
    margin: 6px 0 0;
    color: #c8d2ea;
    font-size: 14px;
  }

  .hero-bottom {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    align-items: end;
  }

  .hero-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 18px;
  }

  .hero-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.2;
  }

  .hero-card p {
    margin: 0;
    color: #d4def5;
    line-height: 1.7;
  }

  .online-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 132px;
    text-align: center;
    background: linear-gradient(135deg, rgba(46,180,90,.22), rgba(31,94,54,.16));
    border: 1px solid rgba(124,252,0,.22);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  }

  .online-box .label {
    color: #d9ffe2;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .online-box .count {
    font-size: 44px;
    font-weight: 900;
    color: #7CFC00;
    line-height: 1;
    text-shadow: 0 0 18px rgba(124,252,0,.28);
  }

  .online-box .sub {
    margin-top: 8px;
    color: #cce8d0;
    font-size: 13px;
  }

  .menu-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 22px;
  }

  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    transition: .22s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }

  .menu-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  }

  .section {
    padding: 22px 0 0;
  }

  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
  }

  .section-title h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
  }

  .section-title p {
    margin: 6px 0 0;
    color: #b7c3df;
    font-size: 14px;
  }

  .panel {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 18px 36px rgba(0,0,0,.2);
  }

  .feature-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
  }

  .slider-box iframe,
  .slider-fallback {
    width: 100%;
    min-height: 420px;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
  }

  .feature-buttons {
    display: grid;
    gap: 12px;
  }

  .feature-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 14px;
    text-align: center;
    border-radius: 16px;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(70,107,255,.18), rgba(70,107,255,.06));
    border: 1px solid rgba(116,144,255,.22);
    transition: .22s ease;
  }

  .feature-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
  }

  .rank-table-wrap {
    overflow-x: auto;
  }

  table.rank-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
  }

  .rank-table th,
  .rank-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .rank-table th {
    color: #9cb1de;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
  }

  .rank-table td {
    color: #eef3ff;
  }

  .rank-num {
    width: 72px;
    font-weight: 900;
  }

  .rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    background: rgba(255,255,255,.08);
  }

  .top1 { background: linear-gradient(135deg, #ffd76a, #ffb300); color: #332100; }
  .top2 { background: linear-gradient(135deg, #dbe3ef, #b0becf); color: #1c2430; }
  .top3 { background: linear-gradient(135deg, #efc39c, #c68642); color: #2a1809; }

  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .news-card {
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: .22s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
  }

  .news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.16);
  }

  .news-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255,255,255,.04);
  }

  .news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .28s ease;
  }

  .news-card:hover .news-image img {
    transform: scale(1.05);
  }

  .news-body {
    padding: 16px;
  }

  .news-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
  }

  .news-desc {
    margin: 0 0 12px;
    color: #ced8ef;
    line-height: 1.6;
    min-height: 50px;
  }

  .news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #9db0d9;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
  }

  .tag-update {
    background: rgba(44,169,255,.16);
    color: #87ceff;
    border: 1px solid rgba(44,169,255,.2);
  }

  .tag-event {
    background: rgba(255,189,44,.14);
    color: #ffd26f;
    border: 1px solid rgba(255,189,44,.2);
  }

  .footer {
    padding: 28px 0 42px;
    color: #94a7ce;
    text-align: center;
    font-size: 14px;
  }

  .empty-note {
    color: #c4d0ea;
    padding: 12px 0;
  }

  @media (max-width: 1100px) {
    .menu-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-layout { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-bottom { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    .container { width: min(100%, calc(100% - 20px)); }
    .hero { padding-top: 16px; }
    .hero-box { min-height: auto; }
    .hero-content { min-height: auto; padding: 18px; gap: 18px; }
    .brand-text h1 { font-size: 26px; }
    .hero-card h2 { font-size: 22px; }
    .menu-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; }
    .slider-box iframe, .slider-fallback { min-height: 260px; }
  }
</style>
</head>
<body>

<div class="container">
  <section class="hero">
    <div class="hero-box">
      <div class="hero-content">
        <div class="brand">
          <img src="images/eddga_studio.png" alt="logo">
          <div class="brand-text">
            <h1>Rheumatoid</h1>
            <p>หน้าแรกเซิร์ฟเวอร์แบบหน้าเดียว สะอาด อ่านง่าย และดูทันสมัย</p>
          </div>
        </div>

        <div class="hero-bottom">
          <div class="hero-card">
            <h2>พร้อมลุยทุกคอนเทนต์ในหน้าเดียว</h2>
            <p>
              รวมเมนูหลัก ข่าวสาร ระบบเด่น และอันดับผู้เล่นไว้ในหน้าเดียว
              โดยไม่ต้องพึ่งไฟล์ CSS ภายนอก ทำให้จัดการง่าย แก้ไขสะดวก
              และโหลดหน้าได้เป็นระเบียบมากขึ้น
            </p>
          </div>

          <div class="hero-card online-box">
            <div class="label">ผู้เล่นออนไลน์ตอนนี้</div>
            <div class="count"><span id="onlineCount">0</span></div>
            <div class="sub">อัปเดตอัตโนมัติทุก 5 วินาที</div>
          </div>
        </div>
      </div>
    </div>

    <div class="menu-grid">
      <a class="menu-btn" href="./">หน้าแรก</a>
      <a class="menu-btn" href="register" target="_blank" rel="noopener">สมัครสมาชิก</a>
      <a class="menu-btn" href="download" target="_blank" rel="noopener">ดาวน์โหลด</a>
      <a class="menu-btn" href="server_info" target="_blank" rel="noopener">ข้อมูลเซิร์ฟเวอร์</a>
      <a class="menu-btn" href="boss_info" target="_blank" rel="noopener">ข้อมูลบอส</a>
      <a class="menu-btn" href="donate" target="_blank" rel="noopener">เติมเงิน</a>
    </div>
  </section>

  <section class="section">
    <div class="section-title">
      <div>
        <h3>เมนูแนะนำ</h3>
        <p>เข้าถึงระบบสำคัญได้รวดเร็ว</p>
      </div>
    </div>

    <div class="panel feature-layout">
      <div class="feature-buttons">
        <a class="feature-btn" href="server_info" target="_blank" rel="noopener">SERVER INFO</a>
        <a class="feature-btn" href="boss_info" target="_blank" rel="noopener">BOSS INFO</a>
        <a class="feature-btn" href="woe_info" target="_blank" rel="noopener">WOE INFO</a>
        <a class="feature-btn" href="contents" target="_blank" rel="noopener">CONTENTS</a>
      </div>

      <div class="slider-box">
        <iframe
          src="slider/index.php"
          scrolling="no"
          allowtransparency="true"
          title="Slider"
        ></iframe>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="section-title">
      <div>
        <h3>อันดับ Top Vote</h3>
        <p>จัดอันดับตามคะแนนโหวตล่าสุด</p>
      </div>
    </div>

    <div class="panel rank-table-wrap">
      <?php if (!empty($top_rows)): ?>
        <table class="rank-table">
          <thead>
            <tr>
              <th style="width:80px;">อันดับ</th>
              <th>Account</th>
              <th>Character</th>
              <th style="width:160px;">Point</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($top_rows as $i => $row): ?>
              <?php
                $rank = $i + 1;
                $badgeClass = '';
                if ($rank === 1) $badgeClass = 'top1';
                else if ($rank === 2) $badgeClass = 'top2';
                else if ($rank === 3) $badgeClass = 'top3';
              ?>
              <tr>
                <td class="rank-num">
                  <span class="rank-badge <?php echo $badgeClass; ?>"><?php echo $rank; ?></span>
                </td>
                <td><?php echo e($row['userid'] ?? '-'); ?></td>
                <td><?php echo e($row['char_name'] ?? '-'); ?></td>
                <td><?php echo number_format((int)($row['total_point'] ?? 0)); ?></td>
              </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      <?php else: ?>
        <div class="empty-note">ยังไม่มีข้อมูลอันดับโหวต</div>
      <?php endif; ?>
    </div>
  </section>

  <section class="section">
    <div class="section-title">
      <div>
        <h3>ระบบและข่าวสารทั้งหมด</h3>
        <p>รวมคอนเทนต์เด่นทั้งหมดไว้ในหน้าเดียว</p>
      </div>
    </div>

    <div class="news-grid">
      <?php foreach ($news_cards as $card): ?>
        <a class="news-card" href="<?php echo e($card['link']); ?>" target="_blank" rel="noopener">
          <div class="news-image">
            <img src="<?php echo e($card['img']); ?>" alt="<?php echo e($card['title']); ?>">
          </div>
          <div class="news-body">
            <h4 class="news-title"><?php echo e($card['title']); ?></h4>
            <p class="news-desc"><?php echo e($card['desc']); ?></p>
            <div class="news-meta">
              <span>โพสต์ล่าสุด: 04-03-2569 13:06</span>
              <span class="tag <?php echo ($card['tag'] === 'event') ? 'tag-event' : 'tag-update'; ?>">
                <?php echo e($card['tag']); ?>
              </span>
            </div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  </section>

  <div class="footer">
    © <?php echo date('Y'); ?> Rheumatoid — Single file homepage
  </div>
</div>

<script>
  function updateOnline() {
    fetch('online.php?cache=' + Date.now())
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var el = document.getElementById('onlineCount');
        if (!el) return;

        if (data && (data.status === 'success' || data.ok === true)) {
          el.textContent = (data.online ?? 0);
        } else {
          el.textContent = '0';
        }
      })
      .catch(function () {
        var el = document.getElementById('onlineCount');
        if (el) el.textContent = '0';
      });
  }

  updateOnline();
  setInterval(updateOnline, 5000);
</script>

</body>
</html>