{% 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 Contracts" %}</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 Contracts" %}</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 Sold" %}</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>
        </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>

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

{% endblock %}

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