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

{% load static %}

{% block content %}

    <h4>Liste de mes admissions</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>

    <div>
      <form method="POST" action="">

          {% csrf_token %}

          <!-- <select class="form-select" aria-label="Default select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select> -->

          <!-- <label for="">Username</label>
          <input type="text" name="username" placeholder="Enter Username"> -->


          <!-- <input type="submit" value="Demander une admission"> -->

          <form action="" method="post"> 
            {% csrf_token %}
            <fieldset>
              <div class="mb-3 mt-3">
                <label for="structureSelect" class="form-label">Choisir la structure</label>
                <select id="structureSelect" class="form-select" name="structureSelect">
                  {% for structure in structures %}
                    <option value="{{structure.code}}">{{structure.name}}</option>
                  {% endfor%}
                  <!-- <option value="1">c1</option>
                  <option value="2">c2</option>
                  <option value="3">c3</option> -->
                </select>
              </div>
              <!-- Code de la structure -->
              <div class="mb-3 mt-3">
                <label for="codeStructure" class="form-label">Saisir le code de la structure</label>
                <input type="text" id="codeStructure" class="form-control" name="codeStructure" placeholder="Code de la structure">
              </div>
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="toemail">
                <div id="emailHelp" class="form-text">Nous ne partagerons jamais votre email à qui que ce soit.</div>
              </div>
              <div class=" mb-3">
                <label for="getCodeBy" class="form-label">Recevoir le code par :</label>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="emailFieldsetCheck" disabled>
                  <label class="form-check-label" for="emailFieldsetCheck">
                    Email
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="smsFieldsetCheck" disabled>
                  <label class="form-check-label" for="smsFieldsetCheck">
                    SMS
                  </label>
                </div>
              </div>
              <button type="submit" class="btn btn-primary">Demander une admission</button>
            </fieldset>
          </form>
      </form>
  </div>    

    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Structure</th>
                <th scope="col">Code</th>
            </tr>
        </thead>
        <tbody>

          {% for structure_allowed in structures_allowed %}
          <tr>
              <th scope="row">{{forloop.counter}}</th>
              <td>{{structure_allowed.name}}</td>
              <td>{{structure_allowed.code}}</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">Profile</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 : {{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" 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>    -->
                                      {% if worker.user.last_name != "" %}
                                        <a href="{{worker.cv.url}}">CV1_{{worker.user.last_name|title}}_{{worker.user.first_name|title}}.pdf</a>  
                                      {% else %} 
                                        <a href="{{worker.cv.url}}">CV_{{worker.user.username|title}}.pdf</a> 
                                      {% endif %}
                                    {% 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 %}