{% extends "base.html.twig" %}
{% set isAuthenticated = isAuth() %}
{% block title %}
{{ attraction.name | title }}
{% endblock %}
{% block stylesheet %}
<link rel="stylesheet" href="{{ asset('assets/css/coins/coin.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<style>
.etoiles > .fa-star {
cursor: pointer;
}
</style>
{% endblock %}
{% block body %}
<main>
<div class="container">
<div>
<h4 class="mt-3 mb-3" style="font-weight: 700">{{ attraction.name | title }}
{% if attraction.isCertify == true %}
<span style="font-size: 25px; color: #3982f8;"><i
class="fas fa-badge-check"></i></span>
{% endif %}</h4>
<p>
<i class="fas fa-star"></i> {{ attraction.rate | length > 0 ? attraction.rate |number_format(1) | raw : 5 }}
.
Catégories: <strong>
<u>
{% for category in attraction.categories %}
<a class="text-dark"
href="{{ path('app_coin_by_category', {'category': category.id, 'name': category.slug }) }}">
{{ category.name }},
</a>
{% endfor %}
</u>
</strong>
{% if attraction.address | length > 0 %}
<br/>
{% if attraction.address.address | length > 0 %}
<i class="fas fa-map-marker"></i> Adresse:
<strong><u>{{ attraction.address.address }}</u></strong>
<br/>
{% endif %}
<i class="fas fa-city"></i> Ville:
<strong>
<u>{{ attraction.address.neighborhood }}, {{ attraction.address.city }}
, {{ attraction.address.country }}</u>.
</strong>
{% endif %}
</p>
<div class="d-none d-md-block">
{% include '_partials/coins/gallery-section.html.twig' with {
'attraction': attraction
} %}
</div>
<div class="d-block d-md-none">
<div class="tz-gallery">
{% include '_partials/coins/gallery-mobile-section.html.twig' with {
'attraction': attraction
} %}
</div>
</div>
<!--section d'affichage des sous-titres-->
<div class="row mb-3">
<div class="col-md-12 d-flex">
<section class="m__cart w-100 justify-content-between"
style="overflow: hidden; position: relative;">
<ul class="m__navbar-scroll" style="">
<li><a href="#apercu">Apercu</a></li>
{# <li><a href="#services">Services</a></li> #}
{# <li><a href="#avis">Avis</a></li> #}
{# <li><a href="#emplacement">Emplacement</a></li> #}
{# <li><a href="#condition">Conditions</a></li> #}
</ul>
<span class="text-center"
style="position: absolute; top: 5px; right: 5px; font-size: 30px; z-index: 10; color: #ff0000; background-color: white; height: 45px; width: 45px; border-radius: 5px 10px; border: 1px solid black; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">
{% set isFavorite = false %}
{% set favorite_id = 0 %}
{% if isAuthenticated %}
{% for favorite in attraction.favorites %}
{% if favorite.user is defined and favorite.user.id is defined and user is defined and user.id is defined %}
{% if favorite.user.id == user.id %}
{% set isFavorite = true %}
{% set favorite_id = favorite.id %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% set favoritePath = isFavorite ? path('services_delete_favory', {'id': favorite_id }) : path('app_add_favorite', {'id': attraction.id }) %}
<a href="{{ favoritePath }}">
{% if isFavorite %}
<i class="fas fa-heart"></i>
{% else %}
<i class="far fa-heart"></i>
{% endif %}
</a>
</span>
</section>
</div>
</div>
<!--fin section d'affichage des sous-titres-->
<div class="row">
<div class="col-md-8 mb-4">
<div class="m__cart">
<section class="d-flex p-2 flex-column">
<h5 class="title1" id="apercu">{{ attraction.name | title }}</h5>
{% if attraction.rating | length > 0 %}
<span>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</span>
<span>
{{ attraction.rating | length > 0 ? attraction.rating |number_format(1) : 0 }}/5 <strong>Bon</strong>
</span>
{% endif %}
<hr class="m__hr"
style="border: none !important; height: 1px !important; background-color: #000 !important; margin: 10px 0 !important;">
{{ attraction.description | length > 0 ? attraction.description | raw : '' }}
</section>
</div>
</div>
<div class="col-md-4">
<div class="m__cart mb-2">
<div class="d-flex flex-column">
<div>
{% if attraction.price | length > 0 %}
<strong>A partir de <span
style="color: red; font-size: 20px;">{{ attraction.price | number_format(0, '.') }} {{ attraction.currency }}</span></strong>
{% endif %}
</div>
<hr class=""
style="border: none !important; height: 1px !important; background-color: #f5f5f5 !important; margin: 10px 0 !important; width: 100% !important;">
<div class="">
<h5 class="mb-3">Découvrir la région</h5>
{% if attraction.address | length > 0 %}
<p class="mb-1" style="font-size: 15px; padding-bottom: 0px;">
{% if attraction.address.address | length > 0 %}
<i class="fas fa-map-marker"></i> Adresse:
<strong><u>{{ attraction.address.address }}</u></strong>
<br/>
{% endif %}
<i class="fas fa-city"></i> Ville:
<strong>
<u>{{ attraction.address.neighborhood }}, {{ attraction.address.city }}
, {{ attraction.address.state }}
, {{ attraction.address.country }}</u>.
</strong>
</p>
{% endif %}
<p class="mb-1" style="font-size: 15px;">
<i class="fas fa-folder"></i>
{% for category in attraction.categories %}
<a class="text-dark"
href="{{ path('app_coin_by_category', {'category': category.id, 'name': category.slug }) }}">
{{ category.name }},
</a>
{% endfor %}
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="text-dark" style="font-weight: 7000;">Horaires</h5>
{% if attraction.availableAnytime == true %}
<span class="text-dark" style="font-weight: 700;">Disponible 24h/7</span>
{% else %}
{% if attraction.openedDays | length > 0 %}
<table class="table table-striped">
<thead>
<tr>
<th>Jours</th>
<th>Ouverture</th>
<th>Fermeture</th>
</tr>
</thead>
<tbody>
{% for hour in attraction.openedDays %}
<tr>
<td>{{ hour.day }}</td>
<td>{{ hour.start | date( 'H:i') }}</td>
<td>{{ hour.close | date( 'H:i') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<span class="text-dark" style="font-weight: 700;"><i class="fal fa-folder-open"></i> Aucune disponibilité n'a été définie</span>
{% endif %}
</div>
</div>
{% endif %}
<div class="card">
<div class="card-body">
<h6><i class="ti-mobile"></i> <a href="#"
class="text-dark"> {{ attraction.phone1 | length > 0 ? attraction.phone1 : '' }}</a>
</h6>
<h6><i class="fas fa-envelope"></i> <a href="#"
class="text-dark"> {{ attraction.email | length > 0 ? attraction.email }}</a>
</h6>
</div>
</div>
{# {% include '_partials/coins/location.html.twig' %} #}
</div>
</div>
</div>
<div class="row">
{# {% include '_partials/coins/attraction-items.html.twig' %}#}
{# {% include '_partials/coins/attraction-reviews.html.twig' %}#}
{# <div class="row mb-3"> #}
{# <h2 class="" id="emplacement">Emplacement</h2> #}
{# <div class="col-md-12"> #}
{# {% include '_partials/coins/location.html.twig' %} #}
{# </div> #}
{# </div> #}
{# <div class="row mb-3"> #}
{# <h2 class="mb-3" id="condition"> Conditions</h2> #}
{# <div class="row"> #}
{# <div class="col-12 col-md-12"> #}
{# <div class="card" style="width: 100%;"> #}
{# <div class="card-body"> #}
{# {{ coin.conditions | raw }} #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
{# </div> #}
<div class="row mb-5 mt-5">
{% if isAuthenticated == true %}
{% include '_partials/coins/review-form.html.twig' %}
{% else %}
<p>
Vous devez être connecté pour publier un avis. <a href="{{ path('app_login') }}"><i
class="fas fa-sign-in-alt"></i> Connectez-vous</a>
</p>
{% endif %}
</div>
</div>
</div>
</main>
<div class="m__modal">
<div class="m__modal-content">
{% if attraction.attractionMedia | length > 0 %}
<div class="container">
<h3 style="font-weight: 700">Toutes les Photos</h3>
<div class="tz-gallery">
<div class="row">
{% for image in attraction.attractionMedia %}
<div class="col-md-6 mb-3">
<div class="thumbnail" style="height: 200px; overflow: hidden; border-radius: 5px;">
<a class="lightbox" href="{{ asset(image.url) }}">
<img class="w-100" src="{{ asset(image.url) }}" alt="Park">
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<p>Pas d'images disponibles</p>
{% endif %}
<a class="m__close"><i class="fas fa-times"></i></a>
</div>
</div>
{% endblock %}
{% block myscript %}
<script src="{{ asset('assets/js/review.js') }}"></script>
<script>
function openModal(id, rate, comment, attractionId) {
$('#editReviewModal').modal('show');
var actionUrl = `{{ path('app_coin_update', {'id': 'ID_PLACEHOLDER','attraction_id':'ID_ATTRACTION'}) }}`.replace('ID_PLACEHOLDER', id).replace('ID_ATTRACTION', attractionId);
$('#editReviewForm').attr('action', actionUrl);
$('#monInput').val(rate);
$('#ratingValue').text(`(${rate})`);
$('#comment').val(comment);
// Update the stars based on the rating
const etoiles = document.querySelectorAll('.etoiles i');
etoiles.forEach(etoile => {
const sRating = parseInt(etoile.getAttribute('data-rating'));
etoile.style.color = sRating <= rate ? '#eda407' : 'gray';
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.tz-gallery');
</script>
{% endblock %}