{# templates/agent/formulaire/add.html.twig #}
{% extends 'agent/agent_base.html.twig' %}

{% block title %}Formulaires{% endblock %}


{% block content %}
<div class="container-fluid">
   
	
	<h3 class="mb-5">Saisir un formulaire</h3>
	
    {# Affichage des messages flash #}
        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                {{ message }}
                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
		
		<div class="row">
			<div class="col-md-9 offset-md-1">
				<div class="card p-4 mb-5 border-success">
					
					<div class="row align-items-center">
						<div class="col-md-4">
							{# Bouton de Téléchargement de la Template #}
							<a href="{{ path('app_agent_formulaire_download_template', {'id': formulaire.id}) }}" class="btn btn-outline-success w-100">
								<i class="fas fa-download"></i> Télécharger le modèle
							</a>
						</div>
						
						<div class="col-md-8">
							{# Formulaire d'Upload de Fichier - CORRECTION DE L'ACTION #}
							{{ form_start(excelForm, {
								'attr': {'id': 'excelUploadForm', 'enctype': 'multipart/form-data'}, 
								'action': path('app_agent_formulaire_add_excel_process', {'id': formulaire.id}) 
							}) }}
								<div class="input-group">
									{{ form_widget(excelForm.file, {'attr': {'class': 'form-control', 'aria-describedby': 'upload-btn'}}) }}
									<button type="submit" class="btn btn-success" id="upload-btn">
										<i class="fas fa-upload"></i> Uploader
									</button>
								</div>
								{# Afficher les erreurs spécifiques au champ file #}
								{{ form_errors(excelForm.file) }} 
								{{ form_row(excelForm._token) }}
							{{ form_end(excelForm, {'render_rest': false}) }}
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-9 offset-md-1">
				<div id="formZone">
					<div id="volletDroitHeader" style="margin-bottom: 10px">
						<span>{{ formulaire.titre | upper }}</span>
					</div>

					{# Affichez directement le HTML passé par le contrôleur #}
					<div id="champZone">
						{{ htmlFormulaire | raw }}
					</div>

					<div style="height: 20px"></div>
				</div>
			</div>
			
			
		</div>

    <div style="text-align: center; margin: 10px 0">
        <a href="{{ path('app_agent_formulaire_index') }}" class="btn btn-secondary mt-3">
            <i class="glyphicon glyphicon-circle-arrow-left"></i> Retour à la liste
        </a>
    </div>
	</div>
{% endblock %}

{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Logique JavaScript pour les localités
            function attachSelectListeners() {
                const parentSelects = document.querySelectorAll('select[data-child-select], select[data-child-commune]');
                parentSelects.forEach(select => {
                    select.addEventListener('change', function() {
                        const parentId = this.value;

                        // Cas pour la hiérarchie standard
                        if (this.dataset.childSelect) {
                            const childSelectId = this.dataset.childSelect;
                            const ajaxUrl = this.dataset.ajaxUrl;
                            updateChildSelect(childSelectId, parentId, ajaxUrl);
                        }

                        // Cas pour la Sous-préfecture
                        if (this.dataset.childCommune || this.dataset.childVillage) {
                            const communeSelect = document.getElementById(this.dataset.childCommune);
                            const villageSelect = document.getElementById(this.dataset.childVillage);
                            const ajaxUrl = this.dataset.ajaxUrl;
                            const targetSelect = communeSelect || villageSelect;

                            if (!targetSelect) return;

                            targetSelect.innerHTML = '<option value="">-- Chargement en cours... --</option>';
                            targetSelect.disabled = true;

                            if (parentId) {
                                fetch(ajaxUrl + '/' + parentId)
                                    .then(response => response.json())
                                    .then(data => {
                                        if (communeSelect) {
                                            communeSelect.innerHTML = '<option value="">-- Sélectionner une commune --</option>';
                                            data.communes.forEach(item => {
                                                const option = document.createElement('option');
                                                option.value = item.id;
                                                option.textContent = item.nom;
                                                communeSelect.appendChild(option);
                                            });
                                            communeSelect.disabled = false;
                                        }

                                        if (villageSelect) {
                                            villageSelect.innerHTML = '<option value="">-- Sélectionner un village --</option>';
                                            data.villages.forEach(item => {
                                                const option = document.createElement('option');
                                                option.value = item.id;
                                                option.textContent = item.nom;
                                                villageSelect.appendChild(option);
                                            });
                                            villageSelect.disabled = false;
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Erreur lors du chargement des communes et villages:', error);
                                        if(communeSelect) communeSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                                        if(villageSelect) villageSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                                    });
                            } else {
                                if(communeSelect) {
                                    communeSelect.innerHTML = '<option value="">-- Sélectionner une commune --</option>';
                                    communeSelect.disabled = false;
                                }
                                if(villageSelect) {
                                    villageSelect.innerHTML = '<option value="">-- Sélectionner un village --</option>';
                                    villageSelect.disabled = false;
                                }
                            }
                        }
                    });
                });
            }

            // Fonction générique pour mettre à jour un sélecteur enfant.
            function updateChildSelect(childSelectId, parentId, ajaxUrl) {
                const childSelect = document.getElementById(childSelectId);
                if (!childSelect) return;

                childSelect.innerHTML = '<option value="">-- Chargement en cours... --</option>';
                childSelect.disabled = true;

                if (parentId) {
                    fetch(ajaxUrl + '/' + parentId)
                        .then(response => response.json())
                        .then(data => {
                            childSelect.innerHTML = '<option value="">-- Sélectionner --</option>';
                            data.forEach(item => {
                                const option = document.createElement('option');
                                option.value = item.id;
                                option.textContent = item.nom;
                                childSelect.appendChild(option);
                            });
                            childSelect.disabled = false;
                        })
                        .catch(error => {
                            console.error('Erreur lors du chargement des options:', error);
                            childSelect.innerHTML = '<option value="">-- Erreur de chargement --</option>';
                            childSelect.disabled = true;
                        });
                } else {
                    childSelect.innerHTML = '<option value="">-- Sélectionner --</option>';
                    childSelect.disabled = false;
                }
            }
            
            // Appelez la fonction pour attacher les écouteurs dès que le DOM est chargé
            attachSelectListeners();
        });
    </script>
{% endblock %}