<?php
/*
Template Name: Reservas
*/
get_header();
?>
    <div class="row contacto">
            <!-- Contact Details Column -->
        <!-- /.row -->

        <!-- Contact Form -->
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                        <div class="reserva"><h2>Reservas</h2>Horarios de reserva</div>
                        <h4><b>Mediodía</b> 12:00, 12.30 y 13:00hs. // <b>Noche</b> 19:30, 20:00, 20:30 y 21:00hs.</h4><h5> Por otros horarios consultar.</h5>
            </div>
                <form name="sentMessage" id="contactForm" onsubmit='return validacion()'>
            <div class="col-md-4 col-md-offset-1">
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Nombre y Apellido</label>
                            <input type="text" class="form-control" id="name" name="name" required data-validation-required-message="Por favor ingrese su nombre." onsubmit="return validacion()" required="true">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Teléfono</label>
                            <input type="tel" class="form-control" id="phone" name="phone" required data-validation-required-message="Por favor ingrese su teléfono.">
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Email</label>
                            <input type="email" class="form-control" id="email" name="email" required data-validation-required-message="Por favor ingrese su correo electrónico.">
                        </div>
                    </div>
                    <div id="success"></div>
                    <!-- For success/fail messages -->
                    <p>La reserva debe realizarse con medio día de antelación. Su reserva será confirmada por nosotros.</p>
            </div>
            <div class="col-md-2 col-md-offset-1">
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Fecha</label>
                            <input type="text" class="form-control" id="fecha" name="fecha">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Horarios</label>
                            <input type="tel" class="form-control" id="hs" name="hs">
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>Cantidad de personas</label>
                           <div class="form-group">
                            <input type="text" class="form-control" id="cant" name="cant"></input>
                            </div>
                        </div>
                    </div>
                    <div id="success"></div>
                    <!-- For success/fail messages -->
                    <button type="submit" id="submit_btn" class="btn btn-default">Hacer reserva</button>
            </div>
                </form>
            </div>
        <div id="contactResult"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function validacion() {
  if (condicion que debe cumplir el primer campo del formulario) {
    // Si no se cumple la condicion...
    alert('[ERROR] El campo debe tener un valor de...');
    return false;
  }
  else if (condicion que debe cumplir el segundo campo del formulario) {
    // Si no se cumple la condicion...
    alert('[ERROR] El campo debe tener un valor de...');
    return false;
  }
  ...
  else if (condicion que debe cumplir el último campo del formulario) {
    // Si no se cumple la condicion...
    alert('[ERROR] El campo debe tener un valor de...');
    return false;
  }

  // Si el script ha llegado a este punto, todas las condiciones
  // se han cumplido, por lo que se devuelve el valor true
  return true;
}
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#submit_btn").click(function(e) {

        var proceed = true;
        jQuery("#contactForm input[required=true], #contactForm select[required=true]").each(function(){
            jQuery(this).css('border-color','');
            if(!jQuery.trim(jQuery(this).val())){ //if this field is empty
                jQuery(this).css('border-color','red'); //change border color to red
                proceed = false; //set do not proceed flag
            }
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if(jQuery(this).attr("type")=="email" && !email_reg.test(jQuery.trim(jQuery(this).val()))){
                jQuery(this).css('border-color','red'); //change border color to red
                proceed = false; //set do not proceed flag
            }
        });

        if(proceed) {
            post_data = {
                'name'     : jQuery('input[name=name]').val(),
                'phone'  : jQuery('input[name=phone]').val(),
                'email'    : jQuery('input[name=email]').val(),
                'date'  : jQuery('input[name=fecha]').val(),
                'hs'  : jQuery('input[name=hs]').val(),
                'cant'  : jQuery('input[name=cant]').val(),
        'ip' : '<?php echo $_SERVER['REMOTE_ADDR']; ?>'
            };
            jQuery.post('<?php echo get_bloginfo('template_url').'/sendmail.php?action=reserva'; ?>', post_data, function(response){
                if(response.type == 'error'){ //load json data from server and output message
                    output = '<div class="error in">'+response.text+'</div>';
            $('#contactResult').addClass( "error" );
                }else{
                    output = '<div class="success in">'+response.text+'</div>';
                    jQuery("#contactForm input").val('');
                    jQuery("#contactForm").slideUp(); //hide form after success
                }
                jQuery("#contactResult").hide().html(output).slideDown();
            }, 'json');
        }
    e.preventDefault();
    });
    jQuery("#contactForm input[required=true], #contactForm textarea[required=true]").keyup(function() {
        jQuery(this).css('border-color','');
        jQuery("#result").slideUp();
    });
});
</script></div>
<?php get_footer(); ?>