@extends('layouts.master')

@section('content')

<main class="pt-24 px-8 pb-16 min-h-screen">

    {{-- PAGE HEADER --}}
    <div class="mb-10">

        <h1 class="text-3xl font-black tracking-tight text-primary">
            Dashboard Analytics
        </h1>

        <p class="text-sm text-on-surface-variant mt-2">
            User analytics, gameplay funnel, personas & university insights
        </p>

    </div>

    {{-- KPI GRID --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-6 mb-12">

        <div class="bg-surface-container-low rounded-2xl p-6">
            <p class="text-xs uppercase tracking-widest text-on-surface-variant">Total Users</p>
            <h2 class="text-4xl font-black mt-2 text-primary">{{ number_format($totalUsers) }}</h2>
            <div class="mt-3 text-xs text-secondary">Daily: {{ number_format($dailyUsers) }}</div>
        </div>

        <div class="bg-surface-container-low rounded-2xl p-6">
            <p class="text-xs uppercase tracking-widest text-on-surface-variant">Weekly Users</p>
            <h2 class="text-4xl font-black mt-2 text-primary">{{ number_format($weeklyUsers) }}</h2>
            <div class="mt-3 text-xs text-secondary">Monthly: {{ number_format($monthlyUsers) }}</div>
        </div>

        <div class="bg-surface-container-low rounded-2xl p-6">
            <p class="text-xs uppercase tracking-widest text-on-surface-variant">Games Started</p>
            <h2 class="text-4xl font-black mt-2 text-primary">{{ number_format($gamesStarted) }}</h2>
        </div>

        <div class="bg-surface-container-low rounded-2xl p-6">
            <p class="text-xs uppercase tracking-widest text-on-surface-variant">Games Completed</p>
            <h2 class="text-4xl font-black mt-2 text-primary">{{ number_format($gamesCompleted) }}</h2>
        </div>

        <div class="bg-surface-container-low rounded-2xl p-6">
            <p class="text-xs uppercase tracking-widest text-on-surface-variant">Completion Rate</p>
            <h2 class="text-4xl font-black mt-2 text-secondary">{{ $completionRate }}%</h2>
        </div>

    </div>

    {{-- MAIN GRID --}}
    <div class="grid grid-cols-12 gap-8">

        {{-- LEFT SECTION --}}
        <div class="col-span-12 xl:col-span-8 space-y-8">

            {{-- GAME FUNNEL --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Game Funnel</h3>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

                    @foreach($gameFunnel as $key => $value)

                    <div class="bg-surface-container rounded-xl p-4">
                        <p class="text-[10px] uppercase tracking-widest text-on-surface-variant">
                            {{ str_replace('_', ' ', $key) }}
                        </p>
                        <h4 class="text-2xl font-black mt-2 text-primary">
                            {{ number_format($value) }}
                        </h4>
                    </div>

                    @endforeach

                </div>

            </div>

            {{-- AGE DISTRIBUTION --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Age Distribution</h3>

                <div class="space-y-4">

                    @php $totalAge = array_sum($ageDistribution); @endphp

                    @foreach($ageDistribution as $range => $count)

                    @php
                    $percent = $totalAge > 0 ? round(($count / $totalAge) * 100) : 0;
                    @endphp

                    <div>
                        <div class="flex justify-between text-xs mb-1">
                            <span>{{ $range }}</span>
                            <span>{{ $count }} ({{ $percent }}%)</span>
                        </div>

                        <div class="h-2 bg-surface-container-highest rounded-full overflow-hidden">
                            <div class="h-full bg-primary-container" style="width: {{ $percent }}%"></div>
                        </div>
                    </div>

                    @endforeach

                </div>

            </div>

            {{-- PERSONA CARDS --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Persona Overview</h3>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

                    @foreach($primaryPersonaCards as $persona)

                    <div class="bg-surface-container rounded-xl p-4">
                        <p class="text-xs uppercase text-on-surface-variant">
                            {{ $persona['label'] }}
                        </p>
                        <h4 class="text-2xl font-black text-primary mt-2">
                            {{ $persona['count'] }}
                        </h4>
                    </div>

                    @endforeach

                </div>

            </div>

            {{-- UNIVERSITY TABLE --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">University Interest Reports</h3>

                <div class="overflow-x-auto">

                    <table class="w-full">

                        <thead>
                            <tr class="border-b border-outline-variant/20">
                                <th class="text-left py-3 text-xs uppercase">University</th>
                                <th class="text-right py-3 text-xs uppercase">Interest</th>
                            </tr>
                        </thead>

                        <tbody>

                            @foreach($universityReports as $item)

                            <tr class="border-b border-outline-variant/10">
                                <td class="py-4">{{ $item->university }}</td>
                                <td class="py-4 text-right font-bold">{{ $item->total }}</td>
                            </tr>

                            @endforeach

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

        {{-- RIGHT SECTION --}}
        <div class="col-span-12 xl:col-span-4 space-y-8">

            {{-- GUEST VS REGISTERED --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Guest vs Registered</h3>

                <div class="space-y-6">

                    <div>
                        <div class="flex justify-between text-xs mb-2">
                            <span>Registered</span>
                            <span>{{ $registeredPercent }}%</span>
                        </div>
                        <div class="h-2 bg-surface-container-highest rounded-full overflow-hidden">
                            <div class="h-full bg-primary-container" style="width: {{ $registeredPercent }}%"></div>
                        </div>
                    </div>

                    <div>
                        <div class="flex justify-between text-xs mb-2">
                            <span>Guest</span>
                            <span>{{ $guestPercent }}%</span>
                        </div>
                        <div class="h-2 bg-surface-container-highest rounded-full overflow-hidden">
                            <div class="h-full bg-secondary-container" style="width: {{ $guestPercent }}%"></div>
                        </div>
                    </div>

                </div>

            </div>

            {{-- INDIA VS GLOBAL --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">India vs Global</h3>

                <div class="flex gap-4 h-40 items-end">

                    <div class="flex-1 bg-secondary-container/20 rounded-t-xl relative">
                        <div class="absolute bottom-0 w-full bg-secondary-container rounded-t-xl"
                            style="height: {{ $indiaPercent }}%"></div>
                    </div>

                    <div class="flex-1 bg-primary-container/20 rounded-t-xl relative">
                        <div class="absolute bottom-0 w-full bg-primary-container rounded-t-xl"
                            style="height: {{ $globalPercent }}%"></div>
                    </div>

                </div>

            </div>

            {{-- DEVICE --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Device Usage</h3>

                <div class="grid grid-cols-2 gap-4">

                    <div class="bg-surface-container rounded-xl p-4 text-center">
                        <div class="text-3xl font-black text-primary">{{ $mobilePercent }}%</div>
                        <p class="text-xs mt-2 uppercase">Mobile</p>
                    </div>

                    <div class="bg-surface-container rounded-xl p-4 text-center">
                        <div class="text-3xl font-black text-secondary">{{ $desktopPercent }}%</div>
                        <p class="text-xs mt-2 uppercase">Desktop</p>
                    </div>

                </div>

            </div>

            {{-- TOP INDUSTRIES --}}
            <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Top Industries</h3>

                <div class="space-y-3">

                    @foreach($topIndustries as $item)
                    <div class="flex justify-between text-sm">
                        <span>{{ $item['industry'] }}</span>
                        <span class="font-bold text-primary">{{ $item['count'] }}</span>
                    </div>
                    @endforeach

                </div>

            </div>

            {{-- TOP COURSES --}}
            <!-- <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Top Courses</h3>

                <div class="space-y-3">

                    @foreach($topCourses as $item)
                    <div class="flex justify-between text-sm">
                        <span>{{ $item['course'] }}</span>
                        <span class="font-bold text-secondary">{{ $item['count'] }}</span>
                    </div>
                    @endforeach

                </div>

            </div> -->

            {{-- WISHLISTED UNIVERSITIES --}}
            <!-- <div class="bg-surface-container-low rounded-2xl p-6">

                <h3 class="text-lg font-bold mb-6">Wishlisted Universities</h3>

                <div class="space-y-3">

                    @foreach($topWishlistedUniversities as $uni)
                    <div class="flex justify-between text-sm">
                        <span>{{ $uni['university'] }}</span>
                        <span class="font-bold text-primary">{{ $uni['count'] }}</span>
                    </div>
                    @endforeach

                </div>

            </div> -->

        </div>

    </div>

</main>

@endsection