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

{% block stylesheets %}
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
	<!-- Axentix CSS minified version -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/axentix@2.2.1/dist/axentix.min.css">

	<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">

	<link rel="stylesheet" href="{{ asset('/assets/css/theme.css') }}">
	<link rel="stylesheet" href="{{ asset('css/single.css') }}">

	<style>
		.btn-sm {
			 padding: 0.25rem 0.5rem;
			 font-size: 0.875rem;
			 line-height: 1.5;
			 border-radius: 0.2rem;
		}	
	</style>
{% endblock %}
{% block title %}Offre
{% endblock %}
{% block body %}

	<div class="body-wrapper">

		<nav class="navbar navbar-expand-lg p-0">
			<div class="navbar-brand p-0">

					<strong>Offre</strong>

			</div>

			<ul class="navbar-nav" id="navigation">
				<div class="menu">
					<li class="nav-item p-0">
						<a class="nav-link-back" href="{{ path('app_home') }}">Accueil</a>
					</li>
					<li class="nav-item p-0">
						<i class="fas fa-chevron-right"></i>
					</li>
					<li class="nav-item p-0">
						<span class="active-page">Offre</span>
					</li>
					
				</div>
			</ul>
			<!-- flex element -->
			<div>
			</div>
			<!-- flex element -->
		</nav>	
		<section class="section-detail-block" style="background-color: #e2e8f0;">		

			<div class="succeful-action mb-3 mt-5" id="hideAfter">
				<div class="msg-succes">
					<div class="d-flex flex-column">
						{% for message in app.flashes('message') %}
							<div class="row justify-content-center">
								<p class="message-alert-offer">
									{{ message }}
								</p>
								<img class="icon-alert-succes" src="{{ asset('images/icons/succes.png')}}" alt="card-img-top">
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
			


			<!-- Container Start -->
			<div class="container flex-wrap">
				<div class="row bg-white shadow-sm">
					<div class="col-12 align-items-center">
						<div class="caroulix" id="carousel" data-ax="caroulix" data-caroulix-autoplay-enabled="true" data-caroulix-indicators-enabled="true">
							<div class="caroulix-arrow caroulix-prev">
								<span class="fas fa-chevron-left" data-icon="mdi:chevron-left"></span>
							</div>
							<div class="caroulix-arrow caroulix-next">
								<span class="fas fa-chevron-right"  data-icon="mdi:chevron-right"></span>
							</div>
							{% for image in annonce.images %}
								<div class="caroulix-item">
									<img src="{{ asset('uploads/images/offres/' ~ image.name)}}" alt="{{ annonce.title }}" width="100%">
								</div>
							{% endfor %}
							<div class="length-img-detail">
								{% if annonce.images|length == 1 %}
									<span>{{annonce.images|length}} image</span>
								{% else %}
									<span>{{annonce.images|length}} images</span>
								{% endif %}
							</div>
						</div>
					
					</div>
				</div>

				<div class="row bg-white my-5 shadow-sm">
				
					<!-- Left sidebar -->
					
					<div class="col-lg-8 col-md-12">
						<div class="product-details">
							
							<div class="content content-user-bar">
								<div class="tab-content shadow-none" id="pills-tabContent" style="justify-content:center; align-items:center;">
									<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-list">
										<div class="d-flex row">
											<div>
												<h2>
													{{ annonce.title|capitalize }}
												</h2>
											</div>
											{% if app.user == annonce.users %}
												{% if  annonce.active == 0 %}
													<div class="box-active">
														<p class="deal-text-lert" style="color: rgb(200, 0, 0);">
															<strong>En attente de validation</strong>
														</p>
													</div>
												{% endif %}
											{% endif %}
										</div>
										<div class="d-flex row">
											<div class="mr-inbox">
												<h2 class="price-label">
													{{ (annonce.price / 1000)| number_format(0,',')}}
													FCFA
												</h2>
											</div>
										</div>
										{% if  annonce.deal == 1 %}
											<div class="box-deal">
												<p class="deal-text-alert" style="color: #21ab26;">
													Prix négociable</p>
											</div>
										{% endif %}
										<p class="mt-4">
											<i class="fas fa-heart"></i>
											Designé
											{{ annonce.saves | length }}
											fois comme affaire coup de coeur
										</p>
										<p class="mt-2">
											<i class="fas fa-stream"></i>
											Catégorie :
											{{annonce.category}}</p>
										<p>
											<i class="fas fa-map-marker-alt"></i>
											{{annonce.countries}}
											{{annonce.regions}}
											{{annonce.city}}
											{{annonce.districts}}
										</p>
										<div class="tab-title">
											<p>
												<i class="fa fa-stopwatch"></i>
												{{ annonce.createdAt|format_datetime (locale='fr', pattern="EEEE dd/MM/YYYY à HH:mm" )|capitalize }}</p>
											{% if app.user == annonce.users and app.user.isVerified == true and app.user.active == true %}
												
													<div class="d-flex align-items-center mt-3 mb-1">
													{% if is_granted('ROLE_USER_PREMIUM') %}
														<div class="edit-offer mr-3">
															<a type="button" class="delete btn btn-primary btn-sm text-white" href="{{ path("users_offers_edit", {slug: annonce.slug})}}">
																<i class="fa fa-eraser"></i>
																Modifier l'offre
															</a>
														</div>
													{% endif %}
														<div class="trash-offer">
															<a class="delete" href="{{ path("users_offers_delete", {id: annonce.id})}}">
																<i class="fa fa-trash"></i>
																Supprimer l'offre
															</a>
														</div>
													</div>
												
											{% endif %}
										</div>
										{% if app.user == true and  app.user.isVerified == true and app.user.active == true %}
											<p class="content-box">{{ annonce.content|capitalize|raw }}</p>
											<br/><br/>
											<br/>
											<p class="text-muted">
												Id :
												{{ (annonce.slug)}}
											</p>
											<!-- Contact sharing -->
												{% if annonce.users == app.user %}
													<div>{# Display empty div if advert belongs to connected user #}</div>
												{% else %}
													
													{% if contactSharing != null and contactSharing.isAccepted == true %}
														<!-- Display contactSharing informations if accepted -->
														<div class="text-muted">
															<h3>Informations de contact:</h3>
															<p class="my-2">
																Email: {{ contactSharing.recipient.email }}</br>
																Téléphone: {{ contactSharing.recipient.phone }}
															</p>
														</div>
														<!-- Display contactSharing informations if accepted -->
													{% else %}
														<!-- Contact request button -->
														<button
														 type="button"
														 id="contact-sharing"
														 data-sender={{ app.user.id }}
														 data-recipient={{ annonce.users.id }}
														 data-advert={{ annonce.id }}
														 {{ contactSharing != null and contactSharing.isAccepted == false ? 'disabled' : '' }}>
														 {{ contactSharing != null and contactSharing.isAccepted == false ? 'Demande de contact envoyée' : 'Contacter' }}
														 </button>
														<!-- Contact request button -->
													
													{% endif %}
											
												{% endif %}
											<!-- Contact sharing -->
										{% endif %}
										{% if app.user == false %}
											<div style="justify-content:center; align-items:center;">
												<p class="link_log_card_out">Veuillez vous
													<a href="{{ path('app_login') }}">connecter
													</a>
													ou vous
													<a href="{{ path('app_register') }}">inscrire</a>
													<br/>pour obtenir des informations supplémentaires sur l'offre.
												</p>
											</div>
										{% elseif app.user.active == false %}
											<div class="mb-5" style="justify-content:center; align-items:center;">
												<p class="link_log_card_out">
													Votre compte a été restreint, pour plus d'informations, merci de rentrer en contact avec le support.
												</p>
											</div>
										{% elseif app.user.isVerified == false %}
											<div class="mb-5" style="justify-content:center; align-items:center;">
												<p class="link_log_card_out">
													Veuillez confirmer votre adresse e-mail afin d'accéder à plus de fonctionnalités.
												</p>
											</div>
										{% endif %}
										{#
										{% if app.user == true and app.user.isVerified == true and app.user.active == true %}
											<button class="modal-trigger btn-contact-user-resp" data-target="modale-contact">
												Contacter</button>
										{% endif %}
										#}
									</div>
								</div>
									{# modal contact  #}
									<div class="modal_contact modal falling align-items-center" id="modale-contact">
										<div>
											<label for="modalCheck6" class="my_btn_close modal-trigger" data-target="modale-contact">&times;</label>
										</div>
										{% if app.user == true and app.user.isVerified == true and app.user.active == true %}
											{% if annonce.active == 1 %}
												<div class="modal-content">
													<div class="row mt-5">
														<a class="btn_log_user" href="{{ path('users', {slug: annonce.users.slug}) }}">
															<img class="user_img mb-3" src="{{ asset('uploads/images/users/' ~ annonce.users.avatar )}}" alt="card-img-top">
															<p>{{ annonce.users.firstname|title }}
																{{ annonce.users.name|title }}</p>
														</a>
														<div class="row">
															<p>Contact :{# ({{annonce.users.countries.indicatif}}) #} 0{{  annonce.users.phone}}</p>
															<div>
																<strong>{{ annonce.users.country|capitalize }}</strong>
															</div>
														</div>
													</div>
												</div>
											{% else %}
												<div class="pl-5 pr-5" style="justify-content:center; align-items:center;">
													<div class="row mt-5">
														<div class="row">
															<div class="box-active column">
																<p class="deal-text-lert" style="color: rgb(200, 0, 0);">
																	<strong>Offre en attente de validation</strong>
																</p>
																<p>
																	Une fois la vérification terminée, vous recevrez un e-mail.
																</p>
															</div>
														</div>
													</div>
												</div>
											{% endif %}
										{% else %}
											{# ELSE modal contact #}
											<div class="modal-header">
												<p class="link_log_card">Veuillez vous
													<a href="{{ path('app_login') }}">connecter
													</a>
													ou vous
													<a href="{{ path('app_register') }}">inscrire</a>
													<br/>pour obtenir des informations supplémentaires sur l'offre.
												</p>
											</div>
										{% endif %}
									</div>													
									
									<!-- modal content -->												
							</div>
						</div>
					</div>
				
					<div class="col-lg-4 col-md-12 py-4">
						<div class="sidebar">

							<!-- User Profile widget -->

							<div class="widget shadow-none mb-0 p-0 user text-center">
								{% if app.user == true and app.user.isVerified == true and app.user.active == true %}
									<a class="btn_log_user" href="{{ path('users', {slug: annonce.users.slug}) }}">
										<img class="rounded-circle" src="{{ asset('uploads/images/users/' ~ annonce.users.avatar )}}" alt="card-img-top">
									</a>
									<h4>
										<a href="{{ path('users', {slug: annonce.users.slug}) }}">{{ annonce.users.firstname|capitalize}}
											{{ annonce.users.name|capitalize}}</a>
									</h4>
									<p class="member-time">Membre depuis
										{{annonce.users.createdAt|format_datetime (locale='fr',pattern=" MMMM YYYY")}}</p>
									{#<button class="modal-trigger btn-contact-user" data-target="modale-contact">Contacter</button> #}
								{% endif %}
								{% if app.user == false %}
									<a class="btn_log_user" href="{{ path('app_login')}}">
										<img class="rounded-circle" src="{{ asset('uploads/images/users/' ~ annonce.users.avatar )}}" alt="card-img-top">
									</a>
									<h4>
										<a href="{{ path('app_login')}}">{{ annonce.users.firstname|capitalize}}
											{{ annonce.users.name|capitalize}}</a>
									</h4>
									<p class="member-time mb-0">Membre depuis
										{{annonce.users.createdAt|format_datetime (locale='fr',pattern=" MMMM YYYY")}}
									</p>
								{% endif %}
							</div>
						</div>

						<!-- Coupon Widget -->

						<div class="widget shadow-none my-2 py-0 text-center">
							<!-- Coupon description -->
							
							<div>
								<p>{{annonce.countries}} - {{annonce.city}} <i class="fas fa-map-marker-alt fa-lg ml-2 text-muted"></i></p>
								<p class="mr-2">
									{#{{annonce.regions}}#}
									{#{{annonce.city}}#}
									{#{{annonce.districts}}#}
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
				<!-- Container End -->
					
				
		</section>
	</div>
{% endblock %}

{% block javascripts %}

<script>
// Send contact request.
document.getElementById('contact-sharing').addEventListener("click", async function(event) {
	
	const url = `{{ path('contact_request')}}`;
	const response = await fetch(url, {
		method: 'POST',
		headers: { "Content-Type": "application/json"},
		body: JSON.stringify({ 
			"sender": document.getElementById('contact-sharing').dataset.sender,
			"recipient": document.getElementById('contact-sharing').dataset.recipient,
			"advert": document.getElementById('contact-sharing').dataset.advert,
			})
	});

	// Redirect user to premium offer subscription if contact request > greater than one for 3 months.
	const data = await response.json();
	if (data.redirect) {
		window.location.href = data.redirect;
	}

	document.getElementById('contact-sharing').setAttribute('disabled', 'disabled');
	document.getElementById('contact-sharing').textContent = "Demande de contact envoyée";

	
})

</script>
<!-- Axentix JS minified version -->
<script src="{{ asset('js/modal.js') }}"></script>

<script>
window.onload = () => {
document.querySelector("#annonce_contact_title").value = "{{ annonce.title|raw }}";

// On met un écouteur d'évènements sur tous les boutons répondre
document.querySelectorAll("[data-reply]").forEach(element => {
	element.addEventListener("click", function () {
		document.querySelector("#comments_parentid").value = this.dataset.id;
	});
});

}
let caroulix = new Caroulix('#carousel');
let modal = new Modal('#modale-contact');

</script>
{% endblock %}