<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style> 
    #chart-wrapper {
        max-width: 100%;
        margin: 35px auto;
        overflow-x: scroll; /* Enable horizontal scrolling */
    }

    #chart {
        width: 10000px; /* Increased width for better spacing */
        height: 380px;
        background-color: #1a1d20;
        color: white;
    }
</style>
<body style="background-color:#1a1d20">
    <div id="chart-wrapper">
        <div id="chart"></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<?php
// Example PHP code to fetch data from MySQL
include "database/database.php";
include "database/data.php";

// Assuming $sell_data and $connection are defined in included files

// Query to fetch data
$sql = "SELECT product_name, SUM(qty) AS total_sell FROM ".$sell_data." GROUP BY product_name ORDER BY total_sell DESC";
$result = $connection->query($sql);

// Prepare data array
$data = array();
if ($result && $result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $data[] = array(
      'x' => $row['product_name'],
      'y' => (int)$row['total_sell']
    );
  }
}
?>
<script>
var phpData = <?php echo json_encode($data); ?>; // Embed PHP data as a JavaScript variable

var options = {
    chart: {
        height: 380,
        width: "100%",
        type: "area",
        animations: {
            initialAnimation: {
                enabled: false
            },
            foreColor: '#ffffff' // Set default font color to white
        },
        background: '#000000', // Set background color to black
    },
    series: [
        {
            name: "Series 1",
            data: phpData // Use the PHP data here
        }
    ],
    xaxis: {
        type: "category",
        labels: {
            style: {
                colors: '#ffffff' // Set x-axis labels to white
            },
            rotate: -45, // Rotate labels to prevent overlap
            hideOverlappingLabels: true // Hide labels that overlap
        }
    },
    yaxis: {
        labels: {
            style: {
                colors: '#ffffff' // Set y-axis labels to white
            }
        }
    },
    tooltip: {
        theme: 'dark' // Set tooltip theme to dark (white text on black)
    },
    title: {
        text: 'Product Sales',
        style: {
            color: '#ffffff' // Set title color to white
        }
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
</script>
</html>
