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

{% block page_titre %} Tableau de bord {% endblock %}
{% block "contenu" %}
<div class="row p-2 d-flex justify-content-around">
    <div class="col-5 col-lg-3 border border-3 rounded border-danger p-2 d-flex" style="cursor: pointer;" id="produit_rupture">
        <img src="{% static 'images/stock-rupture.png' %}" alt="" style="width: 30%; height: 75%;">
        <div class="d-flex justify-content-center flex-column ms-1">
            <h3 class="text-center fw-bold">Rupture</h3>
            <p class="text-center">{{ nombre_rupture }} produits</p>
        </div>
    </div>

    <div class="col-5 col-lg-3 border border-3 rounded border-warning p-2 d-flex" style="cursor: pointer;" id="produit_pre_rupture">
        <img src="{% static 'images/stock-prerupture.png' %}" alt="" style="width: 30%; height: 75%;">
        <div class="d-flex justify-content-center flex-column ms-1">
            <h3 class="text-center fw-bold">Pré-rupture</h3>
            <p class="text-center">{{ nombre_pre_rupture }} produits</p>
        </div>
    </div>

    <div class="col-5 col-lg-3 mt-2 mt-lg-0 border border-3 rounded border-success p-2 d-flex" style="cursor: pointer;" id="produit_normal">
        <img src="{% static 'images/stock-bon.png' %}" alt="" style="width: 30%; height: 75%;">
        <div class="d-flex justify-content-center flex-column ms-1">
            <h3 class="text-center fw-bold">Correct</h3>
            <p class="text-center">{{ nombre_normal }} produits</p>
        </div>
    </div>
</div>
<button class="btn btn-primary m-auto d-block" data-bs-toggle="modal" data-bs-target="#aRendreModal"> 
  <i class="bi bi-eye"></i>
  Equipement à rendre ...
</button>
<div class="row mt-5 d-flex flex-column flex-lg-row">
    <div class="col-12 col-lg-6">
        <h5 class="text-center">Demandes de produit ({{ nb_demande }})</h5>
        <div id="demande_produit" data-url="{% url 'demande_en_cours' %}"></div>
    </div>
    <div class="col-12 col-lg-6 mt-3 mt-lg-0">
        <h5 class="text-center">Commandes en attentes ({{ nb_commande }})</h5>
        <div id="commande_attentes" data-url="{% url 'commande_en_cours' %}"></div>
    </div>
</div>

<!-- ------------- Modal pour la liste des demandes en cours ---------------------- -->

<div class="modal fade" id="listeDemandesModal" tabindex="-1" aria-labelledby="listeDemandesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="listeDemandesModalLabel">Demande de produit</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="">
            <div class="mb-3">
                <label for="produit" class="form-label">Demandeur :</label>
                <input type="text" class="form-control" id="demandeur" readonly>
            </div>
            <div class="mb-3">
                <label for="produit" class="form-label">Produit</label>
                <input type="text" class="form-control" id="produit" readonly>
            </div>
            <div class="mb-3">
                <label for="quantite" class="form-label">Quantité</label>
                <input type="number" class="form-control" id="quantite" readonly>
            </div>
            <div class="mb-3">
                <label for="motifs" class="form-label">Motifs</label>
                <textarea class="form-control" id="motifs" rows="3" readonly></textarea>
            </div>
            <div class="mb-3">
                <label for="date_demande" class="form-label">Date de mise à disposition souhaitée :</label>
                <input type="date" class="form-control" id="date_demande" readonly>
            </div>
            <div class="mb-3">
                <label for="a_rendre" class="form-label">À rendre ?</label>
                <input type="checkbox" class="form-check-input" id="a_rendre" disabled>
            </div>
            <div class="mb-3">
                <label for="">Valider par le supérieur hiérarchique</label>
                <input type="checkbox" class="form-check-input" id="valider_par_chef" disabled>
            </div>
            <hr>
            <h6 class="text-center">Décision de la logistique</h6>
            <div class="d-flex justify-content-around mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="radioDefault" id="radioValider">
                    <label class="form-check-label" for="radioValider">
                        Valider la demande
                    </label>
                    </div>
                    <div class="form-check">
                    <input class="form-check-input" type="radio" name="radioDefault" id="radioRefuser" data-url="{% url 'gestion_produit:update-demande' %}">
                    <label class="form-check-label" for="radioRefuser">
                        Refuser la demande
                    </label>
                </div>
            </div>
            <div class="mb-3 d-none" id="box-motif-refus">
                <label for="motifs_refus" class="form-label">Motifs de refus</label>
                <textarea class="form-control" id="motifs_refus" rows="3"></textarea>
            </div>
        </form>
      </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" id="enregistrerModifs">Enregistrer les modifications</button>
      </div>
    </div>
  </div>
</div>

<!-- ------------- Modal pour la liste des commandes en cours ---------------------- -->

<div class="modal fade" id="listeCommandesModal" tabindex="-1" aria-labelledby="listeCommandesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="listeCommandesModalLabel">Commande de produit</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="">
            <div class="mb-3">
                <label for="produit" class="form-label">Produit</label>
                <input type="text" class="form-control" id="produitCommande" readonly>
            </div>
            <div class="mb-3">
                <label for="quantite" class="form-label">Fournisseur :</label>
                <input type="text" class="form-control" id="fournisseur" readonly>
            </div>
            <div class="mb-3">
                <label for="motifs" class="form-label">Quantité</label>
                <input class="form-control" id="quantiteCommande" readonly></input>
            </div>
            <div class="mb-3">
                <label for="date_commande" class="form-label">Date de commande</label>
                <input type="date" class="form-control" id="date_commande" readonly>
            </div>
            <div class="mb-3">
                <label for="date_livraison" class="form-label">Date de Livraison</label>
                <input type="date" class="form-control" id="date_livraison" readonly>
            </div>
            <hr>
            <h6 class="text-center">Confirmation de la livraison du produit</h6>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="produit_livre">
                <label class="form-check-label" for="produit_livre">Le produit a été livré</label>
            </div>
        </form>
      </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" id="enregistrerModifsCommande" data-url="{% url 'enregistrer_livraison_produit' %}">Enregistrer les modifications</button>
      </div>
    </div>
  </div>
</div>

<!-- ------------------------------------- Modal pour stock en rupture ------------------------------ -->

<div class="modal fade" id="produitRuptureModal" tabindex="-1" aria-labelledby="produitRuptureModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="produitRuptureModalLabel">Produit en rupture</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="tableau-produit-rupture" data-url="{% url 'listeProduitRupture' %}"></div>
      </div>
    </div>
  </div>
</div>

<!-- ----------------------------------- Modal équipement à rendre -------------------------------- -->
<div class="modal fade" id="aRendreModal" tabindex="-1" aria-labelledby="aRendreModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="aRendreModalLabel">
          Equipement à rendre
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="tableau-equipement-rendre" data-url="{% url 'equipement-a-rendre' %}"></div>
      </div>
      {% if user|has_group:"Logisticien" %}
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary" id="equipementARendreEnregistrer" data-url="{% url 'update-equipement-a-rendre' %}">Enregistrer</button>
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}

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