{% extends "BASE.html" %}
{% load static %}
{% load tags_personnaliser %}

{% block page_titre %} SGL - Gestion des véhicules {% endblock %}

{% block "contenu" %}
<div class="row p-2">
    <div class="col d-flex justify-content-between">
        <h3>PARC AUTOMOBILE</h3>
        {% if user|has_group:"Logisticien" %}
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerVehiculeModal">Ajouter un véhicule</button>
        {% endif %}
    </div>
</div>

<div class="row p-2">
    {% for vehicule in parc_vehicule %}
    <div class="card p-2" style="width: 14rem;">
        {% if vehicule.image %}
        <img class="card-img-top m-auto d-block" src="{{ vehicule.image.url }}" style="width: 150px;">
        {% else %}
        <img class="card-img-top m-auto d-block" src="{% static 'images/exemple-produit.jpg' %}" style="width: 120px;" alt="Image par défaut">
        {% endif %}
        <div class="card-body">
            <h5 class="card-title text-center">{{ vehicule.immatriculation }}</h5>

            {% if user|has_group:"Logisticien" %}
            <a href="{% url 'gestion_vehicule:detail-voiture' vehicule.id %}" class="d-block m-auto btn btn-primary d-block voir-demande">Voir</a>
            {% endif %}
        </div>
    </div>
    {% empty %}
    <p class="text-center">Aucun véhicule enregistré.</p>
    {% endfor %}
</div>

<div class="row d-flex mt-3">
  <div class="col d-flex justify-content-between">
        <h4>LISTE DES DEMANDES</h4>
        {% if user|has_group:"Employe" %}
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerDemandeModal">Faire une demande</button>
        {% endif %}
    </div>
</div>

{% if user|has_group:"Employe" %}
<div class="row d-flex mt-2 mb-2">
  <!-- <div class="col">
      <label>Filtrer par date et heure de depart</label>
      <input type="datetime-local" class="form-control">
  </div> -->
  <div class="col">
      <label>Statut de la demande :</label>
      <select name="filtreStatutDemande" id="filtreStatutDemande" class="form-select">
        <option value="tout">Toutes les demandes</option>
        <option value="mes_demandes">Mes demandes</option>
        <option value="valider">Demande validée</option>
        <option value="refuser">Demande Refusée</option>
        <option value="attente">Demande en attente</option>
        <option value="terminer">Course terminée</option>
      </select>
  </div>
</div>
{% endif %}

<div class="row">
    <div class="col">
        <div id="tableau-demande-vehicule" data-userid = "{{ user.id }}" data-url = "{% url 'gestion_vehicule:liste-demande' %}"></div>
    </div>
</div>


<!-- ---------------------------------------- MODAL ENREGISTREMENT VEHICULE ----------------------------------- -->

<div class="modal fade" id="enregistrerVehiculeModal" tabindex="-1" aria-labelledby="enregistrerVehiculeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="enregistrerVehiculeModalLabel">Enregistrer un véhicule</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'gestion_vehicule:enregistrer-voiture' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ formulaire_enregistrer_vehicule.as_p }}
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="submit" class="btn btn-primary">Enregistrer</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- ------------------------------------ MODAL ENREGISTREMENT DEMANDE ------------------------------------ -->
<div class="modal fade" id="enregistrerDemandeModal" tabindex="-1" aria-labelledby="enregistrerDemandeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="enregistrerDemandeModalLabel">Enregistrer une demande</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="messageZone"></div>
        <form data-url ="{% url 'gestion_vehicule:enregistrer-demande' %}" id="enregistrer-demande-form" enctype="multipart/form-data">
            {% csrf_token %}
            {{ formulaire_demande_vehicule.as_p }}
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="submit" class="btn btn-primary">Enregistrer</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- ---------------------------------------- Modal confirmer sortie de la voiture -----------------------  -->
 <div class="modal fade" id="confirmerDemandeModal" tabindex="-1" aria-labelledby="confirmerDemandeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="confirmerDemandeModalLabel">Détail de la demande</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'gestion_vehicule:statut_demande' %}" method="post">
            {% csrf_token %}
            <h5 class="text-center">Décision du logisticien</h5>
            <div class="d-flex justify-content-around">
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="radioValider" id="radioValider" value="Valider">
                  <label class="form-check-label" for="radioValider">
                      Valider la demande
                  </label>
              </div>
              <div class="form-check">
                  <input class="form-check-input" type="radio" name="radioValider" id="radioRefuser" value="Refuser">
                  <label class="form-check-label" for="radioRefuser">
                      Refuser la demande
                  </label>
              </div>
            </div>
            <div id="affichage-formulaire">
              <h5 class="text-center mt-3">Détail de la demande</h5>
                <input type="hidden" name="id-demande" id="id-demande">
                <div class="form-group mt-2">
                    <label for="">Nom du passager :</label>
                    <input type="text" class="form-control" id="nom-passager" readonly>
                </div>
                <div class="form-group mt-2">
                    <label for="">Lieu de départ</label>
                    <input type="text" class="form-control" id="lieu-depart" readonly>
                </div>
                <div class="form-group mt-2">
                    <label for="">Lieu d'arrivé :</label>
                    <input type="text" class="form-control" id="lieu-arrivee" readonly>
                </div>
                <div class="form-group mt-2">
                    <label for="">Date et heure de départ :</label>
                    <input type="text" class="form-control" id="date-heure-depart" readonly>
                </div>
                <h5 class="text-center mt-3">Attribution</h5>
                <div class="form-group">
                    <label for="">Véhicule : </label>
                    <select name="vehicule" id="vehicule" class="form-select"></select>
                </div>
                <div class="form-group mt-2">
                    <label for="">Chauffeur :</label>
                    <select name="chauffeur" id="chauffeur" class="form-select"></select>
                </div>
                <!-- <h5 class="text-center mt-3">Fin de course</h5>
                <div class="form-check">
                  <input class="form-check-input" name="course_termine" type="checkbox" role="switch" id="courseTermine">
                  <label class="form-check-label" for="courseTermine">Course terminée</label>
                </div>
                <div class="form-group mt-2">
                    <label for="">Date et heure de retour :</label>
                    <input type="datetime-local" name="date_heure_retour" id="date_heure_retour" class="form-control">
                </div> -->
            </div>
            <div class="form-group mt-2" id="refus">
                <label for="">Motifs du refus :</label>
                <textarea class="form-control" name="motif" id="motif-refus"></textarea>
            </div>
            <div class="modal-footer" id="validation-sortie-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="submit" class="btn btn-primary" id="demanderValiderEnregistrer">Enregistrer</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block "js" %}
    <script src="{% static 'js/gestion_vehicule.js' %}"></script>
{% endblock %}