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

{% block title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Clasificación{% endblock %}
{% block page_title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Clasificación de Proveedor{% endblock %}

{% block body %}
<div class="max-w-3xl mx-auto">
  <div class="mb-6">
    <a href="{{ path('clasificacion_proveedor_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">
        {# Código #}
        <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="{{ clasificacion.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"
                 placeholder="NAC, EXT, etc.">
        </div>

        {# Nombre #}
        <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="{{ clasificacion.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="Nacional, Extranjero, etc.">
        </div>

        {# Checkboxes Section #}
        <div class="border-t border-secondary-200 pt-6">
          <h3 class="text-sm font-medium text-secondary-900 mb-4">Configuración de Retenciones</h3>

          <div class="space-y-3">
            {# Es Extranjero #}
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input type="checkbox" id="es_extranjero" name="es_extranjero" value="1"
                       {{ clasificacion.esExtranjero ? 'checked' : '' }}
                       class="w-4 h-4 text-primary-600 border-secondary-300 rounded focus:ring-primary-500">
              </div>
              <div class="ml-3">
                <label for="es_extranjero" class="text-sm font-medium text-secondary-700">Es Extranjero</label>
                <p class="text-xs text-secondary-500">Proveedor fuera de Guatemala</p>
              </div>
            </div>

            {# Sujeto Retención ISR Definitiva #}
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input type="checkbox" id="sujeto_retencion_isr_definitiva" name="sujeto_retencion_isr_definitiva" value="1"
                       {{ clasificacion.sujetoRetencionIsrDefinitiva ? 'checked' : '' }}
                       class="w-4 h-4 text-primary-600 border-secondary-300 rounded focus:ring-primary-500">
              </div>
              <div class="ml-3">
                <label for="sujeto_retencion_isr_definitiva" class="text-sm font-medium text-secondary-700">Sujeto a Retención ISR Definitiva</label>
                <p class="text-xs text-secondary-500">Aplica retención del 5% o 7% según SAT</p>
              </div>
            </div>

            {# Aplica Retención No Residente #}
            <div class="flex items-start">
              <div class="flex items-center h-5">
                <input type="checkbox" id="aplica_retencion_no_residente" name="aplica_retencion_no_residente" value="1"
                       {{ clasificacion.aplicaRetencionNoResidente ? 'checked' : '' }}
                       class="w-4 h-4 text-primary-600 border-secondary-300 rounded focus:ring-primary-500">
              </div>
              <div class="ml-3">
                <label for="aplica_retencion_no_residente" class="text-sm font-medium text-secondary-700">Aplica Retención No Residente</label>
                <p class="text-xs text-secondary-500">Retención especial para no residentes</p>
              </div>
            </div>

            {# Activo #}
            <div class="flex items-start border-t border-secondary-200 pt-3">
              <div class="flex items-center h-5">
                <input type="checkbox" id="activo" name="activo" value="1" {{ clasificacion.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 proveedores</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {# Buttons #}
      <div class="flex items-center justify-end gap-3 mt-6 pt-6 border-t border-secondary-200">
        <a href="{{ path('clasificacion_proveedor_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' }} Clasificación
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}