@extends('layouts.enterprise')

@section('title', 'Solicitudes de pago')

@section('content')
  <div class="card" id="accountant-solicitudes-pago">
    <h1 class="page-title">Solicitudes de pago</h1>
    <p class="subtle">Módulo de seguimiento por petición para egresos.</p>

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

    <h2 class="section-title">Estatus por petición (Solicitud)</h2>
    <p class="subtle">Seguimiento de avance por proveedores y por monto esperado.</p>

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

    @php
      $paymentRequestsRouteName = request()->routeIs('admin.*')
        ? 'admin.expenses.payment_requests'
        : 'accountant.expenses.payment_requests';
      $hasActiveFilters = (($filters['q'] ?? '') !== '')
        || (($filters['completion'] ?? 'all') !== 'all')
        || (($filters['partial_status'] ?? 'all') !== 'all')
        || !empty($filters['date_from'] ?? null)
        || !empty($filters['date_to'] ?? null)
        || (($filters['progress_min'] ?? null) !== null && $filters['progress_min'] !== '')
        || (($filters['progress_max'] ?? null) !== null && $filters['progress_max'] !== '')
        || (($filters['amount_progress_min'] ?? null) !== null && $filters['amount_progress_min'] !== '')
        || (($filters['amount_progress_max'] ?? null) !== null && $filters['amount_progress_max'] !== '');
      $partialToggleRouteName = request()->routeIs('admin.*')
        ? 'admin.expenses.payment_requests.partial'
        : 'accountant.expenses.payment_requests.partial';
    @endphp

    <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="{{ route($paymentRequestsRouteName) }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--four">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="PROJECT NAME, Job Number o RC">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="completion">
              <option value="all" @selected(($filters['completion'] ?? 'all') === 'all')>Todos</option>
              <option value="complete" @selected(($filters['completion'] ?? 'all') === 'complete')>Completado</option>
              <option value="incomplete" @selected(($filters['completion'] ?? 'all') === 'incomplete')>Incompleto</option>
            </select>
          </div>
          <div class="field">
            <label>Parciales</label>
            <select name="partial_status">
              <option value="all" @selected(($filters['partial_status'] ?? 'all') === 'all')>Todas</option>
              <option value="partial" @selected(($filters['partial_status'] ?? 'all') === 'partial')>Solo parciales</option>
              <option value="non_partial" @selected(($filters['partial_status'] ?? 'all') === 'non_partial')>Sin parciales</option>
            </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 class="field">
            <label>% proveedores mínimo</label>
            <input type="number" min="0" max="100" name="progress_min" value="{{ $filters['progress_min'] ?? '' }}" placeholder="0">
          </div>
          <div class="field">
            <label>% proveedores máximo</label>
            <input type="number" min="0" max="100" name="progress_max" value="{{ $filters['progress_max'] ?? '' }}" placeholder="100">
          </div>
          <div class="field">
            <label>% monto mínimo</label>
            <input type="number" min="0" max="100" name="amount_progress_min" value="{{ $filters['amount_progress_min'] ?? '' }}" placeholder="0">
          </div>
          <div class="field">
            <label>% monto máximo</label>
            <input type="number" min="0" max="100" name="amount_progress_max" value="{{ $filters['amount_progress_max'] ?? '' }}" placeholder="100">
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ route($paymentRequestsRouteName) }}">Limpiar</a>
          <span class="badge">Resultados: {{ $requests->count() }}</span>
        </div>
      </form>
    </sl-details>

    <div class="solicitud-accordion">
      @forelse($requests as $req)
        @php
          $summary = $requestSummaries[$req->id] ?? [
            'providers_total' => 0,
            'expected_invoices' => 0,
            'providers_with_invoice' => 0,
            'providers_partial' => 0,
            'providers_without_invoice' => 0,
            'completion_percent' => 0,
            'is_complete' => false,
            'has_expected_amount' => false,
            'amount_expected' => null,
            'amount_invoiced' => 0,
            'amount_pending' => null,
            'amount_completion_percent' => 0,
            'amount_completion_percent_for_bar' => 0,
            'is_amount_complete' => false,
            'pending_provider_names' => [],
          ];
          $providersPartialEnabled = $req->providers->filter(fn ($provider) => (bool) ($provider->allows_partial_invoicing ?? false))->count();
          $requestSubtotal = $req->subtotal_cost !== null
            ? (float) $req->subtotal_cost
            : (($summary['has_expected_amount'] ?? false) && isset($summary['amount_expected'])
              ? round(((float) $summary['amount_expected']) / 1.16, 2)
              : null);
          $requestSubtotalIva = $requestSubtotal !== null ? round($requestSubtotal * 1.16, 2) : null;
        @endphp

        <details class="solicitud-request {{ $summary['is_complete'] ? 'is-complete' : '' }}" data-request-card="{{ $req->id }}">
          <summary class="solicitud-request__summary">
            <span class="solicitud-request__toggle" aria-hidden="true"></span>

            <div class="solicitud-request__summary-main">
              <div class="solicitud-request__title">{{ $req->project_name ?: 'Sin PROJECT NAME' }}</div>
              <div class="solicitud-request__subtitle">Job Number: {{ $req->title ?: '-' }}</div>
              <div class="solicitud-request__rc">RC(s): {{ $req->rc_list ?: '-' }}</div>
              <div class="solicitud-request__meta">Ejecutivo: {{ $req->executive_display ?: '-' }}</div>
              <div class="solicitud-request__meta">Cliente: {{ $req->client_display ?: '-' }}</div>
              <div class="solicitud-request__subtotal-highlight">
                Subtotal solicitud:
                <strong>
                  {{ $requestSubtotal !== null ? '$'.number_format($requestSubtotal, 2) : 'Sin subtotal' }}
                </strong>
                @if($requestSubtotalIva !== null)
                  <span style="margin-left:8px;">Con IVA: <strong>${{ number_format($requestSubtotalIva, 2) }}</strong></span>
                @endif
              </div>
            </div>

            <div class="solicitud-request__chips">
              @if($requestSubtotal !== null)
                <span class="badge solicitud-subtotal-chip">Subtotal: ${{ number_format($requestSubtotal, 2) }}</span>
                <span class="badge solicitud-subtotal-chip">Subtotal + IVA: ${{ number_format($requestSubtotalIva, 2) }}</span>
              @endif
              <span class="badge">Prov: {{ $summary['providers_total'] }}</span>
              <span class="badge">Esperadas: {{ $summary['expected_invoices'] }}</span>
              <span class="badge">Con factura: {{ $summary['providers_with_invoice'] }}</span>
              <span class="badge">Parciales: {{ $summary['providers_partial'] ?? 0 }}</span>
              <span class="badge">Parcial habilitado: <span class="js-partial-enabled-count">{{ $providersPartialEnabled }}</span></span>
              <span class="badge">Pendientes: {{ $summary['providers_without_invoice'] }}</span>
              <span class="badge {{ $summary['is_complete'] ? 'solicitud-progress-chip--ok' : 'solicitud-progress-chip--pending' }}">
                Proveedores: {{ $summary['completion_percent'] }}%
              </span>
              <span class="badge {{ $summary['is_amount_complete'] ? 'solicitud-progress-chip--ok' : 'solicitud-progress-chip--pending' }}">
                Monto: {{ $summary['amount_completion_percent'] }}%
              </span>
            </div>
          </summary>

          <div class="solicitud-request__body">
            @if($requestSubtotal !== null)
              <div class="solicitud-subtotal-hero">
                <span class="solicitud-subtotal-hero__label">Subtotal de la solicitud (referencia principal):</span>
                <span class="solicitud-subtotal-hero__value">${{ number_format($requestSubtotal, 2) }}</span>
                <span class="solicitud-subtotal-hero__label">Subtotal + IVA (16%): <strong>${{ number_format($requestSubtotalIva, 2) }}</strong></span>
              </div>
            @endif

            <div class="solicitud-progress">
              <div class="solicitud-progress__label">
                <strong>Estado de solicitud:</strong>
                {{ $summary['completion_percent'] }}% ({{ $summary['providers_with_invoice'] }}/{{ $summary['expected_invoices'] }})
              </div>
              <div class="solicitud-progress__bar {{ ($summary['is_complete'] || $summary['completion_percent'] >= 100) ? 'is-complete' : '' }}">
                <span style="width: {{ $summary['completion_percent'] }}%;"></span>
              </div>
            </div>

            <div class="solicitud-progress">
              <div class="solicitud-progress__label">
                <strong>Avance por monto:</strong>
                @if($summary['has_expected_amount'] && $summary['amount_expected'] !== null)
                  {{ $summary['amount_completion_percent'] }}%
                  ({{ number_format($summary['amount_invoiced'], 2) }}/{{ number_format($summary['amount_expected'], 2) }})
                @else
                  Sin monto esperado
                @endif
              </div>
              <div class="solicitud-progress__bar {{ ($summary['is_amount_complete'] || $summary['amount_completion_percent'] >= 100) ? 'is-complete' : '' }}">
                <span style="width: {{ $summary['amount_completion_percent_for_bar'] }}%;"></span>
              </div>
              @if($summary['has_expected_amount'] && $summary['amount_pending'] !== null)
                <div class="solicitud-progress__meta">
                  Saldo pendiente: {{ number_format($summary['amount_pending'], 2) }}
                </div>
              @endif
            </div>

            <div class="solicitud-request__pending">
              <strong>PENDIENTES:</strong>
              {{ count($summary['pending_provider_names']) ? implode(', ', $summary['pending_provider_names']) : 'Todos enviaron.' }}
            </div>

            <table>
              <thead>
                <tr>
                  <th>Proveedor</th>
                  <th>Parcial</th>
                  <th>Facturas</th>
                  <th>Monto esperado</th>
                  <th>Monto sin IVA</th>
                  <th>Monto facturado</th>
                  <th>Saldo pendiente</th>
                  <th>Productos</th>
                  <th>Estatus</th>
                </tr>
              </thead>
              <tbody>
                @forelse($req->providers as $provider)
                  @php
                    $totals = $providerTotals[$provider->id] ?? null;
                    $invoicePdf = $providerInvoicePdfLinks[$provider->id] ?? null;
                    $invoicesCount = (int) ($totals?->invoices_count ?? 0);
                    $invoiced = $totals?->total_invoiced ? (float) $totals->total_invoiced : 0.0;
                    $providerItems = $provider->items
                      ->sortBy('product_index')
                      ->values();
                    $expectedBase = $provider->total_cost;
                    if ($expectedBase === null) {
                      $itemCostTotal = (float) $providerItems->sum(function ($it) {
                        return (float) ($it->total_cost ?? 0);
                      });
                      if ($itemCostTotal > 0) {
                        $expectedBase = $itemCostTotal;
                      }
                    }
                    if ($expectedBase === null) {
                      $expectedBase = $provider->total_sale;
                    }
                    if ($expectedBase === null) {
                      $itemSaleTotal = (float) $providerItems->sum(function ($it) {
                        return (float) ($it->total_sale ?? 0);
                      });
                      if ($itemSaleTotal > 0) {
                        $expectedBase = $itemSaleTotal;
                      }
                    }
                    $expected = $expectedBase !== null ? ((float) $expectedBase * 1.16) : null;
                    $pending = $expected !== null ? max($expected - $invoiced, 0) : null;
                    $providerItemsTotal = (int) ($providerItemsTotals[$provider->id] ?? 0);
                    $providerMatchedCount = (int) ($providerMatchedItems[$provider->id] ?? 0);
                    $pendingApprovalCount = (int) ($providerPendingApprovalCounts[$provider->id] ?? 0);
                    $hasLegacyApprovedInvoices = $invoicesCount > 0 && $providerMatchedCount === 0 && $providerItemsTotal > 0;
                    $partialEnabled = (bool) ($provider->allows_partial_invoicing ?? false);
                    $providerRequestedQuantity = (float) $providerItems->sum(function ($it) {
                      return \App\Support\ProviderPartialBilling::requestedQuantity($it);
                    });
                    $providerUploadedQuantity = (float) $providerItems->sum(function ($it) use ($providerUploadedQuantities) {
                      $requested = \App\Support\ProviderPartialBilling::requestedQuantity($it);
                      $uploaded = (float) ($providerUploadedQuantities[(int) $it->id] ?? 0);

                      return min($requested, max(0, $uploaded));
                    });
                    if ($partialEnabled) {
                      $providerStatus = $providerUploadedQuantity <= 0.0001
                        ? 'none'
                        : ($providerUploadedQuantity + 0.0001 < $providerRequestedQuantity ? 'partial' : 'complete');
                    } elseif ($providerItemsTotal > 0 && !$hasLegacyApprovedInvoices) {
                      $providerStatus = $providerMatchedCount <= 0
                        ? 'none'
                        : ($providerMatchedCount < $providerItemsTotal ? 'partial' : 'complete');
                    } else {
                      $providerStatus = $invoicesCount > 0 ? 'complete' : 'none';
                    }
                  @endphp
                  <tr class="provider-row {{ $partialEnabled ? 'is-partial-enabled' : '' }}" data-provider-row="{{ $provider->id }}">
                    <td>{{ $provider->provider_name }}</td>
                    <td style="min-width: 180px;">
                      <form method="POST" action="{{ route($partialToggleRouteName, ['pipefyRequestProvider' => $provider->id]) }}" class="partial-toggle-form" data-provider-id="{{ $provider->id }}">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="allows_partial_invoicing" value="{{ $partialEnabled ? 1 : 0 }}" class="js-partial-toggle-hidden">
                        <sl-checkbox class="js-partial-toggle" {{ $partialEnabled ? 'checked' : '' }}>
                          Parcial
                        </sl-checkbox>
                        <span class="partial-toggle-feedback subtle" aria-live="polite"></span>
                      </form>
                      <small class="subtle js-partial-helper" style="display:{{ $partialEnabled ? 'block' : 'none' }}; margin-top:6px;">El proveedor puede subir por piezas y la vista previa solo tomará el remanente cargado.</small>
                    </td>
                    <td>{{ $invoicesCount }}</td>
                    <td>{{ $expected !== null ? number_format($expected, 2) : '-' }}</td>
                    <td>{{ $expectedBase !== null ? number_format((float) $expectedBase, 2) : '-' }}</td>
                    <td>{{ number_format($invoiced, 2) }}</td>
                    <td>{{ $pending !== null ? number_format($pending, 2) : '-' }}</td>
                    <td style="min-width: 320px;">
                      @if($providerItems->isEmpty())
                        <span class="badge">Sin productos</span>
                      @else
                        <details class="provider-products">
                          <summary>
                            Ver productos ({{ $providerItems->count() }})
                          </summary>
                          <table class="provider-products-table">
                            <thead>
                              <tr>
                                <th>#</th>
                                <th>COD</th>
                                <th>Producto</th>
                                <th>Cant.</th>
                                @if($partialEnabled)
                                  <th>Cargado</th>
                                  <th>Pendiente</th>
                                @endif
                              </tr>
                            </thead>
                            <tbody>
                              @foreach($providerItems as $item)
                                @php
                                  $displayCode = $item->concept_code
                                    ?: \App\Support\ConceptCodeExtractor::extract(
                                      (string) ($item->description ?? ''),
                                      (string) ($item->product_name ?? '')
                                    );
                                  $requestedQuantity = \App\Support\ProviderPartialBilling::requestedQuantity($item);
                                  $uploadedQuantity = min($requestedQuantity, max(0, (float) ($providerUploadedQuantities[(int) $item->id] ?? 0)));
                                  $pendingQuantity = max($requestedQuantity - $uploadedQuantity, 0);
                                @endphp
                                <tr>
                                  <td>{{ $item->product_index ?: '-' }}</td>
                                  <td>{{ $displayCode ?: '-' }}</td>
                                  <td>{{ $item->description ?: ($item->product_name ?: '-') }}</td>
                                  <td>{{ $item->quantity ?: '-' }}</td>
                                  @if($partialEnabled)
                                    <td>{{ number_format($uploadedQuantity, 2) }}</td>
                                    <td>{{ number_format($pendingQuantity, 2) }}</td>
                                  @endif
                                </tr>
                              @endforeach
                            </tbody>
                          </table>
                        </details>
                      @endif
                    </td>
                    <td>
                      <div class="partial-config-badge-wrap">
                        <span class="badge partial-config-badge js-partial-config-badge" style="display:{{ $partialEnabled ? 'inline-flex' : 'none' }};">
                          Parcial activado
                        </span>
                      </div>
                      @if($providerStatus === 'none')
                        @if($pendingApprovalCount > 0)
                          <span class="badge solicitud-status--review">
                            {{ $pendingApprovalCount === 1 ? 'Factura pendiente por aprobar' : 'Facturas pendientes por aprobar' }} ({{ $pendingApprovalCount }})
                          </span>
                        @else
                          <span class="badge solicitud-status--pending">Sin factura</span>
                        @endif
                      @elseif($providerStatus === 'partial')
                        <span class="badge solicitud-status--partial">
                          @if($partialEnabled)
                            Parcial ({{ number_format($providerUploadedQuantity, 2) }}/{{ number_format(max($providerRequestedQuantity, 0), 2) }} piezas)
                          @else
                            Parcial ({{ $providerMatchedCount }}/{{ max(1, $providerItemsTotal) }})
                          @endif
                        </span>
                        @if($invoicePdf)
                          <a
                            class="badge solicitud-status-link"
                            href="{{ asset('storage/'.$invoicePdf['path']) }}"
                            target="_blank"
                            rel="noopener"
                            title="Ver factura #{{ $invoicePdf['invoice_id'] }}"
                          >
                            Ver factura
                          </a>
                        @endif
                      @elseif($invoicePdf)
                        <a
                          class="badge solicitud-status--ok solicitud-status-link"
                          href="{{ asset('storage/'.$invoicePdf['path']) }}"
                          target="_blank"
                          rel="noopener"
                          title="Ver factura #{{ $invoicePdf['invoice_id'] }}"
                        >
                          Con factura
                        </a>
                      @else
                        <span class="badge solicitud-status--ok">Con factura</span>
                      @endif
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="9">Sin proveedores asociados.</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </details>
      @empty
        <div class="solicitud-empty">No hay solicitudes para mostrar.</div>
      @endforelse
    </div>
  </div>
@endsection

@push('styles')
  <style>
    .filters-collapse {
      margin-bottom: 14px;
    }
    .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-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .solicitud-accordion {
      display: grid;
      gap: 12px;
    }
    .solicitud-request {
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
    }
    .solicitud-request.is-complete {
      border-color: #86efac;
      background: #f0fdf4;
    }
    .solicitud-request__summary {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      cursor: pointer;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .solicitud-request.is-complete .solicitud-request__summary {
      background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    }
    .solicitud-request__summary::-webkit-details-marker {
      display: none;
    }
    .solicitud-request__toggle {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: #0f172a;
      flex-shrink: 0;
    }
    .solicitud-request.is-complete .solicitud-request__toggle {
      border-color: #86efac;
      background: #dcfce7;
      color: #166534;
    }
    .solicitud-request__toggle::before {
      content: '+';
      font-size: 20px;
      line-height: 1;
      font-weight: 600;
    }
    .solicitud-request[open] .solicitud-request__toggle {
      background: #0f766e;
      border-color: #0f766e;
      color: #fff;
    }
    .solicitud-request.is-complete[open] .solicitud-request__toggle {
      background: #15803d;
      border-color: #15803d;
      color: #fff;
    }
    .solicitud-request[open] .solicitud-request__toggle::before {
      content: '−';
    }
    .solicitud-request__summary-main {
      min-width: 220px;
    }
    .solicitud-request__title {
      font-weight: 700;
      font-size: 1rem;
      color: #0f172a;
    }
    .solicitud-request__subtitle {
      font-size: 0.8rem;
      color: #64748b;
      margin-top: 2px;
    }
    .solicitud-request.is-complete .solicitud-request__title {
      color: #166534;
    }
    .solicitud-request__rc {
      color: var(--muted);
      font-size: 0.86rem;
      margin-top: 2px;
    }
    .solicitud-request__meta {
      color: #475569;
      font-size: 0.82rem;
      margin-top: 2px;
    }
    .solicitud-request__subtotal-highlight {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #86efac;
      background: #f0fdf4;
      color: #166534;
      font-size: 0.82rem;
      font-weight: 600;
    }
    .solicitud-request__subtotal-highlight strong {
      color: #14532d;
      font-size: 0.9rem;
      letter-spacing: 0.01em;
    }
    .solicitud-request__chips {
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .solicitud-subtotal-chip {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
      font-weight: 700;
    }
    .solicitud-request__body {
      padding: 2px 16px 12px;
    }
    .solicitud-subtotal-hero {
      margin: 10px 0 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid #86efac;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .solicitud-subtotal-hero__label {
      font-size: 0.9rem;
      color: #166534;
      font-weight: 600;
    }
    .solicitud-subtotal-hero__value {
      font-size: 1.1rem;
      line-height: 1;
      font-weight: 800;
      color: #14532d;
      letter-spacing: 0.01em;
    }
    .solicitud-progress {
      margin: 8px 0 12px;
    }
    .solicitud-progress__label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.9rem;
      color: #334155;
      margin-bottom: 8px;
    }
    .solicitud-progress__bar {
      width: 100%;
      height: 12px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }
    .solicitud-progress__bar > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
      transition: width .25s ease;
    }
    .solicitud-progress__bar.is-complete > span {
      background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
    }
    .solicitud-progress__meta {
      margin-top: 6px;
      font-size: 0.85rem;
      color: #475569;
    }
    .solicitud-progress-chip--ok {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .solicitud-progress-chip--pending {
      background: #fff7ed;
      color: #b45309;
      border: 1px solid #fed7aa;
    }
    .solicitud-request__pending {
      margin: 6px 0 10px;
      padding: 10px 12px;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      color: #334155;
      background: #f8fafc;
      font-size: 0.92rem;
    }
    .solicitud-request.is-complete .solicitud-request__pending {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }
    .solicitud-status--ok {
      background: #ecfeff;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }
    .solicitud-status--pending {
      background: #fff7ed;
      color: #b45309;
      border: 1px solid #fed7aa;
    }
    .solicitud-status--partial {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .solicitud-status--review {
      background: #fff7ed;
      color: #9a3412;
      border: 1px solid #fdba74;
    }
    .solicitud-status-link {
      text-decoration: none;
      cursor: pointer;
    }
    .solicitud-status-link:hover {
      text-decoration: underline;
    }
    .provider-products {
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #f8fafc;
      overflow: hidden;
    }
    .provider-products > summary {
      cursor: pointer;
      list-style: none;
      padding: 8px 10px;
      font-weight: 600;
      color: #0f766e;
      font-size: 0.86rem;
    }
    .provider-products > summary::-webkit-details-marker {
      display: none;
    }
    .provider-products-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      background: #fff;
    }
    .provider-products-table th,
    .provider-products-table td {
      border-top: 1px solid #e2e8f0;
      padding: 6px 8px;
      text-align: left;
      vertical-align: top;
    }
    .provider-products-table th {
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.78rem;
      color: #334155;
      background: #f8fafc;
    }
    .partial-toggle-form {
      display: grid;
      gap: 6px;
    }
    .partial-toggle-feedback {
      min-height: 18px;
    }
    .partial-toggle-feedback.is-saving {
      color: #0f766e;
    }
    .partial-toggle-feedback.is-error {
      color: #b91c1c;
    }
    .partial-toggle-feedback.is-success {
      color: #166534;
    }
    .provider-row.is-partial-enabled {
      background: linear-gradient(180deg, rgba(255, 247, 237, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    }
    .partial-config-badge-wrap {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .partial-config-badge {
      background: #fff7ed;
      color: #b45309;
      border: 1px solid #fed7aa;
    }
    .solicitud-empty {
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 14px;
      color: #475569;
      background: #f8fafc;
    }
    @media (max-width: 900px) {
      .filters-grid--four {
        grid-template-columns: 1fr;
      }
      .solicitud-request__summary {
        flex-wrap: wrap;
      }
      .solicitud-request__summary-main {
        min-width: 0;
        width: calc(100% - 40px);
      }
      .solicitud-request__chips {
        margin-left: 40px;
        width: 100%;
        justify-content: flex-start;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    (() => {
      document.querySelectorAll('.partial-toggle-form').forEach((form) => {
        const checkbox = form.querySelector('.js-partial-toggle');
        const hidden = form.querySelector('.js-partial-toggle-hidden');
        const feedback = form.querySelector('.partial-toggle-feedback');
        let feedbackTimer = null;

        if (!checkbox || !hidden || !feedback) {
          return;
        }

        const setFeedback = (text, type = '') => {
          feedback.textContent = text || '';
          feedback.classList.remove('is-saving', 'is-error', 'is-success');

          if (type) {
            feedback.classList.add(type);
          }
        };

        checkbox.addEventListener('sl-change', async () => {
          const previousChecked = hidden.value === '1';
          const nextChecked = !!checkbox.checked;
          const row = form.closest('tr[data-provider-row]');
          const helper = row?.querySelector('.js-partial-helper');
          const configBadge = row?.querySelector('.js-partial-config-badge');
          const requestCard = form.closest('details[data-request-card]');

          hidden.value = nextChecked ? '1' : '0';
          checkbox.disabled = true;
          setFeedback('Guardando...', 'is-saving');

          if (feedbackTimer) {
            clearTimeout(feedbackTimer);
            feedbackTimer = null;
          }

          try {
            const formData = new FormData(form);
            formData.set('allows_partial_invoicing', nextChecked ? '1' : '0');

            const response = await fetch(form.action, {
              method: 'POST',
              body: formData,
              headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
              },
              credentials: 'same-origin',
            });

            const payload = await response.json().catch(() => ({}));
            if (!response.ok || payload.ok === false) {
              throw new Error(payload.message || 'No se pudo actualizar la configuración parcial.');
            }

            const enabled = !!payload.enabled;
            hidden.value = enabled ? '1' : '0';
            checkbox.checked = enabled;
            row?.classList.toggle('is-partial-enabled', enabled);
            if (helper) {
              helper.style.display = enabled ? 'block' : 'none';
            }
            if (configBadge) {
              configBadge.style.display = enabled ? 'inline-flex' : 'none';
            }
            if (requestCard) {
              const enabledCount = requestCard.querySelectorAll('.provider-row.is-partial-enabled').length;
              requestCard.querySelectorAll('.js-partial-enabled-count').forEach((node) => {
                node.textContent = String(enabledCount);
              });
            }
            setFeedback(enabled ? 'Parcial activado' : 'Parcial desactivado', 'is-success');

            feedbackTimer = window.setTimeout(() => {
              setFeedback('');
            }, 2200);
          } catch (error) {
            checkbox.checked = previousChecked;
            hidden.value = previousChecked ? '1' : '0';
            setFeedback(error?.message || 'No se pudo guardar el cambio.', 'is-error');
          } finally {
            checkbox.disabled = false;
          }
        });
      });
    })();
  </script>
@endpush