@extends('layouts.enterprise')

@section('title', 'Clientes')

@section('content')
  <div class="card clients-page-shell">
    <h1 class="page-title">Clientes</h1>
    <p class="subtle">Administra clientes, datos fiscales, reglas de validación RC y la lógica de agrupación de vistas previas por tipo de RC.</p>

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

    @php
      $indexRoute = request()->routeIs('accountant.*') ? route('accountant.clients.index') : route('admin.clients.index');
      $storeRoute = request()->routeIs('accountant.*') ? route('accountant.clients.store') : route('admin.clients.store');
      $hasActiveFilters = (($filters['q'] ?? '') !== '') || (($filters['active'] ?? 'all') !== 'all');
      $engineOptions = $groupingEngineOptions ?? [];
      $inboundDefaults = $groupingInboundDefaults ?? [];
      $ruleTypeOptions = $groupingRuleTypeOptions ?? [];
      $oldGroupingEngine = old('grouping_engine', \App\Support\ClientRequestGrouping::ENGINE_RC_RULES);
      $oldInboundConfig = old('grouping_engine_config', [
        'mx_project_number_regex' => $inboundDefaults['mx_project_number_regex'] ?? '^MX\\d{8}$',
        'n6_project_number_regex' => $inboundDefaults['n6_project_number_regex'] ?? '^N6MX\\d{4}$',
        'dummy_sponsor_values' => implode(', ', $inboundDefaults['dummy_sponsor_values'] ?? ['DUMMY']),
        'require_same_currency' => $inboundDefaults['require_same_currency'] ?? true,
      ]);
      $oldRules = old('rc_grouping_rules', [['type' => 'prefix', 'value' => '']]);
    @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="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--two">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Nombre, RFC o correo">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="active">
              <option value="all" @selected(($filters['active'] ?? 'all') === 'all')>Todos</option>
              <option value="1" @selected(($filters['active'] ?? 'all') === '1')>Activos</option>
              <option value="0" @selected(($filters['active'] ?? 'all') === '0')>Inactivos</option>
            </select>
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          <span class="badge">Resultados: {{ $clients->total() }}</span>
        </div>
      </form>
    </sl-details>

    <div class="card card-dashed" style="margin-bottom: 14px;">
      <h2 class="section-title" style="margin-top:0;">Alta de cliente</h2>
      <form method="POST" action="{{ $storeRoute }}" class="client-config-form js-client-config-form">
        @csrf
        <div class="filters-grid filters-grid--four">
          <div class="field">
            <label>Nombre</label>
            <input type="text" name="name" value="{{ old('name') }}" required placeholder="Razón social o nombre comercial">
          </div>
          <div class="field">
            <label>RFC</label>
            <input type="text" name="rfc" value="{{ old('rfc') }}" placeholder="RFC">
          </div>
          <div class="field">
            <label>Correo</label>
            <input type="email" name="email" value="{{ old('email') }}" placeholder="correo@cliente.com">
          </div>
          <div class="field">
            <label>Teléfono</label>
            <input type="text" name="phone" value="{{ old('phone') }}" placeholder="Teléfono">
          </div>
          <div class="field">
            <label>Días de pago</label>
            <input type="number" name="payment_days" min="0" max="365" step="1" value="{{ old('payment_days') }}" placeholder="Ej. 30">
          </div>
          <div class="field field-span-full">
            <small><strong>Datos fiscales para Facturama:</strong> captura aquí <code>Uso CFDI</code>, <code>Régimen fiscal receptor</code> y <code>CP fiscal receptor</code> del cliente.</small>
          </div>
          <div class="field">
            <label>Uso CFDI</label>
            <input type="text" name="cfdi_use" value="{{ old('cfdi_use') }}" maxlength="10" placeholder="G03">
          </div>
          <div class="field">
            <label>Régimen fiscal receptor</label>
            <input type="text" name="fiscal_regime" value="{{ old('fiscal_regime') }}" maxlength="10" placeholder="601">
          </div>
          <div class="field">
            <label>CP fiscal receptor</label>
            <input type="text" name="tax_zip_code" value="{{ old('tax_zip_code') }}" maxlength="5" placeholder="01710">
          </div>
        </div>

        <div class="client-config-grid">
          <div class="client-config-card">
            <h3>Validaciones</h3>
            <p class="subtle">Activa reglas extra para la carga de información. Ojo: el RC solicitud (Pipefy) y el RC cliente por artículo son cosas distintas.</p>
            <div class="filters-actions">
              <sl-checkbox name="validation_rc" value="1" @checked(old('validation_rc'))>
                Validación RC por artículo
              </sl-checkbox>
              <sl-checkbox name="is_active" value="1" @checked(old('is_active', true))>
                Cliente activo
              </sl-checkbox>
            </div>
          </div>

          <div class="client-config-card">
            <h3>Agrupación RC</h3>
            <p class="subtle">Aquí defines cómo se valida la agrupación. Puede ser con reglas RC estándar o con recibos inbound estilo CHUBB, según lo que necesite este cliente.</p>
            <div class="notice notice-soft" style="margin-bottom:10px;">
              <strong>Cómo funciona:</strong>
              Si activas <strong>Validación RC por artículo</strong>, el RC cliente seguirá siendo obligatorio en la captura fiscal. Pero si eliges <strong>Recibos inbound (CHUBB)</strong>, la compatibilidad de solicitudes se evaluará con el email inbound del RC, no con el RC cliente capturado por artículo.
            </div>
            <div class="filters-actions" style="margin-bottom:8px;">
              <sl-checkbox class="js-groupable-toggle" name="is_groupable" value="1" @checked(old('is_groupable'))>
                Agrupable
              </sl-checkbox>
              <span class="badge">Cada cliente puede tener su propio motor de agrupación.</span>
            </div>
            <div class="grouping-rules-panel js-grouping-rules-panel" @if(!old('is_groupable')) style="display:none;" @endif>
              <div class="field" style="margin-bottom:10px;">
                <label>Motor de agrupación</label>
                <select name="grouping_engine" class="js-grouping-engine">
                  @foreach($engineOptions as $engineValue => $engineLabel)
                    <option value="{{ $engineValue }}" @selected($oldGroupingEngine === $engineValue)>{{ $engineLabel }}</option>
                  @endforeach
                </select>
              </div>

              <div class="js-grouping-rc-rules-panel" @if($oldGroupingEngine !== \App\Support\ClientRequestGrouping::ENGINE_RC_RULES) style="display:none;" @endif>
                <div class="grouping-rules-list js-grouping-rules-list">
                  @foreach($oldRules as $index => $rule)
                    <div class="grouping-rule-row js-grouping-rule-row">
                      <select name="rc_grouping_rules[{{ $index }}][type]">
                        @foreach($ruleTypeOptions as $ruleValue => $ruleLabel)
                          <option value="{{ $ruleValue }}" @selected(($rule['type'] ?? '') === $ruleValue)>{{ $ruleLabel }}</option>
                        @endforeach
                      </select>
                      <input type="text" name="rc_grouping_rules[{{ $index }}][value]" value="{{ $rule['value'] ?? '' }}" placeholder="MX, N6, DUMMY o regex">
                      <sl-button type="button" size="small" variant="danger" class="js-remove-grouping-rule">Quitar</sl-button>
                    </div>
                  @endforeach
                </div>
                <div class="filters-actions">
                  <sl-button type="button" size="small" class="js-add-grouping-rule">Agregar regla</sl-button>
                </div>
                <small>Recomendación: usa Prefijo, Exacto o Solo numéricos. Deja Regex solo para casos avanzados.</small>
              </div>

              <div class="js-grouping-inbound-panel" @if($oldGroupingEngine !== \App\Support\ClientRequestGrouping::ENGINE_INBOUND_RECEIPTS) style="display:none;" @endif>
                <div class="grouping-engine-grid">
                  <div class="field">
                    <label>Regex proyecto MX</label>
                    <input type="text" name="grouping_engine_config[mx_project_number_regex]" value="{{ $oldInboundConfig['mx_project_number_regex'] ?? '' }}" placeholder="^MX\d{8}$">
                  </div>
                  <div class="field">
                    <label>Regex proyecto N6</label>
                    <input type="text" name="grouping_engine_config[n6_project_number_regex]" value="{{ $oldInboundConfig['n6_project_number_regex'] ?? '' }}" placeholder="^N6MX\d{4}$">
                  </div>
                  <div class="field">
                    <label>Sponsor(s) DUMMY</label>
                    <input type="text" name="grouping_engine_config[dummy_sponsor_values]" value="{{ is_array($oldInboundConfig['dummy_sponsor_values'] ?? null) ? implode(', ', $oldInboundConfig['dummy_sponsor_values']) : ($oldInboundConfig['dummy_sponsor_values'] ?? '') }}" placeholder="DUMMY">
                  </div>
                </div>
                <div class="filters-actions" style="margin-top:10px;">
                  <sl-checkbox name="grouping_engine_config[require_same_currency]" value="1" @checked((bool) ($oldInboundConfig['require_same_currency'] ?? true))>
                    Exigir misma moneda
                  </sl-checkbox>
                  <span class="badge">Para CHUBB: MX, N6, DUMMY o RESTO, siempre contra el email inbound del RC.</span>
                </div>
                <small>Como cada variante de CHUBB ya es un cliente distinto, aquí solo configuramos la clasificación del recibo y la regla de moneda.</small>
              </div>
            </div>
          </div>
        </div>

        <div class="filters-actions">
          <button class="btn" type="submit">Guardar cliente</button>
        </div>
      </form>
    </div>

    <div class="movements-table-wrap">
      <table class="movements-table movements-table--clients">
        <thead>
          <tr>
            <th>ID</th>
            <th>Cliente</th>
            <th>RFC</th>
            <th>Email</th>
            <th>Teléfono</th>
            <th>Días pago</th>
            <th>Validación RC</th>
            <th>Agrupable</th>
            <th>Motor agrupación</th>
            <th>Configuración agrupación</th>
            <th>Movimientos</th>
            <th>Ingresos</th>
            <th>Egresos</th>
            <th>Vistas previas</th>
            <th>Estatus</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($clients as $client)
            @php
              $updateRoute = request()->routeIs('accountant.*')
                ? route('accountant.clients.update', $client)
                : route('admin.clients.update', $client);
              $clientRules = old('client_edit_id') == $client->id
                ? old('rc_grouping_rules', $client->rc_grouping_rules ?? [['type' => 'prefix', 'value' => '']])
                : ($client->rc_grouping_rules ?? [['type' => 'prefix', 'value' => '']]);
              $clientGroupingEngine = old('client_edit_id') == $client->id
                ? old('grouping_engine', $client->grouping_engine ?: \App\Support\ClientRequestGrouping::ENGINE_RC_RULES)
                : ($client->grouping_engine ?: \App\Support\ClientRequestGrouping::ENGINE_RC_RULES);
              $clientInboundConfig = old('client_edit_id') == $client->id
                ? old('grouping_engine_config', [
                    'mx_project_number_regex' => data_get($client->grouping_engine_config, 'mx_project_number_regex', $inboundDefaults['mx_project_number_regex'] ?? '^MX\\d{8}$'),
                    'n6_project_number_regex' => data_get($client->grouping_engine_config, 'n6_project_number_regex', $inboundDefaults['n6_project_number_regex'] ?? '^N6MX\\d{4}$'),
                    'dummy_sponsor_values' => implode(', ', data_get($client->grouping_engine_config, 'dummy_sponsor_values', $inboundDefaults['dummy_sponsor_values'] ?? ['DUMMY'])),
                    'require_same_currency' => data_get($client->grouping_engine_config, 'require_same_currency', $inboundDefaults['require_same_currency'] ?? true),
                  ])
                : [
                    'mx_project_number_regex' => data_get($client->grouping_engine_config, 'mx_project_number_regex', $inboundDefaults['mx_project_number_regex'] ?? '^MX\\d{8}$'),
                    'n6_project_number_regex' => data_get($client->grouping_engine_config, 'n6_project_number_regex', $inboundDefaults['n6_project_number_regex'] ?? '^N6MX\\d{4}$'),
                    'dummy_sponsor_values' => implode(', ', data_get($client->grouping_engine_config, 'dummy_sponsor_values', $inboundDefaults['dummy_sponsor_values'] ?? ['DUMMY'])),
                    'require_same_currency' => data_get($client->grouping_engine_config, 'require_same_currency', $inboundDefaults['require_same_currency'] ?? true),
                  ];
            @endphp
            <tr>
              <td>{{ $client->id }}</td>
              <td>{{ $client->name }}</td>
              <td>{{ $client->rfc ?: '-' }}</td>
              <td>{{ $client->email ?: '-' }}</td>
              <td>{{ $client->phone ?: '-' }}</td>
              <td>{{ $client->payment_days !== null ? (int) $client->payment_days : '-' }}</td>
              <td>
                <span class="badge {{ $client->validation_rc ? 'badge-income' : '' }}">
                  {{ $client->validation_rc ? 'Sí' : 'No' }}
                </span>
              </td>
              <td>
                <span class="badge {{ $client->is_groupable ? 'badge-income' : '' }}">
                  {{ $client->is_groupable ? 'Sí' : 'No' }}
                </span>
              </td>
              <td>
                <span class="badge {{ $client->is_groupable ? 'badge-income' : '' }}">
                  {{ $client->grouping_engine_label }}
                </span>
              </td>
              <td>
                <div class="rules-summary">{{ $client->grouping_rules_summary }}</div>
              </td>
              <td>{{ (int) $client->financial_movements_count }}</td>
              <td>${{ number_format((float) ($client->incomes_sum ?? 0), 2) }}</td>
              <td>${{ number_format((float) ($client->expenses_sum ?? 0), 2) }}</td>
              <td>{{ (int) $client->generated_invoices_count }}</td>
              <td>
                <span class="badge {{ $client->is_active ? 'badge-income' : 'badge-expense' }}">
                  {{ $client->is_active ? 'Activo' : 'Inactivo' }}
                </span>
              </td>
              <td style="min-width: 150px;">
                <sl-button
                  type="button"
                  size="small"
                  class="client-edit-trigger"
                  data-dialog="client-edit-dialog-{{ $client->id }}"
                >
                  Editar
                </sl-button>

                <sl-dialog
                  label="Editar cliente #{{ $client->id }}"
                  class="client-edit-dialog"
                  id="client-edit-dialog-{{ $client->id }}"
                  hoist
                >
                  <form method="POST" action="{{ $updateRoute }}" class="client-config-form js-client-config-form" id="client-edit-form-{{ $client->id }}">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="client_edit_id" value="{{ $client->id }}">
                    <div class="client-config-card client-config-card--modal">
                      <h3>Datos generales del cliente</h3>
                      <p class="subtle">Aquí puedes editar la información principal y fiscal del cliente antes de tocar las reglas de validación o agrupación.</p>
                      <div class="client-edit-fields">
                        <div class="field client-edit-fields__name">
                          <label>Nombre</label>
                          <input type="text" name="name" value="{{ old('client_edit_id') == $client->id ? old('name', $client->name) : $client->name }}" required>
                        </div>
                        <div class="field">
                          <label>RFC</label>
                          <input type="text" name="rfc" value="{{ old('client_edit_id') == $client->id ? old('rfc', $client->rfc) : $client->rfc }}">
                        </div>
                        <div class="field">
                          <label>Correo</label>
                          <input type="email" name="email" value="{{ old('client_edit_id') == $client->id ? old('email', $client->email) : $client->email }}">
                        </div>
                        <div class="field">
                          <label>Teléfono</label>
                          <input type="text" name="phone" value="{{ old('client_edit_id') == $client->id ? old('phone', $client->phone) : $client->phone }}">
                        </div>
                        <div class="field">
                          <label>Días de pago</label>
                          <input type="number" name="payment_days" min="0" max="365" step="1" value="{{ old('client_edit_id') == $client->id ? old('payment_days', $client->payment_days) : $client->payment_days }}">
                        </div>
                        <div class="field client-edit-fields__name">
                          <small><strong>Datos fiscales para Facturama:</strong> llena estos tres campos directamente en el perfil del cliente.</small>
                        </div>
                        <div class="field">
                          <label>Uso CFDI</label>
                          <input type="text" name="cfdi_use" maxlength="10" value="{{ old('client_edit_id') == $client->id ? old('cfdi_use', $client->cfdi_use) : $client->cfdi_use }}" placeholder="G03">
                        </div>
                        <div class="field">
                          <label>Régimen fiscal receptor</label>
                          <input type="text" name="fiscal_regime" maxlength="10" value="{{ old('client_edit_id') == $client->id ? old('fiscal_regime', $client->fiscal_regime) : $client->fiscal_regime }}" placeholder="601">
                        </div>
                        <div class="field">
                          <label>CP fiscal receptor</label>
                          <input type="text" name="tax_zip_code" maxlength="5" value="{{ old('client_edit_id') == $client->id ? old('tax_zip_code', $client->tax_zip_code) : $client->tax_zip_code }}" placeholder="01710">
                        </div>
                      </div>
                    </div>

                    <div class="client-config-grid client-config-grid--edit">
                      <div class="client-config-card">
                        <h3>Validaciones</h3>
                        <p class="subtle">Activa reglas extra para la carga de información. El RC solicitud (Pipefy) y el RC cliente por artículo se manejan por separado.</p>
                        <div class="filters-actions">
                          <sl-checkbox name="validation_rc" value="1" @checked(old('client_edit_id') == $client->id ? old('validation_rc', $client->validation_rc) : $client->validation_rc)>
                            Validación RC por artículo
                          </sl-checkbox>
                          <sl-checkbox name="is_active" value="1" @checked(old('client_edit_id') == $client->id ? old('is_active', $client->is_active) : $client->is_active)>
                            Cliente activo
                          </sl-checkbox>
                        </div>
                      </div>

                      <div class="client-config-card">
                        <h3>Agrupación RC</h3>
                        <div class="notice notice-soft" style="margin-bottom:10px;">
                          <strong>Cómo funciona:</strong>
                          Si eliges <strong>Recibos inbound (CHUBB)</strong>, la agrupación se valida con el email inbound del RC. El RC cliente por artículo puede seguir siendo obligatorio, pero ya no define qué solicitudes se pueden juntar.
                        </div>
                        <div class="filters-actions" style="margin-bottom:8px;">
                          <sl-checkbox class="js-groupable-toggle" name="is_groupable" value="1" @checked(old('client_edit_id') == $client->id ? old('is_groupable', $client->is_groupable) : $client->is_groupable)>
                            Agrupable
                          </sl-checkbox>
                        </div>
                        <div class="grouping-rules-panel js-grouping-rules-panel" @if(!(old('client_edit_id') == $client->id ? old('is_groupable', $client->is_groupable) : $client->is_groupable)) style="display:none;" @endif>
                          <div class="field" style="margin-bottom:10px;">
                            <label>Motor de agrupación</label>
                            <select name="grouping_engine" class="js-grouping-engine">
                              @foreach($engineOptions as $engineValue => $engineLabel)
                                <option value="{{ $engineValue }}" @selected($clientGroupingEngine === $engineValue)>{{ $engineLabel }}</option>
                              @endforeach
                            </select>
                          </div>
                          <div class="js-grouping-rc-rules-panel" @if($clientGroupingEngine !== \App\Support\ClientRequestGrouping::ENGINE_RC_RULES) style="display:none;" @endif>
                            <div class="grouping-rules-list js-grouping-rules-list">
                              @foreach($clientRules as $index => $rule)
                                <div class="grouping-rule-row js-grouping-rule-row">
                                  <select name="rc_grouping_rules[{{ $index }}][type]">
                                    @foreach($ruleTypeOptions as $ruleValue => $ruleLabel)
                                      <option value="{{ $ruleValue }}" @selected(($rule['type'] ?? '') === $ruleValue)>{{ $ruleLabel }}</option>
                                    @endforeach
                                  </select>
                                  <input type="text" name="rc_grouping_rules[{{ $index }}][value]" value="{{ $rule['value'] ?? '' }}" placeholder="MX, N6, DUMMY o regex">
                                  <sl-button type="button" size="small" variant="danger" class="js-remove-grouping-rule">Quitar</sl-button>
                                </div>
                              @endforeach
                            </div>
                            <div class="filters-actions">
                              <sl-button type="button" size="small" class="js-add-grouping-rule">Agregar regla</sl-button>
                            </div>
                          </div>
                          <div class="js-grouping-inbound-panel" @if($clientGroupingEngine !== \App\Support\ClientRequestGrouping::ENGINE_INBOUND_RECEIPTS) style="display:none;" @endif>
                            <div class="grouping-engine-grid">
                              <div class="field">
                                <label>Regex proyecto MX</label>
                                <input type="text" name="grouping_engine_config[mx_project_number_regex]" value="{{ $clientInboundConfig['mx_project_number_regex'] ?? '' }}" placeholder="^MX\d{8}$">
                              </div>
                              <div class="field">
                                <label>Regex proyecto N6</label>
                                <input type="text" name="grouping_engine_config[n6_project_number_regex]" value="{{ $clientInboundConfig['n6_project_number_regex'] ?? '' }}" placeholder="^N6MX\d{4}$">
                              </div>
                              <div class="field">
                                <label>Sponsor(s) DUMMY</label>
                                <input type="text" name="grouping_engine_config[dummy_sponsor_values]" value="{{ is_array($clientInboundConfig['dummy_sponsor_values'] ?? null) ? implode(', ', $clientInboundConfig['dummy_sponsor_values']) : ($clientInboundConfig['dummy_sponsor_values'] ?? '') }}" placeholder="DUMMY">
                              </div>
                            </div>
                            <div class="filters-actions" style="margin-top:10px;">
                              <sl-checkbox name="grouping_engine_config[require_same_currency]" value="1" @checked((bool) ($clientInboundConfig['require_same_currency'] ?? true))>
                                Exigir misma moneda
                              </sl-checkbox>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <div slot="footer" class="client-dialog-footer">
                    <sl-button type="button" variant="neutral" class="js-close-client-dialog">Cancelar</sl-button>
                    <sl-button type="submit" variant="primary" form="client-edit-form-{{ $client->id }}">Guardar cambios</sl-button>
                  </div>
                </sl-dialog>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="16">No hay clientes registrados.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div style="margin-top: 16px;">
      {{ $clients->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>

  <template id="grouping-rule-template">
    <div class="grouping-rule-row js-grouping-rule-row">
      <select data-name="type">
        @foreach($ruleTypeOptions as $ruleValue => $ruleLabel)
          <option value="{{ $ruleValue }}">{{ $ruleLabel }}</option>
        @endforeach
      </select>
      <input type="text" data-name="value" placeholder="MX, N6, DUMMY o regex">
      <sl-button type="button" size="small" variant="danger" class="js-remove-grouping-rule">Quitar</sl-button>
    </div>
  </template>
@endsection

@push('styles')
  <style>
    .wrap {
      max-width: min(1720px, calc(100vw - 32px));
      padding-left: 16px;
      padding-right: 16px;
    }
    .clients-page-shell {
      width: 100%;
    }
    .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--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filters-grid--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .filters-grid--five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .card-dashed {
      border: 1px dashed var(--border);
      box-shadow: none;
    }
    .client-config-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 10px;
    }
    .client-config-grid--edit {
      grid-template-columns: 1fr;
    }
    .client-config-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      padding: 14px;
    }
    .client-config-card h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      color: #0f172a;
    }
    .grouping-rules-panel {
      border-top: 1px dashed var(--border);
      margin-top: 10px;
      padding-top: 10px;
    }
    .grouping-rules-list {
      display: grid;
      gap: 8px;
      margin-bottom: 10px;
    }
    .grouping-engine-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }
    .grouping-rule-row {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1480px;
      border: 0;
      margin: 0;
    }
    .movements-table--clients {
      min-width: 1640px;
    }
    .client-edit-dialog::part(base) {
      align-items: flex-start;
      justify-content: center;
      padding: max(18px, env(safe-area-inset-top)) 18px 18px;
    }
    .client-edit-dialog::part(overlay) {
      background: rgba(15, 23, 42, 0.56);
      backdrop-filter: blur(5px);
    }
    .client-edit-dialog::part(panel) {
      width: min(1240px, calc(100vw - 24px));
      max-width: min(1240px, calc(100vw - 24px));
      height: auto;
      max-height: calc(100vh - 36px);
      margin: 0 auto;
      border-radius: 18px;
      border: 1px solid var(--border);
      box-shadow: 0 32px 80px rgba(15, 23, 42, 0.32);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .client-edit-dialog::part(header) {
      padding: 18px 22px 10px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .client-edit-dialog::part(body) {
      padding: 16px 22px;
      flex: 1 1 auto;
      min-height: 0;
      max-height: calc(100vh - 220px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #ffffff;
      padding-bottom: 24px;
    }
    .client-edit-dialog::part(footer) {
      padding: 14px 22px 18px;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }
    .client-config-card--modal {
      margin-bottom: 12px;
    }
    .field-span-full {
      grid-column: 1 / -1;
    }
    .client-edit-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .client-edit-fields__name {
      grid-column: 1 / -1;
    }
    .client-dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .badge-income {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .badge-expense {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
    .rules-summary {
      min-width: 220px;
      color: #475569;
      line-height: 1.4;
    }
    @media (max-width: 980px) {
      .filters-grid--two,
      .filters-grid--four,
      .filters-grid--five,
      .client-config-grid,
      .grouping-engine-grid {
        grid-template-columns: 1fr;
      }
      .wrap {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
      }
      .grouping-rule-row {
        grid-template-columns: 1fr;
      }
      .client-edit-dialog::part(panel) {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 14px;
      }
      .client-edit-dialog::part(base) {
        padding: 6px;
      }
      .client-edit-dialog::part(header),
      .client-edit-dialog::part(body),
      .client-edit-dialog::part(footer) {
        padding-left: 14px;
        padding-right: 14px;
      }
      .client-edit-fields {
        grid-template-columns: 1fr;
      }
      .field-span-full,
      .client-edit-fields__name {
        grid-column: auto;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const template = document.getElementById('grouping-rule-template');
      const oldEditClientId = @json(old('client_edit_id'));
      const resetClientDialogPosition = (dialog) => {
        if (!dialog) return;

        const bodyPart = dialog.shadowRoot?.querySelector('[part="body"]');
        if (bodyPart && typeof bodyPart.scrollTo === 'function') {
          bodyPart.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        } else if (bodyPart) {
          bodyPart.scrollTop = 0;
        }

        const panelPart = dialog.shadowRoot?.querySelector('[part="panel"]');
        if (panelPart && typeof panelPart.scrollTo === 'function') {
          panelPart.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        } else if (panelPart) {
          panelPart.scrollTop = 0;
        }
      };
      const openClientDialog = (dialog) => {
        if (!dialog) return;

        dialog.dataset.returnScrollY = String(window.scrollY || window.pageYOffset || 0);
        dialog.show();
      };

      const updateRuleNames = (form) => {
        form.querySelectorAll('.js-grouping-rules-list').forEach((list) => {
          Array.from(list.querySelectorAll('.js-grouping-rule-row')).forEach((row, index) => {
            const typeField = row.querySelector('[data-name="type"]') || row.querySelector('select');
            const valueField = row.querySelector('[data-name="value"]') || row.querySelector('input[type="text"]');
            if (typeField) {
              typeField.name = `rc_grouping_rules[${index}][type]`;
            }
            if (valueField) {
              valueField.name = `rc_grouping_rules[${index}][value]`;
            }
          });
        });
      };

      const ensureAtLeastOneRule = (form) => {
        const list = form.querySelector('.js-grouping-rules-list');
        const toggle = form.querySelector('.js-groupable-toggle');
        if (!list || !toggle || !toggle.checked) {
          return;
        }
        if (list.querySelectorAll('.js-grouping-rule-row').length === 0 && template) {
          const clone = template.content.firstElementChild.cloneNode(true);
          list.appendChild(clone);
          updateRuleNames(form);
        }
      };

      document.querySelectorAll('.js-client-config-form').forEach((form) => {
        const toggle = form.querySelector('.js-groupable-toggle');
        const panel = form.querySelector('.js-grouping-rules-panel');
        const list = form.querySelector('.js-grouping-rules-list');
        const addButton = form.querySelector('.js-add-grouping-rule');
        const engineSelect = form.querySelector('.js-grouping-engine');
        const rcRulesPanel = form.querySelector('.js-grouping-rc-rules-panel');
        const inboundPanel = form.querySelector('.js-grouping-inbound-panel');

        const syncPanel = () => {
          if (!toggle || !panel) return;
          const isEnabled = toggle.checked;
          const engine = engineSelect?.value || '{{ \App\Support\ClientRequestGrouping::ENGINE_RC_RULES }}';

          panel.style.display = isEnabled ? '' : 'none';
          if (rcRulesPanel) {
            rcRulesPanel.style.display = isEnabled && engine === '{{ \App\Support\ClientRequestGrouping::ENGINE_RC_RULES }}' ? '' : 'none';
          }
          if (inboundPanel) {
            inboundPanel.style.display = isEnabled && engine === '{{ \App\Support\ClientRequestGrouping::ENGINE_INBOUND_RECEIPTS }}' ? '' : 'none';
          }

          if (isEnabled && engine === '{{ \App\Support\ClientRequestGrouping::ENGINE_RC_RULES }}') {
            ensureAtLeastOneRule(form);
          }
        };

        if (toggle) {
          toggle.addEventListener('sl-change', syncPanel);
          toggle.addEventListener('change', syncPanel);
          syncPanel();
        }

        if (engineSelect) {
          engineSelect.addEventListener('change', syncPanel);
        }

        if (addButton && list && template) {
          addButton.addEventListener('click', () => {
            const clone = template.content.firstElementChild.cloneNode(true);
            list.appendChild(clone);
            updateRuleNames(form);
          });
        }

        form.addEventListener('click', (event) => {
          const target = event.target.closest('.js-remove-grouping-rule');
          if (!target || !list) return;
          const row = target.closest('.js-grouping-rule-row');
          if (row) {
            row.remove();
            updateRuleNames(form);
            ensureAtLeastOneRule(form);
          }
        });

        updateRuleNames(form);
      });

      document.querySelectorAll('.client-edit-trigger').forEach((button) => {
        button.addEventListener('click', () => {
          const dialog = document.getElementById(button.dataset.dialog || '');
          openClientDialog(dialog);
        });
      });

      document.querySelectorAll('.client-edit-dialog').forEach((dialog) => {
        dialog.addEventListener('sl-after-show', () => {
          window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
          resetClientDialogPosition(dialog);

          requestAnimationFrame(() => {
            const firstField = dialog.querySelector('input, select, textarea');
            if (firstField && typeof firstField.focus === 'function') {
              try {
                firstField.focus({ preventScroll: true });
              } catch (error) {
                firstField.focus();
              }
            }
          });
        });

        dialog.addEventListener('sl-after-hide', () => {
          const returnScrollY = Number(dialog.dataset.returnScrollY || 0);
          window.scrollTo({ top: returnScrollY, left: 0, behavior: 'auto' });
        });

        dialog.querySelectorAll('.js-close-client-dialog').forEach((button) => {
          button.addEventListener('click', () => dialog.hide());
        });
      });

      if (oldEditClientId) {
        const dialog = document.getElementById(`client-edit-dialog-${oldEditClientId}`);
        openClientDialog(dialog);
      }
    });
  </script>
@endpush