


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="/">
    <link rel="icon" type="image/png" href="Favicon.png">
    <title>Contact</title>


    <!-- Font Awesome - Icons -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <!-- Google Web Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Bootstrap core JS -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  	<!-- Bootstrap style css -->
	<link rel="stylesheet" href="css/bootstrap.css">

    <!-- Owl Graphics - For Image Slider -->
    <script src="owl.carousel.js"></script>
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">

	<!-- Custom styling for page -->
	<link href="css/style.css" rel="stylesheet">
	<style>
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}
    </style>

    <script>
$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    autoPlay : 10000,
    stopOnHover : true,
    navigation:false,
    paginationSpeed : 2000,
    goToFirstSpeed : 6000,
    singleItem : true,
    autoHeight : true,
    transitionStyle:"fade",
    lazyLoad: true
  });

});
    </script>
  </head>

  <body>

   <!-- Nav Bar -->
   <?php include('navbar.php'); ?>

    <div class="container">

        <div class="page-header">
          <h2 class="blue">Contact Us</h2>
        </div>

        <div class="row">
            <div class="col-md-6">
            <p>Location: Angel Waters, 152 Mitchell Street, North Ward Qld 4810</p>
            <p>Reception: 07 4772 6011 </p>
            <p>Fax: 07 4771 4152 </p>
            <p>Mobile: 0418 862 746 </p>
            <p>Email: info@palmwaters.com.au</p>

            <h2>Email Us</h2>

            <div class="form-group input-group-md">
              <input type="text" class="form-control" placeholder="Name" aria-describedby="sizing-addon1" id="Email_Name">
            </div>
            <div class="form-group input-group-md">
              <input type="text" class="form-control" placeholder="Email" aria-describedby="sizing-addon1" id="Email_Address">
            </div>

            <textarea class="form-control email-message" rows="9" placeholder="Message" id="Email_Message"></textarea>

            <div class="button-group">
                    <button type="button" class="btn btn-default" onmousedown="Submit_Email()" id="Send_Btn" style="margin-top: 10px;">Send</button>
                    <div id="Error_Output" style="margin-top: 10px; margin-bottom: 10px;"></div>
            </div>


            </div>
            <div class="col-md-6">
                <img src="img/Welcome_Reception.jpg" class="img-responsive img-margin">
            </div>
        </div>
        <div class="col-md-6 col-md-offset-3">

         </div>
    </div>

    <!-- Footer -->
    <?php include('footer.php'); ?>

    <script>

    function Submit_Email(){
        var Email_Name = document.getElementById('Email_Name').value;
        var Email_Address = document.getElementById('Email_Address').value;
        var Email_Message = document.getElementById('Email_Message').value;


        $.post("contact_us_backend.php",
        {
            Name: Email_Name,
            Address: Email_Address,
            Message: Email_Message
        },
        function(data, status){
            document.getElementById('Error_Output').innerHTML= data;
        });

    }

    </script>

  </body>
</html>
