@extends('layouts.main')

@section('content')
<h5>{{$title}}</h5>

@foreach ($sections as $section)
    <div class="card-box">
        <div class="card-body">           
            <strong>{{ $section->name }}</strong>
            
            @foreach ($section->questions as $question)

                @php
                    $data = App\Answer::where('answers.question_id', $question->id)
                        ->where('answers.feedback_assessment_id', $assesment->id)
                        ->join('question_responses', 'answers.question_response_id', '=', 'question_responses.id')
                        ->selectRaw('question_responses.text_response, question_responses.mark, COUNT(answers.feedback_assessment_id) as response_count')
                        ->groupBy('question_responses.text_response', 'question_responses.mark')
                        ->orderBy('response_count', 'DESC')
                        ->get();

                    $labels = $data->pluck('text_response')->toArray();
                    $counts = $data->pluck('response_count')->toArray();
                    $totalResponses = array_sum($counts);
                @endphp 
                
                <p>{{ $question->question }}</p>

                @if ($question->answer_type != 'none')
                <div class="row">
                    <div class="col-md-6 col-lg-6 d-flex justify-content-center align-items-center">
                        <canvas id="barChart{{ $question->id }}" class="chart-canvas"></canvas>
                    </div>
                
                    <div class="col-md-6 col-lg-6 d-flex justify-content-center align-items-center">
                        <canvas id="pieChart{{ $question->id }}" class="chart-canvas"></canvas>
                    </div>
                </div>
                @endif

                @php
                    $comments = App\Answer::select('remarks', 'customer_id', 'user_id', 'created_at')
                        ->where('answers.question_id', $question->id)
                        ->where('feedback_assessment_id', $assesment->id)
                        ->whereNotNull('remarks')
                        ->get();
                @endphp

                @foreach ($comments as $comment)
                    <p>
                        {{ $comment->customer->name."-".$comment->customer->phone_number." - ".$comment->customer->address }}:
                        <span class="text-success">{{ $comment->remarks }} - </span>
                        <span class="text-muted">{{ $comment->created_at }} {{ $comment->user->name }}</span>
                    </p>
                @endforeach

                @if ($question->answer_type != 'none')
                    <style>
                        .chart-canvas {
                            width: 100% !important;
                            height: 300px !important;
                            object-fit: contain;
                        }
                    </style>

                    @push('scripts')
                    <script>
                        document.addEventListener("DOMContentLoaded", function() {
                            let labels = {!! json_encode($labels) !!};
                            let dataCounts = {!! json_encode($counts) !!};
                            let totalResponses = {{ $totalResponses }};
                            
                            let barChartCanvas = document.getElementById('barChart{{ $question->id }}');
                            let pieChartCanvas = document.getElementById('pieChart{{ $question->id }}');

                            if (barChartCanvas) {
                                new Chart(barChartCanvas, {
                                    type: 'bar',
                                    data: {
                                        labels: labels,
                                        datasets: [{
                                            label: 'Feedback Count',
                                            data: dataCounts,
                                            backgroundColor: ['#ff5733', '#33ff57', '#3357ff', '#ff33a8', '#f4d03f'],
                                            borderColor: 'black',
                                            borderWidth: 1
                                        }]
                                    },
                                    options: {
                                        responsive: true,
                                        plugins: {
                                            legend: { display: false },
                                            tooltip: { enabled: true },
                                            datalabels: {
                                                anchor: 'end',
                                                align: 'top',
                                                formatter: (value) => value // Show numbers on bars
                                            }
                                        },
                                        scales: {
                                            y: {
                                                beginAtZero: true
                                            }
                                        }
                                    },
                                    plugins: [ChartDataLabels]
                                });
                            }

                            if (pieChartCanvas) {
                                new Chart(pieChartCanvas, {
                                    type: 'pie',
                                    data: {
                                        labels: labels,
                                        datasets: [{
                                            data: dataCounts,
                                            backgroundColor: ['#ff5733', '#33ff57', '#3357ff', '#ff33a8', '#f4d03f'],
                                        }]
                                    },
                                    options: {
                                        responsive: true,
                                        plugins: {
                                            tooltip: { enabled: true },
                                            datalabels: {
                                                formatter: (value) => {
                                                    let percentage = ((value / totalResponses) * 100).toFixed(1);
                                                    return percentage + "%"; // Show percentage
                                                },
                                                color: '#fff',
                                                font: { weight: 'bold' }
                                            }
                                        }
                                    },
                                    plugins: [ChartDataLabels]
                                });
                            }
                        });
                    </script>
                    @endpush
                @endif

            @endforeach
            <hr>
        </div>
    </div>
@endforeach

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
@endpush