<?php
require_once 'includes/config.php';
require_once 'includes/functions.php';
require_once 'includes/auth.php';
require_once 'includes/db.php';

$auth = new Auth();

// Check if user is admin
if (!$auth->isAdmin()) {
    redirectTo('dashboard.php');
}

$currentUser = $auth->getCurrentUser();
$db = Database::getInstance();

$error = '';
$success = '';

// Handle CSV Export
if (isset($_GET['action']) && $_GET['action'] === 'export') {
    header('Content-Type: text/csv; charset=utf-8');
    header('Content-Disposition: attachment; filename="statistics_export_' . date('Y-m-d') . '.csv"');
    
    $output = fopen('php://output', 'w');
    fprintf($output, chr(0xEF).chr(0xBB).chr(0xBF)); // Add BOM for UTF-8
    
    // Write headers
    fputcsv($output, ['Statistic Name', 'Type', 'Attributes', 'Sum Type', 'Combination', 'Percentage', 'Created Date']);
    
    // Get all statistics with their combinations
    $stats = $db->query("
        SELECT s.*, 
               GROUP_CONCAT(DISTINCT a.name) as attribute_names,
               DATE_FORMAT(s.created_at, '%b %d, %Y') as created_date
        FROM statistics s
        LEFT JOIN statistic_attributes sa ON s.id = sa.statistic_id
        LEFT JOIN attributes a ON a.id = sa.attribute_id
        GROUP BY s.id
    ");
    
    while ($stat = $stats->fetch_assoc()) {
        $combinations = $db->query("
            SELECT combination_values, percentage
            FROM statistic_combinations
            WHERE statistic_id = " . $stat['id']);
            
        while ($combo = $combinations->fetch_assoc()) {
            $values = json_decode($combo['combination_values'], true);
            fputcsv($output, [
                $stat['name'],
                $stat['type'],
                $stat['attribute_names'],
                $stat['sum_type'],
                str_replace('×', 'x', implode(' x ', $values)),
                $combo['percentage'],
                $stat['created_date']
            ]);
        }
    }
    
    fclose($output);
    exit;
}

// AJAX handler for fetching combinations
if (isset($_GET['action']) && $_GET['action'] === 'getCombinations') {
    $statisticId = (int)$_GET['id'];
    
    // Enhanced query to get all necessary statistic details including selected attributes
    $statQuery = $db->query("
        SELECT s.*,
               GROUP_CONCAT(DISTINCT a.id ORDER BY a.id) as attribute_ids,
               GROUP_CONCAT(DISTINCT a.name ORDER BY a.id) as attribute_names,
               GROUP_CONCAT(DISTINCT a.choice_type ORDER BY a.id) as attribute_types,
               s.type as statistic_type
        FROM statistics s
        JOIN statistic_attributes sa ON s.id = sa.statistic_id
        JOIN attributes a ON a.id = sa.attribute_id
        WHERE s.id = $statisticId
        GROUP BY s.id
    ");
    
    $statistic = $statQuery->fetch_assoc();
    
    $combinations = $db->query("
        SELECT sc.combination_values, sc.percentage
        FROM statistic_combinations sc
        WHERE sc.statistic_id = $statisticId
        ORDER BY sc.id
    ");
    
    $result = [
        'statistic' => $statistic,
        'combinations' => []
    ];
    
    if ($combinations) {
        while ($combo = $combinations->fetch_assoc()) {
            $values = json_decode($combo['combination_values'], true);
            $result['combinations'][] = [
                'values' => $values,
                'combination' => implode(' × ', $values),
                'percentage' => number_format($combo['percentage'], 4)
            ];
        }
    }
    
    header('Content-Type: application/json');
    echo json_encode($result);
    exit;
}

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';
    $redirectSection = '';
    
    switch ($action) {
        case 'create_attribute':
            $name = sanitizeInput($_POST['attribute_name']);
            $type = sanitizeInput($_POST['choice_type']);
            $choices = sanitizeInput($_POST['choices']);
            
            $choicesArray = array_filter(array_map('trim', explode("\n", $choices)));
            $choicesJson = json_encode($choicesArray);
            
            $sql = "INSERT INTO attributes (name, choice_type, choices, created_by) 
                    VALUES ('" . $db->escape($name) . "', 
                            '" . $db->escape($type) . "', 
                            '" . $db->escape($choicesJson) . "',
                            " . (int)$_SESSION['user_id'] . ")";
            
            if ($db->query($sql)) {
                $success = "Attribute created successfully";
                $redirectSection = 'attributes';
            } else {
                $error = "Failed to create attribute";
            }
            break;
            
        case 'update_attribute':
            $attributeId = (int)$_POST['attribute_id'];
            $name = sanitizeInput($_POST['attribute_name']);
            $type = sanitizeInput($_POST['choice_type']);
            $choices = sanitizeInput($_POST['choices']);
            
            $choicesArray = array_filter(array_map('trim', explode("\n", $choices)));
            $choicesJson = json_encode($choicesArray);
            
            $sql = "UPDATE attributes SET 
                    name = '" . $db->escape($name) . "',
                    choice_type = '" . $db->escape($type) . "',
                    choices = '" . $db->escape($choicesJson) . "'
                    WHERE id = $attributeId";
            
            if ($db->query($sql)) {
                $success = "Attribute updated successfully";
                $redirectSection = 'attributes';
            } else {
                $error = "Failed to update attribute";
            }
            break;
            
        case 'delete_attribute':
            $attributeId = (int)$_POST['attribute_id'];
            
            if ($db->query("DELETE FROM attributes WHERE id = $attributeId")) {
                $success = "Attribute deleted successfully";
                $redirectSection = 'attributes';
            } else {
                $error = "Failed to delete attribute";
            }
            break;

        case 'create_statistics':
            $type = sanitizeInput($_POST['statistics_type']);
            $attributes = [];
            $name = '';
            $sumType = '100';
            
            if ($type === 'single') {
                $attributeId = (int)$_POST['single_attribute'];
                $attributes[] = $attributeId;
                
                $attrQuery = $db->query("SELECT name, choice_type FROM attributes WHERE id = $attributeId");
                $attr = $attrQuery->fetch_assoc();
                $name = $attr['name'];
                $sumType = $attr['choice_type'] === 'multiple' ? 'any' : '100';
            } else {
                $attributes = array_map('intval', $_POST['combined_attributes']);
                if (count($attributes) < 2) {
                    $error = "Please select at least 2 attributes for combined statistics";
                    break;
                }
                
                $attrNames = [];
                $hasMultiple = false;
                foreach ($attributes as $attrId) {
                    $attrQuery = $db->query("SELECT name, choice_type FROM attributes WHERE id = $attrId");
                    $attr = $attrQuery->fetch_assoc();
                    $attrNames[] = $attr['name'];
                    if ($attr['choice_type'] === 'multiple') {
                        $hasMultiple = true;
                    }
                }
                sort($attrNames);
                $name = implode(" × ", $attrNames);
                $sumType = $hasMultiple ? 'any' : '100';
            }
            
            $db->query("START TRANSACTION");
            
            try {
                $sql = "INSERT INTO statistics (name, type, sum_type, created_by) 
                        VALUES ('" . $db->escape($name) . "', 
                                '" . $db->escape($type) . "', 
                                '$sumType',
                                " . (int)$_SESSION['user_id'] . ")";
                
                if (!$db->query($sql)) {
                    throw new Exception("Failed to create statistics");
                }
                
                $statisticId = $db->getLastInsertId();
                
                foreach ($attributes as $attrId) {
                    $sql = "INSERT INTO statistic_attributes (statistic_id, attribute_id) 
                            VALUES ($statisticId, $attrId)";
                    if (!$db->query($sql)) {
                        throw new Exception("Failed to link attributes");
                    }
                }
                
                $combinations = json_decode($_POST['combinations'], true);
                foreach ($combinations as $combination) {
                    $sql = "INSERT INTO statistic_combinations (statistic_id, combination_values, percentage) 
                            VALUES ($statisticId, 
                                    '" . $db->escape(json_encode($combination['values'])) . "', 
                                    " . (float)$combination['percentage'] . ")";
                    if (!$db->query($sql)) {
                        throw new Exception("Failed to insert combinations");
                    }
                }
                
                $db->query("COMMIT");
                $success = "Statistics created successfully";
                $redirectSection = 'statistics';
            } catch (Exception $e) {
                $db->query("ROLLBACK");
                $error = $e->getMessage();
            }
            break;

        case 'update_statistics':
            $statisticId = (int)$_POST['statistic_id'];
            $combinations = json_decode($_POST['combinations'], true);
            
            $db->query("START TRANSACTION");
            
            try {
                $db->query("DELETE FROM statistic_combinations WHERE statistic_id = $statisticId");
                
                foreach ($combinations as $combination) {
                    $sql = "INSERT INTO statistic_combinations (statistic_id, combination_values, percentage) 
                            VALUES ($statisticId, 
                                    '" . $db->escape(json_encode($combination['values'])) . "', 
                                    " . (float)$combination['percentage'] . ")";
                    if (!$db->query($sql)) {
                        throw new Exception("Failed to update combinations");
                    }
                }
                
                $db->query("COMMIT");
                $success = "Statistics updated successfully";
                $redirectSection = 'statistics';
            } catch (Exception $e) {
                $db->query("ROLLBACK");
                $error = $e->getMessage();
            }
            break;

        case 'delete_statistics':
            $statisticId = (int)$_POST['statistic_id'];
            
            if ($db->query("DELETE FROM statistics WHERE id = $statisticId")) {
                $success = "Statistics deleted successfully";
                $redirectSection = 'statistics';
            } else {
                $error = "Failed to delete statistics";
            }
            break;
    }

    // Redirect with section parameter if specified
    if ($redirectSection && !$error) {
        redirectTo("base.php?section=" . $redirectSection);
    }
}

// Get all attributes
$attributes = $db->query("SELECT *, DATE_FORMAT(created_at, '%b %d, %Y') as created_date FROM attributes ORDER BY created_at DESC");

// Get statistics with counts and attribute details
$statistics = $db->query("
    SELECT s.*, 
           COUNT(DISTINCT sa.attribute_id) as attribute_count,
           COUNT(DISTINCT sc.id) as combination_count,
           GROUP_CONCAT(DISTINCT a.name) as attribute_names,
           DATE_FORMAT(s.created_at, '%b %d, %Y') as created_date
    FROM statistics s
    LEFT JOIN statistic_attributes sa ON s.id = sa.statistic_id
    LEFT JOIN statistic_combinations sc ON s.id = sc.statistic_id
    LEFT JOIN attributes a ON a.id = sa.attribute_id
    GROUP BY s.id
    ORDER BY s.created_at DESC
");

// Get all combinations for statistics check with deviation
// Replace the current query for $allCombinations with this:
$allCombinations = $db->query("
    SELECT 
        s.name as statistic_name,
        sc.combination_values,
        sc.percentage as target_percentage,
        (
            SELECT 
                ROUND((COUNT(*) * 100.0 / (SELECT COUNT(*) FROM panel_data)), 2)
            FROM panel_data pd
            WHERE (
                SELECT COUNT(*)
                FROM JSON_TABLE(
                    sc.combination_values,
                    '$[*]' COLUMNS(value VARCHAR(255) PATH '$')
                ) jt
                JOIN statistic_attributes sa ON sa.statistic_id = s.id
                WHERE JSON_UNQUOTE(
                    JSON_EXTRACT(pd.attribute_values, CONCAT('$.', sa.attribute_id))
                ) = jt.value
            ) = JSON_LENGTH(sc.combination_values)
        ) as panel_percentage
    FROM statistics s
    JOIN statistic_combinations sc ON s.id = sc.statistic_id
    ORDER BY s.name, sc.id
");

// For debugging
if (!$allCombinations) {
    error_log("Query Error: " . $db->getLastError());
}

// Determine active section
$activeSection = isset($_GET['section']) ? $_GET['section'] : 'attributes';
if (!in_array($activeSection, ['attributes', 'statistics', 'statisticCheck'])) {
    $activeSection = 'attributes';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base | <?php echo APP_NAME; ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #f58220;
            --primary-light: rgba(245, 130, 32, 0.1);
            --white: #ffffff;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            --purple-50: #faf5ff;
            --purple-100: #f3e8ff;
            --purple-500: #a855f7;
            --purple-700: #7e22ce;
            --indigo-50: #eef2ff;
            --indigo-100: #e0e7ff;
            --indigo-500: #6366f1;
            --indigo-700: #4338ca;
            --emerald-50: #ecfdf5;
            --emerald-100: #dcfce7;
            --emerald-500: #10b981;
            --emerald-700: #15803d;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: var(--gray-50);
        }

        /* Header Container and Export Button Styles */
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .export-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            display: inline-block;
            transition: opacity 0.3s ease;
        }

        .export-btn:hover {
            opacity: 0.9;
        }

        /* Notification Styles */
        .notification-container {
            position: fixed;
            top: 5rem;
            right: 1rem;
            z-index: 1000;
        }

        .notification {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transform: translateX(150%);
            transition: transform 0.3s ease-in-out;
            background: white;
            border-left: 4px solid;
            min-width: 300px;
            max-width: 400px;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification-success {
            border-left-color: #059669;
        }

        .notification-error {
            border-left-color: #DC2626;
        }

        .notification-icon {
            margin-right: 12px;
            font-size: 20px;
        }

        .notification-success .notification-icon {
            color: #059669;
        }

        .notification-error .notification-icon {
            color: #DC2626;
        }

        .notification-message {
            color: var(--gray-700);
            font-size: 0.875rem;
            font-weight: 500;
        }

        /* Navbar Styles */
        .navbar {
            background: var(--white);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .navbar-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .logo {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .nav-link {
            color: var(--gray-600);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-color);
            background: var(--primary-light);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-name {
            color: var(--gray-700);
            font-weight: 500;
        }

        .logout-btn {
            padding: 0.5rem 1rem;
            color: var(--white);
            background: var(--primary-color);
            border-radius: 0.375rem;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .logout-btn:hover {
            opacity: 0.9;
        }

        /* Main Content Styles */
        .main-content {
            margin-top: 4.5rem;
            padding: 2rem 1rem;
            flex: 1;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
        }

        /* Section Buttons */
        .section-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .section-btn {
            padding: 0.75rem 1.5rem;
            border: 1px solid var(--primary-color);
            background: white;
            color: var(--primary-color);
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .section-btn.active {
            background: var(--primary-color);
            color: white;
        }

        .section-content {
            display: none;
        }

        .section-content.active {
            display: block;
        }

        /* Form Header */
        .form-header {
            color: var(--gray-700);
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--gray-200);
        }

        /* Toggle Form Button */
        .toggle-form-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .toggle-form-btn:hover {
            opacity: 0.9;
        }

        /* Form Styles */
        .inline-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: none;
        }

        .form-row {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .form-control {
            flex: 1;
            min-width: 150px;
            padding: 8px 12px;
            border: 1px solid var(--gray-200);
            border-radius: 4px;
            font-size: 14px;
        }

        select.form-control {
            min-width: 120px;
            background: white;
        }

        .choice-textarea {
            min-height: 100px;
            resize: vertical;
            flex-basis: 100%;
        }

        .add-btn, .update-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            min-width: 80px;
        }

        /* Radio and Checkbox Styles */
        .radio-group {
            display: flex;
            gap: 20px;
            margin-bottom: 1rem;
            flex-basis: 100%;
        }

        .radio-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: var(--gray-700);
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: var(--gray-700);
        }

        .attributes-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
            margin-bottom: 1rem;
        }

        /* Combinations Styles */
        .combinations-grid {
            display: grid;
            gap: 15px;
            margin-top: 15px;
        }

        .combination-row {
            display: grid;
            grid-template-columns: 1fr 120px;
            gap: 10px;
            align-items: center;
            padding: 10px;
            background: var(--gray-50);
            border-radius: 4px;
        }

        .combination-name {
            color: var(--gray-700);
            font-size: 0.875rem;
        }

        .percentage-input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid var(--gray-300);
            border-radius: 4px;
            text-align: right;
        }

        .sum-display {
            text-align: right;
            margin-top: 10px;
            color: var(--gray-600);
            font-size: 0.875rem;
        }

        /* Table Styles */
        .users-table {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow-x: auto;
            margin-bottom: 1.5rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            text-align: left;
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-200);
        }

        th {
            background: var(--gray-50);
            color: var(--gray-600);
            font-weight: 500;
            white-space: nowrap;
            font-size: 0.875rem;
        }

        td {
            vertical-align: middle;
            color: var(--gray-600);
            font-size: 0.8125rem;
        }

        .choices-cell {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .choices-cell:hover {
            white-space: normal;
            word-wrap: break-word;
        }

        /* Badge Styles */
        .type-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .type-badge.single {
            background: var(--indigo-100);
            color: var(--indigo-700);
        }

        .type-badge.multiple {
            background: var(--emerald-100);
            color: var(--emerald-700);
        }

        .type-badge.combined {
            background: var(--purple-100);
            color: var(--purple-700);
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 8px;
        }

        .btn-edit, .btn-delete, .btn-update, .btn-cancel {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }

        .btn-edit {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .btn-update {
            background: var(--primary-color);
            color: white;
        }

        .btn-cancel {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .btn-delete {
            background: #fecaca;
            color: #dc2626;
        }

        /* Combinations Details Styles */
        .combinations-details {
            background: var(--gray-50);
            border-radius: 8px;
            margin: 10px 20px;
            padding: 15px;
        }

        .combinations-header {
            font-weight: 500;
            color: var(--gray-700);
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--gray-200);
        }

        .combinations-list {
            display: grid;
            gap: 8px;
        }

        .combination-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            background: white;
            border-radius: 4px;
        }

        .combination-item .name {
            color: var(--gray-600);
            font-size: 0.875rem;
            padding-right: 20px;
        }

        .combination-item .percentage {
            color: var(--gray-700);
            font-weight: 500;
            font-size: 0.875rem;
            font-family: monospace;
        }

        /* Statistic Check Table Specific Styles */
        .statistic-check-table th {
            text-align: center;  /* Center align headers */
            padding: 12px 16px;
            background: var(--gray-50);
        }

        .statistic-check-table th:first-child,
        .statistic-check-table th:nth-child(2) {
          text-align: left;  /* Keep first two column headers left-aligned */
        }

        .statistic-check-table td {
            padding: 12px 16px;
            vertical-align: middle;
            color: var(--gray-600);
            font-size: 0.8125rem;
        }

        .statistic-check-table td:first-child {
            /* Combination Name column */
            font-weight: 500;
            color: var(--gray-700);
            text-align: left;
        }

        .statistic-check-table td:nth-child(2),
        .statistic-check-table td:nth-child(3),
        .statistic-check-table td:nth-child(4),
        .statistic-check-table td:nth-child(5) {
            /* All data columns */
            color: var(--gray-600);
        }

        .statistic-check-table td:nth-child(3),
        .statistic-check-table td:nth-child(4),
        .statistic-check-table td:nth-child(5) {
            /* Percentage, Panel Percentage, and Deviation columns */
            text-align: center;
        }

        /* Footer */
        .footer {
            background: var(--white);
            padding: 1.5rem;
            text-align: center;
            color: var(--gray-600);
            border-top: 1px solid var(--gray-200);
            margin-top: 2rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .navbar-container {
                flex-direction: column;
                gap: 1rem;
            }

            .navbar-left {
                flex-direction: column;
                width: 100%;
            }

            .nav-links {
                flex-direction: column;
                width: 100%;
            }

            .nav-link {
                width: 100%;
                text-align: center;
            }

            .user-menu {
                width: 100%;
                flex-direction: column;
                gap: 0.5rem;
            }

            .header-container {
                flex-direction: column;
                align-items: stretch;
                gap: 1rem;
            }

            .header-right {
                justify-content: flex-start;
            }

            .section-buttons {
                flex-direction: column;
            }

            .section-btn {
                width: 100%;
                text-align: center;
            }

            .form-row {
                flex-direction: column;
            }

            .form-row .form-control {
                width: 100%;
            }

            .add-btn, .update-btn {
                width: 100%;
            }

            .combination-row {
                grid-template-columns: 1fr;
            }

            .export-btn {
                width: 100%;
                text-align: center;
            }

            /* Add to your existing CSS */
.statistic-check-table td {
    text-align: right;
}

.statistic-check-table td:first-child,
.statistic-check-table td:nth-child(2) {
    text-align: left;
}

/* Replace the previous deviation classes with these in base.php */
.deviation-negative-1 { 
    background-color: rgba(239, 68, 68, 0.1); /* Light red background */
    color: #991b1b;
}
.deviation-negative-2 { 
    background-color: rgba(220, 38, 38, 0.2); /* Medium red background */
    color: #991b1b;
}
.deviation-negative-3 { 
    background-color: rgba(153, 27, 27, 0.3); /* Dark red background */
    color: #991b1b;
}

.deviation-positive-1 { 
    background-color: rgba(34, 197, 94, 0.1); /* Light green background */
    color: #166534;
}
.deviation-positive-2 { 
    background-color: rgba(22, 163, 74, 0.2); /* Medium green background */
    color: #166534;
}
.deviation-positive-3 { 
    background-color: rgba(22, 101, 52, 0.3); /* Dark green background */
    color: #166534;
}

/* Add this to make the deviation cells rounded */
.deviation-cell {
    border-radius: 4px;
    padding: 4px 8px !important;
    text-align: center !important;
    font-weight: 500;
}

.statistic-check-table th {
    white-space: nowrap;
}
            
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container">
            <div class="navbar-left">
                <a href="dashboard.php" class="logo"><?php echo APP_NAME; ?></a>
                <div class="nav-links">
                    <a href="dashboard.php" class="nav-link">Dashboard</a>
                    <a href="users.php" class="nav-link">Users</a>
                    <a href="base.php" class="nav-link active">Base</a>
                    <a href="panel.php" class="nav-link">Panel</a>
                    <a href="surveys.php" class="nav-link">Surveys</a>
                    <a href="projects.php" class="nav-link">Projects</a>
                </div>
            </div>
            <div class="user-menu">
                <span class="user-name"><?php echo htmlspecialchars($currentUser['full_name']); ?></span>
                <a href="logout.php" class="logout-btn">Logout</a>
            </div>
        </div>
    </nav>

    <main class="main-content">
        <div class="container">
            <div class="section-buttons">
                <button onclick="switchSection('attributes')" class="section-btn <?php echo $activeSection === 'attributes' ? 'active' : ''; ?>" id="attributesBtn">Attributes</button>
                <button onclick="switchSection('statistics')" class="section-btn <?php echo $activeSection === 'statistics' ? 'active' : ''; ?>" id="statisticsBtn">Statistics</button>
                <button onclick="switchSection('statisticCheck')" class="section-btn <?php echo $activeSection === 'statisticCheck' ? 'active' : ''; ?>" id="statisticCheckBtn">Statistic Check</button>
            </div>

            <!-- Notification Container -->
            <div class="notification-container"></div>

            <!-- Attributes Section -->
            <div id="attributesSection" class="section-content <?php echo $activeSection === 'attributes' ? 'active' : ''; ?>">
                <div class="header-container">
                    <div class="header-left">
                        <button onclick="toggleAttributeForm()" class="toggle-form-btn">Add New Attribute</button>
                    </div>
                </div>
                
                <form id="attributeForm" method="POST" onsubmit="return validateAttributeForm(this)" class="inline-form">
                    <input type="hidden" name="action" value="create_attribute">
                    <div class="form-row">
                        <input type="text" name="attribute_name" class="form-control" placeholder="Attribute Name" required>
                        <select name="choice_type" class="form-control" required>
                            <option value="">Select Choice Type</option>
                            <option value="single">Single Choice</option>
                            <option value="multiple">Multiple Choice</option>
                        </select>
                        <textarea name="choices" class="form-control choice-textarea" placeholder="Enter choices (one per line)" required></textarea>
                        <button type="submit" class="add-btn">Add</button>
                    </div>
                </form>

                <div class="users-table">
                    <table>
                        <thead>
                            <tr>
                                <th>Attribute Name</th>
                                <th>Choice Type</th>
                                <th>Choices</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if ($attributes && $attributes->num_rows > 0): ?>
                                <?php while ($attr = $attributes->fetch_assoc()): ?>
                                    <tr id="attribute-<?php echo $attr['id']; ?>">
                                        <td><?php echo htmlspecialchars($attr['name']); ?></td>
                                        <td>
                                            <span class="type-badge <?php echo $attr['choice_type']; ?>">
                                                <?php echo ucfirst($attr['choice_type']); ?> Choice
                                            </span>
                                        </td>
                                        <td class="choices-cell"><?php echo htmlspecialchars(implode(", ", json_decode($attr['choices'], true))); ?></td>
                                        <td><?php echo $attr['created_date']; ?></td>
                                        <td>
                                            <div class="action-buttons">
                                                <button class="btn-edit" onclick="editAttribute(<?php echo $attr['id']; ?>)">Edit</button>
                                                <button class="btn-delete" onclick="deleteAttribute(<?php echo $attr['id']; ?>, '<?php echo htmlspecialchars($attr['name']); ?>')">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endwhile; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="5" style="text-align: center;">No attributes found</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Statistics Section -->
            <div id="statisticsSection" class="section-content <?php echo $activeSection === 'statistics' ? 'active' : ''; ?>">
                <div class="header-container">
                    <div class="header-left">
                        <button onclick="toggleStatisticsForm()" class="toggle-form-btn">Add New Statistics</button>
                    </div>
                    <div class="header-right">
                        <a href="base.php?action=export" class="export-btn">Export Statistics</a>
                    </div>
                </div>

                <form id="statisticsForm" method="POST" onsubmit="return validateStatisticsForm(this)" class="inline-form">
                    <div id="formHeader" class="form-header">Create New Statistics</div>
                    <input type="hidden" name="action" value="create_statistics">
                    <div class="form-row">
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" name="statistics_type" value="single" checked onchange="handleStatisticsTypeChange(this)"> 
                                Single
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="statistics_type" value="combined" onchange="handleStatisticsTypeChange(this)"> 
                                Combined
                            </label>
                        </div>

                        <!-- Single Attribute Selection -->
                        <div id="singleAttributeSection" class="form-section">
                            <select name="single_attribute" class="form-control" onchange="handleSingleAttributeSelect(this)">
                                <option value="">Select Attribute</option>
                                <?php 
                                $attributes->data_seek(0);
                                while ($attr = $attributes->fetch_assoc()): 
                                ?>
                                <option value="<?php echo $attr['id']; ?>" 
                                        data-type="<?php echo $attr['choice_type']; ?>"
                                        data-choices='<?php echo $attr['choices']; ?>'>
                                    <?php echo htmlspecialchars($attr['name']); ?>
                                </option>
                                <?php endwhile; ?>
                            </select>
                        </div>

                        <!-- Combined Attributes Selection -->
                        <div id="combinedAttributesSection" class="form-section" style="display: none;">
                            <div class="attributes-list">
                                <?php 
                                $attributes->data_seek(0);
                                while ($attr = $attributes->fetch_assoc()): 
                                ?>
                                <label class="checkbox-label">
                                    <input type="checkbox" name="combined_attributes[]" 
                                           value="<?php echo $attr['id']; ?>"
                                           data-type="<?php echo $attr['choice_type']; ?>"
                                           data-choices='<?php echo $attr['choices']; ?>'
                                           onchange="handleCombinedAttributesChange()">
                                    <?php echo htmlspecialchars($attr['name']); ?>
                                </label>
                                <?php endwhile; ?>
                            </div>
                        </div>

                        <!-- Combinations Section -->
                        <div id="combinationsSection" class="form-section">
                            <!-- Will be populated dynamically -->
                        </div>

                        <button type="submit" class="add-btn" id="statisticsSubmitBtn">Add Statistics</button>
                    </div>
                </form>

                <div class="users-table">
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Attributes</th>
                                <th>Combinations</th>
                                <th>Sum</th>
                                <th>Created</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if ($statistics && $statistics->num_rows > 0): ?>
                                <?php while ($stat = $statistics->fetch_assoc()): ?>
                                    <tr id="statistic-<?php echo $stat['id']; ?>" class="expandable-row" onclick="toggleCombinations(<?php echo $stat['id']; ?>, this)">
                                        <td><?php echo htmlspecialchars($stat['name']); ?></td>
                                        <td>
                                            <span class="type-badge <?php echo $stat['type']; ?>">
                                                <?php echo ucfirst($stat['type']); ?>
                                            </span>
                                        </td>
                                        <td><?php echo $stat['attribute_count']; ?></td>
                                        <td><?php echo $stat['combination_count']; ?></td>
                                        <td><?php echo $stat['sum_type']; ?></td>
                                        <td><?php echo $stat['created_date']; ?></td>
                                        <td>
                                            <div class="action-buttons">
                                                <button class="btn-edit" onclick="editStatistic(event, <?php echo $stat['id']; ?>)">Edit</button>
                                                <button class="btn-delete" onclick="deleteStatistic(event, <?php echo $stat['id']; ?>, '<?php echo htmlspecialchars($stat['name']); ?>')">Delete</button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="combinations-row-<?php echo $stat['id']; ?>" style="display: none;">
                                        <td colspan="7">
                                            <div class="combinations-details" id="combinations-details-<?php echo $stat['id']; ?>">
                                                <div class="combinations-header">Combinations and Percentages</div>
                                                <div class="combinations-list">
                                                    <!-- Will be populated dynamically -->
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endwhile; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="7" style="text-align: center;">No statistics found</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Statistic Check Section -->
            <div id="statisticCheckSection" class="section-content <?php echo $activeSection === 'statisticCheck' ? 'active' : ''; ?>">
                <div class="users-table statistic-check-table">
    <table>
        <thead>
            <tr>
                <th>Combination Name</th>
                <th>Combination</th>
                <th>Target %</th>
                <th>Panel %</th>
                <th>Deviation</th>
            </tr>
        </thead>
        <tbody>
            <?php if ($allCombinations && $allCombinations->num_rows > 0): ?>
                <?php while ($combo = $allCombinations->fetch_assoc()): ?>
                    <?php 
                        $target_percentage = floatval($combo['target_percentage']);
                        $panel_percentage = floatval($combo['panel_percentage']);
                        
                        // Calculate deviation percentage
                        $deviation = $target_percentage > 0 ? 
                            (($panel_percentage - $target_percentage) / $target_percentage) * 100 : 
                            0;
                        
                        // Determine class for deviation
                        $deviationClass = abs($deviation) > 10 ? 'high-deviation' : 
                                        (abs($deviation) > 5 ? 'medium-deviation' : 'low-deviation');
                    ?>
                    <tr>
                        <td><?php echo htmlspecialchars($combo['statistic_name']); ?></td>
                        <td><?php 
                            $values = json_decode($combo['combination_values'], true);
                            echo htmlspecialchars(implode(' × ', $values));
                        ?></td>
                        <td><?php echo number_format($target_percentage, 2); ?>%</td>
                        <td><?php echo number_format($panel_percentage, 2); ?>%</td>
                        <td class="deviation-cell <?php echo $deviationClass; ?>">
    <?php 
        $sign = $deviation > 0 ? '+' : '';
        echo $sign . number_format($deviation, 2) . '%'; 
    ?>
</td>
                    </tr>
                <?php endwhile; ?>
            <?php else: ?>
                <tr>
                    <td colspan="5" style="text-align: center;">No combinations found</td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <?php echo APP_NAME; ?> - All Rights Reserved
    </footer>
    <script>
        // Notification Function
        function showNotification(message, type = 'success') {
            const container = document.querySelector('.notification-container');
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            
            const icon = type === 'success' ? '✓' : '✕';
            
            notification.innerHTML = `
                <span class="notification-icon">${icon}</span>
                <span class="notification-message">${message}</span>
            `;
            
            container.appendChild(notification);
            
            // Trigger reflow for animation
            notification.offsetHeight;
            
            // Show notification
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);
            
            // Remove notification after delay
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
        }

        // Section Switching with URL parameter update
        function switchSection(section) {
            document.getElementById('attributesBtn').classList.remove('active');
            document.getElementById('statisticsBtn').classList.remove('active');
            document.getElementById('statisticCheckBtn').classList.remove('active');
            document.getElementById(section + 'Btn').classList.add('active');
            
            document.getElementById('attributesSection').classList.remove('active');
            document.getElementById('statisticsSection').classList.remove('active');
            document.getElementById('statisticCheckSection').classList.remove('active');
            document.getElementById(section + 'Section').classList.add('active');

            // Update URL without reloading page
            const url = new URL(window.location);
            url.searchParams.set('section', section);
            window.history.pushState({}, '', url);
        }

        // Handle browser back/forward buttons
        window.onpopstate = function(event) {
            const params = new URLSearchParams(window.location.search);
            const section = params.get('section') || 'attributes';
            switchSection(section);
        };

        // Attributes Functions
        function toggleAttributeForm() {
            const form = document.getElementById('attributeForm');
            if (form.style.display === 'none') {
                form.style.display = 'block';
                form.reset();
            } else {
                form.style.display = 'none';
            }
        }

        function editAttribute(attributeId) {
            const row = document.getElementById('attribute-' + attributeId);
            const cells = row.getElementsByTagName('td');
            
            row.setAttribute('data-original', row.innerHTML);
            
            const name = cells[0].textContent.trim();
            const type = cells[1].querySelector('.type-badge').textContent.trim().toLowerCase().includes('single') ? 'single' : 'multiple';
            const choices = cells[2].textContent.trim().split(', ').join('\n');
            
            cells[0].innerHTML = `<input type="text" class="form-control" value="${name}" name="attribute_name">`;
            cells[1].innerHTML = `
                <select class="form-control" name="choice_type">
                    <option value="single" ${type === 'single' ? 'selected' : ''}>Single Choice</option>
                    <option value="multiple" ${type === 'multiple' ? 'selected' : ''}>Multiple Choice</option>
                </select>
            `;
            cells[2].innerHTML = `<textarea class="form-control choice-textarea" name="choices">${choices}</textarea>`;
            cells[4].innerHTML = `
                <div class="action-buttons">
                    <button class="btn-update" onclick="updateAttribute(${attributeId})">Update</button>
                    <button class="btn-cancel" onclick="cancelEdit(${attributeId})">Cancel</button>
                </div>
            `;
        }

        function updateAttribute(attributeId) {
            const row = document.getElementById('attribute-' + attributeId);
            const formData = new FormData();
            
            formData.append('action', 'update_attribute');
            formData.append('attribute_id', attributeId);
            formData.append('attribute_name', row.querySelector('[name="attribute_name"]').value);
            formData.append('choice_type', row.querySelector('[name="choice_type"]').value);
            formData.append('choices', row.querySelector('[name="choices"]').value);

            submitForm(formData);
        }

        function cancelEdit(attributeId) {
            const row = document.getElementById('attribute-' + attributeId);
            row.innerHTML = row.getAttribute('data-original');
        }

        function deleteAttribute(attributeId, name) {
            if (confirm(`Are you sure you want to delete attribute: ${name}?`)) {
                const formData = new FormData();
                formData.append('action', 'delete_attribute');
                formData.append('attribute_id', attributeId);
                submitForm(formData);
            }
        }

        // Statistics Functions
        let activeStatisticRow = null;

        function toggleStatisticsForm() {
            const form = document.getElementById('statisticsForm');
            if (form.style.display === 'none') {
                form.style.display = 'block';
                form.reset();
                resetStatisticsForm();
            } else {
                form.style.display = 'none';
            }
        }

        function resetStatisticsForm() {
            const form = document.getElementById('statisticsForm');
            form.querySelector('input[name="action"]').value = 'create_statistics';
            form.querySelector('#formHeader').textContent = 'Create New Statistics';
            form.querySelector('#statisticsSubmitBtn').textContent = 'Add Statistics';
            
            document.getElementById('combinationsSection').style.display = 'none';
            document.getElementById('singleAttributeSection').style.display = 'block';
            document.getElementById('combinedAttributesSection').style.display = 'none';

            // Reset all inputs
            form.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
            form.querySelector('input[type="radio"][value="single"]').checked = true;
            form.querySelector('select[name="single_attribute"]').value = '';

            // Remove any existing statistic_id input
            const existingIdInput = form.querySelector('input[name="statistic_id"]');
            if (existingIdInput) {
                existingIdInput.remove();
            }
        }

        function toggleCombinations(statisticId, row) {
            // Prevent triggering when clicking action buttons
            if (event.target.closest('.action-buttons')) {
                return;
            }

            const combinationsRow = document.getElementById(`combinations-row-${statisticId}`);
            const detailsDiv = document.getElementById(`combinations-details-${statisticId}`);

            // Remove selected class from previous row
            if (activeStatisticRow && activeStatisticRow !== row) {
                activeStatisticRow.classList.remove('selected');
                const prevCombinationsRow = document.getElementById(`combinations-row-${activeStatisticRow.getAttribute('id').split('-')[1]}`);
                if (prevCombinationsRow) {
                    prevCombinationsRow.style.display = 'none';
                }
            }

            // Toggle current row
            if (combinationsRow.style.display === 'none') {
                row.classList.add('selected');
                combinationsRow.style.display = 'table-row';
                activeStatisticRow = row;
                fetchCombinations(statisticId);
            } else {
                row.classList.remove('selected');
                combinationsRow.style.display = 'none';
                activeStatisticRow = null;
            }
        }

        function fetchCombinations(statisticId) {
            const detailsDiv = document.getElementById(`combinations-details-${statisticId}`);
            const listDiv = detailsDiv.querySelector('.combinations-list');
            
            // Show loading state
            listDiv.innerHTML = 'Loading combinations...';

            fetch(`base.php?action=getCombinations&id=${statisticId}`)
                .then(response => response.json())
                .then(data => {
                    listDiv.innerHTML = '';
                    data.combinations.forEach(combo => {
                        listDiv.innerHTML += `
                            <div class="combination-item">
                                <span class="name">${combo.combination}</span>
                                <span class="percentage">${combo.percentage}%</span>
                            </div>
                        `;
                    });
                })
                .catch(error => {
                    listDiv.innerHTML = 'Error loading combinations';
                    console.error('Error:', error);
                });
        }

        function handleStatisticsTypeChange(radio) {
            const singleSection = document.getElementById('singleAttributeSection');
            const combinedSection = document.getElementById('combinedAttributesSection');
            const combinationsSection = document.getElementById('combinationsSection');
            
            if (radio.value === 'single') {
                singleSection.style.display = 'block';
                combinedSection.style.display = 'none';
            } else {
                singleSection.style.display = 'none';
                combinedSection.style.display = 'block';
            }
            
            combinationsSection.style.display = 'none';
            combinationsSection.innerHTML = '';
        }

        function handleSingleAttributeSelect(select) {
            if (!select.value) {
                document.getElementById('combinationsSection').style.display = 'none';
                return;
            }
            
            const option = select.options[select.selectedIndex];
            const choices = JSON.parse(option.dataset.choices);
            const type = option.dataset.type;
            
            generateCombinationsForm([choices].flat(), type === 'multiple');
        }

        function handleCombinedAttributesChange() {
            const checkboxes = document.querySelectorAll('input[name="combined_attributes[]"]:checked');
            if (checkboxes.length < 2) {
                document.getElementById('combinationsSection').style.display = 'none';
                return;
            }
            
            const attributes = Array.from(checkboxes).map(cb => ({
                id: cb.value,
                choices: JSON.parse(cb.dataset.choices),
                type: cb.dataset.type
            }));
            
            const combinations = generateCombinations(attributes);
            const hasMultiple = attributes.some(attr => attr.type === 'multiple');
            
            generateCombinationsForm(combinations, hasMultiple);
        }

        function generateCombinations(attributes) {
            let result = attributes[0].choices.map(choice => ([choice]));
            
            for (let i = 1; i < attributes.length; i++) {
                const temp = [];
                for (const combo of result) {
                    for (const choice of attributes[i].choices) {
                        temp.push([...combo, choice]);
                    }
                }
                result = temp;
            }
            
            return result;
        }

        function generateCombinationsForm(combinations, isMultiple) {
            const section = document.getElementById('combinationsSection');
            section.style.display = 'block';
            
            let html = '<div class="combinations-grid">';
            combinations.forEach((combo, index) => {
                const comboName = Array.isArray(combo) ? combo.join(' × ') : combo;
                html += `
                    <div class="combination-row">
                        <div class="combination-name">${comboName}</div>
                        <input type="number" 
                               class="percentage-input" 
                               min="0" 
                               max="100" 
                               step="0.0001" 
                               required
                               onchange="updateSum()"
                               data-combination='${JSON.stringify(Array.isArray(combo) ? combo : [combo])}'>
                    </div>
                `;
            });
            html += `</div>
                <div class="sum-display">
                    Total: <span id="totalSum">0</span>% 
                    ${isMultiple ? '(can exceed 100%)' : '(must equal 100%)'}
                </div>`;
            
            section.innerHTML = html;
            updateSum();
        }

        function updateSum() {
            const inputs = document.querySelectorAll('.percentage-input');
            const sum = Array.from(inputs)
                .reduce((total, input) => total + (parseFloat(input.value) || 0), 0);
            
            document.getElementById('totalSum').textContent = sum.toFixed(4);
        }

        function editStatistic(event, statisticId) {
            event.stopPropagation(); // Prevent row expansion when clicking edit
            
            // Fetch the statistic data
            fetch(`base.php?action=getCombinations&id=${statisticId}`)
                .then(response => response.json())
                .then(data => {
                    const stat = data.statistic;
                    const combinations = data.combinations;
                    
                    // Show and prepare the form
                    const form = document.getElementById('statisticsForm');
                    form.style.display = 'block';
                    form.querySelector('#formHeader').textContent = `Edit Statistics: ${stat.name}`;
                    form.querySelector('input[name="action"]').value = 'update_statistics';
                    form.querySelector('#statisticsSubmitBtn').textContent = 'Update Statistics';
                    
                    // Set type and show appropriate sections
                    const typeRadio = form.querySelector(`input[name="statistics_type"][value="${stat.type}"]`);
                    typeRadio.checked = true;
                    handleStatisticsTypeChange(typeRadio);

                    if (stat.type === 'single') {
                        // Set single attribute
                        const attributeId = stat.attribute_ids.split(',')[0];
                        const select = form.querySelector('select[name="single_attribute"]');
                        select.value = attributeId;
                        handleSingleAttributeSelect(select);
                    } else {
                        // Set combined attributes
                        const attributeIds = stat.attribute_ids.split(',');
                        form.querySelectorAll('input[name="combined_attributes[]"]').forEach(cb => {
                            cb.checked = attributeIds.includes(cb.value);
                        });
                        handleCombinedAttributesChange();
                    }

                    // Create hidden input for statistic ID
                    let idInput = form.querySelector('input[name="statistic_id"]');
                    if (!idInput) {
                        idInput = document.createElement('input');
                        idInput.type = 'hidden';
                        idInput.name = 'statistic_id';
                    }
                    idInput.value = statisticId;
                    form.appendChild(idInput);
                    
                    // Set the percentages
                    const inputs = form.querySelectorAll('.percentage-input');
                    combinations.forEach((combo, index) => {
                        inputs[index].value = parseFloat(combo.percentage).toFixed(4);
                    });
                    
                    updateSum();

                    // Scroll to form
                    form.scrollIntoView({ behavior: 'smooth' });
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('Error loading statistic data', 'error');
                });
        }

        function deleteStatistic(event, statisticId, name) {
            event.stopPropagation(); // Prevent row expansion when clicking delete
            
            if (confirm(`Are you sure you want to delete statistic: ${name}?`)) {
                const formData = new FormData();
                formData.append('action', 'delete_statistics');
                formData.append('statistic_id', statisticId);
                submitForm(formData);
            }
        }
        function validateStatisticsForm(form) {
            const type = form.querySelector('input[name="statistics_type"]:checked').value;
            const inputs = form.querySelectorAll('.percentage-input');
            const sum = Array.from(inputs)
                .reduce((total, input) => total + (parseFloat(input.value) || 0), 0);
            
            if (type === 'single') {
                const attribute = form.querySelector('[name="single_attribute"]');
                if (!attribute.value) {
                    alert('Please select an attribute');
                    return false;
                }
                
                const isMultiple = attribute.options[attribute.selectedIndex].dataset.type === 'multiple';
                if (!isMultiple && Math.abs(sum - 100) > 0.0001) {
                    alert('Total percentage must equal 100%');
                    return false;
                }
            } else {
                const selected = form.querySelectorAll('input[name="combined_attributes[]"]:checked');
                if (selected.length < 2) {
                    alert('Please select at least 2 attributes');
                    return false;
                }
                
                const hasMultiple = Array.from(selected)
                    .some(cb => cb.dataset.type === 'multiple');
                if (!hasMultiple && Math.abs(sum - 100) > 0.0001) {
                    alert('Total percentage must equal 100%');
                    return false;
                }
            }
            
            // Collect combinations data
            const combinations = Array.from(inputs).map(input => ({
                values: JSON.parse(input.dataset.combination),
                percentage: parseFloat(input.value) || 0
            }));
            
            const combinationsInput = document.createElement('input');
            combinationsInput.type = 'hidden';
            combinationsInput.name = 'combinations';
            combinationsInput.value = JSON.stringify(combinations);
            form.appendChild(combinationsInput);
            
            return true;
        }

        // Utility function for form submission
        function submitForm(formData) {
            const form = document.createElement('form');
            form.method = 'POST';
            for (const [key, value] of formData.entries()) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = value;
                form.appendChild(input);
            }
            document.body.appendChild(form);
            form.submit();
        }

        // Initialize notifications and handle section from URL on page load
        document.addEventListener('DOMContentLoaded', function() {
            <?php if ($success): ?>
                showNotification('<?php echo addslashes($success); ?>', 'success');
            <?php endif; ?>

            <?php if ($error): ?>
                showNotification('<?php echo addslashes($error); ?>', 'error');
            <?php endif; ?>

            // Handle deep linking to specific section
            const params = new URLSearchParams(window.location.search);
            const section = params.get('section');
            if (section) {
                switchSection(section);
            }
        });
    </script>
</body>
</html>