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

{% load static %}

{% load i18n %}

{% block css_block %} 
    <link rel="stylesheet" type="text/css" href=" {% static 'css/missions_list.css' %} ">
{% endblock %}

{% block content %}

<!-- <div class="bg-success rounded-top rounded-5 pt-4 pb-1 mt-5" id="missionsListHeroBg"> -->
<div class="bg-transparent rounded-top rounded-5 pt-4 pb-1 mt-5" id="missionsListHeroBg">


    <div class="d-flex justify-content-between">
        {% if request.user.is_manager %}
        <div class="ms-2">
            <a class="btn btn-dark ms-4" href="{% url 'create-mission' %}">Créer une mission</a>
            <a class="btn btn-dark ms-1" href="{% url 'declare-mission' %}">Déclarer une mission</a>
        </div>
        {% endif %}
        <form class="d-flex me-4" action="" method="post">
            {% csrf_token %}
            <input class="form-control me-2 d-flex" type="search" placeholder="Rechercher une mission par son identifiant" aria-label="Search" name="missionRefSearched">
            <button class="btn btn-outline-light" type="submit">Rechercher</button>
        </form>
    </div>
    
    <!-- Ajouter ici un filtre -->
    <form action="{% url 'missions-filter' %}" method="post" class="mt-5 mb-5">
        {% csrf_token %}

        <div class="container-fluid">
            <div class="row mx-3  my-4"> <!--  d-flex flex-column -->
                <!-- Date Debut -->
                <div class="col-6 col-md-3 col-xl-2 g-0">
                    <input id="startDate" class="form-control bg-light" type="date" name="missionFilterDateStart"/>
                </div>
                <!-- Date Fin  -->
                <div class="col-6 col-md-3 col-xl-2 g-0">
                    <input id="finishDate" class="form-control bg-light" type="date" name="missionFilterDateFinish"/>
                </div>
                <div class="col-6 col-md-3 col-xl-2 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterAvailable">
                        <option selected>Pourvue ou non</option>
                        <option value="Toutes les cases">Toutes les cases</option>
                        <option value="Non pourvues">Non pourvues</option>
                        <option value="Pourvue et non validée">Pourvue et non validée</option>
                        <option value="Pourvue et validée">Pourvue et validée</option>
                    </select>
                </div>
                <div class="col-6 col-md-3 col-xl-2 g-0">
                    <select class="form-select bg-light" aria-label="Default select example"  name="missionFilterCancelled">
                        <option selected>Annulée ou non</option>
                        <option value="1">Toutes les cases</option>
                        <option value="Annulée">Annulée</option>
                        <option value="Non annulée">Non annulée</option>
                    </select>
                </div>

                <!-- Administrateur -->
                <div class="col-12 col-md-3 col-xl-2 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterManager" id="id_Administrateur"> 
                    <option selected>Administrateur</option>
                    <!-- managers -->
                    {% for manager in managers %}
                    <option value="{{manager.username}}">{{manager.username}}</option>
                    {% endfor %}
                    </select>
                </div>

                <!-- Remplacants -->
                <div class="col-12 col-md-3 col-xl-2 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterWorker" id="id_Remplacant">
                    <option selected>Remplaçants</option>
                    {% for worker in workers %}
                    <option value="{{worker.user.username}}">{{worker.user.username}}</option>
                    {% endfor %}
                    </select>
                </div>

                <!-- Etablissement -->
                <div class="col-12  col-md-3 col-xl-3 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterStructure" id="id_Etablissement">
                    <option selected>Etablissement</option>
                    {% for structure in structures %}
                    <option value="{{structure.name}}">{{structure.name}}</option>
                    {% endfor %}

                    </select>
                </div>
                <!-- "Service" -->
                <div class="col-12  col-md-3 col-xl-3 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterService" id="id_Service">
                    <option selected>Service</option>
                    {% for service in services %}
                    <option value="{{service.name}}">{{service.name}}</option>
                    {% endfor %}
                    </select>
                </div>
                
                <!-- Metiers -->
                <div class="col-12  col-md-9 col-xl-3 g-0">
                    <select class="form-select bg-light" aria-label="Default select example" name="missionFilterMetier" id="id_Metiers" multiple="multiple">
                    <!-- <option selected >Métier</option> -->
                    <!-- <option value="" disabled selected >Métier</option> -->
                    {% for metier in metiers %}
                    <option value="{{metier.name}}">{{metier.name}}</option>
                    {% endfor %}
                    </select>
                </div>

                <!-- Jour / Nuit -->
                <div class="col-12  col-md-3  g-0">
                    <select class="form-select bg-light" aria-label="Default select example"  name="missionFilterDayAndOrNight">
                        <option selected>Jour/Nuit</option>
                        <option value="Jour">Jour</option>
                        <option value="Nuit">Nuit</option>
                    </select>
                </div>
                
                <div class="col-12  col-md-3  g-0">
                    <button type="submit" class="btn btn-outline-light mt-2"  href=" {% url 'missions-filter' %}">Filtrer</button>
                    <a class="btn btn-outline-light mt-2"  href=" {% url 'list-missions' %}">Réinitialiser les filtres</a>
                </div>
            </div>
        </div>
        
    </form>
</div>




<div class="bg-light">

    
    <!-- Liste des missions -->
    <div class="row mx-3 pt-5">

        <div class="mb-5 mx-auto">{{missions.count}} missions</div>
        


    {% for mission in missions %}
    <!-- Liste des missions : Layout Horizontal -->
    <!-- .bg-white -->
    
    
    <div class="container-lg mb-3 .bg-light rounded border border-2 bg-white
    {% if mission.worker == None %} py-2 {% else %} py-4 {% endif %} ">
    
    <!-- <div class="container-lg mb-3 .bg-light rounded border border-2 py-2 bg-white"> -->
    
        <!-- <h2>Page mission : mise en page horizontale</h2> -->
        <!-- First row -->

        {% if mission.worker == None %}
        <div class="row g-1"> 
        {% else %} 
        <div class="row g-1  pb-2"> 
        {% endif %}
          <div class="col-6 col-sm-2 border-end">
            {% if mission.worker == None %}
                <span class="badge bg-danger p-2">Non pourvue</span> 
            {% else %} 
                <span class="badge bg-success p-2">Pourvue</span> 
            {% endif %}
          </div>
          <div class="col-6 col-sm-6">
            <div class="p-2 .bg-white">{{mission.structure}}</div>
          </div>
          <div class="col-12 col-sm-4">
            <div class="p-2 .bg-white text-end">Mission #{{mission.referenceNumber}}</div>
          </div>
        </div>
        <!-- Second row  -->
        <div class="row g-1">
            <div class="col-12 col-sm-12 col-md-12 col-lg-3">
                <!-- <div class="p-2 .bg-white border-end"> {{mission.start}}</div> -->
                <div class="p-2 .bg-white border-end">
                {% language 'fr' %}
                    {{mission.startDate|date:'D. d b. Y' }} - {{mission.startTime|date:'H:i' }} à {{mission.finishTime|date:'H:i' }}
                {% endlanguage %}
                </div>
            </div>
            <div class="col-6 col-sm-3 col-md-3 col-lg-3">
                <div class="p-2 .bg-white border-end"> {{mission.service}}</div>
            </div>
            <div class="col-6 col-sm-3 col-md-3 col-lg-2">
                <div class="p-2 .bg-white"> {{mission.profil}}</div>
            </div>
            <div class="col-8 col-sm-3 col-md-4 col-lg-3">
                <!-- {{mission.candidates.all.count}} et {{mission.candidates.count}} -->
                {% if mission.worker == None and mission.candidates.count == 0 %}
                    <div class="btn btn-secondary">En attente de candidat</div>
                {% elif mission.worker == None and mission.candidates.count == 1 %}
                    <div class="btn btn-warning">{{mission.candidates.count}} candidat.e</div>
                {% elif mission.worker == None and mission.candidates.count > 1 %}
                    <div class="btn btn-warning">{{mission.candidates.count}} candidat.es</div>
                {% else %}   
                    <!-- <div class="p-2 .bg-white">  -->
                        <!-- <img src="{{mission.worker.profile_pic.url}}" alt="Profile Picture of The Worker" style="max-height: 40px;">
                        {{mission.worker.user.first_name}} {{mission.worker.user.last_name}} /
                        <div>
                            {% if mission.structure == mission.worker.structure%}
                                Salarié/Agent
                            {% else %}
                                Vacataire
                            {% endif %}
                        </div> -->
                        <div class="container p-2 .bg-white">
                            <div class="row">
                              <div class="col-3">
                                <img src="{{mission.worker.profile_pic.url}}" alt="Profile Picture of The Worker" style="max-height: 40px;">
                              </div>
                              <div class="col-9">
                                <div class="row">
                                    {{mission.worker.user.first_name}} {{mission.worker.user.last_name}}
                                </div>
                                <div class="row">
                                    {% if mission.structure == mission.worker.structure%}
                                        Salarié/Agent
                                    {% else %}
                                        Vacataire
                                    {% endif %}                                    
                                </div>

                              </div>
                            
                            </div>
                        </div>   
                {% endif %}
        
            </div>
          <div class="col-4 col-sm-2 col-md-2 col-lg-1">
            <a class="btn btn-outline-success"  href=" {% url 'show-mission' mission.id %}">Détails</a>
          </div>
        </div>
      </div>
    
        <!-- <div class="col-lg-6 p-3">
            <div class="box-element remplacant_card">
                {% if mission.worker == None %}
                    <span class="badge bg-danger p-2">Non pourvue</span> 
                {% else %} 
                    <span class="badge bg-success p-2">Pourvue</span> 
                {% endif %}
                
                <div >referenceNumber : {{mission.referenceNumber}}</div>
                <div >Disponible : {{mission.available}}</div>
                <div >type : {{mission.type}}</div>
                <div >structure : {{mission.structure}}</div>
                <div >service : {{mission.service}}</div>
                <div >start : {{mission.start}}</div>
                <div >finish : {{mission.finish}}</div>
                <div >profile : {{mission.profil}}</div>
                <div >motif : {{mission.motif}}</div>
                <div >worker : {{mission.worker}}</div>
                <hr>

                <div class="d-flex justify-content-between">
                    <div>
                        <a class="btn btn-outline-success"  href=" {% url 'show-mission' mission.id %}">Détails</a>
                        <a class="btn btn-outline-info" href=" {% url 'update-mission' mission.id %}">Modifier</a>
                        <a class="btn btn-outline-danger" href=" {% url 'delete-mission' mission.id %}">Supprimer</a>
                        <a class="btn btn-info" href=" {% url 'appliers-mission' mission.id %}">Candidats</a>
                    </div>

                    {% if request.user.worker and mission.worker == None %}
                        {% if request.user.worker in mission.candidates.all %}
                            <a class="btn btn-danger" href=" {% url 'unapply-mission' mission.id %}">Annuler ma candidature</a>
                        {% else %}   
                            <a class="btn btn-primary" href=" {% url 'apply-mission' mission.id %}">Postuler</a>    
                        {% endif %}
                    {% endif %}
                </div>   
            </div>
        </div> -->
                    <!-- {%if request.user.is_authenticated %}
                    <a class="btn btn-danger my-2 my-sm-0" href="{% url 'logout' %}">Se déconnecter</a>
                    <span class="text-light">Bienvenue {{request.user.username|title}}, </span>
                    {% else %}
                    <a class="btn btn-success my-2 my-sm-0" href="{% url 'loginadmin' %}">Connexion Admin</a>
                    <a class="btn btn-success my-2 my-sm-0" href="{% url 'loginremplacant' %}">Connexion Remplaçant</a>
                    <a class="btn btn-warning my-2 my-sm-0" href="{% url 'registerworker' %}">Inscription Remplaçant</a>
                    {% endif %} -->
                             
                <!-- <h6 style="display: inline-block; float: right"><strong>Dakar</strong></h6> -->
            
        
        {% endfor %}

        
        </div>
    </div>
</div>

{% endblock content %}

{% block js_clock %} 
    <script>
        // In your Javascript (external .js resource or <script> tag)
            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Administrateur').select2({
                    theme: "bootstrap-5",
                });
            });
            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Remplacant').select2({
                    theme: "bootstrap-5",
                });
            });
            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Etablissement').select2({
                    theme: "bootstrap-5",
                });
            });

            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Service').select2({
                    theme: "bootstrap-5",
                    // dropdownParent: $("#form-select-sm").parent(), // Required for dropdown styling
                });
            });
            $(document).ready(function() {
                // $('.js-example-basic-single').select2();
                $('#id_Metiers').select2({
                    theme: "bootstrap-5",
                    placeholder: "Choisir les Métiers",
                    allowClear: true
                });
                
            });


            $(document).ready(function() {
                $('#id_Type').select2();
            });

            $(document).ready(function() {
                $('#id_ProfilRecherche').select2();
            });
            $(document).ready(function() {
                $('#id_Motif').select2();
            });
            $(document).ready(function() {
                $('#id_RemplacantSelectionne').select2();
            });
        </script>
{% endblock %}