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

{% block title %}Membre
{% endblock %}

{% block body %}
	{{ include("Simple/partials/titre.html.twig", {'titre':'Membre'} ) }}

<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Modifier certains informations d'un membre</h3> <br>                           
                        {{ form_start(form) }}
                            {{ form_row(form.matricule) }}
                            {{ form_row(form.nom_complet) }}
                            {{ form_row(form.cin) }}
                            {{ form_row(form.sexe) }}
                            {{ form_row(form.age) }}
                            {{ form_row(form.tel) }}
                            {{ form_row(form.nom_mobile_money) }}
                            {{ form_row(form.psh) }}
                            {{ form_row(form.email) }}
                            {{ form_row(form.fb) }}
                            {{ form_row(form.lien_drive) }}
                            {{ form_row(form.images) }}
							{% if imagesDeLaBase|length > 0 %}
								<div id="apercu_images" class="row mb-3">
									{% for image in imagesDeLaBase %}
										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 images-multiple existant-image">
											<div class="card">
												<div class="card-body">
													<img src={{ asset(imagesRepertoire ~'/'~ image.nom) }} alt={{ image.nom }} class="img-fluid" style="max-height: 120px; max-width: 200px">
													<div><a class="btn btn-danger btn-sm delete-btn" href="{{ path('app_image_delete', {'id':image.id}) }}" data-delete data-token="{{ csrf_token('delete' ~  image.id) }}"><i class="fas fa-trash"></i> Supprimer</a></div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							{% endif %}
                            {{ form_row(form.fonction) }}
                            {{ form_row(form.province) }}
                            {{ form_row(form.region) }}
                            {{ form_row(form.district) }}
                            {{ form_row(form.commune) }}
                            {{ form_row(form.fokontany) }}
                            {{ form_row(form.bv) }}
                            <button class="btn btn-success">Mettre à jour</button>
                        {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
	<script src="{{ asset('/assets/js/images.js')}}" defer ></script>
	<script src="{{ asset('/assets/js/insertion_image_multiple_edit.js')}}" defer ></script>
<script>
	let form_province = $('#membre_province');
	let membre_region = $('#membre_region');
    let membre_district = $('#membre_district');
	let membre_commune = $('#membre_commune');
	let membre_fokontany = $('#membre_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);
					membre_region.empty();

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

    membre_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);
					membre_district.empty();

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

    membre_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);
                membre_commune.empty();

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

    membre_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);
					membre_fokontany.empty();

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

	membre_fokontany.change(function() { 
		let fokontany_id = $(this).val();	
		console.log(fokontany_id)		
			$.ajax({
                type: "GET",
                url: "{{ path('rechercheBvParFokontany') }}",
                data: {
					fokontany_id : fokontany_id
				},
                success: function(donnee) {
                    console.log(1);
					membre_bv.empty();

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

    $(document).ready(function() {
		$('#membre_tel').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
			$('#telError').remove();
			
			if (telValue.length > 0) {
				if (!/^\d+$/.test(telValue)) {
					$('<div id="telError" 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('#membre_tel');
				} else if (!telRegex.test(telValue)) {
					$('<div id="telError" 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('#membre_tel');
				}
			} else {
				$('<div id="telError" 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('#membre_tel');
			}
		});

        $('#membre_cin').on('input', function() {
			var cinValue = $(this).val().trim();
			var cinRegex = /^\d{12}$/; // Expression régulière pour 10 chiffres exactement
			
			// Supprimer l'erreur précédente s'il y en a une
			$('#cinError').remove();
			
			if (cinValue.length > 0) {
				if (!/^\d+$/.test(cinValue)) {
					$('<div id="cinError" 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 CIN doit contenir uniquement des chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#membre_cin');
				} else if (!cinRegex.test(cinValue)) {
					$('<div id="cinError" 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 CIN doit contenir exactement 12 chiffres.</span>' +
						'</span>' +
					'</div>').insertBefore('#membre_cin');
				}
			} else {
				$('<div id="cinError" 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 CIN.</span>' +
					'</span>' +
				'</div>').insertBefore('#membre_cin');
			}
		});

		
	});
</script>
{% endblock %}