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

{% block stylesheets %}
	<meta
	name="viewport" content="width=device-width, initial-scale=1">

	<!-- SITE TITTLE -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>

	<link rel="stylesheet" href="../assets/css/maicons.css">

	<link rel="stylesheet" href="../assets/css/bootstrap.css">

	<link rel="stylesheet" href="../assets/vendor/animate/animate.css">

	<link rel="stylesheet" href="../assets/vendor/owl-carousel/css/owl.carousel.css">

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


{% endblock %}

{% block title %}Modifier votre offre
{% endblock %}

{% block body %}

	<style>
		.w-100ds {
			margin-bottom: 100px;
		}
		.required {
			color: #000;
		}
		.form-block {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.error-empty-img {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 80px;
			margin-bottom: 20px;
			flex-direction: row;
			border-radius: 4px;
			padding-top: 40px;
			padding-left: 20px;
			padding-right: 20px;
		}
		.img-offer-edit {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 80px;
			margin-bottom: 20px;
			flex-direction: row;
			border-radius: 4px;
			padding-left: 20px;
			padding-right: 20px;

		}

		.img-offer-edit img {
			width: 150px;
			height: 150px;
			background-size: cover;
			object-fit: cover;
			border-radius: 4px;
			margin-bottom: 10px;
			position: relative;
			text-align: center;
			color: white;
		}


		/* 
		        ==================================== */

		.form-edit {
			display: grid;
			grid-template-columns: auto auto auto;
			grid-auto-flow: row dense;
			grid-gap: 0.8em;
			padding: 1.2em;
			width: 97%;
		}

		.form-middle {
			display: grid;
			margin-top: -20px;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-auto-flow: row dense;
			grid-gap: 0.8em;
			padding: 1.2em;
		}
		.form-middle select {
			width: 100%;
			right: 15px;
			margin-left: 20px;
			padding-right: 20px;
			background: #fff;
			border: none;
			border: 1px solid #c1c1c1;

		}
		input[type="file"] {
			border: none;
			border: 1px solid #c1c1c1;
			padding-bottom: 44px;
		}
		.form-bottom {
			display: grid;
			grid-template-columns: auto;
			grid-auto-flow: row dense;
			grid-gap: 0.8em;
			padding: 1.2em;
		}
		.form-edit > label {
			grid-column: 1;
			grid-row: auto;
		}
		.form-edit > input,
		.form-edit > button {
			grid-column: 2;
			grid-row: auto;
			padding: 1em;
			border: none;
			border: 1px solid #c1c1c1;

		}
		.form-edit input {
			width: 120%;
			height: auto;
			margin-top: 12px;
			border: none;
			border: 1px solid #c1c1c1;
		}
		.form-edit .cat-column {
			position: relative;
			display: flex;
			flex-direction: column;
			margin-top: 10px;
			margin-left: 25%;
			width: 70%;
			height: 120%;
		}


		.cat-input {
			background: none;
			width: 98.5%;
			height: 64%;
			border: none;
			/* box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0; */
			border: 1px solid #c1c1c1;

		}

		/* #right-box input {
			height: calc(100% - 5em);
			margin-top: 1px;
			width: 100%;
			border: none;
			margin-bottom: 10px;
		}

		#right-box {
			display: flex;
			grid-column: 3;
			grid-row: span 3;
			background: red;
			width: 100%;
		} */
		.form-edit > button {
			grid-column: 2 / 4;
		}
		.deal-input-edit {
			background-color: #fff;
			padding-right: 7px;
			margin-left: 10px;
			border: 1px solid #c1c1c1;
		}
		.price-input {
			width: 100%;
			border: none;
		}

		.price-input:focus {
			border: none;

		}
		.title-info-edit {
			display: flex;
			flex-direction: column;
			margin-top: 5px;
			color: #777;
			flex-wrap: wrap;
		}
		.content_element {
			padding-top: 10px;
			padding-left: 10px;
			width: 100%;
			min-height: 150px;
			border: none;
			border: 1px solid #c1c1c1;

		}

		.title-info-edit span {
			font-family: 'Poppins', sans-serif;
			padding-left: 10px;
			font-weight: 400;
			margin-top: 8px;
			font-size: 12px;
			text-align: center;
			color: #777;
		}
		.btn-next-go {
			padding-bottom: 38px;
			border: none;
		}
		.text-muted {
			margin-top: -10px;
			color: #777;
		}
		.deal-block {

			border-radius: 4px;
			width: 150px;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
			background-color: #d6fee1;
			color: #21ab26;
		}
		.descr-edit {
			margin-top: 60px;
			font-size: 13px;
		}
		.trash-edit-img-offers {
			flex-direction: column;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 4;
		}
		.btn-trash-edit-delete {
			padding: 10px 70px;
			border-radius: 4px;
			color: #fff;
			background: #5672f9;
		}
		.deal-block {
			margin-top: -11px;
		}
		.local {
			height: 120%;
		}

		@media(max-width: 900px) {

			input[type="file"] {
				margin-top: 50px;
			}
			.form-edit {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 100%;

			}
			.form-edit input {
				width: 100%;
			}
			.form-edit .cat-column {
				margin-left: 0;
				width: 100%;
			}

			.form-edit select {
				width: 100%;
			}

			.form-middle {
				position: relative;
				display: flex;
				margin-top: -20px;
				flex-direction: column;
			}
			.img-offer-edit {
				position: relative;
				display: flex;
				flex-direction: column;
			}
			.img-offer-edit img {
				width: 70%;
				height: 50%;
			}
			.btn-deal {
				margin-left: 60%;
			}

			.btn-trash-edit-delete {
				padding: 10px 100px;
			}
			.deal-block {
				margin-top: -11px;
			}

			.local {
				height: 100%;
			}
		}
		@media(max-width: 850px) {
			.btn-deal {
				margin-left: 40%;
			}

		}


		@media(max-width: 610px) {
			body {
				overflow-x: hidden;
			}
			.container div h4 {
				margin-bottom: -11px;
				font-size: 22px;
			}
			.descr-info-block {
				padding-top: 13px;
				margin-left: -10px;
				text-align: center;
			}
			.btn-deal {
				margin-left: 90%;
			}
			.loc-inp-blocks {
				font-size: 14px;
			}
			/* .img-offer-edit{
			} */
			.info-edit-title {
				margin-top: 13px;
				text-align: center;
			}
			.deal-block {
				margin-top: -11px;
			}

		}
		.error-action {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			margin-top: 40px;
		}
		.msg-error {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			border-radius: 6px;
			padding-left: 40px;
			width: 100%;
			/* box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; */
			margin-left: -6%;
			line-height: 1.5;
			font-family: 'Poppins', sans-serif;
			font-weight: 400px;

		}
		.row-mgs {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.icon-error {
			width: 28px;
			height: 28px;
			background-size: cover;
		}
		#hideAfter {
			animation: hideAnimation 0s ease-in 60s;
			animation-fill-mode: forwards;
		}

		@keyframes hideAnimation {
			to {
				visibility: hidden;
				width: 0;
				height: 0;
			}
		}
	</style>

	{% if app.request.attributes.get('_route') == 'users_offers_edit' %}
		<div class="container pl-2 pr-3">
			<div class="mt-5">
				<h5>Modifiez votre offre</h5>
				<div>
					<p>
						<strong>{{annonce.title}}</strong>

					</p>
					<p style="margin-top:-10px; font-size:10px;">

						ID |
						{{annonce.secretCode}}
					</p>
					{% if annonce.deal == 1 %}
						<div class="deal-block mb-2 mt-2">
							<span>
								Prix négociable
							</span>
						</div>
					{% endif %}

				</div>

			</div>
			{% for message in app.flashes('message') %}
				<div class="mt-1 mb-2" id="hideAfter">
					<div class="error-action">
						<div class="msg-error">
							<div class="d-flex flex-column">
								<div class="d-flex row-mgs">
									<p style="font-size:15px; margin-left:16px;">
										{{ message }}
									</p>
									<img class="icon-error" src="{{ ('images/icons/error.png')}}" alt="card-img-top">
								</div>
							</div>
						</div>
					</div>
				</div>
			{% endfor %}

			<div class="img-offer-edit">

				{% for image in annonce.images %}
					<div class="trash-edit-img-offers ml-1 mr-1">
						<img
						src="{{ ('/uploads/images/offres/'~image.name) }}" alt="" width="150">
						{# On ajoute un lien permettant de supprimer une image (sera géré en Ajax) #}
						<a class="btn-trash-edit-delete mb-5" href="{{ path('users_offers_delete_image', {id: image.id})}}" data-delete data-token="{{ csrf_token('delete' ~ image.id )}}">
							<i class="fa fa-trash"></i>
						</a>
					</div>
				{% endfor %}
			</div>

			<div class="form-block">
				{{ form_start(form, {attr: {id:"form_edit_block"}}) }}
				<div class="w-100ds">
					<div class="mt-5 pl-1">
						<p>
							<strong>
								Changez les images</strong>
						</p>
						<p class="text-muted">Pour modifier et sélectionner de nouvelle image, assurez-vous d'abord de supprimer celle déjà presentes dans l'offre.
						</p>
					</div>
					<div class="mt-4">
						{{ form_row(form.images) }}
					</div>

					<div class="mt-5 ml-4">
						{{ form_row(form.deal) }}
					</div>
					<div class="form-edit">
						<div class="row title-info-edit">
							{{ form_row(form.title) }}
							<div class="info-edit-title mt-2">
								<p class="text-muted mt-1 ml-2">
									Saisiez 5 à 45 caractères maximum.
								</p>
							</div>


						</div>
						<div
							class="cat-column">
							{# <p>Catégorie *</p> #}
							{{ form_row(form.category) }}
						</div>
						{{ form_row(form.price) }}

						{# location #}


					</div>
					<div class="mt-1 mb-5">
						<label for="Location" class="ml-4 loc-inp-blocks">Localisation (Selectionnez d'abord le "Pays") *</label>
						<div class="form-middle mt-1">
							{{ form_row(form.countries) }}
							{{ form_row(form.regions) }}
							{{ form_row(form.city) }}
							{{ form_row(form.districts) }}
						</div>
					</div>
					<div class="pl-3 pr-3">
						<div id="form-bottom">
							{{ form_row(form.content) }}
							<div class="descr-info-block mt-">
								<p class="text-muted mt-1 ml-2">
									Lors de la saisie de la description, veillez a ne pas dépasser 10 000 caractères.
								</p>
							</div>

							<button type="submit" class="btn-next-go form-control add-offer mt-5">Modifier</button>

						</div>


						{{ form_end(form) }}

					</div>
				</div>
			</div>
		{% endif %}
	{% endblock %}
	{% block javascripts %}
		<script>
			window.onload = () => { // Gestion des boutons "Supprimer"
let links = document.querySelectorAll("[data-delete]")

// On boucle sur links
for (link of links) { // On écoute le clic
link.addEventListener("click", function (e) { // On empêche la navigation
e.preventDefault()

// On demande confirmation
if (confirm("Voulez-vous vraiment supprimer ?")) { // On envoie une requête Ajax vers le href du lien avec la méthode DELETE
fetch(this.getAttribute("href"), {
method: "DELETE",
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json"
},
body: JSON.stringify(
{"_token": this.dataset.token}
)

}).then(
// On récupère la réponse en JSON
response => response.json()
).then(data => {
if (data.success) 
this.parentElement.remove()
 else 
alert(data.error)





}).catch(e => alert(e))
}
})
}
}
		</script>

		<script src="{{ ('js/edit_offer_location.js') }}"></script>

	{% endblock %}