<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/contactForm.css">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <script src="https://kit.fontawesome.com/39759427ce.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Arvo:700&display=swap" rel="stylesheet">

    <title>Contact Us || Redbirds Basball</title>
</head>
<body>

    <!--Navigation-->
    <header>
        <div class ="logo"><a href="./index.html"> REDBIRDS BASEBALL</a></div>
        <nav>
            <ul>
                <li><a>About</a>
                    <ul class ="sub-menu">
                        <li><a href="./about.html">Who Are We?</a></li>
                        <li><a href="./rosters.html">Rosters</a></li>
                        <li><a href="./coach.html">Coaching Staff</a></li>
                        <li><a href="./jim.html">Jim Lawson</a></li>
                        <li><a href="./alumni.html">Alumni</a></li>
                    </ul>
                </li>
                <li><a>Programs</a>
                    <ul class ="sub-menu">
                        <li><a href="./summer.html">Summer Baseball</a></li>
                        <!--<li><a href="./404.html">Fallball</a></li>-->
                        <li><a href="./winter.html">Winter Training</a></li>
                        <li><a href="./register.html">Registration</a></li>
                    </ul>
                </li>
                <li><a>News</a>
                    <ul class ="sub-menu">
                        <li><a href="./new.html">Announcements</a></li>
                        <li><a href="./commitments.html">Commitments</a></li>
                    </ul>
                </li>
                <li><a href="./contact.php">Contact Us</a></li>
            </ul>
        </nav>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </header>

    <!--Header-->
    <div class="section-a">
        <div class="contain">
            <h2>CONTACT US</h2>
        </div>
    </div>
    <div class="underline"></div>

    <!--Contact Form-->
    <div class="form-container">
        <form name="frmContact" id="" frmContact="" method="post" action="./php/contactForm.php" enctype="multipart/form-data" onsubmit="return validateContactForm()">
            <!--First / Last Name-->
            <div class="input-row" id="half-row">
                <label id="first">First Name *</label> <span id="firstName-info" class="info"></span>
                <label style="float: right; width: 48%;">Last Name *<span id="lastName-info" class="info"></span> </label>
                <br>
                <input type="text" class="half-input-field" name="firstName" id="firstName" maxlength="50"/> 
                <input type="text" class="half-input-field float-right" name="lastName" id="lastName" maxlength="50"/>
            </div>           
            <!--Email-->
            <div class="input-row">
                <label>Email *</label> <span id="userEmail-info" class="info"></span><br />
                <input type="text"class="input-field" name="userEmail" id="userEmail" placeholder="Enter Email"/>
            </div>
            <!--Contact Message-->
            <div class="input-row">
                <label>Message (Max 500 Characters)*</label> <span id="userMessage-info" class="info"></span><br />
                <textarea name="content" id="content" class="input-field" cols="60" rows="6" placeholder="Enter Message" maxlength="500"></textarea>
            </div>
            <!--Submit Button-->
            <div>
                <input type="submit" name="send" class="btn" value="Message Us" style="width: 100%;"/>
                <br><br>
                <span id="submit-info" class="wait"></span>
                <div id="statusMessage"> 
                    <?php
                    if (! empty($message)) {
                        ?>
                        <p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
                    <?php
                    }
                    ?>
                </div>
            </div>
            <!--Form Rules-->
            <div class="input-row">
                <br>
                <label><strong>*</strong> These fields are required when contacting us</label>
            </div>
        </form>
    </div>

     <!--Footer-->
    <footer class="section-footer">
      <div class="contain">
          <div class="navigate">
              <h3>Navigate</h3>
              <div class="nav-footer">
                      <ul>
                          <li><a href="./index.html">Home</a></li>
                          <li><a href="./about.html">About</a></li>
                          <li><a href="./new.html">News</a></li>
                      </ul>
                      <ul>
                          <li><a href="./alumni.html">Alumni</a></li>
                          <li><a href="./jim.html">Jim</a></li>
                          <li><a href="./contact.php">Contact Us</a></li>
                      </ul>
              </div>    
          </div>
          <div>
              <h3>Locations</h3>
              <ul>
                  <li>The Bird Cage: 401,  33 St NE, Calgary AB</li>
                  <li>The Nest: 3205 28 Ave SW, Calgary, AB T3E 0R8</li>
              </ul>
          </div>
          <div>         
              <h3>Stay Connected</h3>
              <a href="https://twitter.com/CalgaryRedbirds">
                  <i class="fab fa-twitter fa-2x"></i>   
              </a>
              <a href="https://www.facebook.com/YYCRedbirds/">
                  <i class="fab fa-facebook fa-2x"></i>
              </a>
              <a href="https://www.instagram.com/calgaryredbirds/">
                  <i class="fab fa-instagram fa-2x"></i>
              </a>
          </div>
      </div>
      <div class="underline-fade light"></div>
      <h3 class="info-footer"> <span style="font-weight: bold;">Redbirds Baseball</span></h3>
      <div class="underline-fade light"></div>
      <div class="copyRight">&copy;2019 Redbirds Baseball</div>
    </footer>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="./js/java.js"></script>
    <script type="text/javascript">
        //Validates Form
        function validateContactForm() {
            var valid = true;
            //Form Content Variables
            $(".info").html("");
            $(".input-field").css('border', '#e0dfdf 1px solid');
            var firstName = $("#firstName").val();
            var lastName = $("#lastName").val();
            var userEmail = $("#userEmail").val();
            var content = $("#content").val();
            //Checks if form is correct
            if (firstName == "") {
                $("#firstName-info").html("Required.");
                $("#firstName").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (lastName == "") {
                $("#lastName-info").html("Required.");
                $("#lastName").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (userEmail == "") {
                $("#userEmail-info").html("Required.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
            {
                $("#userEmail-info").html("Invalid Email Address.");
                $("#userEmail").css('border', '#e66262 1px solid');
                valid = false;
            }
            if (content == "") {
                $("#userMessage-info").html("Required");
                $("#content").css('border', '#e66262 1px solid');
                valid = false;
            }
            if(valid){          
                $("#submit-info").html("Please Wait While We Process Your Email");
            }
            return valid;
        }
    </script>
</body>
</html>