{% extends "base.html" %}
{% block contenido %}

{%- if TESTING -%}
<div data-test_info="La Plantilla fue renderizada correctamente: cacao_accounting/bancos/templates/bancos/cash_forecast_entradas.html"></div>
{%- endif -%}

{% set currency = selected_company %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb lh-sm">
    <li class="breadcrumb-item"><a href="{{ url_for('cacao_app.pagina_inicio') }}" class="link-dark"><i class="bi bi-house"></i> Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ url_for('bancos.bancos_') }}" class="link-dark">Caja y Bancos</a></li>
    <li class="breadcrumb-item active" aria-current="page">Forecast de Entradas manuales</li>
  </ol>
</nav>

<div class="card mb-4 shadow-sm border-0">
  <div class="card-header bg-white py-3 border-0">
    <h4 class="mb-0 fw-bold"><i class="bi bi-pencil-square text-primary"></i> Forecast de Entradas manuales</h4>
    <p class="text-muted mb-0 small">Gestione los ingresos y egresos proyectados manualmente para cada escenario de flujo de caja.</p>
  </div>

  <div class="p-3 bg-light border-top">
    <form method="GET" action="{{ url_for('bancos.cash_forecast_manual_entries') }}" class="row g-3 align-items-end">
      <div class="col-md-4">
        <label for="companySelect" class="form-label small fw-bold">Compañía:</label>
        <select name="company" id="companySelect" class="form-select form-select-sm" onchange="this.form.submit()">
          {% for code, name in companies %}
          <option value="{{ code }}" {% if code == selected_company %}selected{% endif %}>{{ name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-4">
        <label for="forecastSelect" class="form-label small fw-bold">Escenario / Pronóstico:</label>
        <select name="forecast_id" id="forecastSelect" class="form-select form-select-sm" onchange="this.form.submit()">
          <option value="">-- Seleccione un Escenario --</option>
          {% for f in forecasts %}
          <option value="{{ f.id }}" {% if selected_forecast and f.id == selected_forecast.id %}selected{% endif %}>{{ f.version }} ({{ f.status }})</option>
          {% endfor %}
        </select>
      </div>
    </form>
  </div>
</div>

{% if selected_forecast %}
<!-- Ficha de Información General del Pronóstico Seleccionado -->
<div class="card mb-4 shadow-sm border-0">
  <div class="card-body bg-light">
    <div class="row g-3">
      <div class="col-md-3">
        <span class="text-muted d-block small">Escenario</span>
        <strong>{{ selected_forecast.version }}</strong>
      </div>
      <div class="col-md-3">
        <span class="text-muted d-block small">Estado</span>
        <strong>
          {% if selected_forecast.status == "Draft" %}
          <span class="text-warning"><i class="bi bi-file-earmark-diff"></i> Borrador</span>
          {% elif selected_forecast.status == "Approved" %}
          <span class="text-success"><i class="bi bi-check-all"></i> Aprobado</span>
          {% elif selected_forecast.status == "Closed" %}
          <span class="text-secondary"><i class="bi bi-lock"></i> Cerrado</span>
          {% else %}
          <span class="text-dark">{{ selected_forecast.status }}</span>
          {% endif %}
        </strong>
      </div>
      <div class="col-md-3">
        <span class="text-muted d-block small">Periodicidad</span>
        <strong>{{ "Semanal" if selected_forecast.periodicity == "weekly" else "Mensual" }}</strong>
      </div>
      <div class="col-md-3">
        <span class="text-muted d-block small">Descripción</span>
        <p class="mb-0 text-muted small">{{ selected_forecast.description or "Sin descripción" }}</p>
      </div>
    </div>
  </div>
</div>

<!-- Gestión de Proyecciones Manuales -->
<div class="ca-card mb-4 shadow-sm border-0">
  <div class="ca-card-header bg-white py-3 d-flex align-items-center justify-content-between">
    <h5 class="ca-card-title mb-0"><i class="bi bi-pencil-square"></i> Proyecciones Manuales</h5>

    {% if selected_forecast.status == "Draft" %}
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#importEntryForm">
        <i class="bi bi-file-earmark-arrow-up me-1"></i>Importar CSV / Excel
      </button>
      <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#newEntryForm">
        <i class="bi bi-plus-circle me-1"></i>Añadir Proyección
      </button>
    </div>
    {% endif %}
  </div>

  <!-- Formulario para importar proyecciones (colapsable) -->
  {% if selected_forecast.status == "Draft" %}
  <div class="collapse p-4 border-bottom bg-light" id="importEntryForm">
    <h6 class="fw-bold mb-3">{{ _('Importar Proyecciones Manuales desde Archivo') }}</h6>
    <p class="text-muted small">
      {{ _('Use el asistente de importación compartido con plantilla descargable, vista previa y validación.') }}
    </p>
    <a href="{{ url_for('imports.new') }}" class="btn btn-sm btn-primary">
      <i class="bi bi-file-earmark-arrow-up me-1"></i>{{ _('Ir al Asistente de Importación') }}
    </a>
    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#importEntryForm">
      {{ _('Cancelar') }}
    </button>
  </div>
  {% endif %}

  <!-- Formulario para agregar proyecciones manuales (colapsable) -->
  {% if selected_forecast.status == "Draft" %}
  <div class="collapse p-4 border-bottom bg-light" id="newEntryForm">
    <h6 class="fw-bold mb-3">Nueva Proyección Manual</h6>
    <form method="POST" action="{{ url_for('bancos.cash_forecast_entry_add', forecast_id=selected_forecast.id, next=request.full_path) }}" class="row g-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="col-md-3">
        <label for="type" class="form-label small fw-bold">Tipo</label>
        <select name="type" id="type" class="form-select form-select-sm" required>
          <option value="Income">Ingreso (+)</option>
          <option value="Expense">Egreso (-)</option>
        </select>
      </div>

      <div class="col-md-3">
        <label for="concept" class="form-label small fw-bold">Concepto</label>
        <input type="text" name="concept" id="concept" class="form-control form-control-sm" placeholder="Ej: Nómina, Préstamo, Impuestos" required>
      </div>

      <div class="col-md-2">
        <label for="currency" class="form-label small fw-bold">Moneda</label>
        <select name="currency" id="currency" class="form-select form-select-sm" required>
          {% for code, name in currencies %}
          <option value="{{ code }}" {% if code == selected_forecast.currency %}selected{% endif %}>{{ code }} - {{ name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="col-md-2">
        <label for="amount" class="form-label small fw-bold">Monto</label>
        <input type="number" step="0.01" name="amount" id="amount" class="form-control form-control-sm" placeholder="0.00" required>
      </div>

      <div class="col-md-2">
        <label for="estimated_date" class="form-label small fw-bold">Fecha Estimada</label>
        <input type="date" name="estimated_date" id="estimated_date" class="form-control form-control-sm" required>
      </div>

      <div class="col-12">
        <label for="notes" class="form-label small fw-bold">Notas / Observaciones</label>
        <textarea name="notes" id="notes" class="form-control form-control-sm" rows="2" placeholder="Notas adicionales..."></textarea>
      </div>

      <div class="col-12 d-flex justify-content-end gap-2">
        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#newEntryForm">
          Cancelar
        </button>
        <button type="submit" class="btn btn-sm btn-primary">
          <i class="bi bi-plus-circle me-1"></i>Guardar Proyección
        </button>
      </div>
    </form>
  </div>
  {% endif %}

  <!-- Listado de Proyecciones Manuales -->
  <div class="table-responsive">
    <table class="ca-table text-nowrap align-middle">
      <caption style="display: none;">Proyecciones manuales.</caption>
      <thead class="table-light">
        <tr>
          <th scope="col">Fecha Estimada</th>
          <th scope="col">Tipo</th>
          <th scope="col">Concepto</th>
          <th scope="col" class="text-end">Monto</th>
          <th scope="col">Moneda</th>
          <th scope="col">Notas</th>
          {% if selected_forecast.status == "Draft" %}
          <th scope="col">Acciones</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for entry in entries %}
        <tr>
          <td>{{ entry.estimated_date.strftime('%d/%m/%Y') }}</td>
          <td>
            {% if entry.type == "Income" %}
            <span class="badge bg-success">Ingreso</span>
            {% else %}
            <span class="badge bg-danger">Egreso</span>
            {% endif %}
          </td>
          <td>{{ entry.concept }}</td>
          <td class="text-end fw-bold">{{ format_money_with_currency(entry.amount, entry.currency) }}</td>
          <td>{{ entry.currency }}</td>
          <td><small class="text-muted">{{ entry.notes or "" }}</small></td>
          {% if selected_forecast.status == "Draft" %}
          <td>
            <div class="d-flex gap-2">
              <!-- Edit Button (triggers modal) -->
              <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" data-bs-toggle="modal" data-bs-target="#editModal-{{ entry.id }}" title="Editar línea">
                <i class="bi bi-pencil"></i>
              </button>

              <!-- Delete Form -->
              <form method="POST" action="{{ url_for('bancos.cash_forecast_entry_delete', forecast_id=selected_forecast.id, entry_id=entry.id, next=request.full_path) }}" onsubmit="return confirm('¿Está seguro de eliminar esta proyección?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm btn-outline-danger py-0 px-2" title="Eliminar línea">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>

            <!-- Edit Modal for this specific line -->
            <div class="modal fade" id="editModal-{{ entry.id }}" tabindex="-1" aria-labelledby="editModalLabel-{{ entry.id }}" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel-{{ entry.id }}"><i class="bi bi-pencil-square"></i> Editar Proyección Manual</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <form method="POST" action="{{ url_for('bancos.cash_forecast_entry_edit', forecast_id=selected_forecast.id, entry_id=entry.id, next=request.full_path) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="modal-body text-start">
                      <div class="mb-3">
                        <label for="type-{{ entry.id }}" class="form-label small fw-bold">Tipo</label>
                        <select name="type" id="type-{{ entry.id }}" class="form-select form-select-sm" required>
                          <option value="Income" {% if entry.type == "Income" %}selected{% endif %}>Ingreso (+)</option>
                          <option value="Expense" {% if entry.type == "Expense" %}selected{% endif %}>Egreso (-)</option>
                        </select>
                      </div>

                      <div class="mb-3">
                        <label for="concept-{{ entry.id }}" class="form-label small fw-bold">Concepto</label>
                        <input type="text" name="concept" id="concept-{{ entry.id }}" class="form-control form-control-sm" value="{{ entry.concept }}" required>
                      </div>

                      <div class="row g-2 mb-3">
                        <div class="col-6">
                          <label for="currency-{{ entry.id }}" class="form-label small fw-bold">Moneda</label>
                          <select name="currency" id="currency-{{ entry.id }}" class="form-select form-select-sm" required>
                            {% for code, name in currencies %}
                            <option value="{{ code }}" {% if code == entry.currency %}selected{% endif %}>{{ code }}</option>
                            {% endfor %}
                          </select>
                        </div>
                        <div class="col-6">
                          <label for="amount-{{ entry.id }}" class="form-label small fw-bold">Monto</label>
                          <input type="number" step="0.01" name="amount" id="amount-{{ entry.id }}" class="form-control form-control-sm" value="{{ entry.amount }}" required>
                        </div>
                      </div>

                      <div class="mb-3">
                        <label for="estimated_date-{{ entry.id }}" class="form-label small fw-bold">Fecha Estimada</label>
                        <input type="date" name="estimated_date" id="estimated_date-{{ entry.id }}" class="form-control form-control-sm" value="{{ entry.estimated_date.isoformat() }}" required>
                      </div>

                      <div class="mb-3">
                        <label for="notes-{{ entry.id }}" class="form-label small fw-bold">Notas / Observaciones</label>
                        <textarea name="notes" id="notes-{{ entry.id }}" class="form-control form-control-sm" rows="2">{{ entry.notes or "" }}</textarea>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                      <button type="submit" class="btn btn-sm btn-primary">Guardar Cambios</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>

          </td>
          {% endif %}
        </tr>
        {% else %}
        <tr>
          <td colspan="{% if selected_forecast.status == 'Draft' %}7{% else %}6{% endif %}" class="text-center text-muted py-4">
            No se han registrado proyecciones manuales para esta versión.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% else %}
<div class="p-5 text-center text-muted bg-white border rounded">
  <i class="bi bi-clipboard-x fs-1 d-block mb-3 text-secondary"></i>
  Seleccione una compañía y un escenario/pronóstico de flujo de caja para gestionar sus entradas manuales.
</div>
{% endif %}

{% endblock %}