@extends('layouts.admin')

@section('content')
{{-- Debug output to identify view rendering issues --}}
@php
    try {
        logger()->error('View debug: Starting dashboard view render', [
            'client_id' => $client->id ?? 'null',
            'user_metrics' => isset($userMetrics) ? 'set' : 'not set',
            'event_metrics' => isset($eventMetrics) ? 'set' : 'not set',
            'tier_completions' => isset($tierCompletions) ? 'set' : 'not set'
        ]);
    } catch (\Exception $e) {
        logger()->error('View debug: Error in dashboard view', [
            'exception' => get_class($e),
            'message' => $e->getMessage()
        ]);
    }
@endphp
<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 Admin Dashboard</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Manage your client's users and events</p>
        </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_users'] }}</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['active'] }}</span> active
                    </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 Completions</p>
                    <div class="mt-2">
                        @forelse($tierCompletions as $tier)
                            <div class="flex items-center mb-1">
                                <span class="text-sm text-gray-900 dark:text-white mr-2">{{ $tier->name }}:</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white">{{ $tier->count }}</span>
                            </div>
                        @empty
                            <span class="text-sm text-gray-500 dark:text-gray-400">No completions yet</span>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- User Management -->
        <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">User Management</h2>
                <a href="{{ route('client.admin.create-user', $client->id) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium py-2 px-4 rounded dark:bg-indigo-700 dark:hover:bg-indigo-800">
                    Add User
                </a>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label for="user-search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search Users</label>
                    <input type="text" id="user-search" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter name or email">
                </div>
                <div class="mt-4">
                    <a href="{{ route('client.admin.users', $client->id) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 text-sm font-medium">
                        View All Users →
                    </a>
                </div>
            </div>
        </div>

        <!-- Event Management -->
        <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">Event Management</h2>
                <a href="{{ route('admin.events.create') }}" class="bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium py-2 px-4 rounded dark:bg-purple-700 dark:hover:bg-purple-800">
                    Create Event
                </a>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <label for="event-filter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Filter Events</label>
                    <select id="event-filter" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="all">All Events</option>
                        <option value="active">Active Only</option>
                        <option value="upcoming">Upcoming</option>
                        <option value="past">Past</option>
                    </select>
                </div>
                <div class="mt-4">
                    <a href="{{ route('client.admin.events', $client->id) }}" class="text-purple-600 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-300 text-sm font-medium">
                        View All Events →
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-8">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activity</h2>
        </div>
        <div class="p-6">
            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                <li class="py-3 flex">
                    <div class="flex-shrink-0 mr-4">
                        <span class="h-8 w-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                            <svg class="h-5 w-5 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                            </svg>
                        </span>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">New user John Doe joined</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
                    </div>
                </li>
                <li class="py-3 flex">
                    <div class="flex-shrink-0 mr-4">
                        <span class="h-8 w-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
                            <svg class="h-5 w-5 text-purple-600 dark:text-purple-300" 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>
                        </span>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Event "Annual Training" created</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
                    </div>
                </li>
                <li class="py-3 flex">
                    <div class="flex-shrink-0 mr-4">
                        <span class="h-8 w-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                            <svg class="h-5 w-5 text-green-600 dark:text-green-300" 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>
                        </span>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">5 users completed Tier 1 training</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- Quick Actions -->
    <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">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Quick Actions</h2>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <a href="{{ route('client.admin.users', $client->id) }}" class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                <svg class="h-8 w-8 text-blue-600 dark:text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
                <span class="text-sm font-medium text-gray-900 dark:text-white">Manage Users</span>
            </a>
            <a href="{{ route('client.admin.events', $client->id) }}" class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                <svg class="h-8 w-8 text-purple-600 dark:text-purple-400 mb-2" 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>
                <span class="text-sm font-medium text-gray-900 dark:text-white">Manage Events</span>
            </a>
            <a href="#" class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
                <svg class="h-8 w-8 text-green-600 dark:text-green-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <span class="text-sm font-medium text-gray-900 dark:text-white">Generate Reports</span>
            </a>
        </div>
    </div>
</div>
@endsection