<div>
    <x-title>KPIs</x-title>

    @php
        $fmtCell = function (array $row, $value) {
            if ($value === null) {
                return ['—', 'text-muted'];
            }
            return match ($row['type']) {
                'pct'   => [number_format($value, 0) . '%', 'text-dark'],
                'days'  => [number_format($value, 0) . 'd', 'text-dark'],
                'ratio' => [number_format($value, 1), 'text-dark'],
                'stock' => [number_format($value), 'text-dark fw-semibold'],
                default => $value > 0 ? [number_format($value), 'text-dark'] : ['—', 'text-muted'],
            };
        };

        $tabs = [
            'day'   => ['title' => 'Day',   'hint' => 'last 12 days',   'data' => $day],
            'week'  => ['title' => 'Week',  'hint' => 'last 12 weeks',  'data' => $week],
            'month' => ['title' => 'Month', 'hint' => 'last 12 months', 'data' => $month],
        ];
    @endphp

    <style>
        .hist-table { font-size: .78rem; border-collapse: separate; border-spacing: 0; }
        .hist-table th, .hist-table td { white-space: nowrap; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
        .hist-table th:first-child, .hist-table td:first-child { border-left: 1px solid #dee2e6; }
        .hist-table thead th { border-top: 1px solid #dee2e6; }
        .hist-table thead th { position: sticky; top: 0; z-index: 2; background: #f1f3f5; }
        .hist-table .sticky-col { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 rgba(0,0,0,.08); }
        .hist-table thead th.sticky-col { z-index: 3; background: #f1f3f5; }
        .hist-table tbody tr:hover td { background: #f8f9fa; }
        .hist-table tbody tr:hover .sticky-col { background: #f8f9fa; }
        .hist-num { font-variant-numeric: tabular-nums; }
        .hist-scroll { max-height: 72vh; overflow: auto; }
        .hist-target-input { width: 72px; font-size: .78rem; text-align: center; padding: .1rem .25rem; }
        .hist-table th.hist-target-col, .hist-table td.hist-target-col { background: #fbfbfc; }
        .hist-table tbody tr:hover td.hist-target-col { background: #f4f5f7; }
    </style>

    {{-- Filter --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between my-3 gap-2">
        <small class="text-muted">Metric “Leads In” and the full pipeline, day-by-day / week-by-week / month-by-month.</small>
        <div class="d-flex align-items-center gap-2">
            <i class="mdi mdi-filter-variant text-muted"></i>
            <select wire:model.live="leadSourceId" class="form-select form-select-sm shadow-sm" style="min-width:220px;">
                <option value="">All Lead Sources</option>
                @foreach ($leadSources as $source)
                    <option value="{{ $source->id }}">{{ $source->display_name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Tabs --}}
    <ul class="nav nav-tabs" id="historicTabs" role="tablist">
        @foreach ($tabs as $key => $tab)
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === $key ? 'active' : '' }}" id="tab-{{ $key }}-btn"
                        type="button" role="tab" wire:click="setActiveTab('{{ $key }}')">
                    {{ $tab['title'] }} <span class="text-muted small">· {{ $tab['hint'] }}</span>
                </button>
            </li>
        @endforeach
    </ul>

    <div class="tab-content">
        @foreach ($tabs as $key => $tab)
            <div class="tab-pane fade {{ $activeTab === $key ? 'show active' : '' }}" id="tab-{{ $key }}" role="tabpanel">
                <div class="card shadow-sm border-0" style="border-radius:0 0 .375rem .375rem;">
                    <div class="hist-scroll">
                        <table class="table table-sm table-hover mb-0 hist-table hist-num">
                            <thead>
                                <tr>
                                    <th class="sticky-col ps-3 py-2 text-muted fw-semibold">Metric</th>
                                    <th class="hist-target-col text-center py-2 px-2 text-dark fw-bold">Target</th>
                                    @foreach ($tab['data']['labels'] as $label)
                                        <th class="text-center py-2 px-2 text-dark fw-bold">{{ $label }}</th>
                                    @endforeach
                                    <th class="py-2 px-3 text-muted fw-semibold" style="white-space:normal;min-width:220px;">How it&rsquo;s calculated</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tab['data']['rows'] as $row)
                                    <tr>
                                        <td class="sticky-col ps-3 text-dark">
                                            {{ $row['label'] }}
                                            @if ($row['sub'])
                                                <span class="text-muted">{{ $row['sub'] }}</span>
                                            @endif
                                            @if ($row['type'] === 'stock')
                                                <i class="mdi mdi-clock-outline text-muted" title="Point-in-time (5pm snapshot)"></i>
                                            @endif
                                        </td>
                                        <td class="hist-target-col text-center px-1">
                                            <input type="number" step="any" inputmode="decimal"
                                                   class="form-control form-control-sm hist-target-input d-inline-block"
                                                   placeholder="—"
                                                   wire:model.blur="targets.{{ $key }}.{{ $row['key'] }}"
                                                   wire:key="target-{{ $key }}-{{ $row['key'] }}">
                                        </td>
                                        @foreach ($row['values'] as $value)
                                            @php [$text, $cls] = $fmtCell($row, $value); @endphp
                                            <td class="text-center px-2 {{ $cls }}">{{ $text }}</td>
                                        @endforeach
                                        <td class="px-3 text-muted" style="white-space:normal;">{{ $row['note'] }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <p class="text-muted small mt-2">
        <i class="mdi mdi-clock-outline me-1"></i>
        Rows marked with a clock are point-in-time counts read from the daily 5pm snapshot, so they populate from when snapshots began and fill in going forward.
    </p>
</div>
