<?php
require_once "connection.php";

/* ข้อมูลกิจกรรม */
$event = $conn->query("SELECT * FROM event LIMIT 1")->fetch_assoc();

/* จำนวนผู้เข้าแข่งขัน */
$totalPlayers = $conn->query("SELECT COUNT(*) AS total FROM players")
    ->fetch_assoc()['total'];
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>การแข่งขันกีฬา IPSC</title>

    <link rel="icon" type="image/png" href="assets/img/ipsc.png">
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.3">

    <!-- JS -->
    <script src="assets/js/clock.js?v=2" defer></script>
    <script src="assets/js/realtime.js?v=2" defer></script>
</head>
<body>

<div class="container">

    <!-- ================= TITLE ================= -->
    <h1 class="title">การแข่งขันกีฬา IPSC</h1>
    <p class="subtitle">
        วันที่ <span id="date"></span> |
        เวลา <span id="clock"></span>
    </p>

    <!-- ================= TAB ================= -->
    <div class="tab-menu">
        <button id="btnPlayers" class="active">รายชื่อผู้แข่งขัน</button>
        <button id="btnRanking">ตารางการแข่งขัน</button>
    </div>

    <div class="content">

        <!-- ================= PLAYERS ================= -->
        <div class="section" id="playersSection">
            <h2 class="section-title">รายชื่อผู้แข่งขัน</h2>

            <p class="total-player-text panel-title total">
                ผู้เข้าแข่งขันทั้งหมด <?= $totalPlayers ?> คน
            </p>


            <div class="player-grid" id="playerList"></div>
        </div>

        <!-- ================= RANKING ================= -->
        <div class="section" id="rankingSection" style="display:none;">
            <h2 class="section-title">ตารางการแข่งขัน</h2>

            <div class="scoreboard">

                <!-- LEFT PANEL -->
                <div class="left-panel">

                    <!-- 🔴 กำลังแข่งขัน -->
                    <h3 class="panel-title live">กำลังแข่งขัน</h3>
                    <div id="runningBox"></div>

                    <!-- 🟡 คนถัดไป (ถ้ามี) -->
                    <h3 class="panel-title next">ผู้แข่งขันรายต่อไป</h3>
                    <div id="nextList"></div>

                </div>

                <!-- RIGHT PANEL -->
                <div class="ranking-area">

                    <!-- PODIUM -->
                    <h3 class="panel-title podium">อันดับการแข่งขัน</h3>
                    <div id="podium" class="podium">
                        <div class="podium-item podium-1" data-rank="1"></div>
                        <div class="podium-item podium-2" data-rank="2"></div>
                        <div class="podium-item podium-3" data-rank="3"></div>
                    </div>

                    <!-- RANKING LIST -->
                    <div id="rankingList" class="ranking-list"></div>

                </div>



            </div>
        </div>

    </div>

    <footer class="footer">

        <div class="footer-inner">

            <!-- LINE TITLE -->
            <div class="footer-title">
                <span></span>
                <h2>PROJECT TEAM</h2>
                <span></span>
            </div>

            <!-- LOGO -->
            <div class="footer-logos">
                <img src="assets/img/cmtc.png" alt="CMTC Logo">
                <img src="assets/img/electronic-cmtc.png" alt="Electronic CMTC Logo">
            </div>

            <!-- TEXT -->
            <div class="footer-text">
                <h3>พัฒนาโดยนักศึกษา</h3>
                <p>
                    ระดับประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.)<br>
                    แผนกอิเล็กทรอนิกส์ สาขาเทคโนโลยีคอมพิวเตอร์<br>
                    วิทยาลัยเทคนิคเชียงใหม่ อ.เมือง จ.เชียงใหม่
                </p>
            </div>

            <!-- STUDENT LIST -->
            <div class="footer-students">
                <div class="student-card">
                    <span>01</span>
                    <p>นายวีรัชชัย โชคเมธากุล</p>
                    <small>รหัสนักศึกษา 67319090016</small>
                </div>
                <div class="student-card">
                    <span>02</span>
                    <p>นายก้องภพ ลุงแดง</p>
                    <small>รหัสนักศึกษา 67319090017</small>
                </div>
                <div class="student-card">
                    <span>03</span>
                    <p>นายภาคิน ก๋องปัน</p>
                    <small>รหัสนักศึกษา 67319090028</small>
                </div>
                <div class="student-card">
                    <span>04</span>
                    <p>นายกันติทัต แสงสุวรรณ</p>
                    <small>รหัสนักศึกษา 67319090029</small>
                </div>
            </div>

        </div>

    </footer>
</div>

<!-- ADMIN -->
<a href="admin/index.php" class="admin-btn">ADMIN</a>

</body>
</html>
