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

{% block page_titre %} SGL - Gestion des produits {% endblock %}

{% block "contenu" %}
<div class="row p-2">
    <div class="col d-flex justify-content-between">
        <h3>MES DEMANDES</h3>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#listeDemandesModal">
          <i class="bi bi-eye"></i>
          Toutes mes demandes ...
        </button>
    </div>
</div>

<div class="row p-2">
    {% for demande in mes_demandes %}
    <div class="card p-2" style="width: 14rem;">
        {% if demande.produit.image %}
        <img class="card-img-top m-auto d-block" src="{{ demande.produit.image.url }}" style="width: 160px; height: 120px;">
        {% else %}
        <img class="card-img-top m-auto d-block" src="https://placehold.co/600x400" style="width: 160px; height: 120px;" alt="Image par défaut">
        {% endif %}
        <div class="card-body me-1">
            <h5 class="card-title text-center">{{ demande.produit.libelle }}</h5>
            <p class="card-text text-center">
                <small>{{ demande.user.user.first_name }} {{ demande.user.user.last_name }}</small> <br>
                <!-- <small>Quantite: 1</small> | <small>Statut: Attente</small> -->
            </p>
            <button class="d-block m-auto btn btn-primary d-block voir-demande" data-id="{{ demande.id }}">
              <i class="bi bi-eye"></i>
              Détails
            </button>
        </div>
    </div>
    {% empty %}
    <p class="text-center">Aucune demande en cours.</p>
    {% endfor %}
</div>

<div class="row d-flex mt-3">
  <div class="col d-flex flex-column flex-lg-row justify-content-between">
      <h3>LISTE DES PRODUITS</h3>
      <div>
          {% if user|has_group:"logistique" %}
          <a href="{% url 'gestion_produit:mouvement-de-stock' %}" class="btn btn-primary"><i class="bi bi-file-earmark-diff"></i> Rapport de mouvement de stock</a>
          <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#enregistrerProduit"><i class="bi bi-plus-circle"></i> Produit</button>
          <button class="btn btn-primary mt-2 mt-lg-0" data-bs-toggle="modal" data-bs-target="#enregistrerCategorie"><i class="bi bi-plus-circle"></i> Catégorie</button>
          {% endif %}
      </div>
  </div>
</div>

<div class="row mt-2">
    <div class="col">
        <input type="text" placeholder="Rechercher par libellé" class="form-control" id="searchInput">
    </div>
    <div class="col">
        <select name="" id="filterCategorie" class="form-select">
            <option value="">Filtre par catégorie</option>
            {% for categorie in liste_categorie %}
            <option value="{{ categorie.id }}">{{ categorie.categorie }}</option>
            {% endfor %}
        </select>
    </div>
</div>

<div class="row p-2 justify-content-around">
    {% for produit in page_obj %}
    <div class="col-3">
      <div class="card p-2 mt-2" style="width: 13rem;">
        {% if produit.image %}
        <img class="card-img-top m-auto d-block" src="{{ produit.image.url }}" style="width: 160px; height: 120px;" alt="{{ produit.libelle }}">
        {% else %}
        <img class="card-img-top m-auto d-block" src="https://placehold.co/600x400" style="width: 160px; height: 120px;" alt="Image par défaut">
        {% endif %}
          <div class="card-body">
            <h5 class="card-title text-center produitModifTitre" style="cursor: pointer;" data-idproduit={{ produit.id }}>{{ produit.libelle }}</h5>
            <p class="categorie-produit" style="display: none;">{{ produit.categorie_id }} </p>
            {% if user|has_group:"logistique" %}
            <p class="card-text text-center">
                <small>Quantite en stock: {{ produit.stockActuel }}</small>
            </p>
            <button class="btn btn-warning d-block listeCommanderButton w-100"  data-id="{{ produit.id }}">
              <i class="bi bi-caret-down-square-fill"></i>
              Commander
            </button>
            {% endif %}
            <button class="btn btn-primary d-block w-100 listeDemandeButton mt-1" data-id="{{ produit.id }}">
              <i class="bi bi-archive"></i>
              Demander
            </button>
          </div>
      </div>
    </div>
    {% empty %}
    <p class="text-center">Aucun produit disponible.</p>
    {% endfor %}
</div>

<!-- Pagination -->
<nav aria-label="Pagination" class="mt-5">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Précédent</a>
            </li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Précédent</span></li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% else %}
                <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Suivant</a>
            </li>
        {% else %}
            <li class="page-item disabled"><span class="page-link">Suivant</span></li>
        {% endif %}
    </ul>
</nav>

{% include "gestion_produit/parts/modal_demander.html" %}
{% include "gestion_produit/parts/modal_commander.html" %}
{% include "gestion_produit/parts/modal_creation_categorie.html" %}
{% include "gestion_produit/parts/modal_creation_produit.html" %}
{% include "gestion_produit/parts/modal_details_demandes.html" %}
{% include "gestion_produit/parts/modal_liste_de_toutes_les_demandes.html" %}
{% include "gestion_produit/parts/modal_mes_demandes.html" %}
{% include "gestion_produit/parts/modal_modification_informations_produits.html" %}


{% endblock %}

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