@extends('layouts.admin')

@section('title', 'Survey Response Report')
@section('page-title', 'Survey Report')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <a href="{{ route('admin.surveys.index') }}" class="text-decoration-none text-secondary">
            <i class="bi bi-arrow-left"></i> Back to Surveys
        </a>
    </div>
</div>

<div class="row">
    <!-- Survey Summary Card -->
    <div class="col-md-4 mb-4">
        <div class="admin-card">
            <h5 class="fw-bold mb-3">Survey Details</h5>
            <div class="mb-3">
                <span class="text-muted small d-block">Title</span>
                <strong class="text-dark">{{ $survey->title }}</strong>
            </div>
            <div class="mb-3">
                <span class="text-muted small d-block">Description</span>
                <p class="mb-0 text-secondary small">{{ $survey->description ?: 'No description provided.' }}</p>
            </div>
            <div class="mb-3">
                <span class="text-muted small d-block">Target Scope</span>
                <span class="text-uppercase small fw-bold text-primary">{{ $survey->target_type }}</span>
            </div>
            <div class="row bg-light rounded-3 p-3 text-center border g-0">
                <div class="col-6 border-end">
                    <span class="text-muted d-block" style="font-size: 0.75rem;">RESPONSES</span>
                    <h4 class="fw-bold text-dark mb-0 mt-1">{{ $respondentsCount }}</h4>
                </div>
                <div class="col-6">
                    <span class="text-muted d-block" style="font-size: 0.75rem;">PARTICIPATION</span>
                    <h4 class="fw-bold text-success mb-0 mt-1">{{ $participationRate }}%</h4>
                </div>
            </div>
        </div>
    </div>

    <!-- Questions Results Breakdown -->
    <div class="col-md-8 mb-4">
        <div class="d-flex flex-column gap-4">
            @foreach($questionsReport as $idx => $report)
                <div class="admin-card">
                    <div class="d-flex justify-content-between align-items-start mb-3 border-bottom pb-2">
                        <div>
                            <span class="text-primary fw-bold small">Question #{{ $idx + 1 }}</span>
                            <h5 class="fw-bold text-dark mb-0 mt-1">{{ $report['question']->question_text }}</h5>
                        </div>
                        <span class="badge bg-secondary">{{ $report['question']->type }}</span>
                    </div>

                    @if($report['question']->type == 'MCQ')
                        <!-- MCQ Results -->
                        <div class="row align-items-center">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <div style="height: 180px; position: relative;">
                                    <canvas id="mcq-chart-{{ $report['question']->id }}"></canvas>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm small align-middle mb-0">
                                        <thead>
                                            <tr class="table-light">
                                                <th>Choice Option</th>
                                                <th class="text-center">Votes</th>
                                                <th class="text-center">Pct %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($report['breakdown'] as $option => $votes)
                                                @php
                                                    $pct = $report['total_responses'] > 0 ? round(($votes / $report['total_responses']) * 100) : 0;
                                                @endphp
                                                <tr>
                                                    <td>{{ $option }}</td>
                                                    <td class="text-center fw-bold">{{ $votes }}</td>
                                                    <td class="text-center text-secondary">{{ $pct }}%</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    @elseif($report['question']->type == 'Rating')
                        <!-- Rating Results -->
                        <div class="d-flex align-items-center mb-4">
                            <div class="me-4 text-center">
                                <h1 class="fw-bold text-warning mb-0" style="font-size: 3.5rem;">{{ $report['average_rating'] }}</h1>
                                <div class="text-muted small">Average Rating</div>
                            </div>
                            <div>
                                <div class="d-flex align-items-center text-warning fs-4 mb-1">
                                    @for($s = 1; $s <= 5; $s++)
                                        <i class="bi bi-star{{ $s <= round($report['average_rating']) ? '-fill' : '' }} me-1"></i>
                                    @endfor
                                </div>
                                <small class="text-muted">Based on {{ $report['total_responses'] }} responses</small>
                            </div>
                        </div>

                        <!-- Rating Bars -->
                        <div class="d-flex flex-column gap-2">
                            @for($r = 5; $r >= 1; $r--)
                                @php
                                    $votes = $report['breakdown'][$r] ?? 0;
                                    $pct = $report['total_responses'] > 0 ? round(($votes / $report['total_responses']) * 100) : 0;
                                @endphp
                                <div class="d-flex align-items-center">
                                    <span class="small fw-semibold text-secondary me-2" style="width: 45px;">{{ $r }} Star</span>
                                    <div class="progress flex-grow-1" style="height: 8px;">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: {{ $pct }}%"></div>
                                    </div>
                                    <span class="small fw-bold text-dark ms-3" style="width: 40px; text-align: right;">{{ $votes }}</span>
                                </div>
                            @endfor
                        </div>

                    @else
                        <!-- Free Text Answers -->
                        <div class="border rounded-3 p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
                            <ul class="list-group list-group-flush" style="font-size: 0.9rem;">
                                @forelse($report['breakdown'] as $textAns)
                                    <li class="list-group-item bg-transparent text-secondary py-2 border-bottom">
                                        <i class="bi bi-chat-text text-primary me-2"></i> {{ $textAns }}
                                    </li>
                                @empty
                                    <li class="list-group-item bg-transparent text-center text-muted py-3 border-0">
                                        No text responses submitted yet.
                                    </li>
                                @endforelse
                            </ul>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        @foreach($questionsReport as $report)
            @if($report['question']->type == 'MCQ')
                // Render chart for MCQ question
                const ctx_{{ $report['question']->id }} = document.getElementById('mcq-chart-{{ $report['question']->id }}').getContext('2d');
                new Chart(ctx_{{ $report['question']->id }}, {
                    type: 'bar',
                    data: {
                        labels: {!! json_encode(array_keys($report['breakdown'])) !!},
                        datasets: [{
                            data: {!! json_encode(array_values($report['breakdown'])) !!},
                            backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'],
                            borderRadius: 4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            x: { grid: { display: false } },
                            y: { grid: { color: 'rgba(0,0,0,0.05)' } }
                        }
                    }
                });
            @endif
        @endforeach
    });
</script>
@endsection