<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Register | Octo - Delsart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/delsart_logo.jpg">
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css"/>
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
<!-- App Css-->
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="account-pages my-5 pt-sm-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-5">
<div class="card overflow-hidden">
<div class="card-body pt-0">
<div>
<div class="mb-4">
<span class="">
<img src="assets/images/delsart_logo.jpg" alt=""
class="align-self-sm-start">
</span>
</div>
</div>
<div class="p-2">
<div class="form-horizontal">
<div class="mt-3 d-grid" id="buttonEstablishment">
<button class="btn btn-dark waves-effect waves-light" type="button" id="buttonClient" onclick="toggleForm(true)">
Je suis déjà client Delsart
</button>
<button class="btn btn-light waves-effect waves-light mt-2" type="button" id="buttonNewClient" onclick="toggleForm(false)">
Je ne suis pas encore client Delsart
</button>
</div>
<div class="mt-4 text-center">
<span><a href="/login" class="text-muted"><i class="mdi mdi-lock me-1"></i>Déjà inscrit ?</a></span>
</div>
</div>
{% if app.flashes('error') %}
<div class="alert alert-danger">
<span>Erreur dans les données introduites</span>
</div>
{% endif %}
</div>
<div id="clientCarousel" class="carousel slide" data-bs-interval="false" style="display:none;">
<div class="carousel-inner">
<!-- Section pour nouveau client avec choix d'établissement -->
<div class="carousel-item" id="newClient">
<h4>Choisissez une option</h4>
<div class="mt-3 d-grid" id="buttonEstablishment">
<button class="btn btn-dark waves-effect waves-light" type="button" id="buttonExistingEstablishment" onclick="showForm(true)">
Établissement existant
</button>
<button class="btn btn-light waves-effect waves-light mt-2" type="button" id="buttonProjectInProgress" onclick="showForm(false)">
Projet en cours
</button>
</div>
</div>
<div class="carousel-item active" id="existingClient">
<h4>Créez votre compte client pour un établissement existant</h4>
{{ form_start(registrationForm) }}
<form id="registrationForm" method="post">
<input type="hidden" id="isExistingEstablishment" name="isExistingEstablishment" value="false">
<div class="row">
<div class="col-lg-6">
{{form_label(registrationForm.firstname, 'Prénom' ,{'attr': {'class': 'form-label'}}) }}
{{form_widget(registrationForm.firstname, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre prénom'}})}}
</div>
<div class="col-lg-6">
{{form_label(registrationForm.lastname, 'Nom' ,{'attr': {'class': 'form-label'}}) }}
{{form_widget(registrationForm.lastname, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre nom'}})}}
</div>
</div>
<div class="col-lg-12 mt-2">
{{form_label(registrationForm.email, 'Email' ,{'attr': {'class': 'form-label'}}) }}
{{form_widget(registrationForm.email, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre email'}})}}
{{form_label(registrationForm.numberPhone, 'Numéro de téléphone' ,{'attr': {'class': 'form-label'}}) }}
{{ form_widget(registrationForm.numberPhone, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre numéro de téléphone'}}) }}
{{ form_label(registrationForm.plainPassword.first, 'Mot de Passe*', {'attr': {'class': 'form-label'}}) }}
{{ form_errors(registrationForm.plainPassword.first, {'attr': {'class': 'text-danger'}}) }}
<div class="input-group show-hide-password mb-3">
{{ form_widget(registrationForm.plainPassword.first, {'attr': {'class': 'form-control', 'placeholder': 'Entrez votre mot de passe', 'id': 'passwordField'}}) }}
<span class="input-group-text btn-yellow" id="password-addon" onclick="togglePasswordVisibility('registration_form_plainPassword_first', 'eyeIconFirst')">
<i class="mdi mdi-eye-outline" id="eyeIconFirst" aria-hidden="true" style="cursor: pointer;"></i>
</span>
</div>
{{ form_label(registrationForm.plainPassword.second, 'Confirmation*', {'attr': {'class': 'form-label'}}) }}
{{ form_errors(registrationForm.plainPassword.second, {'attr': {'class': 'text-danger'}}) }}
<div class="input-group show-hide-password mb-3">
{{ form_widget(registrationForm.plainPassword.second, {'attr': {'class': 'form-control', 'placeholder': 'Confirmez votre mot de passe', 'id': 'confirmPasswordField'}}) }}
<span class="input-group-text btn-yellow" id="password-addon" onclick="togglePasswordVisibility('registration_form_plainPassword_second', 'eyeIconSecond')">
<i class="mdi mdi-eye-outline" id="eyeIconSecond" aria-hidden="true" style="cursor: pointer;"></i>
</span>
</div>
{{form_label(registrationForm.tvaNumber, 'Numéro de tva' ,{'attr': {'class': 'form-label'}}) }}
{{form_widget(registrationForm.tvaNumber, {'attr' : {'class': 'form-control', 'placeholder' : 'Entrez votre numéro de tva'}})}}
{{ form_label(registrationForm.tvaStatus, 'Statut TVA', {'attr': {'class': 'form-label'}}) }}
{{ form_widget(registrationForm.tvaStatus, {'attr': {'class': 'form-control'}}) }}
{{ form_errors(registrationForm.tvaStatus) }}
<label class="form-check-label mt-2" for="establishments">Mon (mes) établissement(s)</label>
<textarea class="form-control" name="establishments" id="establishments"></textarea>
<div style="display:none" id="newEstablishmentAddress">
<label class="form-check-label mt-2" for="establishmentsAddress">Adresse(s) de mon (mes) établissement(s)</label>
<textarea class="form-control" name="establishmentsAddress" id="establishmentsAddress"></textarea>
</div>
<div style="display:none" id="projectDescribe">
<label class="form-check-label mt-2" for="description">Décrivez votre projet / type d'établissement</label>
<textarea class="form-control" name="description" id="description"></textarea>
</div>
</div>
<div class="col-lg-12 mt-4">
<div class="form-group">
<div class="d-flex mt-2">
{{ form_widget(registrationForm.cgvAccepted) }}
<sub class="ml-2">
J'accepte les <a href="/docs/privacy_policy.pdf" target="_blank" style="cursor:pointer; color: orangered">Conditions générales de ventes de Delsart</a> &
<a href="/docs/disclaimer.pdf" target="_blank" style="cursor:pointer; color: orangered">Disclaimer</a>
</sub>
</div>
</div>
</div>
<div class="d-grid mt-3">
<button class="btn btn-dark waves-effect waves-light" id="submitButtonExisting" type="submit">Valider</button>
</div>
{{ form_end(registrationForm) }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end account-pages -->
<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script>
function toggleForm(isExistingClient) {
$('#clientCarousel').show(); // Affiche le carrousel
$("#newEstablishmentAddress").hide();
$("#projectDescribe").hide();
if (isExistingClient) {
$('#existingClient').addClass('active').show(); // Affiche la section client existant
$('#newClient').removeClass('active').hide(); // Masque la section nouveau client
} else {
$('#existingClient').removeClass('active').hide(); // Masque la section client existant
$('#newClient').addClass('active').show(); // Affiche la section nouveau client
}
}
function showForm(exist) {
$('#isExistingEstablishment').val(exist);
$("#newEstablishmentAddress").hide();
$("#projectDescribe").hide();
$('#existingClient').addClass('active').show(); // Affiche la section client existant
$('#newClient').removeClass('active').hide(); // Masque la section nouveau client
if(exist){
$("#newEstablishmentAddress").hide();
$("#projectDescribe").hide();
$("#newEstablishmentAddress").show();
}
else{
$("#newEstablishmentAddress").show();
$("#projectDescribe").show();
}
}
$(document).ready(function() {
window.togglePasswordVisibility = function(fieldId, eyeIconId) {
// Sélectionne le champ de mot de passe
var $passwordField = $('#' + fieldId);
var $eyeIcon = $('#' + eyeIconId);
// Vérifie si le champ de mot de passe existe
if ($passwordField.length) {
if ($passwordField.attr('type') === 'password') {
$passwordField.attr('type', 'text'); // Affiche le mot de passe
$eyeIcon.removeClass('mdi-eye-outline').addClass('mdi-eye-off-outline'); // Change l'icône
} else {
$passwordField.attr('type', 'password'); // Cache le mot de passe
$eyeIcon.removeClass('mdi-eye-off-outline').addClass('mdi-eye-outline'); // Rechange l'icône
}
} else {
console.error("Element not found: " + fieldId);
}
};
});
</script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>