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

{% block title %}Profil de
	{% if app.user.roles[0]=="ROLE_USER" %}
		{{ user.nom }} {{ user.prenom }}
	{% else %}
		{{ user.host.user.nom }} {{ user.host.user.prenom }}	
	{% endif %}
{% endblock %}

{% block body %}
{% if app.user.roles[0]=="ROLE_HOST" %}
 <header class="container ">
	<div class="row">
		<div class="col-md-3 grid-margin stretch-card">
			<div class="card" style="height: 100%;">
			<div class="card-body">
				<p class="card-title text-md-center text-xl-left">Revenue</p>
				<div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
				<h3 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0">{{ earining }}</h3>
				<i class="ti-user icon-md text-muted mb-0 mb-md-3 mb-xl-0"></i>
				</div>
				<p class="mb-0 mt-2 text-danger">0.47% <span class="text-black ms-1">
					<small>(30 days)</small>
				</span>
				</p>
			</div>
			</div>
		</div>
		<div class="col-md-3 grid-margin stretch-card">
			<div class="card">
			<div class="card-body">
				<p class="card-title text-md-center text-xl-left">Properties number</p>
				<div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
				<h3 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0">{{nbrAnnonce}}</h3>
				<i class="ti-calendar icon-md text-muted mb-0 mb-md-3 mb-xl-0"></i>
				</div>
				<p class="mb-0 mt-2 text-danger">0.12% <span class="text-black ms-1">
					<small>(30 days)</small>
				</span>
				</p>
			</div>
			</div>
		</div>
		<div class="col-md-3 grid-margin stretch-card">
			<div class="card">
			<div class="card-body">
				<p class="card-title text-md-center text-xl-left">Client number</p>
				<div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
				<h3 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0">{{nbrUser}}</h3>
				<i class="ti-agenda icon-md text-muted mb-0 mb-md-3 mb-xl-0"></i>
				</div>
				<p class="mb-0 mt-2 text-success">64.00% <span class="text-black ms-1">
					<small>(30 days)</small>
				</span>
				</p>
			</div>
			</div>
		</div>
		<div class="col-md-3 grid-margin stretch-card">
			<div class="card">
			<div class="card-body">
				<p class="card-title text-md-center text-xl-left">Reservations</p>
				<div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
				<h3 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0">{{ nbrReservation }}</h3>
				<i class="ti-layers-alt icon-md text-muted mb-0 mb-md-3 mb-xl-0"></i>
				</div>
				<p class="mb-0 mt-2 text-success">23.00% <span class="text-black ms-1">
					<small>(30 days)</small>
				</span>
				</p>
			</div>
			</div>
		</div>
	</div>
{% endif %}
	<div class="container mt-4">
		<div class="row mt-3">
			<div class="col-md-4">
				{% if user.image != null %}
				<img width="80" class="img-fluid rounded-circle" src="{{ asset('/uploads/imagesUser/'~user.image) }}" alt="" width="90">
				{% else %}
					<img class="img-fluid rounded-circle"  width="50" src="{{asset('assets/images/userMessneger.jpg
					')}}" alt="Avatar de {{user.nom}}">
				{% endif %}
				{% if user.roles[0] == "ROLE_HOST" %}
					<div class="annonce">
						<span class="badge bg-primary">{{user.host.annonces | length}}
						annonces</span>
					</div>
				{% elseif user.roles[0] == "ROLE_USER" %}
					<div class="annonce">
						<span class="badge bg-primary">{{user.Reservations | length}}
						Réservations</span>
					</div>
				{% endif %}
			</div>
			<div class="mt-3">
				{% if app.user == user %}
						<a href="{{ path('app_profile_edit') }}" class="btn btn-primary mr-2 mb-2">Modifier mes informations</a>
						<a href="{{ path('app_password_update') }}" class="btn btn-primary mb-2">Modifier mon mot de passe</a>
				{% endif %}
				{% if user.roles[0]== "ROLE_HOST"  and app.user != user %}
					<a href="{{ path('messages',{'uid': user.uid}) }}" class="btn btn-primary mr-2 mb-2 w-30">Envoyer message</a>
				{% endif %}
			</div>
		</div>
	</div>
</header>
		<hr>
	<div class="container">
		{% 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 %}
		<h2 class="mb-2" >Mes annonces favoris</h2><br>
		<div class="row">
			{% if app.user == user %}
				{% for data in favorites  %}
					{% include "annonce/_annonce.html.twig" with {'annonce': data.annonce} %}
				{% endfor %}
			{% endif %}
		</div>	
		{% if user.host.annonces  is defined %}
			<h2>Les annonces de
				{{user.host.user.nom}} {{user.host.user.prenom}}</h2>
				{% if user.host.annonces | length > 0 %}
					<div class="row">
						{% for annonce in user.host.annonces %}
							{% include 'annonce/_annonce.html.twig' %}
						{% endfor %}
					</div>
				{% else %}
					<div class="alert alert-warning">
						<p>
							<strong>{{user.host.user.nom}}</strong>
							n'a pas encore d'annonce sur le site !
						</p>
					</div>
				{% endif %}
		{% endif %}	
	</div>
	<div class="container">
		{% if user.host.annonces  is defined %}
			<div class="mt-5">
				<h2 class="text-2xl mb-8">Commentaire(s)</h2>
				<div class="comments">
					{% if form is defined %}
						<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>
						<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>
					{% endif %}

					<hr class="my-3">
					{% for comment in user.host.avisHosts %}
						{% include 'includes/_comment.html.twig' %}
					{% endfor %}
				</div>
			</div>
		{% endif %}	
	</div>
{% endblock %}