{% extends "base.html.twig" %}
{% block title %} {{ parent() }} Inscription Cyber {% endblock %}
{% block contenu %}

<div class="container col-lg-12 d-flex align-items-baseline">

    <div class="container col-lg-6 p-2">
        <h1 class="text-brown">Devenir cyber partenaire</h1>
        <form action="" method="post" enctype="multipart/form-data">

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Nom du cyber*</label>
                </div>
                <input type="text" name="NomCyber" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Nom du responsable</label>
                </div>
                <input type="text" name="NomResponsable" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Nb de poste</label>
                </div>
                <div class="col-lg-2 p-0">
                    <input type="text" name="NbrePoste" class="form-control" id="exampleFormControlInput1" placeholder="">
                </div>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Quartier*</label>
                </div>
                <input type="text" name="Quartier" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Adresse</label>
                </div>
                <input type="text" name="Adresse" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Ville*</label>
                </div>
                <div class="col-lg-3 p-0">
                    <input type="text" name="Ville" class="form-control" id="exampleFormControlInput1" placeholder="">
                </div>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Region*</label>
                </div>
                <div class="col-lg-3 p-0">
                    <select class="form-control" name="Region">
                        <?php foreach ($regions as $region) { ?>
                        <option <?= ($region['NomRegion'] == $Region) ? 'selected' : ''; ?> value="<?= $region['idRegion']; ?>">
                        <?= $region['NomRegion']; ?>
                        </option>
                        <?php } ?>
                    </select>
                </div>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Pays*</label>
                </div>
                <div class="col-lg-3 p-0">
                    <select class="form-control" name="Pays">
                        <?php foreach ($payss as $pays) { ?>
                        <option <?= ($pays['Pays'] == $Pays) ? 'selected' : ''; ?> value="<?= $pays['idPays']; ?>">
                        <?= $pays['Pays']; ?>
                        </option>
                        <?php } ?>
                    </select>
                </div>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Téléphone*</label>
                </div>
                <input type="text" name="Telephone" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Courriel*</label>
                </div>
                <input type="text" name="Courriel" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Vérification courriel*</label>
                </div>
                <input type="text" name="VerificationCourriel" class="form-control" id="exampleFormControlInput1" placeholder="">
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Question*</label>
                </div>
                <select class="form-control" name="Question">
                    <option value="0" disabled selected>Choisir une question de dépannage...</option>
                    <option value="1">Prénom de votre meilleur ami d'enfance ?</option>
                    <option value="2">Votre dessin animé préféré ?</option>
                    <option value="3">Première adresse à laquelle vous avez habité ?</option>
                </select>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Réponse*</label>
                </div>
                <div class="col-lg-3 p-0">
                    <input type="text" name="Reponse" class="form-control" id="exampleFormControlInput1" placeholder="">
                </div>
            </div>

            <div class="form-group d-flex">
                <div class="col-lg-3">
                    <label for="">Commentaire</label>
                </div>
                <textarea name="Commentaire" id="" cols="100" rows="10"></textarea>
            </div>

            <div class="d-flex justify-content-center">
                <p class="text-danger">
                    Argumentaire pour promotionner votre établissement...
                    <br>
                    Exemple...
                    <br>
                    Situé dans le quartier xxxx, notre cyber vous accueillera dans un cadre agréable
                    <br>
                    Nous disposons de 22 postes connectés, avec service d'impressions, boissons, ...
                </p>
            </div>

            <div class="d-flex justify-content-center">
                <img src="img/AnnonceTamTam-250.gif" alt="">
            </div>

            <div class="d-flex justify-content-center">
                <div class="mr-5">
                    <p class="text-danger">Photo au format paysage</p>
                    <p>* Champs obligatoires</p>
                </div>

                <div>
                    <div style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">
                        <div>
                            <p class="mt-2 text-center">Photo principale</p>
                        </div>
                    </div>

                    <div>
                        <input type="file" name="photo" id="">
                    </div>

                    <div class="mt-1 d-flex justify-content-center">
                        <button class="btn btn-primary mr-1">Retour</button>
                        <button class="btn btn-success">Valider</button>
                    </div>
                </div>

            </div>

        </form>
    </div>

    <div class="container col-lg-6">
        <div class="encart p-2" style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">
            <h5>INTERET DE DEVENIR CYBER PARTENAIRE</h5>
            <p>
                En devenant cyber partenaire, vous pourrez encaisser les paiements des annonces payantes.
                <br>
                ANNONCE TAMTAM, permettra à vos internautes de passer du temps, à consulter des annonces à partir de votre cyber.
                <br>
                Ils consommeront, donc du temps et des paiements d'annonces, qu'ils passeront ???
                <br>
                Mieux encore, s'ils ont une connexion privée ou un téléphone connecté, ils pourront payer à partir de votre cyber.
                <br>
                C'est pour cela qu'il est important d'informer au maximum, votre fiche avec la photo façade.
                Ainsi, les internautes, pourront choisir l'établissement le plus proche pour poster leurs annonces.
            </p>

        </div>
    </div>

</div>

{% endblock %}