{% extends 'backoffice/base.html' %}
{% load static %}

{% block title %}{{ page_title }} - ECOLUX Dashboard{% endblock %}

{% block content %}
<section class="section is-main-section">
  <div class="level">
    <div class="level-left">
      <h1 class="title is-4 has-text-ecolux-primary">
        <span class="icon-text">
          <span class="icon has-text-ecolux-secondary"><i class="fas fa-file-invoice-dollar"></i></span>
          <span>{{ page_title }}</span>
        </span>
      </h1>
    </div>
    <div class="level-right">
      <a href="{% url 'app:dashboard_project_detail' project.id %}" class="button is-light">
        <span class="icon"><i class="fas fa-arrow-left"></i></span>
        <span>Retour au projet</span>
      </a>
    </div>
  </div>

  <div class="columns is-multiline">
    <div class="column is-3">
      <div class="card ecolux-card">
        <div class="card-content">
          <p class="heading">Décomptes</p>
          <p class="title is-4">{{ totals.decomptes|floatformat:0 }} FCFA</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card ecolux-card">
        <div class="card-content">
          <p class="heading">Factures</p>
          <p class="title is-4">{{ totals.invoices|floatformat:0 }} FCFA</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card ecolux-card">
        <div class="card-content">
          <p class="heading">Paiements</p>
          <p class="title is-4 has-text-success">{{ totals.payments|floatformat:0 }} FCFA</p>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="card ecolux-card">
        <div class="card-content">
          <p class="heading">Reste à payer</p>
          <p class="title is-4 has-text-danger">{{ totals.remaining|floatformat:0 }} FCFA</p>
        </div>
      </div>
    </div>
  </div>

  <div class="card ecolux-card mb-5">
    <header class="card-header ecolux-primary">
      <p class="card-header-title has-text-ecolux-secondary">
        <span class="icon"><i class="fas fa-tasks"></i></span>
        Activités facturables (terminées = considérées comme payées)
      </p>
    </header>
    <div class="card-content">
      {% if billable_activities %}
      <table class="table is-fullwidth is-striped">
        <thead>
          <tr>
            <th>Titre</th>
            <th>Type facturation</th>
            <th>Budget</th>
            <th>Statut</th>
            <th>Échéance</th>
          </tr>
        </thead>
        <tbody>
          {% for a in billable_activities %}
          <tr>
            <td>{{ a.title }}</td>
            <td>{{ a.get_billing_type_display }}</td>
            <td>{% if a.budget_amount %}{{ a.budget_amount|floatformat:0 }} FCFA{% else %}—{% endif %}</td>
            <td>
              {% if a.is_completed %}
                <span class="tag is-success">Terminé (Payé)</span>
              {% else %}
                <span class="tag is-warning">En cours</span>
              {% endif %}
            </td>
            <td>{% if a.due_date %}{{ a.due_date|date:'d/m/Y' }}{% else %}—{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
        <p class="has-text-grey">Aucune activité facturable.</p>
      {% endif %}
    </div>
  </div>

  <div class="columns">
    <div class="column">
      <div class="card ecolux-card">
        <header class="card-header ecolux-primary">
          <p class="card-header-title has-text-ecolux-secondary">
            <span class="icon"><i class="fas fa-list"></i></span>
            Décomptes
          </p>
        </header>
        <div class="card-content">
          {% if decomptes %}
          <table class="table is-fullwidth is-striped">
            <thead>
              <tr><th>Date</th><th>Libellé</th><th>Montant</th><th>Statut</th></tr>
            </thead>
            <tbody>
              {% for d in decomptes %}
              <tr>
                <td>{{ d.date|date:'d/m/Y' }}</td>
                <td>{{ d.label }}</td>
                <td>{{ d.amount|floatformat:0 }} FCFA</td>
                <td>{{ d.get_status_display }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
            <p class="has-text-grey">Aucun décompte.</p>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="column">
      <div class="card ecolux-card">
        <header class="card-header ecolux-primary">
          <p class="card-header-title has-text-ecolux-secondary">
            <span class="icon"><i class="fas fa-file-invoice"></i></span>
            Factures
          </p>
        </header>
        <div class="card-content">
          {% if invoices %}
          <table class="table is-fullwidth is-striped">
            <thead>
              <tr><th>N°</th><th>Date</th><th>Montant</th><th>Statut</th></tr>
            </thead>
            <tbody>
              {% for f in invoices %}
              <tr>
                <td>{{ f.number }}</td>
                <td>{{ f.date|date:'d/m/Y' }}</td>
                <td>{{ f.amount|floatformat:0 }} FCFA</td>
                <td>{{ f.get_status_display }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
            <p class="has-text-grey">Aucune facture.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card ecolux-card">
    <header class="card-header ecolux-primary">
      <p class="card-header-title has-text-ecolux-secondary">
        <span class="icon"><i class="fas fa-money-bill"></i></span>
        Paiements
      </p>
    </header>
    <div class="card-content">
      {% if payments %}
      <table class="table is-fullwidth is-striped">
        <thead>
          <tr><th>Date</th><th>Type</th><th>Montant</th><th>Méthode</th><th>Réf.</th></tr>
        </thead>
        <tbody>
          {% for p in payments %}
          <tr>
            <td>{{ p.date|date:'d/m/Y' }}</td>
            <td>{{ p.get_type_display }}</td>
            <td>{{ p.amount|floatformat:0 }} FCFA</td>
            <td>{{ p.get_method_display }}</td>
            <td>{{ p.reference|default:'—' }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
        <p class="has-text-grey">Aucun paiement enregistré.</p>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}