<?php

include 'classes/class.loader.php';
$html = new html();
$loader = new loading();
// $videos = ['assets/bg.mp4'];
$loader->background_video_with_preloader("Loading... stay pawsitive!", []);
?>

<body>
    <style>
        body {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: flex-start;
            overflow: scroll;
        }
    </style>
    <!-- Login container -->
    <div
        style="color: white;display: flex;text-align: center;background-color: rgb(0 0 0 / 76%);padding: 40px;box-shadow: 7px 6px 10px 0px #000000;border-radius: 10px;flex-direction: column;flex-wrap: nowrap;align-content: center;row-gap: 1em;">
        <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="100px" style="transform: rotate(270deg);" />
            <img src="assets/logo_1.jpg" alt="Dog Park Logo" width="100px" style="transform: rotate(270deg);" />
        </div>
        <div style="display:none;width:80%;margin-left:auto;margin-right:auto;" id="failed_text">
            <p style="color:red;">Something Wrong Failed!</p>
        </div>
        <input type="text" id="first_name" name="first_name" placeholder="First Name" required />
        <input type="text" id="last_name" name="last_name" placeholder="Last Name" required />
        <input type="text" id="cell_number" name="cell_number" placeholder="Cell" required />
        <input type="text" id="email" name="email" onchange="check_email()" placeholder="email" required />
        <label>Address</label>
        <textarea id="address" name="address" placeholder="address" required></textarea>
        <hr>
        <div style="display:none;width:80%;margin-left:auto;margin-right:auto;" id="user_failed_text">
            <p style="color:red;">Something Wrong Failed!</p>
        </div>
        <input type="text" id="username" name="username" onchange='check_username()' placeholder="Username" required />
        <div style="display:flex;">
            <input type="password" id="password_1" name="password_1" placeholder="Password" required
                style="width: 100%;" />
            <button type="button" style='width:10em;' onclick="togglePasswordVisibility_1()">Show</button>
        </div>
        <div style="display:flex;">
            <input type="password" id="password_2" name="password_2" placeholder="Again" required
                style="width: 100%;" />
            <button type="button" style='width:10em;' onclick="togglePasswordVisibility_2()">Show</button>
        </div>
        <script>
            function togglePasswordVisibility_1() {
                var passwordField = document.getElementById('password_1');
                var button = event.target;
                if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    button.textContent = 'Hide';
                } else {
                    passwordField.type = 'password';
                    button.textContent = 'Show';
                }

            }
            function togglePasswordVisibility_2() {
                var passwordField = document.getElementById('password_2');
                var button = event.target;
                if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    button.textContent = 'Hide';
                } else {
                    passwordField.type = 'password';
                    button.textContent = 'Show';
                }

            }
        </script>
        <button onclick="submitSignup()">SIGN UP</button>
    </div>

    <script>
        function submitSignup() {
            var password_1 = document.getElementById('password_1').value;
            var password_2 = document.getElementById('password_2').value;
            first_name = document.getElementById('first_name').value;
            last_name = document.getElementById('last_name').value;
            cell_number = document.getElementById('cell_number').value;
            address = document.getElementById('address').value;
            username = document.getElementById('username').value;
            email = document.getElementById('email').value;

            var inputs = document.querySelectorAll('input, textarea');
            var error = 0;
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].value === '') {
                    inputs[i].style.borderColor = 'red';
                    error = 1;
                } else {
                    inputs[i].style.borderColor = 'green';
                }
            }
            if (error === 1) {
                return;
            }

            if (password_1 !== password_2) {
                document.getElementById('user_failed_text').style.display = 'block';
                document.getElementById('user_failed_text').innerHTML = '<p style="color:red;">Password does not match!</p>';
                return;
            }


            if (signup() === true) {
                window.location.href = 'login.php';
            }



        }

        function check_email() {
            email = document.getElementById('email').value;

            // upload the data and send to login.php
            var xhr11 = new XMLHttpRequest();
            xhr11.open('POST', 'security/check_email.php', true);
            xhr11.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr11.onreadystatechange = function () {
                if (xhr11.readyState === XMLHttpRequest.DONE) {
                    if (xhr11.status === 200) {
                        console.log("EMAIL: " + xhr11.responseText);
                        if (xhr11.responseText == false) {
                            console.log("Email Checked");
                            document.getElementById('failed_text').style.display = 'none';
                            return true;
                        } else {
                            document.getElementById('failed_text').style.display = 'block';
                            document.getElementById('failed_text').innerHTML = '<p style="color:red;">Email Already in use</p>';
                            document.getElementById('email').value = '';
                            document.getElementById('email').style.borderColor = 'RED';
                            document.getElementById('failed_text').focus();
                            return false;
                        }
                    }
                }
            };
            xhr11.send("&email=" + encodeURIComponent(email));
        }

        function check_username() {
            username = document.getElementById('username').value;

            // check username
            console.log("Email Checked");
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'security/check_username.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("USERNAME: " + xhr.responseText);
                        if (xhr.responseText === '1') {
                            console.log("Username Checked");
                            document.getElementById('user_failed_text').style.display = 'none';
                            return true;
                        } else {
                            document.getElementById('user_failed_text').style.display = 'block';
                            document.getElementById('user_failed_text').innerHTML = '<p style="color:red;">Username already taken</p>';
                            document.getElementById('username').value = '';
                            document.getElementById('username').focus();
                            return false;
                        }
                    }
                }
            };
            xhr.send('username=' + encodeURIComponent(username));

        }
        function signup() {

            // upload the data and send to login.php
            var xhr1 = new XMLHttpRequest();
            xhr1.open('POST', 'ajax/signup.php', true);
            xhr1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr1.onreadystatechange = function () {
                if (xhr1.readyState === XMLHttpRequest.DONE) {
                    if (xhr1.status === 200) {
                        console.log("SIGNUP: " + xhr1.responseText);
                        if (xhr1.responseText === '1') {
                            console.log("Signup Successfull");
                            return true;

                        } else {
                            document.getElementById('failed_text').style.display = 'block';
                            document.getElementById('failed_text').innerHTML = '<p style="color:red;">Signup Failed ERORR: ' + xhr1.responseText + ' </p>';
                            document.getElementById('failed_text').focus();
                            return flase;
                        }
                    }
                }
            };
            xhr1.send('username=' + encodeURIComponent(username) + "&password=" + encodeURIComponent(password_1) + "&first_name=" + encodeURIComponent(first_name) + "&last_name=" + encodeURIComponent(last_name) + "&cell_number=" + encodeURIComponent(cell_number) + "&email=" + encodeURIComponent(email) + "&address=" + encodeURIComponent(address));
        }
    </script>
</body>

</html>



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