@extends('layouts.app')

@section('content')
    <div class="container">
        <h2>Feedback Analytics/ {{$feedback_name}}</h2>

        <div class="row">
            <div class="col-md-6">
                <!-- Pie Chart for question_org_id = 1 (Yes/No) -->
                <canvas id="yesNoChart" width="180" height="150"></canvas>
            </div>
            <div class="col-md-6">
                <!-- Bar Chart for question_org_id = 2 (Rating) -->
                <canvas id="ratingChart" width="400" height="400"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Data for Pie Chart
        var yesNoData = @json($yesNoData);

        // Data for Bar Chart
        var ratingData = @json($ratingData);

        // Create Pie Chart
        var ctx1 = document.getElementById('yesNoChart').getContext('2d');
        var yesNoChart = new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: ['Yes', 'No'],
                datasets: [{
                    data: [yesNoData.filter(data => data.answer === 'Yes').length, yesNoData.filter(data => data.answer === 'No').length],
                    backgroundColor: ['green', 'red'],
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: "Participants' satisfaction with the training",
                    },
                },
            },
        });

        // Create Bar Chart
        var ctx2 = document.getElementById('ratingChart').getContext('2d');
        var ratingChart = new Chart(ctx2, {
            type: 'bar',
            data: {
                labels: ['1', '2', '3', '4', '5'],
                datasets: [{
                    label: 'Rating',
                    data: [
                        ratingData.filter(data => data.answer === '1').length,
                        ratingData.filter(data => data.answer === '2').length,
                        ratingData.filter(data => data.answer === '3').length,
                        ratingData.filter(data => data.answer === '4').length,
                        ratingData.filter(data => data.answer === '5').length,
                    ],
                    backgroundColor: 'blue',
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        max: ratingData.length, // Adjust the max value according to your needs
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: "Participants' rating of the training",
                    },
                },
            },
        });
    </script>
@endsection