{% extends 'base.html.twig' %}
{% block title %}{{ 'proveedor.title'|trans }}{% endblock %}
{% block page_title %}{{ 'proveedor.title'|trans }}{% 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">{{ 'dashboard.title'|trans }}</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>
          <span class="ml-4 text-sm font-medium text-secondary-500">{{ 'proveedor.title'|trans }}</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-header mb-6">
    <div class="min-w-0">
      <h2 class="page-title">{{ 'proveedor.title'|trans }}</h2>
      <p class="page-subtitle">Catálogo multiempresa de proveedores y deudores</p>
    </div>
    <div class="page-actions">
      <a href="{{ path('proveedor_create') }}" class="btn btn-primary">
        <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="M12 4v16m8-8H4" />
        </svg>
        {{ 'proveedor.new'|trans }}
      </a>

      {% if has_access('proveedor', 'migrar_erp') %}
      <form method="post" action="{{ path('proveedor_erp_sync') }}" class="inline-flex">
        <input type="hidden" name="_token" value="{{ csrf_token('sync_proveedores_erp') }}">
        <button type="submit" class="btn btn-success" data-loading-text="Migrando...">
          <i class="bi bi-database-up" aria-hidden="true"></i>
          <span data-button-label>Migrar proveedores</span>
        </button>
      </form>
      {% endif %}
      {% if has_access('proveedor', 'importar_masivo') %}
      <a href="{{ path('proveedor_import_template') }}" class="btn btn-outline-secondary">
        <i class="bi bi-download" aria-hidden="true"></i>
        Descargar plantilla
      </a>
      <a href="{{ path('proveedor_import') }}" class="btn btn-outline-secondary">
        <i class="bi bi-file-earmark-arrow-up" aria-hidden="true"></i>
        Carga masiva
      </a>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block content %}
  {% set providerFilterQuery = app.request.query.all|filter((value, key) => key != 'page') %}
  {% set providerFilterChips = [] %}

  {% if appliedFilters.q %}
    {% set providerFilterChips = providerFilterChips|merge([{
      label: 'filter.search'|trans,
      value: appliedFilters.q,
      url: path('proveedor_index', providerFilterQuery|filter((value, key) => key != 'q')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if appliedFilters.clasificacion %}
    {% set providerClassificationLabel = appliedFilters.clasificacion %}
    {% for value, label in filters.clasificaciones %}
      {% if appliedFilters.clasificacion == value %}
        {% set providerClassificationLabel = label %}
      {% endif %}
    {% endfor %}
    {% set providerFilterChips = providerFilterChips|merge([{
      label: 'proveedor.clasificacion'|trans,
      value: providerClassificationLabel,
      url: path('proveedor_index', providerFilterQuery|filter((value, key) => key != 'clasificacion')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if appliedFilters.estado != 'activos' %}
    {% set providerStatusLabel = appliedFilters.estado %}
    {% for value, label in filters.estados %}
      {% if appliedFilters.estado == value %}
        {% set providerStatusLabel = label %}
      {% endif %}
    {% endfor %}
    {% set providerFilterChips = providerFilterChips|merge([{
      label: 'filter.status'|trans,
      value: providerStatusLabel,
      url: path('proveedor_index', providerFilterQuery|filter((value, key) => key != 'estado')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% set hasActiveFilters = providerFilterChips|length > 0 %}
  {% set providerClearQuery = providerFilterQuery
    |filter((value, key) => key not in ['q', 'clasificacion', 'estado'])
    |merge({page: 1}) %}
  {# Stats Cards #}
  <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">{{ 'status.active'|trans }}</dt>
              <dd class="text-lg font-semibold text-secondary-900">{{ stats.activos }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">{{ 'status.inactive'|trans }}</dt>
              <dd class="text-lg font-semibold text-secondary-900">{{ stats.inactivos }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Total</dt>
              <dd class="text-lg font-semibold text-secondary-900">{{ stats.total }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Saldo Promedio</dt>
              <dd class="text-lg font-semibold text-secondary-900">Q {{ stats.saldoPromedio|number_format(2, '.', ',') }}</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>

  {# Filters #}
  <div class="section-card mb-6" x-data="{ filtersOpen: false }">
    <div class="section-card-header flex items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h3 class="section-card-title">{{ 'filter.title'|trans }}</h3>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm md:hidden" @click="filtersOpen = !filtersOpen" :aria-expanded="filtersOpen.toString()" aria-controls="provider-filters">
        <span x-show="!filtersOpen">{{ 'common.details'|trans }}</span><span x-show="filtersOpen" x-cloak>{{ 'common.hide_details'|trans }}</span>
        <svg class="h-4 w-4 transition-transform motion-reduce:transition-none" :class="filtersOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    {% include 'components/_filter_chips.html.twig' with {
      chips: providerFilterChips,
      clear_url: path('proveedor_index', providerClearQuery)
    } only %}
    <div id="provider-filters" class="hidden px-4 py-4 md:!block md:px-6" :class="filtersOpen ? '!block' : 'hidden'">
      <form method="get" class="provider-filter-grid">
        <input type="hidden" name="limit" value="{{ pagination.limit }}">
        <div>
          <label for="provider-search" class="form-label">{{ 'filter.search'|trans }}</label>
          <input id="provider-search" class="form-control" type="search" name="q" value="{{ appliedFilters.q }}" placeholder="NIT, razón social, comercial o código">
        </div>
        <div>
          <label for="provider-classification" class="form-label">Clasificación</label>
          <select id="provider-classification" class="form-select" name="clasificacion">
            <option value="">Todas</option>
            {% for value, label in filters.clasificaciones %}
              <option value="{{ value }}" {% if appliedFilters.clasificacion == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="provider-status" class="form-label">{{ 'filter.status'|trans }}</label>
          <select id="provider-status" class="form-select" name="estado">
            {% for value, label in filters.estados %}
              <option value="{{ value }}" {% if appliedFilters.estado == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="flex items-end">
          <button type="submit" class="btn btn-primary w-full">
            <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
            </svg>
            {{ 'button.filter'|trans }}
          </button>
        </div>
      </form>
    </div>
  </div>

  {# Table #}
  <div class="table-card">
    <div class="table-card-header">
      <div class="table-card-title">
        <h3>Listado de proveedores</h3>
        <p>
          Mostrando {{ pagination.start }} a {{ pagination.end }} de {{ pagination.total }} registros
        </p>
      </div>
      <form method="get" class="table-card-controls">
        <input type="hidden" name="q" value="{{ appliedFilters.q }}">
        <input type="hidden" name="estado" value="{{ appliedFilters.estado }}">
        <input type="hidden" name="clasificacion" value="{{ appliedFilters.clasificacion }}">
        <input type="hidden" name="page" value="1">
        <label for="proveedor-limit" class="table-pager-label">{{ 'table.rows_per_page'|trans }}</label>
        <select id="proveedor-limit" name="limit" class="table-pager-select" onchange="this.form.submit()">
          {% for option in pagination.limitOptions %}
            <option value="{{ option }}" {% if pagination.limit == option %}selected{% endif %}>{{ option }}</option>
          {% endfor %}
        </select>
        <span class="table-pager-suffix">por pagina</span>
      </form>
    </div>
    <div class="table-responsive">
      <table class="table table-to-card md:min-w-[680px] lg:min-w-full">
        <caption class="sr-only">Listado de proveedores</caption>
        <thead>
          <tr>
            <th scope="col">NIT</th>
            <th scope="col">{{ 'proveedor.razon_social'|trans }}</th>
            <th scope="col" class="hidden lg:table-cell">{{ 'proveedor.clasificacion'|trans }}</th>
            <th scope="col" class="hidden xl:table-cell">{{ 'proveedor.pais'|trans }}</th>
            <th scope="col" class="hidden lg:table-cell text-center">Retenciones</th>
            <th scope="col" class="text-right table-cell-nowrap">{{ 'table.actions'|trans }}</th>
          </tr>
        </thead>
        <tbody>
        {% if providers %}
          {% for proveedor in providers %}
            <tr>
              <td data-label="NIT" class="whitespace-nowrap text-sm font-semibold text-secondary-900">{{ proveedor.nit }}</td>
              <td data-label="{{ 'proveedor.razon_social'|trans }}" class="min-w-0">
                <div class="max-w-sm truncate text-sm font-medium text-secondary-900" title="{{ proveedor.razonSocial }}">{{ proveedor.razonSocial }}</div>
                {% if proveedor.comercial %}
                  <div class="mt-0.5 max-w-sm truncate text-xs text-secondary-500" title="{{ proveedor.comercial }}">{{ proveedor.comercial }}</div>
                {% endif %}
                {% if proveedor.codigo %}
                  <div class="text-xs text-secondary-500">Código: {{ proveedor.codigo }}</div>
                {% endif %}
                {% if proveedor.telefono %}
                  <div class="text-xs text-secondary-500">
                    <svg class="inline w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                    {{ proveedor.telefono }}
                  </div>
                {% endif %}
              </td>
              <td data-label="{{ 'proveedor.clasificacion'|trans }}" class="hidden whitespace-nowrap lg:table-cell">
                <span class="badge badge-neutral">
                  {{ proveedor.clasificacion }}
                </span>
              </td>
              <td data-label="{{ 'proveedor.pais'|trans }}" class="hidden whitespace-nowrap text-sm text-secondary-500 xl:table-cell">{{ proveedor.pais }}</td>
              <td data-label="Retenciones" class="hidden whitespace-nowrap text-center lg:table-cell">
                {% if proveedor.flags.retencionIsr %}
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">ISR</span>
                {% endif %}
                {% if proveedor.flags.retencionIva %}
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">IVA</span>
                {% endif %}
                {% if not proveedor.flags.retencionIsr and not proveedor.flags.retencionIva %}
                  <span class="text-xs text-secondary-400">—</span>
                {% endif %}
              </td>
              <td data-label="{{ 'table.actions'|trans }}" class="table-cell-nowrap text-right text-sm font-medium">
                <div class="table-actions">
                  <a href="{{ path('proveedor_show', {id: proveedor.id}) }}" class="btn btn-outline-secondary btn-sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    {{ 'button.view'|trans }}
                  </a>
                  <a href="{{ path('proveedor_edit', {id: proveedor.id}) }}" class="btn btn-outline-primary btn-sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    {{ 'button.edit'|trans }}
                  </a>
                </div>
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="6" class="table-card-state text-center max-sm:!block" data-label="">
              <div class="empty-state">
                {% if hasActiveFilters %}
                  <p class="empty-state-title">{{ 'empty.no_results_title'|trans }}</p>
                  <p class="empty-state-copy">{{ 'empty.no_results_copy'|trans }}</p>
                {% else %}
                  <p class="empty-state-title">{{ 'empty.no_data_title'|trans }}</p>
                  <p class="empty-state-copy">{{ 'empty.no_data_copy'|trans }}</p>
                {% endif %}
              </div>
            </td>
          </tr>
        {% endif %}
        </tbody>
      </table>
    </div>
    {% if pagination.pages > 1 %}
      {% set queryBase = app.request.query.all|merge({'limit': pagination.limit}) %}
      <div class="server-table-pager">
        <div>{{ 'table.page_of'|trans({'%page%': pagination.page, '%pages%': pagination.pages}) }}</div>
        <div class="server-table-pager-actions">
          {% if pagination.page > 1 %}
            <a class="server-table-pager-link" href="{{ path('proveedor_index', queryBase|merge({'page': pagination.page - 1})) }}">{{ 'table.previous'|trans }}</a>
          {% else %}
            <span class="server-table-pager-disabled">{{ 'table.previous'|trans }}</span>
          {% endif %}
          {% if pagination.page < pagination.pages %}
            <a class="server-table-pager-link" href="{{ path('proveedor_index', queryBase|merge({'page': pagination.page + 1})) }}">{{ 'table.next'|trans }}</a>
          {% else %}
            <span class="server-table-pager-disabled">{{ 'table.next'|trans }}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}