analytics/resources/views/reports/audience/technology.blade.php

<x-report-layout :website="$website" :from="$from" :to="$to" title="Technology Report">

    <x-slot name="scripts">
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const devicesData = @json($devices->map(fn($d) => ['label' => $d->device_type ?? 'Unknown', 'visitors' => $d->visitors])->values());
                if (devicesData.length > 0) {
                    const ctx = document.getElementById('deviceChart');
                    if (ctx) {
                        const colors = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6'];
                        new Chart(ctx, {
                            type: 'doughnut',
                            data: {
                                labels: devicesData.map(d => d.label),
                                datasets: [{
                                    data: devicesData.map(d => d.visitors),
                                    backgroundColor: colors.slice(0, devicesData.length),
                                    borderWidth: 0
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: {
                                    tooltip: {
                                        backgroundColor: 'rgba(17,24,39,0.95)',
                                        padding: 10,
                                        cornerRadius: 8
                                    }
                                }
                            }
                        });
                    }
                }
            });
        </script>
    </x-slot>

    <div class="space-y-6">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Device Type</h3>
            @if ($devices->isNotEmpty())
                @php $totalDevices = $devices->sum('visitors'); @endphp
                <div class="grid gap-6 lg:grid-cols-2">
                    <div class="h-64">
                        <canvas id="deviceChart"></canvas>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-3">
                        @foreach ($devices as $row)
                            <div class="rounded-xl border border-gray-200 p-4 text-center">
                                <div class="text-2xl font-bold text-gray-900">{{ $totalDevices > 0 ? round(($row->visitors / $totalDevices) * 100, 1) : 0 }}%</div>
                                <div class="text-sm text-gray-500 capitalize mt-1">{{ $row->device_type ?? 'Unknown' }}</div>
                                <div class="text-xs text-gray-400">{{ number_format($row->visitors) }} visitors</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <x-empty-state message="No device data available." />
            @endif
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
                <h3 class="text-base font-semibold text-gray-900 mb-4">Browsers</h3>
                @if ($browsers->isNotEmpty())
                    @php $totalBrowsers = $browsers->sum('visitors'); @endphp
                    <div class="space-y-3">
                        @foreach ($browsers as $row)
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-900">{{ $row->browser }}</span>
                                    <span class="text-gray-500">{{ number_format($row->visitors) }} ({{ $totalBrowsers > 0 ? round(($row->visitors / $totalBrowsers) * 100, 1) : 0 }}%)</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2">
                                    <div class="bg-indigo-500 h-2 rounded-full" style="width: {{ $totalBrowsers > 0 ? ($row->visitors / $totalBrowsers) * 100 : 0 }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <x-empty-state message="No browser data available." />
                @endif
            </div>

            <div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
                <h3 class="text-base font-semibold text-gray-900 mb-4">Operating Systems</h3>
                @if ($operatingSystems->isNotEmpty())
                    @php $totalOS = $operatingSystems->sum('visitors'); @endphp
                    <div class="space-y-3">
                        @foreach ($operatingSystems as $row)
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-900">{{ $row->os }}</span>
                                    <span class="text-gray-500">{{ number_format($row->visitors) }} ({{ $totalOS > 0 ? round(($row->visitors / $totalOS) * 100, 1) : 0 }}%)</span>
                                </div>
                                <div class="w-full bg-gray-100 rounded-full h-2">
                                    <div class="bg-emerald-500 h-2 rounded-full" style="width: {{ $totalOS > 0 ? ($row->visitors / $totalOS) * 100 : 0 }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <x-empty-state message="No OS data available." />
                @endif
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden p-6">
            <h3 class="text-base font-semibold text-gray-900 mb-4">Screen Resolutions</h3>
            @if ($resolutions->isNotEmpty())
                <div class="overflow-x-auto">
                    <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">Resolution</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Visitors</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @foreach ($resolutions as $row)
                                <tr>
                                    <td class="px-6 py-3 text-sm text-gray-900 font-mono">{{ $row->screen_resolution }}</td>
                                    <td class="px-6 py-3 text-sm text-gray-900 text-right">{{ number_format($row->visitors) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <x-empty-state message="No screen resolution data available." />
            @endif
        </div>
    </div>

</x-report-layout>