<!DOCTYPE HTML>
<html> 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style>

.header {
  padding: 30px;
  text-align: center;
  color: white;
  font-size: 30px;
}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>


</head>


<body > 

<?php
if(isset($_GET['service'])){
$service = $_GET['service'];
$bro = " AND ea_services.id=".$service; 
}else{
    $bro="";
}
require('config.php');
$linkID = new PDO('mysql:host='.Config::DB_HOST.';dbname='.Config::DB_NAME, Config::DB_USERNAME, Config::DB_PASSWORD);
$linkID->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Setting ERRMODE

    $result = $linkID->query("SELECT id, name, minimummaxonoff, minimum, maximum FROM ea_services WHERE ea_services.waitlistonoff='ON' AND ea_services.waitlistonofffunction='ON'".$bro )->fetchAll(PDO::FETCH_ASSOC);

?>
<div class="header" style="background:<?= Config::FRONTEND_COLOR; ?>" >
<span><img src="<?= Config::LOGO ?>" style="!important width:<?= Config::LENGTH?>px; height:<?= Config::WIDTH?>px;"><h2 style="color:white; font-family:san-serif;">Waitlist</h2></span>
</div>
<div class="container-fluid">

<form action="waitlistprocess.php" method="post">
    
<div id="container" style="padding-left: 13px; font-family:san-serif;" ><br>

<label for="waitlist-service" style="color:red">Service: **PICK A SERVICE</label>

<select id="waitlist-service" name="waitlist-service">
<?php

foreach($result as $r){
echo '<option value='.'"'.$r['id'].'"'.'>'.$r['name'].'</option>';
    if($r['minimummaxonoff'] == 'ON') {
        $maxmin = "- minimum age: " . $r['minimum'] . " maximum age:" . " ". $r['maximum'];
    }else{
        $maxmin = "";
    }
}
echo '</select>';


?>


<br>
<label for="waitlist-firstname">First Name*</label>
<input type="text" id="waitlist-firstname" name="waitlist-firstname" required><br>

<label for="waitlist-lastname">Last Name*</label>
<input type="text" id="waitlist-lastname" name="waitlist-lastname" required> <br>

<label for="waitlist-phonenumber">Phone Number*</label>
<input type="text" id="waitlist-phonenumber" name="waitlist-phonenumber" required> <br>

<label for="waitlist-email">Email*</label>
<input type="text" id="waitlist-email" name="waitlist-email" required> <br>

    <label for="waitlist-birthdate">Birthdate* <?php echo $maxmin; ?></label><br>
    <input type="date" id="waitlist-birthdate" name="waitlist-birthdate" required> <br>

<br>

    <label for="waitlist-notes">Notes</label>
<textarea id="waitlist-notes" name="waitlist-notes" ></textarea><br>

<input type="submit" value="Submit" name="submit">
 </div>

</form>
</div>
</body>
</html>