{% 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">
                <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 Contracts" %}</div>
                </div>
            </div>
            <div class="col-md">
                <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">
                <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 Contracts" %}</div>
                </div>
            </div>
            <div class="col-md">
                <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 Sold" %}</div>
                </div>
            </div>
            <div class="col-md">
                <div class="card border-0 bg-light text-center p-3">
                    <div class="fs-4 fw-bold text-danger">{{ values.pending_count }}</div>
                    <div class="small text-muted">{% trans "Pending Requests" %}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<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 "Reverse Buyback Contracts" %}</span>
        <div class="d-flex align-items-center gap-2">
            <small class="text-muted">{{ contracts|length }} {% trans "contract(s)" %}</small>
            <a href="{% url 'buybackprogram:manual_reverse_contract_sync' %}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-sync-alt me-1"></i> {% trans "Refresh" %}
            </a>
        </div>
    </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>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-pending" role="tab">
                    {% trans "Pending Requests" %}
                    <span class="badge bg-danger ms-1">{{ values.pending_count }}</span>
                </a>
            </li>
        </ul>

        <div class="tab-content">

            {# --- Outstanding tab --- #}
            <div id="tab-outstanding" class="tab-pane fade show active" role="tabpanel">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">{% trans "Program" %}</th>
                            <th>{% trans "Tracking #" %}</th>
                            <th>{% trans "Buyer" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% 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>{{ tracking.contract.issuer_name }}</td>
                            <td><span class="badge bg-warning text-dark">{{ tracking.contract.status }}</span></td>
                            <td>{{ 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 %}
                        {% endfor %}
                        {% if values.outstanding_count == 0 %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-3">{% trans "No outstanding contracts." %}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            {# --- Finished tab --- #}
            <div id="tab-finished" class="tab-pane fade" role="tabpanel">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">{% trans "Program" %}</th>
                            <th>{% trans "Tracking #" %}</th>
                            <th>{% trans "Buyer" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% 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>{{ tracking.contract.issuer_name }}</td>
                            <td><span class="badge bg-success">{{ tracking.contract.status }}</span></td>
                            <td>{{ 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 %}
                        {% endfor %}
                        {% if values.finished_count == 0 %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-3">{% trans "No completed contracts." %}</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            {# --- Pending requests tab --- #}
            <div id="tab-pending" class="tab-pane fade" role="tabpanel">
                <p class="text-muted small">
                    {% trans "These buy requests have no ingame contract linked to them yet. They reserve stock from your programs until a contract is created or the request is removed." %}
                </p>
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">{% trans "Program" %}</th>
                            <th>{% trans "Tracking #" %}</th>
                            <th>{% trans "Requested by" %}</th>
                            <th>{% trans "Requested at" %}</th>
                            <th>{% trans "Reserved Value" %}</th>
                            <th>{% trans "Items" %}</th>
                            <th class="text-end pe-3">{% trans "Actions" %}</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>
                                {% if pending.issuer_user %}
                                    {{ pending.issuer_user.profile.main_character.character_name|default:pending.issuer_user.username }}
                                {% else %}
                                    <em class="text-muted">{% trans "Guest" %}</em>
                                {% endif %}
                            </td>
                            <td>
                                {{ pending.created_at|date:"Y-m-d H:i" }}
                                <small class="text-muted">({{ pending.created_at|timesince }})</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-outline-danger" href="#"
                                   onclick="confirmRelease('{{ pending.tracking_number }}', '{% url 'buybackprogram:reverse_tracking_remove' tracking_pk=pending.pk %}')"
                                   title="{% trans 'Remove request and release reserved stock' %}">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        <tr class="collapse" id="pending-items-{{ pending.pk }}">
                            <td colspan="7" class="p-0">
                                <table class="table table-sm mb-0 bg-light">
                                    <thead>
                                        <tr>
                                            <th class="ps-5">{% trans "Item" %}</th>
                                            <th>{% trans "Quantity" %}</th>
                                            <th>{% trans "Unit Price" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in pending.items %}
                                        <tr>
                                            <td class="ps-5">{{ item.eve_type.name }}</td>
                                            <td>{{ item.quantity|intcomma }}</td>
                                            <td>{{ item.buy_value|custom_number_format:2 }} ISK</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-3">{% trans "No pending requests." %}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

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

<div class="modal fade" id="releaseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-trash text-danger me-2"></i>{% trans "Remove Buy Request" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to remove buy request" %} <strong id="release-tracking-number"></strong>?</p>
                <p class="text-muted small mb-0">{% trans "This action cannot be undone. The items reserved by this request will be released back to stock." %}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <a id="release-confirm-btn" href="#" class="btn btn-danger">
                    <i class="fas fa-trash me-1"></i>{% trans "Remove" %}
                </a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
<script>
function confirmRelease(trackingNumber, url) {
    document.getElementById('release-tracking-number').textContent = trackingNumber;
    document.getElementById('release-confirm-btn').href = url;
    new bootstrap.Modal(document.getElementById('releaseModal')).show();
}
</script>
{% endblock %}

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