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

{% block title %}Bienvenue |
	{{ parent() }}
{% endblock %}

{% block body %}
	<section id="home" class="slider-area fix p-relative">
		<div class="slider-active" style="background: #101010;">
			{% for cmsPage in slide.cmsPages %}
				<div class="single-slider slider-bg d-flex align-items-center" style="background-image: url({{ vich_uploader_asset(cmsPage, 'imageFile') }}); background-size: cover;">
					<div class="container">
						<div class="row justify-content-center align-items-center">
							<div class="col-lg-7 col-md-7">
								<div class="slider-content s-slider-content mt-80 text-center">
									<h2 data-animation="fadeInUp" data-delay=".4s">{{ cmsPage.name}}</h2>
									<p data-animation="fadeInUp" data-delay=".6s">{{ cmsPage.description}}</p>
									<div class="slider-btn mt-30 mb-105">
										<a href="{{ path('presentation')}}" class="btn ss-btn active mr-15" data-animation="fadeInLeft" data-delay=".4s">Découvrir plus
										</a>
										<a href="https://www.youtube.com/watch?v=gyGsPlt06bo" class="video-i popup-video" data-animation="fadeInUp" data-delay=".8s" style="animation-delay: 0.8s;" tabindex="0">
											<i class="fas fa-play"></i>
											Vidéo d'introduction</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
	</section>
	<div id="booking" class="booking-area p-relative">
		<div class="container">
			<form action="#" class="contact-form">
				<div class="row align-items-center">
					<div class="col-lg-12">
						<ul>
							<li>
								<div class="contact-field p-relative c-name">
									<label>
										<i class="fal fa-badge-check"></i>
										Date d'arrivée</label>
									<input type="date" id="chackin" name="date">
								</div>
							</li>
							<li>
								<div class="contact-field p-relative c-name">
									<label>
										<i class="fal fa-times-octagon"></i>
										Date de départ</label>
									<input type="date" id="chackout" name="date">
								</div>
							</li>
							<li>
								<div class="contact-field p-relative c-name">
									<label>
										<i class="fal fa-users"></i>
										Adultes</label>
									<select name="adults" id="adu">
										<option value="sports-massage">Adultes</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
									</select>
								</div>
							</li>
							<li>
								<div class="contact-field p-relative c-name">
									<label>
										<i class="fal fa-baby"></i>
										Enfant</label>
									<select name="child" id="cld">
										<option value="sports-massage">Enfant</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
									</select>
								</div>
							</li>
							<li>
								<div class="contact-field p-relative c-name">
									<label>
										<i class="fal fa-concierge-bell"></i>
										Chambre</label>
									<select name="room" id="rm">
										<option value="sports-massage">Chambre</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
									</select>
								</div>
							</li>
							<li>
								<div class="slider-btn">
									<label>
										<i class="fal fa-calendar-alt"></i>
									</label>
									<button class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">Voir les disponibilités</button>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</form>
		</div>
	</div>
	<section id="presentation" class="about-area about-p pt-120 pb-120 p-relative fix">
		<div class="animations-02"><img src="{{ vich_uploader_asset(a_propos, 'imageFile') }}" alt="contact-bg-an-02"></div>
		<div class="container">
			<div class="row justify-content-center align-items-center">
				<div class="col-lg-6 col-md-12 col-sm-12">
					<div class="s-about-img p-relative  wow fadeInLeft animated" data-animation="fadeInLeft" data-delay=".4s">
						<img src="{{ vich_uploader_asset(a_propos, 'imageFile') }}" alt="img">
					</div>
				</div>

				<div class="col-lg-6 col-md-12 col-sm-12">
					<div class="about-content s-about-content  wow fadeInRight  animated pl-30" data-animation="fadeInRight" data-delay=".4s">
						<div class="about-title second-title pb-25">
							<h5>À propos de nous</h5>
							<h2>{{ a_propos.name }}</h2>
						</div>
						<p>{{ a_propos.description }}</p>
						<div class="about-content3 mt-30">
							<div class="row justify-content-center align-items-center">

								<div class="col-md-6">
									<div class="slider-btn">
										<a href="{{ path('presentation')}}" class="btn ss-btn smoth-scroll">Découvrir plus</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section id="service-details2" class="pt-120 pb-90 p-relative" style="background-color: #f7f5f1;">
		<div class="animations-01"><img src="{{ vich_uploader_asset(service, 'imageFile') }}" alt="an-img-01"></div>
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-12">
					<div class="section-title center-align mb-50 text-center">
						<h5>Explorer</h5>
						<h2>{{ service.title }}</h2>
						<p>{{ service.description }}</p>
					</div>
				</div>
				{% for product in service.products %}
					<div class="col-lg-4 col-md-6">
						<div class="services-08-item mb-30">
							<div class="services-icon2">
								<img src="{{ vich_uploader_asset(product, 'imageFile') }}" alt="img">
							</div>
							<div class="services-14-thumb">
								<img src="{{ vich_uploader_asset(product, 'imageFile') }}" alt="img">
							</div>
							<div class="services-08-content">
								<h3>
									<a href="{{ path('detailservice', {'id': product.id}) }}">{{ product.title }}</a>
								</h3>
								<p>
									{{ product.description|raw }}</p>
								<a href="{{ path('detailservice', {'id': product.id}) }}">Lire la suite
									<i class="fal fa-long-arrow-right"></i>
								</a>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>
	<section id="services" class="services-area pt-113 pb-150">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-xl-12">
					<div class="section-title center-align mb-50 text-center">
						<h5>Le plaisir du luxe</h5>
						<h2>{{ productCategory.title }}</h2>
						<p>{{ productCategory.description }}</p>
					</div>
				</div>
			</div>
			<div class="row services-active">
				{% for product in productCategory.products %}
					<div class="col-xl-4 col-md-6">
						<div class="single-services mb-30">
							<div class="services-thumb">
								<a class="gallery-link popup-image" href="{{ vich_uploader_asset(product, 'imageFile') }}">
									<img src="{{ vich_uploader_asset(product, 'imageFile') }}" alt="img">
								</a>
							</div>
							<div class="services-content">
								<div class="day-book">
									<ul>
										<li>{{ product.price|number_format(0, ',', ' ') }}/Nuit</li>
										<li>
											<a href="{{ path('reservation', {'id': product.id})}}">Réserver maintenant</a>
										</li>
									</ul>
								</div>
								<h4>
									<a href="{{ path('detailroom', {'id': product.id}) }}">{{ product.title }}</a>
								</h4>
								<p>{{ product.description|raw }}</p>
								<div class="icon">
									<ul>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon1.png') }}" alt="img"></li>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon2.png') }}" alt="img"></li>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon3.png') }}" alt="img"></li>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon4.png') }}" alt="img"></li>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon5.png') }}" alt="img"></li>
										<li><img src="{{ asset('assets/custom/img/icon/sve-icon6.png') }}" alt="img"></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>
	<section class="booking pt-120 pb-120 p-relative fix">
		<div class="animations-01"><img src="{{ asset('assets/custom/img/bg/an-img-01.png') }}" alt="an-img-01"></div>
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-6 col-md-6">
					<div class="contact-bg02">
						<div class="section-title center-align">
							<h2>Réserver une chambre</h2>
						</div>
						{{ form_start(form) }}
						<div class="row">
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-name mb-20">
									<label>
										<i class="fal fa-badge-check"></i>
										Date de reservation</label>
									{{ form_widget(form.create_date, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.create_date) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-name mb-20">
									<label>
										<i class="fal fa-badge-check"></i>
										Date d'arrivée</label>
									{{ form_widget(form.checkin_date, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.checkin_date) }}
								</div>
							</div>

							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-subject mb-20">
									<label>
										<i class="fal fa-badge-check"></i>
										Date de départ</label>
									{{ form_widget(form.checkin_out, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.checkin_out) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-option mb-20">
									<label>
										<i class="fal fa-times-octagon"></i>
										Nom et prenom</label>
									{{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.name) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-option mb-20">
									<label>
										<i class="fal fa-concierge-bell"></i>
										Chambre</label>
									{{ form_widget(form.product, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.product) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-subject mb-20">
									<label>
										<i class="fal fa-users"></i>
										Adultes</label>
									{{ form_widget(form.number_of_adults, {'attr': {'class': 'form-control select'}}) }}
									{{ form_errors(form.number_of_adults) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-subject mb-20">
									<label>
										<i class="fal fa-users"></i>
										Enfants</label>
									{{ form_widget(form.number_of_children, {'attr': {'class': 'form-control select'}}) }}
									{{ form_errors(form.number_of_children) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-option mb-20">
									<label>
										<i class="fal fa-concierge-bell"></i>
										Telephone</label>
									{{ form_widget(form.phone_number, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.phone_number) }}
								</div>
							</div>
							<div class="col-lg-6 col-md-6">
								<div class="contact-field p-relative c-option mb-20">
									<label>
										<i class="fal fa-concierge-bell"></i>
										Email</label>
									{{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
									{{ form_errors(form.email) }}
								</div>
							</div>
							<div class="col-lg-12">
								<div class="slider-btn mt-15">
									<button class="btn ss-btn" type="submit" data-animation="fadeInRight" data-delay=".8s">
										<span>Réserver une chambre maintenant</span>
									</button>
								</div>
							</div>
						</div>
						{{ form_end(form) }}
					</div>
				</div>
				<div class="col-lg-6 col-md-6">
					<div class="booking-img">
						<img src="{{ asset('assets/custom/img/bg/booking.png') }}" alt="img">
					</div>
				</div>
			</div>
		</div>
	</section>

	<section
		id="video" class="video-area pt-150 pb-150 p-relative" style="background-image:url({{ asset('assets/custom/img/bg/video.png') }}); background-repeat: no-repeat; background-position: center bottom; background-size:cover;">
		<!-- Lines -->
		<div class="content-lines-wrapper2">
			<div class="content-lines-inner2">
				<div class="content-lines2"></div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="s-video-wrap">
						<div class="s-video-content">
							<a href="https://www.youtube.com/watch?v=gyGsPlt06bo" class="popup-video"><img src="{{ asset('assets/custom/img/bg/play-button.png') }}" alt="circle_right"></a>
						</div>
					</div>
					<div class="section-title center-align text-center">
						<h2>FAITE UN TOUR AU {{app_name}}</h2>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div class="col-lg-12">
		<div class="section-title center-align mb-50 text-center">
			<h5>Les Partenaires</h5>
		</div>
	</div>
	<div class="brand-area pt-60 pb-60" style="background-color:#f7f5f1">
		<div class="container">
			<div class="row brand-active">
              {% for cmsMedia in partenaire.cmsMedia %}
				<div class="col-xl-2">
					<div class="single-brand">
						<img src="{{ vich_uploader_asset(cmsMedia, 'pathFile') }}" alt="img">
					</div>
				</div>
              {% endfor %}
			</div>
		</div>
	</div>
{% endblock %}