<?php

include 'classes/class.loader.php';
$html = new html();
$loader = new loading();
$videos = ['assets/bg.mp4', 'assets/bg_2.mp4', 'assets/bg_3.mp4', 'assets/bg_4.mp4'];
$loader->background_video_with_preloader("Loading your dog park experience...", $videos);

session_unset();

if (isset($_GET['failed-login'])) {
    $message = '
   
  ';
} else {
    $message = '';
}
?>

<body>
    <!-- Login container -->
    <div class="login-container">
        <div style="display: flex; justify-content: center; align-items: center; column-gap: 4em; row-gap: 1em;">
            <img src="assets/logo_2.jpg" alt="Dog Park Logo" width="200px" style="transform: rotate(270deg);" />
            <img src="assets/logo_1.jpg" alt="Dog Park Logo" width="200px" style="transform: rotate(270deg);" />
        </div>
        <div style="display:none;width:30vw;margin-left:auto;margin-right:auto;" id="failed_text">
            <p style="color:red;">Login Failed!</p>
        </div>
        <input type="text" id="username" name="username" placeholder="Username" required />
        <div style="display:flex;">
            <input type="password" id="password" name="password" placeholder="Password" required style="width: 100%;" />
            <button type="button" style='width:10em;' onclick="togglePasswordVisibility()">Show</button>
        </div>
        <script>
            function togglePasswordVisibility() {
                var passwordField = document.getElementById('password');
                var button = event.target;
                if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    button.textContent = 'Hide';
                } else {
                    passwordField.type = 'password';
                    button.textContent = 'Show';
                }
            }
        </script>
        <button onclick="submitLogin()">LOGIN</button>

        <a href="forgot_password.php">Forgot Password?</a>

        <hr>

        <button type="button" onclick="window.location.href='signup.php'">Sign Up</button>
    </div>

    <script>
        function submitLogin() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'auth.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        if (xhr.responseText === '1') {
                            window.location.href = 'home.php';
                        } else {
                            document.getElementById('failed_text').style.display = 'block';
                        }
                    }
                }
            };
            xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
        }
    </script>
</body>

</html>



<?php $html->html_end(); ?>