<!DOCTYPE html>
<html lang="fr" class="js">
<head>
<base href="../">
<meta charset="utf-8">
<meta name="author" content="DSI">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="">
<!-- Fav Icon -->
<link rel="shortcut icon" href="{{ asset('frontend/images/favicon.png') }}">
<!-- Page Title -->
<title>{% block title %}DSANTE ✅{% endblock %}</title>
<!-- StyleSheets -->
<link rel="stylesheet" href="{{ asset('frontend/assets/css/dashlite.css') }}">
<link id="skin-default" rel="stylesheet" href="{{ asset('frontend/assets/css/theme.css') }}">
<link rel="stylesheet" href="{{ asset('fonts/fontawesome/css/all.css') }}">
<style>
#agreeContent strong {
color: black;
font-weight: 900;
}
#agreeContent h4 {
margin-top: 20px;
text-decoration: underline;
}
#agreeContent ul {
list-style: inside;
}
#agreeContent .modal-content {
height: 95vh !important;
overflow-y: scroll;
}
.iti {
position: relative;
display: block;
}
.errorNumber{
color: #e85347;
font-size: 12px;
font-style: italic;
}
</style>
</head>
<body class="nk-body bg-white npc-general pg-auth">
<div class="nk-app-root">
<!-- main @s -->
<div class="nk-main ">
<!-- wrap @s -->
<div class="nk-wrap nk-wrap-nosidebar">
<!-- content @s -->
<div class="nk-content ">
<div class="nk-split nk-split-page nk-split-md">
<div class="nk-split-content nk-block-area nk-block-area-column nk-auth-container bg-white w-lg-45">
<div class="absolute-top-right d-lg-none p-3 p-sm-5">
<a href="#" class="toggle btn btn-white btn-icon btn-light" data-target="athPromo"><em
class="icon ni ni-info"></em></a>
</div>
<div class="nk-block nk-block-middle nk-auth-body" style="max-width: 1000px;!important;">
<div class="brand-logo pb-5">
<a href="{{ path('index') }}" class="logo-link">
<img class="logo-light logo-img logo-img-lg" src="{{ asset('logo.png') }}"
srcset="{{ asset('logo.png') }}" alt="logo">
<img class="logo-dark logo-img logo-img-lg" src="{{ asset('logo.png') }}"
srcset="{{ asset('logo.png') }}" alt="logo-dark">
</a>
</div>
<div class="nk-block-head">
<div class="nk-block-head-content">
<h5 class="nk-block-title">Créer son compte Médecin</h5>
</div>
</div><!-- .nk-block-head -->
<style>
.col-md-4 {
padding-top: 10px;
}
.iti {
display: block !important;
}
label.required:after {
content: " *";
color: red;
font-weight: bold;
}
</style>
<div style="padding: 1rem 0"><strong style="text-decoration: underline">NB:</strong> les
champs marqués d'un astérisque (<span style="color: red;font-weight: bold">*</span>)
sont obligatoires
</div>
{{ form_start(registrationForm) }}
<fieldset class="border p-2" style="border: .0625rem solid #c9ccd0!important;">
<legend class="fs-20px">Informations personnelles</legend>
<div class="row">
<div class="col-md-4">
{{ form_row(registrationForm.firstName) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.lastName) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.sexe) }}
</div>
</div>
<div class="row">
<div class="col-md-4">
{{ form_row(registrationForm.dateOfBirth) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.nativeCountry) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.countryOfResidence) }}
</div>
</div>
<div class="row">
<div class="col-md-4">
{{ form_row(registrationForm.diplomePath) }}
</div>
<div class="col-md-4 priceBox">
{{ form_row(registrationForm.consultationRdvAmount) }}
<span>
Montant réel perçu: <span id="realPriceRdvAmount"></span>
</span>
</div>
<div class="col-md-4 priceBox">
{{ form_row(registrationForm.consultationUrgentAmount) }}
<span>
Montant réel perçu: <span id="realPriceUrgentAmount"></span>
</span>
</div>
</div>
<div class="row">
<div class="col-md-4">
{{ form_row(registrationForm.yearOfExperience) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.identificationNumber) }}
</div>
<div class="col-md-4">
{{ form_row(registrationForm.occupation) }}
</div>
</div>
<div class="row">
<div class="col-md-6">
{{ form_row(registrationForm.medicalSpecialties) }}
</div>
{# <div class="col-md-4">#}
{# {{ form_row(registrationForm.phoneNumber) }}#}
{# </div>#}
<div class="col-md-6">
{{ form_row(registrationForm.phoneNumber2) }}
</div>
</div>
<div class="row">
<div class="col-md-4">
{{ form_row(registrationForm.photo) }}
<img src="" alt="" style="width: 20%" id="previewImage">
</div>
</div>
<div class="row">
</div>
</fieldset>
<br>
<fieldset class="border p-2" style="border: .0625rem solid #c9ccd0!important;">
<legend class="fs-20px">Informations de connexion</legend>
<div class="row">
<div class="col-md-6">
{# {{ form_row(registrationForm.email) }}#}
{{ form_row(registrationForm.phoneNumber) }}
<span id="errorNumber" class="errorNumber" style="display: none">Le numéro est invalide. Il doit être de 10 chiffres </span>
</div>
<div class="col-md-6">
{{ form_row(registrationForm.plainPassword, {
label: 'Mot de Passe'
}) }}
</div>
</div>
</fieldset>
<div class="row" style="margin-left: 1em!important;margin-top: 0.8em!important;">
<div class="col-md-12">
{{ form_row(registrationForm.agreeTerms) }}
</div>
</div>
<div class="row" style="padding-top: 30px">
<button type="submit" class="btn btn-lg btn-primary btn-block" id="submit" disabled>S'inscrire</button>
</div>
{{ form_end(registrationForm) }}
<div class="form-note-s2 pt-4">
Vous avez déjà un compte ?
<a href="{{ path('login') }}">
<strong>Connectez-vous</strong>
</a>
</div>
</div><!-- .nk-block -->
{# <div class="nk-block nk-auth-footer"> #}
{# <div class="mt-3"> #}
{# <p>© 2022 DSI. All Rights Reserved.</p> #}
{# </div> #}
{# </div><!-- nk-block --> #}
</div><!-- nk-split-content -->
<div class="nk-split-content nk-split-stretch bg-lighter d-flex toggle-break-lg toggle-slide toggle-slide-right"
data-content="athPromo" data-toggle-screen="lg" data-toggle-overlay="true"
style="background-image:url('{{ asset('frontend/images/bg/registerMedicalBg.jpg') }}');background-clip: border-box!important;background-size: cover;background-repeat: no-repeat">
<div class="slider-wrap w-100 w-max-550px p-3 p-sm-5 m-auto text-white">
<div class="slider-init" data-slick='{"dots":true, "arrows":false}'>
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
<div class="slider-item">
<div class="nk-feature nk-feature-center">
<div class="nk-feature-content py-4 p-sm-5">
<h4>Dsanté</h4>
<p>La Santé en toute simplicité.</p>
</div>
</div>
</div><!-- .slider-item -->
</div><!-- .slider-init -->
<div class="slider-dots"></div>
<div class="slider-arrows"></div>
</div><!-- .slider-wrap -->
</div><!-- nk-split-content -->
</div><!-- nk-split -->
</div>
<!-- wrap @e -->
</div>
<!-- content @e -->
</div>
<!-- main @e -->
</div>
<style>
.priceBox .form-group{
margin-bottom: 0px;
}
.priceBox span{
color: #e85347;
font-size: 0.875rem;
font-style: italic;
font-weight: bold;
}
</style>
<div class="modal fade zoom" tabindex="-1" id="procedure">
<div class="modal-dialog modal-lg modal-dialog-bottom" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Les étapes d’inscription du compte médecin</h5>
{# <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">#}
{# <em class="icon ni ni-cross"></em>#}
{# </a>#}
</div>
<div class="modal-body" style="text-align: justify;line-height: 1.8;">
<h6><strong>Étape 1</strong></h6>
<p>
Remplir le formulaire et cliquer sur le bouton <strong> « S’inscrire ».</strong>
</p>
<h6><strong>Étape 2</strong></h6>
<p>
Veuillez entrer le code à 4 chiffres envoyé au numéro de téléphone
</p>
<h6><strong>Étape 3</strong></h6>
<p>
Après validation de votre email, l’administrateur vous enverra un email d’activation de votre compte.
</p>
<h6><strong>Étape 4</strong></h6>
<p>
Connectez-vous et télé-consultez.
</p>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="{{ asset('frontend/assets/js/bundle.js') }}"></script>
<script src="{{ asset('frontend/assets/js/scripts.js') }}"></script>
<!-- JavaScript -->
{% block after_js %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/css/intlTelInput.css"
integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/intlTelInput.min.js"
integrity="sha512-Po9nSdYOcWIcoADdRjkAbRYPpR8OHjxzA/3RDUERZcDewTLzRTxbG4bUX7Sr7lVEcO3wTCzphdOBWgNFKVmxaA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{# </script> #}
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script>
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* https://github.com/wenzhixin/bootstrap-show-password
* version: 1.0.3
*/
!function (e) {
"use strict";
var t = function (e) {
var t = arguments, s = !0, i = 1;
return e = e.replace(/%s/g, function () {
var e = t[i++];
return "undefined" == typeof e ? (s = !1, "") : e
}), s ? e : ""
}, s = function (t, s) {
this.options = s, this.$element = e(t), this.isShown = !1, this.init()
};
s.DEFAULTS = {
placement: "after",
white: !1,
message: "Cliquez ici pour afficher/masquer le mot de passe",
eyeClass: "fas",
eyeOpenClass: "fa-eye",
eyeCloseClass: "fa-eye-slash"
// eyeClass: "glyphicon",
// eyeOpenClass: "glyphicon-eye-open",
// eyeCloseClass: "glyphicon-eye-close"
}, s.prototype.init = function () {
var s, i;
"before" === this.options.placement ? (s = "insertBefore", i = "input-prepend") : (this.options.placement = "after", s = "insertAfter", i = "input-append"), this.$element.wrap(t('<div class="%s input-group" />', i)), this.$text = e('<input type="text" />')[s](this.$element).attr("class", this.$element.attr("class")).attr("style", this.$element.attr("style")).attr("placeholder", this.$element.attr("placeholder")).css("display", this.$element.css("display")).val(this.$element.val()).hide(), this.$element.prop("readonly") && this.$text.prop("readonly", !0), this.$icon = e(['<span tabindex="100" title="' + this.options.message + '" class="add-on input-group-addon">', '<i class="icon-eye-open' + (this.options.white ? " icon-white" : "") + " " + this.options.eyeClass + " " + this.options.eyeOpenClass + '"></i>', "</span>"].join(""))[s](this.$text).css("cursor", "pointer"), this.$text.off("keyup").on("keyup", e.proxy(function () {
this.isShown && this.$element.val(this.$text.val()).trigger("change")
}, this)), this.$icon.off("click").on("click", e.proxy(function () {
this.$text.val(this.$element.val()).trigger("change"), this.toggle()
}, this))
}, s.prototype.toggle = function (e) {
this[this.isShown ? "hide" : "show"](e)
}, s.prototype.show = function (t) {
var s = e.Event("show.bs.password", {relatedTarget: t});
this.$element.trigger(s), this.isShown = !0, this.$element.hide(), this.$text.show(), this.$icon.find("i").removeClass("icon-eye-open " + this.options.eyeOpenClass).addClass("icon-eye-close " + this.options.eyeCloseClass), this.$text[this.options.placement](this.$element)
}, s.prototype.hide = function (t) {
var s = e.Event("hide.bs.password", {relatedTarget: t});
this.$element.trigger(s), this.isShown = !1, this.$element.show(), this.$text.hide(), this.$icon.find("i").removeClass("icon-eye-close " + this.options.eyeCloseClass).addClass("icon-eye-open " + this.options.eyeOpenClass), this.$element[this.options.placement](this.$text)
}, s.prototype.val = function (e) {
return "undefined" == typeof e ? this.$element.val() : (this.$element.val(e).trigger("change"), this.$text.val(e), void 0)
};
var i = e.fn.password;
e.fn.password = function () {
var t, i = arguments[0], n = arguments, o = ["show", "hide", "toggle", "val"];
return this.each(function () {
var a = e(this), h = a.data("bs.password"),
r = e.extend({}, s.DEFAULTS, a.data(), "object" == typeof i && i);
if ("string" == typeof i) {
if (e.inArray(i, o) < 0) throw"Unknown method: " + i;
t = h[i](n[1])
} else h ? h.init(r) : (h = new s(a, r), a.data("bs.password", h))
}), t ? t : this
}, e.fn.password.Constructor = s, e.fn.password.noConflict = function () {
return e.fn.password = i, this
}, e(function () {
e('[data-toggle="password"]').password()
})
}(window.jQuery);
</script>
<script>
$('#medical_staff_form_medicalSpecialties').removeAttr('multiple')
$('.js-datepicker').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('.js-select2').select2({
'placeholder': '-'
});
// $("#medical_staff_form_medicalSpecialties").prop("disabled", true);
$("#medical_staff_form_occupation").change(function () {
if ($(this).val() === "Infirmier" || $(this).val() === "Sage-femme") {
$("#medical_staff_form_medicalSpecialties").prop("disabled", true);
} else {
$("#medical_staff_form_medicalSpecialties").prop("disabled", false);
}
});
</script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#previewImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#medical_staff_form_photo").change(function () {
readURL(this);
});
let medical_staff_form_phoneNumber = document.querySelector("#medical_staff_form_phoneNumber");
// let phone1 = window.intlTelInput(medical_staff_form_phoneNumber, {
// // customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
// // return "";
// // },
// initialCountry: "auto",
// hiddenInput: 'full1',
// geoIpLookup: function (callback) {
// $.get('https://ipinfo.io', function () {
// }, "jsonp").always(function (resp) {
// var countryCode = (resp && resp.country) ? resp.country : "us";
// callback(countryCode);
// });
// },
// allowDropdown: true,
// utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/utils.min.js"
// });
const button = document.querySelector("#submit");
const errorMsg = document.querySelector("#errorNumber");
// let phoneNumber = document.querySelector("#patient_form_phoneNumber");
const iti = window.intlTelInput(medical_staff_form_phoneNumber, {
onlyCountries: ["ci"],
initialCountry: "ci",
hiddenInput: 'full1',
allowDropdown:true,
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
return selectedCountryPlaceholder;
},
});
medical_staff_form_phoneNumber.addEventListener('keyup', (e) => {
if (medical_staff_form_phoneNumber.value.trim()) {
if (iti.isValidNumber()) {
// console.log("valide")
button.disabled = false;
errorMsg.style.display= 'none';
} else {
errorMsg.style.display= '';
button.disabled = true;
// console.log("invalid")
}
}
});
let medical_staff_form_phoneNumber2 = document.querySelector("#medical_staff_form_phoneNumber2");
let phone2 = window.intlTelInput(medical_staff_form_phoneNumber2, {
// customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
// return "";
// },
initialCountry: "auto",
hiddenInput: 'full2',
geoIpLookup: function (callback) {
$.get('https://ipinfo.io', function () {
}, "jsonp").always(function (resp) {
var countryCode = (resp && resp.country) ? resp.country : "us";
callback(countryCode);
});
},
allowDropdown: true,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.16/js/utils.min.js"
});
// let agreeTermsField = $("#medical_staff_form_agreeTerms")
// agreeTermsField.change(function (e) {
// // console.log(e)
// // alert(e.target.checked)
// if (agreeTermsField[0].checked) {
// agreeTermsField.prop('checked', false)
// $('#agreeContent').modal('show')
// }
// });
// $('#agreeTermsValidation').click(function () {
// $('#agreeContent').modal('hide')
// agreeTermsField.prop('checked', true)
// })
function calculRealPrice(value,target) {
let price= value - (value*0.15)
$(target).text(parseInt(price))
}
$(document).ready(function(){
$("#procedure").modal('show');
// $("#medical_staff_form_consultationRdvAmount").keyup(function() {
// calculRealPrice(parseInt(this.value),"#realPriceRdvAmount")
// });
$("#medical_staff_form_consultationRdvAmount").on("keyup change",function() {
calculRealPrice(parseInt(this.value),"#realPriceRdvAmount")
});
$("#medical_staff_form_consultationUrgentAmount").on("keyup change",function() {
calculRealPrice(parseInt(this.value),"#realPriceUrgentAmount")
});
// $("#medical_staff_form_consultationUrgentAmount").keyup(function() {
// calculRealPrice(this.value,"#realPriceUrgentAmount")
// });
});
$("#medical_staff_form_plainPassword").password();
</script>
{% endblock %}
</body>
</html>