{% extends 'base.html.twig' %}
{% block title %}Carga masiva de proveedores{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">Inicio</a></li>
      <li><span class="text-secondary-300">/</span></li>
      <li><a href="{{ path('proveedor_index') }}" class="text-sm font-medium text-secondary-500 hover:text-secondary-700">Proveedores</a></li>
      <li><span class="text-secondary-300">/</span></li>
      <li class="text-sm font-medium text-secondary-500">Carga masiva</li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold text-secondary-900">Carga masiva de proveedores</h2>
      <p class="mt-1 text-sm text-secondary-500">Descarga la plantilla, llena la hoja `proveedores` y vuelve a cargarla para crear o actualizar por NIT.</p>
    </div>
    <div class="mt-4 md:mt-0 flex gap-2">
      <a href="{{ path('proveedor_import_template') }}" class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700">Descargar plantilla</a>
      <a href="{{ path('proveedor_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">Volver</a>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1.1fr)_420px] gap-6">
    <div class="bg-white shadow rounded-lg p-6">
      <h3 class="text-lg font-semibold text-secondary-900">Importar archivo</h3>
      <p class="mt-1 text-sm text-secondary-500">Solo `nit` y `razon_social` son obligatorios. En actualizaciones, las celdas opcionales vacias no borran informacion existente.</p>

      <form method="post" enctype="multipart/form-data" action="{{ path('proveedor_import_store') }}" class="mt-6 space-y-4">
        <input type="hidden" name="_token" value="{{ csrf_token('proveedor_import') }}">
        <div>
          <label for="archivo" class="block text-sm font-medium text-secondary-700 mb-2">Plantilla de proveedores</label>
          <input id="archivo" name="archivo" type="file" accept=".xlsx,.xls,.csv" required class="block w-full text-sm text-secondary-700 border border-secondary-300 rounded-md bg-white file:mr-4 file:px-4 file:py-2 file:border-0 file:bg-primary-600 file:text-white hover:file:bg-primary-700">
        </div>
        <div class="flex justify-end">
          <button type="submit" class="inline-flex items-center px-5 py-2.5 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700">Importar proveedores</button>
        </div>
      </form>
    </div>

    <div class="bg-white shadow rounded-lg p-6">
      <h3 class="text-lg font-semibold text-secondary-900">Columnas de la plantilla</h3>
      <ul class="mt-4 space-y-2 text-sm text-secondary-600">
        <li>`nit` y `razon_social` obligatorios</li>
        <li>`codigo`, `comercial`, `contacto`, `telefono`, `email`, `direccion`</li>
        <li>`pais_iso2` con default `GT`</li>
        <li>`clasificacion_nombre`, `condicion_pago_nombre`, `regimen_fiscal_codigo`</li>
        <li>`saldo_inicial`, `limite_credito`, `activo`</li>
      </ul>
      <p class="mt-4 text-xs text-secondary-500">Si una referencia a catalogo no existe, esa fila se omite y se reporta.</p>
    </div>
  </div>
{% endblock %}