{% extends 'base.html.twig' %}

{% block title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Cuenta Contable{% endblock %}
{% block page_title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Cuenta Contable{% endblock %}

{% block body %}
<div class="max-w-3xl mx-auto">
  <div class="mb-6">
    <a href="{{ path('cuenta_contable_index') }}" class="inline-flex items-center text-primary-600 hover:text-primary-700">
      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      Volver al listado
    </a>
  </div>

  <div class="bg-white rounded-xl shadow-sm border border-secondary-200 p-6">
    <form method="post">
      <div class="space-y-6">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="codigo" class="block text-sm font-medium text-secondary-700 mb-2">Código *</label>
            <input type="text" id="codigo" name="codigo" value="{{ cuenta.codigo }}" required
                   class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono"
                   placeholder="1101">
          </div>

          <div>
            <label for="nivel" class="block text-sm font-medium text-secondary-700 mb-2">Nivel</label>
            <input type="number" id="nivel" name="nivel" value="{{ cuenta.nivel }}" min="1" max="5"
                   class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
          </div>
        </div>

        <div>
          <label for="nombre" class="block text-sm font-medium text-secondary-700 mb-2">Nombre *</label>
          <input type="text" id="nombre" name="nombre" value="{{ cuenta.nombre }}" required
                 class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                 placeholder="Efectivo y Equivalentes">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="tipo" class="block text-sm font-medium text-secondary-700 mb-2">Tipo</label>
            <select id="tipo" name="tipo" class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar...</option>
              <option value="ACTIVO" {{ cuenta.tipo == 'ACTIVO' ? 'selected' : '' }}>Activo</option>
              <option value="PASIVO" {{ cuenta.tipo == 'PASIVO' ? 'selected' : '' }}>Pasivo</option>
              <option value="PATRIMONIO" {{ cuenta.tipo == 'PATRIMONIO' ? 'selected' : '' }}>Patrimonio</option>
              <option value="INGRESO" {{ cuenta.tipo == 'INGRESO' ? 'selected' : '' }}>Ingreso</option>
              <option value="GASTO" {{ cuenta.tipo == 'GASTO' ? 'selected' : '' }}>Gasto</option>
              <option value="COSTOS" {{ cuenta.tipo == 'COSTOS' ? 'selected' : '' }}>Costos</option>
            </select>
          </div>

          <div>
            <label for="cuenta_padre_id" class="block text-sm font-medium text-secondary-700 mb-2">Cuenta Padre</label>
            <select id="cuenta_padre_id" name="cuenta_padre_id" class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
              <option value="">Ninguna (Raíz)</option>
              {% for cp in cuentas_padre %}
                <option value="{{ cp.id }}" {{ cuenta.cuentaPadre and cuenta.cuentaPadre.id == cp.id ? 'selected' : '' }}>
                  {{ cp.codigo }} - {{ cp.nombre }}
                </option>
              {% endfor %}
            </select>
          </div>
        </div>

        <div class="flex items-start">
          <div class="flex items-center h-5">
            <input type="checkbox" id="activo" name="activo" value="1" {{ cuenta.activo ? 'checked' : '' }}
                   class="w-4 h-4 text-primary-600 border-secondary-300 rounded focus:ring-primary-500">
          </div>
          <div class="ml-3">
            <label for="activo" class="text-sm font-medium text-secondary-700">Activo</label>
            <p class="text-xs text-secondary-500">Disponible para usar en asientos contables</p>
          </div>
        </div>
      </div>

      <div class="flex items-center justify-end gap-3 mt-6 pt-6 border-t border-secondary-200">
        <a href="{{ path('cuenta_contable_index') }}" class="px-4 py-2 text-secondary-700 bg-secondary-100 hover:bg-secondary-200 rounded-lg font-medium transition-colors">
          Cancelar
        </a>
        <button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors">
          {{ action == 'new' ? 'Crear' : 'Actualizar' }} Cuenta
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}