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

{% block title %}APP | Association
{% endblock %}

{% block body %}
	{{ include("Admin/partials/title.html.twig", {'name':'Association'} ) }}

		{{form_start(form)}}
		{{form_widget(form)}}
		<button type="submit" class="btn btn-success">Mettre à jour</button>
		{{form_end(form)}}
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>

	let form_province = $('#merge_entity_association_and_user_Association_province');
	let form_region = $('#merge_entity_association_and_user_Association_region');
	let form_district = $('#merge_entity_association_and_user_Association_district');
	let form_commune = $('#merge_entity_association_and_user_Association_commune');
	let form_fokontany = $('#merge_entity_association_and_user_Association_fokontany');

    form_province.change(function() { 
		let province_id = $(this).val();			
			$.ajax({
                type: "GET",
                url: "{{ path('rechercheRegionParProvince') }}",
                data: {
					province_id : province_id
				},
                success: function(donnee) {
                    console.log(donnee);
					form_region.empty();

				// Parcourir les données et ajouter de nouvelles options au formulaire select
				$.each(donnee, function(index, item) {
					form_region.append($('<option>', {
						value: item.id,
						text: item.label
					}));
				});
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
	});

    form_region.change(function() { 
		let region_id = $(this).val();			
			$.ajax({
                type: "GET",
                url: "{{ path('rechercheDistrictParRegion') }}",
                data: {
					region_id : region_id
				},
                success: function(donnee) {
                    console.log(donnee);
					form_district.empty();

				// Parcourir les données et ajouter de nouvelles options au formulaire select
				$.each(donnee, function(index, item) {
					form_district.append($('<option>', {
						value: item.id,
						text: item.label
					}));
				});
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
	});

	form_district.change(function() { 
		let district_id = $(this).val();			
			$.ajax({
                type: "GET",
                url: "{{ path('rechercheCommuneParDistrict') }}",
                data: {
					district_id : district_id
				},
                success: function(donnee) {
                    console.log(donnee);
					form_commune.empty();

				// Parcourir les données et ajouter de nouvelles options au formulaire select
				$.each(donnee, function(index, item) {
					form_commune.append($('<option>', {
						value: item.id,
						text: item.label
					}));
				});
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
	});
	
	form_commune.change(function() { 
		let commune_id = $(this).val();			
			$.ajax({
                type: "GET",
                url: "{{ path('rechercheFokontanyParCommune') }}",
                data: {
					commune_id : commune_id
				},
                success: function(donnee) {
                    console.log(donnee);
					form_fokontany.empty();

				// Parcourir les données et ajouter de nouvelles options au formulaire select
				$.each(donnee, function(index, item) {
					form_fokontany.append($('<option>', {
						value: item.id,
						text: item.label
					}));
				});
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
	});

	$(document).ready(function() {
		$('#association_tel1').on('input', function() {
			var telValue = $(this).val().trim();
			var telRegex = /^\d{10}$/; // Expression régulière pour 10 chiffres exactement
			
			// Supprimer l'erreur précédente s'il y en a une
			$('#tel1Error').remove();
			
			if (telValue.length > 0) {
				if (!/^\d+$/.test(telValue)) {
					$('<div id="tel1Error" class="invalid-feedback d-block">' +
						'<span class="d-block">' +
							'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
							'<span class="form-error-message">Le numéro de téléphone doit contenir uniquement des chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#association_tel1');
				} else if (!telRegex.test(telValue)) {
					$('<div id="tel1Error" class="invalid-feedback d-block">' +
						'<span class="d-block">' +
							'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
							'<span class="form-error-message">Le numéro de téléphone doit contenir exactement 10 chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#association_tel1');
				}
			} else {
				$('<div id="tel1Error" class="invalid-feedback d-block">' +
					'<span class="d-block">' +
						'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
						'<span class="form-error-message">Veuillez saisir un numéro de téléphone.</span>' +
					'</span>' +
				'</div>').insertBefore('#association_tel1');
			}
		});

		$('#association_tel2').on('input', function() {
			var telValue = $(this).val().trim();
			var telRegex = /^\d{10}$/; // Expression régulière pour 10 chiffres exactement
			
			// Supprimer l'erreur précédente s'il y en a une
			$('#tel2Error').remove();
			
			if (telValue.length > 0) {
				if (!/^\d+$/.test(telValue)) {
					$('<div id="tel2Error" class="invalid-feedback d-block">' +
						'<span class="d-block">' +
							'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
							'<span class="form-error-message">Le numéro de téléphone doit contenir uniquement des chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#association_tel2');
				} else if (!telRegex.test(telValue)) {
					$('<div id="tel2Error" class="invalid-feedback d-block">' +
						'<span class="d-block">' +
							'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
							'<span class="form-error-message">Le numéro de téléphone doit contenir exactement 10 chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#association_tel2');
				}
			}
		});

		 $('#association_email').on('input', function() {
			var emailValue = $(this).val().trim();
			var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Expression régulière pour un format d'email valide
			
			// Supprimer l'erreur précédente s'il y en a une
			$('#emailError').remove();
			
			if (emailValue.length === 0) {
				$('<div id="emailError" class="invalid-feedback d-block">' +
					'<span class="d-block">' +
						'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
						'<span class="form-error-message">Veuillez saisir votre adresse email.</span>' +
					'</span>' +
				'</div>').insertBefore('#association_email');
			} else if (!emailRegex.test(emailValue)) {
				$('<div id="emailError" class="invalid-feedback d-block">' +
					'<span class="d-block">' +
						'<span class="form-error-icon badge badge-danger text-uppercase">Error</span>' +
						'<span class="form-error-message">Veuillez saisir une adresse email valide.</span>' +
					'</span>' +
				'</div>').insertBefore('#association_email');
			}
		});
	});

</script>

	{% endblock %}