3d-pricing/templates/materials.html

{% extends 'base.html' %}
{% block title %}Matières{% endblock %}

{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
  <h1><i class="bi bi-boxes me-2" style="color:#8b5cf6"></i>Matières & Stock</h1>
  <a href="{{ url_for('new_material') }}" class="btn btn-sm" style="background:#ff6b35;color:#fff">
    <i class="bi bi-plus-lg me-1"></i>Ajouter une matière
  </a>
</div>

<div class="card">
  <div class="card-body p-0">
    {% if materials %}
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>Nom</th><th>Type</th><th>Couleur</th>
          <th>Prix/kg</th><th>Stock</th><th>Commandes</th><th>Utilisé total</th><th></th>
        </tr>
      </thead>
      <tbody>
        {% for m in materials %}
        {% set stock_pct = [[(m.stock_g / 1000 * 100)|round(0)|int, 0]|max, 100]|min %}
        <tr>
          <td class="fw-semibold">{{ m.name }}{% if m.brand %} <small class="text-muted">/ {{ m.brand }}</small>{% endif %}</td>
          <td><span class="badge bg-secondary">{{ m.type }}</span></td>
          <td>
            {% if m.color %}
            <span class="d-inline-flex align-items-center gap-1">
              <span style="width:14px;height:14px;border-radius:50%;background:{{ m.color }};border:1px solid #ccc;display:inline-block"></span>
              {{ m.color }}
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="fw-semibold">{{ m.price_per_kg }} €</td>
          <td style="min-width:140px">
            {% if m.stock_g <= 0 %}
              <span class="stock-empty fw-bold"><i class="bi bi-x-circle"></i> Rupture</span>
            {% elif m.stock_g <= m.low_stock_threshold_g %}
              <div class="d-flex align-items-center gap-2">
                <span class="stock-low"><i class="bi bi-exclamation-triangle"></i> {{ m.stock_g|round(0)|int }} g</span>
              </div>
            {% else %}
              <span class="stock-ok"><i class="bi bi-check-circle"></i> {{ m.stock_g|round(0)|int }} g</span>
            {% endif %}
            <div class="progress mt-1" style="height:4px">
              <div class="progress-bar
                {% if m.stock_g <= 0 %}bg-danger
                {% elif m.stock_g <= m.low_stock_threshold_g %}bg-warning
                {% else %}bg-success{% endif %}"
                style="width:{{ [[(m.stock_g / 1000 * 100)|round(0)|int, 0]|max, 100]|min }}%">
              </div>
            </div>
          </td>
          <td>{{ m.job_count }}</td>
          <td>{{ m.total_used_g }} g</td>
          <td>
            <div class="d-flex gap-1">
              <button class="btn btn-sm btn-outline-success py-0" data-bs-toggle="modal"
                      data-bs-target="#restockModal{{ m.id }}">
                <i class="bi bi-plus-lg"></i> Stock
              </button>
              <a href="{{ url_for('edit_material', id=m.id) }}" class="btn btn-sm btn-outline-secondary py-0">
                <i class="bi bi-pencil"></i>
              </a>
              <form method="POST" action="{{ url_for('delete_material', id=m.id) }}"
                    onsubmit="return confirm('Supprimer cette matière ?')">
                <button class="btn btn-sm btn-outline-danger py-0"><i class="bi bi-trash"></i></button>
              </form>
            </div>
          </td>
        </tr>

        <!-- Modal Restock -->
        <div class="modal fade" id="restockModal{{ m.id }}" tabindex="-1">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <form method="POST" action="{{ url_for('restock_material', id=m.id) }}">
                <div class="modal-header">
                  <h5 class="modal-title">Réapprovisionner — {{ m.name }}</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  <div class="mb-3">
                    <label class="form-label">Quantité à ajouter (g)</label>
                    <input type="number" name="add_g" class="form-control" step="1" min="1"
                           placeholder="ex: 1000 pour 1 kg" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Nouveau prix/kg (optionnel)</label>
                    <input type="number" name="new_price_per_kg" class="form-control"
                           step="0.01" placeholder="{{ m.price_per_kg }} (actuel)">
                    <div class="form-text">Laissez vide si le prix n'a pas changé.</div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
                  <button type="submit" class="btn btn-success btn-sm">Ajouter au stock</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="text-center text-muted py-5">
      <i class="bi bi-boxes fs-1"></i>
      <p class="mt-2">Aucune matière enregistrée.</p>
      <a href="{{ url_for('new_material') }}" class="btn btn-sm" style="background:#ff6b35;color:#fff">
        Ajouter votre premier filament
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}