<?php
/**
 * Dashboard - Kenyan Pension & Life Insurance Management System
 */

ini_set('display_errors', 1);
error_reporting(E_ALL);

session_start();
require_once 'layouts/dbconn.php';
require_once 'includes/auth.php';

requireLogin();

// Set timezone
date_default_timezone_set('Africa/Nairobi');

// Get user details from session
$user_id = $_SESSION['user_id'];
$username = $_SESSION['username'];
$full_name = $_SESSION['full_name'];
$email = $_SESSION['email'];
$role_name = $_SESSION['role_name'];
$role_id = $_SESSION['role_id'];

// Initialize metrics array
$metrics = [];

$today = date('Y-m-d');
$current_month = date('Y-m');
$current_week = date('Y-m-d', strtotime('monday this week'));

// Role-based metrics
$role_upper = strtoupper($role_name);

if ($role_upper === 'SYSTEM ADMINISTRATOR') {
    // Total members
    $result = $conn->query("SELECT COUNT(*) as count FROM members WHERE is_active = 1");
    $metrics['total_members'] = $result->fetch_assoc()['count'];
    
    // Total schemes
    $result = $conn->query("SELECT COUNT(*) as count FROM pension_schemes WHERE is_active = 1");
    $metrics['total_schemes'] = $result->fetch_assoc()['count'];
    
    // Total contributions this month
    $result = $conn->query("SELECT COALESCE(SUM(contribution_amount), 0) as total 
                           FROM contributions 
                           WHERE DATE_FORMAT(contribution_period, '%Y-%m') = '$current_month' 
                           AND status = 'PROCESSED'");
    $metrics['monthly_contributions'] = $result->fetch_assoc()['total'];
    
    // Pending withdrawals
    $result = $conn->query("SELECT COUNT(*) as count FROM withdrawal_requests WHERE status = 'PENDING'");
    $metrics['pending_withdrawals'] = $result->fetch_assoc()['count'];
    
    // Total policies
    $result = $conn->query("SELECT COUNT(*) as count FROM life_policies WHERE policy_status = 'ACTIVE'");
    $metrics['total_policies'] = $result->fetch_assoc()['count'];
    
    // Pending claims
    $result = $conn->query("SELECT COUNT(*) as count FROM life_claims WHERE claim_status = 'PENDING'");
    $metrics['pending_claims'] = $result->fetch_assoc()['count'];
    
    // Total fund value
    $result = $conn->query("SELECT COALESCE(SUM(accrued_benefits), 0) as total 
                           FROM member_accounts 
                           WHERE account_status = 'ACTIVE'");
    $metrics['total_fund_value'] = $result->fetch_assoc()['total'];
    
    // Pending payouts
    $result = $conn->query("SELECT COUNT(*) as count FROM payouts WHERE payout_status = 'PENDING'");
    $metrics['pending_payouts'] = $result->fetch_assoc()['count'];
    
    // Recent contributions
    $recent_contributions = $conn->query("SELECT c.*, m.member_number, m.first_name, m.last_name, ps.scheme_name 
                                         FROM contributions c
                                         INNER JOIN members m ON c.member_id = m.member_id
                                         LEFT JOIN pension_schemes ps ON m.scheme_id = ps.scheme_id
                                         ORDER BY c.created_at DESC LIMIT 10")->fetch_all(MYSQLI_ASSOC);
    
    // Weekly new members
    $result = $conn->query("SELECT COUNT(*) as count FROM members WHERE DATE(created_at) >= '$current_week' AND is_active = 1");
    $metrics['weekly_new_members'] = $result->fetch_assoc()['count'];
    
    // Monthly revenue
    $result = $conn->query("SELECT COALESCE(SUM(payout_amount), 0) as total 
                           FROM payouts 
                           WHERE DATE_FORMAT(created_at, '%Y-%m') = '$current_month' 
                           AND payout_status = 'COMPLETED'");
    $metrics['monthly_payouts'] = $result->fetch_assoc()['total'];
}

$pageTitle = 'Dashboard';
?>
<?php include 'layouts/main.php'; ?>

<head>
    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Pension & Life Insurance Dashboard')); ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.css">
    <?php include 'layouts/head-css.php'; ?>
    
    <style>
        body {
            background-color: #f8fafc;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .page-content {
            padding: 0.5rem 1.5rem 1.5rem 1.5rem;
        }
        
        /* Welcome Header - Pension Brand Colors */
        .welcome-header {
            background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
            color: white;
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .welcome-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></svg>');
            animation: float 20s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: rotate(0deg) translateY(0px); }
            50% { transform: rotate(180deg) translateY(-20px); }
        }
        
        .welcome-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            position: relative;
            z-index: 1;
        }
        
        .welcome-text h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .welcome-text p {
            opacity: 0.9;
            margin: 0;
        }
        
        .datetime-display {
            text-align: right;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 1rem;
            min-width: 200px;
        }
        
        .current-time {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
        }
        
        .current-date {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* Pension-specific Metrics Cards */
        .metrics-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .metric-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--accent-color, #10b981);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .metric-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .metric-card:hover::before {
            opacity: 1;
        }
        
        .metric-card.members { --accent-color: #2563eb; }
        .metric-card.schemes { --accent-color: #10b981; }
        .metric-card.contributions { --accent-color: #06b6d4; }
        .metric-card.withdrawals { --accent-color: #f59e0b; }
        .metric-card.policies { --accent-color: #8b5cf6; }
        .metric-card.claims { --accent-color: #ef4444; }
        .metric-card.balances { --accent-color: #10b981; }
        .metric-card.payouts { --accent-color: #f59e0b; }
        
        .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        
        .metric-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin: 0;
        }
        
        .metric-icon {
            background: #f1f5f9;
            border-radius: 8px;
            padding: 0.5rem;
            font-size: 1.25rem;
        }
        
        .metric-card.members .metric-icon { background: #dbeafe; color: #2563eb; }
        .metric-card.schemes .metric-icon { background: #d1fae5; color: #10b981; }
        .metric-card.contributions .metric-icon { background: #cffafe; color: #06b6d4; }
        .metric-card.withdrawals .metric-icon { background: #fef3c7; color: #f59e0b; }
        .metric-card.policies .metric-icon { background: #ede9fe; color: #8b5cf6; }
        .metric-card.claims .metric-icon { background: #fee2e2; color: #ef4444; }
        .metric-card.balances .metric-icon { background: #d1fae5; color: #10b981; }
        .metric-card.payouts .metric-icon { background: #fef3c7; color: #f59e0b; }
        
        .metric-value {
            font-size: 2.25rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.5rem;
            line-height: 1;
        }
        
        .metric-change {
            font-size: 0.875rem;
            font-weight: 500;
            color: #64748b;
            margin-bottom: 1rem;
        }
        
        .metric-trend {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .trend-up { color: #10b981; }
        .trend-down { color: #ef4444; }
        .trend-neutral { color: #06b6d4; }
        
        .metric-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            color: var(--accent-color, #2563eb);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            transition: color 0.2s ease;
        }
        
        .metric-link:hover {
            color: #1e40af;
        }
        
        /* Quick Actions */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .quick-action {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            text-decoration: none;
            color: #1e293b;
            transition: all 0.2s ease;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        }
        
        .quick-action:hover {
            color: #2563eb;
            border-color: #2563eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .quick-action-icon {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
            display: block;
        }
        
        .quick-action-title {
            font-weight: 600;
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }
        
        .quick-action-desc {
            font-size: 0.75rem;
            color: #64748b;
            margin: 0;
        }
        
        /* Tables */
        .table-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            margin-bottom: 2rem;
        }
        
        .table-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }
        
        .table-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        
        .data-table th {
            background: #f8fafc;
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.875rem;
            color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .data-table td {
            padding: 1rem;
            border-bottom: 1px solid #f1f5f9;
            font-size: 0.875rem;
        }
        
        .data-table tbody tr:hover {
            background: #f8fafc;
        }
        
        /* Status Badges */
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .status-pending { background: #fef3c7; color: #92400e; }
        .status-processed { background: #d1fae5; color: #065f46; }
        .status-approved { background: #dbeafe; color: #1e40af; }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .page-content {
                padding: 1rem;
            }
            
            .welcome-content {
                flex-direction: column;
                text-align: center;
            }
            
            .datetime-display {
                min-width: auto;
                width: 100%;
            }
            
            .metrics-row {
                grid-template-columns: 1fr;
            }
            
            .metric-value {
                font-size: 1.75rem;
            }
            
            .quick-actions {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>

<body>
    <div id="layout-wrapper">
        <?php include 'layouts/menu.php'; ?>
        
        <div class="main-content">
            <div class="page-content">
                <div class="container-fluid">
                    <!-- Welcome Header -->
                    <div class="welcome-header">
                        <div class="welcome-content">
                            <div class="welcome-text">
                                <h2>
                                    <?php 
                                    $hour = date('H');
                                    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
                                    echo $greeting . ', ' . htmlspecialchars($full_name);
                                    ?>
                                </h2>
                                <p><?php echo htmlspecialchars($role_name); ?> - Kenyan Pension & Life Insurance Management System</p>
                                <small style="opacity: 0.8;">Retirement Benefits & Life Insurance Administration</small>
                            </div>
                            <div class="datetime-display d-none d-md-block">
                                <div class="current-time" id="currentTime"><?php echo date('h:i A'); ?></div>
                                <div class="current-date" id="currentDate"><?php echo date('l, M j, Y'); ?></div>
                            </div>
                        </div>
                    </div>

                    <!-- System Overview Metrics -->
                    <?php if ($role_upper === 'SYSTEM ADMINISTRATOR'): ?>
                    <div class="metrics-row">
                        <div class="metric-card members">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Total Members</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-user-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['total_members'] ?? 0); ?></div>
                            <div class="metric-change">Active pension members</div>
                            <div class="metric-trend trend-up">
                                <i class="ri-arrow-up-line"></i>
                                <span>New this week: <?php echo number_format($metrics['weekly_new_members'] ?? 0); ?></span>
                            </div>
                            <a href="members.php" class="metric-link">
                                View all members <i class="ri-arrow-right-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card schemes">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Pension Schemes</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-building-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['total_schemes'] ?? 0); ?></div>
                            <div class="metric-change">Active schemes</div>
                            <div class="metric-trend trend-neutral">
                                <i class="ri-shield-check-line"></i>
                                <span>RBA compliant</span>
                            </div>
                            <a href="schemes.php" class="metric-link">
                                Manage schemes <i class="ri-settings-3-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card contributions">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Monthly Contributions</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-file-add-line"></i></span>
                            </div>
                            <div class="metric-value">KES <?php echo number_format($metrics['monthly_contributions'] ?? 0, 2); ?></div>
                            <div class="metric-change">This month's contributions</div>
                            <div class="metric-trend trend-up">
                                <i class="ri-funds-line"></i>
                                <span>Employer + Employee</span>
                            </div>
                            <a href="contributions.php" class="metric-link">
                                View contributions <i class="ri-file-list-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card withdrawals">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Pending Withdrawals</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-money-dollar-circle-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['pending_withdrawals'] ?? 0); ?></div>
                            <div class="metric-change">Awaiting approval</div>
                            <div class="metric-trend trend-down">
                                <i class="ri-time-line"></i>
                                <span>Requires processing</span>
                            </div>
                            <a href="withdrawals.php?status=PENDING" class="metric-link">
                                Process withdrawals <i class="ri-check-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card policies">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Active Policies</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-file-shield-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['total_policies'] ?? 0); ?></div>
                            <div class="metric-change">Life insurance policies</div>
                            <div class="metric-trend trend-neutral">
                                <i class="ri-heart-pulse-line"></i>
                                <span>Coverage active</span>
                            </div>
                            <a href="policies.php" class="metric-link">
                                View policies <i class="ri-eye-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card claims">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Pending Claims</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-file-list-3-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['pending_claims'] ?? 0); ?></div>
                            <div class="metric-change">Awaiting processing</div>
                            <div class="metric-trend trend-down">
                                <i class="ri-alert-line"></i>
                                <span>Action required</span>
                            </div>
                            <a href="claims.php?status=PENDING" class="metric-link">
                                Process claims <i class="ri-check-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card balances">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Total Fund Value</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-wallet-line"></i></span>
                            </div>
                            <div class="metric-value">KES <?php echo number_format($metrics['total_fund_value'] ?? 0, 0); ?></div>
                            <div class="metric-change">Total accrued benefits</div>
                            <div class="metric-trend trend-up">
                                <i class="ri-line-chart-line"></i>
                                <span>Assets under management</span>
                            </div>
                            <a href="member_balances.php" class="metric-link">
                                View balances <i class="ri-bar-chart-line"></i>
                            </a>
                        </div>
                        
                        <div class="metric-card payouts">
                            <div class="metric-header">
                                <div>
                                    <h6 class="metric-title">Pending Payouts</h6>
                                </div>
                                <span class="metric-icon"><i class="ri-secure-payment-line"></i></span>
                            </div>
                            <div class="metric-value"><?php echo number_format($metrics['pending_payouts'] ?? 0); ?></div>
                            <div class="metric-change">Awaiting payment</div>
                            <div class="metric-trend trend-neutral">
                                <i class="ri-bank-line"></i>
                                <span>Monthly: KES <?php echo number_format($metrics['monthly_payouts'] ?? 0, 0); ?></span>
                            </div>
                            <a href="payouts.php?status=PENDING" class="metric-link">
                                Process payouts <i class="ri-check-double-line"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <h5 style="color: #2563eb; font-weight: 600;">Quick Actions</h5>
                        </div>
                    </div>
                    <div class="quick-actions">
                        <a href="members.php?action=create" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-user-add-line"></i></span>
                            <div class="quick-action-title">Add Member</div>
                            <p class="quick-action-desc">Register new member</p>
                        </a>
                        <a href="contributions.php?action=create" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-file-add-line"></i></span>
                            <div class="quick-action-title">Post Contribution</div>
                            <p class="quick-action-desc">Record contribution</p>
                        </a>
                        <a href="policies.php?action=create" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-file-shield-line"></i></span>
                            <div class="quick-action-title">New Policy</div>
                            <p class="quick-action-desc">Create life policy</p>
                        </a>
                        <a href="process_withdrawal.php" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-money-dollar-circle-line"></i></span>
                            <div class="quick-action-title">Process Withdrawal</div>
                            <p class="quick-action-desc">Handle withdrawal</p>
                        </a>
                        <a href="process_claim.php" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-file-list-3-line"></i></span>
                            <div class="quick-action-title">Process Claim</div>
                            <p class="quick-action-desc">Life insurance claim</p>
                        </a>
                        <a href="scheme_reports.php" class="quick-action">
                            <span class="quick-action-icon"><i class="ri-file-chart-line"></i></span>
                            <div class="quick-action-title">Reports</div>
                            <p class="quick-action-desc">View analytics</p>
                        </a>
                    </div>

                    <!-- Recent Contributions -->
                    <?php if (!empty($recent_contributions)): ?>
                    <div class="table-card">
                        <div class="table-header">
                            <h3 class="table-title">
                                <i class="ri-file-list-line me-2"></i>Recent Contributions
                            </h3>
                        </div>
                        <div class="table-responsive">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Member</th>
                                        <th>Scheme</th>
                                        <th>Type</th>
                                        <th>Amount (KES)</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php foreach($recent_contributions as $contrib): ?>
                                    <tr>
                                        <td><?php echo date('d M Y', strtotime($contrib['created_at'])); ?></td>
                                        <td>
                                            <div>
                                                <div class="fw-semibold"><?php echo htmlspecialchars($contrib['first_name'] . ' ' . $contrib['last_name']); ?></div>
                                                <small class="text-muted"><?php echo htmlspecialchars($contrib['member_number']); ?></small>
                                            </div>
                                        </td>
                                        <td><?php echo htmlspecialchars($contrib['scheme_name'] ?? 'N/A'); ?></td>
                                        <td>
                                            <span class="badge bg-info-subtle text-info">
                                                <?php echo htmlspecialchars($contrib['contribution_type']); ?>
                                            </span>
                                        </td>
                                        <td class="fw-semibold">KES <?php echo number_format($contrib['contribution_amount'], 2); ?></td>
                                        <td>
                                            <span class="status-badge status-<?php echo strtolower($contrib['status']); ?>">
                                                <?php echo htmlspecialchars($contrib['status']); ?>
                                            </span>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php include 'layouts/footer.php'; ?>
        </div>
    </div>

    <?php include 'layouts/vendor-scripts.php'; ?>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js"></script>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Update time and date
        function updateDateTime() {
            const now = new Date();
            
            const timeElement = document.getElementById('currentTime');
            const dateElement = document.getElementById('currentDate');
            
            if (timeElement) {
                timeElement.textContent = now.toLocaleTimeString('en-US', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
            }
            
            if (dateElement) {
                dateElement.textContent = now.toLocaleDateString('en-US', {
                    weekday: 'long',
                    month: 'short',
                    day: 'numeric',
                    year: 'numeric'
                });
            }
        }
        
        setInterval(updateDateTime, 60000);
        updateDateTime();

        // Add hover effects to metric cards
        document.querySelectorAll('.metric-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-4px)';
                this.style.boxShadow = '0 8px 15px rgba(0, 0, 0, 0.1)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1)';
            });
        });

        // Add hover effects to quick actions
        document.querySelectorAll('.quick-action').forEach(action => {
            action.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px) scale(1.02)';
            });
            
            action.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });
    });
    </script>

    <script src="assets/js/app.js"></script>
</body>
</html>