@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold text-slate-900 mb-4">Laporan Hasil Survey: {{ $survey->title }}</h1>

    <form method="GET" class="flex flex-wrap gap-4 items-end mb-6">
        <div>
            <label for="date_from" class="block text-sm font-medium text-slate-700 mb-1">Dari Tanggal</label>
            <input type="date" name="date_from" id="date_from" value="{{ $dateFrom }}" class="border rounded px-3 py-2">
        </div>
        <div>
            <label for="date_to" class="block text-sm font-medium text-slate-700 mb-1">Sampai Tanggal</label>
            <input type="date" name="date_to" id="date_to" value="{{ $dateTo }}" class="border rounded px-3 py-2">
        </div>
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Filter</button>
    </form>

    <div class="flex gap-2 mb-4">
        <a href="{{ route('surveys.report.export-excel', ['survey' => $survey->id, 'date_from' => $dateFrom, 'date_to' => $dateTo]) }}" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Export Excel</a>
        <a href="{{ route('surveys.report.export-pdf', ['survey' => $survey->id, 'date_from' => $dateFrom, 'date_to' => $dateTo]) }}" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">Export PDF</a>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-8">
        <h2 class="text-lg font-semibold mb-4">Rekapitulasi Jawaban Pertanyaan Radio</h2>
        @php
            $totalResponses = $responses->count();
        @endphp
        @foreach($questions as $qIdx => $question)
            @if($question->question_type === 'radio')
                <div class="mb-8">
                    <h3 class="font-semibold text-slate-900 mb-2">{{ $question->question_text }}</h3>
                    <table class="w-full border text-sm mb-2">
                        <thead>
                            <tr class="bg-slate-100">
                                <th class="py-2 px-3 text-left">Pilihan</th>
                                <th class="py-2 px-3 text-center">Jumlah</th>
                                <th class="py-2 px-3 text-center">Persentase</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $optionCounts = array_fill_keys($question->options_array, 0);
                                foreach($responses as $response) {
                                    $answers = is_array($response->answers) ? $response->answers : json_decode($response->answers, true);
                                    $ans = $answers[$question->id] ?? null;
                                    if($ans !== null && isset($optionCounts[$ans])) {
                                        $optionCounts[$ans]++;
                                    }
                                }
                            @endphp
                            @foreach($question->options_array as $option)
                                <tr>
                                    <td class="py-2 px-3">{{ $option }}</td>
                                    <td class="py-2 px-3 text-center">{{ $optionCounts[$option] }}</td>
                                    <td class="py-2 px-3 text-center">
                                        @if($totalResponses > 0)
                                            {{ number_format(($optionCounts[$option] / $totalResponses) * 100, 1) }}%
                                        @else
                                            0%
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="text-xs text-slate-500 mb-2">Total Responden: {{ $totalResponses }}</div>
                    <!-- Grafik Bar Chart -->
                    <canvas id="chart-radio-{{ $qIdx }}" height="120"></canvas>
                    <script>
                        window.addEventListener('DOMContentLoaded', function() {
                            const ctx = document.getElementById('chart-radio-{{ $qIdx }}').getContext('2d');
                            new Chart(ctx, {
                                type: 'bar',
                                data: {
                                    labels: {!! json_encode($question->options_array) !!},
                                    datasets: [{
                                        label: 'Jumlah',
                                        data: {!! json_encode(array_values($optionCounts)) !!},
                                        backgroundColor: 'rgba(37, 99, 235, 0.7)',
                                        borderColor: 'rgba(37, 99, 235, 1)',
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    plugins: {
                                        legend: { display: false },
                                        title: { display: false }
                                    },
                                    scales: {
                                        y: { beginAtZero: true, precision:0 }
                                    }
                                }
                            });
                        });
                    </script>
                </div>
            @endif
        @endforeach
        @if($questions->where('question_type', 'radio')->count() === 0)
            <div class="text-slate-500">Tidak ada pertanyaan radio pada survey ini.</div>
        @endif
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h2 class="text-lg font-semibold mb-4">Jawaban Lainnya</h2>
        @foreach($questions as $question)
            @if(in_array($question->question_type, ['checkbox', 'text']))
                <div class="mb-6">
                    <h3 class="font-semibold text-slate-900 mb-2">{{ $question->question_text }}</h3>
                    <ul class="list-disc pl-6 text-slate-700 text-sm">
                        @php
                            $allAnswers = [];
                            foreach($responses as $response) {
                                $answers = is_array($response->answers) ? $response->answers : json_decode($response->answers, true);
                                $ans = $answers[$question->id] ?? null;
                                if($ans !== null) {
                                    if($question->question_type === 'checkbox' && is_array($ans)) {
                                        foreach($ans as $item) {
                                            $allAnswers[] = $item;
                                        }
                                    } else {
                                        $allAnswers[] = $ans;
                                    }
                                }
                            }
                        @endphp
                        @forelse($allAnswers as $ans)
                            <li>{{ $ans }}</li>
                        @empty
                            <li class="text-slate-400 italic">Belum ada jawaban</li>
                        @endforelse
                    </ul>
                </div>
            @endif
        @endforeach
        @if($questions->whereIn('question_type', ['checkbox','text'])->count() === 0)
            <div class="text-slate-500">Tidak ada pertanyaan checkbox atau text pada survey ini.</div>
        @endif
    </div>
</div>
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection