@extends('layouts.enterprise')

@section('title', 'Ver movimientos')

@section('content')
  @php
    $isAccountant = request()->routeIs('accountant.*');
    $indexRoute = $isAccountant ? route('accountant.incomes.index') : route('admin.incomes.index');
    $linkRouteName = $isAccountant ? 'accountant.incomes.link' : 'admin.incomes.link';
    $notLinkableRouteName = $isAccountant ? 'accountant.incomes.not_linkable' : 'admin.incomes.not_linkable';
    $clientRouteName = $isAccountant ? 'accountant.incomes.client' : 'admin.incomes.client';
    $classificationRouteName = $isAccountant ? 'accountant.incomes.classification' : 'admin.incomes.classification';
    $classificationOptions = $classificationOptions ?? \App\Models\FinancialMovement::classificationOptions();
    $taxDetailOptions = $taxDetailOptions ?? \App\Models\FinancialMovement::taxDetailOptions();
    $defaultClassification = 'all';
    $hasActiveFilters = (($filters['q'] ?? '') !== '')
      || (($filters['type'] ?? 'all') !== 'all')
      || (($filters['linked'] ?? 'all') !== 'all')
      || (($filters['classification'] ?? $defaultClassification) !== $defaultClassification)
      || (($filters['request_id'] ?? null) !== null)
      || (($filters['client_id'] ?? null) !== null)
      || (($filters['request_q'] ?? '') !== '')
      || !empty($filters['date_from'] ?? null)
      || !empty($filters['date_to'] ?? null);

    $freeGeneratedInvoices = collect($generatedInvoiceCatalog ?? [])->filter(function ($entry) {
      return !($entry['is_linked'] ?? false);
    });

    $freeGeneratedInvoicesByAmount = $freeGeneratedInvoices->groupBy(function ($entry) {
      return number_format((float) ($entry['total'] ?? 0), 2, '.', '');
    });

    $classificationBadgeClassMap = [
      \App\Models\FinancialMovement::CLASSIFICATION_NORMAL => 'badge-normal',
      \App\Models\FinancialMovement::CLASSIFICATION_PROVIDER_REQUESTS => 'badge-provider',
      \App\Models\FinancialMovement::CLASSIFICATION_TAXES => 'badge-taxes',
      \App\Models\FinancialMovement::CLASSIFICATION_PAYROLL => 'badge-payroll',
      \App\Models\FinancialMovement::CLASSIFICATION_BANK => 'badge-bank',
      \App\Models\FinancialMovement::CLASSIFICATION_OTHERS => 'badge-other',
      \App\Models\FinancialMovement::CLASSIFICATION_NOT_LINKABLE => 'badge-not-linkable',
    ];
  @endphp

  <div class="bank-screen">
    <h1 class="page-title">Ver movimientos</h1>
    <p class="subtle">Ingresos relacionados con prefacturas y egresos relacionados con solicitudes.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif

    @if($errors->any())
      <div class="error">
        <ul>
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div id="ajax-feedback" class="notice ajax-feedback" hidden></div>

    <sl-details class="filters-collapse" @if($hasActiveFilters) open @endif>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Filtros</span>
        @if($hasActiveFilters)
          <span class="badge">Activos</span>
        @endif
      </div>

      <form method="GET" action="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--eight">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Concepto o codigo">
          </div>

          <div class="field">
            <label>Tipo</label>
            <select name="type">
              <option value="all" @selected(($filters['type'] ?? 'all') === 'all')>Todos</option>
              <option value="income" @selected(($filters['type'] ?? 'all') === 'income')>Ingresos</option>
              <option value="expense" @selected(($filters['type'] ?? 'all') === 'expense')>Egresos</option>
            </select>
          </div>

          <div class="field">
            <label>Relacion</label>
            <select name="linked">
              <option value="all" @selected(($filters['linked'] ?? 'all') === 'all')>Todos</option>
              <option value="linked" @selected(($filters['linked'] ?? 'all') === 'linked')>Relacionados</option>
              <option value="unlinked" @selected(($filters['linked'] ?? 'all') === 'unlinked')>Sin relacionar</option>
              @if($hasNotLinkableColumn ?? false)
                <option value="not_linkable" @selected(($filters['linked'] ?? 'all') === 'not_linkable')>No relacionable</option>
              @endif
            </select>
          </div>

          @if($hasClassificationColumn ?? false)
            <div class="field">
              <label>Categoria</label>
              <select name="classification">
                <option value="all" @selected(($filters['classification'] ?? $defaultClassification) === 'all')>Todas</option>
                @foreach($classificationOptions as $classificationValue => $classificationLabel)
                  @continue($classificationValue === \App\Models\FinancialMovement::CLASSIFICATION_NOT_LINKABLE)
                  <option value="{{ $classificationValue }}" @selected(($filters['classification'] ?? $defaultClassification) === $classificationValue)>
                    {{ $classificationLabel }}
                  </option>
                @endforeach
              </select>
            </div>
          @endif

          <div class="field">
            <label>Proyecto / JN / RC</label>
            <input type="text" name="request_q" value="{{ $filters['request_q'] ?? '' }}" placeholder="Buscar solicitud relacionada">
          </div>

          <div class="field">
            <label>Cliente</label>
            <select name="client_id">
              <option value="">Todos</option>
              @foreach($clientOptions as $clientOption)
                <option value="{{ $clientOption->id }}" @selected((int) ($filters['client_id'] ?? 0) === (int) $clientOption->id)>
                  {{ $clientOption->name }}{{ $clientOption->rfc ? ' ('.$clientOption->rfc.')' : '' }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="field">
            <label>Fecha desde</label>
            <input type="date" name="date_from" value="{{ $filters['date_from'] ?? '' }}">
          </div>

          <div class="field">
            <label>Fecha hasta</label>
            <input type="date" name="date_to" value="{{ $filters['date_to'] ?? '' }}">
          </div>
        </div>

        @if(($filters['request_id'] ?? null) !== null)
          <input type="hidden" name="request_id" value="{{ $filters['request_id'] }}">
        @endif

        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          <span class="badge">Resultados: {{ $movements->total() }}</span>
          @if(($filters['request_id'] ?? null) !== null)
            <span class="badge">Solicitud #{{ $filters['request_id'] }}</span>
          @endif
        </div>
      </form>
    </sl-details>

    <div class="totals-row">
      <span class="badge">Total ingresos: ${{ number_format($incomesTotal, 2) }}</span>
      <span class="badge">Total egresos: ${{ number_format($expensesTotal, 2) }}</span>
    </div>

    <datalist id="request-options">
      <option value="Sin relacionar" data-id=""></option>
      @foreach(($pipefyRequestCatalog ?? []) as $option)
        <option value="{{ $option['display'] }}" data-id="{{ $option['id'] }}"></option>
      @endforeach
    </datalist>

    <div class="movements-table-wrap">
      <table class="movements-table">
        <thead>
          <tr>
            <th>Fecha</th>
            <th>Tipo</th>
            <th>Concepto</th>
            <th>Depositos</th>
            <th>Retiros</th>
            <th>Cod. Trans.</th>
            <th>Cliente</th>
            <th>Proyecto / JN / RC</th>
            <th>Relacion y categoria</th>
          </tr>
        </thead>
        <tbody>
          @forelse($movements as $movement)
            @php
              $isIncome = $movement->movement_type === \App\Models\FinancialMovement::TYPE_INCOME;
              $linkedRequest = $movement->pipefyRequest;
              $linkedGeneratedInvoice = $movement->generatedInvoice;
              $isLockedLink = $movement->pipefy_request_id !== null || ($movement->generated_invoice_id ?? null) !== null;
              $hasExplicitClassification = is_string($movement->classification)
                ? trim($movement->classification) !== ''
                : $movement->classification !== null;
              $movementClassification = $movement->classification ?: \App\Models\FinancialMovement::CLASSIFICATION_NORMAL;
              $classificationLabel = $hasExplicitClassification
                ? \App\Models\FinancialMovement::classificationLabel($movementClassification)
                : 'Sin categoria';
              $classificationBadgeClass = $hasExplicitClassification
                ? ($classificationBadgeClassMap[$movementClassification] ?? 'badge-normal')
                : 'badge-unset';
              $requestDisplay = $linkedRequest
                ? (($linkedRequest->project_name ?: 'Sin PROJECT NAME').' | JN: '.($linkedRequest->title ?: '-').' | RC: '.($linkedRequest->rc_list ?: '-').' | ID:'.$linkedRequest->id)
                : '';
              $amountKey = number_format((float) $movement->amount, 2, '.', '');
              $matchingGeneratedInvoices = $isIncome
                ? ($freeGeneratedInvoicesByAmount->get($amountKey, collect()))
                : collect();
              $isNotLinkable = (bool) ($movement->is_not_linkable ?? false);
              $taxDetail = $movement->tax_detail ?? null;
              $taxDetailLabel = $taxDetail ? \App\Models\FinancialMovement::taxDetailLabel($taxDetail) : null;
            @endphp
            <tr data-movement-id="{{ $movement->id }}">
              <td>{{ $movement->movement_date?->format('Y-m-d') }}</td>
              <td>
                <span class="badge {{ $isIncome ? 'badge-income' : 'badge-expense' }}">
                  {{ $isIncome ? 'Ingreso' : 'Egreso' }}
                </span>
              </td>
              <td class="cell-concept">{{ $movement->concept }}</td>
              <td>{{ $isIncome ? '$'.number_format((float) $movement->amount, 2) : '-' }}</td>
              <td>{{ !$isIncome ? '$'.number_format((float) $movement->amount, 2) : '-' }}</td>
              <td>{{ $movement->transaction_code ?: '-' }}</td>
              <td class="js-client-cell">
                @if($movement->client)
                  <div><strong>{{ $movement->client->name }}</strong></div>
                  @if($movement->client->rfc)
                    <small class="subtle cell-subtle">{{ $movement->client->rfc }}</small>
                  @endif
                @else
                  -
                @endif
              </td>
              <td class="cell-request js-request-cell">
                @if($linkedRequest)
                  <div><strong>{{ $linkedRequest->project_name ?: 'Sin PROJECT NAME' }}</strong></div>
                  <div class="subtle cell-subtle">JN: {{ $linkedRequest->title ?: '-' }}</div>
                  <div class="subtle cell-subtle">RC: {{ $linkedRequest->rc_list ?: '-' }}</div>
                @elseif($isNotLinkable)
                  <span class="badge badge-not-linkable">No relacionable (ID 0)</span>
                @else
                  <span class="badge">Sin relacionar</span>
                @endif
              </td>
              <td class="cell-link">
                <div class="js-link-actions">
                  @if(!$isLockedLink)
                    @if($isIncome)
                      <form method="POST" action="{{ route($linkRouteName, $movement) }}" class="link-form link-form--stacked js-ajax-form" data-action-type="link">
                        @csrf
                        <input type="hidden" name="pipefy_request_id" value="">
                        <div class="field field-compact">
                          <label>Prefactura (monto exacto)</label>
                          <select name="generated_invoice_id" @disabled($matchingGeneratedInvoices->isEmpty())>
                            <option value="">Selecciona una prefactura</option>
                            @foreach($matchingGeneratedInvoices as $generatedOption)
                              <option value="{{ $generatedOption['id'] }}">
                                {{ $generatedOption['folio'] }}
                                | ${{ number_format((float) ($generatedOption['total'] ?? 0), 2) }}
                                | {{ $generatedOption['project_name'] ?: 'Sin PROJECT NAME' }}
                                | JN: {{ $generatedOption['request_title'] ?: '-' }}
                                | RC: {{ $generatedOption['request_rc'] ?: '-' }}
                              </option>
                            @endforeach
                          </select>
                        </div>
                        <button class="btn btn-secondary" type="submit" @disabled($matchingGeneratedInvoices->isEmpty())>
                          Relacionar ingreso
                        </button>
                      </form>
                      @if($matchingGeneratedInvoices->isEmpty())
                        <small class="link-hint">No hay prefacturas libres con monto exacto para este ingreso.</small>
                      @else
                        <small class="link-hint">Solo se muestran prefacturas con el mismo monto del ingreso.</small>
                      @endif
                    @else
                      <div class="js-link-form-wrap" @if($isNotLinkable) style="display:none;" @endif>
                        <form method="POST" action="{{ route($linkRouteName, $movement) }}" class="link-form js-ajax-form" data-action-type="link">
                          @csrf
                          <div class="field field-compact request-search-wrap">
                            <label>Solicitud</label>
                            <input
                              id="request-search-{{ $movement->id }}"
                              type="text"
                              class="js-request-search"
                              list="request-options"
                              data-target-id="request-id-{{ $movement->id }}"
                              value="{{ $requestDisplay }}"
                              placeholder="Buscar proyecto / JN / RC"
                              autocomplete="off"
                            >
                            <input type="hidden" id="request-id-{{ $movement->id }}" name="pipefy_request_id" value="{{ $movement->pipefy_request_id ?: '' }}">
                            <input type="hidden" name="generated_invoice_id" value="">
                          </div>
                          <button class="btn btn-secondary" type="submit">Relacionar egreso</button>
                        </form>
                        <small class="link-hint">Para egresos solo se relaciona la solicitud (sin prefactura).</small>
                      </div>

                      <div class="js-not-linkable-wrap">
                        <span class="badge badge-not-linkable js-not-linkable-state-badge" @if(!$isNotLinkable) style="display:none;" @endif>No relacionable</span>

                        <form method="POST" action="{{ route($notLinkableRouteName, $movement) }}" class="link-form link-form--not-linkable js-ajax-form js-mark-not-linkable-form" data-action-type="not-linkable" @if($isNotLinkable) style="display:none;" @endif>
                          @csrf
                          <input type="hidden" name="is_not_linkable" value="1">
                          <button class="btn btn-secondary btn-sm" type="submit">Marcar no relacionable</button>
                        </form>

                        <form method="POST" action="{{ route($notLinkableRouteName, $movement) }}" class="link-form link-form--not-linkable js-ajax-form js-unmark-not-linkable-form" data-action-type="not-linkable" @if(!$isNotLinkable) style="display:none;" @endif>
                          @csrf
                          <input type="hidden" name="is_not_linkable" value="0">
                          <button class="btn btn-secondary btn-sm" type="submit">Quitar no relacionable</button>
                        </form>
                      </div>
                    @endif
                  @else
                    <span class="badge badge-locked">Relacion bloqueada</span>
                    <small class="link-hint">Este movimiento ya fue relacionado y no se puede reasignar.</small>
                  @endif
                </div>

                <div class="link-meta">
                  @if($isIncome)
                    <form method="POST" action="{{ route($clientRouteName, $movement) }}" class="classification-form js-ajax-form" data-action-type="client">
                      @csrf
                      <select name="client_id">
                        <option value="">Sin cliente</option>
                        @foreach($clientOptions as $clientOption)
                          <option value="{{ $clientOption->id }}" @selected((int) ($movement->client_id ?? 0) === (int) $clientOption->id)>
                            {{ $clientOption->name }}{{ $clientOption->rfc ? ' ('.$clientOption->rfc.')' : '' }}
                          </option>
                        @endforeach
                      </select>
                      <button type="submit" class="btn btn-secondary btn-sm">Guardar cliente</button>
                    </form>
                  @endif

                  <span class="badge js-classification-badge {{ $classificationBadgeClass }}">{{ $classificationLabel }}</span>

                  @if($hasClassificationColumn ?? false)
                    @if(!$isLockedLink || !$hasExplicitClassification)
                      <form
                        method="POST"
                        action="{{ route($classificationRouteName, $movement) }}"
                        class="classification-form js-classification-form js-ajax-form"
                        data-action-type="classification"
                        data-movement-type="{{ $movement->movement_type }}"
                      >
                        @csrf
                        <select name="classification">
                          @foreach($classificationOptions as $classificationValue => $classificationText)
                            @continue($classificationValue === \App\Models\FinancialMovement::CLASSIFICATION_NOT_LINKABLE)
                            <option value="{{ $classificationValue }}" @selected($movementClassification === $classificationValue)>
                              {{ $classificationText }}
                            </option>
                          @endforeach
                        </select>
                        @if(($hasTaxDetailColumn ?? false) && !$isIncome)
                          <select
                            name="tax_detail"
                            class="js-tax-detail-select"
                            @if($movementClassification !== \App\Models\FinancialMovement::CLASSIFICATION_TAXES) style="display:none;" @endif
                          >
                            <option value="">Selecciona tipo de impuesto</option>
                            @foreach($taxDetailOptions as $groupTitle => $groupOptions)
                              <optgroup label="{{ $groupTitle }}">
                                @foreach($groupOptions as $taxValue => $taxLabel)
                                  <option value="{{ $taxValue }}" @selected($taxDetail === $taxValue)>{{ $taxLabel }}</option>
                                @endforeach
                              </optgroup>
                            @endforeach
                          </select>
                        @endif
                        <button type="submit" class="btn btn-secondary btn-sm">Guardar categoria</button>
                      </form>
                    @else
                      <span class="badge">Categoria fija por relacion</span>
                    @endif
                  @endif

                  @if($taxDetailLabel)
                    <span class="badge badge-tax-detail js-tax-detail-badge">{{ $taxDetailLabel }}</span>
                  @endif

                  @if($linkedGeneratedInvoice)
                    <span class="badge badge-prefactura">
                      Prefactura: {{ $linkedGeneratedInvoice->folio }} (${{ number_format((float) $linkedGeneratedInvoice->total, 2) }})
                    </span>
                  @endif

                  @if($linkedRequest)
                    <span class="badge">Solicitud #{{ $linkedRequest->id }}</span>
                  @endif
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="9">Sin movimientos cargados todavia.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="pagination-wrap">
      {{ $movements->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
      const feedback = document.getElementById('ajax-feedback');
      const classificationBadgeClasses = [
        'badge-normal',
        'badge-provider',
        'badge-taxes',
        'badge-payroll',
        'badge-bank',
        'badge-other',
        'badge-not-linkable',
        'badge-unset',
      ];

      function showFeedback(type, message) {
        if (!feedback) return;
        feedback.hidden = false;
        feedback.classList.remove('notice', 'error');
        feedback.classList.add(type === 'error' ? 'error' : 'notice');
        feedback.textContent = message;
      }

      function syncHiddenId(input) {
        const targetId = input.dataset.targetId;
        const hiddenInput = targetId ? document.getElementById(targetId) : null;
        if (!hiddenInput) {
          return;
        }

        const value = (input.value || '').trim();
        if (value === '') {
          hiddenInput.value = '';
          return;
        }

        const listId = input.getAttribute('list');
        const list = listId ? document.getElementById(listId) : null;
        if (!list) {
          hiddenInput.value = '';
          return;
        }

        const options = Array.from(list.querySelectorAll('option'));
        const matched = options.find(function (option) {
          return option.value === value;
        });
        hiddenInput.value = matched ? (matched.dataset.id || '') : '';
      }

      function validateRequestSearchFields(form) {
        const requestSearchInputs = form.querySelectorAll('.js-request-search');
        for (const input of requestSearchInputs) {
          syncHiddenId(input);
          const targetId = input.dataset.targetId;
          const hiddenInput = targetId ? document.getElementById(targetId) : null;
          const hasTypedValue = (input.value || '').trim() !== '';
          const hasValidId = hiddenInput && (hiddenInput.value || '').trim() !== '';
          const isUnlinkedOption = (input.value || '').trim().toLowerCase() === 'sin relacionar';

          if (hasTypedValue && !hasValidId) {
            if (isUnlinkedOption) {
              input.focus();
              showFeedback('error', 'Si deseas dejar este egreso sin relacion, usa el boton "Marcar no relacionable".');
              return false;
            }

            input.focus();
            showFeedback('error', 'Selecciona una solicitud valida de la lista para guardar la relacion.');
            return false;
          }
        }

        return true;
      }

      function updateClassificationBadge(row, payload) {
        if (!payload) return;
        const badge = row.querySelector('.js-classification-badge');
        if (!badge) return;

        badge.textContent = payload.classification_label || badge.textContent;
        classificationBadgeClasses.forEach(function (className) {
          badge.classList.remove(className);
        });

        if (payload.classification_badge_class) {
          badge.classList.add(payload.classification_badge_class);
        }
      }

      function updateTaxDetailBadge(row, payload) {
        if (!payload) return;
        const linkMeta = row.querySelector('.link-meta');
        if (!linkMeta) return;

        const existingBadge = linkMeta.querySelector('.js-tax-detail-badge');
        const label = payload.tax_detail_label || '';

        if (!label) {
          if (existingBadge) {
            existingBadge.remove();
          }
          return;
        }

        if (existingBadge) {
          existingBadge.textContent = label;
          return;
        }

        const badge = document.createElement('span');
        badge.className = 'badge badge-tax-detail js-tax-detail-badge';
        badge.textContent = label;
        linkMeta.appendChild(badge);
      }

      function syncClassificationFormState(form) {
        if (!form) return;
        const movementType = form.dataset.movementType || '';
        const classificationSelect = form.querySelector('select[name=\"classification\"]');
        const taxDetailSelect = form.querySelector('.js-tax-detail-select');
        if (!classificationSelect || !taxDetailSelect) return;

        const isExpenseTaxes = movementType === 'expense'
          && (classificationSelect.value || '') === '{{ \App\Models\FinancialMovement::CLASSIFICATION_TAXES }}';

        taxDetailSelect.style.display = isExpenseTaxes ? '' : 'none';
        taxDetailSelect.required = isExpenseTaxes;
        if (!isExpenseTaxes) {
          taxDetailSelect.value = '';
        }
      }

      function updateRequestCell(row, linkedRequest) {
        if (!linkedRequest) return;
        const requestCell = row.querySelector('.js-request-cell');
        if (!requestCell) return;

        requestCell.innerHTML = '' +
          '<div><strong>' + (linkedRequest.project_name || 'Sin PROJECT NAME') + '</strong></div>' +
          '<div class="subtle cell-subtle">JN: ' + (linkedRequest.title || '-') + '</div>' +
          '<div class="subtle cell-subtle">RC: ' + (linkedRequest.rc_list || '-') + '</div>';
      }

      function setRequestCellNotLinkable(row) {
        const requestCell = row.querySelector('.js-request-cell');
        if (!requestCell) return;
        requestCell.innerHTML = '<span class="badge badge-not-linkable">No relacionable (ID 0)</span>';
      }

      function setRequestCellUnlinked(row) {
        const requestCell = row.querySelector('.js-request-cell');
        if (!requestCell) return;
        requestCell.innerHTML = '<span class="badge">Sin relacionar</span>';
      }

      function appendOrUpdateMetaBadges(row, payload) {
        const linkMeta = row.querySelector('.link-meta');
        if (!linkMeta) return;

        if (payload.linked_generated_invoice) {
          let generatedBadge = linkMeta.querySelector('.badge-prefactura');
          if (!generatedBadge) {
            generatedBadge = document.createElement('span');
            generatedBadge.className = 'badge badge-prefactura';
            linkMeta.appendChild(generatedBadge);
          }

          generatedBadge.textContent = 'Prefactura: ' + payload.linked_generated_invoice.folio + ' ($' + Number(payload.linked_generated_invoice.total || 0).toFixed(2) + ')';
        }

        if (payload.linked_request) {
          let requestBadge = linkMeta.querySelector('.js-linked-request-badge');
          if (!requestBadge) {
            requestBadge = document.createElement('span');
            requestBadge.className = 'badge js-linked-request-badge';
            linkMeta.appendChild(requestBadge);
          }

          requestBadge.textContent = 'Solicitud #' + payload.linked_request.id;
        }
      }

      function updateClientCell(row, client) {
        const cell = row.querySelector('.js-client-cell');
        if (!cell) return;

        if (!client) {
          cell.textContent = '-';
          return;
        }

        const safeName = client.name || '-';
        const safeRfc = (client.rfc || '').trim();
        cell.innerHTML = '<div><strong>' + safeName + '</strong></div>'
          + (safeRfc !== '' ? '<small class="subtle cell-subtle">' + safeRfc + '</small>' : '');
      }

      function lockLinkSection(row) {
        const linkActions = row.querySelector('.js-link-actions');
        if (linkActions) {
          linkActions.innerHTML = '' +
            '<span class="badge badge-locked">Relacion bloqueada</span>' +
            '<small class="link-hint">Este movimiento ya fue relacionado y no se puede reasignar.</small>';
        }

        const linkMeta = row.querySelector('.link-meta');
        if (!linkMeta) return;

        const classificationForm = linkMeta.querySelector('.classification-form');
        if (classificationForm) {
          classificationForm.remove();
        }

        if (!linkMeta.querySelector('.js-fixed-classification-badge')) {
          const fixedBadge = document.createElement('span');
          fixedBadge.className = 'badge js-fixed-classification-badge';
          fixedBadge.textContent = 'Categoria fija por relacion';
          linkMeta.appendChild(fixedBadge);
        }
      }

      function updateNotLinkableUi(row, isNotLinkable) {
        const linkFormWrap = row.querySelector('.js-link-form-wrap');
        const markForm = row.querySelector('.js-mark-not-linkable-form');
        const unmarkForm = row.querySelector('.js-unmark-not-linkable-form');
        const stateBadge = row.querySelector('.js-not-linkable-state-badge');

        if (linkFormWrap) {
          linkFormWrap.style.display = isNotLinkable ? 'none' : '';
        }
        if (markForm) {
          markForm.style.display = isNotLinkable ? 'none' : '';
        }
        if (unmarkForm) {
          unmarkForm.style.display = isNotLinkable ? '' : 'none';
        }
        if (stateBadge) {
          stateBadge.style.display = isNotLinkable ? '' : 'none';
        }

        if (isNotLinkable) {
          setRequestCellNotLinkable(row);
        } else {
          setRequestCellUnlinked(row);
        }
      }

      document.querySelectorAll('.js-request-search').forEach(function (input) {
        syncHiddenId(input);

        input.addEventListener('input', function () {
          syncHiddenId(input);
        });

        input.addEventListener('change', function () {
          syncHiddenId(input);
        });
      });

      document.querySelectorAll('.js-classification-form').forEach(function (form) {
        syncClassificationFormState(form);
        const classificationSelect = form.querySelector('select[name=\"classification\"]');
        if (classificationSelect) {
          classificationSelect.addEventListener('change', function () {
            syncClassificationFormState(form);
          });
        }
      });

      document.querySelectorAll('.js-ajax-form').forEach(function (form) {
        form.addEventListener('submit', async function (event) {
          event.preventDefault();
          const actionType = form.dataset.actionType || '';

          if (!validateRequestSearchFields(form)) {
            return;
          }

          if (actionType === 'classification') {
            syncClassificationFormState(form);
            const taxDetailSelect = form.querySelector('.js-tax-detail-select');
            if (taxDetailSelect && taxDetailSelect.required && !(taxDetailSelect.value || '').trim()) {
              showFeedback('error', 'Selecciona el tipo de impuesto para egresos en categoria Impuestos.');
              taxDetailSelect.focus();
              return;
            }
          }

          const row = form.closest('tr');
          if (!row) {
            return;
          }

          const submitButtons = form.querySelectorAll('button[type="submit"]');
          submitButtons.forEach((button) => button.disabled = true);

          try {
            const response = await fetch(form.action, {
              method: 'POST',
              headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
              },
              body: new FormData(form),
            });

            const payload = await response.json().catch(() => ({}));
            if (!response.ok || payload.ok === false) {
              showFeedback('error', payload.message || 'No se pudo completar la accion.');
              return;
            }

            showFeedback('success', payload.message || 'Cambios guardados correctamente.');
            updateClassificationBadge(row, payload);

            if (actionType === 'link') {
              lockLinkSection(row);
              updateRequestCell(row, payload.linked_request || null);
              appendOrUpdateMetaBadges(row, payload);
              if (Object.prototype.hasOwnProperty.call(payload, 'client')) {
                updateClientCell(row, payload.client);
              }
            }

            if (actionType === 'client') {
              updateClientCell(row, payload.client || null);
            }

            if (actionType === 'not-linkable') {
              updateNotLinkableUi(row, Boolean(payload.is_not_linkable));
            }

            if (actionType === 'classification') {
              updateTaxDetailBadge(row, payload);
              const taxDetailSelect = form.querySelector('.js-tax-detail-select');
              if (taxDetailSelect) {
                taxDetailSelect.value = payload.tax_detail || '';
              }
              syncClassificationFormState(form);
            }
          } catch (error) {
            showFeedback('error', 'Error de red. Intenta nuevamente.');
          } finally {
            submitButtons.forEach((button) => button.disabled = false);
          }
        });
      });
    });
  </script>
@endpush

@push('styles')
  <style>
    .wrap {
      max-width: 100%;
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
    }
    .bank-screen {
      width: 100%;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 20px;
    }
    .filters-collapse {
      margin-bottom: 14px;
    }
    .ajax-feedback {
      margin-bottom: 12px;
    }
    .filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-favicon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px;
    }
    .dashboard-filters {
      margin: 0;
      padding: 0;
    }
    .filters-grid {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }
    .filters-grid--eight {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .totals-row {
      margin-bottom: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1300px;
      border: 0;
      margin: 0;
    }
    .movements-table th,
    .movements-table td {
      vertical-align: top;
    }
    .movements-table th {
      white-space: nowrap;
    }
    .cell-concept {
      min-width: 220px;
      max-width: 320px;
      white-space: normal;
      word-break: break-word;
    }
    .cell-request {
      min-width: 240px;
      max-width: 320px;
      white-space: normal;
      word-break: break-word;
    }
    .cell-subtle {
      margin: 2px 0 0;
    }
    .cell-link {
      min-width: 340px;
      max-width: 430px;
    }
    .link-form {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .link-form--stacked {
      flex-direction: column;
      align-items: stretch;
    }
    .link-form--not-linkable {
      margin-top: 2px;
      margin-bottom: 4px;
    }
    .js-not-linkable-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 6px;
    }
    .request-search-wrap {
      min-width: 260px;
      flex: 1 1 auto;
      margin: 0;
    }
    .field-compact label {
      font-size: 0.8rem;
      margin-bottom: 4px;
      font-weight: 600;
      color: #334155;
    }
    .field-compact input,
    .field-compact select {
      width: 100%;
      min-width: 260px;
    }
    .link-hint {
      display: inline-block;
      margin-top: 2px;
      color: var(--muted);
    }
    .link-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
      align-items: center;
    }
    .classification-form {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      flex-wrap: wrap;
    }
    .classification-form select {
      min-width: 170px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 0.82rem;
    }
    .classification-form .js-tax-detail-select {
      min-width: 280px;
    }
    .btn-sm {
      padding: 6px 10px;
      font-size: 0.78rem;
      line-height: 1.1;
    }
    .badge-income {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .badge-expense {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
    .badge-normal {
      background: #ecfeff;
      color: #155e75;
      border: 1px solid #a5f3fc;
    }
    .badge-provider {
      background: #e0f2fe;
      color: #075985;
      border: 1px solid #bae6fd;
    }
    .badge-taxes {
      background: #ffedd5;
      color: #9a3412;
      border: 1px solid #fdba74;
    }
    .badge-payroll {
      background: #ede9fe;
      color: #5b21b6;
      border: 1px solid #c4b5fd;
    }
    .badge-bank {
      background: #ecfccb;
      color: #3f6212;
      border: 1px solid #bef264;
    }
    .badge-other {
      background: #fff1f2;
      color: #9f1239;
      border: 1px solid #fecdd3;
    }
    .badge-not-linkable {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
    }
    .badge-tax-detail {
      background: #eef2ff;
      color: #3730a3;
      border: 1px solid #c7d2fe;
    }
    .badge-unset {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .badge-prefactura {
      background: #eef2ff;
      color: #3730a3;
      border: 1px solid #c7d2fe;
    }
    .badge-locked {
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
    }
    .pagination-wrap {
      margin-top: 16px;
    }
    @media (max-width: 900px) {
      .wrap {
        padding-left: 10px;
        padding-right: 10px;
      }
      .bank-screen {
        padding: 14px;
      }
      .filters-grid--eight {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush