{% extends 'front/base_front.html.twig' %}
{% block title %}
{{ hotel_data.name }}
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('app') }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('app') }}
{% endblock %}
{% block SEO %}
<!-- title -->
{% if hotel_data.seo is not null and hotel_data.seo.title is not empty %}
<meta name="title" content="{{ hotel_data.seo.title }}">
<meta property="og:title" content="{{ hotel_data.seo.title }}">
{% else %}
<meta name="title" content="{{ hotel_data.name }}">
<meta property="og:title" content="{{ hotel_data.name }}">
{% endif %}
<!-- description -->
{% if hotel_data.seo is not null and hotel_data.seo.description is not empty %}
<meta name="description" content="{{ hotel_data.seo.description }}">
<meta property="og:description" content="{{ hotel_data.seo.description }}">
{% endif %}
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ app.request.getUri() }}">
<meta property="og:image" content="{{ hotel_data.thumbImage }}">
<!-- social media specification -->
{% for social_media in social_networks %}
{% if social_media.name == "Facebook" %}
<meta property="fb:{{ social_media.pageId }}" content="{{ social_media.pageId }}">
{% endif %}
{% if social_media.name == "X" %}
<meta name="twitter:card" content="{{ hotel_data.seo.description }}"/>
<meta name="twitter:site" content="{{ social_media.pageId }}"/>
{% endif %}
{% endfor %}
{% endblock %}
{% block container %}
<section id="hotel_details_main" class="section_padding">
<div class="container">
<div class="row">
{% if(hotel_data) %}
<div class="col-lg-9">
<div class="hotel_details_leftside_wrapper">
<div class="hotel_details_heading_wrapper">
<div class="hotel_details_top_heading">
<h2 class="hoteldetail-name">{{ hotel_data.name }}
</h2>
<h5 class="hoteldetail-address"><i
class="fas fa-map-marker-alt"></i> {{ hotel_data.city }}
, {{ hotel_data.country }}
<span class="form-check-label hoteldetail-stars">
{% for i in 1..hotel_data.starRating %}
<i class="fas fa-star"></i>
{% endfor %}
</span>
</h5>
</div>
<div class="hotel_content_reviews" id="tripInfos">
{% if hotel_data.tripadvisorId %}
<script>
$(document).ready(function () {
function publishTripadvisor(data) {
var htmlview = '<div class="g-rate-price">' +
'<img alt="' + data.rating + 'étoiles " src="' + data.rating_image_url + '"' + '/><br> ' +
'<a href="' + data.web_url + '" style="color: #292f37; font-size: 12px;" target="_blank"> ' + data.num_reviews + ' Reviews on TripAdvisor ' +
'</div>';
$("#tripInfos").html(htmlview);
}
try {
$.ajax({
url: 'https://api.tripadvisor.com/api/partner/2.0/location/{{ hotel_data.tripadvisorId }}?key=c1603974aae14de9b91f3156bc107e6c',
type: "POST",
dataType: "json",
success: function (data) {
publishTripadvisor(data);
},
error: function (xhr, status, error) {
console.log("Error!" + xhr.status);
},
});
} catch (e) {
console.log("You messed something up!");
}
});
</script>
{% endif %}
<h5 class="hotelcard-rating-total">9.5</h5>
</div>
</div>
<div class="package-details-area pt-3 mb-4 position-relative">
<div class="row">
<div class="co-lg-12">
{{ include ('front/gallery/index.html.twig', {
'main_picture_path' : hotel_data.thumbImage,
'main_picture_name' : hotel_data.name,
'images_collection' : hotel_data.images,
} ) }}
</div>
</div>
</div>
<div data-controller="reload-content"
data-action="modal-form:success@window->reload-content#refreshContent">
<div data-controller="modal-form"
data-action="hidden.bs.modal->modal-form#modalHidden">
<div id="myDivExampleModal">
{{ include('front/_modal_show.html.twig', {
modalTitle: 'Title...',
modalContent : 'Loading ...',
}) }}
</div>
<div class="searchresult-form-dates">
<p class="searchresult-form-title">{{ 'Pages.HotelOfferDetail.Messages.VotreRecherche'|trans({}, 'messages_front') }}</p>
<div class="searchresult-form-date-wrapper">
<div class="searchresult-form-date-from">
<p class="searchresult-from-title">{{ 'Pages.HotelOfferDetail.Messages.CheckIn'|trans({}, 'messages_front') }}</p>
<div class="searchresult-to-date-wrapper">
{# <p class="searchresult-from-date">{{ arrivalDate|date('d F Y, D') }}</p>#}
<p class="searchresult-from-date">{{ arrivalDate | format_datetime('full', 'none', locale=app.request.locale) }}</p>
<time class="searchresult-from-time">{{ 'Pages.Common.Messages.After'|trans({}, 'messages_front') }} 14:00</time>
</div>
</div>
<div class="searchresult-form-date-to">
<p class="searchresult-to-title">{{ 'Pages.HotelOfferDetail.Messages.CheckOut'|trans({}, 'messages_front') }}</p>
<div class="searchresult-to-date-wrapper">
<p class="searchresult-from-date">{{ departureDate | format_datetime('full', 'none', locale=app.request.locale) }}</p>
<time class="searchresult-to-time">{{ 'Pages.Common.Messages.Before'|trans({}, 'messages_front') }} 12:00</time>
</div>
</div>
</div>
<button
class="searchresult-form-info-button button-view-light button-size-xs"
data-action="modal-form#openModal"
data-form-url-value="{{ path('hotel_form_search', {'city_label' : city_label, 'hotel_label' : hotel_label} ) }}"
data-url-value="{{ path('hotel_search_json', { ajax: 1 } ) }}"
data-modal-title-value="{{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}"
data-refresh-key-value="refresh-html"
>
{{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}
</button>
</div>
</div>
</div>
<div class="hotel_details_boxed">
<div class="alert alert-warning">
{{ 'Pages.HotelOfferDetail.Messages.ConfirmBooking'|trans({}, 'messages_front') }}
</div>
<div class="alert alert-success">
{{ 'Pages.HotelOfferDetail.Messages.FreeCancellation'|trans({}, 'messages_front') }}
</div>
</div>
{% if (hotel_data.description is not empty) %}
<div class="hotel_details_boxed">
<h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.DescriptionHotel'|trans({}, 'messages_front') }}</h3>
<div class="hotel_details_boxed_inner">
<div id="hotel-detail-description">
<div class="text show-more-height">
{{ hotel_data.description | raw }}
</div>
<div class="show-more"> {{ 'Pages.HotelOfferDetail.Messages.ExpandDescription'|trans({}, 'messages_front') }}
<i class="fas fa-chevron-down"></i></div>
</div>
</div>
</div>
{% endif %}
{% if (hotel_data.facilities | length > 0) %}
<div class="hotel_details_boxed">
<h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.HotelEquipments'|trans({}, 'messages_front') }} </h3>
<div class="hotel-amenities-details">
<ul class="hotel-amenities-list">
{% for facilitiy in hotel_data.facilities %}
<li class="hotel-amenities-details-icon"><i
class="{{ facilitiy.icon }}"></i> {{ facilitiy.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
<div class="hotel_details_boxed">
<h3 class="heading_theme">{{ 'Pages.HotelOfferDetail.Messages.HotelEmplacement'|trans({}, 'messages_front') }}</h3>
<div class="map_area">
{% set latitude = ( hotel_data.latitude) ?? 0 %}
{% set longitude = ( hotel_data.longitude) ?? 0 %}
<div class="mapouter">
<div class="gmap_canvas">
<iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="https://maps.google.com/maps?width=600&height=400&hl=en&q={{ latitude ~","~ longitude }}&t=&z=12&ie=UTF8&iwloc=B&output=embed"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="hotel_details_right_sidebar_wrapper">
<div class="hotel_detail_right_sidebar">
<div class="hotel_details_right_boxed">
<div class="hotel_details_right_box_heading">
<h3>{{ 'Pages.HotelOfferDetail.Messages.Share'|trans({}, 'messages_front') }}</h3>
</div>
<div class="hotel_package_share">
{{ include ('front/social-media/index.html.twig' ) }}
</div>
</div>
</div>
{# <div data-controller="reload-content"#}
{# data-action="modal-form:success@window->reload-content#refreshContent">#}
{# <div data-controller="modal-form"#}
{# data-action="hidden.bs.modal->modal-form#modalHidden">#}
{# <div id="myDivExampleModal">#}
{# {{ include('front/_modal_show.html.twig', {#}
{# modalTitle: 'Title...',#}
{# modalContent : 'Loading ...',#}
{# }) }}#}
{# </div>#}
{# <div class="hotel_detail_right_sidebar">#}
{# <button#}
{# class="searchresult-form-info-button button-view-light button-size-xs"#}
{# data-action="modal-form#openModal"#}
{# data-form-url-value="{{ path('hotel_form_search', {'city_label' : city_label, 'hotel_label' : hotel_label} ) }}"#}
{# data-url-value="{{ path('hotel_search_json', { ajax: 1 } ) }}"#}
{# data-modal-title-value="{{ 'Pages.HotelOfferDetail.Messages.ModifierRecherche'|trans({}, 'messages_front') }}"#}
{# data-refresh-key-value="refresh-html"#}
{# >#}
{# Voir Disponibilité#}
{# </button>#}
{# </div>#}
{# </div>#}
{# </div>#}
<div class="hotel_detail_right_sidebar">
<div class="hotel_details_right_boxed">
<div class="hotel_details_right_box_heading">
<h3>{{ 'Pages.RecommendedHotel.Title'|trans({} ,'messages_front') }}</h3>
</div>
{% for recommendedHotel in recommendedHotels %}
<div class="hotel_package_similar">
<div class="recent_hotel_item">
<div class="recent_hotel_img">
<a class="hover-effect"
href="{{ path('hotel_detail',
{
'country_label': recommendedHotel.country,
'city_label': recommendedHotel.city,
'hotel_label':recommendedHotel.name,
'id': recommendedHotel.code}) }}"
>
<img src="{{ (recommendedHotel.imageUrl|last != '/' and recommendedHotel.imageUrl != '') ? recommendedHotel.imageUrl : asset('uploads/image_not_available.png') }}"
alt="thumb">
</a>
</div>
<div class="recent_hotel_text">
<h5><a
href="{{ path('hotel_detail',{
'country_label': recommendedHotel.country,
'city_label': recommendedHotel.city,
'hotel_label':recommendedHotel.name,
'id': recommendedHotel.code}) }}"
>{{ recommendedHotel.name }}</a>
</h5>
<span class="form-check-label similarhotel-stars">
{% for i in 1..recommendedHotel.starRating %}
<i class="fas fa-star"></i>
{% endfor %}
</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
<div class="col-md-12">{{ 'Pages.Hotel.Messages.HotelNotFound'|trans({}, 'messages_front') }}</div>
{% endif %}
</div>
</div>
</section>
<script>
$(".show-more").click(function () {
if ($(".text").hasClass("show-more-height")) {
$(this).html('{{ 'Pages.HotelOfferDetail.Messages.CollapseDescription'|trans({}, 'messages_front') }} <i class="fas fa-chevron-up"></i> ');
} else {
$(this).html('{{ 'Pages.HotelOfferDetail.Messages.ExpandDescription'|trans({}, 'messages_front') }} <i class="fas fa-chevron-down"></i> ');
}
$(".text").toggleClass("show-more-height");
});
</script>
{% endblock %}