{{-- Enhanced Admin Dashboard with New UI System --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center fade-in-up">
            <div>
                <h2 class="font-bold text-2xl text-gray-900 leading-tight">
                    {{ __('Admin Dashboard') }}
                </h2>
                <p class="text-sm text-gray-600 mt-1">System overview and management center</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('admin.schools.create') }}"
                class="btn-enhanced bg-green-600 text-white border-green-600 hover:bg-green-700 hover:border-green-700 focus:ring-green-200 active:bg-green-800 active:scale-95">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                    Add School
                </a>

                <a href="{{ route('admin.users.create') }}"
                class="btn-enhanced bg-primary-600 text-white border-primary-600 hover:bg-primary-700 hover:border-primary-700 focus:ring-primary-200 active:bg-primary-800 active:scale-95">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                    Add User
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">

            <!-- Enhanced Welcome Message -->
            <div class="card-welcome fade-in-up">
                <div class="p-8">
                    <div class="flex items-center justify-between text-white">
                        <div>
                            <h3 class="text-2xl font-bold mb-2">Welcome back, {{ Auth::user()->name }}!</h3>
                            <p class="text-blue-100 text-lg">Here's what's happening in your system today.</p>
                        </div>
                        <div class="text-right">
                            <div class="text-4xl font-bold">{{ now()->format('d M') }}</div>
                            <div class="text-blue-100 text-lg">{{ now()->format('l') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="card-stats fade-in-up" style="animation-delay: 0.1s;">
                    <div class="flex items-center">
                        <div class="p-4 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                        </div>
                        <div class="ml-5 flex-1">
                            <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Total Schools</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['total_schools'] }}</p>
                            <div class="flex items-center mt-2">
                                <svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-sm text-green-600 font-medium">+12% this month</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('admin.schools.index') }}" class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                            View all schools →
                        </a>
                    </div>
                </div>

                <div class="card-stats fade-in-up" style="animation-delay: 0.2s;">
                    <div class="flex items-center">
                        <div class="p-4 rounded-xl bg-gradient-to-br from-green-500 to-green-600 text-white">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        </div>
                        <div class="ml-5 flex-1">
                            <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Total Users</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-1">{{ number_format($stats['total_users']) }}</p>
                            <div class="flex items-center mt-2">
                                <svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-sm text-green-600 font-medium">+8% this week</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('admin.users.index') }}" class="text-sm text-green-600 hover:text-green-800 font-medium">
                            Manage users →
                        </a>
                    </div>
                </div>

                <div class="card-stats fade-in-up" style="animation-delay: 0.3s;">
                    <div class="flex items-center">
                        <div class="p-4 rounded-xl bg-gradient-to-br from-yellow-500 to-yellow-600 text-white">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9 12h6m-6 4h6m2 5H7a2 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"/>
                            </svg>
                        </div>
                        <div class="ml-5 flex-1">
                            <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Total Assessments</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-1">{{ number_format($stats['total_assessments']) }}</p>
                            <div class="flex items-center mt-2">
                                <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
                                <span class="text-sm text-yellow-600 font-medium">{{ $stats['total_assessments'] - $stats['completed_assessments'] }} in progress</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <a href="{{ route('admin.questions.index') }}" class="text-sm text-yellow-600 hover:text-yellow-800 font-medium">
                            Manage questions →
                        </a>
                    </div>
                </div>

                <div class="card-stats fade-in-up" style="animation-delay: 0.4s;">
                    <div class="flex items-center">
                        <div class="p-4 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white">
                            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                                <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 class="ml-5 flex-1">
                            <h3 class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Completion Rate</h3>
                            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $stats['total_assessments'] > 0 ? number_format(($stats['completed_assessments'] / $stats['total_assessments']) * 100, 1) : 0 }}%</p>
                            <div class="mt-2">
                                <div class="progress-enhanced">
                                    <div class="progress-fill progress-fill-admin" style="width: {{ $stats['total_assessments'] > 0 ? ($stats['completed_assessments'] / $stats['total_assessments']) * 100 : 0 }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <span class="text-sm text-purple-600 font-medium">
                            {{ $stats['completed_assessments'] }} of {{ $stats['total_assessments'] }} completed
                        </span>
                    </div>
                </div>
            </div>

            <!-- Enhanced Charts Section -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="card-enhanced fade-in-up">
                    <div class="p-6 border-b border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Users by Role</h3>
                                <p class="text-sm text-gray-500 mt-1">Distribution across system</p>
                            </div>
                            <a href="{{ route('admin.users.index') }}" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                                View all →
                            </a>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="relative h-80">
                            <canvas id="usersByRoleChart"></canvas>
                        </div>
                        <div class="mt-6 grid grid-cols-2 gap-4 text-sm">
                            @foreach($usersByRole as $role => $count)
                                <div class="flex items-center">
                                    <div class="w-4 h-4 rounded-full mr-3
                                        @if($role == 'admin') bg-blue-500
                                        @elseif($role == 'kepsek') bg-green-500
                                        @elseif($role == 'guru') bg-yellow-500
                                        @else bg-purple-500 @endif"></div>
                                    <span class="text-gray-700 font-medium">{{ ucfirst($role) }}</span>
                                    <span class="ml-auto text-gray-900 font-bold">{{ number_format($count) }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="card-enhanced fade-in-up">
                    <div class="p-6 border-b border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-bold text-gray-900">Assessment Progress</h3>
                                <p class="text-sm text-gray-500 mt-1">Monthly completion trends</p>
                            </div>
                            <div class="badge-success">
                                {{ number_format(($stats['completed_assessments'] / max($stats['total_assessments'], 1)) * 100, 1) }}% completed
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="relative h-80">
                            <canvas id="assessmentProgressChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Enhanced Quick Actions -->
            <div class="card-enhanced fade-in-up">
                <div class="p-6 border-b border-gray-100">
                    <h3 class="text-lg font-bold text-gray-900">Quick Actions</h3>
                    <p class="text-sm text-gray-500 mt-1">Frequently used administrative functions</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        <a href="{{ route('admin.schools.create') }}" class="quick-action-card group">
                            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white mb-4">
                                <svg class="icon w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                </svg>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-2">Add School</h4>
                            <p class="text-sm text-gray-600">Register new educational institutions</p>
                        </a>

                        <a href="{{ route('admin.users.create') }}" class="quick-action-card group">
                            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 text-white mb-4">
                                <svg class="icon w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                </svg>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-2">Add User</h4>
                            <p class="text-sm text-gray-600">Create new user accounts</p>
                        </a>

                        <a href="{{ route('admin.questions.create') }}" class="quick-action-card group">
                            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-500 to-yellow-600 text-white mb-4">
                                <svg class="icon w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-2">Add Question</h4>
                            <p class="text-sm text-gray-600">Create assessment questions</p>
                        </a>

                        <a href="{{ route('admin.users.index') }}" class="quick-action-card group">
                            <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 text-white mb-4">
                                <svg class="icon w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4a1 1 0 01-.8 1.6H6a3 3 0 00-3-3V6z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                            <h4 class="font-bold text-gray-900 mb-2">System Analytics</h4>
                            <p class="text-sm text-gray-600">Monitor system performance</p>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Enhanced Recent Activity -->
            <div class="card-enhanced fade-in-up">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900">Recent Activity</h3>
                            <p class="text-sm text-gray-500 mt-1">Last 24 hours</p>
                        </div>
                        <div class="badge-info">Live</div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        @for($i = 0; $i < 5; $i++)
                            <div class="flex items-start space-x-4 p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                                <div class="flex-shrink-0">
                                    <div class="w-10 h-10 bg-gradient-to-br
                                        @if($i % 4 == 0) from-green-500 to-green-600
                                        @elseif($i % 4 == 1) from-blue-500 to-blue-600
                                        @elseif($i % 4 == 2) from-yellow-500 to-yellow-600
                                        @else from-purple-500 to-purple-600 @endif
                                        rounded-full flex items-center justify-center text-white">
                                        @if($i % 4 == 0)
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <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>
                                        @elseif($i % 4 == 1)
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                            </svg>
                                        @elseif($i % 4 == 2)
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                        @else
                                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M9 12h6m-6 4h6m2 5H7a2 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"/>
                                            </svg>
                                        @endif
                                    </div>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900">
                                        @if($i % 4 == 0)
                                            Assessment completed: Digital Teaching Skills - Score: 88%
                                        @elseif($i % 4 == 1)
                                            New user registered: Mathematics Teacher at SMA Negeri 1
                                        @elseif($i % 4 == 2)
                                            School profile updated: SMK Negeri 2 Bandung
                                        @else
                                            New assessment started: Student Digital Literacy - Grade 10A
                                        @endif
                                    </p>
                                    <p class="text-xs text-gray-500 mt-1">{{ rand(1, 60) }} minutes ago</p>
                                </div>
                                <div class="flex-shrink-0">
                                    <button class="p-1 text-gray-400 hover:text-gray-600 transition-colors">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Enhanced Charts with Custom Styling
        const chartColors = {
            admin: '#3b82f6',
            kepsek: '#10b981',
            guru: '#f59e0b',
            siswa: '#8b5cf6'
        };

        // Users by Role Chart
        const usersByRoleCtx = document.getElementById('usersByRoleChart');
        if (usersByRoleCtx) {
            const usersByRoleData = @json($usersByRole ?? []);

            new Chart(usersByRoleCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(usersByRoleData).map(role =>
                        role.charAt(0).toUpperCase() + role.slice(1)
                    ),
                    datasets: [{
                        data: Object.values(usersByRoleData),
                        backgroundColor: Object.keys(usersByRoleData).map(role => chartColors[role]),
                        borderWidth: 0,
                        cutout: '60%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            cornerRadius: 8,
                            displayColors: true,
                            callbacks: {
                                label: function(context) {
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = ((context.raw / total) * 100).toFixed(1);
                                    return `${context.label}: ${context.raw.toLocaleString()} (${percentage}%)`;
                                }
                            }
                        }
                    },
                    interaction: {
                        intersect: false
                    }
                }
            });
        }

        // Assessment Progress Chart
        const assessmentProgressCtx = document.getElementById('assessmentProgressChart');
        if (assessmentProgressCtx) {
            new Chart(assessmentProgressCtx, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                    datasets: [{
                        label: 'Completed Assessments',
                        data: [120, 190, 300, 500, 200, 300, {{ $stats['completed_assessments'] ?? 0 }}],
                        borderColor: chartColors.admin,
                        backgroundColor: chartColors.admin + '20',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: chartColors.admin,
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 3,
                        pointRadius: 6,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                color: '#6b7280'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#6b7280'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    }
                }
            });
        }
    });
    </script>
</x-app-layout>