{% extends "base.html" %}

{% block extra_javascript %}
<script type="text/javascript">
$(document).ready(function() {
   $(".js-contact-attach").click(function() {
      var token = '{{ csrf_token }}';
      var url ="{% url 'personne-reseau-add' personne.pk %}";
      var value = $("#id_reseaux").val();
      $.post(url, {csrfmiddlewaretoken: token, contacts:value}, function() {
         $('#popup').modal('hide');
         window.location.reload(true);
      });
   });
});
</script>
{% endblock %}

{% block content %}
    <div class="row border-bottom mt-3 mb-3 lead">
        <div class="col">Famille {{ personne.famille.nom }} - {{ personne.famille.adresse }}</div>
        <div class="col text-end">Réseau professionnel de {{ personne.nom_prenom }}</div>
    </div>
    <div class="row mb-3">
        <div class="col text-end">
           {% if personne.famille|can_edit:user %}
            <button type="button" class="btn btn-sm btn-outline-primary"
                    data-bs-toggle="modal" data-bs-target="#popup">Ajouter un contact
            </button>
           {% endif %}
        </div>
    </div>
   <div class="row">
     <div class="col">
         <form action="#" method="post">{% csrf_token %}
             <input type="hidden" name="famille" value="{{ famille.pk }}">
             <table id="t_contacts" class="table table-sm table-borderless table-hover">
                 <thead class="table-light">
                    <tr>
                        <th>Nom, prénom</th><th>Rôle/Act./prof.</th><th>Téléphone</th>
                        <th>Email</th><th width="60px">Action</th>
                    </tr>
                 </thead>
                 <tbody>
                    {% for contact in reseau %}
                       <tr>
                           <td>{{ contact.nom_prenom }}</td>
                           <td>{{ contact|role_profession }}</td>
                           <td>{{ contact.tel_prof }}</td>
                           <td>{{ contact.email }} </td>
                           <td align="center">
                              <button class="btn btn-xs me-2 btn-danger confirm" title="Retirer ce contact" data-confirm="Voulez-vous vraiment retirer ce contact ?"
                               formaction="{% url 'personne-reseau-remove' personne.pk contact.pk %}">X
                              </button>
                           </td>
                       </tr>
                    {% endfor %}
                 </tbody>
             </table>
         </form>
     </div>
   </div>
   <!-- Modal -->
   <div class="row mb-3 justify-content-center">
      <div class="modal" id="popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle">Contacts disponibles</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
                  <p>
                     <a class="btn btn-sm btn-outline-primary" role="button"
                        href="{% url 'contact-add'  %}?forpers={{ personne.pk }}">Créer un nouveau contact
                     </a>
                  </p>
                  <p>{{ form.as_p }}</p>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Annuler</button>
                  <button type="button" class="btn btn-sm btn-primary js-contact-attach" data-bs-dismiss="modal">Enregistrer</button>
               </div>
            </div>
         </div>
      </div>
   </div>
{% endblock %}