@extends('layouts.app')

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Feedback Report'])

    <div class="container">
        <h3 class="text-center">Feedback Report</h3>

        <div class="card mt-4">
    <div class="card-header text-bold">Total {{$reference}} vs Attended {{$reference}}</div>
    <div class="card-body">
    <div class="row">
                    <!-- Pie Chart for the question -->
                    <div class="col-md-3">Total {{$reference}} : {{$referenceCount ?? 0}}</div>

                    <!-- Bar Chart for the question -->
                    <div class="col-md-3">Attended {{$reference}} : {{$responsesCount ?? 0}}</div>
                </div>
        <div id="attendance-pie-chart" ></div>
    </div>
</div>

        <!-- Loop through each question and display Pie and Bar charts -->
        @foreach($chartData as $data)
            <div class="card mt-4">
                <div class="card-header text-bold">{{ $data['question'] }}</div>
                <div class="card-body">
                <div class="row">
                    <!-- Pie Chart for the question -->
                    <div class="col-md-6" id="pie-chart-{{ $loop->index }}" style="height: 350px;"></div>

                    <!-- Bar Chart for the question -->
                    <div class="col-md-6" id="bar-chart-{{ $loop->index }}" style="height: 350px;"></div>
                </div>

                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    // Prepare the response data for the charts
                    var responses = @json($data['responses']);
                    var responseLabels = Object.keys(responses);
                    var responseValues = Object.values(responses);

                    // Pie chart options
                    var pieOptions = {
                        series: responseValues,
                        chart: {
                            type: 'pie',
                            height: 350
                        },
                        labels: responseLabels,
                       
                    };

                    // Bar chart options
                    var barOptions = {
                        series: [{
                            name: 'Responses',
                            data: responseValues
                        }],
                        chart: {
                            type: 'bar',
                            height: 350
                        },
                        xaxis: {
                            categories: responseLabels,
                        },
                        
                    };

                    // Render Pie chart
                    var pieChart = new ApexCharts(document.querySelector("#pie-chart-{{ $loop->index }}"), pieOptions);
                    pieChart.render();

                    // Render Bar chart
                    var barChart = new ApexCharts(document.querySelector("#bar-chart-{{ $loop->index }}"), barOptions);
                    barChart.render();
                });
            </script>
        @endforeach
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Data for the attendance pie chart
        var pieChartData = {
            attended: {{ $responsesCount }},
            not_attended: {{ $referenceCount }} - {{ $responsesCount }}
        };

        var pieOptions = {
            series: [pieChartData.attended, pieChartData.not_attended],
            chart: {
                type: 'pie',
                height: 350
            },
            labels: ['Attended Feedback', 'Did Not Attend Feedback'],
           
        };

        var pieChart = new ApexCharts(document.querySelector("#attendance-pie-chart"), pieOptions);
        pieChart.render();
    });
</script>
@endpush