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

{% block title %}Adresses |
	{{ app.session.get("setting").websiteName }}
{% endblock %}


{% block body %}

	
{{ include('navbar/index.html.twig') }}
<div class="notification"></div>


<!-- Main content -->
<div
	class="h-screen flex-grow-1 overflow-y-lg-auto">
	<!-- Header -->
	<header class="bg-surface-primary border-bottom pt-6">
		<div class="container-fluid">
			<div class="mb-npx">
				<div class="row align-items-center">
					<div
						class="col-sm-6 col-12 mb-4 mb-sm-0"><!-- Title -->

					</div>
				</div>
				<!-- Nav -->
				<ul class="nav nav-tabs mt-4 overflow-x border-0">
					<li class="nav-item ">
						<a href="{{asset('/compte')}}" class="nav-link">Tableau de bord</a>
					</li>

					<li class="nav-item">
						<a href="/compte/orders" class="nav-link font-regular">
							Commandes</a>
					</li>
					<li class="nav-item">
						<a href="/compte/address" class="nav-link font-regular  active">
							Addresses / facturations</a>
					</li>
					<li class="nav-item">
						<a href="{{asset('/logout')}}" class="nav-link font-regular">Se déconnecter</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<br>
	<div class="container mt-5">
		<p class="d-flex ml-3">
			Veuillez cliquer sur le bouton ci-dessous pour ajouter une nouvelle adresse.
			<a href="#" id="add_new_address" class="btn btn-primary py-3 px-4 ml-3">Créer</a>
		</p>

		<div class="col-xl-6 d-none" id="add_form">
			<form id="address_form">
				<div class="row align-items-end">
					<div class="col-md-6">
						<div class="form-group">
							<label for="name">Nom de l'adresse</label>
							<input type="text" class="form-control" name="name" placeholder="par ex: Maison, Drive">
						</div>
						<div class="form-group">
							<label for="client_name">Nom et Prénom</label>
							<input type="text" class="form-control" name="client_name" placeholder="">
						</div>
						<div class="form-group">
							<label for="phone">Téléphone</label>
							<input type="text" class="form-control" name="phone" placeholder="">
						</div>
					</div>
					<div class="w-100"></div>
					<div class="col-md-12">
						<div class="form-group">
							<label for="type_address">Type d'adresse</label>
							<div class="select-wrap">
								<select name="address_type" class="form-control">
									<option value="Facturation">Adresse de Facturation</option>

								</select>
							</div>
						</div>
					</div>
					<div class="w-100"></div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="street">Rue</label>
							<input type="text" class="form-control" name="street" placeholder="49 rue Brughel">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="details_address">Complément d'adresse</label>
							<input type="text" class="form-control" name="details_address" placeholder="Appartement, suite, unité etc : (facultatif)">
						</div>
					</div>
					<div class="w-100"></div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="city">Ville</label>
							<input type="text" class="form-control" name="city" placeholder="Boulogne sur Mer">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="code_postal">Code Postal</label>
							<input type="text" class="form-control" name="code_postal" placeholder="">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="state">Pays</label>
							<input type="text" class="form-control" name="state" placeholder="France">
						</div>
					</div>
					<div class="w-100"></div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="email">Email</label>
							<input type="text" class="form-control" name="email" placeholder="jean.lous@gmail.com">
						</div>
					</div>
					<div class="w-100"></div>
					<div class="col-md-12 mt-3">
						<button type="submit" class="btn btn-primary py-3 px-4 ml-3">Sauvegarder</button>
					</div>
				</div>
			</form>
		</div>

		<div id="address_details">
			<div class="card">
				<div class="card-body">

					{% for address in addresses %}
						<a href="{{ path('app_address_show', {'id': address.id}) }}">
							<h4 class="billing-heading mb-4">#{{address.id}}
								-
								{{ address.addressType }}</h4>
						</a>
						<hr>
						<p class="d-flex">
							<span>Nom de l'adresse :
								{{ address.name }}
							</span>
						</p>
						<p class="d-flex">
							<span>Nom et Prénom du client :
								{{ address.clientName }}</span>
						</p>
						<p class="d-flex">
							<span>Téléphone Portable :
								{{ address.phone }}</span>
						</p>

						<p class="d-flex">
							<span>Rue :
								{{ address.street }}</span>
						</p>
						<p class="d-flex">
							<span>Complément d'adresse :
								{{ address.detailsAddress }}</span>
						</p>
						<p class="d-flex">
							<span>Code Postal :
								{{ address.codePostal }}</span>
						</p>

						<p class="d-flex">
							<span>Ville :
								{{ address.city }}</span>
						</p>
						<p class="d-flex">
							<span>Pays :
								{{ address.state }}</span>
						</p>
						<hr>
						<p class="d-flex">
							<a href="" class="show_address">Consulter</a>
						</p>

						<p class="d-flex">
							<a href="#" data-id="{{address.id}}" data-address_type="{{address.addressType}}" data-name="{{address.name}}" data-client_name="{{address.clientName}}" data-phone="{{address.phone}}" data-street="{{address.street}}" data-details_address="{{address.detailsAddress}}" data-code_postal="{{address.codePostal}}" data-city="{{address.city}}" data-state="{{address.state}}" data-email="{{address.email}}" class="edit_address">Modifier</a>
						</p>

						<p class="d-flex">
							<a href="#" data-id="{{address.id}}" class="remove_address">Supprimer</a>
						</p>

						<hr>
					{% else %}
						<p class="d-flex">
							Aucun enregistrement trouvé pour le moment.

						</p>
					{% endfor %}
				</div>

			</div>
		</div>

	</div>

	<footer class="ftco-footer ftco-section">
		<div class="container">
			<div class="row">
				<div class="mouse">
					<a href="#" class="mouse-icon">
						<div class="mouse-wheel">
							<span class="ion-ios-arrow-up"></span>
						</div>
					</a>
				</div>
			</div>

			<div class="row mb-5">
				<div class="col-md">
					<div class="ftco-footer-widget mb-4">
						<h2 class="ftco-heading-2">Nature 4 Saisons
						</h2>
						<p>{{ app.session.get("setting").description }}</p>
						<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
							<li class="ftco-animate">
								<a href="https://www.facebook.com/p/Nature-4-Saisons-100054212243555/?locale=fr_FR">
									<span class="icon-facebook"></span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md">
					<div class="ftco-footer-widget mb-4 ml-md-5">
						<h2 class="ftco-heading-2">Accueil</h2>
						<ul class="list-unstyled">
							<li>
								<a href="/products" class="py-2 d-block">Achat</a>
							</li>
							<li>
								<a href="/about" class="py-2 d-block">À Propos</a>
							</li>
							<li>
								<a href="/blog" class="py-2 d-block">Blog</a>
							</li>

						</ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="ftco-footer-widget mb-4">
						<h2 class="ftco-heading-2">Aide</h2>
						<div class="d-flex">
							<ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
								<li>
									<a href="#" class="py-2 d-block">Termes et conditions</a>
								</li>
								<li>
									<a href="#" class="py-2 d-block">RGPD</a>
								</li>
								<li>
									<a href="#" class="py-2 d-block">FAQs</a>
								</li>
								<li>
									<a href="/contact" class="py-2 d-block">Contact</a>
								</li>
							</ul>

						</div>
					</div>
				</div>
				<div class="col-md">
					<div class="ftco-footer-widget mb-4">
						<h2 class="ftco-heading-2">Pour toute reclamation ?
						</h2>
						<div class="block-23 mb-3">
							<ul>
								<li>
									<span class="icon icon-map-marker"></span>

									<span class="text">49 boulevard d'aunou Boulogne sur mer 62200</span>
								</li>
								<li>
									<a href="#">
										<span class="icon icon-phone"></span>
										<span class="text">03 59 70 11 33</span>
									</a>
								</li>
								<li>
									<a href="#">
										<span class="icon icon-envelope"></span>
										<span class="text">CONTACT.NATURE4SAISONS@GMAIL.COM</span>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</div>
	</footer>
{% endblock %}
{% block javascripts %}
	<script>
		document.addEventListener('DOMContentLoaded', () => {
const addAddressButton = document.getElementById('add_new_address');
const addForm = document.getElementById('add_form');
const addressDetails = document.getElementById('address_details');
const form = document.getElementById('address_form');
const editAddressLinks = document.querySelectorAll('.edit_address');
let isUpdating = false;
let currentAddress = null;

const displayAddress = (addresses) => {
isUpdating = false;
currentAddress = null;
const body = document.querySelector(".card .card-body");

if (body) {
body.innerHTML = "";
addresses.forEach(address => {
body.innerHTML += `
                    <h4 class="billing-heading mb-4">#${
address.id
} - ${
address.addressType
}</h4>
                    <hr>
                    <p class="d-flex"><span>Nom de l'adresse: ${
address.name
}</span></p>
                    <p class="d-flex"><span>Nom et Prénom du client: ${
address.clientName
}</span></p>
                    <p class="d-flex"><span>Téléphone Portable: ${
address.phone
}</span></p>
                    <p class="d-flex"><span>Rue: ${
address.street
}</span></p>
                    <p class="d-flex"><span>Complément d'adresse: ${
address.detailsAddress
}</span></p>
                    <p class="d-flex"><span>Code Postal: ${
address.codePostal
}</span></p>
                    <p class="d-flex"><span>Ville: ${
address.city
}</span></p>
                    <p class="d-flex"><span>Pays: ${
address.state
}</span></p>
                    <p class="d-flex"><span>Email: ${
address.email
}</span></p>
                    <hr>
                    <p class="d-flex"><a href="#" class="show_address">Consulter</a></p>
                    <p class="d-flex">
                        <a href="#" 
                           data-id="${
address.id
}" 
                           data-address_type="${
address.addressType
}" 
                           data-name="${
address.name
}" 
                           data-client_name="${
address.clientName
}" 
                           data-phone="${
address.phone
}" 
                           data-street="${
address.street
}" 
                           data-details_address="${
address.detailsAddress
}" 
                           data-code_postal="${
address.codePostal
}" 
                           data-city="${
address.city
}" 
                           data-state="${
address.state
}" 
                           data-email="${
address.email
}" 
                           class="edit_address">Modifier</a>
                    </p>
                    <p class="d-flex"><a href="#" data-id="${
address.id
}" class="remove_address">Supprimer</a></p>
                    <hr>
                `;
});

addForm.classList.add('d-none');
addressDetails.classList.remove('d-none');
addRemoveAddressEventListeners();
addEditAddressEventListeners();
}
};

const addRemoveAddressEventListeners = () => {
const removeButtons = document.querySelectorAll('.remove_address');
removeButtons.forEach(button => {
button.addEventListener('click', async (event) => {
event.preventDefault();
const id = button.dataset.id;

if (id) {
try {
const response = await fetch (`/api/address/${id}`, {method: "DELETE"});
const result = await response.json();

if (result.isSuccess) {
displayAddress(result.data); // Actualiser la liste des adresses
} else {
console.error("Échec de la suppression de l'adresse", result.message);
}
} catch (error) {
console.error("Une erreur s'est produite lors de la suppression de l'adresse :", error);
}
}
});
});
};

const addEditAddressEventListeners = () => {
const editButtons = document.querySelectorAll('.edit_address');
editButtons.forEach(button => {
button.addEventListener('click', (event) => {
event.preventDefault();
isUpdating = true;
currentAddress = button.dataset;
addAddressButton.click();

// Remplir le formulaire avec les données de l'adresse
form.querySelector("input[name='name']").value = currentAddress.name;
form.querySelector("input[name='phone']").value = currentAddress.phone;
form.querySelector("input[name='client_name']").value = currentAddress.client_name;
form.querySelector("select[name='address_type']").value = currentAddress.address_type;
form.querySelector("input[name='street']").value = currentAddress.street;
form.querySelector("input[name='details_address']").value = currentAddress.details_address;
form.querySelector("input[name='code_postal']").value = currentAddress.code_postal;
form.querySelector("input[name='city']").value = currentAddress.city;
form.querySelector("input[name='state']").value = currentAddress.state;
form.querySelector("input[name='email']").value = currentAddress.email;
form.querySelector("button").textContent = "Mettre à jour";
});
});
};

addForm.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
let url = "/api/address";
let method = "POST";

if (isUpdating && currentAddress) {
url = `/api/address/${
currentAddress.id
}`;
method = "PUT";
}

try {
const response = await fetch(url, {
method: method,
body: JSON.stringify(Object.fromEntries(formData.entries())),
headers: {
'Content-Type': 'application/json'
}
});
const result = await response.json();

if (result.isSuccess) {
displayAddress(result.data);
} else {
console.error("Échec de l'opération", result.message);
}
} catch (error) {
console.error("Une erreur s'est produite lors de l'envoi des données :", error);
}
});

addAddressButton.addEventListener('click', (event) => {
event.preventDefault();
if (addForm.classList.contains('d-none')) {
addForm.classList.remove('d-none');
addressDetails.classList.add('d-none');
addAddressButton.textContent = 'Annuler';
form.querySelector("button").textContent = "Créer";
form.reset();
} else {
addForm.classList.add('d-none');
addressDetails.classList.remove('d-none');
addAddressButton.textContent = 'Créer';
}
});

// Initialiser les événements
addEditAddressEventListeners();
addRemoveAddressEventListeners();
});
	</script>

{% endblock %}