@php $layout = auth()->user()->role === 'super_admin' ? 'layouts.admin' : 'component4.layouts.app'; @endphp
@extends($layout)
@section('content')
<div class="container-fluid px-4 py-3">
    <h4>Stakeholder Engagement Report & Visualization</h4>

    <div class="row mb-5">
        <!-- Category Breakdown -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">Engagements by Category</div>
                <div class="card-body"><canvas id="categoryChart" height="300"></canvas></div>
            </div>
        </div>
        <!-- By Component -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">Engagements by Component</div>
                <div class="card-body"><canvas id="componentChart" height="300"></canvas></div>
            </div>
        </div>
        <!-- Gender -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">Gender Distribution</div>
                <div class="card-body"><canvas id="genderChart" height="300"></canvas></div>
            </div>
        </div>
        <!-- State -->
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">Engagements by State</div>
                <div class="card-body"><canvas id="stateChart" height="300"></canvas></div>
            </div>
        </div>
    </div>

    <a href="{{ route('component4.stakeholders.index') }}" class="btn btn-secondary">← Back to Register</a>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const catData = @json($stats['by_category']);
new Chart(document.getElementById('categoryChart'), { type: 'bar', data: { labels: Object.keys(catData), datasets: [{ label: 'Count', data: Object.values(catData), backgroundColor: '#006400' }] } });

const compData = @json($stats['by_component'] ?? []);
new Chart(document.getElementById('componentChart'), { type: 'doughnut', data: { labels: Object.keys(compData), datasets: [{ data: Object.values(compData), backgroundColor: ['#006400','#087f23','#4caf50'] }] } });

new Chart(document.getElementById('genderChart'), { type: 'pie', data: { labels: ['Female','Male'], datasets: [{ data: [{{$stats['total_female']}}, {{$stats['total_male']}}], backgroundColor: ['#d81b60','#1976d2'] }] } });
</script>
@endpush