@php
    $detailQuery = [
        'team' => 'marketing',
        'from' => request('from', $quarter['start'] ?? null),
        'to' => request('to', $quarter['end'] ?? null),
    ];

    $metricUrl = function (string $metric) use ($detailQuery) {
        return route('teams_performance.details', array_filter($detailQuery + ['metric' => $metric]));
    };
@endphp

<x-table :headers="['Total Leads', 'Trials Booked', 'Total Paid', 'Conv%', 'Achieved', 'of Target']" :paginator="$members"
    emptyMessage="No marketing data found.">
    @foreach ($members as $member)
        <tr>
            <td class="text-center">
                <button type="button" class="ui-pill ui-pill--neutral border-0 js-marketing-detail"
                    data-url="{{ $metricUrl('total_leads') }}">
                    {{ number_format($member->total_leads ?? 0) }}
                </button>
            </td>
            <td class="text-center">
                <button type="button" class="ui-pill ui-pill--success border-0 js-marketing-detail"
                    data-url="{{ $metricUrl('trials_booked') }}">
                    {{ number_format($member->trials_booked ?? 0) }}
                </button>
            </td>
            <td class="text-center">
                <button type="button" class="ui-pill ui-pill--info border-0 js-marketing-detail"
                    data-url="{{ $metricUrl('total_paid') }}">
                    {{ number_format($member->total_paid ?? 0) }}
                </button>
            </td>
            <td class="text-center">
                <span class="ui-title">{{ number_format($member->conv_percentage ?? 0, 2) }}%</span>
            </td>
            <td class="text-center">
                <button type="button" class="ui-pill ui-pill--success border-0 js-marketing-detail"
                    data-url="{{ $metricUrl('achieved') }}">
                    {{ number_format($member->achieved ?? 0, 2) }}
                </button>
            </td>
            <td class="text-center">
                <button type="button" class="border-0 bg-transparent p-0 js-marketing-detail"
                    data-url="{{ $metricUrl('of_target') }}">
                    <div class="d-flex align-items-center justify-content-center gap-2">
                        <div class="progress w-50" style="height: 6px;">
                            <div class="progress-bar {{ ($member->of_target_percentage ?? 0) >= 50 ? 'bg-success' : (($member->of_target_percentage ?? 0) >= 20 ? 'bg-warning' : 'bg-danger') }}"
                                role="progressbar" style="width: {{ min($member->of_target_percentage ?? 0, 100) }}%"
                                aria-valuenow="{{ $member->of_target_percentage ?? 0 }}" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                        <span class="ui-title">
                            {{ number_format($member->of_target_percentage ?? 0, 2) }}%
                            ({{ number_format($member->achieved ?? 0, 2) }}/{{ number_format($member->of_target ?? 0, 2) }})
                        </span>
                    </div>
                </button>
            </td>
        </tr>
    @endforeach
</x-table>