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

{% block body %}

    <div class="row">
        <div class="col-12 text--center">
            <h1>
                {% trans %}Devenez client professionnel{% endtrans %}
            </h1>
            <span class="c-title-divider" style=""></span>
        </div>
    </div>
    <br /> <br />
    <div class="row">
        <div class="col text--center">
            <h4 style="text-align: center;"><em style="color: black;">{% trans %}Kusmi s’invite à la carte de votre restaurant, de votre room-service ou encore aux pauses thés de vos collaborateurs.{% endtrans %}</em></h4><h4 style="text-align: center;"><em style="color: black;">&#xFEFF;{% trans %}Découvrez notre offre de thé adaptée aux professionnels et faites le choix des </em><strong><em>thés et infusions bio</em></strong><em> et </em><strong><em>made in Normandie</em></strong><em> avec Kusmi.{% endtrans%}</em></h4>
        </div>
    </div>

    <div class="row">
        <div class="col text--center">
            <h2><strong>{% trans %}COMMENT S’INSCRIRE ?{% endtrans %}</strong></h2>
            <div class="row text--center" id="etape1">
                <h4 style="text-align: center;"><span style="color: black;">{% trans %}Complétez notre formulaire en cliquant sur "créer mon compte" pour demander la création de votre compte client. Après validation par notre service commercial, vous recevrez un e-mail de confirmation.{% endtrans %}</span></h4>
            </div>
            <span class="c-title-divider" style=""></span>
        </div>
    </div>

    <br /><br />
    <div class="row" style="align-items: center; justify-content: center;">
        <div class="col-4 block-chr"><h2 style="text-align: center;"><strong>{% trans %}HÔTEL<br />CAFÉ&nbsp;ET&nbsp;RESTAURANT<br />GROSSISTE CHR{% endtrans %}</strong></h2></div>
        <div class="col-4 block-entreprise"><h2 style="text-align: center;"><strong>{% trans %}ENTREPRISES ET BUREAUX{% endtrans %}</strong></h2></div>
        <div class="col-4 block-revendeur"><h2 style="text-align: center;"><strong>{% trans %}REVENDEURS{% endtrans %}</strong></h2></div>
    </div>
    <div class="row">
        <div class="col-4 container-img-overlay block-chr" style="background-image:url('{{ asset('images/Cafe-Hotel-Restaurant-R_V4.png') }}')" >
            <div class="cta-img-overlay" onclick="toggleCreationForm('CHR', '{% trans %}HÔTEL, CAFÉ ET RESTAURANT{% endtrans %}')"><a style="color:black" href="#etape1">> {% trans %}Créer mon compte{% endtrans %}</a></div></div>
        <div class="col-4 container-img-overlay block-entreprise" style="background-image:url('{{ asset('images/KusmiBtoB-0585-R_V4.png') }}')">
            <div class="cta-img-overlay" onclick="toggleCreationForm('ENTREPRISE', '{% trans %}ENTREPRISES ET BUREAUX{% endtrans %}')"><a style="color:black" href="#etape1">> {% trans %}Créer mon compte{% endtrans %}</a></div></div>
        <div class="col-4 container-img-overlay block-revendeur" style="background-image:url('{{ asset('images/revendeur-kusmi-R_V4.png') }}')">
            <div class="cta-img-overlay" onclick="toggleCreationForm('REVENDEUR', '{% trans %}REVENDEURS{% endtrans %}')"><a style="color:black" href="#etape1">> {% trans %}Créer mon compte{% endtrans %}</a></div></div>
    </div>
    <div class="row">
        <div class="col-4 block-chr"><h4 style="text-align: center;"><span style="background-color: transparent; color: rgb(0, 0, 0);">{% trans %}Ajoutez les thés et infusions Kusmi à votre menu.{% endtrans %}</span></h4></div>
        <div class="col-4 block-entreprise"><h4 style="text-align: center;"><span style="background-color: transparent; color: rgb(0, 0, 0);">{% trans %}Kusmi en entreprise : offrez une pause thé bio à vos collaborateurs{% endtrans %}</span></h4></div>
        <div class="col-4 block-revendeur"><h4 style="text-align: center;"><span style="background-color: transparent; color: rgb(0, 0, 0);">{% trans %}Envie de revendre nos thés et infusions bio made in Normandie ? C’est possible !{% endtrans %}</span></h4></div>
    </div>
    <div class="row"> <!-- TITRE-->
        <div class="col-4 text--center block-chr"><a href="{{ asset('pdf/Catalogue_Consommation_Hors_Domicile_KusmiTea.pdf') }}" target="_blank" rel="noopener noreferrer" data-link-type="external" data-link-label="/on/demandware.static/-/Library-Sites-Kusmi_Shared/default/doc/Formulaires_retractation//BROCHURE_CHR_2021_9_BD.pdf" style="color: rgb(0, 0, 0);"><strong><u>{% trans %}Découvrez notre brochure{% endtrans %}</u></strong></a></div>
        <div class="col-4 text--center block-entreprise"><a href="{{ asset('pdf/Catalogue_Consommation_Hors_Domicile_KusmiTea.pdf') }}" target="_blank" rel="noopener noreferrer" data-link-type="external" data-link-label="/on/demandware.static/-/Library-Sites-Kusmi_Shared/default/doc/Formulaires_retractation//BROCHURE_CHR_2021_9_BD.pdf" style="color: rgb(0, 0, 0);"><strong><u>{% trans %}Découvrez notre brochure{% endtrans %}</u></strong></a></div>
        <div class="col-4 text--center block-revendeur"><a href="{{ asset('pdf/Gamme_Retail_Kusmi_Tea_2024.pdf') }}" target="_blank" rel="noopener noreferrer" data-link-type="external" data-link-label="/on/demandware.static/-/Library-Sites-Kusmi_Shared/default/doc/Formulaires_retractation//BROCHURE_CHR_2021_9_BD.pdf" style="color: rgb(0, 0, 0);"><strong><u>{% trans %}Découvrez notre brochure{% endtrans %}</u></strong></a></div>
    </div>





    <div class="container" id="form_start" style="background-color: rgb(251, 249, 247);">

        <div class="row">
            <div class="col text--center">
                <h2 id="typo_client" style="font-weight:bold"></h2>
            </div>
        </div>
        <div class="form-row">
            <div class="col-4"></div>
            <div class="col-4">
                <div class="form-group">
                    {#                        <label for="country">Pays</label>#}
                    <select id="country_start" class="custom-select" name="country" style="display:none" onchange="updateClientId(); showForm()" required>
                        <option value="" disabled selected>--{% trans %}Choisissez un pays{% endtrans %}--</option>
                        <option value="FRA">{% trans %}France{% endtrans %}</option>
                        <option value="BEL">{% trans %}Belgique{% endtrans %}</option>
                        {% for country in countries %}
                            <option value="{{ country['country_code'] }}">{{ country['country_label'] }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        {% trans %}Vous devez renseigner un pays.{% endtrans %}
                    </div>
                </div>
            </div>
            <div class="col-4"></div>
        </div>

        <form id="form-contact" novalidate action="{{ path("process_contact_form") }}" method="post" style="display:none" >
            <input type="hidden" id="client_type_contact" name="client_type_contact" value=""/>
            <div class="form-row justify-content-md-center">
                <div class="col-6">
                    <div class="form-group">
                        <input class="form-control" placeholder="{% trans %}Nom{% endtrans %}" type="text" name="contact_name" id="contact_name">
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <input class="form-control" placeholder="{% trans %}Email{% endtrans %}" type="text" name="contact_email" id="contact_email">
                    </div>
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="col-12">
                    <div class="form-group">
                        <textarea class="form-control" placeholder="{% trans %}Votre message{% endtrans %} ..." id="contact_message" name="contact_message" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <button style="width:100%; color:white" type="submit">{% trans %}Envoyer le message{% endtrans %}</button>
            <div class="clearfix"></div>
        </form>

        <form id="form-client" novalidate style="display:none" action="{{ path('client_create') }}" method="post">
            <input type="hidden" id="client_type" name="client_type" value=""/>
            <input type="hidden" id="country_billing" name="country_billing" value=""/>
            <input type="hidden" id="client_type_tmp" name="client_type_tmp" value=""/>
            <div class="form-row justify-content-md-center">
                <div class="col-6">
                    <div class="form-group">
{#                        <label for="etab_name">Nom de l'établissement *</label>#}
                        <input placeholder="{% trans %}Nom de l'établissement{% endtrans %}" type="text" class="form-control" name="etab_name" id="etab_name" maxlength="35">
                    </div>
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="col-6">
                    <div class="form-group">
                        {#                        <label for="etab_name">Nom de l'établissement *</label>#}
                        <input placeholder="{% trans %}Site internet{% endtrans %}" type="text" class="form-control" name="etab_website" id="etab_website">
                    </div>
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="col-3">
                    <div class="form-group">
                        <input placeholder="{% trans %}N° SIRET{% endtrans %}" type="text" class="form-control" name="siret" id="siret" required minlength="14" maxlength="14">
                        <small id="siretHelp" class="form-text text-muted">({% trans %}ou N° entreprise/immatriculation{% endtrans %})</small>
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        <input placeholder="{% trans %}N° TVA Intracommunautaire{% endtrans %}" type="text" class="form-control" name="tva_intra" id="tva_intra" required minlength="13">
                    </div>
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="col-6">
                    <div class="form-group">
                        <label style="text-align: center; width: 100%" for="description">{% trans %}Merci de renseigner votre activité et votre demande{% endtrans %}</label>
                        <textarea type="text" class="form-control" name="description" id="description"></textarea>
                    </div>
                </div>
            </div>

            <h4>{% trans %}Contact principal{% endtrans %}</h4>
            <hr class="my-2">

            <div class="form-row">
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Nom{% endtrans %}" type="text" class="form-control" name="lastname" id="lastname" required>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Prénom{% endtrans %}" type="text" class="form-control" name="firstname" id="firstname" required>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Email{% endtrans %}" type="email" class="form-control" name="email" id="email" required>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Téléphone{% endtrans %}" type="text" class="form-control" name="telephone" id="telephone">
                    </div>
                </div>
            </div>

            <h4>{% trans %}Adresse de livraison{% endtrans %}</h4>
            <hr class="my-2">

            <div class="form-row">
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Raison sociale{% endtrans %}" type="text" class="form-control" name="business_name" id="business_name" maxlength="35">
                    </div>
                </div>
                <div class="col-6"></div>
            </div>
            <div class="form-row">
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Adresse{% endtrans %}" type="text" class="form-control" name="address1" id="address1">
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <input placeholder="{% trans %}Adresse{% endtrans %} ({% trans %}ligne 2{% endtrans %})" type="text" class="form-control" name="address2" id="address2">
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col-4">
                    <div class="form-group">
{#                        <label for="postcode">Code postal</label>#}
                        <input placeholder="{% trans %}Code postal{% endtrans %}" type="text" class="form-control" name="postcode" id="postcode">
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-group">
{#                        <label for="city">Ville</label>#}
                        <input placeholder="{% trans %}Ville{% endtrans %}" type="text" class="form-control" name="city" id="city">
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-group">
{#                        <label for="country">Pays</label>#}
                        <select class="custom-select" name="country" id="country" required>
                            <option value="" disabled selected>--{% trans %}Choisissez un pays{% endtrans %}--</option>
                            <option value="FRA">{% trans %}France{% endtrans %}</option>
                            <option value="BEL">{% trans %}Belgique{% endtrans %}</option>
                            {% for country in countries %}
                                <option value="{{ country['country_code'] }}">{{ country['country_label'] }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col-12">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="check_billing_addr" id="check_billing_addr" onchange="toggleBilling(this);">
                        <label class="form-check-label" for="check_billing_addr">{% trans %}Utiliser une adresse différente pour la facturation{% endtrans %}</label>
                    </div>
                </div>
            </div>

            <div id="billing_form">
                <h4>{% trans %}Adresse de facturation{% endtrans %}</h4>
                <hr class="my-2">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
{#                            <label for="lastname_billing">Nom</label>#}
                            <input placeholder="{% trans %}Raison sociale{% endtrans %}" type="text" class="form-control" name="businessname_billing" id="businessname_billing" maxlength="35">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-6">
                        <div class="form-group">
{#                            <label for="address1_billing">Adresse</label>#}
                            <input placeholder="{% trans %}Adresse{% endtrans %}" type="text" class="form-control" name="address1_billing" id="address1_billing">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            {#<label for="address2">Adresse (ligne 2)</label>#}
                            <input placeholder="{% trans %}Adresse{% endtrans %} ({% trans %}ligne 2{% endtrans %})" type="text" class="form-control" name="address2_billing" id="address2_billing">
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-4">
                        <div class="form-group">
{#                            <label for="postcode_billing">Code postal</label>#}
                            <input placeholder="{% trans %}Code postal{% endtrans %}" type="text" class="form-control" name="postcode_billing" id="postcode_billing">
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="form-group">
{#                            <label for="city_billing">Ville</label>#}
                            <input placeholder="{% trans %}Ville{% endtrans %}" type="text" class="form-control" name="city_billing" id="city_billing">
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="form-group">
{#                            <label for="country">Pays</label>#}
                            <select id="country_billing" class="custom-select" name="country_billing" style="display:none">
                                <option value="" disabled selected>--{% trans %}Choisissez un pays{% endtrans %}--</option>
                                <option value="FRA">{% trans %}France{% endtrans %}</option>
                                <option value="BEL">{% trans %}Belgique{% endtrans %}</option>
                                <option value="LUX">{% trans %}Luxembourg{% endtrans %}</option>
                                {% for country in countries %}
                                    <option value="">{{ country['country_label'] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>

{#            <div class="g-recaptcha" data-sitekey="6LcARG4bAAAAADaJ8EvBo76S9xvmIw0vtWyihVIw"></div>#}
            <div class="clearfix"></div>
            <button style="width:100%; color:white" type="submit">{% trans %}Créer mon compte{% endtrans %}</button>
            <div class="clearfix"></div>
        </form>

        <script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
        <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('js/validation.js') }}"></script>

    </div>
{% endblock %}