@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $client->name }} Dashboard</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Client-specific metrics and management</p>
        </div>
        <div>
            <a href="{{ route('admin.clients.edit', $client->id) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded mr-2 dark:bg-indigo-700 dark:hover:bg-indigo-800">
                Edit Client
            </a>
            <a href="{{ route('admin.client_statistics') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white">
                Back to Statistics
            </a>
        </div>
    </div>

    <!-- Client Info Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Client Information</h2>
                <div class="space-y-3">
                    <div class="flex">
                        <span class="text-gray-500 dark:text-gray-400 w-32">Name:</span>
                        <span class="text-gray-900 dark:text-white font-medium">{{ $client->name }}</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 dark:text-gray-400 w-32">Contact:</span>
                        <span class="text-gray-900 dark:text-white font-medium">{{ $client->contact_name ?? 'N/A' }}</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 dark:text-gray-400 w-32">Email:</span>
                        <span class="text-gray-900 dark:text-white font-medium">{{ $client->contact_email ?? 'N/A' }}</span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 dark:text-gray-400 w-32">Status:</span>
                        <span class="font-medium">
                            @if($client->is_active)
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
                            @else
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Inactive</span>
                            @endif
                        </span>
                    </div>
                    <div class="flex">
                        <span class="text-gray-500 dark:text-gray-400 w-32">Created:</span>
                        <span class="text-gray-900 dark:text-white font-medium">{{ $client->created_at->format('M d, Y') }}</span>
                    </div>
                </div>
            </div>
            <div>
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Branding Details</h2>
                <div class="prose dark:prose-invert">
                    {!! $client->branding_details ?? '<p class="text-gray-500 dark:text-gray-400">No branding details available.</p>' !!}
                </div>
            </div>
        </div>
    </div>

    <!-- Key Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 mr-4">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase">Users</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $userMetrics['total'] }}</p>
                    <p class="text-green-600 dark:text-green-400 text-sm">
                        <span class="font-bold">+{{ $userMetrics['new_30_days'] }}</span> in last 30 days
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 mr-4">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase">Events</p>
                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $eventMetrics['total'] }}</p>
                    <p class="text-green-600 dark:text-green-400 text-sm">
                        <span class="font-bold">{{ $eventMetrics['upcoming'] }}</span> upcoming
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 mr-4">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm font-medium uppercase">Tier Completion</p>
                    <div class="flex items-center mt-1">
                        <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
                        <span class="text-sm text-gray-900 dark:text-white mr-2">T1: {{ number_format($tierMetrics['tier1_completion'], 1) }}%</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-yellow-500 mr-1"></div>
                        <span class="text-sm text-gray-900 dark:text-white mr-2">T2: {{ number_format($tierMetrics['tier2_completion'], 1) }}%</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-red-500 mr-1"></div>
                        <span class="text-sm text-gray-900 dark:text-white">T3: {{ number_format($tierMetrics['tier3_completion'], 1) }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- User Registration Chart -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">User Registrations ({{ date('Y') }})</h2>
            <div class="h-80">
                <canvas id="userRegistrationsChart"></canvas>
            </div>
        </div>

        <!-- Tier Completion Chart -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tier Completion Rates</h2>
            <div class="h-80">
                <canvas id="tierCompletionChart"></canvas>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Users -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Users</h2>
                <a href="{{ route('admin.clients.users', $client->id) }}" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Email</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Joined</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse ($client->users()->latest('client_user.created_at')->take(5)->get() as $user)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $user->name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $user->email }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $user->pivot->created_at->format('M d, Y') }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">No users found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Events -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Events</h2>
                <a href="{{ route('admin.clients.events', $client->id) }}" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @forelse ($client->events()->latest()->take(5)->get() as $event)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $event->name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $event->start_date ? $event->start_date->format('M d, Y') : 'N/A' }}
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($event->is_active)
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Active</span>
                                @else
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Inactive</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">No events found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-8 flex flex-wrap gap-4">
        <a href="{{ route('admin.clients.users', $client->id) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded dark:bg-indigo-700 dark:hover:bg-indigo-800">
            Manage Users
        </a>
        <a href="{{ route('admin.clients.events', $client->id) }}" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded dark:bg-purple-700 dark:hover:bg-purple-800">
            Manage Events
        </a>
        <a href="{{ route('admin.client_statistics.export', ['client_id' => $client->id, 'format' => 'pdf']) }}" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white">
            Export Report
        </a>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // User Registrations Chart
        const registrationsCtx = document.getElementById('userRegistrationsChart').getContext('2d');
        const monthlyData = @json(array_values($monthlyUserRegistrations));
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        
        new Chart(registrationsCtx, {
            type: 'bar',
            data: {
                labels: months,
                datasets: [{
                    label: 'New Users',
                    data: monthlyData,
                    backgroundColor: 'rgba(59, 130, 246, 0.5)',
                    borderColor: 'rgb(59, 130, 246)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });

        // Tier Completion Chart
        const tierCtx = document.getElementById('tierCompletionChart').getContext('2d');
        
        new Chart(tierCtx, {
            type: 'doughnut',
            data: {
                labels: ['Tier 1', 'Tier 2', 'Tier 3'],
                datasets: [{
                    data: [
                        {{ $tierMetrics['tier1_completion'] }},
                        {{ $tierMetrics['tier2_completion'] }},
                        {{ $tierMetrics['tier3_completion'] }}
                    ],
                    backgroundColor: [
                        'rgba(16, 185, 129, 0.7)',
                        'rgba(245, 158, 11, 0.7)',
                        'rgba(239, 68, 68, 0.7)'
                    ],
                    borderColor: [
                        'rgb(16, 185, 129)',
                        'rgb(245, 158, 11)',
                        'rgb(239, 68, 68)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw.toFixed(1) + '%';
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection