{% extends "base.html" %}
{% load static %}

{% block additionnal_css %}
<link rel="stylesheet" href="{% static 'css/datatables/datatables.min.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/manage_makeups.css' %}">
<link rel="stylesheet" href="{% static 'jquery-ui-1.12.1/jquery-ui.min.css' %}">

{% endblock %}

{% block additionnal_scripts %}
  <script type="text/javascript" src="{% static 'jquery-ui-1.12.1/jquery-ui.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/datatables/datatables.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'js/notify.min.js' %}?v=1651853225"></script>
{% endblock %}

{% block content %}
<div class="page_body">
    <div id="back_to_admin_index">
      <button type="button" class="btn--danger"><i class="fas fa-arrow-left"></i>&nbsp; Retour</button>
    </div>
    <div class="login_area">
      {% include "common/conn_admin.html" %}
    </div>
    <div class="header txtcenter">
      <h1>Gestion des Rattrapages</h1>
    </div>
    
    <div class="page_content">
      <div id="table_top_area">
          <h3>Liste des membres devant effectuer un rattrapage</h3>
          <div class="table_grouped_action">
              <button type="button" class="btn--primary" id="decrement_selected_members_makeups">
                  -1 rattrapage pour les membres sélectionnés
              </button>
          </div>
      </div>
      <div class="table_area">
          <table id="makeups_members_table" class="display" cellspacing="0" width="100%"></table>
      </div>
      <div id="add_members_area">
        <div id="add_members_form_area">
          <h4>Ou, ajouter un rattrapage à un.e membre</h4>
          <form id="search_member_form" action="javascript:;" method="post">
            <input type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." required>
            <button type="submit" class="btn--primary" id="search_member_button">Recherche</button>
          </form>
        </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>
    </div>
  

    <div id="templates" style="display:none;">
      <div id="modal_extend_delay_template">
        <p>
          Vous vous apprêtez à rallonger le délai de 
          <span class="member_name"></span> 
          pour une durée de {{extension_duration}} mois à partir d'aujourd'hui.
        </p>
      </div>
      <div id="modal_incr_makeup_counter">
        <p>Ajouter un rattrapage à <span class="member_name"></span> ?</p>
        <br><label for="incr-explanation">Explication : </label><input class="" type="text" id="incr-explanation">
        <br><br><label for="incr-signature">Signature : </label><input class="" type="text" id="incr-signature">
      </div>
      <div id="modal_decr_makeup_counter">
        <p>Enlever un rattrapage à <span class="member_name"></span> ?</p>
        <br><label for="decr-explanation">Explication : </label><input class="" type="text" id="decr-explanation">
        <br><br><label for="decr-signature">Signature : </label><input class="" type="text" id="decr-signature">
      </div>
      <div id="modal_decr_selected_makeup_counter">
        <p>Enlever un rattrapage aux membres sélectionnés ?</p>
        <br><label for="decr-explanation-selected">Explication : </label><input class="" type="text" id="decr-explanation-selected">
        <br><br><label for="decr-signature-selected">Signature : </label><input class="" type="text" id="decr-signature-selected">
      </div>
    </div>
</div>

<script src='{% static "js/all_common.js" %}?v=1651853225'></script>
<script src='{% static "js/admin/manage_makeups.js" %}?v=1651853225'></script>
<script>
  const extension_duration = {{extension_duration}};
</script>
{% endblock %}