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

{% block title %}Nos chambres |
	{{ parent() }}
{% endblock %}

{% block body %}
	<!-- breadcrumb-area -->
	<section class="breadcrumb-area d-flex align-items-center" style="background-image:url({{ asset('assets/custom/img/bg/footer-bg.png') }})">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-xl-12 col-lg-12">
					<div class="breadcrumb-wrap text-center">
						<div class="breadcrumb-title">
							<h2>Nos Chambres</h2>
							<div class="breadcrumb-wrap">

								<nav aria-label="breadcrumb">
									<ol class="breadcrumb">
										<li class="breadcrumb-item">
											<a href="{{ path('default')}}">Accueil</a>
										</li>
										<li class="breadcrumb-item active" aria-current="page">Nos Chambres</li>
									</ol>
								</nav>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</section>
	<section id="services" class="services-area pt-120 pb-90">

		<div class="container">

			<div class="row">
				{% for product in productCategory.products %}
					<div class="col-xl-4 col-md-6">
						<div class="single-services ser-m 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-bg.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>
{% endblock %}