{% extends "base.html" %}

{% block title %}Resultados Evaluación ENS - ENS PYME{% endblock %}

{% block extra_css %}
<style>
  .stats-overview {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2em;
    border-radius: 8px;
    margin: 1.5em 0;
  }
  
  .stats-overview h2 {
    color: white;
    margin-top: 0;
  }
  
  .stat-item {
    display: inline-block;
    margin-right: 2em;
    margin-bottom: 1em;
  }
  
  .stat-value {
    font-size: 2em;
    font-weight: bold;
    display: block;
  }
  
  .details-table {
    overflow-x: auto;
  }
  
  .controls-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 1em;
    background: #f8f9fa;
  }
  
  .control-item {
    padding: 0.5em;
    margin: 0.25em 0;
    background: white;
    border-radius: 3px;
    border-left: 4px solid #dee2e6;
  }
  
  .control-item.cumple {
    border-left-color: #28a745;
  }
  
  .control-item.parcial {
    border-left-color: #fd7e14;
  }
  
  .control-item.no_cumple {
    border-left-color: #dc3545;
  }
</style>
{% endblock %}

{% block content %}
  <h1>📊 Resultados de tu evaluación ENS Nivel Alto</h1>

  <div class="stats-overview">
    <h2>📈 Estadísticas generales</h2>
    <div class="stat-item">
      <span class="stat-value cumple">{{ stats.cumple }}%</span>
      <small>Controles que cumplen totalmente</small>
    </div>
    <div class="stat-item">
      <span class="stat-value parcial">{{ stats.parcial }}%</span>
      <small>Controles que cumplen parcialmente</small>
    </div>
    <div class="stat-item">
      <span class="stat-value no_cumple">{{ stats.no_cumple }}%</span>
      <small>Controles que no cumplen</small>
    </div>
  </div>

  <h2>📋 Estadísticas por familia de controles</h2>
  <div class="details-table">
    <table>
      <thead>
        <tr>
          <th>Familia</th>
          <th>Total controles</th>
          <th>Cumple (%)</th>
          <th>Parcial (%)</th>
          <th>No cumple (%)</th>
        </tr>
      </thead>
      <tbody>
        {% for g in group_stats %}
          <tr>
            <td><strong>{{ g.familia }}</strong></td>
            <td>{{ g.total }}</td>
            <td><span class="cumple">{{ g.cumple }}%</span></td>
            <td><span class="parcial">{{ g.parcial }}%</span></td>
            <td><span class="no_cumple">{{ g.no_cumple }}%</span></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <h2>🔍 Detalle de cada control</h2>
  <div class="controls-list">
    {% for r in respuestas %}
      <div class="control-item {% if r.respuesta == 'cumple' %}cumple{% elif r.respuesta == 'parcial' %}parcial{% else %}no_cumple{% endif %}">
        <strong>{{ r.codigo }}:</strong>
        {% if r.respuesta == 'cumple' %}
          <span class="cumple">✅ Cumple completamente</span>
        {% elif r.respuesta == 'parcial' and r.porcentaje %}
          <span class="parcial">⚠️ Cumple parcialmente ({{ r.porcentaje }}%)</span>
        {% else %}
          <span class="no_cumple">❌ No cumple</span>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  <div class="nav-links">
    <a href="{{ url_for('evaluar') }}?edit=1" class="btn btn-primary">✏️ Volver al formulario</a>
    <a href="{{ url_for('descargar_resumen') }}" class="btn btn-success">📥 Descargar resumen</a>
    <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Menú principal</a>
  </div>
{% endblock %}