{% extends "cartera/base.html" %}

{% block title %}Cartera - Bolsa{% endblock %}

{% block content %}
<h2 class="mb-4">📊 Mi cartera</h2>

<form method="post" action="{% url 'cartera:actualizar' %}" class="mb-3">
    {% csrf_token %}
    <button type="submit" class="btn btn-outline-primary btn-sm">
        🔄 Actualizar precios
    </button>
</form>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Valoración cartera</h6>
                <h3>{{ totales.valoracion }} €</h3>
                <small class="{% if totales.latente >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {% if totales.latente >= 0 %}+{% endif %}{{ totales.latente }} € latente
                </small>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Plusvalías realizadas</h6>
                <h3 class="{% if totales.plusvalias >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ totales.plusvalias }} €
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Dividendos netos</h6>
                <h3 class="text-success">{{ totales.dividendos }} €</h3>
            </div>
        </div>
    </div>
</div>

<h4>Posiciones abiertas</h4>
{% if abiertas %}
<div class="card mb-4">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Ticker</th>
                <th class="text-center">Div.</th>
                <th class="text-end">Acciones</th>
                <th class="text-end">Precio medio</th>
                <th class="text-end">Precio actual</th>
                <th class="text-end">Invertido</th>
                <th class="text-end">Valoración</th>
                <th class="text-end">Latente €</th>
                <th class="text-end">Dividendos €</th>
            </tr>
        </thead>
        <tbody>
            {% for p in abiertas %}
            <tr>
                <td><strong>{{ p.valor.ticker }}</strong></td>
                <td class="text-center"><span class="badge bg-secondary">{{ p.divisa }}</span></td>
                <td class="text-end">{{ p.acciones|floatformat:0 }}</td>
                <td class="text-end">{{ p.precio_medio|floatformat:4 }} {{ p.divisa }}</td>
                <td class="text-end">
                    {% if p.valor.precio_actual %}{{ p.valor.precio_actual|floatformat:4 }} {{ p.divisa }}{% else %}—{% endif %}
                </td>
                <td class="text-end">
                    {{ p.invertido_eur }} €
                    {% if p.divisa != 'EUR' %}<br><small class="text-muted">{{ p.invertido }} {{ p.divisa }}</small>{% endif %}
                </td>
                <td class="text-end">
                    {% if p.valoracion %}
                        {{ p.valoracion_eur }} €
                        {% if p.divisa != 'EUR' %}<br><small class="text-muted">{{ p.valoracion }} {{ p.divisa }}</small>{% endif %}
                    {% else %}—{% endif %}
                </td>
                <td class="text-end {% if p.latente >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {% if p.valoracion %}{% if p.latente >= 0 %}+{% endif %}{{ p.latente_eur }} €{% else %}—{% endif %}
                </td>
                <td class="text-end">{{ p.dividendos_eur }} €</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot class="table-light">
            <tr>
                <th colspan="5">Total cartera (EUR)</th>
                <th class="text-end">{{ totales.invertido }} €</th>
                <th class="text-end">{{ totales.valoracion }} €</th>
                <th class="text-end">{% if totales.latente is not None %}{{ totales.latente }} €{% else %}—{% endif %}</th>
                <th class="text-end">{{ totales.dividendos }} €</th>
            </tr>
        </tfoot>
    </table>
</div>
{% else %}
<p class="text-muted">No hay posiciones abiertas.</p>
{% endif %}

<h4>Posiciones cerradas</h4>
{% if cerradas %}
<div class="card">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Ticker</th>
                <th class="text-center">Div.</th>
                <th class="text-end">Plusvalías realizadas</th>
                <th class="text-end">Plusvalías €</th>
                <th class="text-end">Dividendos cobrados €</th>
            </tr>
        </thead>
        <tbody>
            {% for p in cerradas %}
            <tr>
                <td><strong>{{ p.valor.ticker }}</strong></td>
                <td class="text-center"><span class="badge bg-secondary">{{ p.divisa }}</span></td>
                <td class="text-end {% if p.plusvalias >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ p.plusvalias }} {{ p.divisa }}
                </td>
                <td class="text-end {% if p.plusvalias_eur >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ p.plusvalias_eur }} €
                </td>
                <td class="text-end">{{ p.dividendos_eur }} €</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted">Todavía no hay posiciones cerradas.</p>
{% endif %}
{% endblock %}