{% 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>{{ 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>
            </p>
        </div>
        <div class="col-md-4 text-end">
            {% if can_edit %}
                <a href="{% url 'aapayout:loot_edit' loot_pool.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit"></i> {% translate "Edit Loot" %}
                </a>
            {% endif %}
        </div>
    </div>

    <!-- Loot Pool Summary -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Total Value" %}</h5>
                </div>
                <div class="card-body">
                    <h3 class="text-primary">{{ loot_pool.total_value|isk_format_full }}</h3>
                    <small class="text-muted">
                        {% translate "Based on" %} {{ loot_pool.get_pricing_method_display }}
                    </small>
                    {% if loot_pool.valued_at %}
                        <p class="small text-muted mt-2">
                            {% translate "Valued at" %}: {{ loot_pool.valued_at|date:"Y-m-d H:i" }}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>{% translate "Distribution" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-6">{% translate "Corp Share" %} ({{ loot_pool.corp_share_percentage }}%):</dt>
                        <dd class="col-sm-6 text-end">{{ loot_pool.corp_share_amount|isk_format_full }}</dd>

                        <dt class="col-sm-6">{% translate "Participants" %}:</dt>
                        <dd class="col-sm-6 text-end">{{ loot_pool.participant_share_amount|isk_format_full }}</dd>
                    </dl>

                    {% if can_edit %}
                    <hr>
                    <div class="mb-0">
                        <label for="scout-bonus-slider-detail" class="form-label">
                            <i class="fas fa-binoculars"></i> {% translate "Scout Bonus" %}:
                            <strong><span id="scout-bonus-value-detail">{{ loot_pool.scout_bonus_percentage|floatformat:0 }}</span>%</strong>
                        </label>
                        <input type="range" class="form-range" id="scout-bonus-slider-detail"
                               min="0" max="100" step="10"
                               value="{{ loot_pool.scout_bonus_percentage|floatformat:0 }}"
                               data-loot-pool-id="{{ loot_pool.pk }}">
                        <div class="d-flex justify-content-between text-muted small">
                            <span>0%</span>
                            <span>50%</span>
                            <span>100%</span>
                        </div>
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-info-circle"></i> {% translate "Adjust scout bonus - payouts will update automatically" %}
                        </small>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Loot Items Table -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>{% translate "Loot Items" %} ({{ items.count }})</h5>
                    {% if loot_pool.janice_appraisal_code %}
                        <a href="https://janice.e-351.com/a/{{ loot_pool.janice_appraisal_code }}"
                           target="_blank" class="btn btn-sm btn-info">
                            <i class="fas fa-external-link-alt"></i> {% translate "View on Janice" %}
                        </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if items %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Item Name" %}</th>
                                    <th class="text-end">{% translate "Quantity" %}</th>
                                    <th class="text-end">{% translate "Unit Price" %}</th>
                                    <th class="text-end">{% translate "Total Value" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in items %}
                                <tr>
                                    <td>{{ item.name }}</td>
                                    <td class="text-end">{{ item.quantity|intcomma }}</td>
                                    <td class="text-end">{{ item.unit_price|isk_format_full }}</td>
                                    <td class="text-end"><strong>{{ item.total_value|isk_format_full }}</strong></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr class="table-active">
                                    <th colspan="3" class="text-end">{% translate "Grand Total" %}:</th>
                                    <th class="text-end">{{ loot_pool.total_value|isk_format_full }}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">{% translate "No items in this loot pool yet" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Payouts -->
    {% if loot_pool.payouts.count > 0 %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5>{% translate "Payouts" %}</h5>
                    <a href="{% url 'aapayout:payout_list' loot_pool.pk %}" class="btn btn-sm btn-primary">
                        <i class="fas fa-list"></i> {% translate "Manage Payouts" %}
                    </a>
                </div>
                <div class="card-body">
                    <p class="small text-muted">
                        {% translate "Payouts have been generated for this loot pool." %}
                        <a href="{% url 'aapayout:payout_list' loot_pool.pk %}">{% translate "View payout details" %}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Raw Loot Text (collapsible) -->
    {% if loot_pool.raw_loot_text %}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <a class="text-decoration-none" data-bs-toggle="collapse" href="#rawLootCollapse" role="button" aria-expanded="false">
                        <h5>
                            <i class="fas fa-chevron-down"></i> {% translate "Raw Loot Text" %}
                        </h5>
                    </a>
                </div>
                <div class="collapse" id="rawLootCollapse">
                    <div class="card-body">
                        <pre class="bg-dark text-light p-3 rounded" style="max-height: 400px; overflow-y: auto;">{{ loot_pool.raw_loot_text }}</pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}