<?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(this)">SIGN UP</button>
    </div>

    <script>
        function submitSignup(button_1) {
            button_1.hidden = true;
            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) {
                button_1.hidden = false;
                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>';
                button_1.hidden = false;
                return;
            }


            signup();





        }

        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");
                            window.location.href = 'login.php';
                        } 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(document.getElementById('password_1').value) + "&first_name=" + encodeURIComponent(first_name) + "&last_name=" + encodeURIComponent(last_name) + "&cell_number=" + encodeURIComponent(cell_number) + "&email=" + encodeURIComponent(email) + "&address=" + encodeURIComponent(address));
        }
    </script>

    <div class="whatsapp-label">HELP</div>

    <!-- Floating button -->
    <a class="whatsapp-float" id="whatsappBtn" title="Message us on WhatsApp" target="_blank" rel="noopener noreferrer"
        href="#" aria-label="Open WhatsApp chat">
        <!-- WhatsApp SVG icon (official-looking) -->
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M20.52 3.48A11.9 11.9 0 0 0 12 0C5.373 0 .003 5.373.003 12 0 13.987.44 15.9 1.27 17.6L0 24l6.66-1.76a11.94 11.94 0 0 0 5.34 1.38h.01c6.627 0 12-5.373 12-12 0-3.19-1.24-6.18-3.48-8.04z"
                fill="#25D366" />
            <path
                d="M17.56 14.1c-.32-.16-1.9-.94-2.2-1.04-.3-.11-.52-.16-.74.16-.22.32-.86 1.04-1.06 1.25-.19.19-.39.21-.72.07-.32-.13-1.37-.51-2.61-1.62-.97-.86-1.62-1.92-1.81-2.24-.19-.32-.02-.49.14-.65.14-.14.32-.36.48-.54.16-.19.21-.32.32-.53.11-.21.05-.39-.03-.55-.08-.16-.74-1.78-1.02-2.44-.27-.64-.55-.55-.74-.56-.19-.01-.41-.01-.63-.01-.22 0-.58.08-.88.39-.3.31-1.15 1.12-1.15 2.73 0 1.6 1.18 3.14 1.34 3.36.16.22 2.32 3.66 5.62 5.12 3.3 1.46 3.3 0.97 3.9 0.91.6-.07 1.92-.78 2.19-1.53.27-.74.27-1.38.19-1.53-.08-.15-.3-.24-.62-.4z"
                fill="#fff" />
        </svg>
    </a>

    <script>
        // PHONE: user-provided local number (0645010642).
        // For reliable behaviour with wa.me we convert to international format.
        // South Africa country code = 27; remove leading zero from the local number.
        const localNumber = "0645010642";
        const intlNumber = localNumber.replace(/^0+/, ""); // removes leading zero(s)
        // If your country is South Africa, add 27 before the number:
        const countryCode = "27";
        const phoneForWA = countryCode + intlNumber; // -> "27645010642"

        // Prefilled message (exact text provided by user)
        const msg = "Good day Team, Please help with the following:";

        // Build links: prefer whatsapp:// for mobile apps, fallback to https://wa.me/ for web/mobile
        const encodedMsg = encodeURIComponent(msg);
        const waAppLink = "whatsapp://send?phone=" + phoneForWA + "&text=" + encodedMsg;
        const waWebLink = "https://wa.me/" + phoneForWA + "?text=" + encodedMsg;

        // Use web link by default (works on desktop & mobile); on some mobile browsers whatsapp:// may work.
        const anchor = document.getElementById("whatsappBtn");

        // Attempt to open app link on mobile — but final href will be web fallback.
        // We'll set href to web link so it also works in desktop browsers.
        anchor.href = waWebLink;

        // Optional: on mobile, try to open the app first then fallback to web.
        // (We do this by attempting to navigate to app scheme for short time.)
        function openWhatsAppPreferApp(e) {
            // On touch devices, try app; on desktop, just open web
            const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            if (!isMobile) return; // let default anchor behavior open new tab

            e.preventDefault();
            // Try app scheme
            const appUrl = waAppLink;
            const webUrl = waWebLink;

            // Create invisible iframe to try app URL (older technique)
            const start = Date.now();
            let didOpen = false;

            // For modern browsers, direct location change is OK.
            window.location = appUrl;

            // After short delay, navigate to web link (works as fallback)
            setTimeout(function () {
                // If still on the page, open web link
                // We guard to avoid double navigation in some environments
                if (Date.now() - start < 2000) {
                    window.location = webUrl;
                }
            }, 1500);
        }

        // Use the mobile-prefer behavior on click
        anchor.addEventListener("click", openWhatsAppPreferApp, { passive: false });
    </script>
</body>

</html>



<?php $html->html_end(); ?>