@extends('layouts.app')
@section('title', 'Survey Results - ' . $survey->survey_name)

@section('content')
<div class="container-fluid mt-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-1 text-primary fw-bold">1.0 Engagement Survey App: Results</h2>
                    <p class="text-muted mb-0">Survey: {{ $survey->survey_name }}</p>
                    <small class="text-muted">Generated on {{ date('F d, Y') }}</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <div class="dropdown mr-2">
                        <button class="btn dropdown-toggle btn-outline-primary" type="button" data-bs-toggle="dropdown" style="min-width: 150px;">
                            <span>
                                @if($period === '7d')
                                    Last 7 days
                                @elseif($period === '30d')
                                    Last 30 days
                                @else
                                    All
                                @endif
                            </span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item {{ $period === 'all' ? 'active' : '' }}" href="{{ route('surveymanagement.surveys.results.view', [$survey->id, 'period' => 'all']) }}">
                                    All
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ $period === '7d' ? 'active' : '' }}" href="{{ route('surveymanagement.surveys.results.view', [$survey->id, 'period' => '7d']) }}">
                                    Last 7 days
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ $period === '30d' ? 'active' : '' }}" href="{{ route('surveymanagement.surveys.results.view', [$survey->id, 'period' => '30d']) }}">
                                    Last 30 days
                                </a>
                            </li>
                        </ul>
                    </div>
                    @if(!isset($isPdf) || !$isPdf)
                        <button class="btn btn-outline-primary" onclick="window.print()">
                            <i class="fas fa-print me-1"></i> Print Report
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Results Grid -->
    <div class="row mb-4 text-center">
        {{-- <div class="col-12 col-sm-6 col-xl-3 mb-3 mb-xl-0">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="h6 text-muted">Total Surveys</div>
                    <div class="h3 mb-0 theme-blue">{{ $totalSurveysCount ?? 0 }}</div>
                    <small class="text-muted">{{ $period === '7d' ? 'Last 7 days' : ($period === '30d' ? 'Last 30 days' : 'All Time') }}</small>
                </div>
            </div>
        </div> --}}
        <div class="col-12 col-md-4 mb-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="h6 text-muted">Total Attempts</div>
                    <div class="h3 mb-0" style="color: #17a2b8;">{{ $attemptsTotalCount ?? 0 }}</div>
                    <small class="text-muted">{{ $period === '7d' ? 'Last 7 days' : ($period === '30d' ? 'Last 30 days' : 'All') }}</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4 mb-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="h6 text-muted">Submitted</div>
                    <div class="h3 mb-0 text-success">{{ $submittedAttemptsCount ?? 0 }}</div>
                    <small class="text-muted">{{ $period === '7d' ? 'Last 7 days' : ($period === '30d' ? 'Last 30 days' : 'All') }}</small>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4 mb-3">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <div class="h6 text-muted">Drafts</div>
                    <div class="h3 mb-0 text-warning">{{ $draftAttemptsCount ?? 0 }}</div>
                    <small class="text-muted">{{ $period === '7d' ? 'Last 7 days' : ($period === '30d' ? 'Last 30 days' : 'All') }}</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach ($results as $index => $result)
        <div class="col-lg-6 col-md-12 mb-4">
            <div class="card shadow-sm border-0" style="min-height: 600px;">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1 fw-semibold text-dark">
                                Q{{ $index + 1 }}. {{ $result['question'] }}
                            </h6>
                            <small class="text-muted">
                                Total Responses: {{ is_string($result['data']) ? array_sum(json_decode($result['data'], true)) : array_sum($result['data']) }}
                            </small>
                        </div>
                        {{-- @if(!isset($isPdf) || !$isPdf)
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('surveymanagement.surveys.question.details', [$survey->id, $result['question_id']]) }}">
                                            <i class="fas fa-chart-bar me-2"></i>View Details
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{{ route('surveymanagement.surveys.results.export-csv', [$survey->id, 'period' => $period]) }}">
                                            <i class="fas fa-download me-2"></i>Export Data
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        @endif --}}
                    </div>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center" style="min-height: 350px;">
                    @if(isset($isPdf) && $isPdf)
                        <div class="chart-placeholder text-center p-4">
                            <i class="fas fa-chart-pie fa-3x text-muted mb-3"></i>
                            <p class="text-muted">Chart visualization not available in PDF format</p>
                            <small class="text-muted">View online for interactive charts</small>
                        </div>
                    @else
                        <div class="chart-container" style="position: relative; width: 100%; max-width: 400px;">
                            <canvas id="chart-{{ $result['question_id'] }}" style="max-height: 300px;"></canvas>
                        </div>
                    @endif
                </div>
                <div class="card-footer bg-light border-top-0">
                    <div class="row text-center">
                    @php
                        $total = array_sum($result['data']);
                        $maxCount = $total > 0 ? max($result['data']) : 0;
                        $topAnswers = $total > 0 ? array_keys($result['data'], $maxCount) : [''];
                        $topPercentage = $total > 0 ? round(($maxCount / $total) * 100, 1) : 0;
                    @endphp
                        <div class="col-6">
                            <small class="text-muted d-block">Most Popular</small>
                            <div class="answer-scroll">
                                @if(count($topAnswers) == 1)
                                    <strong class="text-primary" style="word-wrap: break-word; overflow-wrap: break-word;">{{ $topAnswers[0] }}</strong>
                                @else
                                    <ul class="list-unstyled mb-0">
                                        @foreach($topAnswers as $answer)
                                            <li><strong class="text-primary" style="word-wrap: break-word; overflow-wrap: break-word;">{{ $answer }}</strong></li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Percentage</small>
                            <strong class="text-success">{{ $topPercentage }}%</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Summary Statistics -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-line me-2"></i>Survey Summary
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-primary mb-1">{{ count($results) }}</h4>
                                <small class="text-muted">Total Questions</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                @php
                                    $totalResponses = array_reduce($results, function($carry, $result) {
                                        $data = is_string($result['data']) ? json_decode($result['data'], true) : $result['data'];
                                        return $carry + array_sum($data);
                                    }, 0);
                                @endphp
                                <h4 class="text-success mb-1">{{ $attemptsTotalCount }}</h4>
                                <small class="text-muted">Total Attempts</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-warning mb-1">{{ date('M Y') }}</h4>
                                <small class="text-muted">Survey Period</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="text-center p-3 bg-light rounded">
                                <h4 class="text-info mb-1">
                                    {{ $totalResponses > 0 ? round(($totalResponses / count($results)), 1) : 0 }}
                                </h4>
                                <small class="text-muted">Avg Response/Question</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Response Table -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-table me-2"></i> Detailed Response Breakdown
                    </h5>

                    <a class="btn btn-sm btn-primary" href="{{ route('surveymanagement.surveys.results.export-csv', [$survey->id, 'period' => $period]) }}">
                        <i class="fas fa-download me-2"></i> Export Data
                    </a>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="border-0">Question</th>
                                    <th class="border-0">Response Options</th>
                                    <th class="border-0 text-center">Count</th>
                                    <th class="border-0 text-center">Percentage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($results as $index => $result)
                                    @php
                                        if (is_string($result['data'])) {
                                            $result['data'] = json_decode($result['data'], true);
                                        }
                                        $total = array_sum($result['data']);
                                    @endphp
                                    @foreach ($result['data'] as $option => $count)
                                    <tr>
                                        @if ($loop->first)
                                        <td rowspan="{{ count($result['data']) }}" class="align-middle fw-semibold">
                                            Q{{ $index + 1 }}. {{ Str::limit($result['question'], 50) }}
                                        </td>
                                        @endif
                                        <td>{{ $option }}</td>
                                        <td class="text-center">
                                            <span>{{ $count }}</span>
                                        </td>
                                        <td class="text-center">
                                            <div class="d-flex align-items-center justify-content-center">
                                                <div class="progress me-2" style="width: 60px; height: 6px;">
                                                    <div class="progress-bar" role="progressbar" 
                                                         style="width: {{ $total > 0 ? ($count / $total) * 100 : 0 }}%">
                                                    </div>
                                                </div>
                                                <span class="text-muted small">
                                                    {{ $total > 0 ? round(($count / $total) * 100, 1) : 0 }}%
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    .btn, .dropdown { display: none !important; }
    .card { break-inside: avoid; }
    .container-fluid { padding: 0; }
    .card-footer { overflow-y: visible !important; max-height: none !important; }
    .answer-scroll { overflow-y: visible !important; max-height: none !important; }
}

.chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.progress {
    background-color: #e9ecef;
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
}

.badge {
    font-size: 0.75rem;
}

.answer-scroll {
    max-height: 60px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 4px;
}
</style>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Bootstrap 5 JS for dropdown functionality -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Enhanced color palette
        const colorPalette = [
            '#3498db', '#e74c3c', '#f39c12', '#2ecc71', '#9b59b6',
            '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#16a085',
            '#8e44ad', '#2980b9', '#c0392b', '#d35400', '#27ae60'
        ];

        @foreach ($results as $result)
            var ctx{{ $result['question_id'] }} = document.getElementById('chart-{{ $result['question_id'] }}').getContext('2d');
            
            var data{{ $result['question_id'] }} = {!! json_encode(array_values($result['data'])) !!};
            var labels{{ $result['question_id'] }} = {!! json_encode(array_keys($result['data'])) !!};
            var total{{ $result['question_id'] }} = data{{ $result['question_id'] }}.reduce((a, b) => a + b, 0);
            
            var chart{{ $result['question_id'] }} = new Chart(ctx{{ $result['question_id'] }}, {
                type: 'pie',
                data: {
                    labels: labels{{ $result['question_id'] }},
                    datasets: [{
                        data: data{{ $result['question_id'] }},
                        backgroundColor: colorPalette.slice(0, labels{{ $result['question_id'] }}.length),
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                boxWidth: 12,
                                boxHeight: 12,
                                padding: 10,
                                font: {
                                    size: 10
                                },
                                generateLabels: function(chart) {
                                    const data = chart.data;
                                    if (data.labels.length && data.datasets.length) {
                                        return data.labels.map((label, i) => {
                                            const value = data.datasets[0].data[i];
                                            const percentage = total{{ $result['question_id'] }} > 0 ?
                                                ((value / total{{ $result['question_id'] }}) * 100).toFixed(1) : 0;
                                            return {
                                                text: `${label} (${percentage}%)`,
                                                fillStyle: data.datasets[0].backgroundColor[i],
                                                strokeStyle: data.datasets[0].backgroundColor[i],
                                                index: i
                                            };
                                        });
                                    }
                                    return [];
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.parsed;
                                    const percentage = total{{ $result['question_id'] }} > 0 ? 
                                        ((value / total{{ $result['question_id'] }}) * 100).toFixed(1) : 0;
                                    return `${label}: ${value} responses (${percentage}%)`;
                                }
                            },
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            titleColor: '#ffffff',
                            bodyColor: '#ffffff',
                            borderColor: '#ffffff',
                            borderWidth: 1
                        }
                    },
                    animation: {
                        animateRotate: true,
                        duration: 1000
                    }
                }
            });
        @endforeach
    });
</script>
@endpush