@extends('client-system::layouts.client')

@section('title', 'User Statistics')

@section('content')
<div class="bg-white shadow-md rounded-lg p-6">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <a href="{{ route('client.dashboard', $client) }}" class="text-blue-600 hover:text-blue-800 mr-2">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
            </a>
            <h1 class="text-2xl font-bold">User Statistics</h1>
        </div>
        
        <div class="flex space-x-2">
            <a href="{{ route('client.reports.export', ['client' => $client, 'type' => 'user_statistics']) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg flex items-center">
                <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Export Data
            </a>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- User Registration Trends -->
        <div class="bg-white rounded-lg p-4 shadow border">
            <h2 class="text-lg font-semibold mb-4 border-b pb-2">User Registration Trends</h2>
            
            @if(count($userRegistrationTrends) > 0)
                <div class="h-64">
                    <canvas id="userRegistrationChart"></canvas>
                </div>
            @else
                <div class="flex items-center justify-center h-64 bg-gray-50 rounded-lg">
                    <p class="text-gray-500">No registration data available</p>
                </div>
            @endif
        </div>
        
        <!-- Tier Completion Trends -->
        <div class="bg-white rounded-lg p-4 shadow border">
            <h2 class="text-lg font-semibold mb-4 border-b pb-2">Tier Completion Trends</h2>
            
            @if(count($tierCompletionTrends) > 0)
                <div class="h-64">
                    <canvas id="tierCompletionChart"></canvas>
                </div>
            @else
                <div class="flex items-center justify-center h-64 bg-gray-50 rounded-lg">
                    <p class="text-gray-500">No tier completion data available</p>
                </div>
            @endif
        </div>
    </div>
    
    <!-- User Progress Distribution -->
    <div class="bg-white rounded-lg p-4 shadow border mb-8">
        <h2 class="text-lg font-semibold mb-4 border-b pb-2">User Progress Distribution</h2>
        
        @if(count($userProgressDistribution) > 0)
            <div class="h-64">
                <canvas id="progressDistributionChart"></canvas>
            </div>
        @else
            <div class="flex items-center justify-center h-64 bg-gray-50 rounded-lg">
                <p class="text-gray-500">No progress distribution data available</p>
            </div>
        @endif
    </div>
    
    <div class="flex justify-end">
        <a href="{{ route('client.reports.index', $client) }}" class="text-blue-600 hover:text-blue-800 font-medium">
            View all reports →
        </a>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // User Registration Chart
        @if(count($userRegistrationTrends) > 0)
            const registrationCtx = document.getElementById('userRegistrationChart').getContext('2d');
            new Chart(registrationCtx, {
                type: 'line',
                data: {
                    labels: [
                        @foreach($userRegistrationTrends as $trend)
                            '{{ \Carbon\Carbon::parse($trend->date)->format("M d") }}',
                        @endforeach
                    ],
                    datasets: [{
                        label: 'New Users',
                        data: [
                            @foreach($userRegistrationTrends as $trend)
                                {{ $trend->count }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(59, 130, 246, 0.2)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        @endif
        
        // Tier Completion Chart
        @if(count($tierCompletionTrends) > 0)
            const completionCtx = document.getElementById('tierCompletionChart').getContext('2d');
            new Chart(completionCtx, {
                type: 'line',
                data: {
                    labels: [
                        @foreach($tierCompletionTrends as $trend)
                            '{{ \Carbon\Carbon::parse($trend->date)->format("M d") }}',
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Tier Completions',
                        data: [
                            @foreach($tierCompletionTrends as $trend)
                                {{ $trend->count }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(16, 185, 129, 0.2)',
                        borderColor: 'rgba(16, 185, 129, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        @endif
        
        // Progress Distribution Chart
        @if(count($userProgressDistribution) > 0)
            const progressCtx = document.getElementById('progressDistributionChart').getContext('2d');
            new Chart(progressCtx, {
                type: 'bar',
                data: {
                    labels: [
                        @foreach($userProgressDistribution as $dist)
                            '{{ $dist->progress_percentage }}%',
                        @endforeach
                    ],
                    datasets: [{
                        label: 'Number of Users',
                        data: [
                            @foreach($userProgressDistribution as $dist)
                                {{ $dist->count }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(124, 58, 237, 0.2)',
                        borderColor: 'rgba(124, 58, 237, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        @endif
    });
</script>
@endpush
@endsection