@extends('layouts.app')

@section('content')

<div class="container mt-4">

<h3>📊 Funding Analytics</h3>

<h5 class="mt-4">🌍 Funding by Country</h5>
<canvas id="countryChart"></canvas>

<h5 class="mt-5">🏭 Funding by Sector</h5>
<canvas id="sectorChart"></canvas>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
let countries = @json($countries);
let sectors = @json($sectors);

// COUNTRY
new Chart(document.getElementById('countryChart'), {
    type: 'bar',
    data: {
        labels: Object.keys(countries),
        datasets: [{
            data: Object.values(countries)
        }]
    }
});

// SECTOR
new Chart(document.getElementById('sectorChart'), {
    type: 'bar',
    data: {
        labels: Object.keys(sectors),
        datasets: [{
            data: Object.values(sectors)
        }]
    }
});
</script>

@endsection