{% extends 'layouts/admin_layout.html.twig' %}

{% block title %}Mon Profil Utilisateur
{% endblock %}

{% block content %}
	<div class="container-fluid">
		<div class="d-flex justify-content-between align-items-center mb-4">
			<div>
				<h3 class="page-header page-header-top mb-1">Mon Profil Utilisateur</h3>
				<p class="text-muted small mb-0">Gérez vos informations de compte et vos paramètres de sécurité.</p>
			</div>
			<div class="d-flex gap-2">
				<a href="{{ path('app_admin_dashboard') }}" class="btn btn-light border shadow-sm">
					<i class="fas fa-arrow-left me-2"></i>Retour
				</a>
			</div>
		</div>

		<div
			class="row">
			{# --- COLONNE GAUCHE & FORMULAIRE --- #}
			<div class="col-lg-9">
				<div class="card border-0 shadow-sm rounded-3">
					<div class="card-body p-4">
						{% for label, messages in app.flashes %}
							{% for message in messages %}
								<div class="alert alert-{{ label }} alert-dismissible fade show mb-4" role="alert">
									{{ message }}
									<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
								</div>
							{% endfor %}
						{% endfor %}

						<div class="alert alert-info py-2 small mb-4">
							<i class="fas fa-info-circle me-2"></i>
							Mettez à jour vos informations. Pour modifier votre mot de passe, activez l'option dédiée ci-dessous.
						</div>

						{{ form_start(form, {'attr': {'id': 'user-shared-form', 'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}

						<h6 class="fw-bold text-uppercase text-primary mb-4 small">
							<i class="fas fa-id-card me-2"></i>Informations Personnelles
						</h6>

						<div class="row g-3 mb-4">
							<div class="col-md-2">
								{{ form_label(form.civilite, 'Civ.', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.civilite, {'attr': {'class': 'form-select'}}) }}
							</div>
							<div class="col-md-5">
								{{ form_label(form.nom, 'Nom', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.nom, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
							</div>
							<div class="col-md-5">
								{{ form_label(form.prenoms, 'Prénoms', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.prenoms, {'attr': {'class': 'form-control', 'required': 'required'}}) }}
							</div>
						</div>

						<div class="row g-3 mb-4">
							<div class="col-md-6">
								{{ form_label(form.email, 'Email professionnel', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.email, {'attr': {'class': 'form-control bg-light', 'readonly': 'readonly'}}) }}
							</div>
							<div class="col-md-6">
								{{ form_label(form.telephone, 'Téléphone', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.telephone, {'attr': {'class': 'form-control'}}) }}
							</div>
						</div>

						<div class="bg-light p-3 rounded border border-dashed mb-4">
							<div class="d-flex align-items-center">
								<div class="me-4 text-center">
									<div class="rounded-circle border border-4 border-white shadow-sm d-flex align-items-center justify-content-center bg-white" style="width: 80px; height: 80px; overflow: hidden;">
										{% if app.user.photo %}
											{# Note : On utilise 'users_photos' pour pointer vers le dossier défini dans le contrôleur #}
											<img id="preview-img-profile" src="{{ asset('uploads/users/photo/' ~ app.user.photo) }}" class="w-100 h-100" style="object-fit: cover;">
										{% else %}
											<i id="preview-icon-profile" class="fas fa-user fa-2x text-light"></i>
											<img id="preview-img-profile" src="" class="w-100 h-100 d-none" style="object-fit: cover;">
										{% endif %}
									</div>
								</div>
								<div class="flex-grow-1">
									{{ form_label(form.photo, 'Changer la photo de profil', {'label_attr': {'class': 'small fw-bold text-primary mb-1'}}) }}
									{{ form_widget(form.photo, {'attr': {'class': 'form-control form-control-sm', 'onchange': 'handleImagePreview(this)'}}) }}

									{% if form.delete_photo is defined %}
										<div class="form-check mt-2">
											{{ form_widget(form.delete_photo, {'attr': {'class': 'form-check-input'}}) }}
											{{ form_label(form.delete_photo, 'Supprimer la photo actuelle', {'label_attr': {'class': 'form-check-label text-danger small'}}) }}
										</div>
									{% endif %}
								</div>
							</div>
						</div>

						<hr class="my-4 opacity-25">

						<h6 class="fw-bold text-uppercase text-primary mb-3 small">
							<i class="fas fa-lock me-2"></i>Sécurité du compte
						</h6>

						{% if form.change_password is defined %}
							<div class="form-check form-switch mb-3">
								{{ form_widget(form.change_password, {'attr': {'class': 'form-check-input', 'onchange': 'togglePasswordFields(this)'}}) }}
								{{ form_label(form.change_password, 'Modifier mon mot de passe', {'label_attr': {'class': 'form-check-label fw-bold small text-primary'}}) }}
							</div>
						{% endif %}

						<div id="password-fields-container" class="row g-3 mb-4 d-none">
							<div class="col-md-6">
								{{ form_label(form.password.first, 'Nouveau mot de passe', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.password.first, {'attr': {'class': 'form-control'}}) }}
							</div>
							<div class="col-md-6">
								{{ form_label(form.password.second, 'Confirmer le mot de passe', {'label_attr': {'class': 'small fw-bold'}}) }}
								{{ form_widget(form.password.second, {'attr': {'class': 'form-control'}}) }}
							</div>
						</div>

						<div class="mt-4 text-end pt-3 border-top">
							<button type="submit" class="btn btn-primary px-5 fw-bold shadow-sm">
								<i class="fas fa-save me-2"></i>Enregistrer les modifications
							</button>
						</div>

						<div class="d-none">
							{{ form_rest(form) }}
						</div>
						{{ form_end(form) }}
					</div>
				</div>
			</div>

			{# --- COLONNE DROITE : RÉSUMÉ --- #}
			<div class="col-lg-3">
				<div class="card border-0 bg-light p-3 shadow-sm sticky-top" style="top: 20px;">
					<h6 class="fw-bold small mb-3">
						<i class="fas fa-info-circle text-primary me-2"></i>Résumé du compte
					</h6>

					<div class="text-center py-2 mb-3">
						<div class="badge bg-white border text-primary px-3 py-2 rounded-pill text-uppercase mb-2 shadow-sm w-100">
							{{ app.user.roles[0]|replace({'ROLE_': ''}) }}
						</div>
						<p class="small text-muted mb-0">Membre depuis le</p>
						<p class="small fw-bold">{{ app.user.createdAt ? app.user.createdAt|date('d/m/Y') : 'N/A' }}</p>
					</div>

					<div class="border-top pt-3 mb-3">
						<p class="small fw-bold mb-2">Sécurité :</p>
						<ul class="list-unstyled small text-muted mb-0">
							<li>
								<i class="fas fa-shield-alt text-success me-1"></i>
								Double authentification</li>
							<li>
								<i class="fas fa-key text-success me-1"></i>
								Cryptage AES-256</li>
						</ul>
					</div>

					<div class="mt-auto border-top pt-3">
						<p class="small text-muted italic mb-0">
							Pour modifier votre rôle ou vos accès, veuillez contacter l'administrateur système.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		(function () {
'use strict'
// Validation Bootstrap
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (! form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
const firstError = form.querySelector(':invalid');
if (firstError) {
firstError.scrollIntoView({behavior: 'smooth', block: 'center'});
}
}
form.classList.add('was-validated')
}, false)
})
})()

// Toggle Password Fields
window.togglePasswordFields = function (checkbox) {
const container = document.getElementById('password-fields-container');
if (container) {
if (checkbox.checked) {
container.classList.remove('d-none');
container.querySelectorAll('input').forEach(input => input.setAttribute('required', 'required'));
} else {
container.classList.add('d-none');
container.querySelectorAll('input').forEach(input => {
input.removeAttribute('required');
input.value = '';
});
}
}
};

// Image Preview
window.handleImagePreview = function (input) {
if (input.files && input.files[0]) {
const reader = new FileReader();
reader.onload = e => {
const img = document.getElementById('preview-img-profile');
const icon = document.getElementById('preview-icon-profile');
if (img) {
img.src = e.target.result;
img.classList.remove('d-none');
}
if (icon) 
icon.classList.add('d-none');

};
reader.readAsDataURL(input.files[0]);
}
};
	</script>
{% endblock %}