<div>
    <x-title>Cohort by Created Date</x-title>

    @php
        $fmtCell = function (array $row) {
            $value = $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'],
                'current' => [number_format($value), 'text-dark fw-semibold'],
                default   => $value > 0 ? [number_format($value), 'text-dark'] : ['—', 'text-muted'],
            };
        };
    @endphp

    <style>
        .hist-table { font-size: .82rem; 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; background: #f1f3f5; }
        .hist-num { font-variant-numeric: tabular-nums; }
        .hist-value-col { min-width: 120px; }
    </style>

    {{-- How this differs from the KPIs report --}}
    <div class="alert alert-light border shadow-sm my-3" role="note">
        <div class="d-flex align-items-start gap-2">
            <i class="mdi mdi-information-outline text-primary fs-5 mt-1"></i>
            <div class="small">
                <div class="fw-semibold text-dark mb-1">How this differs from the KPIs report</div>
                <ul class="mb-1 ps-3">
                    <li>
                        The <strong>KPIs</strong> report counts each metric by <em>when the event happened</em>,
                        across the last 12 days / weeks / months. A single column mixes clients from many intakes.
                    </li>
                    <li>
                        This report instead fixes the <strong>group of clients created in your chosen date range</strong>
                        (the “cohort”, e.g. one campaign week) and shows how far <em>that same group</em> has
                        progressed <strong>to date</strong>. Use it to compare how individual intakes are performing.
                    </li>
                    <li>
                        Milestone rows (Contracts Signed, Sent To Redress, Closed, …) are <strong>cumulative</strong> —
                        cohort members who have <em>ever</em> reached that stage — and rates are the cohort’s
                        <strong>cumulative conversion</strong>, not a per-period rate.
                    </li>
                    <li>
                        Rows marked <i class="mdi mdi-radiobox-marked text-success"></i> <strong>“Now …”</strong> are
                        <strong>live</strong> counts of where the cohort sits right now. They replace the KPIs report’s
                        5pm-snapshot “stock” rows, which can’t be tied to a creation cohort.
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Range picker --}}
    <div class="d-flex flex-wrap align-items-end justify-content-between my-3 gap-3">
        <div class="d-flex align-items-end gap-2">
            <div>
                <label class="form-label small text-muted mb-1">Created from</label>
                <input type="date" wire:model.live="from" class="form-control form-control-sm shadow-sm" style="min-width:160px;">
            </div>
            <div>
                <label class="form-label small text-muted mb-1">Created to</label>
                <input type="date" wire:model.live="to" class="form-control form-control-sm shadow-sm" style="min-width:160px;">
            </div>
        </div>
        <small class="text-muted">
            Cohort: clients created <strong>{{ $fromLabel }}</strong> to <strong>{{ $toLabel }}</strong>
            ({{ number_format($days) }} {{ Str::plural('day', $days) }})
        </small>
    </div>

    {{-- Table --}}
    <div class="card shadow-sm border-0">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 hist-table hist-num">
                <thead>
                    <tr>
                        <th class="ps-3 py-2 text-muted fw-semibold">Metric</th>
                        <th class="hist-value-col text-center py-2 px-2 text-dark fw-bold">Cohort</th>
                        <th class="py-2 px-3 text-muted fw-semibold" style="white-space:normal;min-width:260px;">How it&rsquo;s calculated</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rows as $row)
                        @php [$text, $cls] = $fmtCell($row); @endphp
                        <tr>
                            <td class="ps-3 text-dark">
                                {{ $row['label'] }}
                                @if ($row['sub'])
                                    <span class="text-muted">{{ $row['sub'] }}</span>
                                @endif
                                @if ($row['type'] === 'current')
                                    <i class="mdi mdi-radiobox-marked text-success" title="Live count — where the cohort is now"></i>
                                @endif
                            </td>
                            <td class="text-center px-2 {{ $cls }}">{{ $text }}</td>
                            <td class="px-3 text-muted" style="white-space:normal;">{{ $row['note'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <p class="text-muted small mt-2">
        <i class="mdi mdi-radiobox-marked text-success me-1"></i>
        “Now …” rows are live and change as the cohort moves through the pipeline; every other row is cumulative to date.
    </p>
</div>
