<!-- web/templates/optimizador_form.html -->

{% extends "base.html" %}

{% block title %}Optimizador de Recursos ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>⚡ 7. Optimizador de Recursos ENS</h1>
  
  <p class="intro">
    Calcule los recursos necesarios para implementar el ENS en su organización.
    Complete el formulario con los datos de su empresa para obtener una estimación personalizada.
  </p>

  <div class="formulario-section">
    <h2>📊 Datos de su organización</h2>
    
    <form method="post" action="{{ url_for('optimizador_recursos') }}" class="optimizador-form">
      <div class="form-grid">
        <div class="form-group">
          <label for="empleados">👥 Número total de empleados:</label>
          <input type="number" name="empleados" id="empleados" min="1" required 
                 placeholder="Ej: 25">
          <small>Total de empleados en la organización</small>
        </div>

        <div class="form-group">
          <label for="tecnicos">🔧 Número de técnicos TI dedicados:</label>
          <input type="number" name="tecnicos" id="tecnicos" min="0" value="0" required 
                 placeholder="Ej: 2">
          <small>Técnicos especializados en TI (0 si no tiene)</small>
        </div>

        <div class="form-group">
          <label for="sedes">🏢 Número de sedes / sucursales:</label>
          <input type="number" name="sedes" id="sedes" min="1" required 
                 placeholder="Ej: 3">
          <small>Ubicaciones físicas de la organización</small>
        </div>

        <div class="form-group">
          <label for="madurez">📈 Nivel de madurez actual:</label>
          <select name="madurez" id="madurez" required>
            <option value="">Seleccione un nivel</option>
            <option value="bajo">🔴 Bajo - Implementación inicial</option>
            <option value="medio">🟡 Medio - Algunos controles implementados</option>
            <option value="alto">🟢 Alto - Controles avanzados</option>
          </select>
          <small>Evalúe el nivel actual de seguridad de su organización</small>
        </div>

        <div class="form-group">
          <label for="presupuesto">💰 Presupuesto disponible (€):</label>
          <input type="number" name="presupuesto" id="presupuesto" min="0" step="0.01" required 
                 placeholder="Ej: 15000.00">
          <small>Presupuesto total disponible para la implementación</small>
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-success">📊 Calcular estimación</button>
        <button type="reset" class="btn btn-secondary">🔄 Limpiar formulario</button>
      </div>
    </form>
  </div>

  {% if resultado %}
    <div class="resultados-section">
      <h2>📋 Desglose de partidas</h2>
      
      <div class="partidas-grid">
        {% for clave, info in resultado.partidas.items() %}
          <div class="partida-card">
            <h3>{{ clave.replace('_', ' ').capitalize() }}</h3>
            <p class="partida-descripcion">{{ info.texto }}</p>
            
            <div class="partida-detalles">
              {% if info.horas and info.horas > 0 %}
                <div class="detalle-item">
                  <span class="detalle-label">⏱️ Horas:</span>
                  <span class="detalle-valor">{{ info.horas }} h</span>
                </div>
              {% endif %}
              <div class="detalle-item">
                <span class="detalle-label">💰 Coste:</span>
                <span class="detalle-valor">€{{ '%.2f'|format(info.coste) }}</span>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>

      <div class="totales-section">
        <h2>📊 Totales</h2>
        <div class="totales-grid">
          <div class="total-card">
            <div class="total-icon">⏱️</div>
            <div class="total-content">
              <div class="total-label">Horas totales estimadas</div>
              <div class="total-valor">{{ resultado.totales.horas_totales }} h</div>
            </div>
          </div>
          
          <div class="total-card">
            <div class="total-icon">💰</div>
            <div class="total-content">
              <div class="total-label">Coste total inicial</div>
              <div class="total-valor">€{{ '%.2f'|format(resultado.totales.coste_total_inicial) }}</div>
            </div>
          </div>
          
          <div class="total-card">
            <div class="total-icon">🔄</div>
            <div class="total-content">
              <div class="total-label">Coste recurrente anual</div>
              <div class="total-valor">€{{ '%.2f'|format(resultado.totales.coste_recurrente_anual) }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="plan-section">
        <h2>🎯 Plan de prioridades (presupuesto €{{ request.form.presupuesto }})</h2>
        
        {% if resultado.plan_prioridades and resultado.plan_prioridades|length > 0 %}
          <div class="plan-container">
            <ol class="plan-list">
              {% for item in resultado.plan_prioridades %}
                <li class="plan-item">
                  <div class="plan-header">
                    <strong>{{ item.concepto.replace('_', ' ').capitalize() }}</strong>
                    <span class="plan-coste">€{{ '%.2f'|format(item.coste) }}</span>
                  </div>
                  <div class="plan-descripcion">{{ item.texto }}</div>
                  <div class="plan-acumulado">
                    Acumulado: €{{ '%.2f'|format(item.acumulado) }}
                  </div>
                </li>
              {% endfor %}
            </ol>
          </div>
        {% else %}
          <div class="alert alert-warning">
            <strong>⚠️ Presupuesto insuficiente</strong><br>
            No hay partidas que entren en el presupuesto indicado. Considere aumentar el presupuesto disponible.
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}

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

{% block extra_css %}
<style>
  .formulario-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2em;
    margin: 2em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .optimizador-form {
    max-width: 800px;
  }
  
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5em;
    margin-bottom: 2em;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.5em;
  }
  
  .form-group input,
  .form-group select {
    padding: 0.75em;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
  }
  
  .form-group small {
    color: #6c757d;
    font-size: 0.875em;
    margin-top: 0.25em;
  }
  
  .form-actions {
    text-align: center;
    padding-top: 1em;
    border-top: 1px solid #dee2e6;
  }
  
  .partidas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5em;
    margin: 1.5em 0;
  }
  
  .partida-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .partida-card h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.1em;
  }
  
  .partida-descripcion {
    color: #666;
    margin-bottom: 1em;
    line-height: 1.4;
  }
  
  .partida-detalles {
    background: #f8f9fa;
    border-radius: 5px;
    padding: 1em;
  }
  
  .detalle-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
  }
  
  .detalle-item:last-child {
    margin-bottom: 0;
  }
  
  .detalle-label {
    font-weight: 500;
  }
  
  .detalle-valor {
    font-weight: bold;
    color: #0066cc;
  }
  
  .totales-section {
    margin: 3em 0;
  }
  
  .totales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em;
  }
  
  .total-card {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: white;
    border-radius: 8px;
    padding: 1.5em;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  
  .total-icon {
    font-size: 2em;
    margin-right: 1em;
  }
  
  .total-content {
    flex: 1;
  }
  
  .total-label {
    font-size: 0.9em;
    opacity: 0.9;
    margin-bottom: 0.25em;
  }
  
  .total-valor {
    font-size: 1.5em;
    font-weight: bold;
  }
  
  .plan-section {
    margin: 3em 0;
  }
  
  .plan-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5em;
  }
  
  .plan-list {
    list-style: none;
    padding: 0;
    counter-reset: plan-counter;
  }
  
  .plan-item {
    counter-increment: plan-counter;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 1.5em;
    margin-bottom: 1em;
    position: relative;
  }
  
  .plan-item::before {
    content: counter(plan-counter);
    position: absolute;
    left: -0.5em;
    top: -0.5em;
    background: #0066cc;
    color: white;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1em;
  }
  
  .plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
  }
  
  .plan-coste {
    background: #28a745;
    color: white;
    padding: 0.25em 0.75em;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9em;
  }
  
  .plan-descripcion {
    margin-bottom: 0.5em;
    line-height: 1.4;
  }
  
  .plan-acumulado {
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
  }
  
  @media (max-width: 768px) {
    .form-grid {
      grid-template-columns: 1fr;
    }
    
    .partidas-grid,
    .totales-grid {
      grid-template-columns: 1fr;
    }
    
    .total-card {
      flex-direction: column;
      text-align: center;
    }
    
    .total-icon {
      margin-right: 0;
      margin-bottom: 0.5em;
    }
    
    .plan-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5em;
    }
  }
</style>
{% endblock %}
