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

{% block stylesheets %} 
	<!-- SITE TITTLE -->
	<link rel="stylesheet" href="../assets/css/bootstrap.css">
	<link rel="stylesheet" href="../assets/css/theme.css">
	<link rel="stylesheet" href="{{'css/style.css'}}">
	<link rel="stylesheet" href="{{'css/offer.css'}}">
	<style>
		.btn-custom {
			width: 5rem;
			padding: 5px 8px;
			background-color: #5672f9;
			border: none;
			border-radius: 3px;
			color: white
		}
		
		.btn-custom:hover {
			background-color: #3248b7;
    		color: white;
    		text-decoration: none;
		}

		.btn-custom:disabled {
			background-color: #b8c0e9;
    		color: white;
    		text-decoration: none;
		}	

		.form-control[disabled] {
			background-color: #f8f9fa!important;
			color: #6c757d!important;
		}

		.offer-plus {
			margin-left: 32px;
		}

		@media only screen and (max-width: 980px) {
			.offer-plus {
				margin-left: 0px;
				padding: 0px 20px 0px 20px;
			}
		}
	</style>
{% endblock %}
{% block title %}Maman-Julienne, Acheter, Vendre, Louer, faites des affaires en Afrique{% endblock %}
{% block body %}

	<div class="body-wrapper">

		<section>
			<div>
				<div class="row">
					<div class="col-md-12">
						<nav class="navbar navbar-expand-lg  navigation">
							<a class="navbar-brand ml-3" href="{{ path('app_home') }}">
								<strong>🧿Maman-Julienne</strong>
							</a>
							<p href="javascript:void(0);" class="icon mr-5" onclick="myFunction()">
								<i class="fa fa-bars"></i>
							</p>
							
							<div class="navbar-collapse" id="myLinks">
								<ul class="navbar-nav ml-auto main-nav px-4">
									<li class="nav-item">
										<a class="nav-link active" href="{{ path('app_home') }}">Accueil</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="{{ path('manual') }}">Mode emploi</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="{{ path('about') }}">À propos</a>
									</li>

									{% if app.user %}
										<li class="nav-item dropdown dropdown-slide">
											<a class="dropdown-username text-sm mr-1" href="{{ path('users', {slug: app.user.slug}) }}">
												{{app.user.firstname|title }}
												{{ app.user.name|title }}
											</a>
											<!-- Dropdown list -->
											<div class="dropdown-menu dropdown-menu">
												<a class="dropdown-item" href="{{ path('users', {slug: app.user.slug}) }}">
													Profil</a>
												<a class="dropdown-item" href="{{ path('app_logout')}}">
													Se déconnecter</a>
											</div>
										</li>
										<li class="nav-item mx-1">
											<!-- Notifications -->
											{{ include('partials/notifications/_notification_sidebar.html.twig') }}
											<!-- Notifications -->
										</li>

										{% if  app.user.isVerified == true and app.user.active == true %}

											<li class="nav-item offer-plus">
												<label class="nav-link btn btn-primary modalCheck mb-0 w-100 text-center text-white text-sm" for="modalCheck6">
													<i class="fa fa-plus-square"></i>
													Déposez une offre
												</label>
											</li>

										{% endif %}
										

									{% else %}
										<li class="nav-item">											
											<a class="nav-link text-sm" href="{{ path('app_login')}}">
												<svg xmlns="http://www.w3.org/2000/svg" height="18" width="16.33" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"/></svg>
												<span class="table-cell align-bottom ml-2 ">Se connecter</span>
											</a>
										</li>

										<li class="nav-item offer-plus">
											<a class="nav-link btn btn-primary modalCheck w-100 mb-0 text-center text-white text-sm" href="{{ path('app_login') }}">
												<i class="fa fa-plus-square"></i>
												Déposer une offre
											</a>
										</li>										
										
										{#
										<li class="nav-item">
											<a class="nav-link p-0 mx-2 text-sm" href="{{ path('app_register') }}">S'inscrire</a>
										</li>
										#}
											

										
									{% endif %}
								</ul>
								<ul class="navbar-nav ml-auto pl-4">
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
		</section>

			<!--- Notification toast -->
			<div class="push-notification-toast"style="position: absolute; top: 120px; right: 10px; width: max-content; z-index:10;">
				{{ include ('partials/notifications/_notification_toast.html.twig') }}
			</div>
			<!--- Notification toast -->

		{{ include('partials/_flash.htlm.twig') }}
		<section class="hero-area bg-1 text-center overlay">
			{% if app.user and app.user.isVerified == false %}
				<div class="alert alert-warning alert-dismissible text-center m-alert" role="alert">
					<div class="alert-message">
						<p>Veuillez confirmer votre adresse e-mail afin d'accéder à plus de fonctionnalités
							<a href="{{ path('resend_verif') }}" type="button" class="btn btn-light btn-sm ml-4">Renvoyer l'e-mail</a>
						</p>

					</div>
				</div>
			{% endif %}
			<!-- Container Start -->
			<div class="container">

				<div class="row">
					<div
						class="col-md-12">
						<!-- Header Contetnt -->
						<div class="content-block">
							<h1>
								N'hésitez plus !
							</h1>
							{# <p>Acheter, Vendre, Louer, faites des affaires près de chez vous.</p> #}
							<p>Achetez, vendez, louez et découvrez tout les services près de chez vous.</p>

							<div>
								<p style="font-size:17px;">Cameroun, Congo Brazzaville, Congo RDC, Gabon
								</p>
							</div>

							<div class="short-popular-category-list text-center">
								<ul class="list-inline">
									<li class="list-inline-item">
										<a style="color:#dfdfdf;">
											<i class="fa fa-home"></i>
											Location</a>
									</li>
									<li class="list-inline-item">
										<a style="color:#dfdfdf;">
											<i class="fa fa-car"></i>
											Vehicule</a>
									</li>
									<li class="list-inline-item">
										<a style="color:#dfdfdf;">
											<i class="fas fa-utensils"></i>
											Restauration</a>
									</li>
									<li class="list-inline-item">
										<a style="color:#dfdfdf;">
											<i class="fa fa-bolt"></i>

											Electricien</a>
									</li>
									<li class="list-inline-item mt-3">
										<a style="color:#dfdfdf;">
											<i class="fa fa-store"></i>
											Magasin</a>
									</li>
								</ul>

							</div>

						</div>
						<div class="advance-search">
							{{ form_start(form, {'attr': {'id': 'filter_offer'}}) }}
							<div
								class="row">
								<!-- Store Search -->

								<div class="col-lg-2 col-md-12">
									<div class="block d-flex-price">
										{{ form_row(form.min) }}
									</div>
								</div>
								<div class="col-lg-2 col-md-12">
									<div class="block d-flex-price">
										{{ form_row(form.max) }}
									</div>
								</div>
								<div class="col-lg-6 col-md-12">
									<div class="block">
										{{ form_row(form.mots) }}
									</div>
									<!--id="search"-->
									<!-- Search Button -->
								</div>
								<div class="col-lg-2 col-md-12">
									<div class="dropdown block">{{ form_row(form.category) }}
									</div>
								</div>


								<div class="col-lg-2 col-md-12">
									<div class="locl block">
										<p>Localisation
										</p>
									</div>
								</div>
								{# Localisations #}
								<div class="col-lg-2 col-md-12">
									<div class="dropdown block">
										{{ form_row(form.countries) }}
									</div>
								</div>
								<div class="col-lg-2 col-md-12">
									<div class="dropdown block">
										{{ form_row(form.regions) }}
									</div>
								</div>
								<div class="col-lg-2 col-md-12">
									<div class="dropdown block">
										{{ form_row(form.city) }}
									</div>
								</div>
								<div class="col-lg-2 col-md-12">
									<div class="dropdown block">
										{{ form_row(form.districts) }}
									</div>
								</div>
							</div>
						</div>
						{{ form_end(form) }}

					</div>

				</div>
			</div>
		</div><!-- Container End --></section>
	<section
		class="section-add-offer-modal">
		<!--===================================================!-->
		<div class="box-onclick-add-offer">
			<input type="checkbox" id="modalCheck6"/>
			<div id="overlay-add-offer" class="">

				<div class="popup_block-add-offer">
					<div>
						<label for="modalCheck6" class="my_btn_close">&times;</label>
					</div>

					<div class="box-add-offer">
						<div class="title_ads_add">
							<h3>
								Déposez une offre
							</h3>

						</div>
						<div class="tab-step-block">
							<div class="tab">
								<ul class="help-add-offer mb-3">
									<li>
										<p class="text-muted">
											1 . Veillez a au moins écrire le titre de votre offre pour passer à l'étape "Suivant".
											<br>
											Ce dernier devra clairement indiquer ce que vous propose.</p>

									</li><br>
									<li>
										<p class="text-muted">2 . Sélectionnez le pays, la région, la ville et si besoin le quartier.<br/>
											Selon l'offre proposée, indiquer le quartier peut s'avérer indispensable.</p>
									</li>
								</ul>
								{{ form_start(formAddOffer, {'attr': {'id': 'offer_annonce'}}) }}

								<div class="my-custom-class-for-errors">
									{{ form_errors(formAddOffer) }}
								</div>
								<div class="title_ans">
									{{ form_row(formAddOffer.title) }}
								</div>

								{{ form_row(formAddOffer.countries) }}
								{{ form_row(formAddOffer.regions) }}
								{{ form_row(formAddOffer.city) }}
								{{ form_row(formAddOffer.districts) }}
								<button type="button" class="btn-next-go mt-4" id="nextBtn" onclick="nextPrev(1)">Suivant</button>

							</div>
							<div class="tab w-65 ml-2">
								<ul class="help-add-offer mb-5">
									<li>
										<p class="text-muted">3 . Afin de spécifier que le prix est négociale, sélectionnez "Oui" dans la case dédiée à cet effet.</p>
									</li>
									<li class="mb-5">
										<p class=" text-muted">4 . En ce qui concerne la description, décrivez votre produit, bien et/ou service de façon claire et concise.</p>
									</li>
								</p>
							</li>
						</ul>
						<div class="price">
							{{ form_row(formAddOffer.price) }}
						</div>
						<div class="deal_ans_">
							{{ form_row(formAddOffer.deal) }}
						</div>
						<div class="content_ans">
							{{ form_row(formAddOffer.content) }}
						</div>
						<div class="mt-5">
							{{ form_row(formAddOffer.category) }}
						</div>
						{{ form_row(formAddOffer.images) }}

						<button type="submit" class="btn-next-go  mt-4" id="prevBtn" onclick="nextPrev(-1)">Déposer</button>
						<button type="button" class="btn-previous-go mt-3" id="prevBtn" onclick="nextPrev(-1)">Précédent</button>
						{{ form_end(formAddOffer) }}
					</div>
				</div>
				<div class="mt-5 text-required">
					<p class="text-muted">* Renseignement obligatoire</p>
				</div>
				<div class="step-bl">
					<span class="step"></span>
					<span class="step"></span>
				</div>
			</div>
		</div>
	</div>
</div>
<!--====================================================================!--></section><section
class="section-add-offer-modal">
<!--===================================================!-->
<div class="box-onclick-add-offer">
	<input type="checkbox" id="modalCheck6"/>
	<div id="overlay-add-offer">


		<div class="popup_block-add-offer mt-5">
			<div>
				<label for="modalCheck6" class="my_btn_close">&times;</label>
			</div>
			<div class="mt-5 text-required">
				<p class="text-muted">Veuillez activer votre compte, afin de déposer une offre</p>
			</div>
		</div>
	</div>
	<!--====================================================================!-->
</section>

<section class="popular-deals section">
	<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('account_enable_succes') %}

					<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>
	<div class="container">
		<div class="card-img-pub">
			{% for pub in pubs %}
				<img class="img-fluid" src="{{'/images/pubs/' ~ pub.image}}" alt="Card image pub"/>
			{% endfor %}
		</div>

		<div class="row">
			{% for annonce in annonces %}
				{% if  annonce.users.active == true %}
					<!-- offer-->
					<div
						class="col-sm-12 col-lg-4">
						<!-- card -->
						<div class="product-item">
							<div class="card-main">
								{% if app.user %}
									<div class="save-offer-btn">
										<a href="{{ path('annonce_saves' , {'id' : annonce.id}) }}" class="js-save ml-3 mt-3">
											{% if app.user and annonce.isSaveByUser(app.user) %}
												<i class="fa fa-heart"></i>
											{% else %}
												<i class="fa fa-heart-o"></i>
											{% endif %}
											<span class="js-save"></span>
										</a>
									</div>
								{% endif %}
								<div class="thumb-content">
									<a href="{{ path('offer_detail', {slug: annonce.slug})}}">
										<img class="card-img-top" src="{{ ('uploads/images/offres/' ~ annonce.images[0].name) }}" alt="Card image cap">
									</a>
									{% if app.user %}
										<a href="{{ path('users', {slug: annonce.users.slug}) }}" class="card-user-info">
											<img class="user-img-ads" src="{{'uploads/images/users/' ~ annonce.users.avatar}}" alt="{{annonce.users.firstname|title }} {{annonce.users.name|title }}">

											<p>{{annonce.users.firstname|title }}
												{{annonce.users.name|title }}</p>
										</a>
									{% else %}
										<a href="{{ path('app_login') }}" class="card-user-info">
											<img class="user-img-ads" src="{{'uploads/images/users/' ~ annonce.users.avatar}}" alt="{{annonce.users.firstname|title }} {{annonce.users.name|title }}">

											<p>{{annonce.users.firstname|title }}
												{{annonce.users.name|title }}</p>
										</a>
									{% endif %}
								</div>
								<div class="card-body">
									<h4 class="card-title">
										<a href="{{ path('offer_detail', {slug: annonce.slug})}}">
											{{ annonce.title|capitalize }}</a>
									</h4>
									<ul class="list-inline product-meta">
										{% if annonce.users.statut.id == 2 %}
											<li class="list-inline-item">
												<a>
													<i class="fas fa-heart"></i>
													{{ annonce.saves | length }}

													fois affaire coup de coeur
												</a>
											</li><br/>
										{% endif %}
										<li class="list-inline-item">
											<a>
												<i class="fas fa-stream"></i>
												{{ annonce.category.category.name}}</a>
										</li>
										<li class="list-inline-item">
											<a>
												<i class="fa fa-stopwatch"></i>
												{{ annonce.createdAt|format_datetime(locale='fr',pattern="EEEE dd/MM à HH:MM")|capitalize }}</span>
										</li>
									</a>
								</li>
							</ul>
							<div class="localisation-product row">
								<p>
									<i class="fas fa-map-marker-alt"></i>

									{{ annonce.countries|capitalize}}
									{{ annonce.regions|capitalize }}
									{{ annonce.city|capitalize }}
									{{ annonce.districts|capitalize }}</p>
							</div>
							<div class="row">
								<div>
									<p class="card-price">
										{{ (annonce.price / 1000)| number_format(0,',')}}
										FCFA
									</p>
								</div>
								{% if  annonce.deal == 1 %}

									<div class="box-deal">
										<p class="deal-text-alert">
											Prix négociable</p>
									</div>
								{% endif %}
							</div>
						</p>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
{% endfor %}
</div>
	<div class="pagination-link mt-5">{{ knp_pagination_render(annonces) }}</div>
	</section>
	<footer class="footer-bottom"><divclass=""><!-- Copyright --><div class="copyright align-items-center">
	<p>Copyright © 2022. Tous droits réservés
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																											.<a class="link-mention" href="{{ path('cgu-term') }}">
			Mention légale / CGU</a>
	</p>
	</div></div>
	</footer>
<!-- Container End -->
</section>
</div>
</div>
</div>
</div>
{% endblock %}

{% block javascripts %}<!-- JAVASCRIPTS -->

<script>

function myFunction() {
	var x = document.getElementById("myLinks");
	if (x.style.display === "block") {
		x.style.display = "none";
	} else {
		x.style.display = "block";
	}
}
	
</script>

<script>

function mjlSent() {
	var x = document.getElementById("boxTalkMjlSend");
	if (x.style.display === "block") {
		x.style.display = "none";
	} else {
		x.style.display = "block";
	}
}

</script>



<script>
function onClickBtnLike(event) {
event.preventDefault();
// Appel  via ajax
const url = this.href; // this = 'a'
const spanCount = this.querySelector('span.js-save');
const icone = this.querySelector('i');

// axios
axios.get(url).then(function (response) {
// axios envoi  requête http
// changermemt icon
if (icone.classList.contains('fa-heart-o')) {
icone.classList.replace('fa-heart-o', 'fa-heart');
} else {
icone.classList.replace('fa-heart', 'fa-heart-o');
}
}).catch(function (error) {
if (error.response.status == 403) {
window.alert('Vous ne pouvez pas sauvegarder un article si vous n\'êtes pas connecté')
} else {
window.alert('Une erreur s\'est produite, réessayer plus tard');
}
});
}

// js-save
document.querySelectorAll('a.js-save').forEach(function (link) { // boucler save offer
link.addEventListener('click', onClickBtnLike);
})
</script>
<script src="{{'js/images.js'}}"></script>
<script src="{{'js/search_offer_location.js'}}"></script>
<script src="{{'js/add_offer_location.js'}}"></script>
<script src="{{'js/multiple_step.js'}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

{% endblock %}