{% 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:"Logisticien" %}
          <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="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">{{ produit.libelle }}</h5>
            <p class="categorie-produit" style="display: none;">{{ produit.categorie_id }} </p>
            {% if user|has_group:"Logisticien" %}
            <p class="card-text text-center">
                <!-- <small>Soriba SYLLA</small> <br> -->
                <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>
    {% 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>

<!-- Modal pour la création des produits -->
<div class="modal fade" id="enregistrerProduit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="enregistrerProduitTitre">Enregistrer un nouveau produit</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div id="messageZone"></div>
      <div class="modal-body">
        <form data-url="{% url 'gestion_produit:enregistrement_produit' %}" id="enregistrement-produit-form" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{formulaireEnregistrementProduit.as_p}}

            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
            <button type="submit" class="btn btn-outline-primary">Enregistrer</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal pour la création des catégories -->

<div class="modal fade" id="enregistrerCategorie" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="enregistrerCategorieTitre">Enregistrer un nouveau catégorie</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Liste des catégories
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <div id="listecategorie" data-url="{% url 'gestion_produit:liste-categories' %}"></div>
              </div>
            </div>
          </div>
        </div>
        <h5 class="text-center mt-2">Nouvelle catégorie</h5>
        <div id="message-creation-categorie"></div>
        <form data-url="{% url 'gestion_produit:enregistrement_categorie' %}" id="enregistrer-categorie" method="post">
            {% csrf_token %}
            {{formulaireEnregistrementCategorie.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>

<!-- ---------------------------------- COMMANDER MODAL ----------------------------------------- -->

<div class="modal fade" id="commanderModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="commanderModalLabel">Commander un produit</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'gestion_produit:enregistrement_commande' %}" method="post">
          {% csrf_token %}
          {{formulaireCommanderProduit.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>

<!-- ---------------------------------- DEMANDER MODAL ----------------------------------------- -->

<div class="modal fade" id="demanderModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="demanderModalLabel">Demander un produit</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'gestion_produit:enregistrement_demande' %}" method="post">
          {% csrf_token %}
          {{formulaireDemanderProduit.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>

<!-- ---------------------------------- MES DEMANDES MODAL ----------------------------------------- -->

<div class="modal fade" id="mesDemandesModal" tabindex="-1" aria-labelledby="mesDemandesModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="mesDemandesModalLabel">Mes Demandes</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'gestion_produit:enregistrement_demande' %}" method="post">
          {% csrf_token %}
          {{formulaireDemanderProduit.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 détail demande -->
<div class="modal fade" id="enregistrerDetailDemande" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="enregistrerDetailDemandeTitre">Détails de la demande</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form enctype="multipart/form-data">
          <div class="form-group mb-2">
            <label for="">Nom du produit :</label>
            <input type="text" class="form-control" id="detailNom" readonly>
          </div>
          <div class="form-group mb-2">
            <label for="">Catégorie :</label>
            <input type="text" class="form-control" id="detailCategorie" readonly>
          </div>
          <div class="form-group mb-2">
            <label for="">Motifs de la demande :</label>
            <textarea name="" id="detailmotif" class="form-control" readonly></textarea>
          </div>
          <div class="form-group mb-2">
            <label for="">Date de mise à disposition souhaitée :</label>
            <input type="date" class="form-control" id="detailDateDemande" readonly>
          </div>
          <div class="form-group">
            <label for="" class="form-check-label">A rendre ?</label>
            <input type="checkbox" name="" id="detailARendre" class="form-check-input" disabled>
          </div>

          {% if user.profile.chef_departement %}
          <div class="modal-footer">
            <button type="button" id="refuserBtn" class="btn btn-outline-danger">Refuser</button>
            <button type="submit" id="confirmerBtn" class="btn btn-outline-primary">Valider</button>
          </div>
          {% endif %}
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal liste de toutes les demandes de produits -->
<div class="modal fade" id="listeDemandesModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="listeDemandesTitre">Liste des demandes</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="listeDemandeTable" data-url="{% url 'gestion_produit:liste-demandes' %}"></div>
      </div>
    </div>
  </div>
</div>


{% endblock %}

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