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

{% block title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Tasa IDP{% endblock %}
{% block page_title %}{{ action == 'new' ? 'Nueva' : 'Editar' }} Tasa IDP{% endblock %}

{% block body %}
<div class="max-w-2xl mx-auto">
  <div class="mb-6">
    <a href="{{ path('idp_tasa_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>
          <label for="tipo" class="block text-sm font-medium text-secondary-700 mb-2">Tipo de Combustible *</label>
          <select id="tipo" name="tipo" 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">
            <option value="">Seleccionar...</option>
            <option value="SUPER" {{ tasa.tipo == 'SUPER' ? 'selected' : '' }}>Gasolina Super</option>
            <option value="REGULAR" {{ tasa.tipo == 'REGULAR' ? 'selected' : '' }}>Gasolina Regular</option>
            <option value="DIESEL" {{ tasa.tipo == 'DIESEL' ? 'selected' : '' }}>Diésel</option>
          </select>
        </div>

        <div>
          <label for="tasa_por_galon" class="block text-sm font-medium text-secondary-700 mb-2">Tasa por Galón (Q) *</label>
          <input type="number" id="tasa_por_galon" name="tasa_por_galon" value="{{ tasa.tasaPorGalon }}"
                 step="0.000001" min="0" 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="0.000000">
          <p class="mt-1 text-xs text-secondary-500">Monto en quetzales con hasta 6 decimales</p>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="vigente_desde" class="block text-sm font-medium text-secondary-700 mb-2">Vigente Desde *</label>
            <input type="date" id="vigente_desde" name="vigente_desde"
                   value="{{ tasa.vigenteDesde ? tasa.vigenteDesde|date('Y-m-d') : '' }}" 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">
          </div>

          <div>
            <label for="vigente_hasta" class="block text-sm font-medium text-secondary-700 mb-2">Vigente Hasta</label>
            <input type="date" id="vigente_hasta" name="vigente_hasta"
                   value="{{ tasa.vigenteHasta ? tasa.vigenteHasta|date('Y-m-d') : '' }}"
                   class="w-full px-3 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            <p class="mt-1 text-xs text-secondary-500">Dejar vacío si no tiene límite</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('idp_tasa_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' }} Tasa
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}