<?php
require_once 'auth.php';
require_once __DIR__ . '/../includes/pdo.php';

// Get statistics
$totalCities = $pdo->query("SELECT COUNT(*) as count FROM cities")->fetch()['count'];
$totalServices = $pdo->query("SELECT COUNT(*) as count FROM services")->fetch()['count'];
$totalCombinations = $pdo->query("SELECT COUNT(*) as count FROM city_service")->fetch()['count'];
$expectedCombinations = $totalCities * $totalServices;

// Get recent activity (last 10 updated combinations)
$recentActivity = $pdo->query("
    SELECT cs.updated_at, c.name as city_name, s.name as service_name, c.slug as city_slug, s.slug as service_slug
    FROM city_service cs
    JOIN cities c ON cs.city_id = c.id
    JOIN services s ON cs.service_id = s.id
    ORDER BY cs.updated_at DESC
    LIMIT 10
")->fetchAll();

// Get top cities by combination count
$topCities = $pdo->query("
    SELECT c.name, c.slug, COUNT(cs.id) as combination_count
    FROM cities c
    LEFT JOIN city_service cs ON c.id = cs.city_id
    GROUP BY c.id, c.name, c.slug
    ORDER BY combination_count DESC
    LIMIT 5
")->fetchAll();

// Calculate completion percentage
$completionPercentage = $expectedCombinations > 0 ? round(($totalCombinations / $expectedCombinations) * 100) : 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Finggu Infotech Admin</title>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        body { font-family: 'Inter', sans-serif; }
        .sidebar-gradient { background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%); }
        .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .metric-card { transition: all 0.3s ease; }
        .metric-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.2); }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen">
        <!-- Sidebar -->
        <div class="w-64 sidebar-gradient text-white flex-shrink-0">
            <div class="p-6">
                <div class="flex items-center mb-8">
                    <div class="w-10 h-10 bg-teal-500 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-chart-bar text-white"></i>
                    </div>
                    <h1 class="text-xl font-bold">Finggu Admin</h1>
                </div>
                
                <nav class="space-y-2">
                    <a href="#" class="flex items-center px-4 py-3 bg-teal-500 rounded-lg text-white">
                        <i class="fas fa-tachometer-alt mr-3"></i>
                        <span>Dashboard</span>
                    </a>
                    <a href="city-service-admin.php" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-edit mr-3"></i>
                        <span>Content Management</span>
                    </a>
                    <a href="manage-cities-services.php" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-cogs mr-3"></i>
                        <span>Cities & Services</span>
                    </a>
                    <a href="seo-optimizer.php" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-search mr-3"></i>
                        <span>SEO Optimizer</span>
                    </a>
                    <a href="sync-city-services.php" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-sync mr-3"></i>
                        <span>Sync Data</span>
                    </a>
                    <a href="../" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-globe mr-3"></i>
                                                <span>View Website</span>
                    </a>
                    <a href="logout.php" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg transition-colors">
                        <i class="fas fa-sign-out-alt mr-3"></i>
                        <span>Logout</span>
                    </a>
                </nav>
            </div>
            
            <div class="absolute bottom-0 left-0 right-0 p-6">
                <div class="bg-gray-700 rounded-lg p-4">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-user text-gray-300"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">Admin User</p>
                            <p class="text-xs text-gray-400">Administrator</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 overflow-auto">
            <!-- Header -->
            <div class="bg-white border-b border-gray-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
                        <p class="text-gray-600">Welcome back! Here's what's happening with your website.</p>
                    </div>
                    <div class="flex items-center space-x-6">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
                            <span class="text-sm text-gray-600 font-medium">System Online</span>
                        </div>
                        <div class="text-sm text-gray-500">
                            <i class="fas fa-calendar-alt mr-2"></i>
                            <?= date('M j, Y') ?>
                        </div>
                        <div class="text-sm text-gray-500">
                            <i class="fas fa-clock mr-2"></i>
                            <?= date('g:i A') ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="p-6">
                <!-- Metric Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <!-- Cities Card -->
                    <div class="bg-teal-500 rounded-lg p-6 text-white metric-card card-shadow">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-users text-3xl mr-4"></i>
                                    <span class="text-sm font-semibold opacity-90 tracking-wider">CITIES</span>
                                </div>
                                <div class="text-4xl font-bold mb-1"><?= $totalCities ?></div>
                                <div class="text-sm opacity-80">Total cities</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs opacity-75">+12%</div>
                                <div class="text-xs opacity-60">vs last month</div>
                            </div>
                        </div>
                    </div>

                    <!-- Services Card -->
                    <div class="bg-red-500 rounded-lg p-6 text-white metric-card card-shadow">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-exclamation-triangle text-3xl mr-4"></i>
                                    <span class="text-sm font-semibold opacity-90 tracking-wider">SERVICES</span>
                                </div>
                                <div class="text-4xl font-bold mb-1"><?= $totalServices ?></div>
                                <div class="text-sm opacity-80">Available services</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs opacity-75">54.40%</div>
                                <div class="text-xs opacity-60">completion</div>
                            </div>
                        </div>
                    </div>

                    <!-- Pages Card -->
                    <div class="bg-blue-500 rounded-lg p-6 text-white metric-card card-shadow">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-file-alt text-3xl mr-4"></i>
                                    <span class="text-sm font-semibold opacity-90 tracking-wider">PAGES</span>
                                </div>
                                <div class="text-4xl font-bold mb-1"><?= $totalCombinations ?></div>
                                <div class="text-sm opacity-80">Generated pages</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs opacity-75">100%</div>
                                <div class="text-xs opacity-60">active</div>
                            </div>
                        </div>
                    </div>

                    <!-- Completion Card -->
                    <div class="bg-gray-800 rounded-lg p-6 text-white metric-card card-shadow">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <i class="fas fa-chart-line text-3xl mr-4"></i>
                                    <span class="text-sm font-semibold opacity-90 tracking-wider">SYNC</span>
                                </div>
                                <div class="text-4xl font-bold mb-1"><?= $completionPercentage ?>%</div>
                                <div class="text-sm opacity-80">Completion rate</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xs opacity-75">$659</div>
                                <div class="text-xs opacity-60">revenue</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts and Tables Row -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- Activity Chart -->
                    <div class="lg:col-span-2 bg-white rounded-lg card-shadow">
                        <div class="p-6 border-b border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900">ACTIVITY REPORT</h3>
                            <p class="text-sm text-gray-600">Monthly website activity and growth</p>
                        </div>
                        <div class="p-6">
                            <canvas id="activityChart" height="300"></canvas>
                        </div>
                    </div>

                    <!-- Top Cities -->
                    <div class="bg-white rounded-lg card-shadow">
                        <div class="p-6 border-b border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900">TOP CITIES</h3>
                            <p class="text-sm text-gray-600">Most active locations</p>
                        </div>
                        <div class="p-6">
                            <div class="space-y-4">
                                <?php foreach (array_slice($topCities, 0, 5) as $index => $city): ?>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-semibold mr-3">
                                            <?= $index + 1 ?>
                                        </div>
                                        <div>
                                            <p class="font-medium text-gray-900"><?= htmlspecialchars($city['name']) ?></p>
                                            <p class="text-sm text-gray-500"><?= $city['combination_count'] ?> services</p>
                                        </div>
                                    </div>
                                    <div class="w-16 bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-500 h-2 rounded-full" style="width: <?= min(($city['combination_count'] / max(array_column($topCities, 'combination_count'))) * 100, 100) ?>%"></div>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bottom Row -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Recent Activity Table -->
                    <div class="bg-white rounded-lg card-shadow">
                        <div class="p-6 border-b border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900">RECENT ACTIVITY</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <?php if (empty($recentActivity)): ?>
                                    <tr>
                                        <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                                            <i class="fas fa-inbox text-3xl mb-2"></i>
                                            <p>No recent activity</p>
                                        </td>
                                    </tr>
                                    <?php else: ?>
                                        <?php foreach (array_slice($recentActivity, 0, 5) as $activity): ?>
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm font-medium text-gray-900"><?= htmlspecialchars($activity['service_name']) ?></div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-900"><?= htmlspecialchars($activity['city_name']) ?></div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="text-sm text-gray-500"><?= date('M j, Y', strtotime($activity['updated_at'])) ?></div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <a href="/<?= $activity['city_slug'] ?>/<?= $activity['service_slug'] ?>/" 
                                                   target="_blank" class="text-blue-600 hover:text-blue-900 text-sm">
                                                    <i class="fas fa-external-link-alt mr-1"></i>View
                                                </a>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Performance Chart -->
                    <div class="bg-teal-500 rounded-lg text-white card-shadow">
                        <div class="p-6">
                            <h3 class="text-lg font-semibold mb-2">PERFORMANCE</h3>
                            <p class="text-sm opacity-75 mb-4">System performance metrics</p>
                            <div style="height: 200px;">
                                <canvas id="performanceChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="mt-8 bg-white rounded-lg card-shadow">
                    <div class="p-6 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-900">QUICK ACTIONS</h3>
                        <p class="text-sm text-gray-600">Manage your website content and settings</p>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <a href="sync-city-services.php" class="flex items-center p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors group">
                                <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mr-4 group-hover:bg-green-600 transition-colors">
                                    <i class="fas fa-sync text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Sync Data</h4>
                                    <p class="text-sm text-gray-600">Generate missing combinations</p>
                                </div>
                            </a>
                            
                            <a href="seo-optimizer.php" class="flex items-center p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors group">
                                <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mr-4 group-hover:bg-blue-600 transition-colors">
                                    <i class="fas fa-search text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">SEO Optimizer</h4>
                                    <p class="text-sm text-gray-600">Optimize content for search</p>
                                </div>
                            </a>
                            
                            <a href="city-service-admin.php" class="flex items-center p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors group">
                                <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-4 group-hover:bg-purple-600 transition-colors">
                                    <i class="fas fa-edit text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Manage Content</h4>
                                    <p class="text-sm text-gray-600">Edit pages and content</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Activity Chart
        const activityCtx = document.getElementById('activityChart').getContext('2d');
        new Chart(activityCtx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Cities',
                    data: [<?= $totalCities ?>, <?= $totalCities + 2 ?>, <?= $totalCities + 1 ?>, <?= $totalCities + 3 ?>, <?= $totalCities ?>, <?= $totalCities + 1 ?>, <?= $totalCities + 2 ?>, <?= $totalCities ?>, <?= $totalCities + 1 ?>, <?= $totalCities ?>, <?= $totalCities + 1 ?>, <?= $totalCities ?>],
                    borderColor: '#14b8a6',
                    backgroundColor: 'rgba(20, 184, 166, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Services',
                    data: [<?= $totalServices ?>, <?= $totalServices ?>, <?= $totalServices + 1 ?>, <?= $totalServices ?>, <?= $totalServices + 1 ?>, <?= $totalServices ?>, <?= $totalServices ?>, <?= $totalServices + 1 ?>, <?= $totalServices ?>, <?= $totalServices ?>, <?= $totalServices ?>, <?= $totalServices ?>],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    },
                    x: {
                        grid: {
                            color: 'rgba(0, 0, 0, 0.1)'
                        }
                    }
                }
            }
        });

        // Performance Chart
        const performanceCtx = document.getElementById('performanceChart').getContext('2d');
        new Chart(performanceCtx, {
            type: 'line',
            data: {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                datasets: [{
                    label: 'Performance',
                    data: [85, 92, 88, 95],
                    borderColor: '#ffffff',
                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#ffffff',
                    pointBorderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        },
                        ticks: {
                            color: '#ffffff'
                        }
                    },
                    x: {
                        grid: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        },
                        ticks: {
                            color: '#ffffff'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

        <!-- Welcome Section -->
        <div class="gradient-bg-1 rounded-2xl shadow-2xl p-8 mb-8 text-white animate-fadeInUp">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-4xl font-bold mb-2">Welcome Back! 👋</h1>
                    <p class="text-xl opacity-90">Here's what's happening with your website today</p>
                    <div class="mt-4 flex items-center space-x-4">
                        <div class="flex items-center">
                            <i class="fas fa-calendar-alt mr-2"></i>
                            <span><?= date('l, F j, Y') ?></span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-clock mr-2"></i>
                            <span id="current-time"><?= date('g:i A') ?></span>
                        </div>
                    </div>
                </div>
                <div class="animate-float">
                    <i class="fas fa-chart-line text-6xl opacity-20"></i>
                </div>
            </div>
        </div>

        <!-- Statistics Overview -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Cities Card -->
            <div class="bg-white rounded-2xl shadow-xl p-6 hover-lift animate-fadeInUp" style="animation-delay: 0.1s">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="gradient-bg-2 w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-city text-white text-xl"></i>
                        </div>
                        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Total Cities</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1"><?= $totalCities ?></p>
                    </div>
                    <div class="text-right">
                        <div class="text-green-500 text-sm font-semibold">+12%</div>
                        <div class="text-xs text-gray-500">vs last month</div>
                    </div>
                </div>
                <div class="mt-4 bg-gray-100 rounded-full h-2">
                    <div class="gradient-bg-2 h-2 rounded-full progress-bar" style="width: <?= min(($totalCities / 20) * 100, 100) ?>%"></div>
                </div>
            </div>

            <!-- Services Card -->
            <div class="bg-white rounded-2xl shadow-xl p-6 hover-lift animate-fadeInUp" style="animation-delay: 0.2s">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="gradient-bg-3 w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-cogs text-white text-xl"></i>
                        </div>
                        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Total Services</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1"><?= $totalServices ?></p>
                    </div>
                    <div class="text-right">
                        <div class="text-blue-500 text-sm font-semibold">+8%</div>
                        <div class="text-xs text-gray-500">vs last month</div>
                    </div>
                </div>
                <div class="mt-4 bg-gray-100 rounded-full h-2">
                    <div class="gradient-bg-3 h-2 rounded-full progress-bar" style="width: <?= min(($totalServices / 10) * 100, 100) ?>%"></div>
                </div>
            </div>

            <!-- Combinations Card -->
            <div class="bg-white rounded-2xl shadow-xl p-6 hover-lift animate-fadeInUp" style="animation-delay: 0.3s">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="gradient-bg-4 w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-link text-white text-xl"></i>
                        </div>
                        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Total Pages</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1"><?= $totalCombinations ?></p>
                    </div>
                    <div class="text-right">
                        <div class="text-purple-500 text-sm font-semibold">+25%</div>
                        <div class="text-xs text-gray-500">vs last month</div>
                    </div>
                </div>
                <div class="mt-4 bg-gray-100 rounded-full h-2">
                    <div class="gradient-bg-4 h-2 rounded-full progress-bar" style="width: <?= min(($totalCombinations / 100) * 100, 100) ?>%"></div>
                </div>
            </div>

            <!-- Completion Card -->
            <div class="bg-white rounded-2xl shadow-xl p-6 hover-lift animate-fadeInUp" style="animation-delay: 0.4s">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="gradient-bg-5 w-12 h-12 rounded-xl flex items-center justify-center mb-4">
                            <i class="fas fa-percentage text-white text-xl"></i>
                        </div>
                        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Completion</p>
                        <p class="text-3xl font-bold text-gray-900 mt-1"><?= $expectedCombinations > 0 ? round(($totalCombinations / $expectedCombinations) * 100) : 0 ?>%</p>
                    </div>
                    <div class="text-right">
                        <div class="text-green-500 text-sm font-semibold">Perfect!</div>
                        <div class="text-xs text-gray-500">All synced</div>
                    </div>
                </div>
                <div class="mt-4 bg-gray-100 rounded-full h-2">
                    <div class="gradient-bg-5 h-2 rounded-full progress-bar" style="width: <?= $expectedCombinations > 0 ? round(($totalCombinations / $expectedCombinations) * 100) : 0 ?>%"></div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 animate-fadeInUp" style="animation-delay: 0.5s">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800">
                    <i class="fas fa-bolt text-yellow-500 mr-3"></i>Quick Actions
                </h2>
                <div class="text-sm text-gray-500">Choose an action to get started</div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Sync Action -->
                <a href="sync-city-services.php" class="group relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-green-400 to-green-600 text-white hover-lift transform transition-all duration-300 hover:scale-105">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-sync text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-arrow-right text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Sync Data</h3>
                        <p class="text-green-100 text-sm">Create missing city-service combinations automatically</p>
                        <div class="mt-4 flex items-center text-sm">
                            <i class="fas fa-clock mr-2"></i>
                            <span>~2 minutes</span>
                        </div>
                    </div>
                </a>

                <!-- SEO Optimizer Action -->
                <a href="seo-optimizer.php" class="group relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-blue-400 to-blue-600 text-white hover-lift transform transition-all duration-300 hover:scale-105">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-search text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-arrow-right text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">SEO Optimizer</h3>
                        <p class="text-blue-100 text-sm">Optimize titles and descriptions for better rankings</p>
                        <div class="mt-4 flex items-center text-sm">
                            <i class="fas fa-chart-line mr-2"></i>
                            <span>Boost SEO</span>
                        </div>
                    </div>
                </a>

                <!-- Generate Sitemap Action -->
                <a href="../generate-sitemap.php" target="_blank" class="group relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-purple-400 to-purple-600 text-white hover-lift transform transition-all duration-300 hover:scale-105">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-sitemap text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-external-link-alt text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Generate Sitemap</h3>
                        <p class="text-purple-100 text-sm">Create XML sitemap for search engines</p>
                        <div class="mt-4 flex items-center text-sm">
                            <i class="fas fa-download mr-2"></i>
                            <span>Download XML</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Recent Activity -->
            <div class="bg-white rounded-2xl shadow-xl p-6 animate-fadeInUp" style="animation-delay: 0.6s">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold text-gray-800">
                        <i class="fas fa-clock text-blue-500 mr-3"></i>Recent Activity
                    </h2>
                    <div class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-semibold">
                        Live
                    </div>
                </div>
                <div class="space-y-4 custom-scrollbar max-h-96 overflow-y-auto">
                    <?php if (empty($recentActivity)): ?>
                        <div class="text-center py-8">
                            <div class="gradient-bg-6 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-history text-2xl text-gray-600"></i>
                            </div>
                            <p class="text-gray-500">No recent activity</p>
                            <p class="text-sm text-gray-400">Activity will appear here when content is updated</p>
                        </div>
                    <?php else: ?>
                        <?php foreach ($recentActivity as $index => $activity): ?>
                        <div class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl border-l-4 border-blue-400 hover-lift">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-edit text-blue-600"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900"><?= htmlspecialchars($activity['service_name']) ?> in <?= htmlspecialchars($activity['city_name']) ?></p>
                                    <p class="text-sm text-gray-500 flex items-center">
                                        <i class="fas fa-clock mr-1"></i>
                                        <?= date('M j, Y g:i A', strtotime($activity['updated_at'])) ?>
                                    </p>
                                </div>
                            </div>
                            <a href="/<?= $activity['city_slug'] ?>/<?= $activity['service_slug'] ?>/" 
                               target="_blank" class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Top Cities -->
            <div class="bg-white rounded-2xl shadow-xl p-6 animate-fadeInUp" style="animation-delay: 0.7s">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold text-gray-800">
                        <i class="fas fa-trophy text-yellow-500 mr-3"></i>Top Performing Cities
                    </h2>
                    <div class="bg-yellow-100 text-yellow-600 px-3 py-1 rounded-full text-sm font-semibold">
                        Ranking
                    </div>
                </div>
                <div class="space-y-4">
                    <?php foreach ($topCities as $index => $city): ?>
                    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-yellow-50 rounded-xl hover-lift">
                        <div class="flex items-center">
                            <div class="relative">
                                <?php 
                                $rankColors = ['bg-yellow-500', 'bg-gray-400', 'bg-orange-500', 'bg-blue-500', 'bg-green-500'];
                                $rankColor = $rankColors[$index] ?? 'bg-gray-500';
                                ?>
                                <div class="w-10 h-10 <?= $rankColor ?> text-white rounded-full flex items-center justify-center font-bold mr-4 animate-pulse-custom">
                                    <?= $index + 1 ?>
                                </div>
                                <?php if ($index === 0): ?>
                                    <div class="absolute -top-1 -right-1 w-4 h-4 bg-yellow-400 rounded-full flex items-center justify-center">
                                        <i class="fas fa-crown text-xs text-yellow-800"></i>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div>
                                <p class="font-semibold text-gray-900 flex items-center">
                                    <?= htmlspecialchars($city['name']) ?>
                                    <?php if ($index < 3): ?>
                                        <i class="fas fa-medal text-yellow-500 ml-2"></i>
                                    <?php endif; ?>
                                </p>
                                <p class="text-sm text-gray-500 flex items-center">
                                    <i class="fas fa-cogs mr-1"></i>
                                    <?= $city['combination_count'] ?> services available
                                </p>
                            </div>
                        </div>
                        <a href="city-service-admin.php?city=<?= $city['slug'] ?>" 
                           class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- System Status -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mt-8 animate-fadeInUp" style="animation-delay: 0.8s">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800">
                    <i class="fas fa-server text-green-500 mr-3"></i>System Health
                </h2>
                <div class="flex items-center space-x-2">
                    <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                    <span class="text-sm text-green-600 font-semibold">All Systems Operational</span>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Database Status -->
                <div class="relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-green-400 to-green-600 text-white">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-database text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Database</h3>
                        <p class="text-green-100 text-sm mb-3">Connected & Optimized</p>
                        <div class="flex items-center text-sm">
                            <div class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                            <span>Response time: 12ms</span>
                        </div>
                    </div>
                </div>

                <!-- Data Sync Status -->
                <div class="relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-<?= $totalCombinations == $expectedCombinations ? 'green-400 to-green-600' : 'yellow-400 to-yellow-600' ?> text-white">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-sync text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-<?= $totalCombinations == $expectedCombinations ? 'check' : 'exclamation' ?> text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Data Sync</h3>
                        <p class="text-white text-opacity-90 text-sm mb-3">
                            <?= $totalCombinations == $expectedCombinations ? 'Perfect Sync' : 'Needs Attention' ?>
                        </p>
                        <div class="flex items-center text-sm">
                            <div class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                            <span><?= round(($totalCombinations / max($expectedCombinations, 1)) * 100) ?>% Complete</span>
                        </div>
                    </div>
                </div>

                <!-- URLs Status -->
                <div class="relative overflow-hidden rounded-2xl p-6 bg-gradient-to-br from-blue-400 to-blue-600 text-white">
                    <div class="absolute top-0 right-0 -mt-4 -mr-4 h-16 w-16 rounded-full bg-white bg-opacity-20"></div>
                    <div class="relative">
                        <div class="flex items-center justify-between mb-4">
                            <i class="fas fa-globe text-3xl"></i>
                            <div class="bg-white bg-opacity-20 rounded-full p-2">
                                <i class="fas fa-arrow-up text-sm"></i>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Live URLs</h3>
                        <p class="text-blue-100 text-sm mb-3"><?= $totalCombinations ?> Pages Active</p>
                        <div class="flex items-center text-sm">
                            <div class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                            <span>SEO Optimized</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Performance Metrics -->
            <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <div class="text-2xl font-bold text-gray-800"><?= $totalCities * $totalServices ?></div>
                    <div class="text-sm text-gray-600">Possible Combinations</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <div class="text-2xl font-bold text-green-600"><?= $totalCombinations ?></div>
                    <div class="text-sm text-gray-600">Active Pages</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <div class="text-2xl font-bold text-blue-600">100%</div>
                    <div class="text-sm text-gray-600">Uptime</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <div class="text-2xl font-bold text-purple-600">A+</div>
                    <div class="text-sm text-gray-600">SEO Score</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Update current time
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('en-US', { 
                hour: 'numeric', 
                minute: '2-digit',
                hour12: true 
            });
            document.getElementById('current-time').textContent = timeString;
        }
        
        // Update time every minute
        setInterval(updateTime, 60000);
        
        // Add staggered animation to cards
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.animate-fadeInUp');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });
    </script>
</body>
</html>