{% extends "@FOSUser/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}

{% block stylesheets %}

    {{ parent() }}

    <link href="{{ asset('assets/css/vendors/datatables.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/js/jquery-steps/jquery.steps.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ asset('assets/css/vendors/intlTelInput/css/intlTelInput.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/date-picker.css') }}">

    <style>
        .visitor_activity_other_bloc {
            display: none;
        }

        li.select2-results__option[id*="23"] {
            font-weight: bold;
            color: #484848 !important;
        }

        .intl-tel-input {
            width: 100%;
        }

        .iti {
            width: 100%;
            display: block
        }

        ::placeholder {
            color: #d3d3d3 !important;
        }

        .radio_animated {
            margin: 0px;
        }

        .dataTable th {
            background: #f6f6f6 !important;
        }

        .dataTable .fw-bold.socialReason {
            color: #0c9cce;
        }

        .dataTable th.society_socialReason, .dataTable th.society_siren {
            color: #0c9cce;
        }

        .bloc-email-mdp, .header-bloc-email-mdp {
            display: none;
        }

        #datepickers-container {

            z-index: 1600 !important;
        }

        .paymentErrors {
            color: #dc3545;
        }

    </style>

{% endblock %}

{% block title %}
    Inscription
{% endblock %}

{% block fos_user_width %}registration-bloc{% endblock fos_user_width %}

{% block fos_user_title %}
    Créez votre compte utilisateur
{% endblock fos_user_title %}

{% block fos_user_content %}



    {{ form_start(formVisitor, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'id': 'fos_user_registration_register_form','class': 'fos_user_registration_register_form wizard needs-validation','data-style': '1'}}) }}

    <h3></h3>
    <div class="wizard-content">
        <div class="text-center text-dark mb-4">
            <h5 class="f-w-100">Dites-nous qui vous êtes ?</h5>
        </div>
        <div class="section over-hide z-bigger">
            <div class="row justify-content-center">
                {% for visitorCategory in visitorCategories %}
                    <input class="checkbox-tools visitor_category" type="radio" name="visitor[category]"
                           id="category-{{ loop.index }}"
                           value="{{ visitorCategory.id }}">
                    <label class="for-checkbox-tools text-white" for="category-{{ loop.index }}">
                        <i class="fa fa-briefcase fa-2x"></i>
                        <p class="mt-3">{{ visitorCategory.description }}</p>
                    </label>
                {% endfor %}
            </div>
            <div class="alert-validation-field text-center alert_visitor_category"></div>
        </div>
    </div>

    <h3></h3>
    <div class="wizard-content">
        <div class="text-center text-dark">
            <h5 class="f-w-100">Complétez votre profil</h5>
        </div>
        <div class="row mt-3 mb-3">
            <div class="col-xl-6 col-lg-12 col-sm-12">
                <div class="mb-2">
                    {{ form_label(formVisitor.firstName, 'Prénom', {'label_attr': {'class': 'required'}}) }}
                    {{ form_widget(formVisitor.firstName) }}
                    <div class="alert-validation-field alert_visitor_firstName"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12">
                <div class="mb-2">
                    {{ form_label(formVisitor.lastName, 'Nom', {'label_attr': {'class': 'required'}}) }}
                    {{ form_widget(formVisitor.lastName) }}
                    <div class="alert-validation-field alert_visitor_lastName"></div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12">
                <div class="mb-2">
                    <div class="form-group">
                        <label for="visitor_mobile" class="required">Mobile</label>
                        <input type="text" id="visitor_mobile" name="visitor[mobile]" required="required"
                               class="visitor_mobile check-input check-input-required  form-control">
                        <div class="alert-validation-field alert_visitor_mobile"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12 visitor_society_bloc">
                <div class="mb-2">
                    {{ form_label(formVisitor.society) }}
                    {{ form_widget(formVisitor.society) }}
                    <div class="alert-validation-field alert_visitor_society"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12 visitor_website_bloc">
                <div class="mb-2">
                    {{ form_label(formVisitor.website) }}
                    {{ form_widget(formVisitor.website) }}
                    <div class="alert-validation-field alert_visitor_website"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12 visitor_job_bloc">
                <div class="mb-2">
                    {{ form_label(formVisitor.job) }}
                    {{ form_widget(formVisitor.job) }}
                    <div class="alert-validation-field alert_visitor_job"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12 visitor_speciality_bloc">
                <div class="mb-2">
                    {{ form_label(formVisitor.speciality) }}
                    {{ form_widget(formVisitor.speciality) }}
                    <div class="alert-validation-field alert_visitor_speciality"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12 visitor_activity_bloc">
                <div class="mb-2">
                    <label for="visitor_activity" class="required">Activité principale</label>
                    <select class=" visitor_activity select2-without-add check-input check-input-required"
                            name="visitor[activity]" id="visitor_activity">
                        <option value="">-- Veuillez choisir votre activité principale --</option>
                        <optgroup label="Solutions orientées Patients">
                            {% for key,activity in principalActivities if (key < 13) %}
                                <option value="{{ activity.id }}">{{ activity.title }}</option>
                            {% endfor %}
                        </optgroup>
                        <optgroup label="Solutions orientées Professionnels">
                            {% for key,activity in principalActivities if (key  >= 13 ) %}
                                <option value="{{ activity.id }}">{{ activity.title }}</option>
                            {% endfor %}
                        </optgroup>
                        <option class="option-autre" value="23">Autre</option>
                    </select>
                    <div class="alert-validation-field alert_visitor_activity"></div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12 visitor_activity_other_bloc">
                <div class="mb-2">
                    <label class="form-label ">Autre</label>
                    <input type="text" id="visitor_activity_other" name="visitor[activity_other]"
                           class="visitor_activity_other check-input check-input-alphabet form-control">
                    <div class="alert-validation-field alert_visitor_activity_other"></div>
                </div>
            </div>
        </div>
    </div>

    <h3 class="header-bloc-email-mdp"></h3>
    <div class="wizard-content bloc-email-mdp">
        <div class="text-center text-dark">
            <h5 class="f-w-100">Saisissez vos paramètres de connexion</h5>
        </div>
        <div class="row mt-3">
            <div class="col-xl-12 col-lg-12 col-sm-12">
                <div class="mb-2">
                    {{ form_label(formVisitor.email, 'Email', {'label_attr': {'class': 'required'}}) }}
                    {{ form_widget(formVisitor.email) }}
                    <div class="alert-validation-field alert_visitor_email"></div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12">
                <div class="mb-2">
                    {{ form_label(formVisitor.firstPassword, 'Mot de passe', {'label_attr': {'class': 'required'}}) }}
                    {{ form_widget(formVisitor.firstPassword) }}
                    <div class="alert-validation-field alert_visitor_firstPassword"></div>
                </div>
                <div class="password-strength-bloc mb-3">
                    <div class="password-strength-text d-none" id="password-strength-text">
                        <span>Fiabilité: </span>
                        <span class="password-strength-text-status"
                              id="password-strength-text-status"></span>
                    </div>
                    <div class="password-strength-bar" id="password-strength-bar">
                        <div class="password-strength-bar-progress"
                             id="password-strength-bar-progress"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12 col-sm-12">
                <div class="mb-2">
                    {{ form_label(formVisitor.secondPassword, 'Répétez le mot de passe', {'label_attr': {'class': 'required'}}) }}
                    {{ form_widget(formVisitor.secondPassword) }}
                    <div class="alert-validation-field alert_visitor_secondPassword"></div>
                </div>
            </div>
        </div>
    </div>

    <h3></h3>
    <div class="wizard-content">
        <div class="text-center text-dark mb-3">
            <h5 class="f-w-100">Choisissez votre formule d'abonnement</h5>
        </div>
        <div>
            <div class="row mt-3 justify-content-center">
                <input class="checkbox-tools visitor_subscription" type="radio" name="visitor[subscription]"
                       id="subscription-1" value="Abonnement Mensuelle" data-price="{{ subscription_monthly_price }}">
                <label class="for-checkbox-tools text-white" for="subscription-1">
                    <i class="fa fa-calendar fa-2x"></i>
                    <p class="mt-3">Abonnement Mensuelle</p>
                    <p class="mt-3">{{ subscription_monthly_price /100 }}£</p>
                </label>
                <input class="checkbox-tools visitor_subscription" type="radio" name="visitor[subscription]"
                       id="subscription-2" value="Abonnement Annuel" data-price="{{ subscription_annual_price }}">
                <label class="for-checkbox-tools text-white" for="subscription-2">
                    <i class="far fa-calendar-alt fa-2x"></i>
                    <p class="mt-3">Abonnement Annuel</p>
                    <p class="mt-3">{{ subscription_annual_price /100 }}£</p>
                </label>
            </div>
            <div class="alert-validation-field text-center alert_visitor_subscription"></div>
            <div class="text-center mt-2">
                <h6>
                    <span class="badge badge-info"><b>NB:</b> version d'essai 7j</span>
                </h6>
            </div>
        </div>
    </div>

    <h3></h3>
    <div class="wizard-content">
        <div class="text-center text-dark mb-3">
            <h5 class="f-w-100">Saisissez vos paramètres de paiement </h5>
        </div>
        <span class="paymentErrors"></span>
        <div class="panel-body" id="paymentForm">

            <div class="row mt-3 mb-3">
                <div class="col-xl-6 col-lg-12 col-sm-12">

                    <div class="mb-2">
                        <label for="name" class="required">Nom du titulaire</label>
                        <input type="text" name="custName" id="custName" class="form-control" value="Visa">
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="custEmail" id="custEmail" class="form-control">
                    </div>
                </div>
                <div class="col-xl-6 col-lg-12 col-sm-12">
                    <div class="mb-2 ">
                        <label class="required">N° carte</label>
                        <input type="text" name="cardNumber" id="cardNumber" size="20" autocomplete="off"
                               id="cardNumber"
                               class="form-control" value="4242424242424242"/>
                    </div>
                </div>

            </div>

            <div class="row mt-3 mb-3">

                <div class="col-xl-3 col-lg-12 col-sm-12">
                    <div class="mb-2 ">
                        <label class="required">CVC</label>
                        <input type="text" name="cardCVC" id="cardCVC" size="4" autocomplete="off" id="cardCVC"
                               class="form-control" value="123"/>
                    </div>
                </div>


                <div class="col-xl-9 col-lg-12 col-sm-12">
                    <div class="row">
                        <label class="required">Expiration (MM/YYYY)</label>
                        <div class="col-xl-4 col-lg-12 col-sm-12">
                            <div class="mb-2">
                                <select type="text" name="cardExpMonth" id="cardExpMonth" placeholder="MM"
                                        class=" form-control select2-without-add check-input"
                                        class="form-control">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-xl-8 col-lg-12 col-sm-12">
                            <div class="mb-2 ">
                                <select name="cardExpYear" id="cardExpYear" placeholder="YYYY"
                                        class="form-control select2-without-add check-input"></select>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <p>Rq: cette maquette type est dépendante de L'API de la banque à intégrer</p>
        <label><input type="checkbox" class="general-condition checkbox_animated survey_shared mt-2" checked>
            J'accepte les conditions générales et la politique de confidentialité.</label>
    </div>

    {{ form_end(formVisitor) }}

    <div class="modal fade" id="modal-date-nais" tabindex="-1" aria-labelledby="exampleModalLabel"
         style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Êtes-vous mandataire social ?</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"
                            data-bs-original-title="" title=""></button>
                </div>
                <div class="modal-body">
                    <label class="form-label">Veuillez renseigner votre date de naissance :</label>
                    <input
                            class="form-control datepicker-here digits check-input check-input-required birthdate"
                            type="text" name="" id="birthdate"
                            value="" placeholder="jj-mm-aaaa"></div>
                <div class="modal-footer">
                    <button class="btn btn-primary btn-accept" type="button">Valider</button>
                </div>
            </div>
        </div>
    </div>

{% endblock fos_user_content %}

{% block javascripts %}

    {{ parent() }}

    <script src="{{ asset('assets/js/datepicker/date-picker/datepicker.js') }}"></script>
    <script src="{{ asset('assets/js/datepicker/date-picker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/jquery-steps/jquery.steps.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/js/intlTelInput/intlTelInput.js') }}"></script>


    <script>
        var errorMessages = {
            account_already_exists: "L'adresse e-mail fournie pour la création d'un compte différé est déjà associée à un compte. Utilisez le flux OAuth pour connecter le compte existant à votre plateforme.",
            account_country_invalid_address: " Le pays de l'adresse professionnelle fournie ne correspond pas au pays du compte. Les entreprises doivent être situées dans le même pays que le compte.",
            account_invalid: " L'ID de compte fourni comme valeur pour l'en-tête Stripe-Account n'est pas valide. Vérifiez que vos demandes spécifient un identifiant de compte valide.",
            account_number_invalid: " Le numéro de compte bancaire fourni n'est pas valide (par exemple, des chiffres manquants). Les informations de compte bancaire varient d'un pays à l'autre. Nous vous recommandons de créer des validations dans vos formulaires de saisie en fonction des formats de compte bancaire que nous fournissons.",
            alipay_upgrade_required: " Cette méthode de création de paiements Alipay n'est plus prise en charge. Veuillez mettre à niveau votre intégration pour utiliser des sources à la place.",
            amount_too_large: " Le montant spécifié est supérieur au montant maximum autorisé. Utilisez une quantité inférieure et réessayez.",
            amount_too_small: " Le montant spécifié est inférieur au montant minimum autorisé. Utilisez une quantité plus élevée et réessayez.",
            api_key_expired: " La clé API fournie a expiré. Obtenez vos clés API actuelles à partir du tableau de bord et mettez à jour votre intégration pour les utiliser.",
            balance_insufficient: " Le transfert ou le paiement n'a pas pu être effectué car le compte associé ne dispose pas d'un solde disponible suffisant. Créez un nouveau virement ou paiement en utilisant un montant inférieur ou égal au solde disponible du compte.",
            bank_account_exists: " Le compte bancaire fourni existe déjà sur l'objet Client spécifié. Si le compte bancaire doit également être associé à un autre client, indiquez le bon numéro de client lors de la nouvelle demande.",
            bank_account_unusable: " Le compte bancaire fourni ne peut pas être utilisé pour les paiements. Un autre compte bancaire doit être utilisé.",
            bank_account_unverified: " Votre plateforme Connect tente de partager un compte bancaire non vérifié avec un compte connecté.",
            bitcoin_upgrade_required: " Cette méthode de création de paiements Bitcoin n'est plus prise en charge. Veuillez mettre à niveau votre intégration pour utiliser des sources à la place.",
            card_declined: " La carte a été refusée. Lorsqu'une carte est refusée, l'erreur renvoyée inclut également l'attribut déclin_code avec la raison pour laquelle la carte a été refusée. Consultez notre documentation sur les codes de refus pour en savoir plus.",
            charge_already_captured: " La charge que vous essayez de capturer a déjà été capturée. Mettez à jour la demande avec un ID de facturation non capturé.",
            charge_already_refunded: " Les frais que vous essayez de rembourser ont déjà été remboursés. Mettez à jour la demande d'utilisation de l'ID d'une charge qui n'a pas été remboursée.",
            charge_disputed: " Les frais que vous essayez de rembourser ont été remboursés. Consultez la documentation relative aux litiges pour savoir comment réagir au litige.",
            charge_exceeds_source_limit: " Ces frais vous amèneraient à dépasser votre limite de traitement de la fenêtre glissante pour ce type de source. Veuillez réessayer les frais plus tard ou contactez-nous pour demander une limite de traitement plus élevée.",
            charge_expired_for_capture: " La charge ne peut pas être capturée car l'autorisation a expiré. Les frais d'authentification et de capture doivent être saisis dans les sept jours.",
            country_unsupported: " Votre plate-forme a tenté de créer un compte personnalisé dans un pays qui n'est pas encore pris en charge. Assurez-vous que les utilisateurs ne peuvent s'inscrire que dans les pays pris en charge par des comptes personnalisés.",
            coupon_expired: " Le coupon fourni pour un abonnement ou une commande a expiré. Créez un nouveau coupon ou utilisez-en un existant valide.",
            customer_max_subscriptions: " Le nombre maximum d'abonnements pour un client a été atteint. Contactez-nous si vous recevez cette erreur.",
            email_invalid: " L'adresse e-mail n'est pas valide (par exemple, n'est pas correctement formatée). Vérifiez que l'adresse e-mail est correctement formatée et ne comprend que les caractères autorisés.",
            expired_card: " La carte a expiré. Vérifiez la date d'expiration ou utilisez une autre carte.",
            idempotency_key_in_use: " La clé d'idempotence fournie est actuellement utilisée dans une autre demande. Cela se produit si votre intégration effectue des demandes en double simultanément.",
            incorrect_address: " L’adresse de la carte est incorrecte. Vérifiez l’adresse de la carte ou utilisez une autre carte.",
            incorrect_cvc: " Le code de sécurité de la carte est incorrect. Vérifiez le code de sécurité de la carte ou utilisez une autre carte.",
            incorrect_number: " Le numéro de carte est incorrect. Vérifiez le numéro de la carte ou utilisez une autre carte.",
            incorrect_zip: " Le code postal de la carte est incorrect. Vérifiez le code postal de la carte ou utilisez une autre carte.",
            instant_payouts_unsupported: " La carte de débit fournie en tant que compte externe ne prend pas en charge les paiements instantanés. Fournissez une autre carte de débit ou utilisez un compte bancaire à la place.",
            invalid_card_type: " La carte fournie en tant que compte externe n'est pas une carte de débit. Fournissez une carte de débit ou utilisez plutôt un compte bancaire.",
            invalid_charge_amount: " Le montant spécifié n'est pas valide. Le montant des frais doit être un entier positif dans la plus petite unité monétaire et ne pas dépasser le montant minimum ou maximum.",
            invalid_cvc: " Le code de sécurité de la carte n’est pas valide. Vérifiez le code de sécurité de la carte ou utilisez une autre carte.",
            invalid_expiry_month: " Le mois d'expiration de la carte est incorrect. Vérifiez la date d'expiration ou utilisez une autre carte.",
            invalid_expiry_year: " L’année d’expiration de la carte est incorrecte. Vérifiez la date d'expiration ou utilisez une autre carte.",
            invalid_number: " Le numéro de carte n'est pas valide. Vérifiez les détails de la carte ou utilisez une autre carte.",
            invalid_source_usage: " La source ne peut pas être utilisée car elle n'est pas dans l'état correct (par exemple, une demande de facturation tente d'utiliser une source avec une source en attente, en échec ou consommée). Vérifiez l'état de la source que vous essayez d'utiliser.",
            invoice_no_customer_line_items: " Une facture ne peut pas être générée pour le client spécifié car il n'y a aucun poste de facture en attente. Vérifiez que le bon client est spécifié ou créez d'abord les éléments de facture nécessaires.",
            invoice_no_subscription_line_items: " Une facture ne peut pas être générée pour l'abonnement spécifié car il n'y a aucun élément de facture en attente. Vérifiez que l'abonnement correct est spécifié ou créez d'abord les éléments de facture nécessaires.",
            invoice_not_editable: " La facture spécifiée ne peut plus être modifiée. Au lieu de cela, envisagez de créer des éléments de facture supplémentaires qui seront appliqués à la prochaine facture. Vous pouvez soit générer manuellement la prochaine facture, soit attendre qu'elle soit générée automatiquement à la fin du cycle de facturation.",
            invoice_upcoming_none: " Il n'y a pas de facture à venir sur le client spécifié à prévisualiser. Seuls les clients avec des abonnements actifs ou des éléments de facture en attente ont des factures qui peuvent être prévisualisées.",
            livemode_mismatch: " Les clés d'API, les requêtes et les objets en mode test et en direct ne sont disponibles que dans le mode dans lequel ils se trouvent.",
            missing: " Un client et un identifiant source ont été fournis, mais la source n'a pas été enregistrée pour le client. Pour créer des frais pour un client avec une source spécifiée, vous devez d'abord enregistrer les détails de la carte.",
            not_allowed_on_standard_account: " Les transferts et paiements au nom d'un compte connecté Standard ne sont pas autorisés.",
            order_creation_failed: " La commande n'a pas pu être créée. Vérifiez les détails de la commande, puis réessayez.",
            order_required_settings: " La commande n'a pas pu être traitée car il manque les informations requises. Vérifiez les informations fournies et réessayez.",
            order_status_invalid: " La commande ne peut pas être mise à jour car le statut fourni est soit invalide, soit ne suit pas le cycle de vie de la commande (par exemple, une commande ne peut pas passer de créée à exécutée sans passer d'abord à payée).",
            order_upstream_timeout: " La demande a expiré. Réessayez plus tard.",
            out_of_inventory: " Le SKU est en rupture de stock. Si plus de stock est disponible, mettez à jour la quantité d'inventaire du SKU et réessayez.",
            parameter_invalid_empty: " Une ou plusieurs valeurs obligatoires n'ont pas été fournies. Assurez-vous que les demandes incluent tous les paramètres requis.",
            parameter_invalid_integer: " Un ou plusieurs paramètres nécessitent un entier, mais les valeurs fournies étaient d'un type différent. Assurez-vous que seules les valeurs prises en charge sont fournies pour chaque attribut. Reportez-vous à notre documentation API pour rechercher le type de données pris en charge par chaque attribut.",
            parameter_invalid_string_blank: " Une ou plusieurs valeurs fournies incluaient uniquement des espaces. Vérifiez les valeurs de votre demande et mettez à jour celles qui ne contiennent que des espaces.",
            parameter_invalid_string_empty: " Une ou plusieurs valeurs de chaîne obligatoires sont vides. Assurez-vous que les valeurs de chaîne contiennent au moins un caractère.",
            parameter_missing: " Une ou plusieurs valeurs obligatoires sont manquantes. Consultez notre documentation API pour voir quelles valeurs sont requises pour créer ou modifier la ressource spécifiée.",
            parameter_unknown: " La demande contient un ou plusieurs paramètres inattendus. Supprimez-les et réessayez.",
            parameters_exclusive: " Au moins deux paramètres mutuellement exclusifs ont été fournis. Consultez notre documentation API ou le message d'erreur renvoyé pour voir quelles valeurs sont autorisées lors de la création ou de la modification de la ressource spécifiée.",
            payment_intent_authentication_failure: " L'authentification de la source fournie a échoué. Fournissez source_data ou une nouvelle source pour tenter de remplir à nouveau ce PaymentIntent.",
            payment_intent_incompatible_payment_method: " PaymentIntent s'attendait à un mode de paiement avec des propriétés différentes de celles fournies.",
            payment_intent_invalid_parameter: " Un ou plusieurs paramètres fournis n'étaient pas autorisés pour l'opération donnée sur PaymentIntent. Consultez notre référence API ou le message d'erreur renvoyé pour voir quelles valeurs n'étaient pas correctes pour ce PaymentIntent.",
            payment_intent_payment_attempt_failed: " La dernière tentative de paiement pour PaymentIntent a échoué. Vérifiez la propriété last_payment_error sur le PaymentIntent pour plus de détails, et indiquez source_data ou une nouvelle source pour tenter à nouveau de remplir ce PaymentIntent.",
            payment_intent_unexpected_state: " L'état de PaymentIntent était incompatible avec l'opération que vous tentiez d'effectuer.",
            payment_method_unactivated: " Les frais ne peuvent pas être créés car le mode de paiement utilisé n'a pas été activé. Activez le mode de paiement dans le tableau de bord, puis réessayez.",
            payment_method_unexpected_state: " L'état du mode de paiement fourni était incompatible avec l'opération que vous tentiez d'effectuer. Vérifiez que le mode de paiement est dans un état autorisé pour l'opération donnée avant de tenter de l'exécuter.",
            payouts_not_allowed: " Les paiements ont été désactivés sur le compte connecté. Vérifiez l'état du compte connecté pour voir si des informations supplémentaires doivent être fournies ou si les paiements ont été désactivés pour une autre raison.",
            platform_api_key_expired: " La clé API fournie par votre plateforme Connect a expiré. Cela se produit si votre plateforme a généré une nouvelle clé ou si le compte connecté a été déconnecté de la plateforme. Obtenez vos clés API actuelles à partir du tableau de bord et mettez à jour votre intégration, ou contactez l'utilisateur et reconnectez le compte.",
            postal_code_invalid: " Le code postal fourni était incorrect.",
            processing_error: " Une erreur s'est produite lors du traitement de la carte. Vérifiez que les détails de la carte sont corrects ou utilisez une autre carte.",
            product_inactive: " Le produit auquel ce SKU appartient n'est plus disponible à l'achat.",
            rate_limit: " Trop de demandes atteignent l'API trop rapidement. Nous recommandons un délai exponentiel de vos demandes.",
            resource_already_exists: " Une ressource avec un ID spécifié par l'utilisateur (par exemple, plan ou coupon) existe déjà. Utilisez une valeur différente et unique pour id et réessayez.",
            resource_missing: " L'identifiant fourni n'est pas valide. Soit la ressource n'existe pas, soit un ID pour une ressource différente a été fourni.",
            routing_number_invalid: " Le numéro d'acheminement bancaire fourni n'est pas valide.",
            secret_key_required: " La clé API fournie est une clé publiable, mais une clé secrète est requise. Obtenez vos clés API actuelles à partir du tableau de bord et mettez à jour votre intégration pour les utiliser.",
            sepa_unsupported_account: " Votre compte ne prend pas en charge les paiements SEPA.",
            shipping_calculation_failed: " Le calcul de l'expédition a échoué car les informations fournies étaient incorrectes ou n'ont pas pu être vérifiées.",
            sku_inactive: " Le SKU est inactif et n'est plus disponible à l'achat. Utilisez un SKU différent ou réactivez le SKU actuel.",
            state_unsupported: " Se produit lors de la fourniture des informations legal_entity pour un compte personnalisé américain, si l'état fourni n'est pas pris en charge. (Il s'agit principalement d'états et de territoires associés.)",
            tax_id_invalid: " Le numéro d'identification fiscale fourni n'est pas valide (par exemple, des chiffres manquants). Les informations d'identification fiscale varient d'un pays à l'autre, mais doivent comporter au moins neuf chiffres.",
            taxes_calculation_failed: " Le calcul de la taxe pour la commande a échoué.",
            testmode_charges_only: " Votre compte n'a pas été activé et ne peut effectuer que des frais de test. Activez votre compte dans le tableau de bord pour commencer à traiter les frais réels.",
            tls_version_unsupported: " Votre intégration utilise une ancienne version de TLS qui n'est pas prise en charge. Vous devez utiliser TLS 1.2 ou supérieur.",
            token_already_used: " Le jeton fourni a déjà été utilisé. Vous devez créer un nouveau jeton avant de pouvoir réessayer cette demande.",
            token_in_use: " Le jeton fourni est actuellement utilisé dans une autre demande. Cela se produit si votre intégration effectue des demandes en double simultanément.",
            transfers_not_allowed: " Le transfert demandé ne peut pas être créé. Contactez-nous si vous recevez cette erreur.",
            upstream_order_creation_failed: " La commande n'a pas pu être créée. Vérifiez les détails de la commande, puis réessayez.",
            url_invalid: " L'URL fournie n'est pas valide."
        };


        $(document).ready(function () {

            var currentYear = new Date().getFullYear();
            max = currentYear + 10;
            var option = "";
            for (var year = currentYear; year <= max; year++) {

                var option = document.createElement("option");
                option.text = year;
                option.value = year;

                document.getElementById("cardExpYear").appendChild(option)

            }
            document.getElementById("cardExpYear").value = currentYear;

        });
        var wizard = $('#fos_user_registration_register_form');
        wizard.steps({
            headerTag: "h3",
            bodyTag: '.wizard-content',
            autoFocus: false,
            enableAllSteps: false,
            titleTemplate: '<span class="number">#index#</span><span class="title">#title#</span>',
            onStepChanging: function (event, currentIndex, newIndex) {
                let input_first_password = $('#visitor_firstPassword'),
                    input_second_password = $('#visitor_secondPassword'),
                    alert_second_password = $('.alert_visitor_secondPassword'),
                    alert_visitor_category = $('.alert_visitor_category'),
                    alert_visitor_subscription = $('.alert_visitor_subscription'),
                    input_visitor_category_checked = $('.visitor_category:checked')
                ;
                $('.alert-validation-field').hide();
                input_second_password.removeClass("is-invalid").css("border-color", "1px solid #e6e8eb");
                let bool = verifyRequiredFieldsAlert();

                if (newIndex < currentIndex) {
                    return true;
                }

                if (newIndex === 1) {
                    if (input_visitor_category_checked.length === 0) {
                        alert_visitor_category.show().text('Ce champs est obligatoire!');
                        bool = false;
                    } else {
                        if (input_visitor_category_checked.val() == 3) {
                            $('.visitor_job_bloc').hide();
                            $('.visitor_speciality_bloc').show();
                            $('.visitor_activity_bloc').show();
                            $('.visitor_speciality_bloc label').addClass("required");
                            $('.visitor_speciality_bloc .visitor_speciality').addClass("check-input-required");
                            $('.visitor_society_bloc label').removeClass("required");
                            $('.visitor_society_bloc .visitor_society').removeClass("check-input-required");
                        } else if (input_visitor_category_checked.val() == 4) {
                            $('.visitor_job_bloc').show();
                            $('.visitor_speciality_bloc').hide();
                            $('.visitor_activity_bloc').show();
                            $('.visitor_society_bloc label').removeClass("required");
                            $('.visitor_society_bloc .visitor_society').removeClass("check-input-required");
                            $('.visitor_job_bloc label').removeClass("required");
                            $('.visitor_job_bloc .visitor_job').removeClass("check-input-required");
                        } else {
                            $('.visitor_job_bloc').show();
                            $('.visitor_speciality_bloc').hide();
                            $('.visitor_activity_bloc').show();
                            $('.visitor_society_bloc label').addClass("required");
                            $('.visitor_society_bloc .visitor_society').addClass("check-input-required");
                            $('.visitor_job_bloc label').addClass("required");
                            $('.visitor_job_bloc .visitor_job').addClass("check-input-required");
                        }
                    }
                }

                if (newIndex == 2) {
                    var societyExist = 'false',
                        mobileExist = 'false',
                        verifyBool = verifyRequiredFieldsAlert(),
                        errorMsg = $('.alert_visitor_mobile'),
                        errorMap = ["Numéro invalide", "Numéro invalide", "Numéro invalide", "Numéro invalide", "Numéro invalide"];

                    if ($('.visitor_mobile').val() !== '') {
                        if (input.value.trim() && !(iti.isValidNumber())) {
                            var errorCode = iti.getValidationError();
                            $('.visitor_mobile').css('border', 'unset');
                            $('.visitor_mobile').addClass('is-invalid');
                            $('.visitor_mobile').css('border', '1px solid #dc3545');
                            errorMsg.text(errorMap[errorCode]);
                            errorMsg.show();
                            verifyBool = false;
                        } else if (!$('.visitor_mobile').val().match(/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/)) {
                            $('.visitor_mobile').css('border', 'unset');
                            $('.visitor_mobile').addClass('is-invalid');
                            $('.visitor_mobile').css('border', '1px solid #dc3545');
                            errorMsg.text("Ce champs doit contenir que des numéros de téléphones!");
                            errorMsg.show();
                            verifyBool = false;
                        } else {
                            $('.visitor_mobile').css('border', '1px solid #E6E8EB');
                        }
                    } else {
                        $('.visitor_mobile').css('border', 'unset');
                        $('.visitor_mobile').addClass('is-invalid');
                        $('.visitor_mobile').css('border', '1px solid #dc3545');
                    }

                    if (!verifyBool) {
                        return false;
                    }

                    $.ajax({
                        url: "{{ path('verify_mobile_exist_ajax') }}",
                        method: 'POST',
                        dataType: "json",
                        async: false,
                        data: {
                            mobile: $('.visitor_mobile').val(),
                        },
                        success: function (response) {
                            if (response.status === 200) {
                                mobileExist = 'true';
                            } else if (response.status === 500) {
                                showNotify("Avertissement", response.message, 'warning');
                            } else {
                                showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                            }
                        }
                    });
                    if ($('#visitor_society').val() != '') {

                        $.ajax({
                            url: "{{ api_society_internal_link }}/society/verifyExistance",
                            method: 'GET',
                            dataType: "json",
                            async: false,
                            data: {
                                socialReason: $('.visitor_society').val(),
                            },
                            success: function (response) {
                                if (response.status === 200) {
                                    societyExist = 'true';
                                } else if (response.status === 500) {
                                    showNotify("Avertissement", response.message, 'warning');
                                } else {
                                    showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                                }
                            }
                        });
                    } else {
                        societyExist = 'true';
                    }

                    return (mobileExist === 'true') && (societyExist === 'true');
                }

                if (newIndex === 4 && ($('.visitor_subscription:checked').length === 0)) {
                    alert_visitor_subscription.show().text('Ce champs est obligatoire!');
                    bool = false;
                }

                if (newIndex === 3) {
                    if (!verifyRequiredFieldsAlert()) {
                        return false;
                    }
                    if ((input_first_password.val() !== input_second_password.val())) {
                        input_second_password.addClass("is-invalid");
                        alert_second_password.show().text('Les deux mots de passes ne sont pas identiques!');
                        return false;
                    }
                    var mailExist = 'false';
                    $.ajax({
                        url: "{{ path('verify_email_exist_ajax') }}",
                        method: 'POST',
                        dataType: "json",
                        async: false,
                        data: {
                            email: $('.visitor_email').val(),
                        },
                        success: function (response) {
                            if (response.status === 200) {
                                mailExist = 'true';
                            } else if (response.status === 500) {
                                showNotify("Avertissement", response.message, 'warning');
                            } else {
                                showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                            }
                        }
                    });
                    return (mailExist === 'true');
                }
                return bool;
            },
            onStepChanged: function (event, currentIndex, priorIndex) {
                if (currentIndex > 0) {
                    $('.wizard').find(".actions ul > li > a[href='#previous']").css("display", "block");
                    $('.wizard').find(".actions ul > li.previous-login").css("display", "none");

                } else {
                    $('.wizard').find(".actions ul > li > a[href='#previous']").css("display", "none");
                    $('.wizard').find(".actions ul > li.previous-login").css("display", "block");
                }
                if (currentIndex === 4) {
                    $('.wizard').find(".actions ul > li.previous-login").css("display", "none");
                    $('.wizard').find(".actions ul > li > a[href='#previous']").css("display", "none");
                }
                if (currentIndex === 2) {
                    $('.visitor_email').focus();
                }
            },
            onFinishing: function (event, currentIndex) {
                let category = $('.visitor_category:checked').val(),
                    formData = new FormData(document.getElementById('fos_user_registration_register_form')),
                    mobileCountry = iti.getSelectedCountryData().iso2,
                    type_abonnement = $('.visitor_subscription:checked').val(),
                    price_abonnement = $('.visitor_subscription:checked').attr('data-price');
                formData.set('visitor[mobileCountry]', mobileCountry);

                formData.set('visitor[mobileCountry]', mobileCountry);
                if (category == 1 || category == 4 || category == 5) {
                    formData.set("visitor[speciality]", "");
                } else if (category == 3) {
                    formData.set("visitor[job]", "");
                }
                if ($('.general-condition').is(':checked')) {

                    // set your stripe publishable key
                    Stripe.setPublishableKey('pk_test_51JWxW8DSYk2sf0oQY89s7z7DdudDEwUiqubex0pnOcAlM6b81YCtiqhIXdtxpxnPV1q0YffvukGDd33Htnms1KSd00HpW7gCx6');

                    $('.btn-info').hide();
                    // create stripe token to make payment
                    Stripe.createToken({
                        number: $('#cardNumber').val(),
                        cvc: $('#cardCVC').val(),
                        exp_month: $('#cardExpMonth').val(),
                        exp_year: $('#cardExpYear').val()
                    }, handleStripeResponse);

                    // handle the response from stripe
                    var stripeToken = "";
                    var mail = $('.visitor_email').val();
                    $('#custEmail').val(mail);

                    function handleStripeResponse(status, response) {
                        console.log(JSON.stringify(response));
                        if (response.error && response.error.type == 'card_error') {
                            $('.btn-info').show();

                            $('.paymentErrors').text(errorMessages[response.error.code]);
                        } else {
                            var payForm = $("#paymentForm");
                            //get stripe token id from response
                            stripeToken = response['id'];
                            //set the token into the form hidden input to make payment
                            payForm.append("<input type='hidden' name='stripeToken' id='stripeToken' value='" + stripeToken + "' />");
                            // payForm.get(0).submit();
                            $.ajax({
                                url: "{{ path('process_payement') }}",
                                method: 'POST',
                                data: {
                                    stripeToken: stripeToken,
                                    custName: $('#custName').val(),
                                    custEmail: $('#custEmail').val(),
                                    cardNumber: $('#cardNumber').val(),
                                    cardCVC: $('#cardCVC').val(),
                                    cardExpMonth: $('#cardExpMonth').val(),
                                    cardExpYear: $('#cardExpYear').val(),
                                    itemName: type_abonnement,
                                    itemPrice: price_abonnement,

                                },

                                success: function (response) {
                                    if (response.status === 200) {
                                        showNotify("Succès", response.message, 'info');
                                        Savecompte();


                                    } else if (response.status === 500) {
                                        showNotify("Avertissement", response.message, 'warning');
                                    } else {
                                        showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                                    }
                                }
                            });

                            function Savecompte() {
                                $.ajax({
                                    url: "{{ path('fos_user_registration_register') }}",
                                    method: 'POST',
                                    enctype: 'multipart/form-data',
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    cache: false,
                                    success: function (response) {
                                        if (response.status === 200) {
                                            location.href = ("{{ path('fos_user_security_login') }}");
                                        } else if (response.status === 500) {
                                            showNotify("Avertissement", response.message, 'warning');
                                        } else {
                                            showNotify("Erreur", 'Merci de contacter l\'admin!', 'danger');
                                        }
                                    }
                                });

                            }
                        }
                    }
                } else {
                    showNotify("Avertissement", 'Vous devez accepter les conditions générales et la politique de confidentialité!', 'warning');
                }
            },
            onFinished: function (event, currentIndex) {
            }
        });
        $('.wizard').find(".actions ul > li > a[href='#previous']").addClass("btn btn-outline-primary").css("display", "none");
        $('.wizard').find(".actions ul > li > a[href='#next']").addClass("btn btn-primary");
        $('.wizard').find(".actions ul > li > a[href='#finish']").addClass("btn btn-info");
        wizard.find($('ul[aria-label=Pagination]>li:first-child')).before('<li class="previous-login"><a href="{{ path("fos_user_security_login") }}" class="btn btn-outline-primary">Précédent</a></li>');

        $('.wizard[data-style="1"]').find(".steps ul li:eq(0) span.number").html("<i class=\"fa fa-briefcase\"></i>");
        $('.wizard[data-style="1"]').find(".steps ul li:eq(1) span.number").html("<i class=\"fa fa-user\"></i>");
        $('.wizard[data-style="1"]').find(".steps ul li:eq(2) span.number").html("<i class=\"fa fa-lock\"></i>");
        $('.wizard[data-style="1"]').find(".steps ul li:eq(3) span.number").html("<i class=\"fa fa-calendar\"></i>");
        $('.wizard[data-style="1"]').find(".steps ul li:eq(4) span.number").html("<i class=\"fa fa-credit-card\"></i>");
    </script>

    <script>
        $(".check-input-strength").on("keyup", function () {
            checkPasswordStrength($(this).val());
        });

        $(".visitor_activity").on("change", function () {
            if ($('.visitor_activity').val() == 23) {
                $('.visitor_activity_other_bloc').show();
                $('.visitor_activity_other_bloc label').addClass("required");
                $('.visitor_activity_other_bloc .visitor_activity_other').addClass("check-input-required");
            } else {
                $('.visitor_activity_other_bloc').hide();
                $('.visitor_activity_other_bloc label').removeClass("required");
                $('.visitor_activity_other_bloc .visitor_activity_other').removeClass("check-input-required");
            }
        });

        $('form').on('keyup', 'a[href="#next"], a[href="#finish"], input,  select, span.select2', function (e) {
            if (e.which == 13 || e.keyCode == 13) {
                $('select2').focusout();
                e.preventDefault();
                var self = $(this),
                    form = self.parents('form:eq(0)'),
                    focusfields, next;

                focusfields = form.find('a[href="#next"],a[href="#finish"], input,select, span.select2').filter(':visible');
                next = focusfields.eq(focusfields.index(this) + 1);

                if (next.length) {
                    next.focus();
                }
            }
        });

        $(document).on('focus', '.select2.select2-container', function (e) {
            var isOriginalEvent = e.originalEvent;
            var isSingleSelect = $(this).find(".select2-selection--single").length > 0;

            if (isOriginalEvent && isSingleSelect) {
                $(this).siblings('select:enabled').select2('open');
            }
        });
    </script>
    <script>
        var input = document.querySelector("#visitor_mobile");
        var iti = window.intlTelInput(input, {
            utilsScript: "{{ asset('assets/js/intlTelInput/utils.js') }}",
            initialCountry: "fr",
        });
        if (wizard.steps("getCurrentIndex") === 0) {
            $(document).on('keyup', function (e) {
                if (e.which == 13 || e.keyCode == 13) {
                    wizard.steps("next");
                    $('.visitor_firstName').focus();
                }
            });
        }
        $(".select2-without-add").select2();

        $(document).on('click', '.btn-accept', function () {
            $('#modal-date-nais').modal('hide');
        });

        //  $("#fos_user_registration_register_form").steps("remove", 2);
        $('.wizard[data-style="1"]').find(".steps ul li:eq(2) span.number").html("<i class=\"fa fa-calendar\"></i>");
        $('.wizard[data-style="1"]').find(".steps ul li:eq(3) span.number").html("<i class=\"fa fa-credit-card\"></i>");

    </script>

{% endblock %}