{% extends "base.html" %}
{% block title %}{{ 'Editar' if transaccion else 'Nueva' }} transacción{% endblock %}
{% block page_title %}{{ 'Editar' if transaccion else 'Nueva' }} transacción{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header py-3">
        <i class="bi bi-arrow-left-right me-2"></i>
        {{ 'Editar transacción' if transaccion else 'Registrar transacción' }}
      </div>
      <div class="card-body p-4">
        <form method="post">
          <div class="mb-3">
            <label class="form-label">Tipo *</label>
            <div class="d-flex gap-2">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="tipo" id="tipoIngreso" value="ingreso"
                       {% if (transaccion and transaccion.tipo == 'ingreso') or tipo_default == 'ingreso' %}checked{% endif %}>
                <label class="form-check-label text-success fw-semibold" for="tipoIngreso">
                  <i class="bi bi-arrow-up-circle"></i> Ingreso
                </label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="tipo" id="tipoGasto" value="gasto"
                       {% if (transaccion and transaccion.tipo == 'gasto') or tipo_default == 'gasto' %}checked{% endif %}>
                <label class="form-check-label text-danger fw-semibold" for="tipoGasto">
                  <i class="bi bi-arrow-down-circle"></i> Gasto
                </label>
              </div>
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Fecha *</label>
              <input type="date" name="fecha" class="form-control" required
                     value="{{ transaccion.fecha if transaccion else hoy }}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Importe (€) *</label>
              <input type="number" name="importe" class="form-control" step="0.01" min="0.01" required
                     value="{{ transaccion.importe if transaccion else '' }}" placeholder="0.00">
            </div>
            <div class="col-12">
              <label class="form-label">Descripción *</label>
              <input type="text" name="descripcion" class="form-control" required
                     value="{{ transaccion.descripcion if transaccion else '' }}"
                     placeholder="Concepto de la transacción">
            </div>
            <div class="col-md-6">
              <label class="form-label">Categoría</label>
              <select name="categoria_id" class="form-select">
                <option value="">— Sin categoría —</option>
                {% for c in categorias %}
                <option value="{{ c.id }}"
                  {% if transaccion and transaccion.categoria_id == c.id %}selected{% endif %}>
                  {{ c.nombre }} ({{ c.tipo }})
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Método de pago</label>
              <select name="metodo_pago" class="form-select">
                {% for m in ['transferencia', 'tarjeta', 'efectivo', 'domiciliación', 'cheque', 'otro'] %}
                <option value="{{ m }}" {% if transaccion and transaccion.metodo_pago == m %}selected{% endif %}>
                  {{ m|capitalize }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <label class="form-label">Notas</label>
              <textarea name="notas" class="form-control" rows="2"
                        placeholder="Información adicional...">{{ transaccion.notas if transaccion else '' }}</textarea>
            </div>
          </div>

          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>{{ 'Guardar cambios' if transaccion else 'Registrar' }}
            </button>
            <a href="{{ url_for('transacciones.lista') }}" class="btn btn-outline-secondary">Cancelar</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}