{% extends 'base.html.twig' %}
{% set formTitle = (action == 'create' ? 'button.new' : 'button.edit')|trans ~ ' - ' ~ 'catalogos.impuestos'|trans %}
{% block title %}{{ formTitle }}{% endblock %}
{% block page_title %}{{ formTitle }}{% endblock %}
{% block content %}
<div class="page-header mb-6">
  <div class="min-w-0">
    <h2 class="page-title">{{ formTitle }}</h2>
    <p class="page-subtitle">Define la identificacion fiscal, porcentaje y disponibilidad del impuesto.</p>
  </div>
  <div class="page-actions"><a class="btn btn-outline-secondary w-full sm:w-auto" href="{{ path('imp_index') }}">{{ 'button.back'|trans }}</a></div>
</div>
{% set d = data ?? {} %}
<form method="post" action="{{ action == 'create' ? path('imp_create') : path('imp_update', {id: d.id}) }}" class="section-card max-w-5xl" aria-label="Formulario de impuesto">
  <div class="section-card-body">
    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-6">
      <div class="min-w-0 lg:col-span-3">
        <label for="impuesto-nombre" class="form-label">Nombre</label>
        {% set val = old.nombre ?? (data.nombre ?? '') %}
        <input id="impuesto-nombre" class="form-input" type="text" name="nombre" required maxlength="80" value="{{ val }}" {% if errors.nombre is defined %}aria-invalid="true" aria-describedby="impuesto-nombre-error"{% endif %}>
        {% if errors.nombre is defined %}<p id="impuesto-nombre-error" class="form-error" role="alert">{{ errors.nombre }}</p>{% endif %}
      </div>
      <div class="min-w-0 lg:col-span-1">
        <label for="impuesto-porcentaje" class="form-label">Porcentaje</label>
        {% set val = old.porcentaje ?? (data.porcentaje ?? '') %}
        <div class="relative">
          <input id="impuesto-porcentaje" class="form-input pr-10 text-right tabular-nums" type="text" inputmode="decimal" name="porcentaje" required value="{{ val }}" {% if errors.porcentaje is defined %}aria-invalid="true" aria-describedby="impuesto-porcentaje-error"{% endif %}>
          <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-secondary-500" aria-hidden="true">%</span>
        </div>
        {% if errors.porcentaje is defined %}<p id="impuesto-porcentaje-error" class="form-error" role="alert">{{ errors.porcentaje }}</p>{% endif %}
      </div>
      <div class="min-w-0 lg:col-span-2">
        <label for="impuesto-codigo-sat" class="form-label">Código SAT</label>
        {% set val = old.codigo_sat ?? (data.codigo_sat ?? '') %}
        <input id="impuesto-codigo-sat" class="form-input" type="text" name="codigo_sat" maxlength="30" value="{{ val }}">
      </div>
      <div class="md:col-span-2 lg:col-span-6">
        {% set checked = (old.activo is defined ? (old.activo ? true : false) : (data.activo ?? true)) %}
        <div class="flex min-h-11 items-center gap-3 rounded-lg border border-secondary-200 bg-secondary-50 px-4 py-3">
          <input class="h-5 w-5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500" type="checkbox" name="activo" id="chkActivo" {% if checked %}checked{% endif %}>
          <label class="text-sm font-semibold text-secondary-800" for="chkActivo">{{ 'status.active'|trans }}</label>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col-reverse gap-2 border-t border-secondary-200 bg-secondary-50 px-5 py-4 sm:flex-row sm:justify-end">
    <a class="btn btn-outline-secondary w-full sm:w-auto" href="{{ path('imp_index') }}">{{ 'button.cancel'|trans }}</a>
    <button type="submit" class="btn btn-primary w-full sm:w-auto">{{ 'button.save'|trans }}</button>
  </div>
</form>
{% endblock %}