{% extends "base.html" %}
{% block title %}Partidos — Mundial 2026{% endblock %}
{% block content %}
<h1>Partidos</h1>

<div class="puntos-info">
    <span>Acertar resultado: <strong>1 pt</strong></span>
    <span>Marcador exacto: <strong>+2 pts</strong></span>
</div>

{% if not fases %}
    <p class="empty">Aún no hay partidos cargados.</p>
{% endif %}

{% for fase in FASE_ORDER %}
{% if fase in fases %}
<section class="fase-seccion">
    <h2 class="fase-titulo">{{ FASE_LABELS[fase] }}</h2>
{% for dia, partidos in fases[fase].items() %}
<section class="dia-seccion">
    <h3 class="dia-titulo">{{ dia | format_dia }}</h3>
    <div class="partidos-grid">
    {% for partido in partidos %}
        {% set jugado = partido.resultado_local is not none %}
        {% set mi_pred = mis_pred.get(partido.id) %}
        {% set bloqueado = partido.locked %}

        {% if jugado %}
            {% if partido.resultado_local > partido.resultado_visitante %}
                {% set resultado_real = 'local' %}
            {% elif partido.resultado_local < partido.resultado_visitante %}
                {% set resultado_real = 'visitante' %}
            {% else %}
                {% set resultado_real = 'empate' %}
            {% endif %}
            {% set acerto_resultado = mi_pred and mi_pred.prediccion == resultado_real %}
            {% set acerto_exacto = mi_pred and mi_pred.goles_local == partido.resultado_local and mi_pred.goles_visitante == partido.resultado_visitante %}
            {% set puntos_ganados = (1 if acerto_resultado else 0) + (2 if acerto_exacto else 0) %}
        {% endif %}

        <div class="partido-card {% if jugado %}jugado{% elif bloqueado %}bloqueado{% endif %}">
            <div class="partido-header">
                <span class="partido-hora">{{ partido.fecha | format_hora }}</span>
                {% if jugado %}
                    <span class="badge badge-jugado">Finalizado</span>
                {% elif bloqueado %}
                    <span class="badge badge-cerrado">Apuestas cerradas</span>
                {% else %}
                    <span class="badge badge-abierto">Cierra {{ partido.cierre }}hs</span>
                {% endif %}
            </div>

            <div class="partido-equipos">
                {% set pais_local = resolver_placeholder(partido.equipo_local, standings) %}
                {% set pais_visit = resolver_placeholder(partido.equipo_visitante, standings) %}
                <span class="equipo">
                    {{ partido.equipo_local }}
                    {% if pais_local %}<span class="equipo-hint">({{ pais_local }})</span>{% endif %}
                </span>
                <span class="vs">vs</span>
                <span class="equipo">
                    {{ partido.equipo_visitante }}
                    {% if pais_visit %}<span class="equipo-hint">({{ pais_visit }})</span>{% endif %}
                </span>
            </div>

            {% if jugado %}
                <div class="resultado-final">
                    {{ partido.resultado_local }} — {{ partido.resultado_visitante }}
                </div>
                {% if mi_pred %}
                    <div class="pred-resultado {% if acerto_resultado %}correcto{% else %}incorrecto{% endif %}">
                        Tu predicción: <strong>{{ mi_pred.goles_local }} — {{ mi_pred.goles_visitante }}</strong>
                        {% if acerto_exacto %}
                            <span class="badge-exacto">¡Exacto!</span>
                        {% endif %}
                        — +{{ puntos_ganados }} pts
                    </div>
                {% else %}
                    <div class="pred-resultado sin-pred">No predijiste este partido</div>
                {% endif %}

            {% elif bloqueado %}
                {% if mi_pred %}
                    <div class="pred-bloqueada">
                        Apostaste: <strong>{{ mi_pred.goles_local }} — {{ mi_pred.goles_visitante }}</strong>
                    </div>
                {% else %}
                    <div class="pred-resultado sin-pred">No apostaste en este partido</div>
                {% endif %}

            {% else %}
                <form id="form-{{ partido.id }}" method="post" action="/predecir/{{ partido.id }}">
                    <div class="score-form">
                        <div class="score-equipo">
                            <span class="score-label">{{ partido.equipo_local }}</span>
                            <input type="number" name="goles_local" min="0" max="20"
                                value="{{ mi_pred.goles_local if mi_pred else '' }}"
                                required class="score-input">
                        </div>
                        <span class="score-sep">—</span>
                        <div class="score-equipo">
                            <input type="number" name="goles_visitante" min="0" max="20"
                                value="{{ mi_pred.goles_visitante if mi_pred else '' }}"
                                required class="score-input">
                            <span class="score-label">{{ partido.equipo_visitante }}</span>
                        </div>
                    </div>
                    <button type="button" class="btn-predecir" onclick="var f=document.getElementById('form-{{ partido.id }}');var b=this;b.disabled=true;b.textContent='Guardando...';fetch(f.action,{method:'POST',body:new FormData(f)}).then(function(){b.textContent='✓ Guardado';b.style.background='#27ae60';setTimeout(function(){b.disabled=false;b.textContent='Cambiar apuesta';b.style.background='';},2000);}).catch(function(){b.disabled=false;b.textContent='Error';});">
                        {% if mi_pred %}Cambiar apuesta{% else %}Apostar{% endif %}
                    </button>
                </form>
            {% endif %}
        </div>
    {% endfor %}
    </div>
</section>
{% endfor %}
</section>
{% endif %}
{% endfor %}
{% endblock %}