@extends('layouts.admin')
@section('header', 'Analytics - ' . $client->name)

@section('content')
<div class="overflow-x-auto">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $client->name }}</h1>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Client Analytics Dashboard</p>
        </div>
        <div class="flex gap-3">
            <input type="date" placeholder="Start Date" class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <span class="flex items-center text-gray-500 dark:text-gray-400">to</span>
            <input type="date" placeholder="End Date" class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <x-ui.button variant="view" size="sm">Apply</x-ui.button>
            <x-ui.button variant="back" size="sm">Export</x-ui.button>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <x-ui.layout.card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Users</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $analytics['total_users'] }}</p>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Completion Rate</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($analytics['overall_completion'], 1) }}%</p>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Events</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $analytics['total_events'] }}</p>
                </div>
            </div>
        </x-ui.layout.card>

        <x-ui.layout.card class="p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Active Events</p>
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $analytics['active_events'] }}</p>
                </div>
            </div>
        </x-ui.layout.card>
    </div>

    <!-- User Progress Section -->
    <x-ui.layout.card class="mb-8">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">User Progress</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Individual user progress and completion status</p>
        </div>
        <div class="overflow-x-auto">
            <x-ui.data.table :headers="['User', 'Completed', 'Total', 'Progress']">
                @foreach($userProgress as $progress)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ $progress['user_name'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        {{ $progress['completed_events'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        {{ $progress['total_events'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-3">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: {{ $progress['completion_percentage'] }}%"></div>
                            </div>
                            <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ number_format($progress['completion_percentage'], 0) }}%</span>
                        </div>
                    </td>
                </tr>
                @endforeach
            </x-ui.data.table>
        </div>
    </x-ui.layout.card>

    <!-- Module Completion Section -->
    <x-ui.layout.card >
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Module Completion</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Module-level completion statistics and user details</p>
        </div>
        <div class="overflow-x-auto">
            <x-ui.data.table :headers="['Module', 'Completed', 'In Progress', 'Total Users', 'Completion %']">
                @foreach($moduleCompletion as $module)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                        {{ $module['module_name'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        {{ $module['completed_count'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        <div>
                            {{ count($module['in_progress_users']) }}
                            @if(!empty($module['in_progress_users']))
                                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    {{ implode(', ', $module['in_progress_users']) }}
                                </div>
                            @endif
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        {{ $module['total_users'] }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        <div class="flex items-center">
                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-3">
                                <div class="bg-green-600 h-2 rounded-full" style="width: {{ $module['completion_percentage'] }}%"></div>
                            </div>
                            <span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ number_format($module['completion_percentage'], 0) }}%</span>
                        </div>
                    </td>
                </tr>
                @endforeach
            </x-ui.data.table>
        </div>
    </x-ui.layout.card>

    @if(config('app.env') === 'local' || config('app.env') === 'development')
    <!-- Debug Information (Development Only) -->
    <x-ui.layout.card >
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Debug Information</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Development environment debug data</p>
        </div>
        <div class="overflow-x-auto">
            <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-auto text-gray-800 dark:text-gray-200">{{ json_encode($analytics, JSON_PRETTY_PRINT) }}</pre>
        </div>
    </x-ui.layout.card>
    @endif
</div>

    <!-- Event Performance Comparison -->
    @if(isset($eventPerformance) && count($eventPerformance) > 1)
    <x-ui.layout.card class="mt-8">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Event Performance Comparison</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Compare performance metrics across all events for this client</p>
        </div>
        <div class="overflow-x-auto">
            <x-ui.data.table :headers="['Event Name', 'Users', 'Completion Rate', 'Status']">
                @foreach($eventPerformance as $event)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $event["event_name"] }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">{{ $event["completed_modules"] }}/{{ $event["total_modules"] }} modules</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">{{ $event["user_count"] }}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        <div class="flex items-center justify-center">
                            <div class="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: {{ $event['completion_rate'] }}%"></div>
                            </div>
                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $event["completion_rate"] }}%</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                        @if($event["is_active"])
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">Inactive</span>
                        @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </x-ui.data.table>
        </div>
    </x-ui.layout.card>
    @endif
@endsection