{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
{# Ajoutez les liens vers les fichiers CSS de noUiSlider #}
<link rel="stylesheet" href="{{ asset('front/nouislider.min.css') }}">
<link href="{{ asset('front/plugins/colorbox/colorbox.css') }}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('front/style/blog_responsive.css') }}">
<link rel="stylesheet" href="{{ asset('front/checkbox/stylecheckbox.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('front/style/offers_style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('front/style/offers_responsive.css') }}">
{# <link href="{{ asset('front/searchbar/vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">#}
{# <link href="{{ asset('front/searchbar/vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">#}
{# <!-- Font special for pages-->#}
{# <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">#}
{# <!-- Vendor CSS-->#}
{# <link href="{{ asset('front/searchbar/vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">#}
{# <link href="{{ asset('front/searchbar/vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">#}
{# <!-- Main CSS-->#}
{# <link href="{{ asset('front/searchbar/css/main.css') }}" rel="stylesheet" media="all">#}
{# <!-- Modal Css -->#}
{# <link rel="stylesheet" href="{{ asset('front/modals/fonts/icomoon/stylecommons.css') }}">#}
{# <!-- Bootstrap CSS -->#}
{# <link rel="stylesheet" href="{{ asset('front/modals/css/bootstrapcss.min.css') }}">#}
<style>
@media only screen and (max-width: 991px)
{
.sidebar_col {
margin-top: 40px!important;
}
}
.sidebar_list {
margin-top: 10px;
}
.sidebar_archives {
margin-top: 40px;
margin-left: 70px;
margin-right: 40px;
}
.badge{
font-size: 78%;
font-weight: 600;
background-color: #b29b63;
}
.offers_item{
position: relative;
width: 205%;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 300ms;
margin-bottom: 30px;
border-radius: 20px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.offers{
position: relative;
width: 205%;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 300ms;
margin-bottom: 30px;
border-radius: 20px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.offers_price {
display: inline-block;
font-size: 36px;
font-weight: 700;
color: #ff9100;
line-height: 25px;
}
.offers_price a{
display: inline-block;
font-size: 22px;
font-weight: 700;
color: #0093a9;
line-height: 25px;
}
.offer_name{
display: block;
font-size: 22px;
font-weight: 700;
background: #0093a9;
color: #FFFFFF;
width: 360px;
line-height: 35px;
padding-left: 12px;
}
.noUi-horizontal .noUi-tooltip{
bottom: -41px;
}
.offers_image_background {
position: relative;
margin: auto;
overflow: hidden;
}
.offers_image_background img {
max-width: 100%;
transition: all 0.3s;
display: block;
transform: scale(1);
}
.offers_image_background:hover img {
transform: scale(1.1);
}
.container {
max-width: 1440px!important;
}
.offers_content {
margin-top: 40px;
margin-left: 17px;
margin-bottom: 22px;
margin-right: 17px;
}
.offers_link {
margin-top: 24px;
}
.offers_link a {
font-size: 14px;
font-weight: 700;
color: #2d2c2c;
text-transform: uppercase;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.form-control:disabled, .form-control[readonly] {
background-color: #ffffff;
opacity: 1;
}
.main_nav_item a {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #0093a9!important;
text-transform: uppercase;
padding-bottom: 10px;
padding-top: 10px;
}
.main_nav_item::after {
display: block;
position: absolute;
left: -1px;
bottom: -11px;
width: calc(100% + 2px);
height: 2px;
background: linear-gradient(to right, #b29b63, #0093a9)!important;
content: '';
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px);
font-size: 13px;
}
@media all and (max-width: 767px) {
.offers_item{
width: 100%;
}
.offers_item>.sidebar_archives {
display: none;
}
.offers_item:last-child{
margin-top: -70px;
margin-left: -25px;
}
.blog{padding-top:0px;}
}
.sidebar_archivess{
}
@media all and (min-width: 1730px) {
.offers_item{
width: 210%;
}
.offers{
margin-top:60px;
}
.blog{padding-top:0px;}
.sidebar_archivess {
margin-top: -85px;
margin-left: 70px;
margin-right: 40px;
}
.sidebar_archives{
margin-top: 40px;
margin-left: 70px;
margin-right: 40px;
}
}
@media all and (max-width: 1730px) {
.sidebar_archivess {
margin-top: 40px;
margin-left: 70px;
margin-right: 40px;
}}
</style>
{% endblock %}
{% block body %}
<div class="home" style="height: 100px"></div>
<!-- Blog -->
<div class="blog">
<div class="container">
<div class="row">
<div class="col-lg-3 sidebar_col">
{{ form_start(form, {'attr': {'onsubmit': 'return false;', 'id': 'stars-form'}}) }}
<div class="offers" style="width: 95%;height: 502px">
<div class="sidebar_archivess">
<label style="font-size: 16px">Destination</label>
{{ form_widget(form.ville,{'attr':{'class':'form-control'}}) }}
<label style="font-size: 16px">Date d'arrivée</label>
{{ form_widget(form.dated) }}
<label style="font-size: 16px">Date de départ</label>
{{ form_widget(form.datef) }}
<label style="font-size: 16px">Nuitée</label>
{{ form_widget(form.nombreNuits,{'attr':{'class':'form-control'}}) }}
<div class="row row-space">
<button type="button" class="btn-submit" data-toggle="modal" data-target="#roomModal" style="margin-top: 20px;margin-left: 16px;font-size: 16px;font-weight: 600;border: 1px solid red;background: red;color: white;width: 87%;height: 50px;border-radius: 0.25rem;">
Ajouter une chambre
</button>
<!-- Modal -->
<div class="modal fade" id="roomModal" tabindex="-1" role="dialog" aria-labelledby="roomModalLabel" aria-hidden="true">
<span class="modal-dialog modal-dialog-centered" role="document">
<span class="modal-content rounded-0">
<span class="modal-content" style="width: 85%;margin-top: 131px;margin-left: 233px;">
<span class="modal-body bg-3">
<div class="modal-header" style="border-bottom: none">
<h5 class="modal-title" id="roomModalLabel" style="color: #0093a9;font-size: 22px;margin-left: -30px;font-weight: 700">Chambre et Occupation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="rooms" data-prototype="{{ form_widget(form.rooms.vars.prototype, {'attr': {'style': 'display:contents;color:black;font-size:18px'}})|e }}">
<div style="display: contents">
{% for roomForm in form.rooms %}
<li class="row room-item">
<span>
<label class="input--style-1" style="color: black">Adultes</label>
{{ form_widget(roomForm.nbadultes, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
</span>
<span style="margin-right: 10px;"></span>
<span>
<label class="input--style-1" style="color: black">Enfants</label>
{{ form_widget(roomForm.nbfnfants, {'attr': {'class': 'input--style-1', 'style': 'border:1px solid black'}}) }}
</span>
</li>
{% endfor %}
</div>
</ul>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="saveButtonModal" style="color: #FFFFFF;background:#ff9100 ">Valider</button>
</div>
</span>
</span>
</span>
</span>
</div>
<button type="submit" class="btn-submit" name="ville" onclick="submitForm('stars-form', 'ville')" style="margin-top:20px;margin-left: 16px;color: #FFFFFF;background: #0093a9;border: none;width: 87%;height: 50px;font-size: 18px;font-weight: 600;border-radius: 0.25rem;">Rechercher</button>
</div>
</div></div>
<div class="offers_item" style="width: 95%">
<div class="sidebar_archives">
<div class="sidebar_title"style="color: #0093a9;font-size: 20px;font-weight: 600">Prix</div>
<div class="sidebar_list">
{# Intégration du price range slider pour les champs "min" et "max" #}
<div id="price-range-slider"></div>
{{ form_row(form.min, {'attr': {'class': 'hidden', 'onchange': 'submitForm()'}}) }}
{# Placez form.max après le conteneur du slider #}
<div id="slider-max-container">
{{ form_row(form.max, {'attr': {'class': 'hidden', 'onchange': 'submitForm()'}}) }}
</div>
</div>
</div>
<div class="sidebar_archives">
<div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Star Rating</div>
<div class="sidebar_list">
{{ form_errors(form.star) }}
<div class="stars-container">
{% for child in form.star %}
<div class="star-option">
{{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
<label class="star-label" for="{{ child.vars.id }}">
{% if child.vars.value == 1 %}
<img src="{{ asset('front/images/etoil.png') }}" alt="1 étoile">
{% elseif child.vars.value == 2 %}
<img src="{{ asset('front/images/etoil.png') }}" alt="2 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="2 étoiles">
{% elseif child.vars.value == 3 %}
<img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="3 étoiles">
{% elseif child.vars.value == 4 %}
<img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="4 étoiles">
{% elseif child.vars.value == 5 %}
<img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
<img src="{{ asset('front/images/etoil.png') }}" alt="5 étoiles">
{% endif %}
{{ child.vars.label | raw }}
</label>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="sidebar_archives">
<div class="sidebar_title" style="color: #0093a9; font-size: 20px; font-weight: 600">Chambre</div>
<div class="sidebar_list">
{{ form_errors(form.chambre) }}
{% set displayCount = 5 %} {# Default display count #}
{% set totalRooms = form.chambre.children|length %}
<div class="stars-container" id="chambreList">
{% for child in form.chambre %}
<div class="star-option chambre-wrapper" style="display: {{ loop.index <= displayCount ? 'block' : 'none' }}">
{{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
<label class="star-label" for="{{ child.vars.id }}">
{{ child.vars.label | raw }}
</label>
</div>
{% endfor %}
</div>
{{ form_rest(form.chambre) }} {# Render the remaining form fields after the loop #}
<div class="row">
<a href="#" class="read-more-link" style="margin-left: 13px" onclick="showMore(); return false;">Suite</a>
<a href="#" class="read-less-link" style="display: none;margin-left: 92px" onclick="showLess(); return false;">Moins</a>
</div>
</div>
</div>
<script>
function submitForm(formId, buttonName) {
var form = document.getElementById(formId);
var button = document.createElement("input");
// Créez un élément input de type "hidden" pour transporter la valeur du bouton cliqué
button.type = "hidden";
button.name = "clickedButton";
button.value = buttonName;
// Ajoutez le nouvel élément input à la forme
form.appendChild(button);
// Soumettez le formulaire
form.submit();
}
</script>
<script>
var displayCount = 5; // Default display count
var totalRooms = {{ form.chambre.children|length }};
var visibleRooms = displayCount;
function showMore() {
var chambreList = document.getElementById('chambreList');
var moreLink = document.querySelector('.read-more-link');
var lessLink = document.querySelector('.read-less-link');
visibleRooms += displayCount;
for (var i = 0; i < totalRooms; i++) {
chambreList.children[i].style.display = i < visibleRooms ? 'block' : 'none';
}
moreLink.style.display = visibleRooms < totalRooms ? 'block' : 'none';
lessLink.style.display = 'block';
}
function showLess() {
var chambreList = document.getElementById('chambreList');
var moreLink = document.querySelector('.read-more-link');
var lessLink = document.querySelector('.read-less-link');
visibleRooms -= displayCount;
for (var i = 0; i < totalRooms; i++) {
chambreList.children[i].style.display = i < visibleRooms ? 'block' : 'none';
}
moreLink.style.display = 'block';
lessLink.style.display = visibleRooms > displayCount ? 'block' : 'none';
}
</script>
<script>
$(document).ready(function () {
var $collectionHolder = $('ul.rooms');
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$collectionHolder.find('li').each(function () {
addRemoveButton($(this));
});
var $addRoomButton = $('<button type="button" class="add-room" style="color: #0093a9;margin-top: 19px;border: none">Ajouter une chambre</button>');
var $newLinkLi = $('<li class="row room-item"></li>').append($addRoomButton);
$collectionHolder.append($newLinkLi);
$addRoomButton.on('click', function (e) {
addRoomForm($collectionHolder, $newLinkLi);
});
function addRoomForm($collectionHolder, $newLinkLi) {
var prototype = $collectionHolder.data('prototype');
var index = $collectionHolder.data('index');
var newForm = prototype;
newForm = newForm.replace(/__name__/g, index);
$collectionHolder.data('index', index + 1);
var $newFormLi = $('<li class="row room-item"></li>').append(newForm);
$newFormLi.find('input').each(function () {
var $input = $(this);
var name = $input.attr('name');
var $select = createDropdown(name);
$input.replaceWith($select);
});
$newLinkLi.before($newFormLi);
addRemoveButton($newFormLi);
// Ajouter un gestionnaire d'événements pour les nouveaux éléments ajoutés
$newFormLi.find('.remove-room').on('click', function () {
$newFormLi.remove();
});
}
function createDropdown(name) {
var $select = $('<select class="input--style-1" style="border: 1px solid black" name="' + name + '"></select>');
for (var i = 0; i <= 5; i++) {
$select.append('<option value="' + i + '">' + i + '</option>');
}
return $select;
}
function addRemoveButton($formLi) {
var $removeRoomButton = $('<button type="button" class="remove-room" style="margin-left: 20px"><i class="fa fa-trash"></i></button>');
$formLi.append($removeRoomButton);
$removeRoomButton.on('click', function (e) {
$formLi.remove();
});
}
function displayChoices() {
var roomValues = [];
// Récupérer les valeurs de chaque chambre
$('ul.rooms li.row.room-item').each(function () {
var nbadultes = $(this).find('select[name*="[nbadultes]"]').val() || 0;
var nbfnfants = $(this).find('select[name*="[nbfnfants]"]').val() || 0;
roomValues.push({
'nbadultes': nbadultes,
'nbfnfants': nbfnfants
});
// Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
});
// Mettre à jour le contenu de l'élément avec les résultats
var resultsContainer = $('#results-container');
resultsContainer.empty();
if (roomValues.length >=1 ) {
// Construire le HTML pour afficher les résultats
for (var i = 1; i < roomValues.length; i++) {
resultsContainer.append('<p>Room ' + (i) + ': Adults - ' + roomValues[i].nbadultes + ', Children - ' + roomValues[i].nbfnfants + '</p>');
// Ajouter d'autres lignes pour d'autres champs de la chambre si nécessaire
}
} else {
// Afficher un message si aucun résultat n'est trouvé
resultsContainer.html('<p>Aucun résultat trouvé.</p>');
}
// Masquer la fenêtre modale après avoir affiché les résultats
$('#roomModal').modal('hide');
}
// Associer la fonction displayChoices au clic sur le bouton "Enregistrer"
$('#roomModal').on('click', '.btn-primary', function () {
displayChoices();
});
});
</script>
<script>
$(document).ready(function () {
// Lorsqu'on clique sur le lien
$('a[href^="#"]').on('click', function (event) {
// Empêcher le comportement par défaut du lien
event.preventDefault();
// Récupérer l'ID de la cible du lien
var target = $(this.hash);
// Animer le défilement jusqu'à la cible
$('html, body').animate({
scrollTop: target.offset().top
}, 800); // Le nombre 800 représente la durée de l'animation en millisecondes
});
});
</script>
<div class="sidebar_archives">
<div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Arrangement</div>
<div class="sidebar_list">
{{ form_errors(form.arrangement) }}
<div class="stars-container">
{% for child in form.arrangement %}
<div class="star-option">
{{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
<label class="star-label" for="{{ child.vars.id }}">
{{ child.vars.label | raw }}
</label>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="sidebar_archives">
<div class="sidebar_title" style="color: #0093a9;font-size: 20px;font-weight: 600">Service</div>
<div class="sidebar_list">
{{ form_errors(form.service) }}
<div class="stars-container">
{% for child in form.service %}
<div class="star-option">
{{ form_widget(child, { 'attr': {'class': 'your-custom-class', 'onchange': 'submitForm()' } }) }}
<label class="star-label" for="{{ child.vars.id }}">
{{ child.vars.label | raw }}
</label>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ form_end(form) }}
{# Ajoutez les scripts nécessaires pour noUiSlider #}
{% block javascripts %}
{{ parent() }}
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="{{ asset('front/nouislider.min.js') }}"></script>
<script>
$(document).ready(function () {
// Initialisez le slider pour les champs "min" et "max"
var slider = document.getElementById('price-range-slider');
var minInput = document.getElementById('{{ form.min.vars.id }}');
var maxInput = document.getElementById('{{ form.max.vars.id }}');
noUiSlider.create(slider, {
range: {
'min': 20,
'max': 1000
},
step: 1,
start: [minInput.value, maxInput.value],
connect: true,
tooltips: [true, true],
format: {
to: function (value) {
return Math.round(value);
},
from: function (value) {
return Number(value);
}
}
});
// Mettez à jour les valeurs des champs "min" et "max" lors du changement de valeur du slider
slider.noUiSlider.on('change', function (values, handle) {
if (handle === 0) {
minInput.value = Math.round(values[0]);
} else {
maxInput.value = Math.round(values[1]);
}
// Appeler la fonction submitForm() lorsque la valeur change
submitForm();
});
});
// Fonction pour soumettre le formulaire
function submitForm() {
document.forms[0].submit(); // Changez cela en fonction de l'ID de votre formulaire si nécessaire
}
</script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
// Mettre à jour le champ "nombre de nuit" lorsqu'une date d'arrivée est saisie
$('#{{ form.datef.vars.id }}').change(function() {
var datef = new Date($(this).val());
var dated = new Date($('#{{ form.dated.vars.id }}').val());
if (!isNaN(datef.getTime()) && !isNaN(dated.getTime())) {
var diff = Math.ceil((datef - dated) / (1000 * 60 * 60 * 24));
$('#{{ form.nombreNuits.vars.id }}').val(diff);
}
});
});
</script>
{% endblock %}
<script>
function submitForm() {
document.getElementById('stars-form').submit();
}
</script>
</div>
<div class="col-lg-9">
<div class="cards-1 section-gray">
<div class="blog_post_container">
{% if hotels is defined %}
{% for h in hotels %}
{% if h.etat == 1 %}
<!-- Offers Item -->
<div class="col-lg-6 offers_col">
<div class="offers_item">
<div class="row">
<div class="col-lg-6">
<div class="offers_image_container">
<div class="offers_image_background" >
{% for img in h.imageshotels %}
{% if loop.first %}
<img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="100%" height="100%" />
{% endif %}
{% endfor %}
</div>
<div class="offer_name">{{ h.name }}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="offers_content" style="font-size: 17px">
<div class="offers_price">
{% set totalprix = 0 %}
{% if h.hotelrooms is defined and h.hotelrooms|length > 0 %}
{% set firstHotelRoom = h.hotelrooms[0] %}
{% if firstHotelRoom.pricerooms is defined and firstHotelRoom.pricerooms|length > 0 %}
{% set firstPriceRoom = firstHotelRoom.pricerooms[0] %}
{% if firstPriceRoom.price is defined %}
{% set totalprix = totalprix + firstPriceRoom.price %}
{% endif %}
{% endif %}
{% endif %}
{% if h.hotelarrangements is defined and h.hotelarrangements|length > 0 %}
{% set firstHotelArrangements = h.hotelarrangements[0] %}
{% if firstHotelArrangements.pricearrangements is defined and firstHotelArrangements.pricearrangements|length > 0 %}
{% set firstPriceArrangements = firstHotelArrangements.pricearrangements[0] %}
{% if firstPriceArrangements.price is defined %}
{% set totalprix = totalprix + firstPriceArrangements.price %}
{% endif %}
{% endif %}
{% endif %}
<span style="margin-left: 0px">A partir de:</span> {{ totalprix }} TND
</div>
<div class="rating_r rating_r_4 offers_rating" style="color:#b29b63">
{% for i in 1..h.star %}
<img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
{% endfor %}
</div>
<i class="fa fa-map-marker" aria-hidden="true" style="color:#0093a9"></i> {{ h.ville }}
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item">
{% for hs in h.services %}
<span class="badge badge-danger">{{ hs.name }}</span>
{% endfor %}
</li>
</ul>
</div>
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
</ul>
</div>
<div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 45%;height: 42px;line-height: 31px">Voir Détails</a></div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
<div class="pagination">
{{ knp_pagination_render(hotels, 'pagination.html.twig') }}
</div>
{% endif %}
{# {% if data is not empty %}
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Offers Grid -->
<div class="offers_grid" style="width: 108%">
<!-- Offers Item -->
{% for h in data %}
{% if h.etat == 1 %}
<!-- Offers Item -->
<div class="col-lg-6 offers_col">
<div class="offers_item">
<div class="row">
<div class="col-lg-6">
<div class="offers_image_container">
<div class="offers_image_background" >
{% for img in h.imageshotels %}
{% if loop.first %}
<img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="100%" height="100%" />
{% endif %}
{% endfor %}
</div>
<div class="offer_name">{{ h.name }}
</div>
</div>
</div>
<div class="col-lg-6">
<div class="offers_content" style="font-size: 17px">
<div class="offers_price">
{% set totalprix = 0 %}
{% if h.hotelrooms is defined and h.hotelrooms|length > 0 %}
{% set firstHotelRoom = h.hotelrooms[0] %}
{% if firstHotelRoom.pricerooms is defined and firstHotelRoom.pricerooms|length > 0 %}
{% set firstPriceRoom = firstHotelRoom.pricerooms[0] %}
{% if firstPriceRoom.price is defined %}
{% set totalprix = totalprix + firstPriceRoom.price %}
{% endif %}
{% endif %}
{% endif %}
{% if h.hotelarrangements is defined and h.hotelarrangements|length > 0 %}
{% set firstHotelArrangements = h.hotelarrangements[0] %}
{% if firstHotelArrangements.pricearrangements is defined and firstHotelArrangements.pricearrangements|length > 0 %}
{% set firstPriceArrangements = firstHotelArrangements.pricearrangements[0] %}
{% if firstPriceArrangements.price is defined %}
{% set totalprix = totalprix + firstPriceArrangements.price %}
{% endif %}
{% endif %}
{% endif %}
<span style="margin-left: 0px">A partir de:</span> {{ totalprix }} TND
</div>
<div class="rating_r rating_r_4 offers_rating" style="color:#b29b63">
{% for i in 1..h.star %}
<img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
{% endfor %}
</div>
<i class="fa fa-map-marker" aria-hidden="true" style="color:#0093a9"></i> {{ h.ville }}
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item">
{% for hs in h.services %}
<span class="badge badge-danger">{{ hs.name }}</span>
{% endfor %}
</li>
</ul>
</div>
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
</ul>
</div>
<div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 45%;height: 42px;line-height: 31px">Voir Détails</a></div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Offers Grid -->
<div class="offers_grid">
<!-- Offers Item -->
{% for h in data %}
{% if h.etat == 1 %}
<div class="offers_item rating_4">
<div class="row">
<div class="col-lg-1 temp_col"></div>
<div class="col-lg-3 col-1680-4">
<div class="offers_image_container">
<!-- Image by https://unsplash.com/@kensuarez -->
<div class="offers_image_background" >
{% for img in h.imageshotels %}
{% if loop.first %}
<img src="{{ asset('./rusticav/public/uploads/hotels/'~img.name) }}" alt="" width="150%" height="100%" />
{% endif %}
{% endfor %}
</div>
<div class="offer_name"><a href="single_listing.html">{{ h.name }}</a></div>
</div>
</div>
<div class="col-lg-8">
<div class="offers_content">
<div class="offers_price" style="color:#b29b63;font-size: 22px">{{ h.name }}</div>
<div class="rating_r rating_r_4 offers_rating" data-rating="4">
{% for i in 1..h.star %}
<img src="{{asset('front/images/etoil.png')}}" class="" alt="...">
{% endfor %}
</div>
<p class="offers_text">{{ h.shortdesc }}</p>
{{ h.ville }}
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item">
{% for hs in h.services %}
<span class="badge badge-danger">{{ hs.name }}</span>
{% endfor %}
</li>
</ul>
</div>
<div class="offers_icons">
<ul class="offers_icons_list">
<li class="offers_icons_item"><img src="{{ asset('front/images/post.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/compass.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/bicycle.png') }}" alt=""></li>
<li class="offers_icons_item"><img src="{{ asset('front/images/sailboat.png') }}" alt=""></li>
</ul>
</div>
<div class="offers_link"><a href="{{ path('detailhotel', {'id': h.id}) }}" class="btn btn-primary" style="color: #FFFFFF;background: #ff9100;border: none;width: 33%;height: 36px;">Voir Détails</a></div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %} #}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}