analytics/resources/views/funnels/show.blade.php

<x-analytics-layout :website="$website" :from="$from" :to="$to" :title="$funnel->name">
    <x-slot name="headerActions">
        <a href="{{ route('funnels.edit', [$website, $funnel]) }}" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-gray-300 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125" /></svg>
            Edit
        </a>
    </x-slot>

    @if (empty($steps))
        <x-empty-state title="No data" message="No funnel data available for the selected period." />
    @else
        <div class="space-y-6">
            {{-- Overall conversion --}}
            @php
                $overallRate = $steps[0]['visitors'] > 0
                    ? round(($steps[count($steps) - 1]['visitors'] / $steps[0]['visitors']) * 100, 1)
                    : 0;
            @endphp
            <div class="grid gap-4 sm:grid-cols-3">
                <div class="bg-white rounded-xl border border-gray-200 p-5">
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Entered Funnel</p>
                    <p class="mt-1 text-2xl font-bold text-gray-900 tabular-nums">{{ number_format($steps[0]['visitors']) }}</p>
                </div>
                <div class="bg-white rounded-xl border border-gray-200 p-5">
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Completed</p>
                    <p class="mt-1 text-2xl font-bold text-gray-900 tabular-nums">{{ number_format($steps[count($steps) - 1]['visitors']) }}</p>
                </div>
                <div class="bg-white rounded-xl border border-gray-200 p-5">
                    <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Overall Conversion</p>
                    <p class="mt-1 text-2xl font-bold text-gray-900 tabular-nums">{{ $overallRate }}%</p>
                </div>
            </div>

            {{-- Funnel visualization --}}
            <div class="bg-white rounded-xl border border-gray-200 p-6">
                <h3 class="text-base font-semibold text-gray-900 mb-6">Step-by-Step Breakdown</h3>

                <div class="space-y-0">
                    @foreach ($steps as $i => $step)
                        @php
                            $maxVisitors = $steps[0]['visitors'] ?: 1;
                            $widthPct = max(($step['visitors'] / $maxVisitors) * 100, 8);
                        @endphp
                        <div class="relative">
                            {{-- Bar --}}
                            <div class="flex items-center gap-4 py-3">
                                <div class="w-8 text-center">
                                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-full {{ $i === 0 ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-100 text-gray-600' }} text-xs font-bold">{{ $i + 1 }}</span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm font-medium text-gray-900 truncate">{{ $step['label'] }}</span>
                                        <span class="text-sm font-semibold text-gray-900 tabular-nums ml-2">{{ number_format($step['visitors']) }}</span>
                                    </div>
                                    <div class="w-full bg-gray-100 rounded-full h-8 overflow-hidden">
                                        <div
                                            class="h-8 rounded-full transition-all duration-500 {{ $i === 0 ? 'bg-indigo-500' : ($step['conversion_pct'] >= 50 ? 'bg-indigo-400' : 'bg-indigo-300') }}"
                                            style="width: {{ $widthPct }}%"
                                        >
                                            <span class="flex items-center h-full px-3 text-xs font-semibold text-white whitespace-nowrap">
                                                {{ $step['conversion_pct'] }}%
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Drop-off indicator --}}
                            @if ($i > 0 && $step['drop_off'] > 0)
                                <div class="ml-12 -mt-2 mb-1 flex items-center gap-1.5 text-xs text-red-500">
                                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 4.5-15 15m0 0h11.25m-11.25 0V8.25" /></svg>
                                    {{ number_format($step['drop_off']) }} dropped off ({{ $step['drop_off_pct'] }}%)
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Step details table --}}
            <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Step</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Drop-off</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Conversion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach ($steps as $i => $step)
                            <tr>
                                <td class="px-6 py-3 text-sm text-gray-900 font-medium">{{ $step['label'] }}</td>
                                <td class="px-6 py-3 text-sm">
                                    <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium {{ $step['type'] === 'pageview' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700' }}">
                                        {{ $step['type'] === 'pageview' ? 'Page' : 'Event' }}
                                    </span>
                                </td>
                                <td class="px-6 py-3 text-sm text-gray-900 text-right tabular-nums">{{ number_format($step['visitors']) }}</td>
                                <td class="px-6 py-3 text-sm text-right tabular-nums {{ $step['drop_off'] > 0 ? 'text-red-600' : 'text-gray-400' }}">
                                    {{ $i > 0 ? number_format($step['drop_off']) . ' (' . $step['drop_off_pct'] . '%)' : '—' }}
                                </td>
                                <td class="px-6 py-3 text-sm text-right tabular-nums font-medium text-gray-900">{{ $step['conversion_pct'] }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</x-analytics-layout>