<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/_ps2020/_global/dir_root.php'); ?>
<?php include_once($_SERVER['DOCUMENT_ROOT'] . '/_ps2020/config/cfg_loggedUser.php'); ?>

<!DOCTYPE HTML>
<!--
	Hielo by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>

<head>
    <title>Contact Us</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <?php include_once(dir_rootPHP . '_global/icon.php'); ?>


    <!-- libs -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/fontAwesome/css/font-awesome.min.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/animate.css" /> -->

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- Material Design Bootstrap -->
    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->

    <!-- animation -->
    <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate.css" />
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_bounce.css" /> -->
    <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_fade.css" />
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_flip.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_other.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_rotate.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_slide.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>libs/Animate/animate_zoom.css" /> -->

    <!-- css -->
    <link rel="stylesheet" href="<?php echo dir_root; ?>css/template-hielo/main.css" />

    <!-- css (custom) -->
    <link rel="stylesheet" href="<?php echo dir_root; ?>css/henry_style.css" />
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/tanuj_style.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/karl_style.css" /> -->
    <!-- <link rel="stylesheet" href="<?php echo dir_root; ?>css/harsh_style.css" /> -->
    
    <style>
        .error {
            color: white;
            background-color: orangered;
            font-size: 12px;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            margin-right: 10px;
            font-weight: bold;
            border-radius: 5px;
            display: none;
            width: 100px;
        }

        #showMessage {
            color: white;
            background-color: lightskyblue;
            text-align: center;
            width: 100%;
            padding: 10px;
            border-radius: 15px;
            font-weight: bold;
            border: 2px solid lightblue;
        }

        #successMessage {
            display: none;
            margin: 25px;
        }

        #show-subject{
            display: none;
        }
    </style>
</head>
<!-- <body class="subpage"> -->

<body>

    <!-- Header | Nav -->
    <?php include_once(dir_rootPHP . '_global/navbar/navbar.php'); ?>
    <?php include_once(dir_rootPHP . '_global/navbar/navbar-mobile.php'); ?>


    <!-- Page-Title -->
    <section id="One" class="wrapper style3" style="padding-top: 9rem;">
        <div class="inner">
            <header class="align-center">
                <p>Greenscape Environmental Experience & Learning Survey Experiments</p>
                <h2>Contact-Us</h2>
            </header>
        </div>
    </section>

    <!-- Content -->
    <section id="two" class="wrapper style2">
        <div class="inner">
            
            <div class="contain" style="margin: 30px;">
                
                <h2 style="color:#548b54;text-align:center;font-weight:bold;">Message Form</h2>
                
                <form id="feedbackForm" action="#" method="POST">
                     <div class="form-row" id="successMessage">
                        <div id="showMessage">
                            Your message has been sent <br/>
                            Thank You For Your Time!!
                        </div>
                     </div>
                    <div class="row uniform">
                        
                        <div class="6u 12u$(xsmall)">
                            <label for="name">Your Name<span class="error" id="name-error">Required</span></label>
                            <input type="text" name="name" id="name"  placeholder="Name" />
                        </div>

                        <div class="6u$ 12u$(xsmall)">
                            <label for="email">Your Email<span class="error" id="email-error">Required</span></label>
                            <input type="email" name="email" id="email"  placeholder="Email" />
                        </div>
                        <!-- Break -->
                        <!-- Break -->
                        
                        <div class="6u$ 12u$(xsmall)">
                            <label for="type">Message-Type<span class="error" id="type-error">Required</span></label>
                        </div>
                        
                            <div class="4u 12u$(small)">
                                <input type="radio" class="radio" id="question" value="question" name="type" />
                                <label for="question">Message Researcher</label>
                            </div>
                            <div class="4u 12u$(small)">
                                <input type="radio" class="radio" id="feedback" value="feedback" name="type" />
                                <label for="feedback">Feedback</label>
                            </div>
                            <div class="4u$ 12u$(small)">
                                <input type="radio" class="radio" id="reportBug" value="bug" name="type" />
                                <label for="reportBug">Report A Bug</label>
                            </div>
                            <div class="4u 12u$(small)">
                                <input type="radio" class="radio" id="other" value="other" name="type" />
                                <label for="other">Other</label>
                            </div>
                        <!-- Break -->

                        <div class="12u$" id="show-subject">
                        <label for="subject">Subject <span class="error" id="subject-error">Required</span></label>
                            <input type="text" id="subject" placeholder="Subject" name="subject"/>
                        </div>

                        <!-- Break -->
                        <div class="12u$">
                        <label for="message">Message-Box<span class="error" id="message-error">Required</span></label>
                            <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
                        </div>
                        <!-- Break -->
                        <div class="12u$">
                            <ul class="actions">
                                <li><input type="submit" style="background-color:#548b54; font-size:bold;" value="Send Message" /></li>

                            </ul>
                        </div>
                    </div>
                </form>

            </div>

        </div>
    </section>

    <!-- Footer -->
    <?php include_once(dir_rootPHP . '_global/footer/footer.php'); ?>

    <!-- Scripts -->
    <script src="<?php echo dir_root; ?>js/template-hielo/jquery.min.js"></script>
    <script src="<?php echo dir_root; ?>js/template-hielo/jquery.scrollex.min.js"></script>
    <script src="<?php echo dir_root; ?>js/template-hielo/skel.min.js"></script>
    <script src="<?php echo dir_root; ?>js/template-hielo/util.js"></script>
    <script src="<?php echo dir_root; ?>js/template-hielo/main.js"></script>

    <!-- Scripts (custom) -->
    <script type="text/javascript">
        //Validation Starts from Here



        function sessionExists() {
            var result = false;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    if (this.responseText == "true" || this.responseText == true) {
                        result = true;
                    } else {
                        result = false;
                    }
                }
            };
            xmlhttp.open("GET", "<?php echo dir_root; ?>php/ajax/checkSessionStatus.php", false);
            xmlhttp.send();
            return result;
        }

        $(document).ready(function() {
            //check if session has been created
            var sessionExist = sessionExists();

            $("#name").blur(function() {
                var name = $("#name").val();
                $("#name").text(name.trim());
                name = name.trim();
                //Name cannot be less than 2 words
                if (name.length < 2 && sessionExist == false) {
                    $("#name-error").css("display", "inline")
                } else {
                    $("#name-error").css("display", "none")
                }

            });

            $("#email").blur(function() {
                var sessionExist = sessionExists();
                if (sessionExist) {
                    //There is no need to enter if user has logged in
                    return;
                }
                var email = $("#email").val();
                $("#email").text(email.trim());
                var email = email.trim();
                if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email)) {
                    $("#email-error").css("display", "none");
                } else {
                    $("#email-error").css("display", "inline");
                }
            });

            $("#subject").blur(function() {
                var subject = $("#subject").val();
                $("#subject").text(subject.trim());
                var type = $("input[name='type']:checked").val();
                if (type == "question") {
                    //We only need to check subject if its a question for the super-admins
                    var subject = subject.trim();
                    if (subject.length < 3) {
                        $("#subject-error").css("display", "inline");
                    } else {
                        $("#subject-error").css("display", "none");
                    }
                } else {
                    $("#subject-error").css("display", "none");
                }
            });

            $("input[name='type']").change(function() {
                var subjectBox = $("#show-subject");
                var type = $("input[name='type']:checked").val();
                //alert("The value of type :" + type );
                if (type == "question") {
                    subjectBox.css("display","block");
                    var subject = $("#subject").val();
                    $("#subject").text(subject.trim());
                    var subject = $("#subject").val();
                    if (subject.length < 3) {
                        $("#subject-error").css("display", "inline");
                    } else {
                        $("#subject-error").css("display", "none");
                    }
                } else {
                    subjectBox.css("display","none");
                    $("#subject-error").css("display", "none");
                }

                if (type == null || type == undefined || type == "") {
                    $("#type-error").css("display", "inline");
                } else {
                    $("#type-error").css("display", "none");
                }

            });

            $("#message").blur(function() {
                var message = $("#message").val();
                $("#message").text(message.trim());
                var message = message.trim();
                if (message.length < 2) {
                    $("#message-error").css("display", "inline");
                } else {
                    $("#message-error").css("display", "none");
                }
            });

            $("#feedbackForm").submit(function(event) {
                var sessionStatus = sessionExists();
                var condition = false;
                //We will check all the credentials based upon the user status
                //1. We will begin with the name
                var name = $("#name").val();
                $("#name").text(name.trim());
                name = name.trim();
                if (name.length < 2 && sessionStatus == false) {
                    $("#name-error").css("display", "inline");
                    condition = false;
                } else {
                    $("#name-error").css("display", "none");
                    condition = true;
                }

                //2. Now we check for email inputs
                var email = $("#email").val();
                $("#email").text(email.trim());
                email = email.trim();
                if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) || sessionStatus == true) {
                    $("#email-error").css("display", "none");
                    condition = true;
                } else {
                    $("#email-error").css("display", "inline");
                    condition = false;
                }

                //3 Now we check for the selected option
                //var type = $("input[name='type']:checked").val();
                var type = $("input[name='type']:checked").val();
                //alert("The type is : " + type);
                if (type == undefined || type == null || type == "") {
                    $("#type-error").css("display", "inline");
                    condition = false;
                } else {
                    $("#type-error").css("display", "none");
                    condition = true;
                }

                //3. Now we check if subject is required
                var subject = $("#subject").val();
                $("#subject").text(subject.trim());
                subject = subject.trim();
                var type = $("input[name='type']:checked").val();
                if (type == "question") {
                    if (subject.length < 2) {
                        condition = false;
                        $("#subject-error").css("display", "inline");
                    } else {
                        condition = true;
                        $("#subject-error").css("display", "none");
                    }
                } else {
                    condition = true;
                    $("#subject-error").css("display", "none");
                }

                //4. Now we check for the message box
                var message = $("#message").val();
                $("#message").text(message.trim());
                message = message.trim();
                if (message.length < 3) {
                    $("#message-error").css("display", "inline");
                    condition = false;
                } else {
                    $("#message-error").css("display", "none");
                    condition = true;
                }


                // Now that everyhting has been checked we either submit or show errors
                if (condition) {

                    var str = "name=" + name + "&email=" + email + "&type=" + type + "&subject=" + subject + "&message=" + message;
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            var theResponse = this.responseText;

                            console.log(theResponse);
                            
                            if (theResponse == 1 || theResponse == "1") {
                                $("#successMessage").css("display", "block");
                                window.location.reload();
                                // setTimeout(function() {
                                //     window.location.reload();
                                // }, 5000);
                            } else {
                                $("#successMessage").css("display", "block");
                                $("#showMessage").css("color", "white");
                                $("#showMessage").css("background-color", "red");
                                $("#showMessage").css("border", "1px solid lightcoral");
                                $("#showMessage").text("Error Occured!! Try-Later!!");
                                // setTimeout(function() {
                                //     window.location.reload();
                                // }, 5000);
                            }
                        }
                    };
                    xmlhttp.open("POST", "<?php echo dir_root; ?>php/request/post_addToInbox.php?" + str, false);
                    xmlhttp.send();
                }
                // alert("It has reached the end of the submit");
                event.preventDefault();
            });
        });
    </script>

</body>

</html>