{% extends "base.html" %}

{% block title %}Evaluar Cumplimiento ENS Nivel Alto - ENS PYME{% endblock %}

{% block content %}
  <h1>📊 1. Evaluar Cumplimiento ENS Nivel Alto</h1>
  
  <p class="intro">
    Complete este formulario para evaluar el nivel de cumplimiento de su organización 
    con los controles del Esquema Nacional de Seguridad (ENS) Nivel Alto.
  </p>

  <form method="post" action="{{ url_for('evaluar') }}">
    {% for c in controles %}
      {# Buscamos la respuesta previa para este control, si existe #}
      {% set resp_prev = None %}
      {% set pct_prev = None %}
      {% if respuestas_anteriores %}
        {% for r in respuestas_anteriores %}
          {% if r.codigo == c.codigo %}
            {% set resp_prev = r.respuesta %}
            {% set pct_prev = r.porcentaje %}
          {% endif %}
        {% endfor %}
      {% endif %}

      <div class="control-item">
        <div class="control-header">
          <strong>{{ c.codigo }}</strong>
        </div>
        <p class="control-question">{{ c.pregunta }}</p>

        <div class="control-options">
          <label class="option-label cumple-option">
            <input type="radio"
                   name="{{ c.codigo }}_respuesta"
                   value="cumple"
                   {% if resp_prev == 'cumple' %}checked{% endif %}
                   {% if respuestas_anteriores is none %}required{% endif %}>
            <span class="option-text">✅ Cumple completamente</span>
          </label>

          <label class="option-label parcial-option">
            <input type="radio"
                   name="{{ c.codigo }}_respuesta"
                   value="parcial"
                   {% if resp_prev == 'parcial' %}checked{% endif %}>
            <span class="option-text">⚠️ Cumple parcialmente:</span>
            <input class="porcentaje-input"
                   type="number"
                   name="{{ c.codigo }}_porcentaje"
                   min="1"
                   max="99"
                   placeholder="%"
                   {% if pct_prev %}value="{{ pct_prev }}"{% endif %}>
          </label>

          <label class="option-label no-cumple-option">
            <input type="radio"
                   name="{{ c.codigo }}_respuesta"
                   value="no_cumple"
                   {% if resp_prev == 'no_cumple' %}checked{% endif %}>
            <span class="option-text">❌ No cumple</span>
          </label>
        </div>
      </div>
    {% endfor %}

    <div class="form-actions">
      <button type="submit" class="btn btn-success">💾 Guardar y calcular estadísticas</button>
      {% if respuestas_anteriores %}
        <a href="{{ url_for('reset_evaluacion') }}" class="btn btn-warning" 
           onclick="return confirm('¿Está seguro de que desea borrar todas las respuestas?')">
          🗑️ Borrar todas las respuestas
        </a>
      {% endif %}
    </div>
  </form>

  <div class="nav-links">
    <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Volver al menú principal</a>
  </div>
{% endblock %}

{% block extra_css %}
<style>
  .control-item { 
    background: white;
    border: 1px solid #dee2e6; 
    border-radius: 8px;
    padding: 1.5em; 
    margin-bottom: 1.5em; 
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  .control-item:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 8px rgba(0,102,204,0.1);
  }
  
  .control-header {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: white;
    padding: 0.5em 1em;
    border-radius: 5px;
    font-weight: bold;
    margin-bottom: 1em;
    font-family: 'Courier New', monospace;
  }
  
  .control-question { 
    margin: 0 0 1em 0; 
    font-weight: 500;
    color: #2c3e50;
    line-height: 1.5;
  }
  
  .control-options {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }
  
  .option-label {
    display: flex !important;
    align-items: center;
    padding: 0.75em;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 !important;
  }
  
  .option-label:hover {
    background: #f8f9fa;
    border-color: #0066cc;
  }
  
  .option-label input[type="radio"] {
    width: auto !important;
    margin-right: 0.75em !important;
  }
  
  .option-text {
    font-weight: 500;
    flex: 1;
  }
  
  .cumple-option:has(input:checked) {
    border-color: #28a745;
    background: #d4edda;
  }
  
  .parcial-option:has(input:checked) {
    border-color: #ffc107;
    background: #fff3cd;
  }
  
  .no-cumple-option:has(input:checked) {
    border-color: #dc3545;
    background: #f8d7da;
  }
  
  .porcentaje-input { 
    width: 80px !important; 
    margin-left: 0.5em !important;
    padding: 0.25em 0.5em !important;
    border: 1px solid #ced4da !important;
    border-radius: 3px !important;
  }
  
  .form-actions {
    background: #f8f9fa;
    padding: 1.5em;
    border-radius: 8px;
    margin: 2em 0;
    text-align: center;
  }
  
  .form-actions .btn {
    margin: 0.25em;
  }
  
  @media (max-width: 768px) {
    .control-item {
      padding: 1em;
    }
    
    .control-options {
      gap: 0.5em;
    }
    
    .option-label {
      padding: 0.5em;
      flex-direction: column;
      align-items: flex-start;
    }
    
    .porcentaje-input {
      margin-left: 0 !important;
      margin-top: 0.5em !important;
    }
  }
</style>
{% endblock %}