@extends('c3.layout')

@section('content')
<h2 class="mb-4">Component 3 Dashboard</h2>

<div class="row g-3 mb-5">
    <div class="col-md-3">
        <div class="card card-stat h-100 text-center p-3">
            <h5>Total Calls</h5>
            <h2>{{ $totalCalls }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-stat h-100 text-center p-3">
            <h5>GBV Cases</h5>
            <h2>{{ $totalCases }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-stat h-100 text-center p-3">
            <h5>Prevention Reach</h5>
            <h2>{{ $totalPrevention }}</h2>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card card-stat h-100 text-center p-3">
            <h5>Satisfied Survivors</h5>
            <h2>{{ $satisfied }}</h2>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">GBV Types Reported</div>
            <div class="card-body">
                <canvas id="gbvChart" height="180"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Prevention Activities</div>
            <div class="card-body">
                <canvas id="preventionChart" height="180"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    new Chart(document.getElementById('gbvChart'), {
        type: 'bar',
        data: {
            labels: ['Rape', 'Denial of Resources', 'Psychological Abuse', 'Wife Beating', 'Child Marriage'],
            datasets: [{ label: 'Cases', data: {{ json_encode($gbvCounts) }}, backgroundColor: '#198754' }]
        },
        options: { responsive: true, scales: { y: { beginAtZero: true } } }
    });

    new Chart(document.getElementById('preventionChart'), {
        type: 'doughnut',
        data: {
            labels: ['Prevention Messages', 'Referral Pathways', 'Male Engagement', 'IEC Materials'],
            datasets: [{ data: {{ json_encode($preventionCounts) }}, backgroundColor: ['#198754','#28a745','#34d399','#4ade80'] }]
        }
    });
</script>
@endsection