{% extends 'aapayout/base.html' %}
{% load i18n %}
{% load humanize %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>{% translate "Payouts for" %} {{ loot_pool.name }}</h2>
            <p class="text-muted">
                {% translate "Fleet" %}: <a href="{% url 'aapayout:fleet_detail' loot_pool.fleet.pk %}">{{ loot_pool.fleet.name }}</a>
                | {% translate "Loot Pool" %}: <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}">{{ loot_pool.name }}</a>
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_mark_paid and pending_count > 0 %}
                <a href="{% url 'aapayout:express_mode_start' loot_pool.pk %}" class="btn btn-success me-2">
                    <i class="fas fa-bolt"></i> {% translate "Express Mode" %}
                </a>
            {% endif %}
            <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {% translate "Back to Loot Pool" %}
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Total Payouts" %}</h6>
                    <h4 class="card-title">{{ payouts.count }}</h4>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Pending" %}</h6>
                    <h4 class="card-title">{{ pending_count }}</h4>
                    <p class="small text-muted mb-0">{{ pending_amount|floatformat:2|intcomma }} ISK</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Paid" %}</h6>
                    <h4 class="card-title">{{ paid_count }}</h4>
                    <p class="small text-muted mb-0">{{ paid_amount|floatformat:2|intcomma }} ISK</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <h6 class="card-subtitle mb-2 text-muted">{% translate "Total Amount" %}</h6>
                    <h4 class="card-title">{{ total_amount|floatformat:2|intcomma }} ISK</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Payouts Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Payout List" %}</h5>
                </div>
                <div class="card-body">
                    {% if payouts %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Recipient" %}</th>
                                    <th class="text-end">{% translate "Amount" %}</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>{% translate "Payment Method" %}</th>
                                    <th>{% translate "Paid By" %}</th>
                                    <th>{% translate "Paid At" %}</th>
                                    <th>{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in payouts %}
                                <tr {% if payout.is_scout_payout %}class="table-success"{% endif %}>
                                    <td>
                                        {{ payout.recipient.name }}
                                        {% if payout.is_scout_payout %}
                                            <span class="badge bg-success">{% translate "Scout" %}</span>
                                        {% endif %}
                                        {% if payout.recipient.character_id == request.user.profile.main_character.character_id %}
                                            <span class="badge bg-info">{% translate "You" %}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <strong>{{ payout.amount|floatformat:2|intcomma }} ISK</strong>
                                        {% if payout.is_scout_payout %}
                                            <br><small class="text-success">{% translate "(includes scout bonus)" %}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.status == 'pending' %}
                                            <span class="badge bg-warning text-dark">{{ payout.get_status_display }}</span>
                                        {% elif payout.status == 'paid' %}
                                            <span class="badge bg-success">{{ payout.get_status_display }}</span>
                                        {% elif payout.status == 'failed' %}
                                            <span class="badge bg-danger">{{ payout.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.payment_method %}
                                            {{ payout.get_payment_method_display }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.paid_by %}
                                            {{ payout.paid_by.username }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.paid_at %}
                                            {{ payout.paid_at|date:"Y-m-d H:i" }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.status == 'pending' and can_mark_paid %}
                                            <a href="{% url 'aapayout:payout_mark_paid' payout.pk %}"
                                               class="btn btn-sm btn-success" title="{% translate 'Mark as Paid' %}">
                                                <i class="fas fa-check"></i> {% translate "Mark Paid" %}
                                            </a>
                                        {% elif payout.status == 'paid' %}
                                            <button class="btn btn-sm btn-secondary" disabled>
                                                <i class="fas fa-check"></i> {% translate "Paid" %}
                                            </button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th>{% translate "Total" %}</th>
                                    <th class="text-end">{{ total_amount|floatformat:2|intcomma }} ISK</th>
                                    <th colspan="5"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    {% if can_mark_paid and pending_count > 0 %}
                    <div class="mt-3">
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            {% translate "You can mark individual payouts as paid using the 'Mark Paid' button, or use the bulk action below." %}
                        </div>
                        <!-- Bulk action could be added here in the future -->
                    </div>
                    {% endif %}

                    {% else %}
                    <p class="text-muted">{% translate "No payouts found for this loot pool" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Notes Section -->
    {% if loot_pool.notes %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Notes" %}</h5>
                </div>
                <div class="card-body">
                    <p>{{ loot_pool.notes|linebreaks }}</p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}