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

{% block details %}

<div class="card mb-3">
    <div class="card-header">{% trans "Summary" %}</div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <div class="card border-0 bg-light text-center p-3">
                    <div class="fs-4 fw-bold text-primary">{{ values.outstanding_count }}</div>
                    <div class="small text-muted">{% trans "Outstanding Requests" %}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 bg-light text-center p-3">
                    <div class="fs-4 fw-bold text-warning">{{ values.outstanding|custom_number_format:2|price }}</div>
                    <div class="small text-muted">{% trans "Outstanding Value" %}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 bg-light text-center p-3">
                    <div class="fs-4 fw-bold text-success">{{ values.finished_count }}</div>
                    <div class="small text-muted">{% trans "Completed Requests" %}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-0 bg-light text-center p-3">
                    <div class="fs-4 fw-bold text-success">{{ values.finished|custom_number_format:2|price }}</div>
                    <div class="small text-muted">{% trans "Total Spent" %}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{% if pending_requests %}
<div class="card mb-3 border-warning">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="fas fa-lock me-1"></i> {% trans "Pending Buy Requests" %}</span>
        <small class="text-muted">{{ pending_requests|length }} {% trans "request(s)" %}</small>
    </div>
    <div class="card-body">
        <p class="text-muted small mb-3">
            {% if reservation_hours %}
                {% blocktrans with hours=reservation_hours %}These requests reserve stock for you for {{ hours }} hours from submission. Create the in-game contract with the tracking number as its title, or release the request if you no longer want the items.{% endblocktrans %}
            {% else %}
                {% trans "These requests reserve stock for you until you release them. Create the in-game contract with the tracking number as its title, or release the request if you no longer want the items." %}
            {% endif %}
        </p>
        <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead>
                <tr>
                    <th class="ps-3">{% trans "Program" %}</th>
                    <th>{% trans "Tracking #" %}</th>
                    <th class="d-none d-md-table-cell">{% trans "Submitted" %}</th>
                    <th>{% trans "Price" %}</th>
                    <th>{% trans "Items" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for pending in pending_requests %}
                <tr>
                    <td class="ps-3">{% if pending.program %}{{ pending.program.name }}{% else %}—{% endif %}</td>
                    <td><code>{{ pending.tracking_number }}</code></td>
                    <td class="d-none d-md-table-cell">
                        {{ pending.created_at|date:"Y-m-d H:i" }}
                        <small class="text-muted">({{ pending.created_at|timesince }} {% trans "ago" %})</small>
                    </td>
                    <td>{{ pending.net_price|custom_number_format:2 }} ISK</td>
                    <td>
                        <a class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse" href="#pending-items-{{ pending.pk }}" role="button">
                            <i class="fas fa-boxes me-1"></i>{{ pending.items|length }}
                        </a>
                    </td>
                    <td class="text-end pe-3">
                        <a class="btn btn-sm btn-danger"
                           href="{% url 'buybackprogram:reverse_tracking_release' tracking_pk=pending.pk %}?from=stats"
                           onclick="return confirm('{% trans "Release this reservation? The tracking number will no longer be valid." %}')">
                            <i class="fas fa-unlock"></i> {% trans "Release" %}
                        </a>
                    </td>
                </tr>
                <tr class="collapse" id="pending-items-{{ pending.pk }}">
                    <td colspan="6" class="bg-light ps-4">
                        <ul class="list-unstyled mb-0 small">
                            {% for item in pending.items %}
                            <li>{{ item.eve_type.name }} × {{ item.quantity|intcomma }}</li>
                            {% endfor %}
                        </ul>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="fas fa-exchange-alt me-1"></i> {% trans "My Reverse Buyback Contracts" %}</span>
        <small class="text-muted">{{ contracts|length }} {% trans "contract(s)" %}</small>
    </div>
    <div class="card-body">

        <ul class="nav nav-tabs mb-3">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" data-bs-toggle="tab" href="#tab-outstanding" role="tab">
                    {% trans "Outstanding" %}
                    <span class="badge bg-primary ms-1">{{ values.outstanding_count }}</span>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-finished" role="tab">
                    {% trans "Finished" %}
                    <span class="badge bg-success ms-1">{{ values.finished_count }}</span>
                </a>
            </li>
        </ul>

        <div class="tab-content">

            {# --- Outstanding tab --- #}
            <div id="tab-outstanding" class="tab-pane fade show active" role="tabpanel">
                <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">{% trans "Program" %}</th>
                            <th>{% trans "Tracking #" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th class="d-none d-md-table-cell">{% trans "Date Issued" %}</th>
                            <th>{% trans "Price" %}</th>
                            <th>{% trans "Notes" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tracking in contracts %}
                        {% if tracking.contract.status == 'outstanding' %}
                        <tr>
                            <td class="ps-3">
                                {% if tracking.program %}{{ tracking.program.name }}{% else %}—{% endif %}
                            </td>
                            <td>
                                <a href="{% url 'buybackprogram:reverse_contract_details' tracking.tracking_number %}">
                                    <code>{{ tracking.tracking_number }}</code>
                                </a>
                            </td>
                            <td><span class="badge bg-warning text-dark">{{ tracking.contract.status }}</span></td>
                            <td class="d-none d-md-table-cell">{{ tracking.contract.date_issued|date:"Y-m-d H:i" }}</td>
                            <td>{{ tracking.contract.price|custom_number_format:2 }} ISK</td>
                            <td>
                                {% for note in tracking.contract.notes %}
                                    <i style="color: {{ note.color }};" class="fas {{ note.icon }}" title="{{ note.message }}"></i>
                                {% endfor %}
                            </td>
                        </tr>
                        {% endif %}
                        {% empty %}
                        {% endfor %}
                        {% if values.outstanding_count == 0 %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-3">{% trans "No outstanding contracts." %}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
                </div>
            </div>
            {# --- Finished tab --- #}
            <div id="tab-finished" class="tab-pane fade" role="tabpanel">
                <div class="table-responsive">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">{% trans "Program" %}</th>
                            <th>{% trans "Tracking #" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th class="d-none d-md-table-cell">{% trans "Date Issued" %}</th>
                            <th>{% trans "Price" %}</th>
                            <th>{% trans "Notes" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tracking in contracts %}
                        {% if tracking.contract.status == 'finished' %}
                        <tr>
                            <td class="ps-3">
                                {% if tracking.program %}{{ tracking.program.name }}{% else %}—{% endif %}
                            </td>
                            <td>
                                <a href="{% url 'buybackprogram:reverse_contract_details' tracking.tracking_number %}">
                                    <code>{{ tracking.tracking_number }}</code>
                                </a>
                            </td>
                            <td><span class="badge bg-success">{{ tracking.contract.status }}</span></td>
                            <td class="d-none d-md-table-cell">{{ tracking.contract.date_issued|date:"Y-m-d H:i" }}</td>
                            <td>{{ tracking.contract.price|custom_number_format:2 }} ISK</td>
                            <td>
                                {% for note in tracking.contract.notes %}
                                    <i style="color: {{ note.color }};" class="fas {{ note.icon }}" title="{{ note.message }}"></i>
                                {% endfor %}
                            </td>
                        </tr>
                        {% endif %}
                        {% empty %}
                        {% endfor %}
                        {% if values.finished_count == 0 %}
                        <tr>
                            <td colspan="6" class="text-center text-muted py-3">{% trans "No completed contracts." %}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
                </div>
            </div>

        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
{% include "buybackprogram/bundles/buybackprogram-css-light.html" %}
{% endblock %}