{% 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-12">
            <h2>{% translate "Approve Loot for Payout" %}</h2>
            <p class="text-muted">
                {{ loot_pool.name }} |
                {% translate "Payout" %}: <a href="{% url 'aapayout:fleet_detail' loot_pool.fleet.pk %}">{{ loot_pool.fleet.name }}</a>
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- Summary Card -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5>{% translate "Loot Pool Summary" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-5">{% translate "Total Items" %}:</dt>
                                <dd class="col-sm-7">{{ loot_pool.items.count }}</dd>

                                <dt class="col-sm-5">{% translate "Total Value" %}:</dt>
                                <dd class="col-sm-7"><strong>{{ loot_pool.total_value|isk_format_full }}</strong></dd>

                                <dt class="col-sm-5">{% translate "Pricing Method" %}:</dt>
                                <dd class="col-sm-7">{{ loot_pool.get_pricing_method_display }}</dd>

                                <dt class="col-sm-5">{% translate "Valued At" %}:</dt>
                                <dd class="col-sm-7">{{ loot_pool.valued_at|date:"Y-m-d H:i" }}</dd>
                            </dl>
                        </div>
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-6">{% translate "Participants" %}:</dt>
                                <dd class="col-sm-6">{{ loot_pool.fleet.get_participant_count }}</dd>

                                <dt class="col-sm-6">{% translate "Corp Share" %}:</dt>
                                <dd class="col-sm-6">{{ loot_pool.corp_share_percentage }}%</dd>

                                <dt class="col-sm-6">{% translate "Corp Amount" %}:</dt>
                                <dd class="col-sm-6"><strong>{{ loot_pool.corp_share_amount|isk_format_full }}</strong></dd>

                                <dt class="col-sm-6">{% translate "Participant Pool" %}:</dt>
                                <dd class="col-sm-6"><strong>{{ loot_pool.participant_share_amount|isk_format_full }}</strong></dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payout Preview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>{% translate "Payout Preview" %}</h5>
                    <small class="text-muted">
                        {{ payout_preview|length }} {% translate "payouts" %}
                        ({{ scout_count }} {% translate "scouts" %}, {{ regular_count }} {% translate "regular" %})
                    </small>
                </div>
                <div class="card-body">
                    {% if payout_preview.0.base_share %}
                    <div class="alert alert-info mb-3">
                        <strong>{% translate "Payout Structure" %}:</strong>
                        <ul class="mb-0 mt-2">
                            <li>{% translate "Base Share" %}: <strong>{{ payout_preview.0.base_share|isk_format_full }}</strong></li>
                            <li>{% translate "Scout Bonus" %}: <strong>+{{ payout_preview.0.scout_bonus|isk_format_full }}</strong> (+{{ loot_pool.scout_bonus_percentage|floatformat:0 }}%)</li>
                            <li>{% translate "Scout Total" %}: <strong>{{ payout_preview.0.base_share|add:payout_preview.0.scout_bonus|isk_format_full }}</strong></li>
                        </ul>
                    </div>
                    {% endif %}

                    <p class="text-muted">{% translate "These payouts will be generated when approved:" %}</p>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>{% translate "Recipient" %}</th>
                                    <th>{% translate "Role" %}</th>
                                    <th class="text-end">{% translate "Base" %}</th>
                                    <th class="text-end">{% translate "Bonus" %}</th>
                                    <th class="text-end">{% translate "Total" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for payout in payout_preview %}
                                <tr {% if payout.is_scout %}class="table-success"{% endif %}>
                                    <td>
                                        {{ payout.character.name }}
                                        {% if payout.is_scout %}
                                            <span class="badge bg-success">{% translate "Scout" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if payout.alt_characters %}
                                            <small class="text-muted" title="{% for alt in payout.alt_characters %}{{ alt.name }}{% if not forloop.last %}, {% endif %}{% endfor %}">
                                                +{{ payout.alt_characters|length }} alt{% if payout.alt_characters|length != 1 %}s{% endif %}
                                            </small>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">{{ payout.base_share|isk_format_full }}</td>
                                    <td class="text-end">
                                        {% if payout.scout_bonus > 0 %}
                                            <span class="text-success">+{{ payout.scout_bonus|isk_format_full }}</span>
                                        {% else %}
                                            —
                                        {% endif %}
                                    </td>
                                    <td class="text-end"><strong>{{ payout.amount|isk_format_full }}</strong></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th colspan="4">{% translate "Total Participant Payouts" %}:</th>
                                    <th class="text-end">{{ total_payouts|isk_format_full }}</th>
                                </tr>
                                <tr class="table-active">
                                    <th colspan="4">{% translate "Corporation Share" %}:</th>
                                    <th class="text-end">{{ loot_pool.corp_share_amount|isk_format_full }}</th>
                                </tr>
                                <tr class="table-primary">
                                    <th colspan="4">{% translate "Grand Total" %}:</th>
                                    <th class="text-end">{{ loot_pool.total_value|isk_format_full }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Approval Form -->
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5>{% translate "Approval" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {{ form.non_field_errors }}
                        </div>
                        {% endif %}

                        <div class="alert alert-info mb-3">
                            <i class="fas fa-info-circle"></i>
                            <strong>{% translate "Corp Share:" %}</strong>
                            {% translate "Corporation share is automatically set to 10% if per-character payout exceeds 200,000 ISK, otherwise 0%." %}
                        </div>

                        <div class="mb-3 form-check">
                            {{ form.confirm }}
                            <label class="form-check-label" for="{{ form.confirm.id_for_label }}">
                                {{ form.confirm.label }}
                            </label>
                            {% if form.confirm.errors %}
                                <div class="text-danger">{{ form.confirm.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            {% translate "Once approved, payouts will be generated and the loot pool status will be set to 'Approved'. You will be able to mark individual payouts as paid." %}
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'aapayout:loot_detail' loot_pool.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> {% translate "Cancel" %}
                            </a>
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-check"></i> {% translate "Approve & Generate Payouts" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5>{% translate "Important" %}</h5>
                </div>
                <div class="card-body">
                    <h6>{% translate "Before Approving" %}</h6>
                    <ul class="small">
                        <li>{% translate "Verify all item prices are correct" %}</li>
                        <li>{% translate "Check the total loot value" %}</li>
                        <li>{% translate "Review the participant list" %}</li>
                        <li>{% translate "Corp share is auto-calculated based on per-character payout" %}</li>
                    </ul>
                    <hr>
                    <h6>{% translate "What Happens Next" %}</h6>
                    <ul class="small">
                        <li>{% translate "Payout records will be created" %}</li>
                        <li>{% translate "Status will change to 'Approved'" %}</li>
                        <li>{% translate "You can mark payouts as paid" %}</li>
                        <li>{% translate "Participants will see pending payouts" %}</li>
                    </ul>
                    <hr>
                    <h6>{% translate "Need Changes?" %}</h6>
                    <p class="small">
                        {% translate "If you need to adjust prices or participants, cancel and make changes before approving." %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}