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

{% block stylesheets %} 
	<!-- SITE TITTLE -->
	<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/theme.css') }}">
	<link rel="stylesheet" href="{{ asset('css/style.css') }}">
	<link rel="stylesheet" href="{{ asset('css/offer.css') }}">
	<style>
		.card {
			height: 450px;
			width: 250px;
			margin-top: calc((100vh - 400px) / 2);
			margin-bottom: calc((100vh - 400px) / 2);
			margin-left: 100px;
		}
		
		.subscription-plans {
			height: 100vh;
			background-color: #f3f3f3;
		}

		.subscription-image {
			background-color: #f3f3f3;
			height: inherit;
		}

		.plan li {
		  	display: flex;
		  	align-items: flex-start;
			margin-top: 1px;
		  	margin-bottom: 0.8rem;
			flex: 1;
		}

		.plan .fa {
		  	margin-top: 0.2rem; /* Adjust the margin to vertically align the icons */
		  	width: 1rem; /* Adjust the width as needed for proper alignment */
		}

		.subscription-choice {
			position: absolute;
			bottom: 0;
			left: 0;			
			width: 90%;
			margin: calc((100% - 90%) / 2);
		}

		@media (max-width: 768px) {
			.subscriptions-choices {
				flex-direction: column;
				width: 100%;
				margin: auto;
			}
			.card {
				width: 70%;
				margin: auto;
				margin-top: 2rem;				
			}
		}
	</style>
{% endblock %}
{% block title %}Maman-Julienne, Acheter, Vendre, Louer, faites des affaires en Afrique{% endblock %}
{% block body %}		
			
		<div class="navigation-navbar">			
			<nav class="navbar navbar-expand-lg  navigation d-flex justify-content-between">
				<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 pl-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>
					</ul>
					<ul class="navbar-nav w-25 ml-auto pl-4">
						
					</ul>
				</div>
				
			</nav>			
		</div>

		<!-- Flash messages -->

		{{ include ('partials/_flash.htlm.twig') }}

		<!-- flash messages -->

		<!-- Subscription plans -->
		
		<section class="container-fluid subscription-plans">
		{#
			<div class="subscription-image mt-5 d-flex justify-content-center">
				<div class="introduction mr-5">
					<h1>Faites votre choix</h1>
				</div>
				<div>
					<img class="img-fluid" src="{{ asset('images/illustrations/subscription.png') }}" width="300px" height="300px" alt="">
				</div>
			</div>	

		#}
					
			<div class="subscriptions-choices d-flex justify-content-center">
								
				<!-- Free plan -->
				<div class="card">
					<div class="card-body">
						<div class="card-title">
							<h5 class="text-center">Offre gratuite</h5>
						</div>
						<div class="card-text h-75 p-2">
							<ul class="plan">
								<li><span class="fa fa-check text-success"></span><span class="ml-2 text-muted">Publication d'annonces: <i>Une par mois.</i> </span></li>
								<li><span class="fa fa-check text-success"></span><span class="ml-2 text-muted">Contacter les vendeurs: <i>Une fois par mois.</i></span></li>
								<li><span class="fa fa-times text-danger"></span><span class="ml-2 text-muted">Modification des annonces.</span></li>
								<li><span class="fa fa-times text-danger"></span></span><span class="ml-2 text-muted">Mise en avant des annonces.</span></li>
								<li><span class="fa fa-times text-danger"></span><span class="ml-2 text-muted">Modification des informations de profil.</span></li>							
							</ul>
						</div>
						<form action="{{ path('app_subscribe', { 'planId': 'free' }) }}" method="post">
							<button type="submit" class="btn btn-primary subscription-choice">0 CFA</button>
						</form>
					</div>
				</div>
				

				<!-- Plus plan -->				
				<div class="card mb-5">
					<div class="card-body">
						<div class="card-title">
							<h5 class="text-center">Offre premium</h5>
						</div>
						<div class="card-text h-75 p-2">
							<ul class="plan">
								<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Publication d'annonces: <i>illimitées.</i></span></li>
								<li><span class="fa fa-check text-success"></span><span class="ml-2 text-muted">Contacter les vendeurs: <i>illimitées.</i></span></li>
								<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Modification des annonces.</span></li>
								<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Mise en avant des annonces.</span></li>
								<li><span class="fa fa-check text-success"></span></span><span class="ml-2 text-muted">Modification de mes informations de profil.</span></li>							
							</ul>
						</div>
						<form action="{{ path('app_subscribe', { 'planId': 'premium' }) }}" method="post">
							<input type="hidden" name="lookup_key" value="offre_test">
							<button type="submit" class="btn btn-primary subscription-choice">10 000 CFA</button>
						</form>
					</div>
				</div>
				
			</div>
		</section>
		
			<!-- Container Start -->

	<footer class="footer-bottom"> 
		<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>

{% endblock %}
{% block javascripts %}
<script>

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