{% extends 'layout.twig' %}
{% block title "Ğ1-Marché - Produits" %}


{% block body %}
    <script type="text/javascript" src="/js/script.js"></script>
    <div class="container_main">
        <!-- Fil d'Ariane -->
        <div class="breadcrumbs" >
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ gmarchePrefix }}">France</a></li>
                    <li class="breadcrumb-item"><a href="{{ gmarchePrefix }}france/{{ region_slug }}">{{ region_name }}</a></li>
                    <li class="breadcrumb-item active">G-Marché de {{ antenne_name }}</li>

                        <div class="toggle_radio">
                            <input type="radio" checked class="toggle_option" id="first_toggle" name="toggle_option">
                            <input style="color:black;" type="radio" class="toggle_option" id="second_toggle" name="toggle_option">
                            <label for="first_toggle"><p>PRODUITS</p></label>
                            <label for="second_toggle">
                                <p>
                                    <a style="color:black;" href="{{ gmarchePrefix }}france/{{ region_slug }}/{{ antenne_slug }}/recherches">RECHERCHES</a>
                                </p>
                            </label>
                            <div class="toggle_option_slider">
                            </div>
                        </div>
                </ol>
            </nav>
        </div>
        <div id="la_page">
            {% if antenne_name == 'Paris' %}
                <script type="text/javascript">
                   $('.fond').css('background-image', "url('/images/toureiffel.jpeg')");
                </script>
            {%  endif %}
            <div class="container">

              <div class="row">
                <div class="col-md-12">
                    <div class="container" style="font-size:18px; color:white;line-height:1.4rem;">
                        <div>Tous les mois, la Toile Francilienne organise des rencontres entre utilisateurs de la Monnaie Libre.</div>
                        C'est l'occasion rêvée d'échanger avec d'autres membres !
                        {{ annonce_ligne1 }}
                        {{ annonce_ligne2 }}
                        {{ annonce_ligne3 }}
                        <p></p>
                        <div>Consultez, rajoutez, modifiez vos propositions dans la liste du mois.</div>
                        Mettez bien le pseudo, la clé publique, le bien ou service, et le prix en june.
                    </div>
                    <p>
                        {% if nom_user != '' %}
                              <button style="color:white; font-size: 14px;" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Ajouter un bien ou service
                           {% else %}
                               <p>
                                   <span style="color:lightgray;">Veuillez vous identifier dans la barre à droite
                                       ci-dessus pour ajouter/modifier/supprimer des éléments</span>
                               </p>
                        {% endif %}
                        </button>
                    </p>
                    <div class="records_content"></div>
                </div>
              </div>
            </div>

                <div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document" style="color: black;">
                    <div class="modal-content"  style="text-align: left;">
                      <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Ajouter une ligne</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body">
                         <div class="form-group">
                              <label for="vendeur">Vendeur</label>
                              <input type="text" id="vendeur" disabled="disabled" placeholder="{{ nom_user }}" value="{{ nom_user }}" class="form-control"/>
                         </div>
                         <div class="form-group">
                             <label for="produit">Bien ou service</label>
                             <input type="text" id="produit" placeholder="Bien ou service" class="form-control"/>
                         </div>
                         <div class="form-group row">
                              <div class="col-md-7">
                                  <form method='post' action='' enctype="multipart/form-data">
                                      Choisir l'image : <input type='file' name='file' id='add_image' class='form-control' ><br>
                                  </form>
                              </div>
                              <div class="col-md-5">
                                  <div id="add_preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
                              </div>
                         </div>
                         <div class="form-group">
                             <label for="quantite">Quantité</label>
                             <input type="number" id="quantite" placeholder="Quantité" class="form-control"/>
                         </div>
                         <div class="form-group has-error has-feedback">
                             <label for="prix">Prix en junes</label>
                             <input type="number" id="prix" placeholder="prix" class="form-control"/>
                         </div>
                         <div class="alert alert-block alert-danger" style="display:none">
                             <h4>Erreur !</h4>
                             Vous devez entrer un nombre !
                         </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary"
                                onclick="addRecord('{{ antenne_slug }}','{{ antenne_id }}','{{ nom_user }}','{{ user_id }}')">Ajouter</button>
                      </div>
                    </div>
                  </div>
                </div>

              <div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document" style="color: black;">
                      <div class="modal-content" style="text-align: left;">
                          <div class="modal-header">
                              <h4 class="modal-title" id="myModalLabel">Mettre à jour</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          </div>
                          <div class="modal-body">
                              <div class="form-group">
                                  <label for="update_vendeur">Vendeur</label>
                                  <input type="input" disabled="disabled" id="update_vendeur" placeholder="Vendeur" class="form-control"/>
                              </div>
                              <div class="form-group">
                                  <label for="update_produit">Bien ou service</label>
                                  <input type="text" id="update_produit" placeholder="Bien ou service proposé" class="form-control"/>
                              </div>
                              <div class="form-group row">
                                  <div class="col-md-7">
                                      <form method='post' action='' enctype="multipart/form-data">
                                          Choisir l'image : <input type='file' name='file' id='image' class='form-control' ><br>
                                      </form>
                                  </div>
                                  <div class="col-md-5">
                                       <div id="preview" style="border:1px solid black;width:160px;height:160px;">&nbsp;</div>
                                  </div>
                              </div>
                              <div class="form-group has-error has-feedback">
                                  <label for="update_quantite">Quantité</label>
                                  <input type="number" id="update_quantite" placeholder="Quantité" class="form-control"/>
                              </div>
                              <div class="form-group has-error has-feedback">
                                  <label for="update_prix">Prix en junes</label>
                                  <input type="number" id="update_prix" placeholder="Prix" class="form-control"/>
                              </div>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                              <button type="button" class="btn btn-primary" onclick="UpdateProduitsDetails('{{ nom_user }}')" >Sauvegarder</button>
                              <input type="hidden" id="hidden_user_id">
                              <input type="hidden" id="hidden_antenne_slug">
                              <input type="hidden" id="hidden_image_name">
                          </div>
                      </div>
                  </div>
              </div>
           <!--
             crochet% set token_input = csrf_input %crochet-->
      </div>
  </div>
{% endblock %}