{% extends 'reseau/main.html' %}

{% load static %}

{% block content %}
     <h3>Mes Remplaçants</h3>
     <div class="row mx-3">
          <form class="d-flex" action="" method="post">
            {% csrf_token %}
            <input class="form-control me-2 d-flex" type="search" placeholder="Rechercher un remplaçant" aria-label="Search" name="workerReshearched">
            <button class="btn btn-outline-success" type="submit">Rechercher</button>
          </form>
          {% for worker in workers %}
            <div class="col-lg-4 p-3">
               <!-- <a class="card" href="#" style="width: 18rem;">  -->
                    <div class="box-element remplacant_card">
                      <img style="height: 100px;" class="thumbnail mx-auto d-block" src="{{worker.profile_pic.url}}">
                      <hr>
                      {% if worker.user.last_name == '' %}
                        <div class="mx-auto d-block text-center" >{{worker.user.username|title}} (identifiant)</div>
                      {% else %}
                        <div class="mx-auto d-block text-center" >{{worker.user.first_name}} {{worker.user.last_name}}</div>
                      {% endif %}
                      <hr>
                      {% if worker.metiers == None %}
                        <div class="mx-auto d-block text-center">{{worker.structure}} </div> 
                      {% else %}
                        <div class="mx-auto d-block text-center">{{worker.metiers}} </div> 
                      {% endif %}
                                         
                      <hr>
                      <!-- <div class="d-flex"> -->
                      <div class="d-flex">
                        <div class="">
                          {% if worker.day %}
                            <button  class="me-1 btn btn-outline-secondary add-btn">Jour</button>
                          {% endif %}
                        </div>

                        <div class="">
                          {% if worker.night %}
                            <button  class="me-1 btn btn-outline-secondary add-btn">Nuit</button>
                          {% endif %}
                        </div>

                        <div class="ms-auto">
                          <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#exampleModal{{ forloop.counter }}">
                            Plus d'infos
                          </button>
                        </div>
                        
                      </div>
                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal{{ forloop.counter }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ forloop.counter }}" aria-hidden="true">
                          <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                          <div class="modal-header ">
                                <h5 class="modal-title" id="exampleModalLabel{{ forloop.counter }}">{{worker.user.first_name}} {{worker.user.last_name}} - {{worker.phone}} - {{worker.user.email}}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                          </div>
                                <div class="modal-body">
                                    <ul class="nav nav-pills mb-3" id="pills-tab{{ forloop.counter }}" role="tablist">
                                          <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="pills-profile-tab{{ forloop.counter }}" data-bs-toggle="pill" data-bs-target="#pills-profile{{ forloop.counter }}" type="button" role="tab" aria-controls="pills-profile{{ forloop.counter }}" aria-selected="true">Profile</button>
                                          </li>
                                          <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-service-tab{{ forloop.counter }}" data-bs-toggle="pill" data-bs-target="#pills-service{{ forloop.counter }}" type="button" role="tab" aria-controls="pills-service{{ forloop.counter }}" aria-selected="false">Service</button>
                                          </li>
                                          <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-disponibilites-tab{{ forloop.counter }}" data-bs-toggle="pill" data-bs-target="#pills-disponibilites{{ forloop.counter }}" type="button" role="tab" aria-controls="pills-disponibilites{{ forloop.counter }}" aria-selected="false">Disponibilités</button>
                                          </li>
                                          <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-missions-tab{{ forloop.counter }}" data-bs-toggle="pill" data-bs-target="#pills-missions{{ forloop.counter }}" type="button" role="tab" aria-controls="pills-missions{{ forloop.counter }}" aria-selected="false">Missions</button>
                                          </li>
                                          <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-documents-tab{{ forloop.counter }}" data-bs-toggle="pill" data-bs-target="#pills-documents{{ forloop.counter }}" type="button" role="tab" aria-controls="pills-documents{{ forloop.counter }}" aria-selected="false">Documents</button>
                                          </li>
                                        </ul>
                                        <div class="tab-content" id="pills-tabContent{{ forloop.counter }}">
                                          <div class="tab-pane fade show active" id="pills-profile{{ forloop.counter }}" role="tabpanel" aria-labelledby="pills-profile-tab{{ forloop.counter }}">
                                              <h5>{{worker.structure}}</h5> 
                                              <hr>
                                              <h5>Statut</h5> 
                                              <hr>
                                              <h5>Statut : {{worker.statut}}</h5> 
                                              <h5>Matricule : {{worker.matricule}}</h5>
                                              <hr> 
                                              <h5>Profil déjà validé</h5> 
                                              <hr>
                                              <h5>METIERS ET COMPETENCES</h5>
                                              <h5>{{worker.competences}}</h5>
                                              <hr> 
                                              <h5>Horaires de travail</h5>
                                              <!-- <h5>Jour : {{worker.day}}</h5> 
                                              <h5>Nuit : {{worker.night}}</h5>  -->
                                              <h5>Jour : 
                                              {% if worker.day %}
                                                  <span class="badge bg-success">Accepté</span> 
                                              {% else %}
                                                <span class="badge bg-danger">Refusé</span> 
                                              {% endif %}
                                              <!-- {{worker.day}} -->
                                              </h5> 
                                              <h5>Nuit : 
                                                {% if worker.night %}
                                                  <span class="badge bg-success">Accepté</span> 
                                                {% else %}
                                                  <span class="badge bg-danger">Refusé</span> 
                                                {% endif %}
                                                <!-- {{worker.night}} -->
                                              </h5> 
                                          </div>
                                          <div class="tab-pane fade" id="pills-service{{ forloop.counter }}" role="tabpanel" aria-labelledby="pills-service-tab{{ forloop.counter }}">
                                              <h5>{{worker.structure}}</h5> 
                                              <p>Choisissez les services que vous souhaitez <strong>interdire</strong> au remplaçant :</p>
                                              <select class="form-select" aria-label="Default select example">
                                                    <option selected>Nom du service refusé</option>
                                                    <option value="1">Service 1</option>
                                                    <option value="2">Service 2</option>
                                                    <option value="3">Service 3</option>
                                                    <option value="4">Service ...</option>
                                                  </select>
                                          </div>
                                          <div class="tab-pane fade" id="pills-disponibilites{{ forloop.counter }}" role="tabpanel" aria-labelledby="pills-disponibilites-tab{{ forloop.counter }}">
                                              <p>Dernière mise à jour pour ce mois-ci : le 9 janvier 2022 (A DYNAMISER)</p>
                                              <table class="table">
                                                    <thead>
                                                      <tr>
                                                        <th scope="col" colspan="2">Lundi</th>
                                                        <th scope="col" colspan="2">Mardi</th>
                                                        <th scope="col" colspan="2">Mercredi</th>
                                                        <th scope="col" colspan="2">Jeudi</th>
                                                        <th scope="col" colspan="2">Vendredi</th>
                                                        <th scope="col" colspan="2">Samedi</th>
                                                        <th scope="col" colspan="2">Dimanche</th>
                                                      </tr>
                                                    </thead>
                                                    <tbody>
                                                      <tr>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                        <td class="table-secondary">J</th>
                                                        <td class="table-secondary">N</th>
                                                      </tr>
                                                      <tr>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                      </tr>
                                                      <tr>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                      </tr>
                                                      <tr>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-success"></th>
                                                      </tr>
                                                      <tr>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-danger"></th>
                                                        <td class="table-success"></th>
                                                      </tr>
                                                    </tbody>
                                                  </table>
                                          </div>
                                          <div class="tab-pane fade" id="pills-missions{{ forloop.counter }}" role="tabpanel" aria-labelledby="pills-missions-tab{{ forloop.counter }}">
                                              
                                              <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <button type="button" class="btn btn-outline-secondary rounded-pill">Précedent</button>
                                                    <div>63 heures attribuées en janvier (A DYNAMISER)</div>
                                                    <button type="button" class="btn btn-outline-secondary rounded-pill">Suivant</button>
                                              </div>

                                              <table class="table table-striped table-hover">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">#</th>
                                                            <th scope="col">Référence</th>
                                                            <th scope="col">Date</th>
                                                            <th scope="col">Debut</th>
                                                            <th scope="col">Fin</th>
                                                            <th scope="col">Structure</th>
                                                            <th scope="col">Service</th>
                                                            <th scope="col">Etat</th>
                                                            <th scope="col">Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for mission in missions %}
                                                        <tr>
                                                            <th scope="row">{{forloop.counter}}</th>
                                                            <td>{{mission.referenceNumber}}</td>
                                                            <td>{{mission.start|date:"SHORT_DATE_FORMAT"}}</td> 
                                                            <td>{{mission.start|time:"H:i"}}</td>
                                                            <td>{{mission.finish|time:"H:i"}}</td>
                                                            <td>{{mission.structure}}</td>
                                                            <td>{{mission.service}}</td>
                                                            <td>
                                                                {% if mission.worker.user_id == worker.user_id %}
                                                                    <span class="badge bg-success">Obtenue</span> 
                                                                {% elif mission.worker %}
                                                                    <span class="badge bg-danger">Pourvue</span> 
                                                                {% else %}
                                                                    <span class="badge bg-warning text-dark">En attente</span> 
                                                                {% endif %}
                                                            </td>
                                                            <td>
                                                                <a class="btn btn-primary"  href=" {% url 'show-mission' mission.id %}">Voir</a>
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                  </table>
                                          </div>
                                          <div class="tab-pane fade" id="pills-documents{{ forloop.counter }}" role="tabpanel" aria-labelledby="pills-documents-tab{{ forloop.counter }}">
                                              <div class="container mh-100 " style="height: 500px;">
                                                    <div class="row h-100">
                                                      <div class="col-3 bg-light h-100 pt-2">
                                                      <!-- {{worker.cv}} -->
                                                      {% if worker.cv == None %}
                                                        Aucun cv téléchargé
                                                      {% else %} 
                                                      <!-- <a href="#">CV_{{worker.user.last_name}}_{{worker.user.first_name}}.pdf</a>    -->
                                                      <a href="{{worker.cv.url}}">CV_{{worker.user.last_name}}_{{worker.user.first_name}}.pdf</a>   
                                                      {% endif %} 
                                                        <hr>  
                                                      </div>
                                                      <div class="col-9 order-2 h-100">
                                                    
                                                      </div>
                                                    </div>
                                                  </div>
                                          </div>
                                        </div>
                                        
                                </div>
                          <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                <!-- <button type="button" class="btn btn-primary">Enregistrer</button> -->
                          </div>
                          </div>
                          </div>
                         </div>
                         <!-- <a href="#" class="btn btn-primary stretched-link">Plus de Détails</a> -->
                         <!-- <hr> -->
                         <!-- <div >{{worker.statut}}</div> -->
                         <div class="mt-3">                              
                              {% if worker.statut == None %}
                                <div class="card-footer  bg-secondary text-white">Statut non renseigné</div>
                              {% else %}
                                <div class="card-footer  bg-primary text-white">{{worker.statut}}</div>
                              {% endif %}
                         </div>
                    </div>
               <!-- </a> -->
            </div>
        {% endfor %}
     </div>
{% endblock content %}