<?php

$name	= $email	= $message = $result = "";
$errName = $errEmail = $errMessage = $errHuman ="";

if(isset($_POST['name'])){
      $name = $_POST['name']; 
 }

if(isset($_POST['email'])){
      $email = $_POST['email']; 
 }

if(isset($_POST['message'])){
      $message = $_POST['message']; 
 }

// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
		$human = intval($_POST['human']);
		$from = 'Contact Form AECEDIA'; 
		$to = 'danang.lfc@gmail.com'; 
		$subject = 'Message from Contact Us Acedia';
		
		$body ="From: $name\n E-Mail: $email\n Message:\n $message";

		// Validate name
		if(empty(trim($_POST["name"]))){
			$errName = "Please enter your name.";     
		} else{
			$name = trim($_POST["name"]);
		}
		
		// Validate email
		if(empty(trim($_POST["email"])) || !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)){
			$errEmail = 'Please enter a valid email address';    
		} else{
			$email = trim($_POST["email"]);
		}
		
		// Validate message
		if(empty(trim($_POST["message"]))){
			$errMessage = "Please enter your message.";     
		} else{
			$message = trim($_POST["message"]);
		}
		
		//Check if simple anti-bot test is correct
		if ($human !== 5) {
			$errHuman = 'Your anti-spam is incorrect';
		}

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
	if (mail ($to, $subject, $body, $from)) {
		$result='<div class="alert alert-success">Thank You! We will get back to you as soon as possible.</div>';
	} else {
		$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
	}
}
	}
?>

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Careers | TEKO Boba No. 1</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template -->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700|&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500,700,900&display=swap" rel="stylesheet"> 

  <!-- Custom styles for this template -->
  <link href="css/careers.css" rel="stylesheet">

  <!-- Web Favicon -->
  <link rel="icon" href="img/logo.png" type="image/png" sizes="16x16">

</head>

<body id="page-top">

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" id="mainNav">
    <div class="container">
      
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        
        <i class="fas fa-bars"></i>
      </button>
		<a class="navbar-brand" href="#">
			  <img src="img/logo2_bd.png" class="ml-2 mt-0 custom-x" alt="">
			</a>
      <div class="collapse navbar-collapse" id="navbarResponsive">
		  <hr class="mt-0">
         <ul class="navbar-nav ml-auto font-weight-bolder mb-2">
		  <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="index.php#page-top">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="index.php#menu">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="index.php#locations">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger active" href="careers.php">Careers</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="partner.php" target="_blank">Partnership</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Header -->
  <header class="masthead">
    <div class="container text-center">
        <h1 class="text-uppercase mb-5 text-white">UNLEASH URSELF</h1>
        <a class="btn btn-primary js-scroll-trigger text-white" href="#job">/ Work with us</a>
    </div>
  </header>

  <!-- Social Media Section -->
  <section id="breaker2" class="breaker2-section text-center">
    <div class="container">
	  <div class="social d-flex justify-content-center align-items-center">
		<a href="https://www.instagram.com/tekobobano.1/" target="_blank" class="mx-auto">
		  <i class="fab fa-instagram"></i>
		</a>
		<a href="https://api.whatsapp.com/send?phone=6281285668682" target="_blank" class="mx-auto">
		  <i class="fab fa-whatsapp-square"></i>
		</a>
		<a href="mailto:kayumanis@tekoindonesia.com" target="_top" class="mx-auto">
		  <i class="fas fa-envelope-square"></i>
		</a>
		<a href="https://g.page/teko-boba-no-1-kayumanis?share" target="_blank" class="mx-auto">
		  <i class="fab fa-facebook-square"></i>
		</a>
	  </div>
    </div>
  </section>
	
  <!-- About Section -->
  <section id="job" class="about-section">
    <div class="container justify-content-center">
	 	<h2 class="text-black mb-4 text-uppercase text-center" style="font-weight: 800">Bobaverse for you.</h2>
        <p class="text-black-50 text-center">Join our community to forge your path and craft unforgettable experiences </p>
		
		<div class="card-deck">
		  <div class="card rounded-0" style="border: 1px solid rgba(248,193,128,.5)">
			<img src="img/test3.jpg" class="card-img-top rounded-0" alt="">
			<div class="card-body text-black">
			  <h5 class="card-title">Cashier</h5>
			  <p class="card-text small">Responsible for handling customer traffic and keeping them comfort while waiting and ordering</p>
			</div>
			<div class="card-footer" style="border-top: 1px solid rgba(248,193,128,.5);background-color: rgba(248,193,128,.2)">
			  <small class="text-muted">#1-Bobaverse</small>
			</div>
		  </div>
		  <div class="card rounded-0" style="border: 1px solid rgba(248,193,128,.5)">
			<img src="img/test2.jpg" class="card-img-top rounded-0" alt="">
			<div class="card-body text-black">
			  <h5 class="card-title">Bobarista</h5>
			  <p class="card-text small">Responsible for serving dan making orders, keeping the product quality, taste, and cleanliness are main goals on working</p>
			</div>
			<div class="card-footer" style="border-top: 1px solid rgba(248,193,128,.5);background-color: rgba(248,193,128,.2)">
			  <small class="text-muted">#2-Bobaverse</small>
			</div>
		  </div>
		  <div class="card rounded-0" style="border: 1px solid rgba(248,193,128,.5)">
			<img src="img/soon.jpg" class="card-img-top rounded-0" alt="">
			<div class="card-body text-black">
			  <h5 class="card-title">Coming soon</h5>
			  <p class="card-text small">Another roles needed for Bobaverse</p>
			</div>
			<div class="card-footer" style="border-top: 1px solid rgba(248,193,128,.5);background-color: rgba(248,193,128,.2)">
			  <small class="text-muted">#3-Bobaverse</small>
			</div>
		  </div>
		</div>
		
	</div>
  </section>
  
  <section id="how" class="about-section">
    <div class="container justify-content-center">
		<h2 class="text-black mb-4 text-uppercase text-center" style="font-weight: 800">How to Join</h2>
        <p class="text-black-50 text-center">You can submit your application via our form or you can also <strong>email</strong> it to us with the with email subject: "Name of Position".</p>
      
		<div class="col-lg-12 rounded-sm rounded-0" style="background-color: rgba(248,193,128,.2)">	
			<form id="contact-form" class="form-horizontal" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label label_header">Name</label>
					<div class="col-md-12">
						<input type="text" class="form-control rounded-0" id="name" name="name" placeholder="First & Last Name">
						<?php echo "<p class='text-black-50'>$errName</p>";?>
					</div>
				</div>
				<div class="form-group">
					<label for="email" class="col-sm-2 control-label label_header">Email</label>
					<div class="col-md-12">
						<input type="email" class="form-control rounded-0" id="email" name="email" placeholder="example@domain.com">
						<?php echo "<p class='text-black-50'>$errEmail</p>";?>
					</div>
				</div>
				<div class="form-group">
					<label for="message" class="col-sm-2 control-label label_header">Message</label>
					<div class="col-md-12">
						<textarea class="form-control rounded-0 special" rows="4" name="message" placeholder="Subject: Name of Position, Message, Attached your CV address"></textarea>
						<?php echo "<p class='text-black-50'>$errMessage</p>";?>
					</div>
				</div>
				<div class="form-group">
					<label for="human" class="col-sm-2 control-label label_header">2 + 3 = ?</label>
					<div class="col-md-12">
						<input type="text" class="form-control rounded-0" id="human" name="human" placeholder="Your Answer">
						<?php echo "<p class='text-black-50'>$errHuman</p>";?>
					</div>
				</div>
				<div class="form-group">
					<div class="col-md-12 submit2">							
						<input id="submit" name="submit" type="submit" value="SUBMIT" class="btn btn-primary submit" onclick="submitForm()">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-10 col-sm-offset-2">
						<?php echo $result; ?>	
					</div>
				</div>
			</form> 
	    </div>
	</div>
  </section>
		
  <!-- Footer -->
  <footer class="bg_brown_dark small text-white">
    <div class="container">
		<div class="row justify-content-center mb-2">
				&copy; 2019 TEKO Boba No 1. All Rights Reserved.
		</div>
		<div class="row justify-content-center">
	 		 	<a class="text-right text-white-50 js-scroll-trigger" href="#page-top">TO THE SURFACE <i id="fa-angle-up" class="fa fa-angle-up" style="font-size:18px"></i> </a>
		</div>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for this template -->
  <script src="js/grayscale.min.js"></script>

</body>

</html>
