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

{% block title %}Réservation n°
	{{ reservation.id }}
{% endblock %}
{% block stylesheet %}
	<link rel="stylesheet" href="{{asset('assets/css/annoceshow.css')}}">
{% endblock %}
{% block scriptStripe %}
	<script src="https://js.stripe.com/v3/"></script>
{% endblock scriptStripe %}
{% block body %}

	{% set annonce = reservation.annonce %}
	{% set host = annonce.host %}

	{% if app.request.query.get('withAlert') %}
		<div class="alert alert-success">
			<h4 class="alert-heading text-center">Merci pour votre réservation 😍</h4>
			<p>
				Votre réservation auprès de
				<strong>
					<a href="{{ path("app_profile_display", {'slug': host.user.slug})}}" class="profil-annonce-name">{{host.user.nom}}</a>
				</strong>
				pour l'annonce
				<strong>
					<a href="{{ path('app_annonce_show', { 'category_slug' : annonce.category.slug, 'slug': annonce.slug}) }}" class="profil-annonce-name">{{ annonce.titre }}</a>
				</strong>
				a bien été prise en compte !
				<br>
				Vous allez recevoir un mail de confirmation.
			</p>
		</div>
	{% endif %}

	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h1 class="my-5">Votre réservation (n°{{reservation.id}})</h1>
			</div>
			<div class="col-md-6">
				{% if reservation.status == 0 %}
					<h1>Compteur de réservation</h1>
					<p>Temps restant : <span id="countdown" class="badge bg-danger"></span></p>
				{% endif %}
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="alert alert-light">
					<h2>Détails</h2>
					<dl class="row">
						<dt class="col-md-4">Numéro</dt>
						<dd class="col-md-8">{{reservation.id}}</dd>
						<dt class="col-md-4">Date d'arrivée</dt>
						<dd class="col-md-8">{{reservation.startAt | date('d/m/Y')}}</dd>
						<dt class="col-md-4">Date de départ</dt>
						<dd class="col-md-8">{{reservation.endAt | date('d/m/Y')}}</dd>
						<dt class="col-md-4">Nombre de nuits</dt>
						<dd class="col-md-8">{{reservation.duration}}</dd>
						<dt class="col-md-4">Montant total</dt>
						<dd class="col-md-8">{{reservation.amount | number_format(2, ',', ' ')}}
							DZD</dd>
						<dt class="col-md-4">Commentaire</dt>
						<dd class="col-md-8">{{reservation.comment | default('Aucun commentaire')}}</dd>
					</dl>

					<hr>

					<h2 class="alert-heading">Votre hôte</h2>

					<div class="row mb-3">
						<div class="col-3">
							<div class="rounded-circle user-image">
								{% if  host.user.image != null %}
										<img width="80" src="{{ asset('/uploads/imagesUser/'~host.user.image) }}" alt="Avatar de {{host.user.nom}}" width="90">
								{% else %}
									<img  width="50" src="{{asset('assets/images/userMessneger.jpg
									')}}" alt="Avatar de {{host.user.nom}}">
								{% endif %}
								</a>
							</div>	
						</div>
						<div class="col-9">
							<h4>
								<a href="{{ path('app_profile_display', {'slug': host.user.slug}) }}">{{ host.user.nom }}</a>
							</h4>

							<span class="badge badge-primary">{{host|length}}
								annonces</span>
						</div>
					</div>
					{# {{host.description | raw}} #}

					<a href="{{ path("app_profile_display", {'slug': host.user.slug}) }}" class="btn btn-primary">Faire un peu plus connaissance avec
						{{host.user.nom}}</a>
				</div>
				<div class="alert alert-light" id="comment">
					<h2 class="alert-heading">Votre avis compte !</h2>
					{% if date() > date(reservation.endAt) %} 
						{% set comment = reservation.annonce.commentFromUser(app.user) %}
						{% if comment is not null %}
							<blockquote>
								{{comment.commentaire}}
							</blockquote>

							<strong>Note :
							</strong>
							{% include 'includes/rating.html.twig' with {'rating': comment.rating} %}
						{% else %}
							<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 btn-success mt-5" type="submit" id="button-addon2">
										Poster mon commentaire
									</button>

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

					{% else %}
						<p>Vous ne pourrez pas noter cette annonce tant que vous n'aurez pas fait votre voyage 🙄</p>
					{% endif %}
				</div>
			</div>
			<div class="col">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="card mb-5">
								<div class="card-body">
								<div class="row">
									<div class="col-md-6">
									<img src="{{ asset('/uploads/imagesAnnonce/'~annonce.coverImage) }}" alt="Image de {{annonce.titre}}" class="img-fluid">
									</div>
									<div class="col-md-6">
									<h5 class="card-title">{{annonce.titre}}</h5>
									<p class="card-text">{{annonce.category.nom}}</p>
									<p class="card-text">
										{% if annonce.avis[0].rating is defined %}
											<span class="text-muted">0 rating</span>
											<span class="text-muted">(0 commentaires)</span>
										{% elseif comment is not null %}
											<span class="text-muted">{% include 'includes/rating.html.twig' with {'rating': comment.rating} %}</span>
											<span class="text-muted">({{annonce.avis|length}} commentaires)</span>
										{% endif %}
									</p>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12">
							<div class="card mb-5">
								<div class="card-body">
								<h2 class="card-title">Détails du prix</h2>
								<div class="row">
									<div class="col-md-6">
									{% set date1 = reservation.startAt|date('Y-m-d') %}
									{% set date2 = reservation.endAt|date('Y-m-d') %}
									{% set daysDifference = (date2|date('U') - date1|date('U')) / (24 * 3600) %}
									{% set price = annonce.price * daysDifference %}
									{% set totalPrice = price + 600 %}
									<p class="card-text">{{annonce.price}} x {{daysDifference}} nuits</p>
									<p class="card-text">Frais de Layyali</p>
									</div>
									<div class="col-md-6">
									<p class="card-text text-right">{{price}} DZD</p>
									<p class="card-text text-right">600 DZD</p>
									<hr>
									<p class="card-text text-right">Total <button id="MowebCurrencyPicker_trigger" aria-label="Devise actuelle : (DZD). Modifier la devise de paiement" type="button" class="btn btn-link">(DZD)</button></p>
									<p class="card-text text-right"> {{totalPrice}} DZD</p>
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				{% if reservation.status == constant('App\\Entity\\Reservation::STATUS_PENDING') %}
					<div class="container">
						<h1>Payement</h1>
						<div class="form-group">
							<label for="paymentOptions">Sélectionnez votre moyen de paiement :</label>
							<div class="form-check">
								<a href="{{ path("app_cache_paiement", {'reference': reservation.reference}) }}">
									Cache
								</a>	
							</div>	
							<div class="form-check">
								<a id="checkout-button" href="{{ path("app_stripe", {'reference': reservation.reference}) }}">
									MasterCard
								</a>	
							</div>	
							<div class="form-check">
								<a id="checkout-button" href="{{ path("app_paiement_satim", {'reference': reservation.reference}) }}">
									Satim
								</a>	
							</div>	
						</div>
					</div>
				{% elseif reservation.status == constant('App\\Entity\\Reservation::STATUS_VALIDATION') %}
					 <div class="container mt-4">
						<div class="alert alert-success" role="alert">
							Réservation validée 
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endblock %}
{% block javascripts %}  
<script type="text/javascript">
	var stripe = Stripe("pk_test_51IGlSPIeCK2Bl94xDGMTZAGLGdo0Hesk7hgm151wUnY7IYGCLQPepv77pUUFuKb1T7m6SLmuttPaSUF4dNtAb57s00nfF3Pdrx");

    var checkoutButton = document.getElementById("checkout-button");

    checkoutButton.addEventListener("click", function () {

      fetch("/create-checkout-session/{{reference}}", {

        method: "POST",

      })

        .then(function (response) {

          return response.json();

        })

        .then(function (session) {

          return stripe.redirectToCheckout({ sessionId: session.id });

        })

        .then(function (result) {

          // If redirectToCheckout fails due to a browser or network

          // error, you should display the localized error message to your

          // customer using error.message.

          if (result.error) {

            alert(result.error.message);

          }

        })

        .catch(function (error) {

          console.error("Error:", error);

        });

    });
</script>
<script>
	const stars = document.querySelectorAll('.star');
	const ratingInput = document.querySelector('input[name="{{ form.rating.vars.full_name }}"]');

	stars.forEach(star => {
		star.addEventListener('click', function() {
			const value = this.getAttribute('data-value');
			ratingInput.value = value;
			updateStarColors(stars, value);
		});
	});

	function updateStarColors(stars, selectedValue) {
		stars.forEach(star => {
			const value = star.getAttribute('data-value');
			if (value <= selectedValue) {
				star.style.color = '#ffcc00'; // Couleur jaune pour les étoiles sélectionnées
			} else {
				star.style.color = '#ccc'; // Couleur grise pour les étoiles non sélectionnées
			}
		});
	}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

{# Votre script JavaScript pour le compteur #}
<script>
	// Date d'expiration de la réservation (exemple)
	var expirationDate = new Date('{{ reservation.expiresAt|date('c') }}');

	// Obtenir le décalage horaire du navigateur (en minutes)
	var browserTimezoneOffset = new Date().getTimezoneOffset();

	// Ajouter le décalage horaire du navigateur à la date d'expiration
	expirationDate.setMinutes(expirationDate.getMinutes() + browserTimezoneOffset);

	// Fonction pour mettre à jour le compteur
	function updateCounter() {
		var now = new Date();
		var timeRemaining = expirationDate - now;

		if (timeRemaining <= 0) {
			// La réservation a expiré, effectuez des actions nécessaires (par exemple, supprimer la réservation)
			// Vous pouvez également masquer le compteur ici ou afficher un message
			document.getElementById('countdown').innerHTML = 'Expiré';
		} else {
			// Mettre à jour le badge avec le temps restant au format minutes:secondes
			var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
			document.getElementById('countdown').innerHTML = minutes + 'm ' + seconds + 's';
		}
	}

	// Mettre à jour le compteur toutes les secondes
	setInterval(updateCounter, 1000);

	// Appeler la fonction pour initialiser le compteur
	updateCounter();
</script>
{% endblock %}