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

{% load static %}

{% block content %}

    <h4>Liste de mes missions</h4>
    <hr>
    <h2>Remplaçant : {{worker.user.first_name}} {{worker.user.last_name|upper}}</h2>
    <!-- <a class="btn btn-success"  href="#">Voir Mon Profile</a>  -->

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Voir Mon Profil
    </button>

    <table class="table">
        <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>



    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">
        <div class="modal-header ">
             <h5 class="modal-title" id="exampleModalLabel">{{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" role="tablist">
                       <li class="nav-item" role="presentation">
                         <button class="nav-link active" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="true">Profil</button>
                       </li>
                       <li class="nav-item" role="presentation">
                         <button class="nav-link" id="pills-service-tab" data-bs-toggle="pill" data-bs-target="#pills-service" type="button" role="tab" aria-controls="pills-service" aria-selected="false">Service</button>
                       </li>
                       <li class="nav-item" role="presentation">
                         <button class="nav-link" id="pills-disponibilites-tab" data-bs-toggle="pill" data-bs-target="#pills-disponibilites" type="button" role="tab" aria-controls="pills-disponibilites" aria-selected="false">Disponibilités</button>
                       </li>
                       <li class="nav-item" role="presentation">
                         <button class="nav-link" id="pills-missions-tab" data-bs-toggle="pill" data-bs-target="#pills-missions" type="button" role="tab" aria-controls="pills-missions" aria-selected="false">Missions</button>
                       </li>
                       <li class="nav-item" role="presentation">
                         <button class="nav-link" id="pills-documents-tab" data-bs-toggle="pill" data-bs-target="#pills-documents" type="button" role="tab" aria-controls="pills-documents" aria-selected="false">Documents</button>
                       </li>
                     </ul>
                     <div class="tab-content" id="pills-tabContent">
                       <div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                          <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 : 
                          {% 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" role="tabpanel" aria-labelledby="pills-service-tab">
                            <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" role="tabpanel" aria-labelledby="pills-disponibilites-tab">
                            <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" role="tabpanel" aria-labelledby="pills-missions-tab">
                            
                            <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" role="tabpanel" aria-labelledby="pills-documents-tab">
                            <div class="container mh-100 " style="height: 500px;">
                                 <div class="row h-100">
                                   <div class="col-3 bg-light h-100 pt-2">
                                     <!-- <a href="#">CV_{{worker.user.last_name}}_{{worker.user.first_name}}.pdf</a>    -->
                                    {% 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>
        </div>
        </div>
        </div>
   </div>

{% endblock content %}