{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify %}

{% block title %}Effectuer un paiement - 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; Effectuer un paiement
</div>
{% endblock %}

{% block content %}
<div style="max-width: 800px;">
    <div class="module aligned">
        <h2>💳 Effectuer un paiement</h2>
        
        <!-- Informations sur la souscription -->
        <div class="card" style="background: #f8f9fa; padding: 20px; margin-bottom: 20px; border-radius: 5px;">
            <h3>📊 Détails de la souscription</h3>
            <div class="form-row">
                <div class="field-box">
                    <strong>👤 Membre:</strong> {{ subscription.member.user.first_name }} {{ subscription.member.user.last_name }} ({{ subscription.member.user.email }})
                </div>
            </div>
            <div class="form-row">
                <div class="field-box">
                    <strong>📋 Type de part:</strong> {{ subscription.share_type.name }}
                </div>
            </div>
            <div class="form-row">
                <div class="field-box">
                    <strong>💰 Valeur nominale:</strong> {{ subscription.share_type.nominal_value|floatformat:0 }} FCFA par part
                </div>
            </div>
            <div class="form-row">
                <div class="field-box">
                    <strong>📈 Quantité souscrite:</strong> {{ subscription.subscribed_quantity }} parts
                </div>
            </div>
            <div class="form-row">
                <div class="field-box">
                    <strong>✅ Quantité déjà payée:</strong> {{ subscription.paid_quantity }} parts
                </div>
            </div>
            <div class="form-row">
                <div class="field-box" style="color: red; font-weight: bold;">
                    <strong>🔴 Quantité restante:</strong> {{ unpaid_quantity }} parts ({{ unpaid_amount|floatformat:0 }} FCFA)
                </div>
            </div>
        </div>

        {% if unpaid_quantity > 0 %}
        <!-- Formulaire de paiement -->
        <form method="post" class="aligned">
            {% csrf_token %}
            <fieldset class="module aligned">
                <h2>💳 Informations de paiement</h2>
                
                <div class="form-row">
                    <div class="field-box">
                        <label for="id_quantity" class="required">Nombre de parts à payer:</label>
                        <input type="number" 
                               id="id_quantity" 
                               name="quantity" 
                               min="1" 
                               max="{{ unpaid_quantity }}" 
                               value="{{ unpaid_quantity }}" 
                               onchange="updateAmount()" 
                               style="width: 100px;" 
                               required>
                        <span style="margin-left: 10px; color: #666;">
                            Maximum: {{ unpaid_quantity }} parts
                        </span>
                    </div>
                </div>

                <div class="form-row">
                    <div class="field-box">
                        <label for="id_from_account" class="required">Compte source:</label>
                        <select id="id_from_account" name="from_account" required style="width: 300px;">
                            <option value="">--- Sélectionner un compte ---</option>
                            {% for account in available_accounts %}
                            <option value="{{ account.id }}">
                                {{ account.name }} ({{ account.get_type_display }}) - Solde: {{ account.balance|floatformat:0 }} FCFA
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="field-box">
                        <label>Montant calculé:</label>
                        <span id="calculated_amount" style="font-size: 18px; font-weight: bold; color: #28a745;">
                            {{ unpaid_amount|floatformat:0 }} FCFA
                        </span>
                    </div>
                </div>
            </fieldset>

            <div class="submit-row">
                <input type="submit" value="💳 Effectuer le paiement" class="default" style="background: #28a745;">
                <a href="{% url 'admin:shares_sharesubscription_changelist' %}" class="button cancel-link">🔙 Annuler</a>
            </div>
        </form>

        <script>
        function updateAmount() {
            const quantity = document.getElementById('id_quantity').value;
            const nominalValue = {{ subscription.share_type.nominal_value }};
            const amount = quantity * nominalValue;
            document.getElementById('calculated_amount').textContent = amount.toLocaleString('fr-FR') + ' FCFA';
        }
        </script>

        {% else %}
        <div class="card" style="background: #d4edda; padding: 20px; border-radius: 5px; color: #155724;">
            <h3>✅ Souscription entièrement payée</h3>
            <p>Cette souscription a été entièrement libérée. Aucun paiement supplémentaire n'est nécessaire.</p>
            <a href="{% url 'admin:shares_sharesubscription_changelist' %}" class="button">🔙 Retour à la liste</a>
        </div>
        {% endif %}

        <!-- Historique des paiements récents -->
        {% if subscription.payments.exists %}
        <div class="card" style="background: #fff; padding: 20px; margin-top: 20px; border: 1px solid #ddd; border-radius: 5px;">
            <h3>📊 Derniers paiements</h3>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="padding: 8px; border: 1px solid #ddd;">Date</th>
                        <th style="padding: 8px; border: 1px solid #ddd;">Quantité</th>
                        <th style="padding: 8px; border: 1px solid #ddd;">Montant</th>
                        <th style="padding: 8px; border: 1px solid #ddd;">Par</th>
                    </tr>
                </thead>
                <tbody>
                    {% for payment in subscription.payments.all|slice:":5" %}
                    <tr>
                        <td style="padding: 8px; border: 1px solid #ddd;">{{ payment.created_at|date:"d/m/Y H:i" }}</td>
                        <td style="padding: 8px; border: 1px solid #ddd;">{{ payment.paid_quantity }} parts</td>
                        <td style="padding: 8px; border: 1px solid #ddd;">{{ payment.amount_paid|floatformat:0 }} FCFA</td>
                        <td style="padding: 8px; border: 1px solid #ddd;">{{ payment.created_by.email }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <p style="margin-top: 10px;">
                <a href="{% url 'admin:shares_sharesubscription_payment_history' subscription.id %}">📊 Voir l'historique complet</a>
            </p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}