{% 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="{{ _('Cerrar') }}"></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 %}