{% extends 'base.html.twig' %}
{% block title %}
Essayez gratuitement {{ website_name }}, Inscrivez-vous et collectez facilement tous vos paiements en ligne, gérez vos terrains avec un seul outil
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('/css/pages/subscribe.css') }}" />
{% endblock %}
{% block body %}
<div class="slider">
<div class="usefull-width item-slider">
<H1 class="item-header-h align">
Collectez facilement tous vos paiements,<br/>
gérez vos cours et terrains
</H1>
<H2>
Créer votre compte pour continuer vers votre espace pro
</H2>
</div>
</div>
<div class="usefull-width">
<section class="marginT-mob-15">
<div class="item-column">
<div class="with-padding-bottom-30 unl-margin-mob">
<H3 class="color_theme2 unl-margin">
S'inscrire
</H3>
<div>
{% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1) %}
<b>Pas</b> besoin de <b>carte bancaire</b><br/>
lors de l’inscription, <b>aucuns frais cachés</b>.
{% else %}
<b>Commençons</b> par faire connaissance ...
{% endif %}
</div>
<div class="item-register-google">
<span>
<img src="{{ asset('/images/icons/icon-google.svg') }}" height="30" width="auto" border="0" alt="S'inscrire à sport adhesion avec google"/>
</span>
<span>S'inscrire avec google</span>
</div>
<div class="horizontal-separator with-margin-top-bottom-15 bg-grey"></div>
{{ form_start(form) }}
{{ form_row(form.compagnie_name) }}
{{ form_row(form.forme_juridique) }}
{{ form_row(form.nom_responsable) }}
{{ form_row(form.payment_choice) }}
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
{{ form_errors(form.email) }}
{{ form_label(form.mdpt) }}
{{ form_widget(form.mdpt) }}
{{ form_errors(form.mdpt) }}
{{ form_row(form.trial_period, {'value' : default.trial }) }}
<div class="item-politic">
En vous inscrivant, vous acceptez nos <a href="{{ path('legal-cgu') }}" target="_blank">conditions d'utilisation</a> et <a href="{{ path('legal-notices') }}" target="_blank">mentions légales</a>.
</div>
<button class="button_theme size-14 with-min-width-150">
{% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1)%}
Commencer l'éssai
{% else %}
Commencer
{% endif %}
</button>
{{ form_end(form) }}
<div class="visible-xs marginT-mob-30">
{% if default.trial == true and (default.subscribe is not empty and default.subscribe != 1)%}
<div class="title align">
Conditions de l'offre d’éssai gratuite
</div>
<div class="d-flex align-flex">
<div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
La facturation démarre automatiquement au terme de la période d’essai gratuite.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Vous pouvez résilier votre abonnement à tout moment pendant la période de rétractation, soit avant le {{ trialDate|format_datetime(locale="fr",pattern="dd MMMM YYYY") }}, pour ne pas être facturé.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Ajouter votre numéro de TVA extra-communautaire pour ne pas être assujetis à la TVA dans les conditions légales européenne.
</div>
</div>
{% else %}
<div class="title align">
Conditions de l'offre
</div>
<div class="d-flex align-flex">
<div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Votre offre est utilisable dès activation de votre compte. L'activation de votre compte nécessite un e-mail valide.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Les mises à jours du logiciel sont inclusent dans l'offre et ne nécessitent aucun frais supplémentaire <span class="size-11">(hors applications télécharger)</span>.
</div>
</div>
{% endif %}
</div>
</div>
<div class="r-item-sub">
<div class="item-subscribe">
{% set i = 0 %}
{% set changePrice = '' %}
{% set defaultSub = '' %}
{% set color = ["orange", "green", "blue"] %}
{% if subscribes is not empty %}
{% for subscribe in subscribes %}
{% if default.subscribe is not empty %}
{% set defaultClass = 'erase' %}
{% else %}
{% set defaultClass = '' %}
{% if i == 1 %}
{% set defaultSub = 2 %}
{% endif %}
{% endif %}
{% if subscribe.getId == default.subscribe or subscribe.getId == defaultSub %}
{% set defaultClass = 'default' %}
{% set yearly = subscribe.getYearly / 12 %}
{% set changePrice = '<div class="menu-item active" data-type="monthlyPay">
<div class="name d-flex">
<span class="item-title">
Mensuel sans engagement
</span>
<span class="checked">
<i class="fas fa-check"></i>
</span>
</div>
<div class="read-price">
<span class="act-value">'~ subscribe.getMonthly ~' €</span> <span class="size-11">/ mois hors TVA</span>
</div>
</div>
<div class="menu-item" data-type="monthlyEngPay">
<div class="name d-flex">
<span class="item-title">
Annuel avec paiement mensuel
</span>
<span class="checked">
<i class="fas fa-check"></i>
</span>
</div>
<div class="read-price">
<span class="act-value2">>'~ subscribe.getMonthlyCommit ~' €</span> <span class="size-11">/ mois hors TVA</span>
</div>
</div>
<div class="menu-item" data-type="annualPay">
<div class="name d-flex">
<span class="item-title">
Annuel, facturé à l\'avance
</span>
<span class="checked">
<i class="fas fa-check"></i>
</span>
</div>
<div class="read-price">
<span class="act-value3">'~ yearly ~' €</span> <span class="size-11">/ mois hors TVA</span>
</div>
</div>' %}
{% endif %}
<div class="item {{ defaultClass }}" data-mensual="{{ subscribe.getMonthly }} €" data-sub="{{ subscribe.getMonthlyCommit }} €" data-annual="{{ subscribe.getYearly }} €">
<div class="name {{ color[i] }}">
Offre {{ subscribe.getNameFr|capitalize }}
</div>
<div class="load_bg erase width-100"></div>
<div class="item-prices">
<span class="monthlyPay amount">{{ subscribe.getMonthly }} € <span class="unl-bold size-12">HT / mois</span></span>
<span class="monthlyEngPay amount erase">{{ subscribe.getMonthlyCommit }} € <span class="unl-bold size-12">HT / mois</span></span>
<span class="annualPay amount erase">{{ subscribe.getYearly }} € <span class="unl-bold size-12">HT par ans</span></span>
</div>
{% if i > 0 %}
<div class="button_theme">
Payer maintenant
</div>
{% if (default.trial == true and (default.subscribe is not empty and default.subscribe != 1)) or (default.trial == false and default.subscribe is empty) %}
<div class="free-try">
{{ trialDay }} jours d'éssai gratuit
</div>
{% endif %}
{% endif %}
</div>
{% set i = i + 1 %}
{% endfor %}
{% endif %}
<div class="item-back hidden-xs">
Choisir une autre offre
</div>
<div class="with-relative">
<div class="switch-type-pay">
<span class="item-name">
Mensuel sans engagement
</span>
<span>
<i class="fas fa-sort-down"></i>
</span>
</div>
<div class="mensual-chb">
{{ changePrice|raw }}
</div>
</div>
<div class="hidden-xs">
{% if (default.trial == true and (default.subscribe is not empty and default.subscribe != 1)) or (default.trial == false and default.subscribe is empty)%}
<div class="title">
Conditions de l'offre d’éssai gratuite
</div>
<div class="d-flex align-flex">
<div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
La facturation démarre automatiquement au terme de la période d’essai gratuite.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Vous pouvez résilier votre abonnement à tout moment pendant la période de rétractation, soit avant le {{ trialDate|format_datetime(locale="fr",pattern="dd MMMM YYYY") }}, pour ne pas être facturé.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Ajouter votre numéro de TVA extra-communautaire pour ne pas être assujetis à la TVA dans les conditions légales européenne.
</div>
</div>
{% else %}
<div class="title align">
Conditions de l'offre
</div>
<div class="d-flex align-flex">
<div class="horizontal-separator width-70-p bg-grey with-margin-top-10"></div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Votre offre est utilisable dès activation de votre compte. L'activation de votre compte nécessite un e-mail valide.
</div>
</div>
<div class="item-list-condition">
<div>
<i class="fas fa-check-circle"></i>
</div>
<div>
Les mises à jours du logiciel sont inclusent dans l'offre et ne nécessitent aucun frais supplémentaire <span class="size-11">(hors applications télécharger)</span>.
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
<div class="with-padding-left-right-15 unl-padding-mob">
<ol class="breadcrumb unl-margin">
<li class="breadcrumb-item"><a href="{{ path('prices') }}" alt="Les tarifs {{ website_name }}">Les tarifs {{ website_name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Créer un compte</li>
</ol>
</div>
</div>
{% endblock %}
{% block javascriptFooter %}
<script>
$(document).ready(function(){
function readOffers(active=false){
if(active === false){
var className = 'default';
}else{
var className = 'active';
}
var mensual = $('.item.' + className).data('mensual');
var subs = $('.item.' + className).data('sub');
var annual = parseFloat($('.item.' + className).data('annual')) / 12;
$('.act-value').html(mensual);
$('.act-value2').html(subs);
$('.act-value3').html(annual.toFixed(2));
}
readOffers();
if(width < 1024){
$('.item').not('.item.default').hide();
}
// Switch type of payment
//
$(document).on('click', '.switch-type-pay', function(){
$('.mensual-chb').show();
event.stopPropagation();
});
$(document).on('click', '.menu-item', function(){
$('.load_bg').show();
var choice = $(this).find('.item-title').html();
$('.mensual-chb').hide();
$('.menu-item').removeClass('active');
$(this).addClass('active');
if($(this).hasClass('active')){
var type = $(this).data('type');
$('.item-subscribe .item').find('.amount').hide();
setTimeout(function(){
$('.load_bg').hide();
$('.item-subscribe .item').find('.' + type).show();
},1000);
}
$('.switch-type-pay .item-name, .item-name-condition').html(choice);
});
// Choose an offer
//
$(document).on('click', '.item-subscribe .item', function(){
$('.item').not(this).hide();
$(this).addClass('active');
$('.item-back').show();
readOffers(true);
});
$(document).on('click', '.item-subscribe .item-back', function(){
$('.item').show();
$('.item-back').hide();
$('.item-subscribe .item').removeClass('active');
readOffers();
});
$(window).click(function() {
$('.mensual-chb').hide();
});
});
</script>
{% endblock %}