{% extends 'base.html.twig' %}
{% block stylesheets %}
	<link rel="stylesheet" href="{{ ('css/offer.css') }}">
	<link
	rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- CSS only -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{% endblock %}
{% block body %}
	{# {% if app.request.attributes.get('_route') == 'users_offers_edit' %}
																																																																																																																																																																																																																																																																																																										<h4>Modifier une annonce</h4>
																																																																																																																																																																																																																																																																																																									{% else %}
																																																																																																																																																																																																																																																																																																										<h4>Ajouter une annonce</h4>
																																																																																																																																																																																																																																																																																																									{% endif %} #}


	<style>
		body {
			font-family: 'M PLUS Rounded 1c', sans-serif;

		}
		/* input[type=password] */
		input[type=text] {
			width: 37%;
			padding: 12px 20px;
			margin-top: 8px;
			margin-left: 8px;
			display: inline-block;
			border: 1px solid #ccc;
			box-sizing: border-box;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border-radius: 5px;
		}

		input[type=textarea] {
			width: 37%;
			padding: 12px 20px;
			margin-top: 8px;
			margin-left: 8px;
			display: inline-block;
			border: 1px solid #ccc;
			box-sizing: border-box;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border-radius: 5px;
		}
		input.invalid {
			background-color: #ffdddd;
		}
		textarea.invalid {
			background-color: #ffdddd;
		}
		select.invalid {
			background-color: #ffdddd;
		}
		input[type=file] {
			width: 37%;
			padding: 12px 20px;
			margin-top: 8px;
			margin-left: 8px;
			border: 1px solid #ccc;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border-radius: 5px;

		}
		.content_element {
			width: 37%;
			height: 100px;
			padding-top: 10px;
			padding-left: 5px;
			margin-top: 8px;
			margin-left: 8px;
			display: inline-block;
			border: 1px solid #ccc;
			box-sizing: border-box;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			border-radius: 5px;
		}


		select {
			width: 37%;
			padding: 16px 20px;
			margin-top: 8px;
			margin-left: 10px;
			border: none;
			border-radius: 4px;
			background-color: #f1f1f1;
			font-family: 'M PLUS Rounded 1c', sans-serif;

		}
		button {
			text-decoration: none;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			width: 65%;
			padding: 15px;
			border: none;
			border-radius: 5px;
			color: #fff;
			background-color: #5a38fd;
			margin-top: 8px;
			margin-left: 21%;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		/* Hide all steps by default: */
		.tab {
			display: none;
			margin-top: 5%;
			margin-left: 10%;
		}

		/* Make circles that indicate the steps of the form: */
		.step {
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbbbbb;
			border: none;
			border-radius: 50%;
			display: inline-block;
			opacity: 0.5;
		}

		/* Mark the active step: */
		.step.active {
			opacity: 1;
		}

		/* Mark the steps that are finished and valid: */
		.step.finish {
			background-color: #04AA6D;
		}
		.title_ads_add {
			margin-top: 4%;
			margin-left: 12%;
		}
		.img_add_ads_wall {
			margin-top: 10%;
			width: 50%;
			float: right;
		}
		.right_column_add_ads {}
		.list_add_ads {
			position: absolute;
			margin-left: 52%;
			margin-top: 2.5%;
		}
		.help_add_ads {
			position: relative;
			display: flex;
			justify-content: center;
			text-align: center;
			flex-direction: row;
			background-color: #82b1ff;
			width: 100%;
			margin: 2px 10px 10px;
			padding-left: 5px;
			border-radius: 50px;
			color: #fff;
		}
		.help_add_ads p {
			margin-top: 15px;
		}
		.help_add_ads img {
			margin-right: 8px;
			width: 18px;
		}
		.warning-info {
			width: 4.5%;
			height: 4.5%;
			margin-top: 19px
		}
		img {
			max-width: 100%; /* This rule is very important, please do not ignore this! */
		}
		.btn-next-go {
			position: relative;
			display: flex;
			justify-content: center;
			width: 37%;
			margin-left: 10px;
			background: #5672f9;
			color: #fff;
		}

		.btn-next-go:hover {
			color: #fff;
			background: #607afa;
		}

		#canvas {
			height: 600px;
			width: 600px;
			background-color: #ffffff;
			cursor: default;
			border: 1px solid black;
		}
		.form-control {
			width: 37%;
		}
		.btn-deal {
			position: relative;
			display: flex;
			flex-direction: row;
			margin-top: -20px;
			margin-left: 11%;
		}
		@media(max-width: 980px) {
			.right_column_add_ads {
				display: none;
				visibility: hidden;
			}

		}
	</style>
	<div class="title_ads_add">
		<h3>
			Déposer une offre
		</h3>
	</div>

	<div class="tab d-flex">

		<div class="right_column_add_ads">
			<div class="list_add_ads">
				<div class="help_add_ads">
					<img src="../../images/icons/check.svg"/>
					<p>Sélectionnez le pays, la région, la ville et si besoin le quartier.</p>
				</div>


				<div class="help_add_ads">
					<img class="warning-info" src="../../images/icons/warning.png"/>
					<p>Selon l'offre proposée, indiquer le quartier reste optionnel.
					</p>
				</div>
				<div class="help_add_ads">
					<img src="../../images/icons/check.svg"/>
					<p>Le titre doit clairement indiquer ce que vous propose.</p>
				</div>

			</div>
		</div>

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


	</div>

	<div class="tab">
		{{ form_row(form.price) }}
		<div class="ml-3 mt-3 mb-3">
			{{ form_row(form.deal) }}
		</div>
		{{ form_row(form.content) }}
		{{ form_row(form.category) }}
		{{ form_row(form.images) }}

		<button type="submit" class="btn-next-go mt-3" id="prevBtn" onclick="nextPrev(-1)">Publier</button>


		<div class="right_column_add_ads">
			<div class="list_add_ads">
				<div class="help_add_ads">
					<img src="../../images/icons/check.svg"/>
					<p>Sélectionnez les meilleures photos de votre offre</p>
				</div>
				<div class="help_add_ads">
					<img src="../../images/icons/check.svg"/>
					<p>Faite une description claire et complète</p>
				</div>
				<div class="help_add_ads">
					<img src="../../images/icons/check.svg"/>
					<p>Indiquez avec précision où l'article peut être récupéré</p>
				</div>

			</div>
		</div>
	</div>

	<div>
		<div class="row" style=""></div>
	</di>
	{# Si la route est "annonces_edit on affiche les images #}
	{% if app.request.attributes.get('_route') == 'users_offers_edit' %}
		<h2>Images</h2>
		{% for image in annonce.images %}
			<div>
				<img
				src="{{ ('/uploads/images/annonces/'~image.name) }}" alt="" width="150">

				{# On ajoute un lien permettant de supprimer une image (sera géré en Ajax) #}
				<a href="{{ path('users_offers_delete_image', {id: image.id})}}" data-delete data-token="{{ csrf_token('delete' ~ image.id )}}">Supprimer</a>
			</div>
		{% endfor %}
	{% endif %}
	{{ form_end(form) }}


	<!-- Circles which indicates the steps of the form: -->
	<div style="text-align:center;margin-top:40px; visibility:hidden;">
		<span class="step"></span>
		<span class="step"></span>
	</div>

{% endblock %}
{% block javascripts %}
	<script src="{{ ('ckeditor5/ckeditor.js') }}"></script>
	<script src="{{ ('js/ckeditor.js') }}"></script>
	<script src="{{ ('js/images.js') }}"></script>
	<script src="{{ ('js/multiple_step.js') }}"></script>
	<script src="{{ ('js/add_country_ads.js') }}"></script>
	<script src="https://js.stripe.com/v3/"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>


{% endblock %}