@extends('layouts.enterprise')

@section('title', 'Dashboard')

@section('content')
  <div class="admin-dashboard-zoom-90">
    <div class="grid" style="gap:24px;">
      <div class="card">
      <h1 class="page-title">Pagos de la semana</h1>
      <p class="subtle">Rango: {{ $start->toDateString() }} a {{ $end->toDateString() }} (solo facturas aprobadas/programadas)</p>

      @php
        $defaultPayStart = \Illuminate\Support\Carbon::now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY)->toDateString();
        $defaultPayEnd = \Illuminate\Support\Carbon::now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY)->addDays(6)->toDateString();
        $payHasActiveFilters = (($payFilters['q'] ?? '') !== '')
          || (($payFilters['status'] ?? 'approved_scheduled') !== 'approved_scheduled')
          || (($payFilters['date_from'] ?? $defaultPayStart) !== $defaultPayStart)
          || (($payFilters['date_to'] ?? $defaultPayEnd) !== $defaultPayEnd);
      @endphp

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

        <form method="GET" action="{{ route('admin.dashboard') }}" class="dashboard-filters">
          <div class="filters-grid filters-grid--four">
            <div class="field">
              <label>Buscar</label>
              <input type="text" name="pay_q" value="{{ $payFilters['q'] ?? '' }}" placeholder="ID, RC o proveedor">
            </div>
            <div class="field">
              <label>Estatus</label>
              <select name="pay_status">
                <option value="approved_scheduled" @selected(($payFilters['status'] ?? 'approved_scheduled') === 'approved_scheduled')>Aprobadas y programadas</option>
                <option value="{{ \App\Models\Invoice::STATUS_APPROVED }}" @selected(($payFilters['status'] ?? '') === \App\Models\Invoice::STATUS_APPROVED)>Solo aprobadas</option>
                <option value="{{ \App\Models\Invoice::STATUS_SCHEDULED }}" @selected(($payFilters['status'] ?? '') === \App\Models\Invoice::STATUS_SCHEDULED)>Solo programadas</option>
                <option value="{{ \App\Models\Invoice::STATUS_PAID }}" @selected(($payFilters['status'] ?? '') === \App\Models\Invoice::STATUS_PAID)>Solo pagadas</option>
                <option value="all" @selected(($payFilters['status'] ?? '') === 'all')>Todas</option>
              </select>
            </div>
            <div class="field">
              <label>Pago desde</label>
              <input type="date" name="pay_date_from" value="{{ $payFilters['date_from'] ?? '' }}">
            </div>
            <div class="field">
              <label>Pago hasta</label>
              <input type="date" name="pay_date_to" value="{{ $payFilters['date_to'] ?? '' }}">
            </div>
          </div>

          <input type="hidden" name="completion" value="{{ $filters['completion'] ?? 'all' }}">
          <input type="hidden" name="collect_q" value="{{ $collectFilters['q'] ?? '' }}">
          <input type="hidden" name="collect_status" value="{{ $collectFilters['status'] ?? 'all' }}">
          <input type="hidden" name="collect_date_from" value="{{ $collectFilters['date_from'] ?? '' }}">
          <input type="hidden" name="collect_date_to" value="{{ $collectFilters['date_to'] ?? '' }}">
          @if(!empty($filters['date_from'] ?? null))
            <input type="hidden" name="date_from" value="{{ $filters['date_from'] }}">
          @endif
          @if(!empty($filters['date_to'] ?? null))
            <input type="hidden" name="date_to" value="{{ $filters['date_to'] }}">
          @endif
          @if(($filters['progress_min'] ?? null) !== null)
            <input type="hidden" name="progress_min" value="{{ $filters['progress_min'] }}">
          @endif
          @if(($filters['progress_max'] ?? null) !== null)
            <input type="hidden" name="progress_max" value="{{ $filters['progress_max'] }}">
          @endif
          @if(($filters['amount_progress_min'] ?? null) !== null)
            <input type="hidden" name="amount_progress_min" value="{{ $filters['amount_progress_min'] }}">
          @endif
          @if(($filters['amount_progress_max'] ?? null) !== null)
            <input type="hidden" name="amount_progress_max" value="{{ $filters['amount_progress_max'] }}">
          @endif

          <div class="filters-actions">
            <button class="btn" type="submit">Filtrar</button>
            <a class="btn btn-secondary" href="{{ route('admin.dashboard') }}">Limpiar</a>
            <span class="badge">Resultados: {{ $toPayThisWeek->count() }}</span>
          </div>
        </form>
      </sl-details>

      <div class="dashboard-charts-grid">
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Pagos por estatus</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="payStatusChart"></canvas>
          </div>
        </div>
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Monto por proveedor</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="payProviderChart"></canvas>
          </div>
        </div>
      </div>

      <div class="payments-week-table-wrap">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Proveedor</th>
              <th>PROJECT NAME</th>
              <th>Estatus</th>
              <th>Fecha pago</th>
              <th>Factura</th>
              <th>Total</th>
              <th>Monto facturado</th>
              <th>Monto pendiente</th>
              <th>Pagado</th>
              <th>Saldo pago</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            @foreach($toPayThisWeek as $inv)
            @php
              $payProviderFinancialKey = ($inv->pipefy_request_id && $inv->pipefy_request_provider_id)
                ? ((int) $inv->pipefy_request_id.'|'.(int) $inv->pipefy_request_provider_id)
                : null;
              $payProviderAmounts = $payProviderFinancialKey ? ($payProviderFinancials[$payProviderFinancialKey] ?? null) : null;
              $payCoveredAmount = (float) ($payProviderAmounts['invoiced_total'] ?? 0);
              $payPendingAmount = (float) ($payProviderAmounts['pending_total_sale'] ?? 0);
              $paidAmount = $hasInvoicePayments
                ? (float) ($inv->paid_total ?? 0)
                : ($inv->status === \App\Models\Invoice::STATUS_PAID ? (float) $inv->total : 0.0);
              if ($hasInvoicePayments && $paidAmount <= 0.009 && $inv->status === \App\Models\Invoice::STATUS_PAID) {
                $paidAmount = (float) $inv->total;
              }
              $pendingPayment = max(((float) $inv->total) - $paidAmount, 0);
              $canRegisterPayment = in_array($inv->status, [
                \App\Models\Invoice::STATUS_APPROVED,
                \App\Models\Invoice::STATUS_SCHEDULED,
                \App\Models\Invoice::STATUS_PAID,
              ], true) && $pendingPayment > 0.009;
              $invoicePdf = $inv->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_INVOICE_PDF);
              $proof = $inv->files->firstWhere('type', \App\Models\InvoiceFile::TYPE_PAYMENT_PROOF);
            @endphp
              <tr>
              <td>{{ $inv->id }}</td>
              <td>{{ $inv->company?->legal_name }}</td>
              <td>
                <div>{{ $inv->pipefyRequest?->project_name ?: '-' }}</div>
                <small class="subtle" style="margin:0;">{{ $inv->pipefyRequest?->title ?: '-' }}</small>
              </td>
              <td><span class="badge">{{ $inv->status }}</span></td>
              <td>{{ optional($inv->payment_date)->format('Y-m-d') }}</td>
              <td>
                @if($invoicePdf)
                  <a class="badge" href="{{ asset('storage/'.$invoicePdf->path) }}" target="_blank" rel="noopener">Ver factura</a>
                @else
                  <span class="badge">Sin factura</span>
                @endif
              </td>
              <td>{{ number_format((float) $inv->total, 2) }}</td>
              <td>
                @if($payProviderAmounts)
                  ${{ number_format($payCoveredAmount, 2) }}
                @else
                  -
                @endif
              </td>
              <td>
                @if($payProviderAmounts)
                  <span class="badge {{ $payPendingAmount > 0.01 ? '' : 'pay-badge--ok' }}">
                    ${{ number_format($payPendingAmount, 2) }}
                  </span>
                @else
                  -
                @endif
              </td>
              <td>${{ number_format($paidAmount, 2) }}</td>
              <td>
                <span class="badge {{ $pendingPayment > 0.01 ? '' : 'pay-badge--ok' }}">
                  ${{ number_format($pendingPayment, 2) }}
                </span>
              </td>
              <td>
                @if(!$hasInvoicePayments)
                  <span class="badge">Ejecuta migraciones</span>
                @elseif($canRegisterPayment)
                  <button
                    type="button"
                    class="btn btn-secondary js-open-pay-modal"
                    data-invoice-id="{{ $inv->id }}"
                    data-action="{{ route('admin.expenses.payments.pay', $inv) }}"
                    data-pending="{{ number_format($pendingPayment, 2, '.', '') }}"
                  >
                    Pagar
                  </button>
                @else
                  @if($proof)
                    <a class="badge" href="{{ asset('storage/'.$proof->path) }}" target="_blank" rel="noopener">Ver comprobante</a>
                  @else
                    <span class="badge">Liquidada</span>
                  @endif
                @endif
              </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div class="pay-totals">
        <span class="badge">
          Total con filtros:
          ${{ number_format((float) $toPayFilteredTotal, 2) }}
        </span>
        <span class="badge">
          Total búsqueda actual:
          ${{ number_format((float) $toPayCurrentTotal, 2) }}
        </span>
      </div>

      <sl-dialog id="pay-invoice-dialog-global" label="Registrar pago factura" hoist>
        <form id="pay-invoice-form-global" method="POST" action="" enctype="multipart/form-data">
          @csrf
          <div class="field">
            <label>Monto a pagar</label>
            <input id="pay-modal-amount" type="number" name="payment_amount" min="0.01" max="" step="0.01" required placeholder="0.00">
            <small id="pay-modal-pending-hint" class="subtle">Saldo pendiente: $0.00</small>
          </div>
          <div class="field">
            <label>Fecha de pago</label>
            <input type="date" name="payment_date" value="{{ now()->toDateString() }}">
          </div>
          <div class="field"><br>
            <sl-checkbox name="is_advance" value="1">Marcar como anticipo de pago</sl-checkbox>
            <br><br>
          </div>
          <div class="field">
            <label>Comprobante</label>
            <div class="drop-upload js-drop-upload" tabindex="0" aria-label="Subir comprobante">
              <input
                id="payment-proof-global"
                type="file"
                name="payment_proof"
                class="drop-upload__input js-drop-upload-input"
                accept=".pdf,.jpg,.jpeg,.png"
                required
              >
              <div class="drop-upload__content">
                <sl-icon name="cloud-upload" label="Subir archivo"></sl-icon>
                <div class="drop-upload__title">Arrastra y suelta tu comprobante aquí</div>
                <div class="drop-upload__hint">PDF/JPG/PNG · máx. 10 MB</div>
                <sl-button type="button" variant="default" size="small" class="js-drop-upload-browse">
                  Seleccionar archivo
                </sl-button>
                <small class="drop-upload__filename js-drop-upload-filename">Ningún archivo seleccionado</small>
              </div>
            </div>
          </div>
          <div class="field">
            <label>Nota (opcional)</label>
            <textarea name="payment_note" rows="3" maxlength="1000" placeholder="Detalle del pago parcial."></textarea>
          </div>
        </form>
        <sl-button slot="footer" variant="default" onclick="document.getElementById('pay-invoice-dialog-global').hide()">Cancelar</sl-button>
        <sl-button slot="footer" variant="primary" type="submit" form="pay-invoice-form-global">Guardar pago</sl-button>
      </sl-dialog>
    </div>

    <div class="card">
      <h2 class="page-title">Cobros de la semana</h2>
      <p class="subtle">Rango: {{ \Illuminate\Support\Carbon::parse($collectFilters['date_from'] ?? $start->toDateString())->toDateString() }} a {{ \Illuminate\Support\Carbon::parse($collectFilters['date_to'] ?? $end->toDateString())->toDateString() }} (fecha estimada de cobro por cliente)</p>

      @php
        $defaultCollectStart = \Illuminate\Support\Carbon::now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY)->toDateString();
        $defaultCollectEnd = \Illuminate\Support\Carbon::now()->startOfWeek(\Illuminate\Support\Carbon::MONDAY)->addDays(6)->toDateString();
        $collectHasActiveFilters = (($collectFilters['q'] ?? '') !== '')
          || (($collectFilters['status'] ?? 'all') !== 'all')
          || (($collectFilters['date_from'] ?? $defaultCollectStart) !== $defaultCollectStart)
          || (($collectFilters['date_to'] ?? $defaultCollectEnd) !== $defaultCollectEnd);
      @endphp

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

        <form method="GET" action="{{ route('admin.dashboard') }}" class="dashboard-filters">
          <div class="filters-grid filters-grid--four">
            <div class="field">
              <label>Buscar</label>
              <input type="text" name="collect_q" value="{{ $collectFilters['q'] ?? '' }}" placeholder="ID, folio, cliente o proyecto">
            </div>
            <div class="field">
              <label>Estatus</label>
              <select name="collect_status">
                <option value="all" @selected(($collectFilters['status'] ?? 'all') === 'all')>Todos</option>
                <option value="pending" @selected(($collectFilters['status'] ?? '') === 'pending')>Pendientes</option>
                <option value="collected" @selected(($collectFilters['status'] ?? '') === 'collected')>Cobrados</option>
              </select>
            </div>
            <div class="field">
              <label>Cobro desde</label>
              <input type="date" name="collect_date_from" value="{{ $collectFilters['date_from'] ?? '' }}">
            </div>
            <div class="field">
              <label>Cobro hasta</label>
              <input type="date" name="collect_date_to" value="{{ $collectFilters['date_to'] ?? '' }}">
            </div>
          </div>

          <input type="hidden" name="pay_q" value="{{ $payFilters['q'] ?? '' }}">
          <input type="hidden" name="pay_status" value="{{ $payFilters['status'] ?? 'approved_scheduled' }}">
          <input type="hidden" name="pay_date_from" value="{{ $payFilters['date_from'] ?? '' }}">
          <input type="hidden" name="pay_date_to" value="{{ $payFilters['date_to'] ?? '' }}">
          <input type="hidden" name="completion" value="{{ $filters['completion'] ?? 'all' }}">
          @if(!empty($filters['date_from'] ?? null))
            <input type="hidden" name="date_from" value="{{ $filters['date_from'] }}">
          @endif
          @if(!empty($filters['date_to'] ?? null))
            <input type="hidden" name="date_to" value="{{ $filters['date_to'] }}">
          @endif
          @if(($filters['progress_min'] ?? null) !== null)
            <input type="hidden" name="progress_min" value="{{ $filters['progress_min'] }}">
          @endif
          @if(($filters['progress_max'] ?? null) !== null)
            <input type="hidden" name="progress_max" value="{{ $filters['progress_max'] }}">
          @endif
          @if(($filters['amount_progress_min'] ?? null) !== null)
            <input type="hidden" name="amount_progress_min" value="{{ $filters['amount_progress_min'] }}">
          @endif
          @if(($filters['amount_progress_max'] ?? null) !== null)
            <input type="hidden" name="amount_progress_max" value="{{ $filters['amount_progress_max'] }}">
          @endif

          <div class="filters-actions">
            <button class="btn" type="submit">Filtrar</button>
            <a class="btn btn-secondary" href="{{ route('admin.dashboard') }}">Limpiar</a>
            <span class="badge">Resultados: {{ $toCollectThisWeek->count() }}</span>
          </div>
        </form>
      </sl-details>

      <div class="dashboard-charts-grid">
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Cobros por estatus</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="collectStatusChart"></canvas>
          </div>
        </div>
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Monto por cliente</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="collectClientChart"></canvas>
          </div>
        </div>
      </div>

      <div class="payments-week-table-wrap">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Folio</th>
              <th>Cliente</th>
              <th>Días pago</th>
              <th>Emisión</th>
              <th>Cobro estimado</th>
              <th>Proyecto</th>
              <th>Subtotal</th>
              <th>IVA</th>
              <th>Total</th>
              <th>Cobrado</th>
              <th>Saldo</th>
              <th>Estatus</th>
            </tr>
          </thead>
          <tbody>
            @forelse($toCollectThisWeek as $collect)
              <tr>
                <td>{{ $collect['id'] }}</td>
                <td>{{ $collect['folio'] }}</td>
                <td>{{ $collect['client_name'] }}</td>
                <td>{{ $collect['payment_days'] }}</td>
                <td>{{ $collect['issue_date']->format('Y-m-d') }}</td>
                <td>{{ $collect['estimated_collection_date']->format('Y-m-d') }}</td>
                <td>
                  <div>{{ $collect['project_name'] }}</div>
                  <small class="subtle" style="margin:0;">{{ $collect['title'] }}</small>
                </td>
                <td>${{ number_format((float) $collect['subtotal'], 2) }}</td>
                <td>${{ number_format((float) $collect['tax'], 2) }}</td>
                <td>${{ number_format((float) $collect['total'], 2) }}</td>
                <td>${{ number_format((float) $collect['collected_total'], 2) }}</td>
                <td>
                  <span class="badge {{ (float) $collect['pending_total'] <= 0.01 ? 'pay-badge--ok' : '' }}">
                    ${{ number_format((float) $collect['pending_total'], 2) }}
                  </span>
                </td>
                <td>
                  <span class="badge {{ $collect['status_key'] === 'collected' ? 'pay-badge--ok' : '' }}">
                    {{ $collect['status_label'] }}
                  </span>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="13">No hay cobros estimados para el rango seleccionado.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="pay-totals">
        <span class="badge">
          Total con filtros:
          ${{ number_format((float) $toCollectFilteredTotal, 2) }}
        </span>
        <span class="badge">
          Saldo con filtros:
          ${{ number_format((float) $toCollectFilteredPendingTotal, 2) }}
        </span>
        <span class="badge">
          Total búsqueda actual:
          ${{ number_format((float) $toCollectCurrentTotal, 2) }}
        </span>
        <span class="badge">
          Saldo búsqueda actual:
          ${{ number_format((float) $toCollectCurrentPendingTotal, 2) }}
        </span>
      </div>
    </div>

    <div class="card">
      <h2 class="page-title">Estatus por petición (Solicitud)</h2>
      <p class="subtle">Control de proveedores por Proyecto, montos facturados y pendientes (solo facturas aprobadas).</p>
      @if($errors->any())
        <div class="error">
          <ul>
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      @php
        $hasActiveFilters = (($filters['completion'] ?? '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'] !== '');

        $providerRanges = [
          ['label' => 'Prov 0-25%', 'min' => 0, 'max' => 25],
          ['label' => 'Prov 26-50%', 'min' => 26, 'max' => 50],
          ['label' => 'Prov 51-75%', 'min' => 51, 'max' => 75],
          ['label' => 'Prov 76-100%', 'min' => 76, 'max' => 100],
        ];
        $amountRanges = [
          ['label' => 'Monto 0-25%', 'min' => 0, 'max' => 25],
          ['label' => 'Monto 26-50%', 'min' => 26, 'max' => 50],
          ['label' => 'Monto 51-75%', 'min' => 51, 'max' => 75],
          ['label' => 'Monto 76-100%', 'min' => 76, 'max' => 100],
        ];
      @endphp

      <details class="solicitud-filters-collapse" @if($hasActiveFilters) open @endif>
        <summary class="solicitud-filters-collapse__summary">
          <span style="display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:#0f766e;" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"></path>
            </svg>
          </span>
          Filtros
          @if($hasActiveFilters)
            <span class="badge">Activos</span>
          @endif
        </summary>

        <div class="solicitud-filters-collapse__content">
          <form method="GET" action="{{ route('admin.dashboard') }}" class="solicitud-filters">
            <input type="hidden" name="pay_q" value="{{ $payFilters['q'] ?? '' }}">
            <input type="hidden" name="pay_status" value="{{ $payFilters['status'] ?? 'approved_scheduled' }}">
            <input type="hidden" name="pay_date_from" value="{{ $payFilters['date_from'] ?? '' }}">
            <input type="hidden" name="pay_date_to" value="{{ $payFilters['date_to'] ?? '' }}">
            <input type="hidden" name="collect_q" value="{{ $collectFilters['q'] ?? '' }}">
            <input type="hidden" name="collect_status" value="{{ $collectFilters['status'] ?? 'all' }}">
            <input type="hidden" name="collect_date_from" value="{{ $collectFilters['date_from'] ?? '' }}">
            <input type="hidden" name="collect_date_to" value="{{ $collectFilters['date_to'] ?? '' }}">
            <div class="field">
              <label>Completado</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>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ín.</label>
              <input type="number" min="0" max="100" name="progress_min" value="{{ $filters['progress_min'] ?? '' }}" placeholder="0">
            </div>
            <div class="field">
              <label>% proveedores máx.</label>
              <input type="number" min="0" max="100" name="progress_max" value="{{ $filters['progress_max'] ?? '' }}" placeholder="100">
            </div>
            <div class="field">
              <label>% monto mín.</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áx.</label>
              <input type="number" min="0" max="100" name="amount_progress_max" value="{{ $filters['amount_progress_max'] ?? '' }}" placeholder="100">
            </div>
            <div class="solicitud-filters__actions">
              <button class="btn" type="submit">Filtrar</button>
              <a class="btn btn-secondary" href="{{ route('admin.dashboard') }}">Limpiar</a>
              <span class="badge">Resultados: {{ $requests->count() }}</span>
            </div>
          </form>

          <div class="solicitud-quick-filters">
            <span class="solicitud-quick-filters__label">Atajos % proveedores:</span>
            @foreach($providerRanges as $range)
              @php
                $providerQuery = collect(array_merge(request()->query(), [
                  'progress_min' => $range['min'],
                  'progress_max' => $range['max'],
                ]))->filter(fn($v) => $v !== null && $v !== '')->all();
                $providerActive = (string) request('progress_min') === (string) $range['min']
                  && (string) request('progress_max') === (string) $range['max'];
              @endphp
              <a
                href="{{ route('admin.dashboard', $providerQuery) }}"
                class="badge solicitud-quick-chip {{ $providerActive ? 'is-active' : '' }}"
              >
                {{ $range['label'] }}
              </a>
            @endforeach
            @php
              $providerClearQuery = collect(array_merge(request()->query(), [
                'progress_min' => null,
                'progress_max' => null,
              ]))->filter(fn($v) => $v !== null && $v !== '')->all();
              $providerClearActive = request('progress_min') === null && request('progress_max') === null;
            @endphp
            <a
              href="{{ route('admin.dashboard', $providerClearQuery) }}"
              class="badge solicitud-quick-chip {{ $providerClearActive ? 'is-active' : '' }}"
            >
              Sin filtro
            </a>
          </div>

          <div class="solicitud-quick-filters">
            <span class="solicitud-quick-filters__label">Atajos % monto:</span>
            @foreach($amountRanges as $range)
              @php
                $amountQuery = collect(array_merge(request()->query(), [
                  'amount_progress_min' => $range['min'],
                  'amount_progress_max' => $range['max'],
                ]))->filter(fn($v) => $v !== null && $v !== '')->all();
                $amountActive = (string) request('amount_progress_min') === (string) $range['min']
                  && (string) request('amount_progress_max') === (string) $range['max'];
              @endphp
              <a
                href="{{ route('admin.dashboard', $amountQuery) }}"
                class="badge solicitud-quick-chip {{ $amountActive ? 'is-active' : '' }}"
              >
                {{ $range['label'] }}
              </a>
            @endforeach
            @php
              $amountClearQuery = collect(array_merge(request()->query(), [
                'amount_progress_min' => null,
                'amount_progress_max' => null,
              ]))->filter(fn($v) => $v !== null && $v !== '')->all();
              $amountClearActive = request('amount_progress_min') === null && request('amount_progress_max') === null;
            @endphp
            <a
              href="{{ route('admin.dashboard', $amountClearQuery) }}"
              class="badge solicitud-quick-chip {{ $amountClearActive ? 'is-active' : '' }}"
            >
              Sin filtro
            </a>
          </div>
        </div>
      </details>

      <div class="dashboard-charts-grid">
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Solicitudes completadas</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="requestCompletionChart"></canvas>
          </div>
        </div>
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Avance top solicitudes</div>
          <div class="dashboard-chart-canvas-wrap dashboard-chart-canvas-wrap--tall">
            <canvas id="requestProgressChart"></canvas>
          </div>
        </div>
        <div class="dashboard-chart-card">
          <div class="dashboard-chart-title">Tendencia mensual de ganancia (Costo vs Venta)</div>
          <div class="dashboard-chart-canvas-wrap">
            <canvas id="requestProfitChart"></canvas>
          </div>
        </div>
      </div>

      <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' => [],
            ];
            $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' : '' }}">
            <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>Con IVA: <strong>${{ number_format($requestSubtotalIva, 2) }}</strong></span>
                  @endif
                </div>
              </div>

              <div class="solicitud-request__chips">
                <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">Pendientes: {{ $summary['providers_without_invoice'] }}</span>
                <span class="badge solicitud-subtotal-chip">
                  Subtotal solicitud:
                  @if($requestSubtotal !== null)
                    ${{ number_format($requestSubtotal, 2) }}
                  @else
                    Sin subtotal
                  @endif
                </span>
                @if($requestSubtotalIva !== null)
                  <span class="badge solicitud-subtotal-chip">Subtotal + IVA: ${{ number_format($requestSubtotalIva, 2) }}</span>
                @endif
                <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>

              <div class="solicitud-table-wrap">
                <table>
                  <thead>
                    <tr>
                      <th>Proveedor</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;
                        if ($providerItemsTotal > 0 && !$hasLegacyApprovedInvoices) {
                          $providerStatus = $providerMatchedCount <= 0
                            ? 'none'
                            : ($providerMatchedCount < $providerItemsTotal ? 'partial' : 'complete');
                        } else {
                          $providerStatus = $invoicesCount > 0 ? 'complete' : 'none';
                        }
                      @endphp
                      <tr>
                        <td>{{ $provider->provider_name }}</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>
                                  </tr>
                                </thead>
                                <tbody>
                                  @foreach($providerItems as $item)
                                    @php
                                      $displayCode = $item->concept_code
                                        ?: \App\Support\ConceptCodeExtractor::extract(
                                          (string) ($item->description ?? ''),
                                          (string) ($item->product_name ?? '')
                                        );
                                    @endphp
                                    <tr>
                                      <td>{{ $item->product_index ?: '-' }}</td>
                                      <td>{{ $displayCode ?: '-' }}</td>
                                      <td>{{ $item->description ?: ($item->product_name ?: '-') }}</td>
                                      <td>{{ $item->quantity ?: '-' }}</td>
                                    </tr>
                                  @endforeach
                                </tbody>
                              </table>
                            </details>
                          @endif
                        </td>
                        <td>
                          @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">
                              Parcial ({{ $providerMatchedCount }}/{{ max(1, $providerItemsTotal) }})
                            </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="7">Sin proveedores asociados.</td>
                      </tr>
                    @endforelse
                  </tbody>
                </table>
              </div>
            </div>
          </details>
        @empty
          <div class="solicitud-empty">No hay solicitudes para mostrar.</div>
        @endforelse
      </div>
      </div>
    </div>
  </div>

  <style>
    .admin-dashboard-zoom-90 {
      width: 100%;
    }
    @media (min-width: 1024px) {
      .admin-dashboard-zoom-90 {
        zoom: 0.9;
      }
    }
    @supports not (zoom: 1) {
      @media (min-width: 1024px) {
        .admin-dashboard-zoom-90 {
          transform: scale(0.9);
          transform-origin: top left;
          width: 111.111%;
        }
      }
    }
    .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;
    }
    .dashboard-charts-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 0 0 14px;
    }
    .dashboard-chart-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
    }
    .dashboard-chart-canvas-wrap {
      position: relative;
      height: 220px;
      width: 100%;
    }
    .dashboard-chart-canvas-wrap--tall {
      height: 300px;
    }
    .dashboard-chart-title {
      font-size: 0.88rem;
      color: #334155;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .solicitud-filters-collapse {
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
      overflow: hidden;
    }
    .pay-totals {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .payments-week-table-wrap {
      width: 100%;
      overflow-x: auto;
      overflow-y: visible;
    }
    .payments-week-table-wrap table {
      width: 100%;
      min-width: 1480px;
    }
    .payments-week-table-wrap td:last-child {
      min-width: 250px;
      vertical-align: middle;
      text-align: center;
    }
    .payments-week-table-wrap td:last-child > .btn {
      display: inline-flex;
      justify-content: center;
      white-space: nowrap;
      margin: 0 auto;
    }
    .pay-badge--ok {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .drop-upload {
      position: relative;
      border: 1px dashed #9ca3af;
      border-radius: 12px;
      background: #f8fafc;
      padding: 12px;
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
      outline: none;
    }
    .drop-upload:hover,
    .drop-upload:focus-visible {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }
    .drop-upload.is-dragover {
      border-color: #2563eb;
      background: #dbeafe;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }
    .drop-upload.has-file {
      border-color: #16a34a;
      background: #f0fdf4;
    }
    .drop-upload__input {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }
    .drop-upload__content {
      display: grid;
      gap: 6px;
      justify-items: center;
      text-align: center;
    }
    .drop-upload__content sl-icon {
      font-size: 1.2rem;
      color: #1d4ed8;
    }
    .drop-upload__title {
      font-weight: 600;
      color: #0f172a;
      line-height: 1.25;
    }
    .drop-upload__hint {
      font-size: 0.8rem;
      color: #64748b;
    }
    .drop-upload__filename {
      color: #475569;
      word-break: break-all;
    }
    #pay-invoice-dialog-global::part(base) {
      position: fixed !important;
      inset: 0 !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      padding: 84px 16px 16px !important;
    }
    #pay-invoice-dialog-global::part(panel) {
      width: min(680px, calc(100vw - 32px)) !important;
      max-height: calc(100vh - 100px) !important;
      margin: 0 !important;
      overflow: auto !important;
      border-radius: 14px;
    }
    .solicitud-filters-collapse__summary {
      cursor: pointer;
      padding: 12px 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      list-style: none;
    }
    .solicitud-filters-collapse__summary::-webkit-details-marker {
      display: none;
    }
    .solicitud-filters-collapse__content {
      padding: 0 12px 12px;
    }
    .solicitud-filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .solicitud-filters__actions {
      display: flex;
      align-items: end;
      gap: 8px;
      flex-wrap: wrap;
      grid-column: span 4;
    }
    .solicitud-quick-filters {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 0 0 10px;
    }
    .solicitud-quick-filters__label {
      font-size: 0.86rem;
      color: #475569;
      font-weight: 600;
    }
    .solicitud-quick-chip {
      text-decoration: none;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #334155;
    }
    .solicitud-quick-chip.is-active {
      background: #dcfce7;
      border-color: #86efac;
      color: #166534;
    }
    .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;
      overflow-wrap: anywhere;
    }
    .solicitud-request__title {
      font-weight: 700;
      font-size: 1rem;
      color: #0f172a;
      overflow-wrap: anywhere;
    }
    .solicitud-request__subtitle {
      font-size: 0.8rem;
      color: #64748b;
      margin-top: 2px;
      overflow-wrap: anywhere;
    }
    .solicitud-request.is-complete .solicitud-request__title {
      color: #166534;
    }
    .solicitud-request__rc {
      color: var(--muted);
      font-size: 0.86rem;
      margin-top: 2px;
      overflow-wrap: anywhere;
    }
    .solicitud-request__meta {
      color: #475569;
      font-size: 0.82rem;
      margin-top: 2px;
      overflow-wrap: anywhere;
    }
    .solicitud-request__subtotal-highlight {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #bae6fd;
      background: #f0f9ff;
      color: #0f172a;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .solicitud-request__subtotal-highlight strong {
      color: #0c4a6e;
      font-size: 0.82rem;
    }
    .solicitud-request__chips {
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }
    .solicitud-subtotal-chip {
      background: #ecfeff;
      color: #0f766e;
      border: 1px solid #99f6e4;
    }
    .solicitud-request__body {
      padding: 2px 16px 12px;
      overflow-x: hidden;
    }
    .solicitud-table-wrap {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
    }
    .solicitud-table-wrap > table {
      min-width: 1180px;
      margin: 0;
    }
    .solicitud-subtotal-hero {
      margin: 8px 0 12px;
      border: 1px solid #bae6fd;
      background: linear-gradient(180deg, #ecfeff 0%, #f8fafc 100%);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      align-items: center;
    }
    .solicitud-subtotal-hero__label {
      font-size: 0.86rem;
      color: #0c4a6e;
      font-weight: 600;
    }
    .solicitud-subtotal-hero__value {
      font-size: 1.06rem;
      font-weight: 800;
      color: #0f766e;
      letter-spacing: 0.02em;
    }
    .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;
    }
    .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;
      }
      .dashboard-charts-grid {
        grid-template-columns: 1fr;
      }
      .dashboard-chart-canvas-wrap {
        height: 200px;
      }
      .dashboard-chart-canvas-wrap--tall {
        height: 260px;
      }
      .solicitud-filters {
        grid-template-columns: 1fr;
      }
      .solicitud-filters__actions {
        grid-column: span 1;
      }
      .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;
      }
    }
    @media (min-width: 1400px) {
      .wrap {
        max-width: 96vw;
      }
      .payments-week-table-wrap table {
        min-width: 0;
      }
    }
  </style>
@endsection

@push('scripts')
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const payModal = document.getElementById('pay-invoice-dialog-global');
      const payForm = document.getElementById('pay-invoice-form-global');
      const payAmountInput = document.getElementById('pay-modal-amount');
      const payPendingHint = document.getElementById('pay-modal-pending-hint');
      const payOpenButtons = document.querySelectorAll('.js-open-pay-modal');

      const currencyFormatter = new Intl.NumberFormat('es-MX', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });

      payOpenButtons.forEach(function (button) {
        button.addEventListener('click', function () {
          if (!payModal || !payForm || !payAmountInput || !payPendingHint) return;

          const invoiceId = button.dataset.invoiceId || '';
          const action = button.dataset.action || '';
          const pendingRaw = button.dataset.pending || '0';
          const pendingValue = Number.parseFloat(pendingRaw);
          const pending = Number.isFinite(pendingValue) ? pendingValue : 0;

          payForm.action = action;
          payForm.reset();
          payModal.label = invoiceId
            ? `Registrar pago factura #${invoiceId}`
            : 'Registrar pago factura';

          payAmountInput.max = pending.toFixed(2);
          payAmountInput.value = '';
          payPendingHint.textContent = `Saldo pendiente: $${currencyFormatter.format(pending)}`;

          payForm.querySelectorAll('.js-drop-upload-input').forEach(function (input) {
            input.value = '';
          });
          payForm.querySelectorAll('.js-drop-upload').forEach(function (zone) {
            zone.classList.remove('has-file', 'is-dragover');
          });
          payForm.querySelectorAll('.js-drop-upload-filename').forEach(function (fileName) {
            fileName.textContent = 'Ningún archivo seleccionado';
          });

          payModal.show();
        });
      });

      const dropZones = document.querySelectorAll('.js-drop-upload');

      dropZones.forEach(function (zone) {
        const input = zone.querySelector('.js-drop-upload-input');
        const browseButton = zone.querySelector('.js-drop-upload-browse');
        const filename = zone.querySelector('.js-drop-upload-filename');
        if (!input || !filename) return;

        const renderFileName = function () {
          if (input.files && input.files.length > 0) {
            filename.textContent = input.files[0].name;
            zone.classList.add('has-file');
          } else {
            filename.textContent = 'Ningún archivo seleccionado';
            zone.classList.remove('has-file');
          }
        };

        const pickFile = function () {
          input.click();
        };

        browseButton?.addEventListener('click', function (event) {
          event.preventDefault();
          pickFile();
        });

        zone.addEventListener('click', function (event) {
          if (event.target.closest('.js-drop-upload-browse')) return;
          pickFile();
        });

        zone.addEventListener('keydown', function (event) {
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            pickFile();
          }
        });

        zone.addEventListener('dragover', function (event) {
          event.preventDefault();
          zone.classList.add('is-dragover');
        });

        zone.addEventListener('dragleave', function (event) {
          if (!zone.contains(event.relatedTarget)) {
            zone.classList.remove('is-dragover');
          }
        });

        zone.addEventListener('drop', function (event) {
          event.preventDefault();
          zone.classList.remove('is-dragover');

          const files = event.dataTransfer?.files;
          if (!files || files.length === 0) return;

          const transfer = new DataTransfer();
          transfer.items.add(files[0]);
          input.files = transfer.files;
          renderFileName();
        });

        input.addEventListener('change', renderFileName);
        renderFileName();
      });

      if (typeof window.Chart === 'undefined') return;

      @php
        $payStatusPayload = $payStatusChartData ?? ['labels' => [], 'values' => []];
        $payProviderPayload = $payProviderChartData ?? ['labels' => [], 'values' => []];
        $collectStatusPayload = $collectStatusChartData ?? ['labels' => [], 'values' => []];
        $collectClientPayload = $collectClientChartData ?? ['labels' => [], 'values' => []];
        $requestCompletionPayload = $requestCompletionChartData ?? ['labels' => [], 'values' => []];
        $requestProgressPayload = $requestProgressChartData ?? ['labels' => [], 'provider_values' => [], 'amount_values' => []];
        $requestProfitPayload = $requestProfitChartData ?? ['labels' => [], 'request_count_values' => [], 'cost_values' => [], 'sale_values' => [], 'profit_values' => []];
      @endphp

      const payStatus = @json($payStatusPayload);
      const payProvider = @json($payProviderPayload);
      const collectStatus = @json($collectStatusPayload);
      const collectClient = @json($collectClientPayload);
      const requestCompletion = @json($requestCompletionPayload);
      const requestProgress = @json($requestProgressPayload);
      const requestProfit = @json($requestProfitPayload);

      const palette = ['#0f766e', '#2563eb', '#f97316', '#7c3aed', '#dc2626', '#16a34a', '#0891b2', '#a855f7'];

      function renderDoughnut(id, labels, values) {
        const canvas = document.getElementById(id);
        if (!canvas || !labels || labels.length === 0) return;

        new Chart(canvas.getContext('2d'), {
          type: 'doughnut',
          data: {
            labels: labels,
            datasets: [{
              data: values,
              backgroundColor: labels.map((_, index) => palette[index % palette.length]),
              borderWidth: 0
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { position: 'bottom' }
            }
          }
        });
      }

      function renderBar(id, labels, datasets, extraOptions) {
        const canvas = document.getElementById(id);
        if (!canvas || !labels || labels.length === 0) return;

        const baseOptions = {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: { beginAtZero: true }
          },
          plugins: {
            legend: { position: 'bottom' }
          }
        };

        const mergedOptions = Object.assign({}, baseOptions, extraOptions || {});
        mergedOptions.scales = Object.assign({}, baseOptions.scales, (extraOptions || {}).scales || {});
        mergedOptions.plugins = Object.assign({}, baseOptions.plugins, (extraOptions || {}).plugins || {});

        new Chart(canvas.getContext('2d'), {
          type: 'bar',
          data: { labels: labels, datasets: datasets },
          options: mergedOptions
        });
      }

      renderDoughnut('payStatusChart', payStatus.labels || [], payStatus.values || []);

      renderBar('payProviderChart', payProvider.labels || [], [{
        label: 'Monto',
        data: payProvider.values || [],
        backgroundColor: '#0f766e'
      }]);

      renderDoughnut('collectStatusChart', collectStatus.labels || [], collectStatus.values || []);

      renderBar('collectClientChart', collectClient.labels || [], [{
        label: 'Monto',
        data: collectClient.values || [],
        backgroundColor: '#2563eb'
      }]);

      renderDoughnut('requestCompletionChart', requestCompletion.labels || [], requestCompletion.values || []);

      renderBar(
        'requestProgressChart',
        requestProgress.labels || [],
        [
          {
            label: '% Proveedores',
            data: requestProgress.provider_values || [],
            backgroundColor: '#2563eb'
          },
          {
            label: '% Monto',
            data: requestProgress.amount_values || [],
            backgroundColor: '#16a34a'
          }
        ],
        {
          indexAxis: 'y',
          scales: {
            x: {
              beginAtZero: true,
              max: 100
            }
          }
        }
      );

      (function renderProfitTimeline() {
        const canvas = document.getElementById('requestProfitChart');
        const labels = requestProfit.labels || [];
        if (!canvas || labels.length === 0) return;

        new Chart(canvas.getContext('2d'), {
          data: {
            labels: labels,
            datasets: [
              {
                type: 'bar',
                label: 'Solicitudes',
                data: requestProfit.request_count_values || [],
                yAxisID: 'y1',
                backgroundColor: 'rgba(37, 99, 235, 0.24)',
                borderColor: '#2563eb',
                borderWidth: 1
              },
              {
                type: 'line',
                label: 'Subtotal costo',
                data: requestProfit.cost_values || [],
                yAxisID: 'y',
                borderColor: '#334155',
                backgroundColor: '#334155',
                tension: 0.25
              },
              {
                type: 'line',
                label: 'Subtotal venta',
                data: requestProfit.sale_values || [],
                yAxisID: 'y',
                borderColor: '#0f766e',
                backgroundColor: '#0f766e',
                tension: 0.25
              },
              {
                type: 'line',
                label: 'Ganancia',
                data: requestProfit.profit_values || [],
                yAxisID: 'y',
                borderColor: '#16a34a',
                backgroundColor: '#16a34a',
                tension: 0.25
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
              mode: 'index',
              intersect: false
            },
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: 'Monto'
                }
              },
              y1: {
                beginAtZero: true,
                position: 'right',
                grid: {
                  drawOnChartArea: false
                },
                title: {
                  display: true,
                  text: 'Solicitudes'
                }
              }
            },
            plugins: {
              legend: { position: 'bottom' }
            }
          }
        });
      })();
    });
  </script>
@endpush