<div>
    <h3 class="text-xl font-bold mb-6">Financial Dashboard</h3>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <div class="bg-gray-50 p-6 rounded-lg border">
            <h4 class="font-bold mb-4 text-center">Revenue vs Budget vs Actual</h4>
            <canvas id="budgetChart" height="200"></canvas>
        </div>
        <div class="bg-gray-50 p-6 rounded-lg border">
            <h4 class="font-bold mb-4 text-center">Profitability Margin</h4>
            <canvas id="marginChart" height="200"></canvas>
            <div class="text-center mt-4 text-2xl font-bold <?= ($profitability['is_profitable'] ?? false) ? 'text-green-600' : 'text-red-600' ?>">
                <?= number_format($profitability['margin'] ?? 0, 2) ?>%
                <span class="block text-sm font-normal text-gray-500"><?= ($profitability['is_profitable'] ?? false) ? 'Profitable' : 'Not Profitable' ?></span>
            </div>
        </div>
    </div>

    <h4 class="font-bold mb-4 text-lg">Budget Items</h4>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white border">
            <thead class="bg-gray-100 border-b">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Category</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Item</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Qty</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Rate</th>
                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
                </tr>
            </thead>
            <tbody class="divide-y">
                <?php if (!empty($finance['items'])): ?>
                    <?php foreach ($finance['items'] as $item): ?>
                    <tr>
                        <td class="px-4 py-2"><?= htmlspecialchars($item['category']) ?></td>
                        <td class="px-4 py-2"><?= htmlspecialchars($item['item_name']) ?></td>
                        <td class="px-4 py-2 text-right"><?= htmlspecialchars($item['quantity']) ?> <?= htmlspecialchars($item['unit']) ?></td>
                        <td class="px-4 py-2 text-right"><?= number_format((float)$item['unit_rate'], 2) ?></td>
                        <td class="px-4 py-2 text-right font-medium"><?= number_format((float)$item['total_budget'], 2) ?></td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr><td colspan="5" class="px-4 py-4 text-center text-gray-500">No financial data available.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof Chart === 'undefined') return;
    const ctx = document.getElementById('budgetChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Revenue', 'Budget', 'Actual'],
            datasets: [{
                label: 'Amount',
                data: [
                    <?= (float)($profitability['revenue'] ?? 0) ?>,
                    <?= (float)($profitability['budget'] ?? 0) ?>,
                    <?= (float)($profitability['actual'] ?? 0) ?>
                ],
                backgroundColor: ['rgba(79, 70, 229, 0.6)', 'rgba(59, 130, 246, 0.6)', 'rgba(16, 185, 129, 0.6)'],
                borderColor: ['rgb(79, 70, 229)', 'rgb(59, 130, 246)', 'rgb(16, 185, 129)'],
                borderWidth: 1
            }]
        },
        options: { scales: { y: { beginAtZero: true } } }
    });

    const margin = <?= (float)($profitability['margin'] ?? 0) ?>;
    const ctx2 = document.getElementById('marginChart').getContext('2d');
    new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ['Margin', 'Remainder'],
            datasets: [{
                data: [Math.max(margin, 0), Math.max(100 - margin, 0)],
                backgroundColor: ['rgba(16, 185, 129, 0.8)', 'rgba(229, 231, 235, 1)'],
                borderWidth: 0
            }]
        },
        options: { cutout: '75%', plugins: { legend: { display: false } } }
    });
});
</script>
