<?php
// Include the database connection
include 'db_connection.php';

// Fetch financial data
$query_income = "SELECT SUM(amount) as total_income FROM income";
$result_income = $conn->query($query_income);
$income = $result_income->fetch_assoc();
$total_income = $income['total_income'];

$query_expenses = "SELECT SUM(amount) as total_expenses FROM expenses";
$result_expenses = $conn->query($query_expenses);
$expenses = $result_expenses->fetch_assoc();
$total_expenses = $expenses['total_expenses'];

$profit_loss = $total_income - $total_expenses;

// Fetch data for charts or more detailed analysis
// ...
// Pie chart data
        $chart_data = [
            'labels' => ['Total Income', 'Total Expenses'],
            'data' => [$total_income, $total_expenses],
            'colors' => ['#36a2eb', '#ff6384']
        ];
?>

<!DOCTYPE html>
<html>
<head>
    <title>Financial Analysis</title>
    <link rel="stylesheet" type="text/css" href="#">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <style type="text/css">
        /* General Styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Card Styles */
.card {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.card h3, .card h4 {
    margin: 0 0 10px;
    color: #555;
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form label {
    margin: 10px 0 5px;
    font-weight: bold;
    color: #333;
}

form input[type="text"] {
    padding: 10px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #45a049;
}

/* Chart Styles */
canvas {
    margin: 20px auto;
    display: block;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    form input[type="text"] {
        width: 100%;
    }
}

    </style>
</head>
<body>
    <div class="container">
        <h2>Financial Performance Analysis</h2>
        <div class="card">
            <h3>Total Income: <?php echo $total_income; ?></h3>
        </div>
        <div class="card">
            <h3>Total Expenses: <?php echo $total_expenses; ?></h3>
        </div>
        <div class="card">
            <h3>Profit/Loss: <?php echo $profit_loss; ?></h3>
        </div>

        <!-- Example of a bar chart -->
        <canvas id="financialChart" width="400" height="200"></canvas>
        <script>
            var ctx = document.getElementById('financialChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Total Income', 'Total Expenses'],
                    datasets: [{
                        label: 'Amount',
                        data: [<?php echo $total_income; ?>, <?php echo $total_expenses; ?>],
                        backgroundColor: ['#4CAF50', '#F44336']
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        </script>
        
       
    </div>
</body>
</html>
