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

?>

<!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>

    <style>
       table {
           width: 100%;
           border-collapse: collapse;
           margin-bottom: 20px;
       }
       th, td {
           border: 1px solid #ddd;
           padding: 8px;
           text-align: left;
       }
       th {
           background-color: #8f0000;
           font-weight: bold;
           text-align: center;
       }
       td {
           text-align: left; /* Left alignment for table cells */
       }
       td.cost {
           text-align: right; /* Right alignment for cost cells */
       }
       tr:nth-child(even) {
           background-color: #8f0000;
       }
    </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="container">
        <div class="header-wrapper">
            <div class="logo">
                <a href="index.php">
                    <img src="./assets/images/logo/nkn-logo-horizontal.png" alt="logo">
                </a>
            </div>
        </div>
    </div>
</header>
<!-- ==========Header-Section========== -->
        <br><br><br><br>
        <!-- ==========Blog-Section========== -->
        <section class="blog-section padding-top">
            <div class="container">
                <div class="row justify-content-center mb-30-none">
                    <div class="col-lg-12 mb-10 mb-lg-0">
                        <article>
                            <div class="post-item post-details">
                                <div class="post-thumb">
                                    <img src="/assets/images/poster.jpeg" alt="blog">
                                </div>
                                <div class="post-content">
                                    <div class="content">
                                        <div class="entry-content p-0">
                                            <div class="left">
                                                <span class="date">Registreation Closing Date : 01-04-2026 11:59 PM </span>
                                            </div>
                                        </div>
                                        <div class="post-header">
                                            <h4 class="m-title">
                                                NATIONAL LEVEL STEM & ICT QUIZ COMPETITION 2026
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </section>
        <!-- ==========Blog-Section========== -->


    <!-- ==========Event-Section========== -->
    <div class="event-facility">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="checkout-widget checkout-contact">
                        <center><input type="button" id="btnVerified" name="btnVerified" value="Verify Registration" class="custom-button" onclick="openVerify()"></center>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ==========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' ?>

    <script>
        document.getElementById("tel1").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters

            if (value.length > 3) value = value.slice(0, 3) + "-" + value.slice(3); // Add hyphen after first 3 digits
            if (value.length > 11) value = value.slice(0, 12); // Limit to 12 characters (XXX-XXXXXXXX)

            e.target.value = value;
        });

        document.getElementById("tel2").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters

            if (value.length > 3) value = value.slice(0, 3) + "-" + value.slice(3); // Add hyphen after first 3 digits
            if (value.length > 11) value = value.slice(0, 12); // Limit to 12 characters (XXX-XXXXXXXX)

            e.target.value = value;
        });

        document.getElementById("tel3").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters

            if (value.length > 3) value = value.slice(0, 3) + "-" + value.slice(3); // Add hyphen after first 3 digits
            if (value.length > 11) value = value.slice(0, 12); // Limit to 12 characters (XXX-XXXXXXXX)

            e.target.value = value;
        });

        document.getElementById("regno1").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters
            if (value.length > 6) value = value.slice(0, 6) + "-" + value.slice(6);
            if (value.length > 9) value = value.slice(0, 9) + "-" + value.slice(9, 13);
            e.target.value = value.slice(0, 15);
        });
        document.getElementById("regno2").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters
            if (value.length > 6) value = value.slice(0, 6) + "-" + value.slice(6);
            if (value.length > 9) value = value.slice(0, 9) + "-" + value.slice(9, 13);
            e.target.value = value.slice(0, 15);
        });
        document.getElementById("regno3").addEventListener("input", function(e) {
            let value = e.target.value.replace(/\D/g, ""); // Remove non-numeric characters
            if (value.length > 6) value = value.slice(0, 6) + "-" + value.slice(6);
            if (value.length > 9) value = value.slice(0, 9) + "-" + value.slice(9, 13);
            e.target.value = value.slice(0, 15);
        });

        document.getElementById("category").addEventListener("change", function() {
            let selectedValue = this.value;
            let orgnameInput = document.getElementById("orgname");

            // Array of categories that should disable the input field
            let disableCategories = ["5", "6", "7", "10", "11"];

            // Disable input if the selected value is in the list, otherwise enable it
            if (disableCategories.includes(selectedValue)) {
                orgnameInput.disabled = true;
                orgnameInput.value = "MAKLUMAT TIDAK PERLUKAN"; // Clear input when disabled
            } else {
                orgnameInput.disabled = false;
                orgnameInput.value = "";
            }
        });

    </script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function openVerify() {
    window.location.href = "verify-registration.php";
}
</script>

</body>

</html>
