{% extends "members/base.html" %}
{% block body_class %}inscriptions{% endblock %}
{% load static %}
{% block additionnal_css %}
  <link rel="stylesheet" href="{% static "css/inscriptions.css" %}?v=1651853225">
  <style>
    .shift[data-place="{{mag_place_string}}"], [data-select="{{mag_place_string}}"] {background: #c8deff;}
    .shift[data-place="{{office_place_string}}"], [data-select="{{office_place_string}}"]  {background: #f9b2ff;}
  </style>
  {{ block.super }}
{% endblock %}



{% block additionnal_scripts %}
 <script type="text/javascript">
    var type = {{type}},
        context = 'inscription',
        force_fn_hyphen = {% if force_firstname_hyphen %}true{% else %}false{% endif%},
        max_chq_nb = {{max_chq_nb}};
    {% if open_on_sunday %}
    let open_on_sunday = true
    {% endif %}
    let manage_ftop = {% if show_ftop_button %}true{% else %}false{% endif %};

  </script>
{% endblock %}
{% block content %}
 <nav class="col-6 clearfix nav">
   <div class="left-nav">
    {% if prepa_odoo_url != '' %}
     <div id="goto_prepa_odoo" class="fl">
       <a class="btn--info" id="goto_prepa_odoo_button" href='{{prepa_odoo_url}}' target='_blank'>Prepa Odoo</a>
     </div>
     {% endif %}
     <div id="process_state_container" class="fl">
       <div id="process_state"></div>
     </div>
   </div>

  <button id="create_new_coop" class="btn--primary fr">Nouvelle inscription</button>
  <button id="coop_list_btn" class="btn--info fr" style="display:none;">Liste</button>
  <button id="shift_calendar" class="btn--inverse fr">Vue créneaux</button>
</nav>

<section class="center" id="new_coop">
   <div class="grid-1">
    <div class="item-center">
      <h2 class="title">
      NOUVEAU MEMBRE
      </h2>
    <form id="coop_create" lang="fr">
      {% if ask_for_sex %}
        <p>
          {% include "members/sex_input.html" %}
        </p>
      {% endif %}
      <p>
      <input type="text" placeholder="Nom" name="lastname" autocomplete="off"  required />
      <input type="text" placeholder="Prénom" name="firstname" autocomplete="off" required />
      <input type="text"  placeholder="email" name="email" value="" pattern="(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*)@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])" required autocomplete="off" />
      (*)
      </p>
      {% if ask_for_job %}
        <p>
            {% include "members/job_input.html" %}
        </p>
      {% endif %}
      <p>
        <input type="number" step="10" min="10" placeholder="Montant souscription" name="subs_cap" id="subs_cap" required/>
        <select name="payment_meaning" id="payment_meaning" autocomplete="off" required >
          <!-- autocomplete="off" is here to fix firefox bug for selected="selected" -->
          <option value="" selected>Moyen de paiement</option>
          {% for pm in payment_meanings %}
          <option value="{{pm.code}}">{{pm.title}}</option>
          {% endfor %}
        </select>
        <input type="number" min="1" placeholder="Nb de chèques" name="ch_qty" id="ch_qty" style="display:none;"/>

      </p>
      
      {% if input_barcode %}
      <p>
        <input type="text" name="m_barcode" id="m_barcode" maxlength="13" size="13" placeholder="Code barre" autocomplete="off" required/>
      </p>
      {% endif %}

      {% if can_create_binome %}
      <div>Voulez-vous inscrire la personne en tant que deuxième personne d'un binôme ?</div>
      <label>
        <input type="radio" name="binome" id="no_binome" required>
        Non
      </label><br>
    
      <label>
        <input type="radio" name="binome" id="add_binome" required>
        Oui
      </label><br>
      
      <div id="associate_area" style="display:none;">
        <div class="choice_button_area d-flex" >
          <div id="existing_member_choice" class="member_choice">
            A mettre en binôme avec un.e membre existant.e
          </div>
          {% if ASSOCIATE_MEMBER_SHIFT %}
          <div id="new_member_choice" class="member_choice">
            A mettre en binôme avec un nouveau membre
          </div>
          {% endif %}
        </div>
        
        <div id="existing_member_choice_action"  style="display:none;">
          <input type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." >
          <div class="btn--primary" id="search_member_button">Recherche</div>
          <div class="search_member_results_area" style="display:none;">
            <div class="search_results_text">
              <p><i>Choisissez parmi les membres trouvés :</i></p>
            </div>
            <div class="search_member_results"></div>
          </div>
          <div class="chosen_associate_area" style="display:none;">
            <div >
              <p><i>Binôme choisi : </i></p>
            </div>
            <div class="chosen_associate_group">
              <span class="chosen_associate"></span>
              <i class="fas fa-times remove_binome_icon"></i>
            </div>
          </div>
        </div>
        {% if ASSOCIATE_MEMBER_SHIFT %}
        <div id="new_member_choice_action"  style="display:none;">
          <div >
            <div>
              <input type="text" id="new_member_input" value="" placeholder="Nom du membre" >
            </div>
          </div> 
        </div>
        {% endif %}
      </div>
      {% endif %}
      <div>
        <button class="btn--primary">Valider</button>
      </div>
    </form>
      
    <div id="mail_generation">
    (*) L'adresse mail étant obligatoire, si le nouveau membre n'en a pas, veuillez en créer une en cliquant sur le bouton suivant : <a class="btn--info" id="generate_email">+</a>
    </div>
  </div>
</section>
{% include "members/shift_template_choice.html" %}
<section class="grid-6 has-gutter" id="coop_registration_details">
   <div class="col-6 menu txtcenter">
    RÉSUMÉ DE L'ENREGISTREMENT
   </div>

   <div class="col-6 main_content txtcenter">
    <h3>Félicitation ! Informations enregistrées.</h3>
    <!--
    <div class="numbox badge"></div>
    <p>Pensez à inscrire ce numéro temporaire de coopérateur au crayon de papier sur les deux formulaires papier.</p>
    -->
    <p id="parent" hidden>En binôme avec : <span id="parentName"></span></p>
    <p>Créneau choisi : <span class="shift_template"></span></p>
    <p id="next_shift_registration_detail">Prochain service : <span class="next_shift"></span></p>
    <button class="btn--primary" id="next_coop">Coopérateur.rice suivant.e !</button>
   </div>

</section>
<section class="grid-6 has-gutter" id="coop_list_view">
   <div class="col-6 menu txtcenter">
    LISTE DES ENREGISTREMENTS
   </div>

   <div class="col-6 main_content txtcenter">
    <table class="table--zebra" summary="">
      <thead>
      <tr>
        <th scope="col">Coop.</th>
        <th scope="col">Créneaux</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
   </div>
</section>
<script src="{% static 'js/pouchdb.min'|add:POUCHDB_VERSION|add:'.js' %}"></script>
<script type="text/javascript">
        var couchdb_dbname = '{{db}}';
        var couchdb_server = '{{couchdb_server}}' + couchdb_dbname;
        var dbc = new PouchDB(couchdb_dbname);
        var ASSOCIATE_MEMBER_SHIFT = '{{ASSOCIATE_MEMBER_SHIFT}}';
        var sync = PouchDB.sync(couchdb_dbname, couchdb_server, {
          live: true,
          retry: true,
          auto_compaction: false
        });
        var mag_place_string = '{{mag_place_string}}';
        var office_place_string = '{{office_place_string}}';
        var max_begin_hour = '{{max_begin_hour}}';
        var email_domain = '{{email_domain}}';
        var committees_shift_id = '{{committees_shift_id}}';
        var exemptions_shift_id = '{{exemptions_shift_id}}';

</script>
<script src="{% static "js/all_common.js" %}?v=1651853225"></script>
<script src="{% static "js/common.js" %}?v=1651853225"></script>
<script src="{% static "js/inscriptions.js" %}?v=1651853225"></script>

{% endblock %}
