<?php
include ("includes/functions.php");

if ($_POST['versturen']) 
	{ 
	form_controle();
	}
if ($_GET['s'] == "ok") 
	{ 
	$vermelding = "<p><b><font color='#FF0000'>Hartelijk dank voor uw reservatie.  <br>
	Wij sturen U zo snel mogelijk een email om deze reservatie te bevestigen.<br />
	Gelieve ook zeker en vast uw 'Spam' en 'ongewenste emails' te controleren, want dikwijls komt ons antwoord in één van deze emailfolders terecht.</font></b>	</p>"; 

	$image = '<img src="images/bedankt.jpg">';
	
	$verplicht = "";
	
	$hide = "<script>$('#contactForm').hide();$('.error').hide();</script>";

	} else { 
	$vermelding = ""; 
	$image = "";
	$verplicht = "<p><font color='#FF0000'>*</font> = Verplichte velden</b></p>";
	}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Het Kompas :: Reserveren</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<? MetaStuff (); ?>
<link href="style.css" rel="stylesheet" type="text/css" />
<?php  
if(stristr($_SERVER['HTTP_HOST'], 'localhost')){?>
<script> var baseURL = 'http://www.hetkompas.be/'</script>
<? }else if(stristr($_SERVER['HTTP_HOST'], 'hetkompas.be')){ ?>
<script> var baseURL = 'http://www.hetkompas.be/'</script>
<? }else if(stristr($_SERVER['HTTP_HOST'], 'php-webdesign.nl')){ ?>
<script> var baseURL = 'http://www.php-webdesign.nl/kompas/'</script>
<? } ?>
<script src="calendar.js?rand=<?=rand(100000,999999) ?>"></script>
<script type="text/javascript" language="JavaScript">

function CheckRequiredFields() { //alert($('#telnr-new').val().length); return false;
var errormessage = new String();
var directlyShowError = false;

//check if date and hour is selected
if(WithoutContent(document.DataForm.datum.value))
{ 
	directlyShowError  = true;
	errormessage += "\n\nGelieve Datum van Reservatie in te geven.";
}
if(WithoutContent(document.DataForm.uur.value))
{ 
	directlyShowError  = true;
	errormessage += "\n\nGelieve uur van reservatie aan te duiden.";
}	


if(directlyShowError == false)
{
	// Put field checks below this point.
	if(WithoutContent(document.DataForm.naam.value))
		{ errormessage += "\n\nGelieve uw naam op te geven"; }
	if(WithoutContent(document.DataForm.email.value))
		{ errormessage += "\n\nWe hebben uw e-mail adres nodig."; }
	if(WithoutContent(document.DataForm.stad.value))
		{ errormessage += "\n\nGelieve de stad in te vullen."; }
	
	
	// Check for numeric length for Telephone
	if($('#telnr-new').val().length < 10){
		errormessage += "\n\nGelieve uw gsm nummer in te vullen"; 
	}
	
	// Check for Numeric Value
	if($('#telnr-new').val() != "" ){
		var varVal = $('#telnr-new').val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
		var intRegex = /^\d+$/;
		if(!intRegex.test(varVal)) {
			errormessage += "\n\nGelieve enkel cijfers in te vullen";
			//success = false;
		}
	}
	
	if(WithoutContent(document.DataForm.personen.value))
		{ errormessage += "\n\nGelieve het aantal volwassenen op te geven"; }	
	if(WithoutContent(document.DataForm.kinderen.value))
		{ errormessage += "\n\nGelieve het aantal kinderen op te geven"; }			
	if (document.DataForm.email.value != document.DataForm.email2.value) {
		errormessage += "\n\nUw 2 opgegeven e-mail adressen moeten gelijk zijn aan elkaar.";
	}

	var somVolKids = parseInt((document.DataForm.personen.value)) + parseInt((document.DataForm.kinderen.value));

	if(somVolKids  > 8 )
	{
					errormessage += "\n\nSorry, wij aanvaarden geen groepen boven de 8 personen."             
	}
}
// Put field checks above this point.
if(errormessage.length > 2) {
	alert('NOTE:' + errormessage);
	return false;
	}
return true;
} // end of function CheckRequiredFields()


function WithoutContent(ss) {
if(ss.length > 0) { return false; }
return true;
}

function NoneWithContent(ss) {
for(var i = 0; i < ss.length; i++) {
	if(ss[i].value.length > 0) { return false; }
	}
return true;
}

function NoneWithCheck(ss) {
for(var i = 0; i < ss.length; i++) {
	if(ss[i].checked) { return false; }
	}
return true;
}

function WithoutCheck(ss) {
if(ss.checked) { return false; }
return true;
}

function WithoutSelectionValue(ss) {
for(var i = 0; i < ss.length; i++) {
	if(ss[i].selected) {
		if(ss[i].value.length) { return false; }
		}
	}
return true;
}

function changetime () {
	alert('bla');
}

//-->
</script>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
td img {display: block;}

.col-lg-6 {
  margin-bottom: -20px;
  margin-top: 2px;
  text-align: center;
}

.imgButton {
  position: relative;
}

.imgButton img {
  transform: translateY(0);
  transition: all .4s ease-out;
  -webkit-box-shadow: 8px 7px 5px 0px rgba(0, 0, 0, .3);
  -moz-box-shadow: 8px 7px 5px 0px rgba(0, 0, 0, .3);
  box-shadow: 8px 7px 5px 0px rgba(0, 0, 0, .3);
}

.one:before {
  content: 'Op zaterdagavond en tijdens vakantieperiodes proberen wij onze avonden in twee "seatings" te verdelen. U kan dan reserveren om 18u (first seating) of om 20.15u (second seating). Indien u om 18u reserveert, dan vragen wij u om de tafel tegen 20u terug vrij te maken. Indien u om 20.15u reserveert, kan u echter onbeperkt aan tafel blijven zitten.  Dank u voor uw begrip.'
}

.two:before {
  content: 'Op zaterdagavond en tijdens vakantieperiodes proberen wij onze avonden in twee "seatings" te verdelen.
U kan dan reserveren om 18u (first seating) of om 20.15u (second seating).
Indien u om 18u reserveert, dan vragen wij u om de tafel tegen 20u terug vrij te maken.
Indien u om 20.15u reserveert, kan u echter onbeperkt aan tafel blijven zitten.  Dank u voor uw begrip.'
}

.imgButton:before {
  position: absolute;
  height:150px;
  width:350px;
  left: -40px;
  bottom: -9px;
  font-size: 15px;
  color: #000000;
  background: #ffffff;
  transition: all .4s ease-out;
  transform: translateY(150px);
  opacity: 0;
  z-index: 1;
  font-weight: normal;
  border: .2em solid #E89C0C;
}

.imgButton:hover:before {
  bottom: 5px;
  opacity: 100;
}

.imgButton:hover img {
  transform: translateY(-10px);
}

.floatButton {
  display: inline-block;
  vertical-align: left;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.floatButton:hover,
.floatButton:focus,
.floatButton:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
</style>

<link rel="stylesheet" href="includes/meanmenu.css" media="all" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="includes//jquery.meanmenu.js"></script> 
<script>
jQuery(document).ready(function () {
    jQuery('nav').meanmenu();
});
</script>
</head>
<body bgcolor="#f2eeea">
<div align="center">
<div class="page-center">
	<div id="Wrapper">
		<div id="Header">
			<div id="HeaderNavigContainer">
				<div id="mobile-nav">
				<nav class="mob-menu">
					<ul class="HeaderNavig">
					<li><a href="index.php">Welkom</a></li>
					<li><a href="fotogal.php">Foto's</a></li>
					<li><a href="artikels.php">Artikels &amp; Media</a></li>
					<li><a href="contact.php">Contacteer Ons</a></li>
					<li><a href="ligging.php">Praktisch &amp; Ligging</a></li>
				</ul>
				</nav>
				</div>
			</div>
			<div class="langsel"><a href="reserveren_fr.php">Français</a></div>
		</div>
		<div id="SubHeader">&nbsp;</div>
		<div id="Content">
				<div style="width:100%; margin:0; padding:0;">
					<div id="LeftSide">
						<div class="LeftSide">
						<? SubMenu (); ?>
						</div>
					</div>
					<div id="CenterPage">
						<div class="CenterPage">
							<h1>Reservatie Formulier</h1>
                             <div class="container">
                            <p><?php echo $vermelding; ?></p>
							<p><?php echo $image; ?></p>
                            <p><?php echo $verplicht; ?></p>
							<form id="contactForm" action="reserveren.php" name="DataForm" method="post" onSubmit="return CheckRequiredFields()">
							<ol>
								<li><label>Datum reservatie: <span style='color:#ff0000';>Rood = gesloten</span></label>
									 <input type="text" name="datum" id="datum" class="Inputbox" value="dd/mm/jjjj" onFocus="this.select();lcs(this)" onClick="event.cancelBubble=true;this.select();lcs(this)">
								<span style='color:#ff0000';>Gelieve eerst de datum te selecteren. <br />
Indien u géén datum selecteert, kan u het uur en het aantal personen niet kiezen!</span>
                                </li>
								<table width="90%" cellpadding="5" cellspacing="5">
									<tr>
									  <td style="width:50%" class="noborder">
											<div class="noborder-mbl">
											<select name="uur" id="uur" class="Inputbox" onChange="checkTijd(this, 'nl')">
												<option value="">Kies uur van reservatie</option>
											</select>
											</div>
											</li>
										</td>
										<td style="width:50%;" class="noborder">
											<div class="noborder-mbl">
											<select name="personen" class="Inputbox">
												<option value="">Kies aantal volwassenen</option>
												<option value="1">1 volwassene</option>
												<option value="2">2 volwassenen</option>
												<option value="3">3 volwassenen</option>
												<option value="4">4 volwassenen</option>	
												<option value="5">5 volwassenen</option>
												<option value="6">6 volwassenen</option>	
												<option value="7">7 volwassenen</option>
												<option value="8">8 volwassenen (max)</option>	
											</select>
                                            </div>
										</td>
								  </tr>
                                  <tr>
										<td width="50%" class="noborder display-none">
                                        <div class="row">
                                        <div class="col-lg-6">
                                          <a target="_self" href="#" class="imgButton one">
                                            <img src="images/infobutton.png" class="img-circle" alt="Extra Info" width="60" height="40"></a><br><br>
                                         </div>
                                         <!-- /.col-lg-4 -->
                                         </div>
                                         <!-- /.row -->
										</td>
										<td width="50%" class="noborder">
											<div class="noborder-mbl">
											<select name="kinderen" class="Inputbox">
												<option value="">Kies aantal kinderen</option>					
                                                <option value="0">geen kinderen</option>
                                            	<option value="1">1 kind</option>
												<option value="2">2 kinderen</option>
												<option value="3">3 kinderen</option>
												<option value="4">4 kinderen</option>	
												<option value="5">5 kinderen</option>
												<option value="6">6 kinderen</option>	
												<option value="7">7 kinderen</option>
												<option value="8">8 kinderen (max)</option>	
											</select>
											</div>
                                            
										</td>
                                        
								  </tr>
								</table>
                                <span style='color:#ff0000';>Gelieve zowel het aantal volwassenen als het aantal kinderen te selecteren (ook al zijn er geen kinderen bij). <br />
Anders wordt de “verzend-knop” niet zichtbaar.</span>
								<p class="smallgrey"></p>
								<li><label>Volledige naam: <span class="error">*</span></label>
							    	<input type="text" name="naam" class="Inputbox" />
								</li>
								<li><label>Email-adres: <span class="error">*</span></label>
									<input type="text" name="email"  class="Inputbox"/>
								</li>
								<li><label>Email-adres herhalen: <span class="error">*</span></label>
									<input type="text" name="email2"  class="Inputbox"/>
								</li>
								<li>
									<label>GSM-nummer (Geen vaste lijn aub):<span class="error">*</span><span style='color:#ff0000';> Voorbeeld: 0475123456 (zonder spaties)</span></label>
									<input type="text" name="telnr" id="telnr-new" class="Inputbox"/>
								</li>
                                <li><label>Stad: <span class="error">*</span></label>
							    	<input type="text" name="stad" class="Inputbox" />
								</li>
								<li><label>Bericht:</label>
									<textarea name="bericht" class="Inputbox"></textarea><br />
<p>“Wij sturen U een bevestiging van uw reservatie per email.  Gelieve ook uw spam- en ongewenste email- folder te controleren of u onze bevestiging zeker ontvangen heeft aub, want soms kan onze bevestiging in een van deze mappen terecht komen!”</p>
								</li>
								<p><div align="center"><input type="submit" class="Inputbox" name="versturen" value="Verstuur Bericht" id="versturen" style="display: none" /></div></p>
								<li class="antispam"><label>Gelieve dit veld leeg te laten:</label><input name="url" /></li>
							</ol>
							</form>
						</div>
					</div>
					<div id="RightSide">
						<br /><br />
						<img src="images/HomePagePhoto-1212.jpg" width="234" height="157" alt="Het Kompas foto 1" /><br /><br />
						<img src="images/HomePagePhoto-1212-2.jpg" width="234" height="157" alt="Het Kompas foto 2" /><br /><br />
                        <img src="images/HomePagePhoto-1212-3.jpg" width="234" height="300" alt="Het Kompas foto 2" />					
					</div>
					</div>
		</div>
	</div>
	<div id="Footer">&nbsp;</div>
</div>	
	<div id="FooterContent">
		<? FooterContent (); ?>
	</div>
</div>
<? GoogleAnal (); ?>
<? echo $hide; ?> 
</body>
</html>

<?php
function form_controle()
{

$naam = ($_POST['naam']);
$telnr = ($_POST['telnr']);
$email = ($_POST['email']);
$bericht = ($_POST['bericht']);
$uur = ($_POST['uur']);
$uur2 = str_replace("u","",$uur);
$uur3 = str_replace(":","",$uur2);
$personen = ($_POST['personen']);
$kinderen = ($_POST['kinderen']);
$datum = ($_POST['datum']);
$url = ($_POST['url']);
$stad = ($_POST['stad']);
$som = ($_POST['personen'] + $_POST['kinderen']);
$kinder_line = ($kinderen == "0" ? "" : "$personen+$kinderen");

$locale = setlocale (LC_ALL, 'nl_BE.UTF-8'); 
list ($dag, $maand, $jaar) = split('[/.-]', $datum); 

$datums = $maand.'/'.$dag.'/'.$jaar;
$changedatum = strftime ("%A, %d %B %Y" ,strtotime ($datums));

// Nu stuur ik een email om te zeggen dat er iemand bijgekomen is voor de mailing.

$to = "info@hetkompas.be, frontdesk@hetkompas.be"; 
//$to = "info@westdesign.be";

$subject = "Reservatie";
$body = stripslashes ("
<html><title>Contact</title>
<body bgcolor=\"#FFFFFF\" text=\"#000000\">
<font size=\"-1\" face=\"Verdana, Arial, Helvetica, sans-serif\">
Reservatie voor $changedatum met $personen volwassenen en $kinderen kinderen, om $uur
<br /><br />
<strong>Naam:</strong> $naam <br />
<strong>T:</strong> $telnr <br />
<strong>E-mail:</strong> $email <br />
<strong>Stad:</strong> $stad <br />
<strong>Bericht:</strong><br />
$bericht
<br /><br />
<table width=500 border=\"1\">
  <tr>
    <td width=\"35\" align=\"center\">Uur</td>
    <td width=\"66\" align=\"center\">Aantal</td>
    <td width=\"154\" align=\"center\">VW+K</td>
    <td width=\"63\" align=\"center\">Naam</td>
    <td width=\"87\" align=\"center\">Opmerking</td>
    <td width=\"71\" align=\"center\">Telefoon</td>
  </tr>
  <tr>
    <td align=\"right\">$uur3</td>
    <td align=\"right\">$som</td>
    <td align=\"right\">$kinder_line</td>
    <td align=\"left\">$naam</td>
    <td align=\"left\">$bericht</td>
    <td align=\"left\">$telnr</td>
  </tr>
</table>

");

$headers ='X-Mailer: PHP/' . phpversion() . "\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n";
$headers .= 'From: '.$email.''."\r\n";


if(isset($_POST['url']) && $_POST['url'] == '')
{
mail($to, $subject, $body, $headers,'-finfo@hetkompas.be'); 
}
else
{
	echo '<p>This is spam</p>';
}
header("Location:reserveren.php?s=ok");

}

?>