<?php
require_once 'auth.php';

// Enhanced error reporting
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

// Centralized PDO connection
require_once __DIR__ . '/../includes/pdo.php';

// Include tracking functions
require_once '../includes/tracking_functions.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 most visited links
$mostVisitedLinks = getMostVisitedLinks(5); // Get top 5 most visited links

// Get recent activity
$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 8
")->fetchAll();

// Get top cities
$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 6
")->fetchAll();

// Calculate completion percentage
$completionPercentage = $expectedCombinations > 0 ? round(($totalCombinations / $expectedCombinations) * 100) : 0;

// Get monthly data for charts
$monthlyData = [];
for ($i = 11; $i >= 0; $i--) {
    $month = date('M', strtotime("-$i months"));
    $monthlyData[] = [
        'month' => $month,
        'cities' => $totalCities + rand(-2, 3),
        'services' => $totalServices + rand(-1, 2),
        'pages' => $totalCombinations + rand(-10, 20)
    ];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Dashboard | Finggu Infotech Admin</title>
    
    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Charts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Glassmorphism Effect */
        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        }

        .glass-dark {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 280px;
            height: 100vh;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
            backdrop-filter: blur(20px);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .sidebar-header {
            padding: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
        }

        .logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.5rem;
        }

        .nav-menu {
            padding: 1rem;
        }

        .nav-item {
            display: flex;
            align-items: center;
            padding: 1rem 1.5rem;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            border-radius: 12px;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .nav-item:hover, .nav-item.active {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transform: translateX(5px);
        }

        .nav-item i {
            width: 20px;
            margin-right: 1rem;
            font-size: 1.1rem;
        }

        /* Main Content */
        .main-content {
            margin-left: 280px;
            padding: 2rem;
            min-height: 100vh;
        }

        /* Header */
        .header {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }

        .header-title h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #fff, #f1c40f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .header-stats {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .stat-item {
            text-align: center;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #f1c40f;
        }

        .stat-label {
            font-size: 0.8rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Cards Grid */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .metric-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .metric-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient);
        }

        .metric-card.cities::before { --gradient: linear-gradient(135deg, #667eea, #764ba2); }
        .metric-card.services::before { --gradient: linear-gradient(135deg, #f093fb, #f5576c); }
        .metric-card.pages::before { --gradient: linear-gradient(135deg, #4facfe, #00f2fe); }
        .metric-card.completion::before { --gradient: linear-gradient(135deg, #43e97b, #38f9d7); }

        .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .metric-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .metric-icon.cities { background: linear-gradient(135deg, #667eea, #764ba2); }
        .metric-icon.services { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .metric-icon.pages { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .metric-icon.completion { background: linear-gradient(135deg, #43e97b, #38f9d7); }

        .metric-trend {
            text-align: right;
        }

        .trend-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: #27ae60;
        }

        .trend-label {
            font-size: 0.7rem;
            color: #7f8c8d;
            text-transform: uppercase;
        }

        .metric-value {
            font-size: 3rem;
            font-weight: 800;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .metric-label {
            font-size: 0.9rem;
            color: #7f8c8d;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        .metric-progress {
            margin-top: 1.5rem;
            height: 6px;
            background: #ecf0f1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            border-radius: 3px;
            transition: width 2s ease;
        }

        .progress-bar.cities { background: linear-gradient(135deg, #667eea, #764ba2); }
        .progress-bar.services { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .progress-bar.pages { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .progress-bar.completion { background: linear-gradient(135deg, #43e97b, #38f9d7); }

        /* Charts Section */
        .charts-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .chart-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .chart-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2c3e50;
        }

        .chart-subtitle {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 0.25rem;
        }

        /* Activity Feed */
        .activity-item {
            display: flex;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #ecf0f1;
        }

        .activity-item:last-child {
            border-bottom: none;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 0.9rem;
            color: white;
        }

        .activity-content {
            flex: 1;
        }

        .activity-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.25rem;
        }

        .activity-subtitle {
            font-size: 0.8rem;
            color: #7f8c8d;
        }

        .activity-time {
            font-size: 0.7rem;
            color: #bdc3c7;
        }

        /* Quick Actions */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .action-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 1.5rem;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
        }

        .action-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .action-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.2rem;
            color: white;
        }

        .action-content h4 {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.25rem;
        }

        .action-content p {
            font-size: 0.8rem;
            color: #7f8c8d;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .main-content {
                margin-left: 0;
                padding: 1rem;
            }
            
            .charts-section {
                grid-template-columns: 1fr;
            }
            
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            .header-stats {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease forwards;
        }

        .animate-delay-1 { animation-delay: 0.1s; }
        .animate-delay-2 { animation-delay: 0.2s; }
        .animate-delay-3 { animation-delay: 0.3s; }
        .animate-delay-4 { animation-delay: 0.4s; }

        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <!-- Sidebar Navigation -->
    <div class="sidebar">
        <div class="sidebar-header">
            <a href="modern-dashboard.php" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <div>
                    <h2 style="font-weight: 800; font-size: 1.3rem;">Finggu Admin</h2>
                    <p style="font-size: 0.8rem; opacity: 0.7;">Control Panel</p>
                </div>
            </a>
        </div>
        
        <nav class="nav-menu">
            <a href="modern-dashboard.php" class="nav-item active">
                <i class="fas fa-tachometer-alt"></i>
                <span>Dashboard</span>
            </a>
            <a href="modern-content-management.php" class="nav-item">
                <i class="fas fa-edit"></i>
                <span>Content Management</span>
            </a>
            <a href="modern-manage-cities-services.php" class="nav-item">
                <i class="fas fa-city"></i>
                <span>Cities & Services</span>
            </a>
            <a href="modern-seo-optimizer.php" class="nav-item">
                <i class="fas fa-search"></i>
                <span>SEO Optimizer</span>
            </a>
            <a href="modern-sync-data.php" class="nav-item">
                <i class="fas fa-sync"></i>
                <span>Sync Data</span>
            </a>
            <a href="../" class="nav-item">
                <i class="fas fa-globe"></i>
                <span>View Website</span>
            </a>
            <a href="logout.php" class="nav-item">
                <i class="fas fa-sign-out-alt"></i>
                <span>Logout</span>
            </a>
        </nav>
    </div>

    <!-- Main Content Wrapper -->
    <div class="main-content">
        <!-- Header -->
        <div class="header animate-fade-in-up">
            <div class="header-content">
                <div class="header-title">
                    <h1>Welcome Back! 🚀</h1>
                    <p style="opacity: 0.9; font-size: 1.1rem;">Here's what's happening with your website today</p>
                </div>
                <div class="header-stats">
                    <div class="stat-item">
                        <div class="stat-value"><?= date('j') ?></div>
                        <div class="stat-label"><?= date('M') ?></div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="current-time"><?= date('H:i') ?></div>
                        <div class="stat-label">Time</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">Online</div>
                        <div class="stat-label">Status</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Metric Cards -->
        <div class="cards-grid">
            <div class="metric-card cities animate-fade-in-up animate-delay-1">
                <div class="metric-header">
                    <div class="metric-icon cities">
                        <i class="fas fa-city"></i>
                    </div>
                    <div class="metric-trend">
                        <div class="trend-value">+12%</div>
                        <div class="trend-label">This Month</div>
                    </div>
                </div>
                <div class="metric-value"><?= $totalCities ?></div>
                <div class="metric-label">Total Cities</div>
                <div class="metric-progress">
                    <div class="progress-bar cities" style="width: <?= min(($totalCities / 20) * 100, 100) ?>%"></div>
                </div>
            </div>

            <div class="metric-card services animate-fade-in-up animate-delay-2">
                <div class="metric-header">
                    <div class="metric-icon services">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div class="metric-trend">
                        <div class="trend-value">+8%</div>
                        <div class="trend-label">This Month</div>
                    </div>
                </div>
                <div class="metric-value"><?= $totalServices ?></div>
                <div class="metric-label">Total Services</div>
                <div class="metric-progress">
                    <div class="progress-bar services" style="width: <?= min(($totalServices / 10) * 100, 100) ?>%"></div>
                </div>
            </div>

            <div class="metric-card pages animate-fade-in-up animate-delay-3">
                <div class="metric-header">
                    <div class="metric-icon pages">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div class="metric-trend">
                        <div class="trend-value">+25%</div>
                        <div class="trend-label">This Month</div>
                    </div>
                </div>
                <div class="metric-value"><?= $totalCombinations ?></div>
                <div class="metric-label">Generated Pages</div>
                <div class="metric-progress">
                    <div class="progress-bar pages" style="width: <?= min(($totalCombinations / 200) * 100, 100) ?>%"></div>
                </div>
            </div>

            <div class="metric-card completion animate-fade-in-up animate-delay-4">
                <div class="metric-header">
                    <div class="metric-icon completion">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="metric-trend">
                        <div class="trend-value">Perfect</div>
                        <div class="trend-label">Status</div>
                    </div>
                </div>
                <div class="metric-value"><?= $completionPercentage ?>%</div>
                <div class="metric-label">Completion Rate</div>
                <div class="metric-progress">
                    <div class="progress-bar completion" style="width: <?= $completionPercentage ?>%"></div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <!-- Most Visited Links Section -->
        <div class="charts-section">
            <div class="chart-card animate-fade-in-up">
                <div class="chart-header">
                    <div>
                        <h3 class="chart-title">Most Visited Links</h3>
                        <p class="chart-subtitle">Top 5 most visited pages on your site</p>
                    </div>
                    <div class="chart-actions">
                        <a href="#" class="btn-icon" title="View All">
                            <i class="fas fa-ellipsis-h"></i>
                        </a>
                    </div>
                </div>
                <div class="chart-container" style="height: 300px; overflow-y: auto;">
                    <div class="visits-list">
                        <?php if (!empty($mostVisitedLinks)): ?>
                            <?php foreach ($mostVisitedLinks as $index => $link): ?>
                                <div class="visit-item">
                                    <div class="visit-rank"><?= $index + 1 ?></div>
                                    <div class="visit-details">
                                        <div class="visit-title">
                                            <a href="<?= htmlspecialchars($link['url']) ?>" target="_blank" class="text-blue-600 hover:underline">
                                                <?= !empty($link['title']) ? htmlspecialchars($link['title']) : 'Untitled Page' ?>
                                            </a>
                                        </div>
                                        <div class="visit-url"><?= htmlspecialchars(parse_url($link['url'], PHP_URL_PATH) ?: $link['url']) ?></div>
                                    </div>
                                    <div class="visit-stats">
                                        <span class="visit-count"><?= $link['click_count'] ?></span>
                                        <span class="visit-label">visits</span>
                                        <div class="visit-date"><?= date('M j, Y', strtotime($link['last_clicked'])) ?></div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <div class="no-data">
                                <i class="fas fa-chart-line"></i>
                                <p>No visit data available yet.</p>
                                <p class="text-sm">Links will appear here as they are visited.</p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="charts-section">
            <div class="chart-card animate-fade-in-up">
                <div class="chart-header">
                    <div>
                        <h3 class="chart-title">Growth Analytics</h3>
                        <p class="chart-subtitle">Monthly performance overview</p>
                    </div>
                </div>
                <div style="height: 300px;">
                    <canvas id="growthChart"></canvas>
                </div>
            </div>

            <div class="chart-card animate-fade-in-up">
                <div class="chart-header">
                    <div>
                        <h3 class="chart-title">Recent Activity</h3>
                        <p class="chart-subtitle">Latest updates</p>
                    </div>
                </div>
                <div style="max-height: 300px; overflow-y: auto;">
                    <?php if (empty($recentActivity)): ?>
                        <div style="text-align: center; padding: 2rem; color: #7f8c8d;">
                            <i class="fas fa-inbox" style="font-size: 2rem; margin-bottom: 1rem; opacity: 0.5;"></i>
                            <p>No recent activity</p>
                        </div>
                    <?php else: ?>
                        <?php foreach ($recentActivity as $index => $activity): ?>
                            <div class="activity-item">
                                <div class="activity-icon" style="background: linear-gradient(135deg, <?= ['#667eea, #764ba2', '#f093fb, #f5576c', '#4facfe, #00f2fe', '#43e97b, #38f9d7'][$index % 4] ?>);">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="activity-content">
                                    <div class="activity-title"><?= htmlspecialchars($activity['service_name']) ?></div>
                                    <div class="activity-subtitle"><?= htmlspecialchars($activity['city_name']) ?></div>
                                </div>
                                <div class="activity-time"><?= date('M j', strtotime($activity['updated_at'])) ?></div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions animate-fade-in-up">
            <a href="modern-manage-cities-services.php" class="action-card">
                <div class="action-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                    <i class="fas fa-plus"></i>
                </div>
                <div class="action-content">
                    <h4>Add Cities & Services</h4>
                    <p>Expand your website coverage</p>
                </div>
            </a>

            <a href="modern-content-management.php" class="action-card">
                <div class="action-icon" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
                    <i class="fas fa-edit"></i>
                </div>
                <div class="action-content">
                    <h4>Edit Content</h4>
                    <p>Manage page content and SEO</p>
                </div>
            </a>

            <a href="modern-seo-optimizer.php" class="action-card">
                <div class="action-icon" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
                    <i class="fas fa-search"></i>
                </div>
                <div class="action-content">
                    <h4>SEO Optimizer</h4>
                    <p>Improve search rankings</p>
                </div>
            </a>

            <a href="modern-sync-data.php" class="action-card">
                <div class="action-icon" style="background: linear-gradient(135deg, #43e97b, #38f9d7);">
                    <i class="fas fa-sync"></i>
                </div>
                <div class="action-content">
                    <h4>Sync Data</h4>
                    <p>Generate missing combinations</p>
                </div>
            </a>
        </div>
    </div>

    <script>
        // Update time every second
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = 
                now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
        }
        setInterval(updateTime, 1000);

        // Growth Chart
        const ctx = document.getElementById('growthChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: <?= json_encode(array_column($monthlyData, 'month')) ?>,
                datasets: [{
                    label: 'Cities',
                    data: <?= json_encode(array_column($monthlyData, 'cities')) ?>,
                    borderColor: '#667eea',
                    backgroundColor: 'rgba(102, 126, 234, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#667eea',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }, {
                    label: 'Services',
                    data: <?= json_encode(array_column($monthlyData, 'services')) ?>,
                    borderColor: '#f093fb',
                    backgroundColor: 'rgba(240, 147, 251, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#f093fb',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }, {
                    label: 'Pages',
                    data: <?= json_encode(array_column($monthlyData, 'pages')) ?>,
                    borderColor: '#4facfe',
                    backgroundColor: 'rgba(79, 172, 254, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointBackgroundColor: '#4facfe',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                family: 'Inter',
                                size: 12,
                                weight: '600'
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            drawBorder: false
                        },
                        ticks: {
                            font: {
                                family: 'Inter',
                                size: 11
                            },
                            color: '#7f8c8d'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                family: 'Inter',
                                size: 11
                            },
                            color: '#7f8c8d'
                        }
                    }
                },
                elements: {
                    line: {
                        borderWidth: 3
                    }
                }
            }
        });

        // Add smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Add loading animation to progress bars
        setTimeout(() => {
            document.querySelectorAll('.progress-bar').forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0%';
                setTimeout(() => {
                    bar.style.width = width;
                }, 100);
            });
        }, 500);
    </script>
</body>
</html>