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

{% block titre %}
	{{annonce.titre}}
{% endblock %}
{% block stylesheet %}
	<link rel="stylesheet" href="{{asset('assets/css/annoceshow.css')}}">
{% endblock %}
{% block body %}

	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ path('app_home') }}">Accueil</a>
		</li>
		<li class="breadcrumb-item">
			<a href="{{ path('app_annonce_category', {'slug': annonce.category.slug}) }}">{{ annonce.category.nom }}</a>
		</li>
		<li class="breadcrumb-item active">{{annonce.titre}}</li>
	</ol><br><br><br><br>
	{% set delete_annonce = path('app_annonce_delete', {'slug':annonce.slug}) %}
	<div class="container">
		{# Dans votre template Twig #}
		{% for flashMessage in app.flashes('error') %}
			<div class="flash-error">{{ flashMessage }}</div>
		{% endfor %}

		{% for flashMessage in app.flashes('success') %}
			<div class="flash-success">{{ flashMessage }}</div>
		{% endfor %}
		<div class="annonce-title mb-3" style="background-image: url({{ asset('/uploads/imagesAnnonce/'~annonce.coverImage) }})">
			<div class="container">
				<h1>{{annonce.titre}}</h1>
				<h4 style="color:white">{{annonce.introduction}}</h4>
				<p class="h2">
					<strong>{{annonce.rooms}}
						chambres</strong>
					pour
					<strong>{{annonce.price | number_format(2, ',', ' ')}}DZD</strong>
					par nuit
				</p>
				{% if  app.user != annonce.host.user%}
				<a href="{{ path('app_reservation_new', { 'slug': annonce.slug }) }}" class="btn btn-primary mb-2">Réserver !</a>
				{% endif %}

				{% if app.user and app.user == annonce.host.user %}
					<a href="{{ path('app_annonce_edit', { 'slug': annonce.slug }) }}" class="btn btn-secondary">Modifier l'annonce</a>

					<a href="{{ delete_annonce }}" class="btn btn-danger" onclick="return confirm(`Êtes vous sur de vouloir supprimer l'annonce : {{annonce.titre}} ?`)">Supprimer l'annonce</a>
				{% endif %}
			</div>
		</div>
	</div>	
	<div class="container">
		<div class="row">
			<div class="col-md-6 mb-3">
				<h4>Ajouter annonce aux liste des favorites</h4>
			</div>
			<div class="col-md-6 mb-3">
				{% if is_granted('IS_AUTHENTICATED_FULLY') %}
					{% set isFavorite = false %}
					{% set break = false %}
					{% if app.user.favorites is not empty %}
						{% for favorite in app.user.favorites %}
							{% if favorite.annonce == annonce and favorite.etat == 1 %}
								{% set isFavorite = true %}
								{# Si l'annonce est déjà dans les favoris avec un état actif, sortir de la boucle #}
								{% set break = true %}
							{% endif %}
						{% endfor %}
					{% endif %}

					{% if  isFavorite is not defined  %}
						<a href="{{ path('annonce_add_to_favorites', {'slug': annonce.slug}) }}" class="add-to-favorites"><i class="fa fa-heart fa-2x"></i></a>
					{% endif %}
					{% if not isFavorite %}
						<a href="{{ path('annonce_add_to_favorites', {'slug': annonce.slug}) }}" class="add-to-favorites"><i class="fa fa-heart fa-2x"></i></a>
					{% else %}
						<!-- L'annonce est déjà dans les favoris, vous pouvez afficher un message ou autre chose -->
						<p>Cette annonce est déjà dans vos favoris.</p>
					{% endif %}
				{% else %}
					<!-- L'utilisateur n'est pas connecté, vous pouvez afficher un message ou le rediriger vers la page de connexion -->
					<a href="{{path('app_login')}}">Veuillez vous connecter pour ajouter cette annonce à vos favoris.</a>
				{% endif %}
			</div>
			<div class="col-md-8 mb-3">
				<p>{{ annonce.description | raw }}</p>

				<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
					<ol class="carousel-indicators">
						{% for image in annonce.images %}
							<li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index0 }}" {% if loop.first %} class="active" {% endif %}></li>
						{% endfor %}
					</ol>
					<div class="carousel-inner">
						{% for image in annonce.images %}
							<div class="carousel-item {% if loop.first %}active{% endif %}">
								<img class="d-block w-100" src="{{ asset('/uploads/imagesAnnonce/'~image.path) }}" alt="First slide">
								<div class="carousel-caption d-none d-md-block">
									<h5>{{ annonce.titre }}</h5>
								</div>
							</div>
						{% endfor %}
					</div>
					<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<hr>
				<div class="mt-5">
					{% if annonce.avis|length > 0 %}
					<h2 class="mb-3">Commentaires de nos voyageurs :</h2>

					<div class="alert alert-info">
						<h4 class="alert-heading text-center">
							<div class="row align-items-center">
								<div class="col">
									Note globale donnée par nos clients
								</div>
								<div class="col">
									{% include 'includes/rating.html.twig' with {'rating': annonce.avgRatings} %}
									<br>
									<small><em>(Calculée sur
										{{ annonce.avis|length }}
										avis)</em></small>
								</div>
							</div>
						</h4>
					</div>

					{% for comment in annonce.avis %}
						<div class="bg-light rounded mb-3 py-3 px-3">
							<strong>{{ comment.user.nom }}</strong>
							a dit :
							<blockquote>
								{{comment.commentaire}}
							</blockquote>
							<strong>Note donnée :
							</strong>

							{% include 'includes/rating.html.twig' with {'rating': comment.rating} %}
						</div>
					{% endfor %}
					{% else %}
						<h2>Cette annonce n'a pas encore de commentaires,<br>
							<em>soyez le premier !
							</em>
						</h2>
					{% endif %}
					{# <h2 class="text-2xl mb-8">Commentaire(s)</h2>
					<div class="comments">
						{% if app.user %}
							<div class="comments__new">
								<div class="w-full-width">
									{{ form_start(form) }}
									{{ form_label(form.commentaire, 'Nouveau commentaire', {'attr' : {'class' : 'form-label inline-block mb-2 text-gray-700'}}) }}
									{{ form_widget(form.commentaire, {'attr': {'class': 'form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'}}) }}
									<div class="from-group mt-3 mb-3">
										{% set ratingField = form_row(form.rating) %}
										{{form_label(form.rating)}}
										<div class="rating">
											<input type="hidden" id="{{ form.rating.vars.id }}" name="{{ form.rating.vars.full_name }}">
											{% for choice in form.rating.vars.choices %}
												<label class="star-label" for="{{ form.rating.vars.id }}_{{ choice.value }}">
													<span class="star" data-value="{{ choice.value }}">&#9733;</span>
												</label>
											{% endfor %}
										</div>
									</div>
									<button class="btn inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700  focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center mt-5" type="submit" id="button-addon2">
										Poster mon commentaire
									</button>

									{{ form_end(form) }}
								</div>
							</div>
						{% endif %}

						<hr class="my-3">

						{% for comment in annonce.avis %}
							{% include 'includes/_comment.html.twig' %}
						{% endfor %}
					</div> #}
				</div>
			</div>
			<div class="col">
				{% set a = annonce.host %}
				<div class="row mb-3 align-items-center">
					<div class="col-3">
						<div class="rounded-circle user-image">
							<a href="{{ path('app_profile_display', { 'slug': a.user.slug }) }}">
							{% if  a.user.image != null %}
									<img width="80" src="{{ asset('/uploads/imagesUser/'~a.user.image) }}" alt="" width="90">
							{% else %}
								<img  width="50" src="{{asset('assets/images/userMessneger.jpg
								')}}" alt="Avatar de {{a.user.nom}}">
							{% endif %}
							</a>
						</div>	
					</div>
					<div class="col">
						<a class="profil-annonce-name" href="{{ path('app_profile_display', { 'slug': a.user.slug }) }}">
							<h3>{{a.user.nom}} {{a.user.prenom}}</h3>
						</a>
						<span class="badge bg-primary">{{a.annonces | length}}
							annonces</span>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %} 

{% block javascripts %}
	<script>
		document.addEventListener('DOMContentLoaded', function() {
		var addToFavoritesLinks = document.querySelectorAll('.add-to-favorites');

		addToFavoritesLinks.forEach(function(link) {
			link.addEventListener('click', function(event) {
				event.preventDefault();

				var form = document.createElement('form');
				form.setAttribute('method', 'post');
				form.setAttribute('action', link.href);

				var csrfTokenInput = document.createElement('input');
				csrfTokenInput.setAttribute('type', 'hidden');
				csrfTokenInput.setAttribute('name', '_token');
				csrfTokenInput.setAttribute('value', '{{ csrf_token('add_to_favorites_' ~ annonce.slug) }}'); // Utilisez une intention unique

				form.appendChild(csrfTokenInput);

				document.body.appendChild(form);

				form.submit();
			});
		});
		});
</script>
{% endblock %}