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

{% block page_title %}
	Editer l'EPCI {{ epci.suaNom }} | BO
{% endblock %}

{% block name_title_page_top %}
	<i class="fa-solid fa-building-columns"></i> EPCI
{% endblock %}

{% block real_page_content %}
<div class="container-fluid py-4">
	{# Barre d'action #}
	<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3 mb-4">
		<a href="{{ ea_url().setRoute('geolocale_epci') }}" class="btn btn-secondary">
			<i class="fas fa-arrow-left me-2"></i>Retour aux EPCI
		</a>
		<h4 class="mb-0 order-first order-sm-0 text-center flex-grow-1">
			<i class="fas fa-edit text-muted me-2"></i>Editer <strong>{{ epci.suaNom }}</strong>
		</h4>
		<button type="submit" form="epci-form" class="btn btn-success px-4">
			<i class="fas fa-save me-2"></i>Enregistrer
		</button>
	</div>

	<form id="epci-form" action="{{ ea_url().setRoute('geolocale_epci_edit', {"id": epci.suaId}) }}" method="POST" enctype="multipart/form-data">
		{# Section Informations generales #}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<h6 class="text-muted text-uppercase small fw-bold mb-4">
					<i class="fas fa-info-circle me-2"></i>Informations generales
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text" name="form[suaNom]" class="form-control" id="input-suaNom" placeholder="Nom de l'EPCI" value="{{ epci.suaNom }}" required>
							<label for="input-suaNom">Nom de l'EPCI</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text" name="form[suaNomCommunication|string]" class="form-control" id="input-suaNomCommunication" placeholder="Nom de communication" value="{{ epci.suaNomCommunication ?? '' }}">
							<label for="input-suaNomCommunication">Nom de communication</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="url" name="form[suaUrl|string]" class="form-control" id="input-suaUrl" placeholder="URL du site web" value="{{ epci.suaUrl ?? '' }}">
							<label for="input-suaUrl">URL du site web</label>
						</div>
					</div>
					<div class="col-12 col-md-6">
						<div class="form-floating">
							<input type="text" name="form[refExterne|string]" class="form-control" id="input-refExterne" placeholder="Reference externe (SIREN, etc.)" value="{{ epci.refExterne ?? '' }}">
							<label for="input-refExterne">Reference externe (SIREN)</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		{# Section Partenaire #}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<h6 class="text-muted text-uppercase small fw-bold mb-4">
					<i class="fas fa-handshake me-2"></i>Partenariat
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						<div class="form-check form-switch">
							{# Champ cache : une case decochee n'est pas postee, on force alors la valeur 0 #}
							<input type="hidden" name="form[suaLogoPartenaire|int]" value="0">
							<input class="form-check-input" type="checkbox" id="switch-suaLogoPartenaire" name="form[suaLogoPartenaire|int]" value="1" {% if epci.suaLogoPartenaire == 1 %} checked {% endif %}>
							<label class="form-check-label" for="switch-suaLogoPartenaire">
								<strong>Logo Partenaire</strong>
								<br><small class="text-muted">Afficher le logo sur les pages liees a cet EPCI</small>
							</label>
						</div>
					</div>
					<div class="col-12">
						<div class="form-floating">
							<textarea name="form[suaPhrasePartenaire|string]" class="form-control" id="textarea-suaPhrasePartenaire" style="height: 100px" placeholder="Phrase partenaire">{{ epci.suaPhrasePartenaire ?? '' }}</textarea>
							<label for="textarea-suaPhrasePartenaire">Phrase partenaire (affichee sous le logo)</label>
						</div>
					</div>
					<div class="col-12">
						<div class="form-floating">
							<input type="url" name="form[suaArticlePartenaire|string]" class="form-control" id="input-suaArticlePartenaire" placeholder="https://www.tamm-kreiz.bzh/mag/..." value="{{ epci.suaArticlePartenaire ?? '' }}">
							<label for="input-suaArticlePartenaire">Article du Mag « territoires partenaires » (lien « en savoir plus » sous le logo)</label>
						</div>
					</div>
				</div>
			</div>
		</div>

		{# Section Logo #}
		<div class="card shadow-sm border-0 mb-4">
			<div class="card-body p-4">
				<h6 class="text-muted text-uppercase small fw-bold mb-4">
					<i class="fas fa-image me-2"></i>Logo
				</h6>
				<div class="row g-4">
					<div class="col-12 col-md-6">
						{% include "components/_mediaManager.html.twig" with {
							media: {
								label: 'Logo EPCI',
								currentUrl: logoUrl,
								showOriginal: false,
								formFieldName: 'form[suaLogo]',
								deleteRoute: 'media_delete',
								deleteRouteParams: {typeEntite: 'geolocale_subdivision_autre', idEntity: epci.suaId, medType: 'Logo'}
							},
							modalId: 'deleteLogoModal'
						} %}
					</div>
				</div>
			</div>
		</div>
	</form>

	{# Section Statistiques #}
	{% if stats %}
	<div class="card shadow-sm border-0 mb-4">
		<div class="card-body p-4">
			<h6 class="text-muted text-uppercase small fw-bold mb-4">
				<i class="fas fa-chart-bar me-2"></i>Statistiques
			</h6>
			<div class="row g-3">
				<div class="col-6 col-md-4 col-lg">
					<div class="text-center p-3 bg-light rounded">
						<div class="fs-3 fw-bold text-primary">{{ stats.communes ?? 0 }}</div>
						<small class="text-muted">Communes</small>
					</div>
				</div>
				<div class="col-6 col-md-4 col-lg">
					<div class="text-center p-3 bg-light rounded">
						<div class="fs-3 fw-bold text-success">{{ stats.acteurs ?? 0 }}</div>
						<small class="text-muted">Acteurs</small>
					</div>
				</div>
				<div class="col-6 col-md-4 col-lg">
					<div class="text-center p-3 bg-light rounded">
						<div class="fs-3 fw-bold text-info">{{ stats.evenements ?? 0 }}</div>
						<small class="text-muted">Evenements {{ "now"|date("Y") }}</small>
					</div>
				</div>
				<div class="col-6 col-md-4 col-lg">
					<div class="text-center p-3 bg-light rounded">
						<div class="fs-3 fw-bold text-secondary">{{ stats.evenementsN1 ?? 0 }}</div>
						<small class="text-muted">Evenements {{ "now"|date("Y") - 1 }}</small>
					</div>
				</div>
				<div class="col-6 col-md-4 col-lg">
					<div class="text-center p-3 bg-light rounded">
						<div class="fs-3 fw-bold text-warning">{{ stats.lieux ?? 0 }}</div>
						<small class="text-muted">Lieux</small>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% endif %}

	{# Section Villes liees #}
	<div class="card shadow-sm border-0 mb-4">
		<div class="card-body p-4">
			<a data-bs-target="#villes-collapse" data-bs-toggle="collapse" class="text-decoration-none collapsed d-flex align-items-center justify-content-between">
				<h6 class="text-muted text-uppercase small fw-bold mb-0">
					<i class="fas fa-city me-2"></i>Communes ({{ villes|length }})
				</h6>
				<i class="fas fa-fw fa-chevron-down text-muted"></i>
			</a>
			<div class="collapse mt-4" id="villes-collapse">
				{% if villes is empty %}
					<div class="alert alert-info mb-0">
						<i class="fas fa-info-circle me-2"></i>Aucune ville n'est liee a cet EPCI.
						<br><small class="text-muted">Pour lier une ville, modifiez la ville et selectionnez cet EPCI dans le champ correspondant.</small>
					</div>
				{% else %}
					<div class="table-responsive">
						<table class="table table-hover align-middle mb-0">
							<thead class="table-light">
								<tr>
									<th>Nom</th>
									<th>Code Postal</th>
									<th class="text-end">Actions</th>
								</tr>
							</thead>
							<tbody>
								{% for ville in villes %}
									<tr>
										<td><span class="fw-medium">{{ ville.vilNom }}</span></td>
										<td>{{ ville.vilCodepostal ?? '-' }}</td>
										<td class="text-end">
											<a href="{{ ea_url().setRoute('geolocale_villes_edit', {'id': ville.vilId}) }}"
											   class="text-primary"
											   data-bs-toggle="tooltip"
											   title="Modifier">
												<i class="fas fa-edit"></i>
											</a>
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				{% endif %}
			</div>
		</div>
	</div>

	{# Section Historique #}
	{% include "components/_logsUniqueEntity.html.twig" %}
</div>
{% endblock %}