{% extends 'base.html.twig' %}
{% block title %}Nuevo Pago{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li>
        <div>
          <a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">
            <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
            <span class="sr-only">Inicio</span>
          </a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="{{ path('pago_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Pagos</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <span class="ml-4 text-sm font-medium text-secondary-500">Nuevo</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">
        Registrar Pago
      </h2>
      <p class="mt-1 text-sm text-secondary-500">
        Complete la informacion del pago realizado al proveedor
      </p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
      <a href="{{ path('pago_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
        Cancelar
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="bg-white shadow rounded-lg">
    <form action="{{ path('pago_store') }}" method="post" class="px-6 py-6">
      <div class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          {# Proveedor #}
          <div>
            <label for="proveedor_id" class="block text-sm font-medium text-secondary-700 mb-2">
              Proveedor <span class="text-red-500">*</span>
            </label>
            <select id="proveedor_id" name="proveedor_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar proveedor...</option>
              {% for proveedor in proveedores %}
                <option value="{{ proveedor.id }}">{{ proveedor.razonSocial }} - {{ proveedor.nit }}</option>
              {% endfor %}
            </select>
          </div>

          {# Moneda #}
          <div>
            <label for="moneda_id" class="block text-sm font-medium text-secondary-700 mb-2">
              Moneda <span class="text-red-500">*</span>
            </label>
            <select id="moneda_id" data-base-codigo="{{ monedaBase.codigo ?? 'GTQ' }}" name="moneda_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              {% for moneda in monedas %}
                <option value="{{ moneda.id }}" data-codigo="{{ moneda.codigo }}" {{ monedaBase ? (monedaBase.codigo == moneda.codigo ? 'selected' : '') : (moneda.codigo == 'GTQ' ? 'selected' : '') }}>{{ moneda.codigo }} - {{ moneda.nombre }}</option>
              {% endfor %}
            </select>
          </div>

          {# Forma de Pago #}
          <div>
            <label for="forma_pago" class="block text-sm font-medium text-secondary-700 mb-2">
              Forma de Pago <span class="text-red-500">*</span>
            </label>
            <select id="forma_pago" name="forma_pago" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar...</option>
              {% for id, nombre in formas %}
                <option value="{{ id }}">{{ nombre }}</option>
              {% endfor %}
            </select>
          </div>

          {# Fecha de Pago #}
          <div>
            <label for="fecha_pago" class="block text-sm font-medium text-secondary-700 mb-2">
              Fecha de Pago <span class="text-red-500">*</span>
            </label>
            <input type="date" id="fecha_pago" name="fecha_pago" required value="{{ 'now'|date('Y-m-d') }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
          </div>

          {# Total Pagado #}
          <div>
            <label for="total_pagado" class="block text-sm font-medium text-secondary-700 mb-2">
              Monto Pagado <span class="text-red-500">*</span>
            </label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <span id="pago-currency-code" class="text-secondary-500 sm:text-sm" data-role="currency-code">Q</span>
              </div>
              <input type="number" id="total_pagado" name="total_pagado" required step="0.01" min="0.01" class="w-full pl-8 pr-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
            </div>
          </div>

          {# Tipo de Cambio #}
          <div>
            <label for="tipo_cambio" class="block text-sm font-medium text-secondary-700 mb-2">
              Tipo de Cambio
            </label>
            <input type="number" id="tipo_cambio" name="tipo_cambio" step="0.000001" value="1.000000" min="0" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
            <p id="pago-conversion-note" class="mt-1 text-xs text-secondary-500 hidden"></p>
            <p class="mt-1 text-xs text-secondary-500">Dejar en 1 si la moneda es local</p>
          </div>

          {# Referencia #}
          <div class="md:col-span-2">
            <label for="referencia" class="block text-sm font-medium text-secondary-700 mb-2">
              Referencia / Numero de Transaccion
            </label>
            <input type="text" id="referencia" name="referencia" maxlength="50" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Ej: Cheque #1234, Transfer. ABC123">
          </div>

          {# Observaciones #}
          <div class="md:col-span-2">
            <label for="observaciones" class="block text-sm font-medium text-secondary-700 mb-2">
              Observaciones
            </label>
            <textarea id="observaciones" name="observaciones" rows="3" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Observaciones adicionales..."></textarea>
          </div>
        </div>
      </div>

      <div class="mt-6 flex justify-end space-x-3">
        <a href="{{ path('pago_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">
          Cancelar
        </a>
        <button type="submit" class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
          Registrar Pago
        </button>
      </div>
    </form>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const monedaSelect = document.getElementById('moneda_id');
      const codeSpan = document.getElementById('pago-currency-code');
      const note = document.getElementById('pago-conversion-note');
      const baseCodigo = monedaSelect?.dataset?.baseCodigo || 'GTQ';
      const update = () => {
        const selected = monedaSelect?.options[monedaSelect.selectedIndex];
        const codigo = selected?.dataset?.codigo || baseCodigo;
        if (codeSpan) codeSpan.textContent = codigo;
        if (note) {
          if (codigo === baseCodigo) {
            note.classList.add('hidden');
          } else {
            note.textContent = `Se convertira a ${baseCodigo} al guardar.`;
            note.classList.remove('hidden');
          }
        }
      };
      monedaSelect?.addEventListener('change', update);
      update();
    });
  </script>
{% endblock %}