{% extends "base.html.twig" %}
{% block title %} {{ parent() }} Ajout Annonce {% endblock %}
{% block script %}
    <script src="js/categories.js"></script>
    <script src="js/diffusion.js"></script>
{% endblock %}
{% block contenu %}

    {% if form.valide is defined %}
    {% if form.valide == true %}
        <div class="mx-auto text-center">
            <h3 class="h3 mb-3 font-weight-normal">Ajout de l'annonce réussi</h3>
        </div>

    {% else %}
        <div class="mx-auto text-center">
            <h3>Echec de l'ajout de l'annonce :</h3>
            <div class="alert alert-danger" role="alert">
                {{ form.message }}
            </div>
            <h3><a href="index.php?page=ajoutAnnonce">Retourner sur la page d'ajout d'annonces</a></h3>
        </div>
    {% endif %}
    {% else %}

    <form action="" method="post" enctype="multipart/form-data">
        <!-- DEBUT CHAMPS RADIO -->
        <div class="container d-flex justify-content-center align-items-start mt-5">
            <div class="radio col-md-0">

                <input type="checkbox" id="Pro" name="Pro" class="mr-2 statut" value="2">
                <label for="Pro">Je suis un professionnel</label>

            </div>

            <div class="imgpro ml-5 col-md-2" id="imgpro" hidden>

                <img src="images/img/Pro.png" alt="">

            </div>

            <div class="encart col-md-4 ml-5"
                 style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                <p>
                    Indiquez le maximum d'information, celles-ci permettrons de mieux classer votre annonce.

                    Avoir un compte PRO permet d'ouvrir une boutique annonce TAMTAM.

                    Vos annonces y seront regoupées, vous pourrez déposer plus de photos.

                    Pour les annonces immobilières vous aurez le droit à 10 photos par annonce.

                    Rencontre entre adulte : Impératif, d'avoir un compte "ADULTE"
                </p>

            </div>


        </div>

        <h5 class="text-center mt-5">Classement</h5>

        <div class="row">
            <div class="col-md-3">

            </div>

            <div class="col-md-6 row">
                {% for categorieTitre in listeCategoriesTitre %}
                    <div class="input col-md-3">

                        <input type="radio" id="idCategorie" class="cat"
                               name="idCategorie" value="{{ categorieTitre.idCategorie }}">{{ categorieTitre.NomCategorie }}

                    </div>

                {% endfor %}
            </div>

            <div class="col-md-3">

            </div>

        </div>

        <!-- FIN CHAMPS RADIO -->


        <!--  DEBUT CATEGORIE ET LOCALISATION -->
        <div class="container">

            <div class="form-group col-lg-6">
                <label for="category">Catégorie*</label>
                <select class="form-control categorieSelect" name="idSousCategorie" id="idSousCategorie">


                </select>
            </div>


            <div class="localisation d-flex">

                <div class="form-group col-lg-4">
                    <label for="category">Region*</label>
                    <select class="form-control" name="Region_idRegion">
                        {% for region in listeRegions %}
                            <option value="{{ region.idRegion }}">
                                {{ region.NomRegion }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group col-lg-4">
                    <label for="Ville">Ville*</label>
                    <input type="text" name="Ville" id="Ville" class="form-control"
                           placeholder="1ère lettre en majuscule" required>
                </div>

            </div>

        </div>
        <!--  FIN CATEGORIE ET LOCALISATION -->

        <!-- DEBUT TITRE -->
        <div class="form-group container d-flex justify-content-around align-items-center">

            <div class="label container">

                <label for="Titre">Titre de l'annonce*</label>

            </div>

            <div class="form container col-lg-6">

                <input type="text" name="Titre" id="Titre" class="form-control" required>

            </div>

            <div class="encart container col-lg-4"
                 style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                <label for="Titre encart">Le titre sera affiché, pour présenter l'annonce</label>

            </div>

        </div>
        <!-- FIN TITRE -->

        <!-- DEBUT ANNONCE VEHICULE -->
        <div class="container" id="annonceVehicule" hidden>

            <div class="d-flex justify-content-center">

                <div class="offre mr-5">

                    <input type="radio" name="offredemande" id="offre" value="1">
                    <label for="offre">Offre (Je vends un véhicule)</label>

                </div>

                <div class="demande">

                    <input type="radio" name="offredemande" id="demande" value="2">
                    <label for="demande">Demande (Je recherche un véhicule)</label>

                </div>

            </div>

            <div class="container d-flex justify-content-center">


                <div class="info-1 col-lg-4">

                    <div class="form-group">
                        <label for="marque">Marque</label>
                        <input type="text" name="marqueV" id="marqueV" class="form-control" value="">
                    </div>

                    <div class="form-group">
                        <label for="modele">Modele</label>
                        <input type="text" name="modele" id="modele" class="form-control" value="">
                    </div>

                    <div class="form-group">
                        <label for="anneemodele">Année modèle</label>
                        <input type="text" name="anneemodele" id="anneemodele" class="form-control" value="">
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="toutterrain" id="exampleCheck1" value="">
                        <label class="form-check-label" for="toutterrain">Tout terrain</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="climatisation" id="exampleCheck2"
                               value="">
                        <label class="form-check-label" for="climatisation">Climatisation</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="gps" id="exampleCheck3" value="">
                        <label class="form-check-label" for="gps">GPS</label>
                    </div>

                </div>

                <div class="info-2">

                    <div class="form-group col-lg-6">
                        <label for="marque">Kilométrage</label>
                        <input type="text" name="kilometrage" id="kilometrage" class="form-control" value="">
                    </div>

                    <div class="form-group col-lg-6">
                        <label for="category">Boîte de vitesse</label>
                        <select name="boitevitesse" id="boitevitesse">
                            <option value="0" disabled selected>Choisir...</option>
                            <option value="Manuelle">Manuelle</option>
                            <option value="Automatique">Automatique</option>
                            <option value="Séquentiel">Séquentiel</option>
                        </select>
                    </div>

                    <div class="form-group col-lg-6">
                        <label for="category">Carburant</label>
                        <select name="carburant" id="carburant">
                            <option value="0" disabled selected>Choisir...</option>
                            <option value="Essence">Essence</option>
                            <option value="Dièsel">Dièsel</option>
                            <option value="Electrique">Electrique</option>
                        </select>
                    </div>

                    <div class="form-group col-lg-6">
                        <label for="marque">Puissance</label>
                        <input type="text" name="puissanceM" id="puissance" class="form-control" value="">
                    </div>

                </div>

                <div class="annexe d-flex flex-column justify-content-around justify-content-center">

                    <div class="encart" style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                        <p>
                            Indiquez le maximum d'informations sur votre véhicule, celles-ci permettronts de mieux
                            classer votre annonce
                        </p>

                    </div>

                    <div class="imgannexe">

                        <img src="images/img/Vehicule.png" alt="">

                    </div>

                </div>


            </div>

        </div>
        <!-- FIN ANNONCE VEHICULE -->



        <!-- DEBUT ANNONCE IMMO -->
        <div class="container" id="annonceImmobilier" hidden>

            <h5>Type de transaction</h5>

            <div class="type-transaction container d-flex">

                <div class="achat mr-5">

                    <input type="radio" name="transaction" id="achat" value="1" class="elementImmo">
                    <label for="achat">Recherche bien à acheter</label>

                </div>

                <div class="vente mr-5">

                    <input type="radio" name="transaction" id="vente" value="2" class="elementImmo">
                    <label for="vente">Vente d'un bien</label>

                </div>

                <div class="location mr-5">

                    <input type="radio" name="transaction" id="location" value="3" class="elementImmo">
                    <label for="location">Location</label>

                </div>

            </div>


            <div class="form-immobilier container d-flex">


                <div class="form-immo-1 container">

                    <div class="form-group col-lg-6">
                        <label for="category">Region</label>
                        <select class="form-control" name="Region_idRegion2">
                            {% for region in listeRegions %}
                                <option value="{{ region.idRegion }}">
                                    {{ region.NomRegion }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group col-lg-6">
                        <label for="category">Nb de pièces</label>
                        <input class="form-control elementImmo" type="number" id="nbPieces" name="nbPieces"/>
                    </div>

                    <div class="form-group col-lg-6">
                        <label for="category">Nb de chambres</label>
                        <input class="form-control elementImmo" type="number" id="nbChambres" name="nbChambres"/>
                    </div>

                </div>

                <div class="form-immo-2 container">

                    <div class="form-group col-lg-4">
                        <label for="adresse">Ville</label>
                        <input type="text" name="Ville2" id="Ville2" class="form-control elementImmo" value="">
                    </div>

                    <div class="form-group col-lg-4">
                        <label for="adresse">Quartier</label>
                        <input type="text" name="Quartier" id="Quartier" class="form-control elementImmo" value="">
                    </div>

                    <div class="form-group col-lg-4">
                        <label for="adresse">Surface du terrain</label>
                        <input type="text" name="Surfaceterrain" id="Surfaceterrain" class="form-control elementImmo" value="">
                    </div>

                    <div class="form-group col-lg-4">
                        <label for="adresse">Surface</label>
                        <input type="text" name="Surface" id="Surface" class="form-control elementImmo" value="">
                    </div>

                </div>


                <div class="annexe d-flex flex-column justify-content-center">

                    <div class="encart" style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                        <p>
                            Indiquez dans chaque champs toutes les informations permettant de préciser le type de
                            bien.Cela permettra de mieux classer votre annonce
                        </p>

                    </div>

                    <div class="imgannexe mt-1">

                        <img src="images/img/Maison.png" alt="">

                    </div>

                </div>


            </div>

            <div class="immo-check d-flex justify-content-center">

                <div class="immocheck-1 mr-5">

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="cuisineam" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Cuisine aménagée</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="cuisineext" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Cuisine extérieur</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="meuble" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Meublé</label>
                    </div>

                </div>

                <div class="immocheck-2 mr-5">

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="eau" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Eau</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="elec" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Electricité</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="eqp" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Equipement solaire</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="clim" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Climatisation</label>
                    </div>

                </div>

                <div class="immocheck-3">

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="jardin" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Jardin</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="parking" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Parking</label>
                    </div>

                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="piscine" id="exampleCheck1" value="1">
                        <label class="form-check-label" for="">Piscine</label>
                    </div>

                </div>

            </div>

        </div>
        <!-- FIN ANNONCE IMMO -->


        <!-- DEBUT ANNONCE VELO -->
        <div id="annonceVelo" hidden class="container">
            <div class="container d-flex">

                <div class="container">

                    <div class="radio d-flex justify-content-center align-items-baseline">

                        <input type="radio" name="offredemande2" id="" value="1">
                        <label for="" class="ml-2">Offre (je vends une moto)</label>

                        <input type="radio" name="offredemande2" id="" class="ml-5" value="2">
                        <label for="" class="ml-2">Demande (je recherche une moto)</label>

                    </div>

                    <div class="container d-flex">

                        <div class="container champs">

                            <div class="form-group d-flex align-items-baseline">
                                <label for="marque" class="mr-2">Marque</label>
                                <input type="text" name="marqueMV" id="" class="form-control" value="">
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="marque" class="mr-2">Type</label>
                                <input type="text" name="type" id="type" class="form-control" value="">
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="cylindré" class="mr-2">Cylindré</label>
                                <input type="text" name="cylindré" id="cylindré" class="form-control" value="">
                                <label for="cc" class="ml-2">cc</label>
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="puissance" class="mr-2">Puissance</label>
                                <input type="text" name="puissance" id="" class="form-control" value="">
                                <label for="CV" class="ml-2">CV</label>
                            </div>

                        </div>

                        <div class="container champs">

                            <div class="form-group d-flex align-items-baseline">
                                <label for="category" class="mr-2">Boîte de vitesse</label>
                                <select name="boitevitesse" id="boitevitesse">
                                    <option value="0" disabled selected>Choisir...</option>
                                    <option value="Manuelle">Manuelle</option>
                                    <option value="Automatique">Automatique</option>
                                    <option value="Séquentiel">Séquentiel</option>
                                </select>
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="category" class="mr-2">Carburant</label>
                                <select name="carburant" id="Carburant">
                                    <option value="0" disabled selected>Choisir...</option>
                                    <option value="Essence">Essence</option>
                                    <option value="Dièsel">Dièsel</option>
                                    <option value="Electrique">Electrique</option>
                                </select>
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="kilométrage" class="mr-2">Kilométrage</label>
                                <input type="text" name="kilometrage" id="kilométrage" class="form-control" value="">
                                <label for="Km" class="ml-2">Km</label>
                            </div>

                            <div class="form-group d-flex align-items-baseline">
                                <label for="annéemodèle" class="mr-2">Année Modèle</label>
                                <input type="text" name="anneemodele" id="annéemodèle" class="form-control" value="">
                            </div>

                        </div>

                    </div>

                </div>

                <div class="imgannexe col-lg-4">

                    <div class="encart" style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                        <label for="Diffusion encart">Indiquez le maximum d'informations sur votre véhicule, celles-ci
                            permettronts de mieux classer votre annonce</label>

                    </div>

                    <img src="images/img/Velo.png" alt="">

                </div>

            </div>
        </div>
        <!-- FIN ANNONCE VELO -->


        <!-- DEBUT ANNONCE MATERIEL -->
        <div id="annonceMateriel" hidden class="container">
            <div class="container d-flex">

                <div class="container">

                    <div class="radio d-flex justify-content-center align-items-baseline">

                        <input type="radio" name="machine" id="" value="1">
                        <label for="" class="ml-2">Offre (je vends un engin/machine)</label>

                        <input type="radio" name="machine" id="" class="ml-5" value="2">
                        <label for="" class="ml-2">Demande (je recherche un engin/machine)</label>

                    </div>

                    <div class="d-flex justify-content-around">
                        <div>
                            <label for="" class="mr-2">Marque</label>
                            <input type="text" name="marqueM" id="">
                        </div>

                        <div>
                            <label for="" class="mr-2">Nombre d'heures</label>
                            <input type="text" name="nbH" id="" class="ml-5">
                        </div>
                    </div>

                    <div class="container d-flex">
                        <label for="" class="mr-2 col-lg-2">Etat mécanique</label>
                        <textarea type="text" name="etatM" id="about" class="form-control"
                                  aria-label="With textarea"></textarea>
                    </div>

                    <div class="container d-flex">
                        <label for="" class="mr-2 col-lg-2">Etat électrique</label>
                        <textarea type="text" name="etatE" id="about" class="form-control"
                                  aria-label="With textarea"></textarea>
                    </div>

                    <div class="container d-flex mt-1">
                        <label for="" class="mr-2 col-lg-2">Etat hydraulique</label>
                        <textarea type="text" name="etatH" id="about" class="form-control"
                                  aria-label="With textarea"></textarea>
                    </div>

                    <div class="container mt-1">
                        <div>
                            <label for="" class="mr-2">Puissance</label>
                            <input type="text" name="puissanceCV" id="">
                            <label for="" class="mr-2">CV</label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-around align-items-baseline">
                        <div>
                            <label for="" class="mr-2">Puissance</label>
                            <input type="text" name="puissanceW" id="">
                            <label for="" class="mr-2">W</label>
                        </div>

                        <div>
                            <label for="" class="mr-2">Années modèle</label>
                            <input type="text" name="anneesM" id="" class="ml-5">
                        </div>
                    </div>

                </div>

                <div class="imgannexe col-lg-4">

                    <div class="encart" style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                        <label for="Diffusion encart">Indiquez le maximum d'informations sur votre véhicule, celles-ci
                            permettronts de mieux classer votre annonce</label>

                    </div>

                    <img src="images/img/Engin.png" alt="">

                </div>

            </div>
        </div>
        <!-- FIN ANNONCE MATERIEL -->


        <!-- DEBUT DESCRIPTION & VALIDATION -->
        <div class="container">

            <div class="container description">

                <div class="d-flex">

                    <label for="Description" class="mr-5">Description*</label>
                    <textarea name="Description" id="" cols="40" rows="10" required></textarea>

                </div>

                <div>

                    <div class="form-group d-flex mt-2">

                        <label for="adresse" class="mr-5">Prix*</label>
                        <input type="text" name="Prix" id="Prix" class="form-control ml-2" required>

                        <label for="monnaie" class="ml-2">Monnaie</label>
                        <select class="form-control ml-2" name="Monnaie">
                            {% for monnaie in listeMonnaies %}
                            <option value="{{ monnaie.idMonnaie }}">
                                {{ monnaie.NomMonnaie }}
                            </option>
                            {% endfor %}
                        </select>


                    </div>

                </div>

            </div>

            <div class="container photos d-flex row">
                    <input class="col-md-5" type="file" name="Photo_1" id="Photo_1">
                    <input class="col-md-5" type="file" name="Photo_2" id="Photo_2">
                    <input class="col-md-5" type="file" name="Photo_3" id="Photo_3">
                    <input class="col-md-5" type="file" name="Photo_4" id="Photo_4">
                    <input class="col-md-5" type="file" name="Photo_5" id="Photo_5">
                    <input class="col-md-5" type="file" name="Photo_6" id="Photo_6">
                    <input class="col-md-5" type="file" name="Photo_7" id="Photo_7">
                    <input class="col-md-5" type="file" name="Photo_8" id="Photo_8">
                    <input class="col-md-5" type="file" name="Photo_9" id="Photo_9">
                    <input class="col-md-5" type="file" name="Photo_10" id="Photo_10">
            </div>

            <h4 class="mt-5">Diffusion</h4>
            <div class="container diffusion d-flex justify-content-around">


                <div class="diffu container d-flex flex-column">

                    <div class="diffu1">

                        <input type="radio" name="dif" id="pays" value="1">
                        <label for="pays">Pays</label>

                    </div>

                    <div class="diffu2">

                        <input type="radio" name="dif" id="limitrophes" value="2">
                        <label for="limitrophes">Pays et Pays limitrophes</label>

                    </div>

                    <div class="diffu3">

                        <input type="radio" name="dif" id="zone">
                        <label for="zone">Zones</label>

                    </div>

                    <div class="diffu4">

                        <input type="radio" name="dif" id="afrique" value="8">
                        <label for="afrique">Toute l'Afrique</label>

                    </div>

                </div>

                <div class="container zonesetliste">

                    <div class="zones" hidden id="listeZones">
                        <div class="d-flex container justify-content-around d-none">

                            <div class="d-flex flex-column doublezone">

                                <div class="zone1">

                                    <input type="radio" name="zoneSelect" id="zone1" value="0">
                                    <label for="zone1">Zone 1</label>

                                </div>

                                <div class="zone2">

                                    <input type="radio" name="zoneSelect" id="zone2" value="1">
                                    <label for="zone2">Zone 2</label>

                                </div>

                            </div>

                            <div class="d-flex flex-column doublezone">

                                <div class="zone3">

                                    <input type="radio" name="zoneSelect" id="zone3" value="2">
                                    <label for="zone3">Zone 3</label>

                                </div>

                                <div class="zone4">

                                    <input type="radio" name="zoneSelect" id="zone4" value="3">
                                    <label for="zone4">Zone 4</label>

                                </div>

                            </div>

                            <div class="d-flex flex-column doublezone">

                                <div class="zone5">

                                    <input type="radio" name="zoneSelect" id="zone5" value="4">
                                    <label for="zone5">Zone 5</label>

                                </div>

                                <div class="zone6">

                                    <input type="radio" name="zoneSelect" id="zone6" value="5">
                                    <label for="zone6">Zone 6</label>

                                </div>

                            </div>

                            <div class="d-flex flex-column doublezone">

                                <div class="zone7">

                                    <input type="radio" name="zoneSelect" id="zone7" value="6">
                                    <label for="zone7">Zone 7</label>

                                </div>

                                <div class="zone8">

                                    <input type="radio" name="zoneSelect" id="zone8" value="7">
                                    <label for="zone8">Zone 8</label>

                                </div>

                            </div>

                        </div>
                    </div>

                    <div class="listepays" id="listePays" hidden>

                        <div class="form-group col-lg-6">
                            <label for="category">Liste Pays</label>
                            <select class="form-control" id="paysSelect" name="paysSelect">
                                <option value="0">--Selectionnez un pays--</option>
                                {% for pays in listePays %}
                                    <option value="{{ pays.idPays }}">
                                        {{ pays.Pays }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>

                </div>


                <div class="carte" id="carte">

                    <img src="images/carte/Afrique.gif" alt="">

                </div>

            </div>

            <div class="encart container col-lg-5"
                 style="background-color: rgba(127, 96, 96, 0.47); border: 1px solid #7F6060;">

                <label for="Diffusion encart">Indiquez le pays ou la zone de diffusion. La diffusion sur plusieurs
                    pays(zone) est actuellement gratuite</label>

            </div>

            <div class="container d-flex justify-content-center justify-content-around col-lg-2 mt-2">

                <a href="index.php" class="btn btn-secondary">Retour</a>
                <button type="submit" class="btn btn-success" id="btAnnonce" name="btAnnonce">Valider</button>

            </div>

        </div>
        <!-- FIN DESCRIPTION & VALIDATION -->
    </form>

    {% endif %}

{% endblock %}