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

{% block body %}

    <div id="warning">
        <p>
            ACCÈS RÉSERVÉ AUX PROFESSIONNELS DE L’HÔTELLERIE ET DE LA RESTAURATION
        </p>
    </div>
    <p>Complétez ce formulaire pour demander la création de votre compte client. Après validation par notre service commercial, vous recevrez un e-mail de confirmation.</p>

    <div class="container">
        <form id="form-client" action="{{ path("client_create") }}" method="post" class="needs-validation" novalidate>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="etab_name">Nom de l'établissement *</label>
                        <input type="text" class="form-control" name="etab_name" id="etab_name" aria-describedby="emailHelp" maxlength="35" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un nom pour l'établissement.
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="email">Email *</label>
                        <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp"  maxlength="250" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un email.
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="telephone">Téléphone *</label>
                        <input type="text" class="form-control" name="telephone" id="telephone" aria-describedby="emailHelp"  maxlength="25" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un numéro de téléphone.
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="siret">N° SIRET *</label>
                        <input type="text" class="form-control" name="siret" id="siret" aria-describedby="emailHelp"  maxlength="14" required>
                        <small id="emailHelp" class="form-text text-muted">(ou N° entreprise/immatriculation)</small>
                        <div class="invalid-feedback">
                            Vous devez renseigner un numéro SIRET valide.
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="tva_intra">N° TVA Intracommunautaire *</label>
                        <input type="text" class="form-control" name="tva_intra" id="tva_intra" aria-describedby="emailHelp"  maxlength="13" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un numéro de TVA Intracommunautaire valide.
                        </div>
                    </div>
                </div>
            </div>

            <h4>Adresse de livraison</h4>
            <hr class="my-2">
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="lastname">Nom</label>
                        <input type="text" class="form-control" name="lastname" id="lastname" aria-describedby="emailHelp"  maxlength="35" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un nom.
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="firstname">Prénom</label>
                        <input type="text" class="form-control" name="firstname" id="firstname" aria-describedby="emailHelp"  maxlength="35" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un prénom.
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="address1">Adresse</label>
                        <input type="text" class="form-control" name="address1" id="address1" aria-describedby="emailHelp"  maxlength="35" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner une ligne d'adresse.
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        {#<label for="address2">Adresse (ligne 2)</label>#}
                        <input type="text" class="form-control" name="address2" id="address2" aria-describedby="emailHelp"  maxlength="35">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        {#<label for="address3">Adresse (ligne 3)</label>#}
                        <input type="text" class="form-control" name="address3" id="address3" aria-describedby="emailHelp"  maxlength="35">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <label for="postcode">Code postal</label>
                        <input type="text" class="form-control" name="postcode" id="postcode" aria-describedby="emailHelp"  maxlength="9" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner un code postal.
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="city">Ville</label>
                        <input type="text" class="form-control" name="city" id="city" aria-describedby="emailHelp"  maxlength="35" required>
                        <div class="invalid-feedback">
                            Vous devez renseigner une ville.
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="country">Pays</label>
                        <select class="custom-select" name="country" id="country" required>
                            <option value="" disabled selected>--Choisissez un pays--</option>
                            <option value="FRA">France</option>
                            <option value="BEL">Belgique</option>
                            <option value="LUX">Luxembourg</option>
                        </select>
                        <div class="invalid-feedback">
                            Vous devez renseigner un pays.
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="check_billing_addr" id="check_billing_addr" onchange="handleChange(this);">
                        <label class="form-check-label" for="check_billing_addr">Utiliser une adresse différente pour la facturation</label>
                    </div>
                </div>
            </div>

            <div id="billing_form">
                <h4>Adresse de facturation</h4>
                <hr class="my-2">
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="lastname_billing">Nom</label>
                            <input type="text" class="form-control" name="lastname_billing" id="lastname_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="firstname_billing">Prénom</label>
                            <input type="text" class="form-control" name="firstname_billing" id="firstname_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            <label for="address1_billing">Adresse</label>
                            <input type="text" class="form-control" name="address1_billing" id="address1_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            {#<label for="address2">Adresse (ligne 2)</label>#}
                            <input type="text" class="form-control" name="address2_billing" id="address2_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            {#<label for="address3">Adresse (ligne 3)</label>#}
                            <input type="text" class="form-control" name="address3_billing" id="address3_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col">
                        <div class="form-group">
                            <label for="postcode_billing">Code postal</label>
                            <input type="text" class="form-control" name="postcode_billing" id="postcode_billing" aria-describedby="emailHelp"  maxlength="9">
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="city_billing">Ville</label>
                            <input type="text" class="form-control" name="city_billing" id="city_billing" aria-describedby="emailHelp"  maxlength="35">
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            <label for="country">Pays</label>
                            <select class="custom-select" name="country_billing" id="country_billing">
                                <option value="">--Choisissez un pays--</option>
                                <option value="FRA">France</option>
                                <option value="BEL">Belgique</option>
                                <option value="LUX">Luxembourg</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

{#            <div class="g-recaptcha" data-sitekey="6LcARG4bAAAAADaJ8EvBo76S9xvmIw0vtWyihVIw"></div>#}
            <button class="btn btn-primary" type="submit">Valider</button>
        </form>
    </div>
{% endblock %}