{% extends 'layout.html.twig' %}

{% block title %}Contact - Hôtel du Monolithe{% endblock %}

{% block description_meta %}Contact et réservation pour l'Hôtel du Monolithe à villebois dans la plaine de l'Ain.{% endblock %}

{% block slideshow %}{% endblock %}

{% block content %}
    
    <div class="section clearfix">
    
        <div class="main-content">
        
            <div class="page-title pageTitleH1">Réservation ou demande de renseignements</div>
        
            <div class="page-content">
                {% if app.session.hasFlash('successMessage') %}
                    <div class="msg success">{{ app.session.flash('successMessage') }}</div>
                {% endif %}
                                
                <form action="{{ path('contact') }}#commentform" method="post" id="commentForm" class="clearfix" novalidate="novalidate">
                    
                    <div class="field-row">
                        <div class="form_error">{{ form_errors(form.subject) }}</div>
            			{{ form_label(form.subject, 'Objet:') }}
                        {{ form_widget(form.subject, {'attr': {'class': 'text_input'}}) }}
            		</div>
                    
                    <div class="field-row">
                        <div class="form_error">{{ form_errors(form.name) }}</div>
            			{{ form_label(form.name, 'Nom / Prénom:') }}
                        {{ form_widget(form.name, {'attr': {'class': 'text_input'}}) }}
            		</div>
                                                
                    <div class="field-row">
                        <div class="form_error">{{ form_errors(form.email) }}</div>
            			{{ form_label(form.email, 'Adresse email:') }}
                        {{ form_widget(form.email, {'attr': {'class': 'text_input'}}) }}
                    </div>
                    
                    <div class="field-row">
                        <div class="form_error">{{ form_errors(form.phone) }}</div>
            			{{ form_label(form.phone, 'Numéro de tél.:') }}
                        {{ form_widget(form.phone, {'attr': {'class': 'text_input'}}) }}
                    </div>
                    
                    <div id="form_reservation">
                        
                        <div class="field-row">
                            <div class="form_error">{{ form_errors(form.startDate) }}</div>
                			{{ form_label(form.startDate, "Date d'arrivée:") }}
                            {{ form_widget(form.startDate, {'attr': {'class': 'text_input datepicker'}}) }}
                        </div>
                        
                        <div class="field-row">
                            <div class="form_error">{{ form_errors(form.endDate) }}</div>
                			{{ form_label(form.endDate, 'Date de départ:') }}
                            {{ form_widget(form.endDate, {'attr': {'class': 'text_input datepicker'}}) }}
                        </div>
                        
                        <div class="field-row">
                            <div class="form_error">{{ form_errors(form.personNumber) }}</div>
                			{{ form_label(form.personNumber, 'Nombre de personnes:') }}
                            {{ form_widget(form.personNumber, {'attr': {'class': 'text_input'}}) }}
                        </div>
                        
                        <div class="field-row">
                            <div class="form_error">{{ form_errors(form.roomType) }}</div>
                			{{ form_label(form.roomType, 'Chambres:') }}
                            {{ form_widget(form.roomType, {'attr': {'class': 'text_input'}}) }}
                        </div>
                        
                        <div class="field-row">
                            <div class="form_error">{{ form_errors(form.hasPet) }}</div>
                			{{ form_label(form.hasPet, 'Avec animal de compagnie:') }}
                            {{ form_widget(form.hasPet, {'attr': {'class': 'text_input'}}) }}
                        </div>
                        
                    </div>
                    
                    <div class="field-row" id="contact_message_container">
                        <div class="form_error">{{ form_errors(form.message) }}</div>
            			{{ form_label(form.message, 'Message:') }}
                        {{ form_widget(form.message, {'attr': {'cols': '60', 'rows': '9', 'class': 'text_input'}}) }}
                    </div>
                    <script>
					grecaptcha.ready(function() {
					grecaptcha.execute('6LfXwIoUAAAAABhXKPF_c5LN4HBwS7tSS4eeCpIn', {action: ''})
					.then(function(token) {
						var recaptchaResponse = document.getElementById('recaptchaResponse');
                		recaptchaResponse.value = token;
					});
					});
					</script>
					<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
                    {{ form_rest(form) }}
                    
                    <input type="submit" value="Envoyer votre message" class="button2" />
                    
                </form>
            
            </div>
        
        </div>
        
        <!-- BEGIN .sidebar -->
		<div class="sidebar last-col">
			
            <div class="widget">
				<div class="widget-title clearfix"><div class="pageTitleH5">Contact</div></div>
				<ul>
					<li><span class="bold">{% if phone_number2 %}Tél. fixe{% else %}Téléphone{% endif %}:</span> {{ phone_number }}</li>
					<li><span class="bold">Email:</span> <span class="js_email"></span></li>
					<li><span class="bold">Facebook :</span> <a href="https://www.facebook.com/LeRiccoty" target="_blank">LeRiccoty</a></li>
				</ul>
			</div>
            
			<div class="widget">
				<div class="widget-title clearfix"><div class="pageTitleH5">Adresse</div></div>
				<div>
                    <ul>
    					<li>
                            {{ info_address1 }},<br />
                            {% if info_address2 %}<span style="padding-left: 13px;">{{ info_address2 }},</span><br />{% endif %}
                            <span style="padding-left: 13px;">{{ info_zip }} {{ info_city }}</span>
                        </li>
    				</ul>
                </div>
			</div>
			
			<div class="widget">
				<div class="widget-title clearfix"><div class="pageTitleH5">Localisation</div></div>
				<div>
                    <div id="gmap"></div>
                </div>
			</div>
			
		<!-- END .sidebar -->
		</div>
        
    </div>
    
{% endblock %}

{% block js %}
    
    {{ parent() }}
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={{ gmap_api_key }}&sensor=false"></script>
    
    <script type='text/javascript' src='js/jquery-ui.js'></script>
	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery_map3.js"></script>
    <script type="text/javascript" src="js/contact.js"></script>
    
{% endblock %}