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

{% 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 "Payout" %}: <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>

    <!-- Payout Breakdown -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-chart-pie"></i> {% translate "Payout Breakdown" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Left column: Source breakdown -->
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">{% translate "ISK Distribution" %}</h6>
                            <table class="table table-sm table-borderless mb-0">
                                <tbody>
                                    <tr>
                                        <td><strong>{% translate "Total Loot Value" %}</strong></td>
                                        <td class="text-end"><strong>{{ total_loot|isk_format_full }}</strong></td>
                                    </tr>
                                    <tr class="text-muted">
                                        <td><i class="fas fa-minus"></i> {% translate "Corp Share" %} ({{ corp_share_pct|floatformat:0 }}%)</td>
                                        <td class="text-end">{{ corp_share|isk_format_full }}</td>
                                    </tr>
                                    <tr class="border-top">
                                        <td><strong>{% translate "Participant Pool" %}</strong></td>
                                        <td class="text-end"><strong>{{ participant_pool|isk_format_full }}</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- Right column: Payout breakdown -->
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">{% translate "Payouts" %} ({% translate "Scout Shares" %}: {{ scout_shares|floatformat:1 }})</h6>
                            <table class="table table-sm table-borderless mb-0">
                                <tbody>
                                    {% if scout_count > 0 %}
                                    <tr class="table-success">
                                        <td><i class="fas fa-binoculars"></i> {% translate "Scouts" %} ({{ scout_count }})</td>
                                        <td class="text-end">{{ scout_total|isk_format_full }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if regular_count > 0 %}
                                    <tr>
                                        <td><i class="fas fa-users"></i> {% translate "Regular" %} ({{ regular_count }})</td>
                                        <td class="text-end">{{ regular_total|isk_format_full }}</td>
                                    </tr>
                                    {% endif %}
                                    <tr class="border-top">
                                        <td><strong>{% translate "Total Distributed" %}</strong></td>
                                        <td class="text-end"><strong>{{ total_amount|isk_format_full }}</strong></td>
                                    </tr>
                                    {% if remainder > 0 %}
                                    <tr class="text-muted">
                                        <td><i class="fas fa-plus"></i> {% translate "Rounding to Corp" %}</td>
                                        <td class="text-end">{{ remainder|isk_format_full }}</td>
                                    </tr>
                                    {% endif %}
                                    <tr class="border-top table-secondary">
                                        <td><strong><i class="fas fa-building"></i> {% translate "Corp Final" %}</strong></td>
                                        <td class="text-end"><strong>{{ corp_final|isk_format_full }}</strong></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- Verification row -->
                    <div class="row mt-3 pt-3 border-top">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted">
                                    <i class="fas fa-check-circle"></i>
                                    {% translate "Verification" %}:
                                    {{ total_amount|isk_format_full }} ({% translate "distributed" %}) + {{ corp_final|isk_format_full }} ({% translate "corp" %}) =
                                    <strong>{{ total_loot|isk_format_full }}</strong>
                                </span>
                                <span class="badge bg-success"><i class="fas fa-check"></i> {% translate "Balanced" %}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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|isk_format_full }}</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|isk_format_full }}</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|isk_format_full }}</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 "Verification Status" %}</th>
                                    <th>{% translate "Verified 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|isk_format_full }}</strong>
                                        {% if payout.is_scout_payout %}
                                            <br><small class="text-success">{% translate "(includes scout bonus)" %}</small>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.verified %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check-circle"></i> {% translate "Verified" %}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-secondary">
                                                <i class="fas fa-clock"></i> {% translate "Pending" %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.verified_at %}
                                            {{ payout.verified_at|date:"Y-m-d H:i" }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <button class="btn btn-outline-primary copy-name-btn"
                                                    data-character-name="{{ payout.recipient.name }}"
                                                    title="{% translate 'Copy character name' %}">
                                                <i class="fas fa-user"></i>
                                            </button>
                                            <button class="btn btn-outline-primary copy-amount-btn"
                                                    data-amount="{{ payout.amount }}"
                                                    title="{% translate 'Copy ISK amount (no decimals)' %}">
                                                <i class="fas fa-coins"></i>
                                            </button>
                                            <button class="btn btn-outline-info open-window-btn"
                                                    data-payout-id="{{ payout.pk }}"
                                                    data-character-id="{{ payout.recipient.id }}"
                                                    title="{% translate 'Open character window in EVE' %}">
                                                <i class="fas fa-external-link-alt"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th>{% translate "Total" %}</th>
                                    <th class="text-end">{{ total_amount|isk_format_full }}</th>
                                    <th colspan="3"></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>


                    {% 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 %}
