{% extends "base.html" %}
{% set libelles = {"devis": "Devis", "facture": "Facture", "avoir": "Avoir"} %}
{% block titre %}Gestion Commerciale{% endblock %}
{% block contenu %}
<h1 class="h3 mb-3">🛒 Gestion Commerciale</h1>

<ul class="nav nav-tabs mb-3">
  <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ventes" type="button">Ventes</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#encaissements" type="button">Encaissements</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#clients" type="button">Clients</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#produits" type="button">Produits</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#vendeurs" type="button">Vendeurs</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#suivi" type="button">📊 Suivi mensuel</button></li>
  <li class="nav-item ms-auto"><a class="nav-link" href="/commercial/grand-livre">📗 Grand livre client</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="ventes">
    <div class="d-flex justify-content-end mb-2 gap-2">
      <a href="/commercial/ventes/nouveau?type=devis" class="btn btn-outline-primary btn-sm">+ Nouveau devis</a>
      <a href="/commercial/ventes/nouveau?type=facture" class="btn btn-success btn-sm">+ Nouvelle facture</a>
    </div>
    {% if ventes %}
    <div class="table-responsive">
      <table class="table table-hover bg-white align-middle">
        <thead><tr><th>Type</th><th>Date</th><th>N°</th><th>Client</th><th>Produit</th><th>Montant (MAD)</th><th>Statut</th><th>Doc.</th><th></th></tr></thead>
        <tbody>
          {% for v in ventes %}
          <tr>
            <td><span class="badge {{ 'bg-secondary' if v.type_document == 'devis' else ('bg-warning text-dark' if v.type_document == 'avoir' else 'bg-success') }}">{{ libelles[v.type_document] }}</span></td>
            <td>{{ v.date_vente }}</td>
            <td><a href="/commercial/ventes/{{ v.id }}">{{ v.numero_facture or ("#" ~ v.id) }}</a></td>
            <td>{{ v.client.nom }}</td>
            <td>{{ v.produit }}</td>
            <td>{{ "%.2f"|format(v.montant) }}</td>
            <td>
              {% if v.type_document == "facture" %}
              <span class="badge {{ 'bg-success' if v.statut_paiement == 'Payée' else ('bg-danger' if v.en_retard else 'bg-warning text-dark') }}">{{ v.statut_paiement }}{% if v.en_retard %} ⚠{% endif %}</span>
              {% else %}—{% endif %}
            </td>
            <td>{% if v.facture_vente_path %}<a href="/fichiers/{{ v.facture_vente_path }}" target="_blank">Voir</a>{% else %}—{% endif %}</td>
            <td class="text-end">
              <a href="/commercial/ventes/{{ v.id }}" class="btn btn-sm btn-outline-success">Détail</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucun document enregistré.</p>{% endif %}
  </div>

  <!-- Encaissements -->
  <div class="tab-pane fade" id="encaissements">
    <div class="d-flex justify-content-end mb-2">
      <a href="/commercial/encaissements/nouveau" class="btn btn-success btn-sm">+ Nouvel encaissement</a>
    </div>
    {% if encaissements %}
    <div class="table-responsive">
      <table class="table table-hover bg-white align-middle">
        <thead><tr><th>Date</th><th>Client</th><th>Mode</th><th>Référence</th><th>Facture liée</th><th>Montant (MAD)</th><th></th></tr></thead>
        <tbody>
          {% for e in encaissements %}
          <tr>
            <td>{{ e.date_encaissement }}</td>
            <td>{{ e.client.nom }}</td>
            <td>{{ e.mode_paiement }}</td>
            <td>{{ e.reference or "—" }}</td>
            <td>{{ (e.vente.numero_facture or e.vente.produit) if e.vente else "—" }}</td>
            <td>{{ "%.2f"|format(e.montant) }}</td>
            <td class="text-end"><a href="/commercial/encaissements/{{ e.id }}/modifier" class="btn btn-sm btn-outline-secondary">Modifier</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucun encaissement enregistré.</p>{% endif %}
  </div>

  <div class="tab-pane fade" id="clients">
    <div class="d-flex justify-content-end mb-2">
      <a href="/commercial/clients/nouveau" class="btn btn-success btn-sm">+ Nouveau client</a>
    </div>
    {% if clients %}
    <div class="table-responsive">
      <table class="table table-hover bg-white align-middle">
        <thead><tr><th>Nom</th><th>Contact</th><th>Téléphone</th><th>Adresse</th><th>Solde dû (MAD)</th><th></th></tr></thead>
        <tbody>
          {% for c in clients %}
          <tr>
            <td>{{ c.nom }}</td>
            <td>{{ c.contact or "—" }}</td>
            <td>{{ c.telephone or "—" }}</td>
            <td>{{ c.adresse or "—" }}</td>
            <td class="{{ 'text-danger fw-semibold' if c.solde > 0 else 'text-success' }}">{{ "%.2f"|format(c.solde) }}</td>
            <td class="text-end">
              <a href="/commercial/grand-livre?client_id={{ c.id }}" class="btn btn-sm btn-outline-success">📗 Grand livre</a>
              <a href="/commercial/clients/{{ c.id }}/modifier" class="btn btn-sm btn-outline-secondary">Modifier</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucun client enregistré.</p>{% endif %}
  </div>

  <!-- Produits -->
  <div class="tab-pane fade" id="produits">
    <div class="d-flex justify-content-end mb-2">
      <a href="/commercial/produits/nouveau" class="btn btn-success btn-sm">+ Nouveau produit</a>
    </div>
    {% if produits %}
    <div class="table-responsive">
      <table class="table table-hover bg-white align-middle">
        <thead><tr><th>Nom</th><th>Description</th><th>Unité</th><th>Prix par défaut (MAD)</th><th>Emballage par défaut</th><th>Statut</th><th></th></tr></thead>
        <tbody>
          {% for p in produits %}
          <tr class="{{ '' if p.actif else 'text-muted' }}">
            <td>{{ p.nom }}</td>
            <td>{{ p.description or "—" }}</td>
            <td>{{ p.unite or "—" }}</td>
            <td>{{ p.prix_unitaire_defaut if p.prix_unitaire_defaut is not none else "—" }}</td>
            <td>{{ p.type_emballage_defaut or "—" }}</td>
            <td>{% if p.actif %}<span class="badge bg-success">Actif</span>{% else %}<span class="badge bg-secondary">Inactif</span>{% endif %}</td>
            <td class="text-end"><a href="/commercial/produits/{{ p.id }}/modifier" class="btn btn-sm btn-outline-secondary">Modifier</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucun produit dans le catalogue. Ajoutez-en pour pré-remplir plus vite vos lignes de facture.</p>{% endif %}
  </div>

  <!-- Vendeurs -->
  <div class="tab-pane fade" id="vendeurs">
    <p class="text-muted small">Entités de facturation (nom, adresse, logo, RC/ICE, banque) sélectionnables sur chaque devis/facture/avoir.</p>
    <div class="d-flex justify-content-end mb-2">
      <a href="/commercial/vendeurs/nouveau" class="btn btn-success btn-sm">+ Nouveau vendeur</a>
    </div>
    {% if vendeurs %}
    <div class="table-responsive">
      <table class="table table-hover bg-white align-middle">
        <thead><tr><th>Logo</th><th>Nom de la société</th><th>Adresse</th><th>Téléphone</th><th>RC / ICE</th><th></th></tr></thead>
        <tbody>
          {% for v in vendeurs %}
          <tr>
            <td>{% if v.logo_path %}<img src="/fichiers/{{ v.logo_path }}" style="max-height:32px;" alt="Logo">{% else %}—{% endif %}</td>
            <td>{{ v.nom_societe or "—" }}</td>
            <td>{{ v.adresse_ligne1 or "—" }}</td>
            <td>{{ v.telephone or "—" }}</td>
            <td>{{ v.rc or "—" }} / {{ v.ice or "—" }}</td>
            <td class="text-end">
              <a href="/commercial/vendeurs/{{ v.id }}/modifier" class="btn btn-sm btn-outline-secondary">Modifier</a>
              <form method="post" action="/commercial/vendeurs/{{ v.id }}/supprimer" class="d-inline" onsubmit="return confirm('Supprimer ce vendeur ?');">
                <input type="hidden" name="csrf_token" value="{{ request.state.csrf_token }}">
                <button type="submit" class="btn btn-sm btn-outline-danger">Supprimer</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucun vendeur enregistré. Ajoutez-en un pour pouvoir l'assigner à vos factures.</p>{% endif %}
  </div>

  <!-- Suivi mensuel -->
  <div class="tab-pane fade" id="suivi">
    <form method="get" action="/commercial#suivi" class="card p-3 bg-white mb-4">
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label small mb-1">Mois</label>
          <select name="mois" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Tous</option>
            {% for valeur, libelle in mois_disponibles %}
            <option value="{{ valeur }}" {% if filtre_mois == valeur %}selected{% endif %}>{{ libelle }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label small mb-1">Client</label>
          <select name="client_id" class="form-select form-select-sm" onchange="this.form.submit()">
            <option value="">Tous</option>
            {% for c in clients %}
            <option value="{{ c.id }}" {% if filtre_client_id == c.id %}selected{% endif %}>{{ c.nom }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% if filtre_mois or filtre_client_id %}
      <div class="mt-2"><a href="/commercial#suivi" class="small">✕ Réinitialiser les filtres</a></div>
      {% endif %}
      <p class="text-muted small mt-2 mb-0">Les devis ne sont pas comptés (pas encore un engagement financier) ; les avoirs viennent en déduction.</p>
    </form>

    <h2 class="h6 mb-2">Résumé des ventes par mois</h2>
    {% if resume_mensuel %}
    <div class="table-responsive mb-4">
      <table class="table table-sm table-hover bg-white align-middle">
        <thead><tr><th>Mois</th><th>Nb documents</th><th>Total net (MAD)</th></tr></thead>
        <tbody>
          {% for r in resume_mensuel %}
          <tr>
            <td>{{ r.mois }}</td>
            <td>{{ r.nb_ventes }}</td>
            <td class="fw-bold">{{ "%.2f"|format(r.total) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted mb-4">Pas encore de données.</p>{% endif %}

    <h2 class="h6 mb-2">Ventes par client</h2>
    {% if par_client %}
    <div class="table-responsive">
      <table class="table table-sm table-hover bg-white align-middle">
        <thead><tr><th>Client</th><th>Nb documents</th><th>Total net (MAD)</th></tr></thead>
        <tbody>
          {% for nom, nb, total in par_client %}
          <tr><td>{{ nom }}</td><td>{{ nb }}</td><td>{{ "%.2f"|format(total or 0) }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}<p class="text-muted">Aucune donnée.</p>{% endif %}
  </div>
</div>
{% endblock %}