{% 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>

{% include "parts/modal_stock_rupture.html" %}-
{% include "parts/modal_liste_demandes.html" %}-
{% include "parts/modal_liste_commandes.html" %}-
{% include "parts/modal_equipement_a_rendre.html" %}

{% endblock %}

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