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

{% block title %}Ajouter informations chantier
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
{% endblock %}


{% block body %}
<div
	class="content-page">
	<div
		class="content">
		<!-- Start Content-->
		<div
			class="container-fluid">
			<div
				class="row">
				<div
					class="col-12">
					<div
						class="page-title-box">
						<h1>Ajouter un avenant</h1>
						{% if form.vars.errors|length > 0 %}
							<div
								class="alert alert-danger">
								<ul>
									{% for error in form.vars.errors %}
										<li>{{ error.message }}</li>
									{% endfor %}
								</ul>
							</div>
						{% endif %}

						{{ form_start(form) }}

						<div
							class="form-group">
							{{ form_label(form.chantier, 'Chantier') }}
							{{ form_widget(form.chantier, {'attr': {'class': 'form-control autocomplete', 'data-autocomplete-url': form.chantier.vars.attr['data-autocomplete-url']}}) }}
							{{ form_errors(form.chantier) }}
						</div>

						{# Champ caché HTML manuel pour stocker l'ID du chantier #}
						<input
							type="hidden"
							id="chantier_id"
							name="chantier_id"
							value="">

						<div
							class="mb-3">
							{{ form_label(form.montant, null, {'label_attr': {'class': 'form-label'}}) }}*
							{{ form_widget(form.montant, {'attr': {'class': 'form-control', 'placeholder': 'Saisir le montant'}}) }}
						</div>

						<div
							class="mb-3">
							{{ form_label(form.date, null, {'label_attr': {'class': 'form-label'}}) }}*
							{{ form_widget(form.date, {'attr': {'class': 'form-control', 'placeholder': 'Choisir une date'}}) }}
						</div>

						<div
							class="mb-3">
							{{ form_label(form.designation, null, {'label_attr': {'class': 'form-label'}}) }}*
							{{ form_widget(form.designation, {'attr': {'class': 'form-control', 'placeholder': 'Désignation de l\'avenant'}}) }}
                        </div>

                        <div class="mt-4">
                           <button
					type="submit"
					class="btn btn-primary mt-3">Enregistrer</button>
                        </div>
                    </div>
                </div>
            </div>
				{{ form_end(form) }}
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
document.addEventListener("DOMContentLoaded", function () {
    const autocompleteFields = document.querySelectorAll('.autocomplete');

    autocompleteFields.forEach(field => {
        const url = field.getAttribute('data-autocomplete-url');
        console.log(`Initializing autocomplete for field with URL: ${url}`);

        field.addEventListener('input', function () {
            const query = this.value;
            console.log(`Input detected in ${field.name}: ${query}`);

            if (query.length > 1) {
                fetch(`${url}?query=${query}`)
                    .then(response => {
                        console.log(`Response received from ${url} with status: ${response.status}`);
                        return response.json();
                    })
                    .then(data => {
                        console.log("Autocomplete data received:", data);

                        let resultsContainer = field.nextElementSibling;
                        if (!resultsContainer || !resultsContainer.classList.contains('autocomplete-results')) {
                            resultsContainer = document.createElement('div');
                            resultsContainer.classList.add('autocomplete-results');
                            field.parentNode.appendChild(resultsContainer);
                        }

                        resultsContainer.innerHTML = '';

                        data.forEach(item => {
                            const resultItem = document.createElement('div');
                            resultItem.classList.add('autocomplete-item');
                            resultItem.textContent = item.text;
                            resultItem.addEventListener('click', () => {
                                field.value = item.text;
                                
                                // Mettez à jour le champ caché avec l'ID sélectionné
                                const chantierIdField = document.getElementById('chantier_id');
                                chantierIdField.value = item.id;
                                console.log(`Set chantier_id to: ${item.id}`);
                                
                                resultsContainer.innerHTML = '';
                            });
                            resultsContainer.appendChild(resultItem);
                        });
                    })
                    .catch(error => console.error("Error during autocomplete fetch:", error));
            }
        });
    });
});


</script>

{% endblock %}