{% extends 'base.html.twig' %}
{% block title %}{{ 'pago.title'|trans }}{% endblock %}
{% block page_title %}{{ 'pago.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">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>
          <span class="ml-4 text-sm font-medium text-secondary-500">{{ 'pago.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">{{ 'pago.title'|trans }}</h2>
      <p class="page-subtitle">Gestiona pagos a proveedores, saldos disponibles como adelantos y su aplicacion a documentos.</p>
    </div>
    <div class="page-actions">
      <a href="{{ path('pago_new') }}" class="btn btn-primary w-full sm:w-auto">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        {{ 'pago.new'|trans }}
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  {% set canDeletePago = has_access('pago', 'eliminar') %}
  {% set paymentFilterQuery = app.request.query.all|filter((value, key) => key != 'page') %}
  {% set paymentFilterChips = [] %}

  {% if appliedFilters.q %}
    {% set paymentFilterChips = paymentFilterChips|merge([{
      label: 'filter.supplier'|trans,
      value: appliedFilters.q,
      url: path('pago_index', paymentFilterQuery|filter((value, key) => key != 'q')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if appliedFilters.forma %}
    {% set paymentMethodLabel = appliedFilters.forma %}
    {% for id, forma in filters.formas %}
      {% if appliedFilters.forma == id ~ '' %}
        {% set paymentMethodLabel = forma %}
      {% endif %}
    {% endfor %}
    {% set paymentFilterChips = paymentFilterChips|merge([{
      label: 'pago.forma_pago'|trans,
      value: paymentMethodLabel,
      url: path('pago_index', paymentFilterQuery|filter((value, key) => key != 'forma')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if appliedFilters.estado %}
    {% set paymentStatusLabel = appliedFilters.estado %}
    {% set paymentStatusKey = {Disponible: 'status.ready', Parcial: 'status.partial', Aplicado: 'status.paid', Anulado: 'status.voided'}[appliedFilters.estado]|default(null) %}
    {% if paymentStatusKey %}
      {% set paymentStatusLabel = paymentStatusKey|trans %}
    {% endif %}
    {% set paymentFilterChips = paymentFilterChips|merge([{
      label: 'filter.status'|trans,
      value: paymentStatusLabel,
      url: path('pago_index', paymentFilterQuery|filter((value, key) => key != 'estado')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if appliedFilters.fecha %}
    {% set paymentFilterChips = paymentFilterChips|merge([{
      label: 'filter.date'|trans,
      value: appliedFilters.fecha,
      url: path('pago_index', paymentFilterQuery|filter((value, key) => key != 'fecha')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if siteScope.selectedSitioId %}
    {% set paymentSiteLabel = siteScope.selectedSitioId %}
    {% for sitio in filters.sitios %}
      {% if siteScope.selectedSitioId == sitio.id %}
        {% set paymentSiteLabel = sitio.nombre %}
      {% endif %}
    {% endfor %}
    {% set paymentFilterChips = paymentFilterChips|merge([{
      label: 'filter.site'|trans,
      value: paymentSiteLabel,
      url: path('pago_index', paymentFilterQuery|filter((value, key) => key not in ['sitio_id', 'sitio_scope'])|merge({page: 1}))
    }]) %}
  {% endif %}

  {% set activeFilterCount = paymentFilterChips|length %}
  {% set paymentClearQuery = paymentFilterQuery
    |filter((value, key) => key not in ['q', 'forma', 'estado', 'fecha', 'sitio_id', 'sitio_scope'])
    |merge({page: 1}) %}

  <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
    <article class="card-metric">
      <div class="flex items-center gap-4">
          <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg bg-warning-50 text-warning-700">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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="min-w-0 flex-1">
            <dl>
              <dt class="metric-label truncate">Con saldo disponible</dt>
              <dd class="metric-value">{{ resumen.disponibles }}</dd>
            </dl>
          </div>
      </div>
    </article>

    <article class="card-metric">
      <div class="flex items-center gap-4">
          <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg bg-success-50 text-success-700">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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="min-w-0 flex-1">
            <dl>
              <dt class="metric-label truncate">Aplicados</dt>
              <dd class="metric-value">{{ resumen.aplicados }}</dd>
            </dl>
          </div>
      </div>
    </article>

    <article class="card-metric sm:col-span-2 xl:col-span-1">
      <div class="flex items-center gap-4">
          <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-lg bg-info-50 text-info-700">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m3 0h5M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <div class="min-w-0 flex-1">
            <dl>
              <dt class="metric-label truncate">Monto semanal</dt>
              <dd class="metric-value">{{ resumen.montoSemana }}</dd>
            </dl>
          </div>
      </div>
    </article>
  </div>

  <section class="section-card mb-6" x-data="{ filtersOpen: {{ activeFilterCount > 0 ? 'true' : 'window.innerWidth >= 768' }} }">
    <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>
      <div class="flex items-center gap-2">
        <button type="button" class="btn btn-ghost btn-icon md:hidden" @click="filtersOpen = !filtersOpen" :aria-expanded="filtersOpen.toString()" aria-controls="pago-filters" aria-label="{{ 'filter.toggle'|trans }}">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h18M6 10h12M10 16h4" /></svg>
        </button>
      </div>
    </div>
    {% include 'components/_filter_chips.html.twig' with {
      chips: paymentFilterChips,
      clear_url: path('pago_index', paymentClearQuery)
    } only %}
    <div id="pago-filters" class="section-card-body" x-show="filtersOpen" x-cloak>
      <form method="get" class="payments-filter-grid" aria-label="{{ 'filter.title'|trans }}">
        <div>
          <label for="pago-filter-q" class="form-label">{{ 'filter.supplier'|trans }}</label>
          <input id="pago-filter-q" type="search" name="q" value="{{ appliedFilters.q }}" placeholder="Nombre, NIT o referencia" class="form-input">
        </div>
        <div>
          <label for="pago-filter-forma" class="form-label">{{ 'pago.forma_pago'|trans }}</label>
          <select id="pago-filter-forma" name="forma" class="form-select">
            <option value="">Todas</option>
            {% for id, forma in filters.formas %}
              <option value="{{ id }}" {% if appliedFilters.forma == id ~ '' %}selected{% endif %}>{{ forma }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="pago-filter-estado" class="form-label">{{ 'filter.status'|trans }}</label>
          <select id="pago-filter-estado" name="estado" class="form-select">
            <option value="">{{ 'filter.all'|trans }}</option>
            {% for est in filters.estatus %}
              {% set paymentStatusKey = {Disponible: 'status.ready', Parcial: 'status.partial', Aplicado: 'status.paid', Anulado: 'status.voided'}[est]|default(null) %}
              <option value="{{ est }}" {% if appliedFilters.estado == est %}selected{% endif %}>{{ paymentStatusKey ? paymentStatusKey|trans : est }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="pago-filter-fecha" class="form-label">{{ 'filter.date'|trans }}</label>
          <input id="pago-filter-fecha" type="date" name="fecha" value="{{ appliedFilters.fecha }}" class="form-input">
        </div>
        <div>
          <label for="pago-filter-sitio" class="form-label">{{ 'filter.site'|trans }}</label>
          <select id="pago-filter-sitio" name="sitio_id" class="form-select" onchange="document.getElementById('pago_sitio_scope').value = this.value ? 'sitio' : 'todos'">
            <option value="">{{ 'filter.all_authorized'|trans }}</option>
            {% for sitio in filters.sitios %}
              <option value="{{ sitio.id }}" {% if siteScope.selectedSitioId == sitio.id %}selected{% endif %}>{{ sitio.nombre }}</option>
            {% endfor %}
          </select>
          <input type="hidden" id="pago_sitio_scope" name="sitio_scope" value="{{ siteScope.modo }}">
        </div>
        <div class="flex items-end">
          <button type="submit" class="btn btn-primary w-full">
            {{ 'button.filter'|trans }}
          </button>
        </div>
      </form>
    </div>
  </section>

  <div class="table-card" data-void-url-template="{{ path('pago_void', {id: '__ID__'}) }}" data-delete-url-template="{{ path('pago_delete', {id: '__ID__'}) }}">
    <div class="table-responsive">
      <table class="table table-to-card" aria-label="Listado de pagos">
        <thead>
          <tr>
            <th scope="col">Codigo</th>
            <th scope="col">{{ 'pago.proveedor'|trans }}</th>
            <th scope="col" class="hidden xl:table-cell">Sitio/Bodega</th>
            <th scope="col" class="hidden 2xl:table-cell">Serie y Número</th>
            <th scope="col">{{ 'filter.date'|trans }}</th>
            <th scope="col" class="text-right">{{ 'table_columns.amount'|trans }}</th>
            <th scope="col" class="hidden text-right lg:table-cell">Aplicado</th>
            <th scope="col" class="text-right">Disponible</th>
            <th scope="col" class="hidden xl:table-cell">Forma</th>
            <th scope="col">{{ 'table_columns.status'|trans }}</th>
            <th scope="col" class="relative">
              <span class="sr-only">{{ 'table.actions'|trans }}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {% for pago in pagos %}
            <tr>
              <td data-label="Codigo" class="table-cell-nowrap font-semibold">{{ pago.codigo }}</td>
              <td data-label="{{ 'pago.proveedor'|trans }}">
                <div class="line-clamp-2 font-medium" title="{{ pago.proveedor }}">{{ pago.proveedor }}</div>
                {% if pago.cuenta or pago.referencia %}
                  <div class="mt-1 text-xs text-secondary-500">
                    {% if pago.cuenta %}{{ pago.cuenta }}{% endif %}{% if pago.cuenta and pago.referencia %} | {% endif %}{% if pago.referencia %}Ref. {{ pago.referencia }}{% endif %}
                  </div>
                {% endif %}
              </td>
              <td data-label="{{ 'filter.site'|trans }}" class="hidden table-cell-muted xl:table-cell">{{ pago.sitio }}</td>
              <td data-label="Serie y numero" class="hidden 2xl:table-cell">
                {% if pago.documentos|length > 0 %}
                  {{ pago.documentos|join(', ') }}
                {% else %}
                  -
                {% endif %}
              </td>
              <td data-label="{{ 'filter.date'|trans }}" class="table-cell-nowrap table-cell-muted">{{ pago.fecha }}</td>
              <td data-label="{{ 'table_columns.amount'|trans }}" class="table-cell-nowrap text-right font-semibold tabular-nums">{{ pago.monto }}</td>
              <td data-label="Aplicado" class="hidden table-cell-nowrap text-right tabular-nums lg:table-cell">{{ pago.aplicado }}</td>
              <td data-label="Disponible" class="table-cell-nowrap text-right font-semibold tabular-nums {{ pago.disponibleMonto > 0.01 and pago.estado != 'Anulado' ? 'text-warning-700' : 'text-secondary-700' }}">{{ pago.disponible }}</td>
              <td data-label="{{ 'pago.forma_pago'|trans }}" class="hidden table-cell-muted xl:table-cell">{{ pago.forma }}</td>
              <td data-label="{{ 'table_columns.status'|trans }}" class="table-cell-nowrap">
                {% if pago.estado == 'Aplicado' %}
                  <span class="badge badge-success">{{ 'status.paid'|trans }}</span>
                {% elseif pago.estado == 'Parcial' %}
                  <span class="badge badge-warning">{{ 'status.partial'|trans }}</span>
                {% elseif pago.estado == 'Disponible' %}
                  <span class="badge badge-info">{{ 'status.ready'|trans }}</span>
                {% elseif pago.estado == 'Anulado' %}
                  <span class="badge badge-danger">{{ 'status.voided'|trans }}</span>
                {% else %}
                  <span class="badge badge-danger">{{ pago.estado }}</span>
                {% endif %}
              </td>
              <td data-label="{{ 'table.actions'|trans }}" class="table-actions text-right sm:table-cell">
                <div x-data="{ open: false }" @keydown.escape.stop="open = false; $refs.moreButton.focus()" @click.outside="open = false">
                  <div class="flex flex-wrap items-center justify-end gap-2 [&_a]:min-h-10 [&_button]:min-h-10">
                    {% include 'components/_voucher_widget.html.twig' with {mode: 'compact', voucher: pago.voucher, pago: pago} only %}
                    {% set hasMoreActions = pago.tieneDisponible or pago.esCheque or pago.esTransferencia or pago.estado != 'Anulado' or canDeletePago %}
                    {% if hasMoreActions %}
                      <button x-ref="moreButton" type="button" class="btn btn-outline-secondary btn-sm" @click="open = !open" :aria-expanded="open.toString()" aria-controls="pago-actions-{{ pago.id }}">{{ 'table.more_actions'|trans }}</button>
                    {% endif %}
                  </div>
                  {% if hasMoreActions %}
                    <div id="pago-actions-{{ pago.id }}" x-show="open" x-cloak class="mt-2 ml-auto flex min-w-48 flex-col gap-1 rounded-lg border border-secondary-200 bg-white p-2 text-left shadow-soft" role="menu">
                      {% if pago.tieneDisponible %}
                        <a role="menuitem" href="{{ path('pago_aplicar', {id: pago.id}) }}" class="btn btn-ghost btn-sm justify-start text-primary-700">{{ 'button.apply'|trans }}</a>
                      {% endif %}
                      {% if pago.esCheque %}
                        {% if pago.cheque %}
                          <a role="menuitem" href="{{ path('pago_cheque_show', {id: pago.cheque.id}) }}" class="btn btn-ghost btn-sm justify-start">Cheque {{ pago.cheque.numero }}</a>
                        {% elseif pago.estado != 'Anulado' %}
                          <a role="menuitem" href="{{ path('pago_cheque_create', {id: pago.id}) }}" class="btn btn-ghost btn-sm justify-start">Crear cheque</a>
                        {% endif %}
                      {% endif %}
                      {% if pago.esTransferencia %}
                        {% if pago.transferencia %}
                          <a role="menuitem" href="{{ path('pago_transferencia_show', {id: pago.transferencia.id}) }}" class="btn btn-ghost btn-sm justify-start">Transferencia</a>
                        {% elseif pago.estado != 'Anulado' %}
                          <a role="menuitem" href="{{ path('pago_transferencia_create', {id: pago.id}) }}" class="btn btn-ghost btn-sm justify-start">Registrar transferencia</a>
                        {% endif %}
                      {% endif %}
                      {% if pago.estado != 'Anulado' %}
                        <button role="menuitem" type="button" data-pago-modal="void" data-pago-id="{{ pago.id }}" data-pago-code="{{ pago.codigo|e('html_attr') }}" class="btn btn-ghost btn-sm justify-start text-warning-700">Anular</button>
                      {% endif %}
                      {% if canDeletePago %}
                        <button role="menuitem" type="button" data-pago-modal="delete" data-pago-id="{{ pago.id }}" data-pago-code="{{ pago.codigo|e('html_attr') }}" class="btn btn-ghost btn-sm justify-start text-danger-700">{{ 'button.delete'|trans }}</button>
                      {% endif %}
                    </div>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% else %}
            <tr data-table-empty>
              <td colspan="11" data-label="" class="block px-6 py-12 sm:table-cell">
                <div class="{{ activeFilterCount > 0 ? 'no-results-state' : 'empty-state' }}">
                  <p class="empty-state-title">{{ (activeFilterCount > 0 ? 'empty.no_results_title' : 'empty.no_data_title')|trans }}</p>
                  <p class="empty-state-copy">{{ (activeFilterCount > 0 ? 'empty.no_results_copy' : 'empty.no_data_copy')|trans }}</p>
                  {% if activeFilterCount > 0 %}
                    <div class="ui-state-actions"><a href="{{ path('pago_index') }}" class="btn btn-outline-secondary">{{ 'filter.clear'|trans }}</a></div>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="server-table-pager">
      <div aria-live="polite">Mostrando {{ pagos|length }} de {{ pagination.total }} registros</div>
      <nav class="server-table-pager-actions" aria-label="Paginacion de pagos">
        {% set queryParams = app.request.query.all %}
        {% if pagination.page > 1 %}
          <a rel="prev" href="{{ path('pago_index', queryParams|merge({page: pagination.page - 1})) }}" class="server-table-pager-link">{{ 'table.previous'|trans }}</a>
        {% else %}
          <span class="server-table-pager-disabled" aria-disabled="true">{{ 'table.previous'|trans }}</span>
        {% endif %}
        <span class="table-pager-page">{{ 'table.page_of'|trans({'%page%': pagination.page, '%pages%': pagination.pages}) }}</span>
        {% if pagination.page < pagination.pages %}
          <a rel="next" href="{{ path('pago_index', queryParams|merge({page: pagination.page + 1})) }}" class="server-table-pager-link">{{ 'table.next'|trans }}</a>
        {% else %}
          <span class="server-table-pager-disabled" aria-disabled="true">{{ 'table.next'|trans }}</span>
        {% endif %}
      </nav>
    </div>
  </div>

  <div id="voidModal" class="hidden fixed z-50 inset-0 overflow-y-auto" aria-labelledby="void-modal-title" aria-describedby="void-modal-description" role="dialog" aria-modal="true" tabindex="-1">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" data-modal-close="void"></div>
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
      <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-overlay transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6" data-modal-panel>
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 sm:mx-0 sm:h-10 sm:w-10">
            <svg class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="void-modal-title">
              Anular Pago
            </h3>
            <div class="mt-2">
              <p id="void-modal-description" class="text-sm text-gray-500">
                Estas seguro que deseas anular el pago <strong id="voidPagoCode"></strong>? Esta accion eliminara todas las aplicaciones del pago y restaurara los saldos de los documentos.
              </p>
            </div>
          </div>
        </div>
        <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
          <form id="voidForm" method="POST" class="inline">
            <input type="hidden" name="_token" value="{{ csrf_token('pago_void') }}">
            <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
              Anular
            </button>
          </form>
          <button type="button" data-modal-close="void" class="btn btn-outline-secondary mt-3 w-full sm:mt-0 sm:w-auto">
            Cancelar
          </button>
        </div>
      </div>
    </div>
  </div>

  {% if canDeletePago %}
    <div id="deleteModal" class="hidden fixed z-50 inset-0 overflow-y-auto" aria-labelledby="delete-modal-title" aria-describedby="delete-modal-description" role="dialog" aria-modal="true" tabindex="-1">
      <div class="flex min-h-screen items-center justify-center px-4 py-6 text-center sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" data-modal-close="delete"></div>
        <div class="relative w-full max-w-md overflow-hidden rounded-2xl bg-white text-left shadow-overlay transition-all" data-modal-panel>
          <div class="border-b border-gray-100 px-6 py-5">
            <div class="flex items-start gap-4">
              <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100">
                <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-gray-900" id="delete-modal-title">Eliminar pago</h3>
                <p id="delete-modal-description" class="mt-2 text-sm leading-6 text-gray-500">
                  Vas a eliminar permanentemente el pago <strong id="deletePagoCode" class="text-gray-900"></strong>. Los documentos relacionados recuperaran su saldo pendiente.
                </p>
                <p class="mt-2 text-sm font-medium text-red-600">
                  Esta accion no se puede deshacer.
                </p>
              </div>
            </div>
          </div>

          <form id="deleteForm" method="POST" class="px-6 py-5">
            <input type="hidden" name="_token" value="{{ csrf_token('pago_delete') }}">
            <label for="deleteConfirmationInput" class="block text-sm font-medium text-gray-700">Confirmacion de seguridad</label>
            <p id="delete-confirmation-help" class="mt-1 text-sm text-gray-500">Escribe <strong class="text-gray-900">ELIMINAR</strong> para habilitar la accion.</p>
            <input
              type="text"
              id="deleteConfirmationInput"
              autocomplete="off"
              aria-describedby="delete-confirmation-help"
              class="mt-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-sm uppercase tracking-[0.2em] text-gray-900 focus:border-red-500 focus:ring-red-500"
              placeholder="ELIMINAR"
            >

            <div class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
              <button type="button" data-modal-close="delete" class="btn btn-outline-secondary w-full sm:w-auto">
                Cancelar
              </button>
              <button type="submit" id="deleteConfirmButton" disabled class="inline-flex w-full justify-center rounded-lg border border-transparent px-4 py-2.5 text-sm font-medium text-white transition-colors sm:w-auto disabled:cursor-not-allowed disabled:bg-red-300 enabled:bg-red-600 enabled:hover:bg-red-700">
                Eliminar pago
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% endif %}

  <script>
    const pagosContainer = document.querySelector('[data-void-url-template]');
    const modalFocusSelector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
    let activePagoModal = null;
    let modalReturnFocus = null;

    function buildPagoActionUrl(type, pagoId) {
      if (!pagosContainer) {
        return '';
      }

      const key = type === 'void' ? 'voidUrlTemplate' : 'deleteUrlTemplate';
      const template = pagosContainer.dataset[key] || '';
      return template.replace('__ID__', String(pagoId));
    }

    function openPagoModal(type, pagoId, pagoCode, trigger) {
      const modal = document.getElementById(type === 'void' ? 'voidModal' : 'deleteModal');
      const form = document.getElementById(type === 'void' ? 'voidForm' : 'deleteForm');
      const code = document.getElementById(type === 'void' ? 'voidPagoCode' : 'deletePagoCode');

      if (!modal || !form || !code) {
        return;
      }

      code.textContent = pagoCode;
      form.action = buildPagoActionUrl(type, pagoId);
      if (type === 'delete') {
        const deleteInput = document.getElementById('deleteConfirmationInput');
        if (deleteInput) {
          deleteInput.value = '';
        }
        syncDeleteConfirmation();
      }

      activePagoModal = modal;
      modalReturnFocus = trigger.closest('td')?.querySelector('[x-ref="moreButton"]') || trigger;
      modal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
      window.requestAnimationFrame(() => {
        const firstFocusable = modal.querySelector(modalFocusSelector);
        (firstFocusable || modal).focus();
      });
    }

    function closePagoModal(type) {
      const modal = document.getElementById(type === 'void' ? 'voidModal' : 'deleteModal');
      if (!modal) {
        return;
      }

      modal.classList.add('hidden');
      activePagoModal = null;
      document.body.style.overflow = '';
      if (modalReturnFocus) {
        modalReturnFocus.focus();
        modalReturnFocus = null;
      }
    }

    function syncDeleteConfirmation() {
      const deleteInput = document.getElementById('deleteConfirmationInput');
      const deleteButton = document.getElementById('deleteConfirmButton');

      if (!deleteInput || !deleteButton) {
        return;
      }

      deleteButton.disabled = deleteInput.value.trim().toUpperCase() !== 'ELIMINAR';
    }

    document.querySelectorAll('[data-pago-modal]').forEach((trigger) => {
      trigger.addEventListener('click', () => {
        openPagoModal(trigger.dataset.pagoModal, trigger.dataset.pagoId, trigger.dataset.pagoCode || '', trigger);
      });
    });

    document.querySelectorAll('[data-modal-close]').forEach((trigger) => {
      trigger.addEventListener('click', () => closePagoModal(trigger.dataset.modalClose));
    });

    document.getElementById('deleteConfirmationInput')?.addEventListener('input', syncDeleteConfirmation);

    document.addEventListener('keydown', (event) => {
      if (!activePagoModal) {
        return;
      }

      if (event.key === 'Escape') {
        event.preventDefault();
        closePagoModal(activePagoModal.id === 'voidModal' ? 'void' : 'delete');
        return;
      }

      if (event.key !== 'Tab') {
        return;
      }

      const focusable = Array.from(activePagoModal.querySelectorAll(modalFocusSelector));
      if (!focusable.length) {
        event.preventDefault();
        activePagoModal.focus();
        return;
      }

      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault();
        first.focus();
      }
    });
  </script>
{% endblock %}