@extends('layouts.enterprise')

@section('title', 'Vista previa')

@section('content')
  <div class="card">
    <h1 class="page-title">Vista previa</h1>
    <p class="subtle">Arma una vista previa desde artículos de solicitudes. Según la configuración del cliente, la compatibilidad puede validarse con <strong>reglas RC</strong>, con el <strong>RC cliente</strong> capturado por artículo o con <strong>recibos inbound</strong> ligados al RC solicitud.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif
    @unless(($hasSatCatalog ?? false) && ($hasSatItemColumns ?? false))
      <div class="notice notice-soft">La columna SAT se activara en cuanto corras las migraciones del catalogo SAT.</div>
    @endunless
    @if($errors->any())
      <div class="error">
        <ul>
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    @php
      $pageRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.generate_invoice') : route('admin.incomes.generate_invoice');
      $storeRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.generate_invoice.store') : route('admin.incomes.generate_invoice.store');
      $printRouteName = request()->routeIs('accountant.*')
        ? 'accountant.incomes.generate_invoice.print'
        : 'admin.incomes.generate_invoice.print';
      $issueRouteName = request()->routeIs('accountant.*')
        ? 'accountant.incomes.generate_invoice.issue'
        : 'admin.incomes.generate_invoice.issue';
      $destroyRouteName = request()->routeIs('accountant.*')
        ? 'accountant.incomes.generate_invoice.destroy'
        : 'admin.incomes.generate_invoice.destroy';
      $historyRoute = request()->routeIs('accountant.*')
        ? route('accountant.incomes.generated_invoices')
        : route('admin.incomes.generated_invoices');
      $selectedClient = collect($clients)->firstWhere('id', $selectedClientId);
      $hasSatCatalogFeature = (bool) (($hasSatCatalog ?? false) && ($hasSatItemColumns ?? false));
      $hasOldItemSelection = session()->hasOldInput('item_ids');
      $oldSelectedItemIds = collect(old('item_ids', []))->map(fn ($value) => (int) $value)->values()->all();
      $oldItemRcs = old('item_rcs', []);
      $oldSelectedSatCatalogItemIds = collect(old('sat_catalog_item_ids', []))
        ->mapWithKeys(fn ($value, $key) => [(int) $key => (int) $value])
        ->all();
      $defaultAdditionalRequestIds = collect(old('additional_request_ids', ($selectedAdditionalRequestIds ?? collect())->all()))
        ->map(fn ($value) => (int) $value)
        ->values();
      $defaultRequestOfficeIds = collect(old('request_office_ids', $selectedRequestOfficeIds ?? []))
        ->mapWithKeys(fn ($value, $key) => [(int) $key => (int) $value])
        ->filter(fn ($value, $key) => $key > 0 && (int) $value > 0)
        ->all();
      $selectedRequestIdsSummary = collect([$selectedRequest?->id])->filter()->merge($defaultAdditionalRequestIds)->unique()->values();
      $savedSelectedItemIds = collect($selectedItems ?? collect())
        ->pluck('id')
        ->map(fn ($value) => (int) $value)
        ->filter(fn ($value) => $value > 0)
        ->values()
        ->all();
      $savedItemRcs = collect($selectedItems ?? collect())
        ->filter(fn ($item) => filled($item['item_rc'] ?? null))
        ->mapWithKeys(fn ($item) => [(int) ($item['id'] ?? 0) => (string) ($item['item_rc'] ?? '')])
        ->all();
      $savedInboundMatches = collect($selectedItems ?? collect())
        ->filter(fn ($item) => filled($item['matched_inbound'] ?? null))
        ->mapWithKeys(fn ($item) => [(int) ($item['id'] ?? 0) => $item['matched_inbound']])
        ->all();
      $savedSatCatalogItemIds = collect($selectedItems ?? collect())
        ->filter(fn ($item) => filled($item['sat_catalog_item_id'] ?? null))
        ->mapWithKeys(fn ($item) => [(int) ($item['id'] ?? 0) => (int) ($item['sat_catalog_item_id'] ?? 0)])
        ->all();
      $defaultSatCatalogItemId = collect($satCatalogItems ?? collect())->firstWhere('is_default', true)?->id
        ?: collect($satCatalogItems ?? collect())->firstWhere('is_active', true)?->id;
      $draftIssueDate = $currentDraftInvoice?->issue_date ? $currentDraftInvoice->issue_date->format('Y-m-d') : now()->toDateString();
      $draftTaxRate = ($currentDraftInvoice && (float) $currentDraftInvoice->subtotal > 0)
        ? round(((float) $currentDraftInvoice->tax / (float) $currentDraftInvoice->subtotal) * 100, 2)
        : 16;
      $selectedClientUsesInboundGrouping = $selectedClient
        ? \App\Support\ClientRequestGrouping::usesInboundReceiptEngine($selectedClient)
        : false;
      $selectedClientRulesSummary = $selectedClient
        ? \App\Support\ClientRequestGrouping::configurationSummary($selectedClient)
        : null;
      $itemColumnCount = $hasSatCatalogFeature ? 11 : 10;
    @endphp

    <div class="filters-actions" style="margin-bottom:14px;">
      <a class="btn btn-secondary" href="{{ $historyRoute }}">Ver vistas previas finalizadas</a>
      <span class="badge">Los borradores siguen apareciendo aquí para continuar capturando información.</span>
    </div>

    <div class="workflow-steps" aria-label="Flujo de vista previa">
      <div class="workflow-step {{ $selectedRequest ? 'is-complete' : 'is-active' }}">
        <span class="workflow-step__number">1</span>
        <div>
          <strong>Agregar solicitudes</strong>
          <small>Cliente, oficina y solicitudes una a una</small>
        </div>
      </div>
      <div class="workflow-step {{ $selectedRequest ? ($currentDraftInvoice ? 'is-complete' : 'is-active') : 'is-locked' }}">
        <span class="workflow-step__number">2</span>
        <div>
          <strong>Captura fiscal</strong>
          <small>Clave SAT, RC y artículos incluidos</small>
        </div>
      </div>
      <div class="workflow-step {{ $currentDraftInvoice ? 'is-complete' : ($selectedRequest ? 'is-active' : 'is-locked') }}">
        <span class="workflow-step__number">3</span>
        <div>
          <strong>Guardar borrador</strong>
          <small>Notas, fecha e IVA</small>
        </div>
      </div>
      <div class="workflow-step {{ $currentDraftInvoice ? 'is-active' : 'is-locked' }}">
        <span class="workflow-step__number">4</span>
        <div>
          <strong>Finalizar vista previa</strong>
          <small>Generar e imprimir PDF</small>
        </div>
      </div>
      <div class="workflow-step is-locked">
        <span class="workflow-step__number">5</span>
        <div>
          <strong>Crear factura</strong>
          <small>Timbrado en Facturama</small>
        </div>
      </div>
    </div>

    @if(!$selectedRequest)
    <sl-details class="filters-collapse" open>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Agregar solicitudes a la agrupación</span>
      </div>
      <form method="GET" action="{{ $pageRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--five">
          <div class="field">
            <label>Cliente</label>
            <select name="client_id">
              <option value="">Todos / sin filtrar</option>
              @foreach($clients as $client)
                <option value="{{ $client->id }}" @selected((int) ($filters['client_id'] ?? 0) === (int) $client->id)>
                  {{ $client->name }}{{ $client->rfc ? ' ('.$client->rfc.')' : '' }}
                </option>
              @endforeach
            </select>
            <small>Si seleccionas cliente, también se mostrarán solicitudes sin cliente asignado para amarrarlas aquí.</small>
          </div>
          <div class="field">
            <label>Oficina</label>
            <sl-input
              id="generated-filter-office-search"
              class="office-search-input"
              clearable
              placeholder="Buscar oficina por código o nombre"
            ></sl-input>
            <select id="generated-filter-office-id" name="office_id">
              <option value="">Selecciona oficina</option>
              @foreach($offices as $office)
                <option
                  value="{{ $office->id }}"
                  data-client-id="{{ (int) ($office->client_id ?? 0) }}"
                  @selected((int) ($selectedOfficeId ?? 0) === (int) $office->id)
                >
                  {{ $office->office_code ?: 'SIN-COD' }} | {{ $office->name }}
                </option>
              @endforeach
            </select>
            <small id="generated-filter-office-helper">Selecciona cliente para filtrar oficinas disponibles.</small>
          </div>
          <div class="field">
            <label>Buscar solicitud</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Proyecto, JN, RC solicitud o ID">
          </div>
          <div class="field">
            <label>Primera solicitud</label>
            <sl-input
              id="generated-request-search"
              class="request-search-input"
              clearable
              placeholder="Buscar en opciones por RC solicitud o JN"
            ></sl-input>
            <select name="pipefy_request_id">
              <option value="">Selecciona una solicitud</option>
                  @foreach($requests as $req)
                    <option value="{{ $req->id }}" @selected((int) ($filters['pipefy_request_id'] ?? 0) === (int) $req->id)>
                      #{{ $req->id }} | {{ $req->project_name ?: 'Sin PROJECT NAME' }} | {{ $req->title ?: '-' }} | RC solicitud: {{ $req->rc_list ?: '-' }} | Cliente: {{ $req->client?->name ?: 'Sin cliente' }}
                    </option>
                  @endforeach
                </select>
            <small id="generated-request-helper">Escribe parte del RC solicitud (Pipefy), del JN o del ID para filtrar la lista.</small>
          </div>
          <div class="field field-actions">
            <label>&nbsp;</label>
            <button class="btn" type="submit">Cargar solicitudes</button>
          </div>
        </div>
      </form>
    </sl-details>
    @endif

    @if($selectedRequest)
      @if($selectedRequestHasGeneratedInvoice ?? false)
        <div class="card card-warning">
          <h2 class="section-title" style="margin-top:0;">Solicitud ya con vista previa</h2>
          <p class="subtle">
            La solicitud #{{ $selectedRequest->id }} ({{ $selectedRequest->project_name ?: 'Sin PROJECT NAME' }}) ya cuenta con una vista previa guardada.
          </p>
          @if($selectedRequestLatestGeneratedInvoice)
            <div class="filters-actions">
              <span class="badge">Folio: {{ $selectedRequestLatestGeneratedInvoice->folio }}</span>
              <span class="badge">Fecha: {{ optional($selectedRequestLatestGeneratedInvoice->issue_date)->format('Y-m-d') ?: '-' }}</span>
              <span class="badge">Total: ${{ number_format((float) $selectedRequestLatestGeneratedInvoice->total, 2) }}</span>
              @if($selectedRequestLatestGeneratedInvoice->facturama_cfdi_id)
                <span class="badge badge-income">Factura creada</span>
              @endif
              @if(($hasFacturamaPaymentComplementColumns ?? false) && $selectedRequestLatestGeneratedInvoice->facturama_payment_complement_cfdi_id)
                <span class="badge">Complemento creado</span>
              @endif
              @if($selectedRequestLatestGeneratedInvoice->id)
                <sl-button
                  href="{{ route($printRouteName, ['generatedInvoice' => $selectedRequestLatestGeneratedInvoice->id]) }}"
                  target="_blank"
                  rel="noopener"
                  size="small"
                >
                  Abrir vista previa
                </sl-button>
                @if(($hasFacturamaColumns ?? false) && !$selectedRequestLatestGeneratedInvoice->facturama_cfdi_id)
                  <form method="POST" action="{{ route($issueRouteName, ['generatedInvoice' => $selectedRequestLatestGeneratedInvoice->id]) }}">
                    @csrf
                    <button class="btn" type="submit">Crear factura</button>
                  </form>
                @elseif(($hasFacturamaColumns ?? false) && $selectedRequestLatestGeneratedInvoice->facturama_cfdi_id)
                  @if($selectedRequestLatestGeneratedInvoice->facturama_pdf_path)
                    <sl-button
                      href="{{ asset('storage/'.$selectedRequestLatestGeneratedInvoice->facturama_pdf_path) }}"
                      target="_blank"
                      rel="noopener"
                      size="small"
                      variant="neutral"
                    >
                      PDF Facturama
                    </sl-button>
                  @endif
                  @if(($hasFacturamaPaymentComplementColumns ?? false) && !$selectedRequestLatestGeneratedInvoice->facturama_payment_complement_cfdi_id)
                    <sl-button
                      href="{{ route($printRouteName, ['generatedInvoice' => $selectedRequestLatestGeneratedInvoice->id]) }}"
                      target="_blank"
                      rel="noopener"
                      size="small"
                      variant="neutral"
                    >
                      Registrar pago
                    </sl-button>
                  @elseif(($hasFacturamaPaymentComplementColumns ?? false) && $selectedRequestLatestGeneratedInvoice->facturama_payment_complement_pdf_path)
                    <sl-button
                      href="{{ asset('storage/'.$selectedRequestLatestGeneratedInvoice->facturama_payment_complement_pdf_path) }}"
                      target="_blank"
                      rel="noopener"
                      size="small"
                      variant="neutral"
                    >
                      PDF complemento
                    </sl-button>
                  @endif
                @endif
              @else
                <span class="badge">PDF no disponible</span>
              @endif
            </div>
          @endif
        </div>
      @else
        <div class="card card-dashed" style="margin-top:14px;">
          <h2 class="section-title" style="margin-top:0;">Vista previa en 5 pasos</h2>
          <p class="subtle">Solicitud inicial #{{ $selectedRequest->id }} | {{ $selectedRequest->project_name ?: 'Sin PROJECT NAME' }} | JN {{ $selectedRequest->title ?: '-' }} | RC solicitud (Pipefy): {{ $selectedRequest->rc_list ?: '-' }}</p>

          <form method="POST" action="{{ $storeRoute }}" id="generated-invoice-form">
            @csrf
            @if($currentDraftInvoice)
              <input type="hidden" name="draft_generated_invoice_id" value="{{ $currentDraftInvoice->id }}">
            @endif
            <input type="hidden" name="pipefy_request_id" value="{{ $selectedRequest->id }}">

            @if($currentDraftInvoice)
              <div class="notice notice-soft" style="margin-bottom:10px;">
                <div class="filters-actions" style="justify-content:space-between; width:100%;">
                  <span>Borrador activo cargado. Si vas a sumar o quitar solicitudes, hazlo primero aquí arriba; después revisa abajo RC cliente, SAT y los conceptos finales.</span>
                  <button
                    class="btn btn-secondary"
                    type="submit"
                    form="delete-active-draft-form"
                    onclick="return confirm('¿Seguro que quieres eliminar este borrador activo? Esta acción no se puede deshacer.');"
                  >
                    Eliminar borrador activo
                  </button>
                </div>
              </div>
            @endif

            <div class="step-panel">
              <div class="step-panel__header">
                <div>
                  <h3 class="step-panel__title">Paso 1. Agrega solicitudes una a una</h3>
                  <p class="step-panel__copy">Selecciona cliente, oficina y luego agrega cada solicitud que deba entrar en la vista previa. Este paso se repite tantas veces como solicitudes necesites incluir.</p>
                </div>
                @if($groupingContext)
                  <span class="badge badge-income">{{ $groupingContext['label'] }}</span>
                @endif
              </div>

              <div class="grouping-card" id="grouping-card" data-client-id="{{ $selectedClient?->id ?: '' }}">
                <div class="filters-grid filters-grid--five">
                  <div class="field">
                    <label>Cliente</label>
                    <select id="generated-client-id" name="client_id" required>
                      <option value="">Selecciona cliente</option>
                      @foreach($clients as $client)
                        <option
                          value="{{ $client->id }}"
                          data-requires-item-rc="{{ $client->validation_rc ? '1' : '0' }}"
                          data-is-groupable="{{ $client->is_groupable ? '1' : '0' }}"
                          @selected((int) old('client_id', $selectedClientId) === (int) $client->id)
                        >
                          {{ $client->name }} {{ $client->rfc ? '(' . $client->rfc . ')' : '' }}
                        </option>
                      @endforeach
                    </select>
                    <small>La vista previa agrupada solo puede mezclar solicitudes del mismo cliente.</small>
                  </div>
                  <div class="field">
                    <label>Oficina de la solicitud</label>
                    <sl-input
                      id="grouping-office-search"
                      class="office-search-input"
                      clearable
                      placeholder="Buscar oficina por código o nombre"
                    ></sl-input>
                    <select id="grouping-office-id">
                      <option value="">Selecciona oficina</option>
                      @foreach($offices as $office)
                        <option
                          value="{{ $office->id }}"
                          data-client-id="{{ (int) ($office->client_id ?? 0) }}"
                          @selected((int) ($defaultRequestOfficeIds[$selectedRequest->id] ?? $selectedOfficeId ?? 0) === (int) $office->id)
                        >
                          {{ $office->office_code ?: 'SIN-COD' }} | {{ $office->name }}
                        </option>
                      @endforeach
                    </select>
                    <small id="grouping-office-helper">Selecciona una oficina para la solicitud que vas a agregar.</small>
                  </div>
                  <div class="field">
                    <label>Buscar solicitud</label>
                    <sl-input
                      id="grouping-request-search"
                      class="request-search-input"
                      clearable
                      placeholder="Buscar solicitud por proyecto, JN, RC solicitud o ID"
                    ></sl-input>
                  </div>
                  <div class="field">
                    <label>Solicitud a agregar</label>
                    <select id="grouping-request-select">
                      <option value="">Selecciona una solicitud para agregar</option>
                      @foreach($compatibleRequests as $compatibleRequest)
                        <option value="{{ $compatibleRequest['id'] }}">
                          #{{ $compatibleRequest['id'] }} | {{ $compatibleRequest['project_name'] ?: 'Sin PROJECT NAME' }} | {{ $compatibleRequest['title'] ?: '-' }} | RC solicitud: {{ $compatibleRequest['rc_list'] ?: '-' }}@if(!empty($compatibleRequest['group_label'])) | {{ $compatibleRequest['group_label'] }} @endif
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="field field-actions">
                    <label>&nbsp;</label>
                    <sl-button type="button" class="js-add-grouping-request">Agregar solicitud</sl-button>
                  </div>
                </div>

                @if($selectedClient)
                  <div class="notice notice-soft">
                    @if($selectedClientUsesInboundGrouping)
                      Este cliente agrupa con <strong>recibos inbound</strong>. El sistema revisa el RC solicitud contra el email recibido y solo permite juntar solicitudes del mismo tipo detectado y la misma moneda.
                    @elseif($selectedClient->validation_rc)
                      La agrupación se valida con el <strong>RC cliente</strong> que capturas por artículo. El <strong>RC solicitud (Pipefy)</strong> solo se muestra como referencia y no entra en la lógica final.
                    @else
                      Este cliente agrupa usando el <strong>RC solicitud (Pipefy)</strong> de cada solicitud.
                    @endif
                    @if($selectedClientRulesSummary && !in_array($selectedClientRulesSummary, ['Sin reglas', 'Sin agrupación'], true))
                      Configuración activa: <strong>{{ $selectedClientRulesSummary }}</strong>.
                    @endif
                  </div>
                @endif

                @if($groupingMessage)
                  <div class="notice notice-soft">{{ $groupingMessage }}</div>
                @endif

                <small id="grouping-request-helper">
                  @if($selectedClientUsesInboundGrouping)
                    Solo se listan solicitudes libres del mismo cliente cuyo recibo inbound cae en el mismo tipo y moneda que la solicitud inicial.
                  @elseif($selectedClient?->validation_rc)
                    Solo se listan solicitudes libres del mismo cliente. La compatibilidad final se valida al guardar usando el RC cliente capturado por artículo.
                  @else
                    Solo se listan solicitudes libres, del mismo cliente y del mismo tipo de RC solicitud (Pipefy).
                  @endif
                </small>

                <div class="field">
                  <label>Solicitudes agregadas a la vista previa</label>
                  <div class="grouping-selected-list" id="selected-grouping-requests"></div>
                  <div id="additional-request-ids" class="grouping-hidden-inputs"></div>
                  <small>
                    Cada solicitud incluida debe tener su propia oficina. Esa oficina se usará después para formar el concepto final de la vista previa.
                  </small>
                </div>
              </div>
            </div>

            <div class="step-panel step-panel--compact">
              <div class="step-panel__header">
                <div>
                  <h3 class="step-panel__title">Paso 2. Captura código fiscal, RC y artículos</h3>
                  <p class="step-panel__copy">Aquí seleccionas la clave SAT, capturas el RC cliente y activas los artículos que sí van a entrar en la vista previa final. Si existe match inbound por descripción, oficina y monto, el sistema lo amarra automáticamente.</p>
                </div>
              </div>
              <div class="filters-actions" style="margin-top:10px; margin-bottom:10px;">
                <span class="badge">Solicitudes incluidas: <span id="selected-request-count">{{ max(1, $selectedRequestIdsSummary->count()) }}</span></span>
                <span class="badge">La solicitud inicial siempre debe ir incluida.</span>
                <span class="badge">Los artículos con remanente parcial mostrarán un badge de factura parcial.</span>
                @if($hasSatCatalogFeature && $defaultSatCatalogItemId)
                  <span class="badge">SAT predeterminado: {{ collect($satCatalogItems)->firstWhere('id', $defaultSatCatalogItemId)?->display_label }}</span>
                @endif
                <span class="badge">Subtotal seleccionado: <span id="selected-items-subtotal">$0.00</span></span>
              </div>
              <div class="movements-table-wrap">
                <table class="movements-table movements-table--wide">
                  <thead>
                    <tr>
                      <th>Sel.</th>
                      <th>Solicitud</th>
                      <th>#</th>
                      <th>COD</th>
                      <th>Descripción limpia</th>
                      <th>Cant.</th>
                      <th class="js-item-rc-column" style="display:none;">RC cliente</th>
                      <th>Inbound</th>
                      @if($hasSatCatalogFeature)
                        <th>Clave SAT</th>
                      @endif
                      <th>Unit sale</th>
                      <th>Total sale</th>
                    </tr>
                  </thead>
                  <tbody id="generated-items-body">
                    <tr>
                      <td colspan="{{ $itemColumnCount }}">Cargando artículos...</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="step-panel step-panel--compact">
              <div class="step-panel__header">
                <div>
                  <h3 class="step-panel__title">Paso 3. Guarda la información</h3>
                  <p class="step-panel__copy">Este paso genera el borrador. Úsalo cuando todavía no vas a emitir la vista previa final pero quieres dejar toda la captura guardada.</p>
                </div>
              </div>
              <div class="filters-grid filters-grid--three-meta" style="margin-top:10px;">
                <div class="field">
                  <label>Fecha de emisión</label>
                  <input type="date" name="issue_date" value="{{ old('issue_date', $draftIssueDate) }}" required>
                </div>
                <div class="field">
                  <label>IVA (%)</label>
                  <input type="number" step="0.01" min="0" max="100" name="tax_rate" value="{{ old('tax_rate', $draftTaxRate) }}">
                </div>
                <div class="field">
                  <label>Notas internas</label>
                  <textarea name="notes" rows="2" placeholder="Notas internas de la vista previa">{{ old('notes', $currentDraftInvoice?->notes) }}</textarea>
                </div>
              </div>
              <div class="filters-actions" style="margin-top:10px;">
                <button class="btn" type="submit" name="submit_action" value="save">Guardar borrador</button>
                <span class="badge">El borrador conservará cliente, solicitudes, oficina por solicitud, RC cliente y SAT por artículo.</span>
                <span class="badge">Una solicitud solo puede existir en una vista previa.</span>
                <span class="badge">Los movimientos de todas las solicitudes seleccionadas se asignarán al cliente elegido.</span>
              </div>
            </div>

            <div class="step-panel step-panel--compact">
              <div class="step-panel__header">
                <div>
                  <h3 class="step-panel__title">Paso 4. Finaliza la vista previa e imprime</h3>
                  <p class="step-panel__copy">Cuando el borrador ya tenga todas las solicitudes correctas y sus artículos completos, genera el PDF final de la vista previa. El paso 5 se hace desde esa misma vista.</p>
                </div>
              </div>
              <div class="filters-actions" style="margin-top:10px;">
                <button class="btn btn-secondary" type="submit" name="submit_action" value="save_print" @disabled(!$currentDraftInvoice)>Finalizar vista previa e imprimir PDF</button>
                @if(!$currentDraftInvoice)
                  <span class="badge">Debes guardar primero el borrador del paso 3.</span>
                @endif
              </div>
            </div>
          </form>

          @if($currentDraftInvoice)
            <form method="POST" action="{{ route($destroyRouteName, ['generatedInvoice' => $currentDraftInvoice->id]) }}" id="delete-active-draft-form" style="display:none;">
              @csrf
              @method('DELETE')
              <input type="hidden" name="return_pipefy_request_id" value="{{ $selectedRequest->id }}">
              <input type="hidden" name="return_client_id" value="{{ old('client_id', $selectedClientId) }}">
              <input type="hidden" name="return_office_id" value="{{ old('office_id', $currentDraftInvoice->office_id ?: ($selectedOfficeId ?? null)) }}">
              <input type="hidden" name="return_q" value="{{ $filters['q'] ?? '' }}">
            </form>
          @endif
        </div>
      @endif
    @endif

    @if(($hasStatusColumn ?? false) && isset($draftInvoices) && $draftInvoices->isNotEmpty())
      <div class="card card-dashed" style="margin-top:14px;">
        <h2 class="section-title" style="margin-top:0;">Borradores activos</h2>
        <p class="subtle">Estos borradores ya tienen guardada la información capturada por artículo. Puedes retomarlos para revisar la selección de solicitudes, ajustar RC/SAT y solo al final imprimir la vista previa.</p>
        <div class="movements-table-wrap">
          <table class="movements-table movements-table--wide">
            <thead>
              <tr>
                <th>Borrador</th>
                <th>Actualizado</th>
                <th>Cliente</th>
                <th>Solicitudes</th>
                <th>Notas internas</th>
                <th>Subtotal</th>
                <th>Total</th>
                <th>Acción</th>
              </tr>
            </thead>
            <tbody>
              @foreach($draftInvoices as $draftInvoice)
                @php
                  $draftRequests = ($hasGroupingPivot ?? false)
                    ? ($draftInvoice->pipefyRequests ?? collect())
                    : collect();
                  if ($draftRequests->isEmpty() && $draftInvoice->pipefyRequest) {
                    $draftRequests = collect([$draftInvoice->pipefyRequest]);
                  }
                @endphp
                <tr>
                  <td>Borrador #{{ $draftInvoice->id }}</td>
                  <td>{{ optional($draftInvoice->updated_at)->format('Y-m-d H:i') ?: '-' }}</td>
                  <td>{{ $draftInvoice->client?->name ?: '-' }}</td>
                  <td>
                    <div><strong>{{ $draftRequests->count() }} solicitud(es)</strong></div>
                    @foreach($draftRequests->take(3) as $draftRequest)
                      <div class="subtle cell-subtle">#{{ $draftRequest->id }} | {{ $draftRequest->title ?: '-' }} | RC solicitud (Pipefy): {{ $draftRequest->rc_list ?: '-' }}</div>
                    @endforeach
                    @if($draftRequests->count() > 3)
                      <div class="subtle cell-subtle">+{{ $draftRequests->count() - 3 }} más</div>
                    @endif
                  </td>
                  <td>
                    @if(filled($draftInvoice->notes))
                      <div class="draft-notes">{{ $draftInvoice->notes }}</div>
                    @else
                      <span class="subtle">Sin notas</span>
                    @endif
                  </td>
                  <td>${{ number_format((float) $draftInvoice->subtotal, 2) }}</td>
                  <td>${{ number_format((float) $draftInvoice->total, 2) }}</td>
                  <td>
                    <div class="filters-actions">
                      <sl-button
                        href="{{ $pageRoute }}?pipefy_request_id={{ $draftInvoice->pipefy_request_id }}&client_id={{ $draftInvoice->client_id }}&office_id={{ $draftInvoice->office_id }}"
                        size="small"
                      >
                        Continuar borrador
                      </sl-button>
                      <form method="POST" action="{{ route($destroyRouteName, ['generatedInvoice' => $draftInvoice->id]) }}" onsubmit="return confirm('¿Seguro que quieres eliminar este borrador? Esta acción no se puede deshacer.');">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="return_pipefy_request_id" value="{{ $draftInvoice->pipefy_request_id }}">
                        <input type="hidden" name="return_client_id" value="{{ $draftInvoice->client_id }}">
                        <input type="hidden" name="return_office_id" value="{{ $draftInvoice->office_id }}">
                        <input type="hidden" name="return_q" value="{{ $filters['q'] ?? '' }}">
                        <button class="btn btn-secondary" type="submit">Eliminar</button>
                      </form>
                    </div>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    @endif

  </div>
@endsection

@push('styles')
  <style>
    .wrap {
      max-width: min(1680px, calc(100vw - 32px));
      padding-left: 16px;
      padding-right: 16px;
    }
    .filters-collapse {
      margin-bottom: 14px;
    }
    .workflow-steps {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin: 0 0 14px;
    }
    .workflow-step {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    }
    .workflow-step.is-active {
      border-color: #0ea5a4;
      background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 100%);
    }
    .workflow-step.is-complete {
      border-color: #86efac;
      background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    }
    .workflow-step.is-locked {
      opacity: 0.72;
    }
    .workflow-step__number {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #0f172a;
      color: #fff;
      font-weight: 700;
      flex: 0 0 auto;
    }
    .workflow-step strong,
    .workflow-step small {
      display: block;
    }
    .workflow-step small {
      color: #64748b;
      margin-top: 2px;
    }
    .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--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .filters-grid--five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .field-actions {
      display: flex;
      align-items: end;
    }
    .office-search-input,
    .request-search-input {
      margin-bottom: 8px;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 980px;
      border: 0;
      margin: 0;
    }
    .movements-table--wide {
      min-width: 1280px;
    }
    .card-dashed {
      border: 1px dashed var(--border);
      box-shadow: none;
    }
    .card-warning {
      margin-top: 14px;
      border: 1px dashed #f59e0b;
      box-shadow: none;
      background: #fffbeb;
    }
    .grouping-card {
      margin-top: 10px;
      padding: 14px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    }
    .grouping-selector {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
      gap: 10px;
      align-items: end;
      margin-top: 8px;
    }
    .grouping-selected-list {
      display: grid;
      gap: 10px;
      margin-top: 8px;
    }
    .grouping-selected-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) auto;
      gap: 12px;
      align-items: end;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .grouping-selected-card__body {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
    .grouping-selected-card__body strong {
      color: #0f172a;
    }
    .grouping-selected-card__body small {
      color: #64748b;
    }
    .grouping-selected-card__office {
      min-width: 0;
    }
    .grouping-selected-card__office label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.82rem;
      font-weight: 600;
      color: #334155;
    }
    .grouping-selected-card__office small {
      display: block;
      margin-top: 6px;
      color: #64748b;
    }
    .grouping-selected-card__actions {
      display: flex;
      justify-content: flex-end;
    }
    .grouping-hidden-inputs {
      display: none;
    }
    .step-panel {
      margin-top: 16px;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #f8fafc;
    }
    .step-panel--compact {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .step-panel__header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }
    .step-panel__title {
      margin: 0;
      font-size: 1rem;
      color: #0f172a;
    }
    .step-panel__copy {
      margin: 4px 0 0;
      color: #64748b;
    }
    .grouping-card__header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 8px;
    }
    .grouping-card__copy {
      margin: 4px 0 0;
    }
    .notice-soft {
      margin-bottom: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
    }
    .request-cell {
      min-width: 220px;
    }
    .request-cell strong {
      display: block;
      color: #111827;
    }
    .request-cell small {
      display: block;
      color: #64748b;
    }
    .cell-subtle {
      display: block;
      margin-top: 2px;
    }
    .draft-notes {
      min-width: 220px;
      max-width: 340px;
      color: #334155;
      white-space: pre-wrap;
      line-height: 1.4;
    }
    @media (max-width: 900px) {
      .workflow-steps {
        grid-template-columns: 1fr;
      }
      .wrap {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
      }
      .filters-grid--four,
      .filters-grid--five,
      .grouping-selector {
        grid-template-columns: 1fr;
      }
      .grouping-card__header {
        flex-direction: column;
      }
      .grouping-selected-card {
        grid-template-columns: 1fr;
      }
      .grouping-selected-card__actions {
        justify-content: flex-start;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const requestSelect = document.querySelector('select[name="pipefy_request_id"]');
      const requestSearchInput = document.getElementById('generated-request-search');
      const requestHelper = document.getElementById('generated-request-helper');
      const initRequestSearch = () => {
        if (!requestSelect || !requestSearchInput) return;

        const allRequestOptions = Array.from(requestSelect.querySelectorAll('option'));
        const requestPlaceholder = allRequestOptions.find((option) => option.value === '') || null;

        const rebuildRequestOptions = () => {
          const selectedRequestId = String(requestSelect.value || '');
          const query = String(requestSearchInput.value || '').trim().toLowerCase();
          requestSelect.innerHTML = '';

          if (requestPlaceholder) {
            requestSelect.appendChild(requestPlaceholder);
          }

          let matchingOptions = allRequestOptions.filter((option) => option.value !== '');
          if (query !== '') {
            matchingOptions = matchingOptions.filter((option) => option.textContent.toLowerCase().includes(query));
          }

          matchingOptions.forEach((option) => requestSelect.appendChild(option));

          if (requestHelper) {
            requestHelper.textContent = query !== '' && matchingOptions.length === 0
              ? 'No hay solicitudes que coincidan con ese RC o JN.'
              : 'Solicitudes disponibles: ' + matchingOptions.length + '.';
          }

          const existsSelected = matchingOptions.some((option) => option.value === selectedRequestId);
          requestSelect.value = existsSelected ? selectedRequestId : '';
        };

        requestSearchInput.addEventListener('sl-input', rebuildRequestOptions);
        requestSearchInput.addEventListener('input', rebuildRequestOptions);
        rebuildRequestOptions();
      };

      initRequestSearch();

      const clientSelect = document.getElementById('generated-client-id');
      const filterClientSelect = document.querySelector('form.dashboard-filters select[name="client_id"]');
      const filterOfficeSelect = document.getElementById('generated-filter-office-id');
      const filterOfficeSearchInput = document.getElementById('generated-filter-office-search');
      const filterOfficeHelper = document.getElementById('generated-filter-office-helper');
      const groupingCard = document.getElementById('grouping-card');
      const groupingOfficeSearchInput = document.getElementById('grouping-office-search');
      const groupingOfficeSelect = document.getElementById('grouping-office-id');
      const groupingOfficeHelper = document.getElementById('grouping-office-helper');
      const groupingRequestSearchInput = document.getElementById('grouping-request-search');
      const groupingRequestSelect = document.getElementById('grouping-request-select');
      const groupingRequestHelper = document.getElementById('grouping-request-helper');
      const addGroupingRequestButton = document.querySelector('.js-add-grouping-request');
      const selectedGroupingRequests = document.getElementById('selected-grouping-requests');
      const additionalRequestContainer = document.getElementById('additional-request-ids');
      const itemsBody = document.getElementById('generated-items-body');
      const subtotalInput = document.getElementById('selected-items-subtotal');
      const selectedRequestCount = document.getElementById('selected-request-count');
      const requestCatalog = @json($requestCatalog ?? []);
      const baseRequestId = {{ (int) ($selectedRequest?->id ?? 0) }};
      const selectedAdditionalRequestIds = @json(collect($defaultAdditionalRequestIds)->map(fn ($value) => (int) $value)->values()->all());
      const defaultRequestOfficeIds = @json($defaultRequestOfficeIds);
      const oldSelectedItemIds = @json($oldSelectedItemIds);
      const oldItemRcs = @json($oldItemRcs);
      const oldSelectedSatCatalogItemIds = @json($oldSelectedSatCatalogItemIds);
      const savedSelectedItemIds = @json($savedSelectedItemIds);
      const savedItemRcs = @json($savedItemRcs);
      const savedInboundMatches = @json($savedInboundMatches);
      const savedSatCatalogItemIds = @json($savedSatCatalogItemIds);
      const inboundEmailCatalog = @json($inboundEmailCatalog ?? []);
      const satCatalogItems = @json(collect($satCatalogItems ?? collect())->values());
      const hasSatCatalogFeature = @json($hasSatCatalogFeature);
      const defaultSatCatalogItemId = @json($defaultSatCatalogItemId ? (int) $defaultSatCatalogItemId : null);
      const savedDraftRequestIds = @json($selectedRequestIdsSummary->map(fn ($value) => (int) $value)->values()->all());
      const hasOldItemSelection = @json($hasOldItemSelection);
      const selectedClientIdOnLoad = Number({{ (int) ($selectedClientId ?? 0) }} || 0);
      const loadedClientId = Number(groupingCard?.dataset.clientId || selectedClientIdOnLoad || 0);
      const baseOfficeFallbackId = Number(defaultRequestOfficeIds[baseRequestId] || {{ (int) ($selectedOfficeId ?? 0) }} || 0);
      let selectedAdditionalRequestIdsState = Array.from(new Set(selectedAdditionalRequestIds
        .map((value) => Number(value || 0))
        .filter((value) => value > 0)));
      let requestOfficeIdsState = Object.entries(defaultRequestOfficeIds || {}).reduce((carry, [requestId, officeId]) => {
        const normalizedRequestId = Number(requestId || 0);
        const normalizedOfficeId = Number(officeId || 0);

        if (normalizedRequestId > 0 && normalizedOfficeId > 0) {
          carry[normalizedRequestId] = normalizedOfficeId;
        }

        return carry;
      }, {});

      if (baseRequestId > 0 && !requestOfficeIdsState[baseRequestId] && baseOfficeFallbackId > 0) {
        requestOfficeIdsState[baseRequestId] = baseOfficeFallbackId;
      }

      const escapeHtml = (value) => String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');

      const normalizeText = (value) => String(value ?? '')
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, ' ')
        .replace(/\s+/g, ' ')
        .trim();

      const amountMatches = (left, right) => Math.abs(Number(left || 0) - Number(right || 0)) <= 0.05;

      const descriptionScore = (itemDescription, inboundDescription) => {
        const normalizedItem = normalizeText(itemDescription);
        const normalizedInbound = normalizeText(inboundDescription);

        if (!normalizedItem || !normalizedInbound) {
          return 0;
        }

        if (normalizedItem === normalizedInbound) {
          return 1;
        }

        if (normalizedItem.includes(normalizedInbound) || normalizedInbound.includes(normalizedItem)) {
          return 0.95;
        }

        const itemTokens = normalizedItem.split(' ').filter(Boolean);
        const inboundTokens = normalizedInbound.split(' ').filter(Boolean);
        const intersection = itemTokens.filter((token) => inboundTokens.includes(token)).length;
        const tokenScore = intersection / Math.max(itemTokens.length || 1, inboundTokens.length || 1);

        return tokenScore >= 0.55 ? tokenScore : 0;
      };

      const officeMatchDetails = (officeId, inboundMatch) => {
        const officeOption = allOfficeOptions.find((option) => option.value === Number(officeId || 0));
        if (!officeOption || !inboundMatch) {
          return { matches: false, score: 0 };
        }

        const haystack = normalizeText([
          inboundMatch.delivery_address,
          inboundMatch.delivery_office_code,
          inboundMatch.delivery_office_name,
        ].filter(Boolean).join(' '));

        if (!haystack) {
          return { matches: false, score: 0 };
        }

        const [officeCodeRaw = '', officeNameRaw = ''] = String(officeOption.label || '').split('|').map((value) => value.trim());
        const officeCode = normalizeText(officeCodeRaw);
        const officeName = normalizeText(officeNameRaw);
        let score = 0;

        if (officeCode && haystack.includes(officeCode)) {
          score += 10;
        }

        if (officeName && haystack.includes(officeName)) {
          score += 5;
        }

        return {
          matches: score > 0,
          score,
        };
      };

      const findInboundMatchForItem = (item, officeId, usedInboundKeys = []) => {
        if (!Array.isArray(inboundEmailCatalog) || inboundEmailCatalog.length === 0) {
          return null;
        }

        let bestMatch = null;
        let bestScore = -1;

        inboundEmailCatalog.forEach((candidate) => {
          const candidateKey = String(candidate.key || '');
          if (!candidateKey || usedInboundKeys.includes(candidateKey)) {
            return;
          }

          if (!amountMatches(item.total_sale, candidate.total)) {
            return;
          }

          const officeDetails = officeMatchDetails(officeId, candidate);
          if (!officeDetails.matches) {
            return;
          }

          if (Number(candidate.selected_pipefy_request_item_id || 0) === Number(item.id || 0)) {
            const finalScore = 1000 + officeDetails.score;
            if (finalScore > bestScore) {
              bestScore = finalScore;
              bestMatch = {
                ...candidate,
                score: finalScore,
                auto_item_rc: candidate.purchase_receipt_number || '',
              };
            }
            return;
          }

          const score = descriptionScore(item.description_clean || item.description_raw || '', candidate.description || '');
          if (score <= 0) {
            return;
          }

          const finalScore = (score * 100) + officeDetails.score;
          if (finalScore > bestScore) {
            bestScore = finalScore;
            bestMatch = {
              ...candidate,
              score: finalScore,
              auto_item_rc: candidate.purchase_receipt_number || '',
            };
          }
        });

        return bestMatch;
      };

      const buildSatOptions = (selectedId) => {
        if (!hasSatCatalogFeature) {
          return '';
        }

        const normalizedSelected = String(selectedId || '');
        const options = ['<option value="">Selecciona clave SAT</option>'];

        satCatalogItems.forEach((catalogItem) => {
          const optionValue = String(catalogItem.id || '');
          const label = catalogItem.display_label || `${catalogItem.name || ''} | ${catalogItem.sat_code || ''}`;
          const inactiveSuffix = catalogItem.is_active ? '' : ' (inactivo)';
          options.push(`<option value="${escapeHtml(optionValue)}" ${optionValue === normalizedSelected ? 'selected' : ''}>${escapeHtml(label + inactiveSuffix)}</option>`);
        });

        return options.join('');
      };

      const initOfficeSelect = (clientField, officeField, searchField, helperField, emptyMessage) => {
        if (!clientField || !officeField) {
          return;
        }

        const allOptions = Array.from(officeField.querySelectorAll('option')).map((option) => option.cloneNode(true));
        const placeholder = allOptions.find((option) => option.value === '') || null;

        const rebuildOfficeOptions = () => {
          const currentClientId = String(clientField.value || '');
          const selectedOfficeId = String(officeField.value || '');
          const query = String(searchField?.value || '').trim().toLowerCase();
          officeField.innerHTML = '';

          if (placeholder) {
            officeField.appendChild(placeholder.cloneNode(true));
          }

          let optionsForClient = allOptions.filter((option) => option.value !== '' && String(option.dataset.clientId || '') === currentClientId);

          if (query !== '') {
            optionsForClient = optionsForClient.filter((option) => option.textContent.toLowerCase().includes(query));
          }

          optionsForClient.forEach((option) => officeField.appendChild(option.cloneNode(true)));

          if (helperField) {
            if (!currentClientId) {
              helperField.textContent = emptyMessage;
            } else if (optionsForClient.length === 0 && query !== '') {
              helperField.textContent = 'No hay oficinas que coincidan con la búsqueda para este cliente.';
            } else {
              helperField.textContent = 'Oficinas disponibles: ' + optionsForClient.length + '.';
            }
          }

          const existsSelected = optionsForClient.some((option) => option.value === selectedOfficeId);
          officeField.value = existsSelected ? selectedOfficeId : '';
        };

        clientField.addEventListener('change', rebuildOfficeOptions);
        if (searchField) {
          searchField.addEventListener('sl-input', rebuildOfficeOptions);
          searchField.addEventListener('input', rebuildOfficeOptions);
        }

        rebuildOfficeOptions();
      };

      initOfficeSelect(
        filterClientSelect,
        filterOfficeSelect,
        filterOfficeSearchInput,
        filterOfficeHelper,
        'Selecciona cliente para ver oficinas disponibles.'
      );

      if (!clientSelect || !groupingCard || !groupingOfficeSelect || !groupingRequestSelect || !itemsBody) {
        return;
      }

      const allOfficeOptions = Array.from(groupingOfficeSelect.querySelectorAll('option')).map((option) => ({
        value: Number(option.value || 0),
        clientId: Number(option.dataset.clientId || 0),
        label: option.textContent.trim(),
      }));
      const allGroupingRequestOptions = Array.from(groupingRequestSelect.querySelectorAll('option')).map((option) => option.cloneNode(true));
      const groupingRequestPlaceholder = allGroupingRequestOptions.find((option) => option.value === '') || null;

      const currentClientId = () => Number(clientSelect.value || 0);
      const currentClientOption = () => clientSelect.options?.[clientSelect.selectedIndex] || null;
      const currentClientRequiresItemRc = () => String(currentClientOption()?.dataset.requiresItemRc || '0') === '1';
      const currentClientIsGroupable = () => String(currentClientOption()?.dataset.isGroupable || '0') === '1';
      const clientMatchesLoadedContext = () => loadedClientId > 0 && currentClientId() === loadedClientId;
      const canAddGroupedRequests = () => baseRequestId > 0 && currentClientIsGroupable() && clientMatchesLoadedContext();

      const officeOptionsForClient = (clientId, query = '') => {
        const normalizedClientId = Number(clientId || 0);
        const normalizedQuery = String(query || '').trim().toLowerCase();

        return allOfficeOptions.filter((option) => {
          if (option.value <= 0 || option.clientId !== normalizedClientId) {
            return false;
          }

          return normalizedQuery === '' || option.label.toLowerCase().includes(normalizedQuery);
        });
      };

      const officeLabelFromId = (officeId) => {
        const match = allOfficeOptions.find((option) => option.value === Number(officeId || 0));
        return match?.label || '';
      };

      const buildOfficeOptionsHtml = (selectedOfficeId) => {
        const options = ['<option value="">Selecciona oficina</option>'];

        officeOptionsForClient(currentClientId()).forEach((option) => {
          const isSelected = Number(selectedOfficeId || 0) === option.value;
          options.push(`<option value="${option.value}" ${isSelected ? 'selected' : ''}>${escapeHtml(option.label)}</option>`);
        });

        return options.join('');
      };

      const sanitizeRequestOfficeIds = () => {
        const clientId = currentClientId();

        Object.keys(requestOfficeIdsState).forEach((requestId) => {
          const officeId = Number(requestOfficeIdsState[requestId] || 0);
          const officeOption = allOfficeOptions.find((option) => option.value === officeId);

          if (!officeOption || (clientId > 0 && officeOption.clientId !== clientId)) {
            delete requestOfficeIdsState[requestId];
          }
        });
      };

      const ensureBaseRequestOffice = () => {
        if (baseRequestId <= 0 || requestOfficeIdsState[baseRequestId]) {
          return;
        }

        const groupingOfficeId = Number(groupingOfficeSelect.value || 0);
        if (groupingOfficeId > 0) {
          requestOfficeIdsState[baseRequestId] = groupingOfficeId;
          return;
        }

        if (baseOfficeFallbackId > 0) {
          const fallbackOffice = allOfficeOptions.find((option) => option.value === baseOfficeFallbackId);
          if (fallbackOffice && fallbackOffice.clientId === currentClientId()) {
            requestOfficeIdsState[baseRequestId] = baseOfficeFallbackId;
          }
        }
      };

      const activeRequestIds = () => {
        const ids = [];

        if (baseRequestId > 0) {
          ids.push(baseRequestId);
        }

        selectedAdditionalRequestIdsState.forEach((requestId) => {
          if (requestId > 0 && !ids.includes(requestId)) {
            ids.push(requestId);
          }
        });

        return ids;
      };

      const syncAdditionalRequestInputs = () => {
        if (!additionalRequestContainer) {
          return;
        }

        additionalRequestContainer.innerHTML = selectedAdditionalRequestIdsState
          .map((requestId) => `<input type="hidden" name="additional_request_ids[]" value="${requestId}">`)
          .join('');
      };

      const rebuildGroupingOfficeOptions = () => {
        const selectedOfficeId = String(groupingOfficeSelect.value || '');
        const clientId = currentClientId();
        const query = String(groupingOfficeSearchInput?.value || '').trim().toLowerCase();
        const filteredOptions = officeOptionsForClient(clientId, query);

        groupingOfficeSelect.innerHTML = '<option value="">Selecciona oficina</option>';
        filteredOptions.forEach((option) => {
          groupingOfficeSelect.insertAdjacentHTML(
            'beforeend',
            `<option value="${option.value}" ${String(option.value) === selectedOfficeId ? 'selected' : ''}>${escapeHtml(option.label)}</option>`
          );
        });

        const hasSelectedOption = filteredOptions.some((option) => String(option.value) === selectedOfficeId);
        groupingOfficeSelect.value = hasSelectedOption ? selectedOfficeId : '';

        if (!clientId) {
          groupingOfficeHelper.textContent = 'Selecciona el cliente de la vista previa para ver oficinas disponibles.';
        } else if (filteredOptions.length === 0 && query !== '') {
          groupingOfficeHelper.textContent = 'No hay oficinas que coincidan con la búsqueda para este cliente.';
        } else {
          groupingOfficeHelper.textContent = 'Oficinas disponibles: ' + filteredOptions.length + '.';
        }
      };

      const renderSelectedGroupingRequests = () => {
        syncAdditionalRequestInputs();

        if (!selectedGroupingRequests || baseRequestId <= 0) {
          return;
        }

        ensureBaseRequestOffice();
        const requestIds = activeRequestIds();

        selectedGroupingRequests.innerHTML = requestIds.map((requestId) => {
          const requestEntry = requestCatalog[requestId] || {};
          const itemsCount = Array.isArray(requestEntry.items) ? requestEntry.items.length : 0;
          const requestOfficeId = Number(requestOfficeIdsState[requestId] || 0);
          const officeLabel = officeLabelFromId(requestOfficeId);
          const isBaseRequest = requestId === baseRequestId;
          const groupLabel = String(requestEntry.group_label || '').trim();

          return `
            <div class="grouping-selected-card">
              <div class="grouping-selected-card__body">
                <strong>#${escapeHtml(requestEntry.id || requestId)} | ${escapeHtml(requestEntry.project_name || 'Sin PROJECT NAME')}</strong>
                <small>${isBaseRequest ? 'Solicitud inicial' : 'Solicitud agregada'}</small>
                <small>JN: ${escapeHtml(requestEntry.title || '-')}</small>
                <small>RC solicitud (Pipefy): ${escapeHtml(requestEntry.rc_list || '-')}</small>
                ${groupLabel !== '' ? `<small>Grupo detectado: ${escapeHtml(groupLabel)}</small>` : ''}
                <small>Artículos cargados: ${escapeHtml(itemsCount)}</small>
                <small>Oficina actual: ${escapeHtml(officeLabel || 'Pendiente por seleccionar')}</small>
              </div>
              <div class="grouping-selected-card__office">
                <label>Oficina de esta solicitud</label>
                <select
                  name="request_office_ids[${requestId}]"
                  class="js-request-office-select"
                  data-request-id="${requestId}"
                  required
                >
                  ${buildOfficeOptionsHtml(requestOfficeId)}
                </select>
                <small>Esta oficina se insertará en el concepto final de los artículos de la solicitud.</small>
              </div>
              <div class="grouping-selected-card__actions">
                ${isBaseRequest
                  ? '<span class="badge">Siempre incluida</span>'
                  : `<button type="button" class="btn btn-secondary js-remove-selected-request" data-request-id="${requestId}">Quitar</button>`}
              </div>
            </div>
          `;
        }).join('');
      };

      const rebuildGroupingRequestOptions = () => {
        const selectedRequestId = String(groupingRequestSelect.value || '');
        const query = String(groupingRequestSearchInput?.value || '').trim().toLowerCase();
        const allowGroupedRequests = canAddGroupedRequests();

        groupingRequestSelect.innerHTML = '';
        if (groupingRequestPlaceholder) {
          groupingRequestSelect.appendChild(groupingRequestPlaceholder.cloneNode(true));
        }

        groupingRequestSearchInput.disabled = !allowGroupedRequests;
        groupingRequestSelect.disabled = !allowGroupedRequests;
        addGroupingRequestButton.disabled = !allowGroupedRequests;

        if (!currentClientId()) {
          groupingRequestHelper.textContent = 'Primero selecciona el cliente de la vista previa.';
          return;
        }

        if (!currentClientIsGroupable()) {
          groupingRequestHelper.textContent = 'Este cliente no tiene agrupación activa; en esta vista previa solo se trabajará la solicitud inicial.';
          return;
        }

        if (!clientMatchesLoadedContext()) {
          groupingRequestHelper.textContent = loadedClientId > 0
            ? 'Si cambias el cliente, recarga la solicitud inicial para recalcular las solicitudes compatibles.'
            : 'Selecciona primero el cliente en la carga inicial para listar solicitudes compatibles.';
          return;
        }

        let matchingOptions = allGroupingRequestOptions.filter((option) => {
          if (option.value === '') {
            return false;
          }

          return !selectedAdditionalRequestIdsState.includes(Number(option.value || 0));
        });

        if (query !== '') {
          matchingOptions = matchingOptions.filter((option) => option.textContent.toLowerCase().includes(query));
        }

        matchingOptions.forEach((option) => groupingRequestSelect.appendChild(option.cloneNode(true)));

        const existsSelected = matchingOptions.some((option) => option.value === selectedRequestId);
        groupingRequestSelect.value = existsSelected ? selectedRequestId : '';
        groupingRequestHelper.textContent = query !== '' && matchingOptions.length === 0
          ? 'No hay solicitudes compatibles con esa búsqueda.'
          : 'Solicitudes compatibles disponibles: ' + matchingOptions.length + '.';
      };

      const updateItemRcRequirement = () => {
        const requiresItemRc = currentClientRequiresItemRc();
        const itemRcColumns = Array.from(document.querySelectorAll('.js-item-rc-column'));
        const itemRcInputs = Array.from(document.querySelectorAll('.js-item-rc-input'));

        itemRcColumns.forEach((column) => {
          column.style.display = requiresItemRc ? '' : 'none';
        });

        itemRcInputs.forEach((input) => {
          const row = input.closest('tr');
          const checkbox = row?.querySelector('input[name="item_ids[]"]');
          input.required = requiresItemRc && !!checkbox?.checked;
        });
      };

      const updateSubtotal = () => {
        if (!subtotalInput) {
          return;
        }

        const checkedItems = Array.from(document.querySelectorAll('input[name="item_ids[]"]:checked'));
        const subtotal = checkedItems.reduce((carry, checkbox) => carry + Number(checkbox.dataset.total || 0), 0);
        subtotalInput.textContent = '$' + subtotal.toLocaleString('en-US', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        });
      };

      const renderItems = () => {
        if (!baseRequestId || !requestCatalog[baseRequestId]) {
          itemsBody.innerHTML = '<tr><td colspan="{{ $itemColumnCount }}">No hay artículos disponibles para esta solicitud.</td></tr>';
          return;
        }

        const liveCheckedItems = {};
        document.querySelectorAll('input[name="item_ids[]"]').forEach((checkbox) => {
          liveCheckedItems[Number(checkbox.value || 0)] = checkbox.checked;
        });

        const liveItemRcs = {};
        const liveItemRcAutoValues = {};
        document.querySelectorAll('input[name^="item_rcs["]').forEach((input) => {
          const match = input.name.match(/^item_rcs\[(\d+)\]$/);
          if (match) {
            liveItemRcs[Number(match[1])] = input.value;
            liveItemRcAutoValues[Number(match[1])] = String(input.dataset.autoItemRc || '');
          }
        });

        const liveSatSelections = {};
        document.querySelectorAll('select[name^="sat_catalog_item_ids["]').forEach((select) => {
          const match = select.name.match(/^sat_catalog_item_ids\[(\d+)\]$/);
          if (match) {
            liveSatSelections[Number(match[1])] = select.value;
          }
        });

        const liveInboundEmailIds = {};
        document.querySelectorAll('input[name^="inbound_email_ids["]').forEach((input) => {
          const match = input.name.match(/^inbound_email_ids\[(\d+)\]$/);
          if (match) {
            liveInboundEmailIds[Number(match[1])] = Number(input.value || 0);
          }
        });

        const liveInboundEmailItemIds = {};
        document.querySelectorAll('input[name^="inbound_email_item_ids["]').forEach((input) => {
          const match = input.name.match(/^inbound_email_item_ids\[(\d+)\]$/);
          if (match) {
            liveInboundEmailItemIds[Number(match[1])] = Number(input.value || 0);
          }
        });

        const requestIds = activeRequestIds();
        if (selectedRequestCount) {
          selectedRequestCount.textContent = String(requestIds.length);
        }

        const rows = [];
        const usedInboundKeys = [];
        requestIds.forEach((requestId) => {
          const requestEntry = requestCatalog[requestId];
          if (!requestEntry || !Array.isArray(requestEntry.items)) {
            return;
          }

          const officeLabel = officeLabelFromId(requestOfficeIdsState[requestId] || 0);

          requestEntry.items.forEach((item) => {
            const itemId = Number(item.id || 0);
            const sourceRequestId = Number(item.request_id || 0);
            const requestWasAlreadySaved = savedDraftRequestIds.includes(sourceRequestId);
            const isChecked = liveCheckedItems[itemId] !== undefined
              ? liveCheckedItems[itemId]
              : (hasOldItemSelection
                ? oldSelectedItemIds.includes(itemId)
                : (requestWasAlreadySaved ? savedSelectedItemIds.includes(itemId) : true));
            const itemRcValue = liveItemRcs[itemId] !== undefined
              ? liveItemRcs[itemId]
              : (oldItemRcs && oldItemRcs[itemId] !== undefined
                ? oldItemRcs[itemId]
                : (savedItemRcs && savedItemRcs[itemId] !== undefined ? savedItemRcs[itemId] : (item.item_rc || '')));
            const satCatalogValue = liveSatSelections[itemId] !== undefined
              ? liveSatSelections[itemId]
              : (oldSelectedSatCatalogItemIds && oldSelectedSatCatalogItemIds[itemId] !== undefined
                ? oldSelectedSatCatalogItemIds[itemId]
                : (savedSatCatalogItemIds && savedSatCatalogItemIds[itemId] !== undefined
                  ? savedSatCatalogItemIds[itemId]
                  : (item.sat_catalog_item_id || defaultSatCatalogItemId || '')));
            const savedInboundMatch = savedInboundMatches[itemId] || item.matched_inbound || null;
            let inboundMatch = null;

            if (liveInboundEmailIds[itemId] && liveInboundEmailItemIds[itemId]) {
              inboundMatch = inboundEmailCatalog.find((candidate) =>
                Number(candidate.inbound_email_id || 0) === Number(liveInboundEmailIds[itemId])
                && Number(candidate.inbound_email_item_id || 0) === Number(liveInboundEmailItemIds[itemId])
              ) || null;
            }

            if (!inboundMatch && savedInboundMatch && savedInboundMatch.inbound_email_id && savedInboundMatch.inbound_email_item_id) {
              inboundMatch = inboundEmailCatalog.find((candidate) =>
                Number(candidate.inbound_email_id || 0) === Number(savedInboundMatch.inbound_email_id)
                && Number(candidate.inbound_email_item_id || 0) === Number(savedInboundMatch.inbound_email_item_id)
              ) || savedInboundMatch;
            }

            if (!inboundMatch) {
              inboundMatch = findInboundMatchForItem(item, requestOfficeIdsState[requestId] || 0, usedInboundKeys);
            }

            if (inboundMatch?.key) {
              usedInboundKeys.push(String(inboundMatch.key));
            }

            const inboundRcValue = inboundMatch?.auto_item_rc || inboundMatch?.purchase_receipt_number || '';
            const previousAutoItemRc = String(liveItemRcAutoValues[itemId] || '');
            const effectiveItemRcValue = inboundMatch
              ? ((itemRcValue === '' || itemRcValue === previousAutoItemRc) ? inboundRcValue : itemRcValue)
              : (itemRcValue === previousAutoItemRc ? '' : itemRcValue);
            const inboundLabel = inboundMatch
              ? `RC ${inboundMatch.purchase_receipt_number || '-'} | ${Number(inboundMatch.total || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
              : 'Sin match automático';
            const inboundSubLabel = inboundMatch
              ? `${inboundMatch.delivery_office_code || ''} ${inboundMatch.delivery_office_name || ''}`.trim() || (inboundMatch.delivery_address || '')
              : 'Revisa descripción, oficina y monto.';

            rows.push(`
              <tr>
                <td>
                  <input type="checkbox" name="item_ids[]" value="${itemId}" data-total="${Number(item.total_sale || 0)}" ${isChecked ? 'checked' : ''}>
                </td>
                <td class="request-cell">
                  <strong>#${escapeHtml(requestEntry.id)}</strong>
                  <small>${escapeHtml(requestEntry.project_name || 'Sin PROJECT NAME')}</small>
                  <small>JN: ${escapeHtml(requestEntry.title || '-')}</small>
                  <small>RC solicitud (Pipefy): ${escapeHtml(requestEntry.rc_list || '-')}</small>
                  <small>Oficina: ${escapeHtml(officeLabel || 'Pendiente por seleccionar en el paso 1')}</small>
                </td>
                <td>${escapeHtml(item.product_index || '-')}</td>
                <td>${escapeHtml(item.concept_code || '-')}</td>
                <td>
                  <div>${escapeHtml(item.description_clean || '-')}</div>
                  ${item.is_partial_invoice ? `
                    <div style="margin-top:6px;">
                      <sl-badge variant="warning" pill>Factura parcial</sl-badge>
                    </div>
                  ` : ''}
                </td>
                <td>
                  <div>${Number(item.quantity || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                  ${item.is_partial_invoice ? `<small class="subtle" style="display:block; margin-top:4px;">de ${Number(item.original_quantity || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} piezas</small>` : ''}
                </td>
                <td class="js-item-rc-column" style="display:none;">
                  <input
                    type="text"
                    name="item_rcs[${itemId}]"
                    value="${escapeHtml(effectiveItemRcValue)}"
                    maxlength="120"
                    placeholder="RC cliente del artículo"
                    class="js-item-rc-input"
                    data-auto-item-rc="${escapeHtml(inboundRcValue)}"
                  >
                </td>
                <td class="request-cell">
                  <input type="hidden" name="inbound_email_ids[${itemId}]" value="${Number(inboundMatch?.inbound_email_id || 0) || ''}">
                  <input type="hidden" name="inbound_email_item_ids[${itemId}]" value="${Number(inboundMatch?.inbound_email_item_id || 0) || ''}">
                  <strong>${escapeHtml(inboundLabel)}</strong>
                  <small>${escapeHtml(inboundSubLabel)}</small>
                </td>
                ${hasSatCatalogFeature ? `
                  <td>
                    <select name="sat_catalog_item_ids[${itemId}]">
                      ${buildSatOptions(satCatalogValue)}
                    </select>
                  </td>
                ` : ''}
                <td>$${Number(item.unit_sale || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                <td>
                  <div>$${Number(item.total_sale || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                  ${item.is_partial_invoice ? `<small class="subtle" style="display:block; margin-top:4px;">ajustado por piezas cargadas por proveedor</small>` : ''}
                </td>
              </tr>
            `);
          });
        });

        itemsBody.innerHTML = rows.length
          ? rows.join('')
          : '<tr><td colspan="{{ $itemColumnCount }}">No hay artículos disponibles para las solicitudes seleccionadas.</td></tr>';

        itemsBody.querySelectorAll('input[name="item_ids[]"]').forEach((checkbox) => {
          checkbox.addEventListener('change', () => {
            updateSubtotal();
            updateItemRcRequirement();
          });
        });

        updateSubtotal();
        updateItemRcRequirement();
      };

      const updateGroupingState = () => {
        sanitizeRequestOfficeIds();

        if (!canAddGroupedRequests() && selectedAdditionalRequestIdsState.length > 0) {
          selectedAdditionalRequestIdsState = [];
        }

        rebuildGroupingOfficeOptions();
        ensureBaseRequestOffice();
        renderSelectedGroupingRequests();
        rebuildGroupingRequestOptions();
        renderItems();
        updateItemRcRequirement();
      };

      if (groupingOfficeSearchInput) {
        groupingOfficeSearchInput.addEventListener('sl-input', rebuildGroupingOfficeOptions);
        groupingOfficeSearchInput.addEventListener('input', rebuildGroupingOfficeOptions);
      }

      if (groupingRequestSearchInput) {
        groupingRequestSearchInput.addEventListener('sl-input', rebuildGroupingRequestOptions);
        groupingRequestSearchInput.addEventListener('input', rebuildGroupingRequestOptions);
      }

      clientSelect.addEventListener('change', updateGroupingState);
      groupingOfficeSelect.addEventListener('change', () => {
        if (baseRequestId > 0 && !requestOfficeIdsState[baseRequestId]) {
          requestOfficeIdsState[baseRequestId] = Number(groupingOfficeSelect.value || 0);
        }

        renderSelectedGroupingRequests();
        renderItems();
      });

      if (addGroupingRequestButton) {
        addGroupingRequestButton.addEventListener('click', () => {
          const requestId = Number(groupingRequestSelect.value || 0);
          const officeId = Number(groupingOfficeSelect.value || 0);

          if (!requestId) {
            groupingRequestHelper.textContent = 'Selecciona primero la solicitud que quieres agregar.';
            return;
          }

          if (!officeId) {
            groupingOfficeHelper.textContent = 'Selecciona la oficina de la solicitud antes de agregarla.';
            return;
          }

          if (selectedAdditionalRequestIdsState.includes(requestId)) {
            return;
          }

          selectedAdditionalRequestIdsState = Array.from(new Set([
            ...selectedAdditionalRequestIdsState,
            requestId,
          ]));
          requestOfficeIdsState[requestId] = officeId;

          renderSelectedGroupingRequests();
          rebuildGroupingRequestOptions();
          renderItems();
          document.querySelector('.movements-table-wrap')?.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
          });
        });
      }

      selectedGroupingRequests?.addEventListener('change', (event) => {
        const officeSelect = event.target.closest('.js-request-office-select');
        if (!officeSelect) {
          return;
        }

        const requestId = Number(officeSelect.dataset.requestId || 0);
        if (!requestId) {
          return;
        }

        const officeId = Number(officeSelect.value || 0);
        if (officeId > 0) {
          requestOfficeIdsState[requestId] = officeId;
        } else {
          delete requestOfficeIdsState[requestId];
        }

        renderItems();
      });

      selectedGroupingRequests?.addEventListener('click', (event) => {
        const button = event.target.closest('.js-remove-selected-request');
        if (!button) {
          return;
        }

        const requestId = Number(button.dataset.requestId || 0);
        if (!requestId) {
          return;
        }

        selectedAdditionalRequestIdsState = selectedAdditionalRequestIdsState.filter((value) => value !== requestId);
        delete requestOfficeIdsState[requestId];

        renderSelectedGroupingRequests();
        rebuildGroupingRequestOptions();
        renderItems();
      });

      updateGroupingState();
    });
  </script>
@endpush