<?php
session_start();
if (isset($_SESSION['username'])) {
    $username = $_SESSION['username'];
    $role = $_SESSION['role'];
    $welcomeMessage = "Hei $username!<br>Tervetuloa Saimaan Shakkiseura Ry sivuille.<br><br>Tänään on " . date("d.m.Y") . ". Päivä ja kello on <span id='clock'></span>.<br>Toivottavasti viihdyt!"; 
    $loggedIn = true;
} else {
    $loggedIn = false;
    $welcomeMessage = "Hei,<br>Tervetuloa saimaan Saimaan Shakkiseura Ry sivuille!<br>Kirjaudu sisään tai rekisteröidy käyttäjäksi saadaksesi tietää meistä lisää<br>Liittyminen on täysin ilmaista";
}
?>
<!DOCTYPE html>
<html lang="fi">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="http://tietokanta.dy.fi:8088/konsta/test.css">
    <title>Saimaan Shakki</title>
</head>

<body>
    <div class="hide">
        <button id="scrollToTop"></button>
    </div>

    <div class="page-container">
        <div class="navwrap">
            <header>
                <h2 class="logo">Saimaan Shakki</h2>
                <nav class="navigation">
                    <!-- näytetään admin paneeli vain jos kirjautuneella henkilöllä on admin role -->
                    <?php if ($role === 'admin') { ?>
                    <a href="adminchatbackup.php">Ylläpidon paneeli</a>
                    <?php } ?>
                    <a href="toiminta.php">Tietoa meistä</a>
                    <!-- jos ei ole kirjautunut sisään näytetään kirjautumis painike -->
                    <?php if (!$loggedIn) { ?>
                    <button class="btnLogin-popup">Kirjaudu</button>
                    <!-- kirjautuneelle näyetään uloskirjautuminen ja muut -->
                    <?php } else { ?>
                    <a href="userchat.php">Chat</a>
                    <div class="formwrapper">
                        <form action="logout.php" method="post">
                            <button type="submit" class="btnLogout">Kirjaudu ulos</button>
                        </form>
                    </div>
                    <?php } ?>
                </nav>
            </header>
        </div>
        <!-- navi pienemmille ruuduille media queryllä -->
        <div class="navwrap-smaller-screen">
            <nav class="alt-nav">
                <?php if ($role === 'admin') { ?>
                <a href="adminchatbackup.php">Ylläpito</a>
                <?php } ?>
                <a href="toiminta.php">Meistä</a>
                <?php if (!$loggedIn) { ?>
                <button class="btnLogin-popup">Kirjaudu</button>
                <?php } else { ?>
                <a href="userchat.php">Chat</a>
                <form action="logout.php" method="post">
                    <button type="submit" class="btnLogout">Kirjaudu ulos</button>
                </form>
        </div>
        <?php } ?>
        </nav>
    </div>

    <div class="logocontainer"></div>
    <div class="welcome-message">
        <h1><?php echo $welcomeMessage; ?></h1>
    </div>
    <!--kirjautumisen ja rekisteröitymisen wrapper -->
    <div class="wrapper">
        <div class="icon-close"></div>

        <?php if (!$loggedIn) { ?>
        <?php if (isset($_SESSION['login_error'])) {
            echo "<script>
                $(document).ready(function() {
                var wrapper = $('.wrapper');
                var loginForm = $('.form-box.login');
                var registerForm = $('.form-box.register');
                wrapper.addClass('active');
                loginForm.css('transform', 'translateX(0)');
                registerForm.css('transform', 'translateX(400px)');
                loginForm.show();
                });
            </script>";
        } ?>

        <div class="form-box login">
            <h2>Kirjaudu</h2>
            <?php if (isset($_SESSION['login_error'])) { ?>
            <div class="login-register-message"><?php echo $_SESSION['login_error']; ?>
                <?php unset($_SESSION['login_error']); ?>
            </div>
            <?php } ?>
            <form action="session.php" method="post">
                <div class="input-box">
                    <label for="username">Käyttäjätunnus</label>
                    <input type="text" name="username" required>
                </div>
                <div class="input-box">
                    <label for="password">Salasana:</label>
                    <input type="password" id="password" name="password" required>
                </div>
                <button type="submit" class="btn">Login</button>
                <div class="login-register">
                    <p>Eikö ole käyttäjää? <a href="#" class="register-link">Rekisteröidy</a></p>
                </div>
            </form>
        </div>
        <?php } ?>

        <?php if (isset($_SESSION['success']) || isset($_SESSION['reserved']) || isset($_SESSION['short']) || isset($_SESSION['num'])) {
        echo"<script>
                $(document).ready(function() {
                var wrapper = $('.wrapper');
                var loginForm = $('.form-box.login');
                var registerForm = $('.form-box.register');
                wrapper.addClass('active');
                loginForm.css('transform', 'translateX(-400px)');
                registerForm.css('transform', 'translateX(0)');
                loginForm.hide();
                registerForm.show();
                });
            </script>";
        } ?>

        <div class="form-box register">
            <h2>Rekisteröidy</h2>
            <?php if (isset($_SESSION['success'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['success']; ?>
        <div class="form-box register">
            <h2>Rekisteröidy</h2>
            <?php if (isset($_SESSION['success'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['success']; ?>
                <?php unset($_SESSION['success']); ?>
            </div>
            <?php } elseif (isset($_SESSION['reserved'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['reserved']; ?>
                <?php unset($_SESSION['reserved']); ?>
            </div>
            <?php } elseif (isset($_SESSION['short'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['short']; ?>
                <?php unset($_SESSION['short']); ?>
            </div>
            <?php } elseif (isset($_SESSION['num'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['num']; ?>
                <?php unset($_SESSION['num']); ?>
            </div>

                <?php unset($_SESSION['success']); ?>
            </div>
            <?php } elseif (isset($_SESSION['reserved'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['reserved']; ?>
                <?php unset($_SESSION['reserved']); ?>
            </div>
            <?php } elseif (isset($_SESSION['short'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['short']; ?>
                <?php unset($_SESSION['short']); ?>
            </div>
            <?php } elseif (isset($_SESSION['num'])) { ?>
            <div class="login-register-message">
                <?php echo $_SESSION['num']; ?>
                <?php unset($_SESSION['num']); ?>
            </div>

            <?php } ?>
            <form action="register.php" method="post">
                <div class="input-box">
                    <label for="username">Käyttäjätunnus:</label>
                    <input type="text" id="username" name="username" required>
                </div>
                <div class="input-box">
                    <label for="firstname">Etunimi:</label>
                    <input type="text" id="firstname" name="firstname" required>
                </div>
                <div class="input-box">
                    <label for="phone">Puhelinnumero:</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="input-box">
                    <label for="email">Sähköposti:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="input-box">
                    <label for="password">Salasana:</label>
                    <input type="password" id="password-registering" name="password-registering" required>
                    <span class="login-register"><br>Vähintään 8 merkkiä ja 1 numero</span><br><br>
                </div>
                <button type="submit" class="btn">Rekisteröidy</button>
                <div class="login-register">
                    <p>Löytyykö jo käyttäjä? <a href="#" class="login-link">Kirjaudu</a></p>
                </div>
            </form>
        </div>
    </div>
    <div>
        <footer class="footer"></footer>
    </div>

    <script>
    //tuntient sekuntien minuuttien päivitys online messageen
    function updateClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var time = hours + ":" + minutes + ":" + seconds;
        document.getElementById('clock').innerHTML = time;
    }
    setInterval(updateClock, 1000);


    $('.login-register-message').delay(750).fadeOut(2000);

    $(document).ready(function() {
        const wrapper = $('.wrapper');
        const loginLink = $('.login-link');
        const registerLink = $('.register-link');
        const btnPopup = $('.btnLogin-popup');
        const iconClose = $('.icon-close');
        const loginForm = $('.form-box.login');
        const registerForm = $('.form-box.register');

        //kirjautumisikkunasta painettaessa rekisteröitymislinkkiä piilotetaan kirjautumislomake ja näytetään rekisteröityminen
        loginLink.on('click', function() {
            wrapper.addClass('active');
            loginForm.css('transform', 'translateX(0)');
            registerForm.css('transform', 'translateX(400px)');
            registerForm.hide();
            loginForm.show();
        });

        //sama toistenpäin 
        registerLink.on('click', function() {
            wrapper.addClass('active');
            loginForm.css('transform', 'translateX(-400px)');
            registerForm.css('transform', 'translateX(0)');
            loginForm.hide();
            registerForm.show();
        });

        //btnPopup kirjautumisen button näytetään kirjautuminen
        btnPopup.on('click', function() {
            wrapper.addClass('active');
            loginForm.css('transform', 'translateX(0)');
            registerForm.css('transform', 'translateX(400px)');
            registerForm.hide();
            loginForm.show();
        });

        //suljetaan lomake ikkuna
        iconClose.on('click', function() {
            wrapper.removeClass('active');
            loginForm.css('transform', 'translateX(0)');
            registerForm.css('transform', 'translateX(400px)');
            setTimeout(function() {
                loginForm.css('transform', 'translateX(400px)');
            }, 300);
        });
    });

    //selatessa sivustolla kutsutaan scrollUp funktio jolla päästään takaisin sivun alkuun
    window.onscroll = function() {
        scrollUp();
    };

    //nappi näkyviin kun selataan edes 1 pikseli
    function scrollUp() {
        if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
            document.getElementById("scrollToTop").style.display = "block";
        } else {
            document.getElementById("scrollToTop").style.display = "none";
        }
    }
    document.getElementById("scrollToTop").addEventListener("click", function() {
        document.documentElement.scrollTop = 0;
    });
    </script>
</body>

</html>
