{% extends "/pro/base.html.twig" %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="/assets/css/partner/inscription.css">
<link rel="stylesheet" href="/assets/css/partner/preinscription.css">
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% endblock %}
{% block body %}
{{ parent() }}
{% endblock %}
{% block content %}
{{ parent() }}
<section class="body-preinscription">
<div class="container">
<div class="header-left">
<a href="/pro"><img class="logo logopro" src="/assets/img/header/logo.png" alt="My Audio"></a>
</div>
<div class="logo-wrapper">
<div >
<a href="/pro"><img src="/assets/img/header/logo.png" alt="My Audio"></a>
</div>
<div >
<h2>partenaire</h2>
</div>
<div >
<a href="/pro"><img src="/assets/img/header/cda.png" alt="My Audio"></a>
</div>
</div>
<div class="content-box">
<h2>Avec My Audio développez votre <br> centre auditif à pleine puissance</h2>
<p>Remplissez le formulaire de Pré-inscription dès à présent et <br>bénéficiez de l'offre exclusive du partenariat My Audio X CDA</p>
<h2 class="tag">Tarif My Audio X CDA</h2>
<p>Choisissez la formule qui convient à votre mode de fonctionnement :</p>
<div class="plans">
<div class="plans-wrapper">
<div>
<input type="radio" id='Multi-Centres' name="plan" value="Multi-Centres" style="display: none">
<label class="fakeLabel " for="Multi-Centres">
<img src="/assets/img/multi-center.png" />
<div>
<h3>Multi-Centres</h3>
<p>Pour les audioprothésistes qui exercent sur un ou plusieurs centres auditifs</p>
</div>
</label>
</div>
<div>
<input type="radio" id ='Multi-Audios' name="plan" value="Multi-Audios" style="display: none">
<label class="fakeLabel " for="Multi-Audios">
<img src="/assets/img/multi-audio.png" />
<div>
<h3> Multi-Audios</h3>
<p>Pour les centres auditifs qui ont un ou plusieurs audioprothésistes au sein du même centre</p>
</div>
</label>
</div>
</div>
<div class="plans-display">
<div id="planA" style="display: none;">
<p class="text-center">Sélectionnez le nombre de centres où vous exercez</p>
<div class="box">
<div class="tarif-box">
<h3>Tarif standard</h3>
<div>
900 HT/an <br> 1 centre inclus
</div>
<div>
1001 HT/an 2 <br> centres inclus
</div>
<div>
1102.1 HT/an <br>3 centres inclus
</div>
</div>
<div class="tarif-box-info">
<h3>Remise</h3>
<div>
<div class="price">
<div class="prx">-101€</div>
<div class="remise">soit -11%</div>
</div>
</div>
<div>
<div class="price">
<div class="prx">-202€</div>
<div class="remise">soit -21%</div>
</div>
</div>
<div>
<div class="price">
<div class="prx">-303€</div>
<div class="remise">soit -28%</div>
</div>
</div>
</div>
<div class="tarif-box">
<h3>Tarif My audio X CDA</h3>
<div>
<input type="radio" id="tarifPlan" name="tarifPlan" value="1 centre" style="display: none">
<label class="fakeLabel " for="tarifPlan" >
799 HT/an <br> 1 centre inclus
</label>
</div>
<div>
<input type="radio" id="tarifPlan2" name="tarifPlan" value="2 centres" style="display: none">
<label class="fakeLabel " for="tarifPlan2" >
799 HT/an <br> 2 centres inclus
</label>
</div>
<div>
<input type="radio" id="tarifPlan3" name="tarifPlan" value="3 centres" style="display: none">
<label class="fakeLabel " for="tarifPlan3">
799 HT/an <br> 3 centres inclus
</label>
</div>
</div>
</div>
</div>
<div id="planB" style="display: none;">
<p class="text-center">Sélectionnez le nombre d'audioprothésiste(s) dans votre centre</p>
<div class="box">
<div class="tarif-box">
<h3>Tarif standard</h3>
<div>
900 HT/an <br> 1 Audio inclus
</div>
<div>
1001.1 HT/an 2 <br> Audios inclus
</div>
<div>
1302.1 HT/an <br>3 Audios inclus
</div>
</div>
<div class="tarif-box-info">
<h3>Remise</h3>
<div>
<div class="price">
<div class="prx">-101€</div>
<div class="remise">soit -11%</div>
</div>
</div>
<div>
<div class="price">
<div class="prx">-302.1€</div>
<div class="remise">soit -28%</div>
</div>
</div>
<div>
<div class="price">
<div class="prx">-503€</div>
<div class="remise">soit -39%</div>
</div>
</div>
</div>
<div class="tarif-box">
<h3>Tarif My audio X CDA</h3>
<div>
<input type="radio" id="tarifaudio" name="tarifPlan" value="1 Audio" style="display: none">
<label class="fakeLabel " for="tarifaudio" >
799 HT/an <br> 1 Audio inclus
</label>
</div>
<div>
<input type="radio" id="tarifaudio2" name="tarifPlan" value="2 Audios" style="display: none">
<label class="fakeLabel " for="tarifaudio2" >
799 HT/an <br> 2 Audios inclus
</label>
</div>
<div>
<input type="radio" id="tarifaudio3" name="tarifPlan" value="3 Audios" style="display: none">
<label class="fakeLabel " for="tarifaudio3">
799 HT/an <br> 3 Audios inclus
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="offre-info" style="display:none">Complétez le formulaire de pré-inscription et bénéficiez de ces remises exceptionnelles Offre limitée</p>
<h2 class="tag">Pré-inscription My Audio Pro</h2>
</div>
<form id="preInscription" class="preInscriptionForm" >
<div class="card">
<img class="Iimage" src="/assets/img/preinscriptionimg.png" alt="My Audio">
<div class="checkbox-form checkCivilite">
<div>
<input type="radio" id="madame" name="civility" value="Madame" style="display: none">
<label class="fakeLabel right" for="madame">Madame</label>
</div>
<div>
<input type="radio" id="monsieur" name="civility" value="Monsieur" style="display: none">
<label class="fakeLabel right" for="monsieur">Monsieur</label>
</div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="text" id="firstName" name="firstName" placeholder="Nom"></div>
<div><input class="form-control borderBottom" type="text" id="lastName" name="lastName" placeholder="Prénom"></div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="text" id="centerPhone" name="centerPhone" placeholder="Téléphone du centre:"></div>
<div> <input class="form-control borderBottom" type="text" id="mobilePhone" name="mobilePhone" placeholder="Téléphone portable:"></div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="email" id="email" name="email" placeholder="Email:" ></div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="text" id="centerAddress" name="centerAddress" placeholder="Adresse du centre:"></div>
<div> <input class="form-control borderBottom" type="text" id="postalCode" name="postalCode" placeholder="Code postale:"></div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="text" id="city" name="city" placeholder="Ville:"></div>
<div> <input class="form-control borderBottom" type="text" id="finessNumber" name="finessNumber" placeholder="Finess:"></div>
</div>
<div class="inputs-wrapper">
<div> <input class="form-control borderBottom" type="text" id="website" name="website" placeholder="Site web:"></div>
<div> <input class="form-control borderBottom" type="text" id="adeliNumber" name="adeliNumber" placeholder="ADELIE:"></div>
</div>
<div class="checkbox-wrapper">
<label for="prestation" class="presentation">Prestation et prises en charge:</label>
<div class="inputs-wrapper">
<div>
<input type="checkbox" id="carteVitale" name="prestation[]" value="Carte vitale acceptee" style="display: none">
<label class="fakeLabel" for="carteVitale">Carte vitale acceptée</label>
<input type="checkbox" id="tiersPayantMutuelleS" name="prestation[]" value="Offre 100% Sante - Rac 0€" style="display: none">
<label class="fakeLabel" for="tiersPayantMutuelleS">Offre 100% Santé - Rac 0€</label>
</div>
<div>
<input type="checkbox" id="tiersPayantSS" name="prestation[]" value="Tiers-payant Securite-sociale" style="display: none">
<label class="fakeLabel" for="tiersPayantSS">Tiers-payant Sécurité sociale</label>
<input type="checkbox" id="tiersPayantMutuelle" name="prestation[]" value="Tiers-payant mutuelle" style="display: none">
<label class="fakeLabel" for="tiersPayantMutuelle">Tiers-payant mutuelle</label>
</div>
</div>
</div>
<div class="card">
<div >
<input type="checkbox" id="managerYes" name="isManager" value="yes" style="display: none">
<label class="fakeLabel right" for="managerYes">Si l'audioprothésiste du centre est également le gérant de l'entreprise, cocher la case:</label>
</div>
<br>
<label class="fakeLabel right">Si l'audioprothésiste du centre est différant du gérant de l'entreprise, remplir les éléments ci-dessous</label>
<div class="checkbox-form checkCivilite">
<div>
<input type="radio" id="managerMadame" name="managerCivility" value="Madame" style="display: none">
<label class="fakeLabel right" for="managerMadame">Madame</label>
</div>
<div>
<input type="radio" id="managerMonsieur" name="managerCivility" value="Monsieur" style="display: none">
<label class="fakeLabel right" for="managerMonsieur">Monsieur</label>
</div>
</div>
<input class="form-control borderBottom" type="text" id="managerFirstName" name="managerFirstName" placeholder="Nom">
<input class="form-control borderBottom" type="text" id="managerLastName" name="managerLastName" placeholder="Prénom">
<input class="form-control borderBottom" type="text" id="managerMobilePhone" name="managerMobilePhone" placeholder="Téléphone portable:">
<input class="form-control borderBottom" type="email" id="managerEmail" name="managerEmail" placeholder="Email:" >
</div>
</div>
<button type="submit" class="form-wizard-submit btn btn-vert-inverse">Valider votre pré-inscription
</form>
</div>
</section>
<script>
document.getElementById('managerYes').addEventListener('change', function() {
if (this.checked) {
var selectedCivility = document.querySelector('input[name="civility"]:checked');
if (selectedCivility) {
var selectedCivility = document.querySelector('input[name="civility"]:checked').value;
// Set the manager civility based on the selected civility
if (selectedCivility === 'Madame') {
document.getElementById('managerMadame').checked = true;
} else if (selectedCivility === 'Monsieur') {
document.getElementById('managerMonsieur').checked = true;
}
}
// Checkbox is checked, populate manager fields
document.getElementById('managerFirstName').value = document.getElementById('firstName').value;
document.getElementById('managerLastName').value = document.getElementById('lastName').value;
document.getElementById('managerMobilePhone').value = document.getElementById('mobilePhone').value;
document.getElementById('managerEmail').value = document.getElementById('email').value;
} else {
// Checkbox is unchecked, clear manager fields
document.getElementById('managerMadame').checked = false;
document.getElementById('managerMonsieur').checked = false;
document.getElementById('managerFirstName').value = '';
document.getElementById('managerLastName').value = '';
document.getElementById('managerMobilePhone').value = '';
document.getElementById('managerEmail').value = '';
}
});
$(document).ready(function() {
var civility = $('input[name="civility"]');
$(civility).closest('.checkbox-form').addClass('required');
var isManager = $('input[name="isManager"]');
$(isManager).closest('div').addClass('required left');
var inputs = {
civility: $('input[name="civility"]:checked').val(),
firstName: $('#firstName').val(),
lastName: $('#lastName').val(),
centerPhone: $('#centerPhone').val(),
mobilePhone: $('#mobilePhone').val(),
email: $('#email').val(),
centerAddress: $('#centerAddress').val(),
postalCode: $('#postalCode').val(),
city: $('#city').val(),
finessNumber: $('#finessNumber').val(),
adeliNumber: $('#adeliNumber').val()
};
var requiredFields = ['firstName', 'lastName','adeliNumber', 'centerPhone', 'mobilePhone', 'email', 'centerAddress', 'postalCode', 'city', 'finessNumber'];
var isValid = true;
requiredFields.forEach(function(fieldName) {
$('#' + fieldName).closest('div').addClass('required');
});
$('input[type="radio"][name="plan"]').change(function() {
var selectedPlan = $(this).val();
if (selectedPlan === "Multi-Centres") {
$(".offre-info").hide();
$('#planA').show();
$('#planB').hide();
} else if (selectedPlan === "Multi-Audios") {
$('#planA').hide();
$(".offre-info").hide();
$('#planB').show();
}
});
$('input[name="tarifPlan"]').click(function(){
$(".offre-info").show();
});
$('#preInscription').submit(function(event) {
event.preventDefault();
var inputs = {
civility: $('input[name="civility"]:checked').val(),
firstName: $('#firstName').val(),
lastName: $('#lastName').val(),
centerPhone: $('#centerPhone').val(),
mobilePhone: $('#mobilePhone').val(),
email: $('#email').val(),
centerAddress: $('#centerAddress').val(),
postalCode: $('#postalCode').val(),
city: $('#city').val(),
finessNumber: $('#finessNumber').val(),
adeliNumber: $('#adeliNumber').val()
};
var requiredFields = ['firstName', 'lastName','adeliNumber', 'centerPhone', 'mobilePhone', 'email', 'centerAddress', 'postalCode', 'city', 'finessNumber'];
var isValid = true;
requiredFields.forEach(function(fieldName) {
$('#' + fieldName).addClass('required');
if (inputs[fieldName] === '') {
isValid = false;
$('#' + fieldName).addClass('emptyField');
} else {
$('#' + fieldName).removeClass('emptyField');
}
});
var civilityChecked = $('input[name="civility"]:checked').length > 0;
if (!civilityChecked) {
isValid = false;
$('.checkCivilite').addClass('emptyField');
} else {
$('.checkCivilite').removeClass('emptyField');
}
if (!isValid) {
return;
}
var civility = $('input[name="civility"]:checked').val();
var plan = $('input[name="plan"]:checked').val();
var tarifPlan = $('input[name="tarifPlan"]:checked').val();
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var centerPhone = $('#centerPhone').val();
var mobilePhone = $('#mobilePhone').val();
var email = $('#email').val();
var centerAddress = $('#centerAddress').val();
var postalCode = $('#postalCode').val();
var city = $('#city').val();
var finessNumber = $('#finessNumber').val();
var website = $('#website').val();
var prestation = $('input[name="prestation[]"]:checked').map(function() {
return this.value;
}).get();
var isManager = $('input[name="isManager"]:checked').val();
var managerCivility = $('input[name="managerCivility"]:checked').val();
var managerFirstName = $('#managerFirstName').val();
var managerLastName = $('#managerLastName').val();
var managerMobilePhone = $('#managerMobilePhone').val();
var adeliNumber = $('#adeliNumber').val();
var managerEmail = $('#managerEmail').val();
var jsonData = {
civility: civility,
plan: plan,
tarifPlan : tarifPlan,
firstName: firstName,
lastName: lastName,
centerPhone: centerPhone,
mobilePhone: mobilePhone,
email: email,
centerAddress: centerAddress,
postalCode: postalCode,
city: city,
finessNumber: finessNumber,
website: website,
prestation: prestation,
isManager: isManager,
managerCivility: managerCivility,
managerFirstName: managerFirstName,
managerLastName: managerLastName,
managerMobilePhone: managerMobilePhone,
adeliNumber: adeliNumber,
managerEmail: managerEmail
};
$.ajax({
type: 'POST',
url: BASE_API + 'create-partner-preinscription',
dataType: "json",
data: JSON.stringify(jsonData), // Convert JSON object to string
success: function(response) {
// Handle success response here
location.href="/preinscription-termine?prenom="+lastName;
},
error: function(xhr, status, error) {
// Handle error here
alert('Error:', error);
}
});
});
});
$(document).ready(function () {
$('.required input[placeholder]').each(function () {
var placeholderText = $(this).attr('placeholder');
var tempElement = $('<span>').text(placeholderText).css({
'visibility': 'hidden',
'font-family': $(this).css('font-family'),
'font-size': '20px',
});
$('body').append(tempElement);
var asteriskSpan = $('<span>').text('*');
$(this).parent().append(asteriskSpan);
var placeholderWidth = tempElement.outerWidth();
asteriskSpan.css('left', placeholderWidth + 5 + 'px');
tempElement.remove();
});
});
</script>
{% endblock %}