<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statistik - {{ $survey->title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: white !important;
            padding: 10px;
            font-size: 13px;
        }
        .break-inside-avoid {
            break-inside: avoid;
            margin-bottom: 15px !important;
        }
        .chart-container {
            height: 220px;
            margin-bottom: 10px;
        }
        .card-body {
            padding: 1rem !important;
        }
        .card-header {
            padding: 0.5rem 1rem !important;
        }
        h1.h3 { font-size: 1.5rem !important; }
        h5 { font-size: 1rem !important; }
        .table-sm { font-size: 0.8rem !important; }
        
        @media print {
            .no-print { display: none !important; }
            .card { border: 1px solid #ddd !important; box-shadow: none !important; }
            .badge { border: 1px solid #ccc !important; color: black !important; background: white !important; }
            body { padding: 0; }
            .container-fluid { padding: 0; }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="text-center mb-4 border-bottom pb-2">
            <h1 class="fw-bold h3 mb-1">{{ $survey->title }}</h1>
            <p class="text-muted mb-0 small">Laporan Statistik - {{ date('d/m/Y H:i') }}</p>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-6">
                <div class="card text-center py-1 bg-light border-0">
                    <div class="card-body py-2">
                        <h4 class="fw-bold mb-0">{{ $totalSurveyRespondents }}</h4>
                        <small class="text-muted">Responden</small>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card text-center py-1 bg-light border-0">
                    <div class="card-body py-2">
                        <h4 class="fw-bold mb-0">{{ $totalSurveyQuestions }}</h4>
                        <small class="text-muted">Soalan</small>
                    </div>
                </div>
            </div>
        </div>

        @foreach($results as $questionId => $result)
        <div class="card mb-3 break-inside-avoid border shadow-none">
            <div class="card-header bg-light border-bottom p-2">
                <h6 class="fw-bold mb-0">Soalan {{ $loop->iteration }}: {{ $result['question'] }}</h6>
            </div>
            <div class="card-body p-2">
                @if(isset($result['type']) && $result['type'] == 'text')
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 40px;">#</th>
                                    <th>Jawapan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($result['data'] as $answer)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $answer }}</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="2" class="text-center text-muted">Tiada jawapan.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="row g-2 align-items-center">
                        <div class="col-7">
                            <div class="chart-container">
                                <canvas id="chart-{{ $questionId }}"></canvas>
                            </div>
                        </div>
                        <div class="col-5">
                            <table class="table table-bordered table-sm mb-0" style="font-size: 0.75rem;">
                                <thead class="table-light">
                                    <tr>
                                        <th>Pilihan Jawapan</th>
                                        <th class="text-center">Kekerapan</th>
                                        <th class="text-center">Peratus(%)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($result['data'] as $stat)
                                    <tr>
                                        <td>{{ $stat['label'] }}</td>
                                        <td class="text-center">{{ $stat['count'] }}</td>
                                        <td class="text-center fw-bold">{{ $stat['percentage'] }}%</td>
                                    </tr>
                                    @endforeach
                                    <tr class="table-secondary fw-bold">
                                        <td>JUMLAH</td>
                                        <td class="text-center">{{ $result['total'] }}</td>
                                        <td class="text-center">100%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if(!empty($result['other_answers']))
                        <div class="mt-2 border-top pt-1">
                            <small class="fw-bold text-secondary" style="font-size: 0.7rem;">Lain-lain:</small>
                            <div class="d-flex flex-wrap gap-1 mt-1">
                                @foreach($result['other_answers'] as $otherAns)
                                    <span class="badge bg-white text-dark border p-1 fw-normal" style="font-size: 0.7rem;">{{ $otherAns }}</span>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>
        @endforeach

        <div class="text-center mt-3 no-print">
             <button onclick="window.print()" class="btn btn-primary px-4 py-1 fw-bold">KLIK UNTUK CETAK</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const results = @json($results);

        Object.keys(results).forEach(id => {
            const data = results[id];
            if(data.type === 'text') return;

            const ctx = document.getElementById(`chart-${id}`).getContext('2d');
            const labels = data.data.map(item => item.label);
            const counts = data.data.map(item => item.count);

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Bilangan',
                        data: counts,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgb(54, 162, 235)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: { duration: 0 },
                    scales: {
                        y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } },
                        x: { ticks: { font: { size: 10 } } }
                    },
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        });

        setTimeout(() => {
            window.print();
        }, 800);
    });
    </script>
</body>
</html>
