{% extends 'base.html.twig' %}

{% block classBody %}class="subscribe"{% endblock %}

{% block body %}

    <!-- MAIN CONTENT-->
    <div id="inscription" class="z-0">

        <div class="container-fluid">

            <div id="inscription-contenu" class="row p-96">
                <!-- BLOC INTRO-->
                <div id="inscription-intro" class="col-sm-12 col-md-4 ptb-0 pr-48 pl-0">
                    <div class="bloc-base">
                        <div class="bloc-title">
                            <h1 class="inscription mb-16">Je crée mon compte</h1>
                            <h2 class="inscription mb-24">Abonnement aux téléservices de l’Agence de l’Eau
                                Artois-Picardie</h2>

                            <p class="font-color-white font-bold">Besoin d’aide ?</p>
                            <p class="font-color-white mb-16"><a class="font-color-white" href="/addev/data/docs/docExplorer.pdf">Procédure d'utilisation et personne à contacter</a></p>
                            

                            <p class="font-color-white"><a class="font-color-white" href="{{ path('security_login') }}">Revenir sur la page de connexion</a></p>
                        </div>
                    </div>
                </div>

                <!-- BLOC FORM-->
                <div id="inscription-form" class="col-sm-12 col-md-8 p-48 background-white">

                    <div class="bloc-base ptb-48">
                            <div class="stepwizard">
                                <div class="stepwizard-row setup-panel">
                                    <div class="stepwizard-step plr-16">
                                        <a href="#step-1" class="btn btn-primary btn-circle">1</a>
                                        <span class="info-secondaire">Informations employeur</span>
                                    </div>
                                    <div class="stepwizard-step plr-16">
                                        <a href="#step-2" class="btn btn-default btn-circle" disabled="disabled">2</a>
                                        <span class="info-secondaire">Informations de contact</span>
                                    </div>
                                    <div class="stepwizard-step plr-16">
                                        <a href="#step-3" class="btn btn-default btn-circle" disabled="disabled">3</a>
                                        <span class="info-secondaire">Création mot de passe</span>
                                    </div>
                                    <div class="stepwizard-step plr-16">
                                        <a href="#step-4" class="btn btn-default btn-circle" disabled="disabled">4</a>
                                        <span class="info-secondaire">Thématiques d'abonnement</span>
                                    </div>
                                    <div class="stepwizard-step plr-16">
                                        <a href="#step-5" class="btn btn-default btn-circle" disabled="disabled">5</a>
                                        <span class="info-secondaire">Finalisation</span>
                                    </div>
                                </div>
                            </div>
                </div>

                    <div class="bloc-base ptb-48">
                        <div id="js-error" class="alert alert-danger {% if error is null %}soft-hide{% endif %}">
                            {% if error %}
                                Erreur : {{ error }}
                            {% endif %}
                        </div>
                        {{ form_start(form) }}
                            <div class="row setup-content m-0" id="step-1">
                                <div class="col-xs-12 p-0">
                                    <h3 class="mb-24">Informations sur votre organisme</h3>
                                    <div id="siret" class="form-group mb-16">
                                        <label class="control-label m-0">SIRET*</label>
                                        <small class="display-block font-color-dark-grey mb-8">14 chiffres (help : 85615434451349)</small>
                                        {{ form_widget(form.siret) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="identifiant" class="form-group mb-48">
                                        <label class="control-label mb-8">Identifiant d'abonnement*</label>
                                        {{ form_widget(form.identifiant) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="form-group m-0 text-align-r">
                                        <span class="info-secondaire display-inline-block float-left">*champs obligatoires</span>
                                        <a href="{{ path('security_login') }}" class="button-square-prev prevBtn">Retour</a>
                                        <a data-step="1" class="button-square FormCheck" data-loading-text="<i class='fas fa-spinner fa-spin'></i> Chargement">suivant</a>
                                    </div>
                                </div>
                            </div>

                            <div class="row setup-content m-0" id="step-2">
                                <div class="col-xs-12 p-0">
                                    <h3 class="mb-24">Vos informations de contact</h3>
                                    <div id="nom" class="input-50 form-group pl-0 pr-8 mb-16">
                                        <label class="control-label mb-8">Nom*</label>
                                        {{ form_widget(form.nom) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="prenom" class="input-50 form-group pl-8 pr-0 mb-16">
                                        <label class="control-label mb-8">Prénom*</label>
                                        {{ form_widget(form.prenom) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="email" class="form-group mb-16">
                                        <label class="control-label mb-8">Adresse mail*</label>
                                        {{ form_widget(form.email) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="emailCheck" class="form-group mb-16">
                                        <label class="control-label mb-8">Confirmation adresse mail*</label>
                                        {{ form_widget(form.emailCheck) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="telephone" class="form-group mb-48">
                                        <label class="control-label mb-8">Téléphone*</label>
                                        {{ form_widget(form.telephone) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="form-group m-0 text-align-r">
                                        <span class="info-secondaire display-inline-block float-left">*champs obligatoires</span>
                                        <a class="button-square-prev prevBtn">précédent</a>
                                        <a data-step="2" class="button-square FormCheck" data-loading-text="<i class='fas fa-spinner fa-spin'></i> Chargement">suivant</a>
                                    </div>
                                </div>
                            </div>

                            <div class="row setup-content m-0" id="step-3">
                                <div class="col-xs-12 p-0">
                                    <h3 class="mb-24">Créez votre mot de passe</h3>
                                    <div id="password" class="form-group mb-16">
                                        <label class="control-label mb-8">Mot de passe*</label>
                                        {{ form_widget(form.password) }}
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="passwordCheck" class="form-group mb-48">
                                        <label class="control-label mb-8">Confirmation de mot de passe*</label>
                                        {{ form_widget(form.passwordCheck) }}
                                        <p class="help-block"></p>
                                        <small class="display-block font-color-dark-grey mt-8">Minimum 8 caractères, une majuscule, une minuscule et un chiffre.</small>
                                    </div>
                                    <div class="form-group m-0 text-align-r">
                                        <span class="info-secondaire display-inline-block float-left">*champs obligatoires</span>
                                        <a class="button-square-prev prevBtn">précédent</a>
                                        <a data-step="3" class="button-square FormCheck">suivant</a>
                                    </div>
                                </div>
                            </div>

                            <div class="row setup-content m-0" id="step-4">
                                <div class="col-xs-12 p-0">
                                    <h3 class="mb-24">Choisissez votre/vos thématique(s) d'abonnement*</h3>
                                    <div id="step4main" class="form-group">
                                        <div id="thematique-box">
                                        </div>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="form-group m-0 text-align-r">
                                        <span class="info-secondaire display-inline-block float-left">*champs obligatoires</span>
                                        <a class="button-square-prev prevBtn">précédent</a>
                                        <a data-step="4" class="button-square FormCheck">suivant</a>
                                    </div>
                                </div>
                            </div>

                            <div class="row setup-content m-0" id="step-5">
                                <div class="col-xs-12 p-0">
                                    <h3 class="mb-16">Veuillez accepter les conditions d'utilisation du portail</h3>
                                    <p class="mb-24">Cela est nécessaire pour finaliser la création de votre compte</p>
                                    <div id="cgu" class="form-group mb-16">
                                        <input id="app_bundle_subscribe_form_cgu" name="app_bundle_subscribe_form[cgu][]" type="checkbox" class="mr-8">
                                        <label for="app_bundle_subscribe_form_cgu" class="control-label">J’accepte les <a href="{{ path('cgu') }}" target="_blank" class="conditions font-color-dark-grey control-label">conditions d’utilisation du site</a></label>
                                        <p class="help-block"></p>
                                    </div>
                                    <div id="cookies" class="form-group mb-48">
                                        <input id="app_bundle_subscribe_form_cookies" name="app_bundle_subscribe_form[cookies][]" type="checkbox" class="mr-8">
                                        <label for="app_bundle_subscribe_form_cookies" class="control-label">J’accepte l'utilisation des <a href='{{ path('cookies') }}' target="_blank" class="conditions font-color-dark-grey control-label">cookies</a></label>
                                        <p class="help-block"></p>
                                    </div>
                                    <div class="form-group m-0 text-align-r">
                                        <a class="button-square-prev prevBtn">précédent</a>
                                        <a data-step="5" class="button-square FormCheck">créez votre compte</a>
                                    </div>
                                </div>
                            </div>
                        {{ form_end(form) }}

                    </div>

                </div>
            </div>

        </div>

    </div>

{% endblock %}

{% block javascript_inline %}
    <script src="{{ asset('js/init-formwizard.js') }}"></script>
    <script src="{{ asset('js/Security/Subscribe.js') }}"></script>
{% endblock %}

