<div class="card my-4">
<div class="card-body">
<form id="registerForm">
<div class="row my-2">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerLastName"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.last_name' |trans }}
*</label>
<input placeholder="{{ 'sylius.ui.last_name'|trans }}*"
name="customerLastName" type="text"
id="customerLastName"
class="form-control input-custom input-custom-grey"
required>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerFirstName"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.first_name'|trans }}
*</label>
<input placeholder="{{ 'app.ui.first_name'|trans }}*"
name="customerFirstName" type="text"
id="customerFirstName"
class="form-control input-custom input-custom-grey"
required>
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerEmail"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.email' |trans }}
*</label>
<input placeholder="{{ 'sylius.ui.email'|trans }}*"
name="customerEmail" type="email"
id="customerEmail"
class="form-control input-custom input-custom-grey"
required>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerPhoneNumber"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.phone_number'|trans }}
*</label>
<input placeholder="{{ 'sylius.ui.phone_number'|trans }}*"
name="customerPhoneNumber" type="text"
id="customerPhoneNumber"
class="form-control input-custom input-custom-grey"
required>
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerPassword"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.password' |trans }}
*</label>
<input placeholder="{{ 'sylius.ui.password'|trans }}*"
name="customerPassword" type="password"
id="customerPassword"
class="form-control input-custom input-custom-grey"
required>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerConfirmationPassword"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'sylius.ui.repeat_new_password'|trans }}
*</label>
<input placeholder="{{ 'sylius.ui.repeat_new_password'|trans }}*"
name="customerConfirmationPassword" type="password"
id="customerConfirmationPassword"
class="form-control input-custom input-custom-grey"
required>
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerCountry"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.country'|trans }}
*</label>
<select name="customerCountry" id="customerCountry"
class="form-control input-custom input-custom-grey input-country required-message-check-input" required>
<option selected disabled hidden
value="">{{ 'app.ui.country'|trans }}</option>
{% for country in countries|sort((a, b) => a.name <=> b.name) %}
<option id="{{ country.id }}"
value="{{ country.code }}">{{ country }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerCounty"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.county'|trans }}
*</label>
<select id="customerCounty" name="customerCounty"
class="form-control input-custom input-custom-grey required-message-check-input" required>
<option class="option-rca-custom" value="" selected disabled
hidden>{{ 'app.ui.please_select_a_county'|trans }}*
</option>
</select>
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2 city-block">
<label for="customerCity"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.city'|trans }}
*</label>
<select id="customerCity" name="customerCity" type="text"
class="form-control input-custom input-custom-grey required-message-check-input" required>
<option class="option-rca-custom" value="" selected disabled
hidden>{{ 'app.ui.city'|trans }}*
</option>
</select>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerStreet"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.street'|trans }}
*</label>
<input placeholder="{{ 'app.ui.street'|trans }}*"
id="customerStreet"
type="text" name="customerStreet"
class="form-control input-custom input-custom-grey required-message-check-input" required>
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerStreetNumber"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.number'|trans }}
*</label>
<input placeholder="{{ 'app.ui.number'|trans }}*"
name="customerStreetNumber" type="text"
id="customerStreetNumber"
class="form-control input-custom input-custom-grey required-message-check-input"
required>
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerBuilding"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.building'|trans }}</label>
<input placeholder="{{ 'app.ui.building'|trans }}"
id="customerBuilding"
type="text" name="customerBuilding"
class="form-control input-custom input-custom-grey">
</div>
</div>
<div class="row my-3">
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerEntrance"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.entrance'|trans }}</label>
<input placeholder="{{ 'app.ui.entrance'|trans }}"
id="customerEntrance"
type="text" name="customerEntrance"
class="form-control input-custom input-custom-grey">
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="customerApartment"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.apartment'|trans }}</label>
<input placeholder="{{ 'app.ui.apartment'|trans }}"
id="customerApartment"
type="text" name="customerApartment"
class="form-control input-custom input-custom-grey">
</div>
</div>
<div class="row">
<div class="col-12">
<div class="custom-control custom-checkbox mt-2 register-block">
<input type="checkbox" name="subscribeToNewsletter" id="subscribeToNewsletter"
class="custom-control-input">
<label for="subscribeToNewsletter" class="custom-control-label">
<a class="text-dark"
style="letter-spacing: 0.01em;">{{ 'app.ui.newsletter_confirmation'|trans|raw }}</a>
</label>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-6">
<div class="custom-control custom-radio d-flex justify-content-center align-items-center align-content-center text-center"
style="height: 40px;">
<input type="radio" id="simpleCustomer" name="customerType"
class="custom-control-input" value="0" required checked>
<label class="custom-control-label" for="simpleCustomer"><h5
class="font-weight-normal">{{ 'app.ui.natural_person'|trans }}</h5>
</label>
</div>
</div>
<div class="col-6 mt-sm-2">
<div
class="custom-control custom-radio d-flex justify-content-center align-items-center align-content-center text-center"
style="height: 40px;">
<input type="radio" id="companyCustomer" name="customerType"
class="custom-control-input" value="1">
<label class="custom-control-label" for="companyCustomer"><h5
class="font-weight-normal">{{ 'app.ui.legal_person'|trans }}</h5>
</label>
</div>
</div>
</div>
<div id="legalCustomerBlock" class="row my-3 d-none">
<div class="col-6 mt-sm-2">
<label for="cifCode"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.fiscal_code'|trans }}
*</label>
<input placeholder="{{ 'app.ui.fiscal_code'|trans }}*"
id="cifCode"
type="text" name="cifCode"
class="form-control input-custom input-custom-grey input-cui required-message-check-input">
</div>
<div class="col-md-6 col-sm-12 mt-sm-2">
<label for="companyName"
class="text-dark lbl-custom lbl-custom-grey d-none">{{ 'app.ui.company_name'|trans }}
*</label>
<input placeholder="{{ 'app.ui.company_name'|trans }}*"
id="companyName" type="text"
name="companyName"
class="form-control input-custom input-custom-grey input-company-name required-message-check-input">
</div>
</div>
<div class="row my-3">
<div class="col-12">
<span id='errorContainer'></span>
<div class="g-recaptcha" data-sitekey="6LdFcvYZAAAAAFln0jMic-l4YTds8EuC9gn0qiBs"
data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired"></div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="custom-control custom-checkbox mt-2" data-toggle='tooltip' data-placement='top' data-original-title="{{ 'app.ui.terms_already_accepted'|trans }}">
<input type="checkbox" name="acceptTermsAndConditions" id="acceptTermsAndConditions"
class="custom-control-input"
data-title="1" required>
<label for="acceptTermsAndConditions" class="custom-control-label">
<a class="text-dark" style="font-size: 1em;">
{{ 'app.ui.terms_data_agreement'|trans({
'%termsAndConditions%': '<a href="' ~path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'termeni-si-conditii'}) ~ '" target="_blank">' ~ 'app.ui.terms_and_conditions'|trans ~ '</a>',
'%personalDataProtection%': '<a href="' ~path('bitbag_sylius_cms_plugin_shop_page_show', {'slug' : 'protectia-datelor'}) ~ '" target="_blank">' ~ 'app.ui.personal_data_protection'|trans ~ '</a>'
})|raw }}
</a>
</label>
</div>
</div>
</div>
<input type="text" id="recaptcha" class="input-hidden" value="" required>
<div class="row">
<div id="preventSubmit" class="col-12">
<button id="btnRcaVehicleDetailsSubmit" type="submit" class="btn btn-submit btn-primary-inactive w-100" style="height: 40px"><a>{{ 'sylius.ui.register'|trans }}</a></button>
</div>
</div>
</form>
</div>
</div>
<script>
function recaptchaCallback(response) {
let gReCaptcha = $('#g-recaptcha-response');
if (gReCaptcha.length > 0 && gReCaptcha.val() === response) {
verifyCaptcha(response);
}
}
function recaptchaExpired()
{
$('#recaptcha').val('');
validateForm($('.btn-submit'));
}
function verifyCaptcha(response)
{
let result = false;
let url = Routing.generate('app_shop_verify_captcha');
$.ajax({
url: url,
data: {
'captcha': response
},
type: 'POST',
async: false,
dataType: 'json',
success: function (data) {
if (data === true) {
$('#recaptcha').val('1');
validateForm($('.btn-submit'));
}
},
error: function () {
}
});
return result;
}
/**
* Duplicat deoarece recaptcha nu vede scriptul global
* @param submitButton
*/
function validateForm(submitButton) {
let inputsAreInvalid = false;
let radioAndCheckboxAreInvalid = false;
$('form input, form select').each(
function(){
if ($(this).val() === null || $(this).val() === '') {
if ($(this).prop('required')) {
inputsAreInvalid = true;
}
}
}
);
$('form input:radio,form input:checkbox').each(function () {
let name = $(this).attr('name');
if ($('input[name="'+ name + '"]:checked').length < 1) {
if ($(this).prop('required')) {
radioAndCheckboxAreInvalid = true;
}
}
});
if (inputsAreInvalid || radioAndCheckboxAreInvalid) {
submitButton.addClass('btn-primary-inactive');
submitButton.removeClass('btn-primary');
} else {
submitButton.removeClass('btn-primary-inactive');
submitButton.addClass('btn-primary');
submitButton.removeAttr('disabled');
}
}
</script>
<style>
.input-hidden{
height:0;
width:0;
visibility: hidden;
padding:0;
margin:0;
float:right;
}
</style>