{% extends 'base.html.twig' %}
{% block body %}
<div class="header-page">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="sub-menu">
<div class="link">
<a href="{{ path('customer_list') }}">Particuliers</a>
<span class="seperate">></span>
{% if typeForm == 'Modifier' %}
<span class="text">Modifier la fiche</span>
{% else %}
<span class="text">Ajouter un particulier</span>
{% endif %}
</div>
<div class="link-button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container small">
<div class="row">
<div class="col-12">
<div class="update-form user-type">
<div class="form-content">
{% if typeForm == "Modifier" %}
{{ form_start(form, { 'action': path('customer_update', {'userID': user.id }) }) }}
{% else %}
{{ form_start(form, { 'action': path('customer_update', {'userID': userID }) }) }}
{% endif %}
<div class="panel">
<div class="panel-header">
<div class="title">Profil</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.firstName) }}
{{ form_widget(form.firstName) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.lastName) }}
{{ form_widget(form.lastName) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group select">
{{ form_label(form.sex) }}
{{ form_widget(form.sex) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.dateDeNaissance) }}
{{ form_widget(form.dateDeNaissance) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{% if form.adherentDistributeur.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.adherentDistributeur.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_label(form.adherentDistributeur) }}
{% if seller.numeroSiren == siretFilter %}
{{ form_widget(form.adherentDistributeur, { 'attr': { 'class': 'numero-adherent-filter' } }) }}
{% else %}
{{ form_widget(form.adherentDistributeur) }}
{% endif %}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<div class="title">Coordonnées</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group select">
{% if form.phone.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.phone.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_label(form.phone) }}
<div class="row">
<div class="col-12 col-lg-4 pr-lg-1">
{{ form_widget(form.phonePrefix) }}
</div>
<div class="col-12 col-lg-8 pl-lg-1">
{{ form_widget(form.phone) }}
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row search_api_content">
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.numeroDeVoie) }}
{{ form_widget(form.numeroDeVoie) }}
<div class="select_address_api"></div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.codePostal) }}
{{ form_widget(form.codePostal) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.ville) }}
{{ form_widget(form.ville) }}
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="form-group">
{{ form_label(form.pays) }}
{{ form_widget(form.pays) }}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">
<div class="title">Préférences de communication</div>
</div>
<div class="panel-body">
<div class="panel-infos">
<div class="row align-items-center">
<div class="col-12 col-lg-12">
<div class="title">{{ form_label(form.methodForSignEmail) }}</div>
<div class="description">Ne choisissez “email” que si l’adhérent vous indique ne pas avoir de numéro joignable au moment de la signature électronique</div>
</div>
<div class="col-12 col-lg-12">
<div class="form-group radio-form">
{% if form.methodForSignEmail.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.methodForSignEmail.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_widget(form.methodForSignEmail) }}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<hr class="full">
<div class="row align-items-center">
<div class="col-12 col-lg-12">
<div class="title">{{ form_label(form.acceptRecevoirDocumentGarantieEmail) }}</div>
</div>
<div class="col-12 col-lg-12">
<div class="form-group radio-form">
{% if form.acceptRecevoirDocumentGarantieEmail.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptRecevoirDocumentGarantieEmail.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_widget(form.acceptRecevoirDocumentGarantieEmail) }}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<hr class="full">
<div class="title">Propositions commerciales</div>
<div class="row align-items-center">
<div class="col-12 col-lg-8">
<div class="title-titre"><label>Souhaitez-vous recevoir des propositions commerciales de la part de MER par <b>courrier électronique</b></label></div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group radio-form">
{% if form.acceptPropositionCommercialEmail.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptPropositionCommercialEmail.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_widget(form.acceptPropositionCommercialEmail) }}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-12 col-lg-8">
<div class="label-title"><label>Souhaitez-vous recevoir des propositions commerciales de la part de MER par <b>téléphone</b> ?</label></div>
</div>
<div class="col-12 col-lg-4">
<div class="form-group radio-form">
{% if form.acceptPropositionCommercialTelephone.vars.attr['data-tooltip'] %}
<div class="img-tooltip">
<img src="{{ asset('img/Shape.svg') }}" alt="shape" class="tooltip-description" data-placement="top" title="{{ form.acceptPropositionCommercialTelephone.vars.attr['data-tooltip'] }}">
</div>
{% endif %}
{{ form_widget(form.acceptPropositionCommercialTelephone) }}
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="links-footer mt-4 pt-1 text-right">
<a href="{{ path('customer_list') }}"><button type="button" class="button red">Annuler</button></a> {{ form_widget(form.save) }}
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
let dateStart;
$('.tooltip-description').tooltip();
$(document).ready( function () {
$('form').validator();
$(".phone-control").inputmask({"mask": "99 99 99 99 99"});
$('.select-2').select2();
$("#user_phonePrefix").change(function(){
if($(this).val() == "+33"){
$(".phone-control").inputmask({"mask": "99 99 99 99 99"});
}
else{
$(".phone-control").inputmask('remove');
}
});
dateNaissance = $("#user_dateDeNaissance");
Mask.newMask({
$el: dateNaissance,
mask: 'DD/MM/YYYY',
errorFunction: function(isValid, input){
if(isValid == false){
dateNaissance.css("border-color", "red");
}
else{
dateNaissance.css("border-color", "#ccc");
}
},
hidePlaceholder: true,
isUtc: true
});
$(".numero-adherent-filter").keyup(function() {
if($(this).val().length < 8){
$(this).css("border-color", "red");
$(this).parents(".form-group").addClass("error");
$(this).parents(".form-group").find(".with-errors").text("Le nombre de caractère doit être au minimum de 8.");
}
else{
$(this).css("border-color", "#ccc");
$(this).parents(".form-group").removeClass("error");
$(this).parents(".form-group").find(".with-errors").text("");
}
});
//Search on .gouv address
$(".search_api").keyup(function() {
var contentSearch = $(this).val();
var parent = $(this).parents(".search_api_content");
if(contentSearch.length >= 4){
console.log("searching");
parent.find(".select_address_api").html("");
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/",
data: {
'q': contentSearch
},
type:"get",
cache: false,
success:function(data){
addressSearchApis = data.features;
//Add items in dropdown
$.each(data.features, function( index, value ) {
parent.find(".select_address_api").append("<div data-key='" + index + "' class='item'> " + value.properties.label + "</div>");
});
//Show dropdown
if(data && data.features.length > 0){
parent.find(".select_address_api").addClass("active");
}
else{
parent.find(".select_address_api").removeClass("active");
}
}
})
}
else{
console.log("no found");
parent.find(".select_address_api").removeClass("active");
}
});
$(document).mouseup(function(e)
{
var containerSelectAddressApi = $(".search_api_content .select_address_api");
// if the target of the click isn't the container nor a descendant of the container
if (!containerSelectAddressApi.is(e.target) && containerSelectAddressApi.has(e.target).length === 0)
{
$(".search_api_content .select_address_api").removeClass("active");
}
});
$(".search_api_content .select_address_api").on("click", ".item", function() {
var index = $(this).attr("data-key");
var addressSearch = addressSearchApis[index];
var parent = $(this).parents(".search_api_content");
parent.find(".search_api").val(addressSearch.properties.name);
parent.find(".code_postal_api").val(addressSearch.properties.postcode);
parent.find(".ville_api").val(addressSearch.properties.city);
parent.find(".pays_api").val("France");
parent.find(".select_address_api").removeClass("active");
checkInputByPanel($(this).parents(".step").attr("id"));
});
} );
</script>
{% endblock %}