<?php
    include('session.php');
    include('dbconn.php');

    // Fetch all participants
    $sql = "SELECT * FROM tblponggal125";
    $result = $conn->query($sql);

    $participants = [];
    while ($row = $result->fetch_assoc()) {
        // Store all names and IC numbers into an array
        if (!empty($row['Name1'])) {
            $participants[] = ['name' => $row['Name1'], 'ic' => $row['NRICMyKid1']];
        }
        if (!empty($row['Name2'])) {
            $participants[] = ['name' => $row['Name2'], 'ic' => $row['NRICMyKid2']];
        }
        if (!empty($row['Name3'])) {
            $participants[] = ['name' => $row['Name3'], 'ic' => $row['NRICMyKid3']];
        }
    }

    $conn->close();
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <?php include 'plugincss.php' ?>

    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">

    <title><?php echo $sitetitle ;?></title>

    <script>
        function drawWinner() {
            let participants = <?php echo json_encode($participants); ?>;
            if (participants.length === 0) {
                document.getElementById("winner").innerText = "-";
                return;
            }

            let countdown = 5;
            let winnerText = document.getElementById("winner");

            // Start countdown
            let countdownInterval = setInterval(function () {
                winnerText.innerText = countdown;
                document.getElementById("beep").play();
                countdown--;

                if (countdown < 0) {
                    clearInterval(countdownInterval);
                    let randomIndex = Math.floor(Math.random() * participants.length);
                    let winner = participants[randomIndex];
                    winnerText.innerText = "🎊 வெற்றியாளர் : \n" + winner.name;
                }
            }, 1000);
        }

        window.onload = function () {
            document.getElementById("winner").innerText = "யார் அந்த வெற்றியாளர்?";
        };
    </script>

    <style>
        #winner {
            font-size: 20px;
            font-weight: bold;
            color: red;
            text-align: center;
            padding: 10px;
            border: 2px solid red;
            border-radius: 10px;
            background-color: yellow;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>

</head>

<body>
    <!-- ==========Preloader========== -->
    <div class="preloader">
        <div class="preloader-inner">
            <div class="preloader-icon">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!-- ==========Preloader========== -->
    <!-- ==========Overlay========== -->
    <div class="overlay"></div>
    <a href="#0" class="scrollToTop">
        <i class="fas fa-angle-up"></i>
    </a>
    <!-- ==========Overlay========== -->

<!-- ==========Header-Section========== -->
<header class="header-section">
<div class="banner-content">
    <h1 class="title  cd-headline clip">
        <span class="animated-text cd-words-wrapper p-0 m-0">
            <b class="is-visible">125 ஆண்டு கால <br>வெற்றிக் கொண்டாட்டம்</b>
            <b>STC 125<br>பொங்கல் பண்டிகை<br>அதிர்ஷ்ட குலுக்கு</b>
        </span>
    </h1>
</div>
</header>

<style>
    .animated-text {
        font-size: 35px;
        font-weight: bold;
        text-align: center;
        animation: colorChange 3s infinite alternate;
    }

    @keyframes colorChange {
        0% { color: red; }
        50% { color: yellow; }
        100% { color: white; }
    }
</style>
<!-- ==========Header-Section========== -->
    <br><br><br>
    <!-- ==========Event-Section========== -->
    <section class="event-section padding-top padding-bottom">
        <div class="container">
            <div class="row flex-wrap-reverse justify-content-center">
                <div class="col-lg-12 mb-50 mb-lg-0">
                    <div class="filter-tab">
                        <div class="row mb-10 justify-content-center">
                            <div class="col-sm-12 col-lg-12">
                                <div class="event-grid">
                                    <div>
                                        <center><img src="https://125.sjktstc.edu.my/assets/images/event/ponggal-tamil.jpg" alt="event" width="100%" height="100%"></center>
                                    </div>
                                </div>
                                <button class="custom-button" onclick="drawWinner()">அதிர்ஷ்ட வெற்றியாளர்</button>
                                <br><br>
                                <audio id="beep" src="https://www.soundjay.com/button/beep-07.wav"></audio>
                                <h3 id="winner"></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ==========Event-Section========== -->

    <!-- ==========Newslater-Section========== -->
    <footer class="footer-section">
        <div class="container">
            <div class="footer-top">
                <div class="logo">
                </div>
                <ul class="social-icons">
                </ul>
            </div>
            <div class="footer-bottom">
                <div class="footer-bottom-area">
                    <div class="left">
                        <p><?php echo $copyrights ;?></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- ==========Newslater-Section========== -->
        <?php include 'pluginjs.php' ?>
</body>

</html>
