{% extends "admin/base_site.html" %} {% load i18n admin_urls static %} {% block
title %}Historique des paiements - Souscription #{{ subscription.id }}{%
endblock %} {% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo;
  <a href="{% url 'admin:app_list' app_label='shares' %}">Parts sociales</a>
  &rsaquo;
  <a href="{% url 'admin:shares_sharesubscription_changelist' %}"
    >Souscriptions</a
  >
  &rsaquo;
  <a href="{% url 'admin:shares_sharesubscription_change' subscription.id %}"
    >Souscription #{{ subscription.id }}</a
  >
  &rsaquo; Historique des paiements
</div>
{% endblock %} {% block content %}
<div style="max-width: 1000px">
  <div class="module aligned">
    <h2>📊 Historique des paiements</h2>

    <!-- Informations sur la souscription -->
    <div
      class="card"
      style="
        background: #f8f9fa;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
      "
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div>
          <h3>
            👤 {{ subscription.member.user.first_name }} {{
            subscription.member.user.last_name }}
          </h3>
          <p>
            <strong>📋 Type de part:</strong> {{ subscription.share_type.name }}
          </p>
          <p>
            <strong>📅 Date de souscription:</strong> {{
            subscription.subscription_date|date:"d/m/Y" }}
          </p>
        </div>
        <div style="text-align: right">
          <div style="font-size: 18px; font-weight: bold">
            <span style="color: #28a745">{{ subscription.paid_quantity }}</span>
            /
            <span>{{ subscription.subscribed_quantity }}</span>
            parts payées
          </div>
          <div style="margin-top: 10px">
            {% if subscription.is_fully_paid %}
            <span
              style="
                background: #28a745;
                color: white;
                padding: 5px 10px;
                border-radius: 3px;
                font-size: 12px;
              "
            >
              ✅ ENTIÈREMENT PAYÉ
            </span>
            {% else %}
            <span
              style="
                background: #ffc107;
                color: black;
                padding: 5px 10px;
                border-radius: 3px;
                font-size: 12px;
              "
            >
              ⏳ EN COURS
            </span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Actions -->
    <div class="submit-row" style="margin-bottom: 20px">
      {% if not subscription.is_fully_paid %}
      <a
        href="{% url 'admin:shares_sharesubscription_make_payment' subscription.id %}"
        class="button default"
        style="background: #28a745"
      >
        💳 Effectuer un paiement
      </a>
      {% endif %}
      <a
        href="{% url 'admin:shares_sharesubscription_changelist' %}"
        class="button"
      >
        🔙 Retour à la liste
      </a>
      <a
        href="{% url 'admin:shares_sharesubscription_change' subscription.id %}"
        class="button"
      >
        ✏️ Modifier la souscription
      </a>
    </div>

    <!-- Tableau des paiements -->
    {% if payments %}
    <div class="results">
      <table id="result_list">
        <thead>
          <tr>
            <th scope="col">📅 Date</th>
            <th scope="col">📊 Quantité payée</th>
            <th scope="col">💰 Montant</th>
            <th scope="col">🔗 Transaction</th>
            <th scope="col">👤 Effectué par</th>
            <th scope="col">🔍 Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for payment in payments %}
          <tr class="{% cycle 'row1' 'row2' %}">
            <td style="white-space: nowrap">
              {{ payment.created_at|date:"d/m/Y" }}<br />
              <small style="color: #666"
                >{{ payment.created_at|date:"H:i" }}</small
              >
            </td>
            <td style="text-align: center; font-weight: bold">
              {{ payment.paid_quantity }} parts
            </td>
            <td style="text-align: right; font-weight: bold; color: #28a745">
              {{ payment.amount_paid|floatformat:0 }} FCFA
            </td>
            <td>
              {% if payment.financial_transaction %}
              <a
                href="{% url 'admin:banking_transaction_change' payment.financial_transaction.id %}"
                title="Voir la transaction"
              >
                TXN-{{ payment.financial_transaction.id }} </a
              ><br />
              <small style="color: #666"
                >{{ payment.financial_transaction.get_category_display }}</small
              >
              {% else %}
              <span style="color: #666">N/A</span>
              {% endif %}
            </td>
            <td>
              {% if payment.created_by %} {{ payment.created_by.first_name }} {{
              payment.created_by.last_name }}<br />
              <small style="color: #666">{{ payment.created_by.email }}</small>
              {% else %}
              <span style="color: #666">Système</span>
              {% endif %}
            </td>
            <td>
              <a
                href="{% url 'admin:shares_sharepayment_change' payment.id %}"
                class="button"
                title="Voir le détail"
              >
                🔍 Détail
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Résumé financier -->
    <div
      class="card"
      style="
        background: #fff;
        padding: 20px;
        margin-top: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
      "
    >
      <h3>📈 Résumé financier</h3>
      <div
        style="
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 20px;
        "
      >
        <div
          style="
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
          "
        >
          <div style="font-size: 24px; font-weight: bold; color: #007bff">
            {{ subscription.subscribed_quantity }}
          </div>
          <div>Parts souscrites</div>
        </div>
        <div
          style="
            text-align: center;
            padding: 15px;
            background: #d4edda;
            border-radius: 5px;
          "
        >
          <div style="font-size: 24px; font-weight: bold; color: #28a745">
            {{ subscription.paid_quantity }}
          </div>
          <div>Parts payées</div>
        </div>
        <div
          style="text-align: center; padding: 15px; background: {% if subscription.is_fully_paid %}#d4edda{% else %}#fff3cd{% endif %}; border-radius: 5px;"
        >
          <div
            style="font-size: 24px; font-weight: bold; color: {% if subscription.is_fully_paid %}#28a745{% else %}#856404{% endif %};"
          >
            {{
            subscription.subscribed_quantity|add:subscription.paid_quantity|add:"-"|add:subscription.paid_quantity
            }}
          </div>
          <div>Parts restantes</div>
        </div>
        <div
          style="
            text-align: center;
            padding: 15px;
            background: #d1ecf1;
            border-radius: 5px;
          "
        >
          <div style="font-size: 20px; font-weight: bold; color: #0c5460">
            {{ payments.count }}
          </div>
          <div>Nombre de paiements</div>
        </div>
      </div>
    </div>

    {% else %}
    <div
      class="card"
      style="
        background: #fff3cd;
        padding: 20px;
        border-radius: 5px;
        color: #856404;
      "
    >
      <h3>ℹ️ Aucun paiement</h3>
      <p>Aucun paiement n'a encore été effectué pour cette souscription.</p>
      {% if not subscription.is_fully_paid %}
      <a
        href="{% url 'admin:shares_sharesubscription_make_payment' subscription.id %}"
        class="button default"
        style="background: #28a745"
      >
        💳 Effectuer le premier paiement
      </a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}