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

if ($_POST['versturen']) 
	{ 
	form_controle();
	}
if ($_GET['s'] == "ok") 
	{ 
	$vermelding = "<p><b><font color='#FF0000' style='font-size:17px'>Hartelijk dank voor uw reservatie.  <br>
	Wij sturen U zo snel mogelijk een email en een SMS 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.\nGeen streepjes of + of / of - tekens.\nGeen spaties.\nVoorbeeld: 0123456789 is juist.\n0123 45 67 89 is fout.\n+32123456789 is fout.\n0123/456789 is fout.\n0123-45-67-89 is fout.\n0123/45/67/89 is fout."; 
			//success = false;
		}
	}
	
	if(WithoutContent(document.DataForm.personen.value))
		{ errormessage += "\n\nGelieve het aantal volwassenen 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));

	if(somVolKids  > 6 )
	{
					errormessage += "\n\nSorry, wij hebben geen tafel meer vrij voor dit aantal 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;}
#tooltip {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
    }
 
    #tooltip:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after {
            right: 10px;
            left: auto;
            margin: 0;
        }


    .mbt-tooltip {
        display: none;
        width: auto;
        max-width: 100% !important;
    } 

    .mbt-hover {
            }
</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();
});
$( function() {

        var targets = $('.mbt-hover'),
            tooltip = $('.mbt-tooltip'),
            title   = false;
     
        targets.bind( 'mouseenter', function()
        {
            tip     = targets.children('.mbt-tooltip');
            tooltip = $( '<div id="tooltip"></div>' );
     
            if( !tip || tip == '' )
                return false;
            
            //target.remove('.mbt-tooltip');
            //target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   
                   .html( tip.clone().show() )

                   .appendTo( targets );
     
            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );
     
                var pos_left = targets.offset().left + ( targets.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = targets.offset().top - tooltip.outerHeight() - 20;
     
                if( pos_left < 0 )
                {
                    pos_left = targets.offset().left + targets.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );
     
                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = targets.offset().left - tooltip.outerWidth() + targets.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );
     
                if( pos_top < 0 )
                {
                    var pos_top  = targets.offset().top + targets.outerHeight();
                    tooltip.addClass( 'top' );
                }
                else
                    tooltip.removeClass( 'top' );
     
                tooltip.css( { left: pos_left, top: pos_top } )
                       .animate( { top: '+=10', opacity: 1 }, 50 );
            };
     
            init_tooltip();
            $( window ).resize( init_tooltip );

     
           var remove_tooltip = function()
            {
                tooltip.animate( { top: '-=10', opacity: 0 }, 300, function()
                {
                    $( this ).remove();
                });

                targets.children('.mbt-tooltip', tip);
    
            };
            
            //**** ISSUE AREA ****//
            targets.bind( 'mouseleave', remove_tooltip );
            tooltip.bind( 'click', remove_tooltip );
        });
    });
</script>
<!-- Hotjar Tracking Code for www.hetkompas.be -->

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:866612,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</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>
							<p><?php echo $vermelding; ?></p>
							<p><?php echo $image; ?></p>
                            <p><?php echo $verplicht; ?></p>
							<form id="contactForm" action="reserveren4.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 niet kiezen!<br>
Gelieve de datum niet zelf in te typen, maar aan te klikken in de kalender die tevoorschijn komt aub!</span>
                                </li>
                                <div class="mbt-hover" style="width:80px; height:auto;">
                        <img src="images/Info2.png" alt="Info">
                        <div class="mbt-tooltip" style="width:200px; height:auto;">
                         	<p>Op zaterdagavond en tijdens vakantieperiodes proberen wij onze avonden in meerdere “seatings” te verdelen.</p>
                			<p>U kan dan reserveren om 18u, om 19u of om 20u15.</p>
               				<p>Indien u om 18u reserveert, dan vragen wij u om de tafel tegen 20u terug vrij te maken.</p>
                			<p>Indien u om 19u of om 20u15 reserveert, dan kan u onbeperkt, de ganse avond aan tafel blijven zitten.</p>  <p>Dank u voor uw begrip.</p>       
      					</div>
                    </div>
								<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 personen</option>
												<option value="1">1 persoon</option>
												<option value="2">2 personen</option>
												<option value="3">3 personen</option>
												<option value="4">4 personen</option>	
												<option value="5">5 personen</option>
												<option value="6">6 personen </option>	
                                                <option value="7">7 personen </option>	
                                                <option value="8">8 personen </option>	
                                                <option value="9">9 personen </option>	
                                                <option value="10">10 personen </option>	
                                                <option value="11">11 personen </option>	
                                                <option value="12">12 personen </option>	
                                                <option value="13">13 personen </option>	
                                                <option value="14">14 personen </option>	
                                                <option value="15">15 personen </option>	
                                                <option value="16">16 personen </option>	
                                                <option value="17">17 personen </option>	
                                                <option value="18">18 personen </option>	
                                                <option value="19">19 personen </option>		
                                                <option value="20">20 personen (max)</option>	
												
											</select>
                                            </div>
										</td>
								  </tr>
                                 <!-- <tr>
										<td width="50%" class="noborder display-none">
										</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</option>	
                                                <option value="9">9 kinderen</option>	
                                                <option value="10">10 kinderen</option>	
                                                <option value="11">11 kinderen</option>	
                                                <option value="12">12 kinderen (max)</option>	
												
											</select>
											</div>
                                            
										</td>
                                        
								  </tr>-->
								</table>
								<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>
                                    <input id="cbx" type="checkbox" name="privacy" class="" style="width: 14px; float: left; margin: 15px 10px 0 0;">
                                    <label for="cbx" class="label-cbx" style="padding-top: 12px;">Ik aanvaard de <a href="#" target="_blank">privacyvoorwaarden</a></label>
                                </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-3.jpg" width="234" height="300" alt="Het Kompas foto 2" /><br /><br />
					   <a href="http://www.faq.hetkompas.be/FAQ NL.pdf" target="new"><img src="images/faq.png" width="234" height="127" alt="Het Kompas Faq" /></a></a>	<br />			
					</div>
					</div>
		</div>
	</div>
	<div id="Footer">&nbsp;</div>
</div>	
	<div id="FooterContent">
		<? FooterContent (); ?>
	</div>
</div>
<? GoogleAnal (); ?>
<? echo $hide; ?> 

<script>
  (function (w,i,d,g,e,t,s) {w[d] = w[d]||[];t= i.createElement(g);
    t.async=1;t.src=e;s=i.getElementsByTagName(g)[0];s.parentNode.insertBefore(t, s);
  })(window, document, '_gscq','script','//widgets.getsitecontrol.com/137588/script.js');
</script>
</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']);
$privacy = ($_POST['privacy']);
$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, dpocket4@icloud.com"; 
$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 personen, 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=\"100\" align=\"center\"></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=\"center\"></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:reserveren4.php?s=ok");

}

?>