@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">{{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0"
                                            onclick="window.location='{{ url($url_menu) }}'">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </button>

                                        <button class="btn btn-success mb-0 ms-2" id="btnExportExcel" 
                                                style="display: inline-flex; align-items: center; gap: 8px;">
                                            <i class="fas fa-file-excel"></i>
                                            <span class="font-weight-bold">Export Excel</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Survey Info --}}
                        <div class="row px-4 py-2">
                            <div class="col-md-12 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="mb-3">Informasi Survey</h4>
                                        <hr class="horizontal dark mt-0 mb-3">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p><strong>ID Survey:</strong> {{ $survey->idsurvei }}</p>
                                                <p><strong>Judul Form:</strong> {{ $survey->judul_form }}</p>
                                                <p><strong>Subjudul:</strong> {{ $survey->subjudul }}</p>
                                                <p><strong>Departemen:</strong>
                                                    {{ $survey->departemen_name ?? $survey->departemen }}</p>
                                                <p><strong>Jenis:</strong>
                                                    {{ $survey->jenis === 'R' ? 'Repetisi' : 'Sekali' }}</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p><strong>Tanggal Mulai:</strong>
                                                    {{ date('d-m-Y', strtotime($survey->tanggal_mulai)) }}</p>
                                                <p><strong>Tanggal Selesai:</strong>
                                                    {{ date('d-m-Y', strtotime($survey->tanggal_selesai)) }}</p>
                                                <p><strong>Status:</strong>
                                                    @if($survey->status === 'selesai')
                                                        <span class="badge bg-success">Selesai</span>
                                                    @elseif($survey->status === 'proses')
                                                        <span class="badge bg-warning">Proses</span>
                                                    @else
                                                        <span class="badge bg-secondary">Entri</span>
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-12">
                                                <p><strong>Deskripsi:</strong></p>
                                                <div>{!! $survey->deskripsi !!}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Analisis Card --}}
                        <div class="row px-4 py-2">
                            <div class="col-md-12 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="mb-0">Analisis</h4>
                                        <hr class="horizontal dark mt-2 mb-3">

                                        <div class="table-responsive">
                                            @if(isset($periode_filter) && $periode_filter === '3years')
                                                {{-- Multi-Year Analysis Table --}}
                                                <table class="table table-bordered table-hover" id="analisis-table">
                                                    <thead style="background-color: #c8f5f7;">
                                                        <tr>
                                                            <th rowspan="2" style="width: 5%; vertical-align: middle;">No</th>
                                                            <th rowspan="2" style="width: 30%; vertical-align: middle;">Pertanyaan</th>
                                                            <th rowspan="2" style="width: 10%; vertical-align: middle;">Tipe</th>
                                                            @foreach($analysis_years as $year)
                                                                <th colspan="2" class="text-center">{{ $year }}</th>
                                                            @endforeach
                                                            <th rowspan="2" style="width: 8%; vertical-align: middle;">Rata-rata</th>
                                                        </tr>
                                                        <tr>
                                                            @foreach($analysis_years as $year)
                                                                <th style="width: 15%;">Kesimpulan</th>
                                                                <th style="width: 8%;">Nilai</th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($analisis_summary as $row)
                                                            <tr>
                                                                <td class="text-center">{{ $row['no'] }}</td>
                                                                <td>{!! strip_tags($row['soal']) !!}</td>
                                                                <td>{{ $row['jenis'] }}</td>
                                                                
                                                                @foreach($analysis_years as $year)
                                                                    @if(isset($row['yearly_data'][$year]['is_group']) && $row['yearly_data'][$year]['is_group'])
                                                                        {{-- Group Linear Scale - Data per Vendor --}}
                                                                        <td style="padding: 8px;">
                                                                            @if(isset($row['yearly_data'][$year]['vendor_data']))
                                                                                @foreach($row['yearly_data'][$year]['vendor_data'] as $index => $vData)
                                                                                    <div style="padding: 4px 0; {{ $index < count($row['yearly_data'][$year]['vendor_data']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                        {{ $vData['vendor_name'] }}:
                                                                                    </div>
                                                                                @endforeach
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                        <td class="text-end" style="padding: 8px;">
                                                                            @if(isset($row['yearly_data'][$year]['vendor_data']))
                                                                                @php
                                                                                    // Cari nilai tertinggi dan terendah untuk tahun ini
                                                                                    $yearValues = array_column($row['yearly_data'][$year]['vendor_data'], 'avg');
                                                                                    $yearValues = array_filter($yearValues, function($v) { return is_numeric($v) && $v != '-'; });
                                                                                    $maxValue = !empty($yearValues) ? max($yearValues) : null;
                                                                                    $minValue = !empty($yearValues) ? min($yearValues) : null;
                                                                                @endphp
                                                                                @foreach($row['yearly_data'][$year]['vendor_data'] as $index => $vData)
                                                                                    @php
                                                                                        $currentValue = $vData['avg'];
                                                                                        $color = '#000'; // Default hitam
                                                                                        if (is_numeric($currentValue) && $currentValue != '-') {
                                                                                            if ($currentValue == $maxValue && $maxValue != $minValue) {
                                                                                                $color = '#28a745'; // tertinggi
                                                                                            } elseif ($currentValue == $minValue && $maxValue != $minValue) {
                                                                                                $color = '#dc3545'; // terendah
                                                                                            }
                                                                                        }
                                                                                    @endphp
                                                                                    <div style="padding: 4px 0; {{ $index < count($row['yearly_data'][$year]['vendor_data']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                        <span style="font-weight: 600; color: {{ $color }};">{{ $currentValue }}</span>
                                                                                    </div>
                                                                                @endforeach
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                    @else
                                                                        {{-- Regular Data --}}
                                                                        @php
                                                                            $nilai = $row['yearly_data'][$year]['nilai'];
                                                                            $kesimpulan = $row['yearly_data'][$year]['kesimpulan'];
                                                                            
                                                                            // Ambil kata_positif dan kata_negatif dari yearly_data atau row level
                                                                            $kataPositif = $row['yearly_data'][$year]['kata_positif'] ?? 
                                                                                        $row['scale_data']->kata_positif ?? 
                                                                                        'Tinggi';
                                                                            $kataNegatif = $row['yearly_data'][$year]['kata_negatif'] ?? 
                                                                                        $row['scale_data']->kata_negatif ?? 
                                                                                        'Rendah';
                                                                            
                                                                            if ($row['jenis'] === 'Linear Scale' && is_numeric($nilai)) {
                                                                                $nilaiFloat = floatval($nilai);
                                                                                if ($nilaiFloat >= 4.5) {
                                                                                    $kesimpulan = 'Sangat ' . $kataPositif;
                                                                                } elseif ($nilaiFloat >= 3.5) {
                                                                                    $kesimpulan = $kataPositif;
                                                                                } elseif ($nilaiFloat >= 2.5) {
                                                                                    $kesimpulan = 'Sedang';
                                                                                } elseif ($nilaiFloat >= 1.5) {
                                                                                    $kesimpulan = $kataNegatif;
                                                                                } else {
                                                                                    $kesimpulan = 'Sangat ' . $kataNegatif;
                                                                                }
                                                                            }
                                                                        @endphp
                                                                        <td>{{ $kesimpulan }}</td>
                                                                        <td class="text-end">{{ $nilai }}</td>
                                                                    @endif
                                                                @endforeach

                                                                {{-- Rata-rata Column --}}
                                                                <td class="text-end" style="padding: 8px;">
                                                                    @if(isset($row['vendor_averages']) && count($row['vendor_averages']) > 0)
                                                                        @php
                                                                            // Cari nilai tertinggi dan terendah untuk kolom rata-rata
                                                                            $avgValues = array_column($row['vendor_averages'], 'avg');
                                                                            $avgValues = array_filter($avgValues, function($v) { return is_numeric($v) && $v != '-'; });
                                                                            $maxAvg = !empty($avgValues) ? max($avgValues) : null;
                                                                            $minAvg = !empty($avgValues) ? min($avgValues) : null;
                                                                        @endphp
                                                                        @foreach($row['vendor_averages'] as $index => $vAvg)
                                                                            @php
                                                                                $currentAvg = $vAvg['avg'];
                                                                                $colorAvg = '#000'; // Default hitam
                                                                                if (is_numeric($currentAvg) && $currentAvg != '-') {
                                                                                    if ($currentAvg == $maxAvg && $maxAvg != $minAvg) {
                                                                                        $colorAvg = '#28a745'; // Hijau untuk tertinggi
                                                                                    } elseif ($currentAvg == $minAvg && $maxAvg != $minAvg) {
                                                                                        $colorAvg = '#dc3545'; // Merah untuk terendah
                                                                                    }
                                                                                }
                                                                            @endphp
                                                                            <div style="padding: 4px 0; {{ $index < count($row['vendor_averages']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                <strong style="color: {{ $colorAvg }}; font-size: 0.9em;">{{ $vAvg['name'] }}:</strong> 
                                                                                <span style="font-weight: 600; color: {{ $colorAvg }};">{{ $currentAvg }}</span>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        {{ $row['rata_rata_pertanyaan'] }}
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                        @php
                                                            $hasLinearScale = false;
                                                            foreach($analisis_summary as $row) {
                                                                if($row['jenis'] === 'Linear Scale') {
                                                                    $hasLinearScale = true;
                                                                    break;
                                                                }
                                                            }
                                                        @endphp

                                                        @if($hasLinearScale)
                                                            <tfoot style="background-color: #c8f5f7;">
                                                                <tr class="fw-bold">
                                                                    <td colspan="3" class="text-end">Rata-rata:</td>
                                                                    @foreach($analysis_years as $year)
                                                                        <td colspan="2" class="text-end">{{ $yearly_averages[$year] ?? '-' }}</td>
                                                                    @endforeach
                                                                    <td class="text-end">{{ $overall_linear_average }}</td>
                                                                </tr>
                                                            </tfoot>
                                                        @endif
                                                </table>
                                            {{--  analisi year --}}
                                            @elseif(isset($periode_filter) && $periode_filter === 'year')
                                                <table class="table table-bordered table-hover" id="analisis-table">
                                                    <thead style="background-color: #c8f5f7;">
                                                        <tr>
                                                            <th rowspan="2" style="width: 5%; vertical-align: middle;">No</th>
                                                            <th rowspan="2" style="width: 30%; vertical-align: middle;">Pertanyaan</th>
                                                            <th rowspan="2" style="width: 10%; vertical-align: middle;">Tipe</th>
                                                            @foreach($analysis_surveys as $survey)
                                                                <th colspan="2" class="text-center">{{ $survey->subjudul }}</th>
                                                            @endforeach
                                                            <th rowspan="2" style="width: 8%; vertical-align: middle;">Rata-rata</th>
                                                        </tr>
                                                        <tr>
                                                            @foreach($analysis_surveys as $survey)
                                                                <th style="width: 15%;">Kesimpulan</th>
                                                                <th style="width: 8%;">Nilai</th>
                                                            @endforeach
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($analisis_summary as $row)
                                                            <tr>
                                                                <td class="text-center">{{ $row['no'] }}</td>
                                                                <td>{!! strip_tags($row['soal']) !!}</td>
                                                                <td>{{ $row['jenis'] }}</td>
                                                                
                                                                @foreach($analysis_surveys as $survey)
                                                                    @if(isset($row['survey_data'][$survey->idsurvei]['is_group']) && $row['survey_data'][$survey->idsurvei]['is_group'])
                                                                        {{-- Group Linear Scale - Data per Vendor --}}
                                                                        <td style="padding: 8px;">
                                                                            @if(isset($row['survey_data'][$survey->idsurvei]['vendor_data']))
                                                                                @foreach($row['survey_data'][$survey->idsurvei]['vendor_data'] as $index => $vData)
                                                                                    <div style="padding: 4px 0; {{ $index < count($row['survey_data'][$survey->idsurvei]['vendor_data']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                        {{ $vData['vendor_name'] }}:
                                                                                    </div>
                                                                                @endforeach
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                        <td class="text-end" style="padding: 8px;">
                                                                            @if(isset($row['survey_data'][$survey->idsurvei]['vendor_data']))
                                                                                @php
                                                                                    // Cari nilai tertinggi dan terendah untuk survey ini
                                                                                    $surveyValues = array_column($row['survey_data'][$survey->idsurvei]['vendor_data'], 'avg');
                                                                                    $surveyValues = array_filter($surveyValues, function($v) { return is_numeric($v) && $v != '-'; });
                                                                                    $maxValue = !empty($surveyValues) ? max($surveyValues) : null;
                                                                                    $minValue = !empty($surveyValues) ? min($surveyValues) : null;
                                                                                @endphp
                                                                                @foreach($row['survey_data'][$survey->idsurvei]['vendor_data'] as $index => $vData)
                                                                                    @php
                                                                                        $currentValue = $vData['avg'];
                                                                                        $color = '#000'; // Default hitam
                                                                                        if (is_numeric($currentValue) && $currentValue != '-') {
                                                                                            if ($currentValue == $maxValue && $maxValue != $minValue) {
                                                                                                $color = '#28a745'; // tertinggi
                                                                                            } elseif ($currentValue == $minValue && $maxValue != $minValue) {
                                                                                                $color = '#dc3545'; // terendah
                                                                                            }
                                                                                        }
                                                                                    @endphp
                                                                                    <div style="padding: 4px 0; {{ $index < count($row['survey_data'][$survey->idsurvei]['vendor_data']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                        <span style="font-weight: 600; color: {{ $color }};">{{ $currentValue }}</span>
                                                                                    </div>
                                                                                @endforeach
                                                                            @else
                                                                                -
                                                                            @endif
                                                                        </td>
                                                                    @else
                                                                        {{-- Regular Data --}}
                                                                        @php
                                                                            $nilai = $row['survey_data'][$survey->idsurvei]['nilai'];
                                                                            $kesimpulan = $row['survey_data'][$survey->idsurvei]['kesimpulan'];
                                                                            
                                                                            // Ambil kata_positif dan kata_negatif dari survey_data atau row level
                                                                            $kataPositif = $row['survey_data'][$survey->idsurvei]['kata_positif'] ?? 
                                                                                        $row['scale_data']->kata_positif ?? 
                                                                                        'Tinggi';
                                                                            $kataNegatif = $row['survey_data'][$survey->idsurvei]['kata_negatif'] ?? 
                                                                                        $row['scale_data']->kata_negatif ?? 
                                                                                        'Rendah';
                                                                            
                                                                            if ($row['jenis'] === 'Linear Scale' && is_numeric($nilai)) {
                                                                                $nilaiFloat = floatval($nilai);
                                                                                if ($nilaiFloat >= 4.5) {
                                                                                    $kesimpulan = 'Sangat ' . $kataPositif;
                                                                                } elseif ($nilaiFloat >= 3.5) {
                                                                                    $kesimpulan = $kataPositif;
                                                                                } elseif ($nilaiFloat >= 2.5) {
                                                                                    $kesimpulan = 'Sedang';
                                                                                } elseif ($nilaiFloat >= 1.5) {
                                                                                    $kesimpulan = $kataNegatif;
                                                                                } else {
                                                                                    $kesimpulan = 'Sangat ' . $kataNegatif;
                                                                                }
                                                                            }
                                                                        @endphp
                                                                        <td>{{ $kesimpulan }}</td>
                                                                        <td class="text-end">{{ $nilai }}</td>
                                                                    @endif
                                                                @endforeach

                                                                {{-- Rata-rata Column --}}
                                                                <td class="text-end" style="padding: 8px;">
                                                                    @if(isset($row['vendor_averages']) && count($row['vendor_averages']) > 0)
                                                                        @php
                                                                            // Cari nilai tertinggi dan terendah untuk kolom rata-rata
                                                                            $avgValues = array_column($row['vendor_averages'], 'avg');
                                                                            $avgValues = array_filter($avgValues, function($v) { return is_numeric($v) && $v != '-'; });
                                                                            $maxAvg = !empty($avgValues) ? max($avgValues) : null;
                                                                            $minAvg = !empty($avgValues) ? min($avgValues) : null;
                                                                        @endphp
                                                                        @foreach($row['vendor_averages'] as $index => $vAvg)
                                                                            @php
                                                                                $currentAvg = $vAvg['avg'];
                                                                                $colorAvg = '#000'; // Default hitam
                                                                                if (is_numeric($currentAvg) && $currentAvg != '-') {
                                                                                    if ($currentAvg == $maxAvg && $maxAvg != $minAvg) {
                                                                                        $colorAvg = '#28a745'; // Hijau untuk tertinggi
                                                                                    } elseif ($currentAvg == $minAvg && $maxAvg != $minAvg) {
                                                                                        $colorAvg = '#dc3545'; // Merah untuk terendah
                                                                                    }
                                                                                }
                                                                            @endphp
                                                                            <div style="padding: 4px 0; {{ $index < count($row['vendor_averages']) - 1 ? 'border-bottom: 1px solid #e0e0e0;' : '' }}">
                                                                                <strong style="color: {{ $colorAvg }}; font-size: 0.9em;">{{ $vAvg['name'] }}:</strong> 
                                                                                <span style="font-weight: 600; color: {{ $colorAvg }};">{{ $currentAvg }}</span>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        {{ $row['rata_rata_pertanyaan'] }}
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                    @php
                                                        $hasLinearScale = false;
                                                        foreach($analisis_summary as $row) {
                                                            if($row['jenis'] === 'Linear Scale') {
                                                                $hasLinearScale = true;
                                                                break;
                                                            }
                                                        }
                                                    @endphp

                                                    @if($hasLinearScale)
                                                        <tfoot style="background-color: #c8f5f7;">
                                                            <tr class="fw-bold">
                                                                <td colspan="3" class="text-end">Rata-rata:</td>
                                                                @foreach($analysis_surveys as $survey)
                                                                    <td colspan="2" class="text-end">{{ $survey_averages[$survey->idsurvei]['average'] ?? '-' }}</td>
                                                                @endforeach
                                                                <td class="text-end">{{ $overall_linear_average }}</td>
                                                            </tr>
                                                        </tfoot>
                                                    @endif
                                                </table>

                                            @else
                                                {{-- SINGLE SURVEY --}}
                                                <table class="table table-bordered table-hover" id="analisis-table">
                                                <thead style="background-color: #c8f5f7;">
                                                    <tr>
                                                        <th style="width: 5%;">No</th>
                                                        <th style="width: 25%;">Pertanyaan</th>
                                                        <th style="width: 12%;">Tipe</th>
                                                        <th style="width: 30%;">Kesimpulan</th>
                                                        <th style="width: 28%; text-align: center;">Nilai</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($analisis_summary as $index => $summary)
                                                        <tr>
                                                            <td class="text-center" style="vertical-align: top;">{{ $index + 1 }}</td>
                                                            <td style="vertical-align: top;">{!! strip_tags($summary['soal']) !!}</td>
                                                            <td style="vertical-align: top;">{{ $summary['jenis'] }}</td>
                                                            <td style="vertical-align: top;">{!! $summary['kesimpulan'] !!}</td>
                                                            <td class="text-end" style="vertical-align: top;">{!! $summary['nilai'] !!}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                                @php
                                                    $hasLinearScaleSingle = false;
                                                    foreach($analisis_summary as $summary) {
                                                        if($summary['jenis'] === 'Linear Scale') {
                                                            $hasLinearScaleSingle = true;
                                                            break;
                                                        }
                                                    }
                                                @endphp

                                                @if($hasLinearScaleSingle)
                                                    <tfoot style="background-color: #e3f2fd;">
                                                        <tr class="fw-bold">
                                                            <td colspan="4" class="text-end">Rata-rata:</td>
                                                            <td class="text-end">
                                                                {{ $overall_linear_average }}
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                @endif
                                                </table>
                                            @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- Detail Card - Multi-year view --}}
                                @if(isset($periode_filter) && $periode_filter === '3years')
                                    @if(isset($multi_year_data) && isset($multi_year_data['pertanyaan']) && count($multi_year_data['pertanyaan']) > 0)
                                        <div class="row px-4 py-2">
                                            <div class="col-md-12 mb-4">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h4 class="mb-0">Detail - Perbandingan 3 Tahun</h4>
                                                        <hr class="horizontal dark mt-2 mb-4">
                                                        @foreach($multi_year_data['pertanyaan'] as $index => $pertanyaan)
                                                            <div class="card mb-4">
                                                                <div class="card-body">
                                                                    {{-- Header Pertanyaan dengan Tabs --}}
                                                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                                                        <div>
                                                                            <h5 class="mb-2">
                                                                            {{ $index + 1 }}. {{ strip_tags($pertanyaan->soal) }}
                                                                                @if($pertanyaan->required)
                                                                                    <span style="color: #dc3545;">*</span>
                                                                                @endif
                                                                            </h5>
                                                                        </div>

                                                                        {{-- Year Tabs for Each Question --}}
                                                                        <div class="btn-group" role="group">
                                                                            <button type="button" class="btn btn-primary btn-sm active"
                                                                                onclick="switchQuestionYear({{ $index }}, 'semua')">
                                                                                Semua
                                                                            </button>
                                                                            @foreach($multi_year_data['years'] as $year)
                                                                                <button type="button" class="btn btn-outline-primary btn-sm"
                                                                                    onclick="switchQuestionYear({{ $index }}, '{{ $year }}')">
                                                                                    {{ $year }}
                                                                                </button>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>

                                    {{-- Content for each year per question --}}
                                    @foreach(['semua', ...$multi_year_data['years']] as $yearTab)
                                        <div class="question-year-content" 
                                             data-question="{{ $index }}"
                                             data-year="{{ $yearTab }}"
                                             style="{{ $yearTab === 'semua' ? '' : 'display: none;' }}">

                                            @php
                                                $questionData = $yearTab === 'semua'
                                                    ? $multi_year_data['semua_data'][$index]
                                                    : $multi_year_data['yearly_data'][$yearTab]['questions'][$index];

                                                $hasSurveys = $yearTab === 'semua'
                                                    || $multi_year_data['yearly_data'][$yearTab]['surveys']->count() > 0;
                                            @endphp

                                            @if(!$hasSurveys || !$questionData['aggregated_data'])
                                                {{-- Data Tidak Ditemukan --}}
                                                <div class="text-center py-5">
                                                    <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                    <p class="text-muted mb-0">Maaf, tidak ada data untuk tahun {{ $yearTab }}</p>
                                                </div>
                                            @else
                                                @php $aggregated = $questionData['aggregated_data']; @endphp

                                                {{-- LINEAR SCALE --}}
                                                @if($pertanyaan->jenis === 'linear_scale')
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-linear-multi-{{ $index }}-{{ $yearTab }}">
                                                                    <thead style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No</th>
                                                                            <th>Skala</th>
                                                                            <th>Label</th>
                                                                            <th>Jumlah Respons</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach(['1', '2', '3', '4', '5'] as $scaleIdx => $scale)
                                                                            <tr>
                                                                                <td>{{ $scaleIdx + 1 }}</td>
                                                                                <td>
                                                                                    {{ $scale }}.0
                                                                                </td>
                                                                                <td>
                                                                                    @php
                                                                                        $scaleData = $yearTab === 'semua' 
                                                                                            ? $multi_year_data['semua_data'][$index]['scale_data']
                                                                                            : $multi_year_data['yearly_data'][$yearTab]['questions'][$index]['scale_data'];
                                                                                    @endphp
                                                                                    @if($scaleData)
                                                                                        @if($scale == '1')
                                                                                            Sangat {{ $scaleData->kata_negatif ?? 'Rendah' }}
                                                                                        @elseif($scale == '2')
                                                                                            {{ $scaleData->kata_negatif ?? 'Rendah' }}
                                                                                        @elseif($scale == '3')
                                                                                            Sedang
                                                                                        @elseif($scale == '4')
                                                                                            {{ $scaleData->kata_positif ?? 'Tinggi' }}
                                                                                        @elseif($scale == '5')
                                                                                            Sangat {{ $scaleData->kata_positif ?? 'Tinggi' }}
                                                                                        @endif
                                                                                    @endif
                                                                                </td>
                                                                                <td class="text-end">{{ $aggregated['distribusi'][$scale] }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div style="height: 300px; position: relative;">
                                                                <canvas id="linearChart{{ $yearTab }}{{ $index }}"></canvas>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="card-footer bg-light mt-3">
                                                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                        <p class="mb-1">
                                                            <strong>Jumlah Responden:</strong> {{ $aggregated['total_responden'] }} orang
                                                        </p>
                                                        <p class="mb-0">
                                                            <strong>Rata-rata:</strong> 
                                                            {{ $aggregated['rata_rata'] }}
                                                            @if(isset($aggregated['rata_rata_label']) && $aggregated['rata_rata_label'] !== '-')
                                                                <span class="text-muted">({{ $aggregated['rata_rata_label'] }})</span>
                                                            @endif
                                                        </p>
                                                    </div>
                                                @endif

                                                {{-- CHECKBOX --}}
                                                @if($pertanyaan->jenis === 'checkbox')
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-checkbox-multi-{{ $index }}-{{ $yearTab }}">
                                                                    <thead style="background-color: #c8f5f7;">
                                                                        <tr>
                                                                            <th>No</th>
                                                                            <th>Pilihan</th>
                                                                            <th>Jumlah</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                            <tr>
                                                                                <td>{{ $statIdx + 1 }}</td>
                                                                                <td>{{ $stat['label'] }}</td>
                                                                                <td class="text-end">{{ $stat['count'] }}</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div style="height: 300px; position: relative;">
                                                                <canvas id="checkboxChart{{ $yearTab }}{{ $index }}"></canvas>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    {{-- Footer Kesimpulan --}}
                                                    <div class="card-footer bg-light mt-3">
                                                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                        <p class="mb-1"><strong>Top 3 Pilihan Terbanyak:</strong></p>
                                                        <ol class="mb-0">
                                                            @foreach($aggregated['top3'] as $top)
                                                                <li>{{ $top['label'] }} - <strong>{{ $top['count'] }}</strong> responden</li>
                                                            @endforeach
                                                        </ol>
                                                    </div>
                                                @endif

                                                {{-- TEXT --}}
                                                @if($pertanyaan->jenis === 'text')
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            @if(isset($aggregated['responses']) && count($aggregated['responses']) > 0)
                                                                <div class="table-responsive mt-3">
                                                                    <table class="table table-bordered table-text-multi-{{ $index }}-{{ $yearTab }}">
                                                                        <thead style="background-color: #c8f5f7;">
                                                                            <tr>
                                                                                <th>No</th>
                                                                                <th>Nama</th>
                                                                                <th>Dept</th>
                                                                                <th>Jawaban</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            @foreach($aggregated['responses'] as $respIndex => $response)
                                                                                <tr>
                                                                                    <td>{{ $respIndex + 1 }}</td>
                                                                                    <td>{{ $response->nama }}</td>
                                                                                    <td>{{ $response->nama_departemen }}</td>
                                                                                    <td>{{ $response->jawaban }}</td>
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            @else
                                                                <p class="text-muted mt-2">Tidak ada jawaban</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    
                                                    {{-- Footer Kesimpulan --}}
                                                    <div class="card-footer bg-light mt-3">
                                                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                        <p class="mb-0">
                                                            <strong>Total Respons yang Menjawab:</strong> {{ $aggregated['total_responden'] }} orang
                                                        </p>
                                                    </div>
                                                @endif

                                                {{-- PILIHAN TEXT --}}
                                                @if($pertanyaan->jenis === 'pilihan_text')
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="table-responsive">
                                                                <table class="table table-bordered table-pilihan-multi-{{ $index }}-{{ $yearTab }}">
                                                                    <thead style="background-color: #c8f5f7;">
                                                                        <tr>
                                                                            <th>No</th>
                                                                            <th>Pilihan</th>
                                                                            <th>Jumlah</th>
                                                                            <th>Persentase</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                            <tr>
                                                                                <td>{{ $statIdx + 1 }}</td>
                                                                                <td>{{ $stat['label'] }}</td>
                                                                                <td class="text-end">{{ $stat['count'] }}</td>
                                                                                <td class="text-end">{{ $stat['percentage'] }}%</td>
                                                                            </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div style="height: 300px; position: relative;">
                                                                <canvas id="pilihanChart{{ $yearTab }}{{ $index }}"></canvas>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    {{-- Footer Kesimpulan --}}
                                                    <div class="card-footer bg-light mt-3">
                                                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                        <p class="mb-2">
                                                            <strong>Total Respons:</strong> {{ $aggregated['total_responden'] }} orang
                                                        </p>
                                                        <p class="mb-1"><strong>Distribusi Jawaban:</strong></p>
                                                        <ul class="list-unstyled mb-0">
                                                            @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                <li class="mb-1">
                                                                    <span class="badge" 
                                                                        style="background-color: {{ ['#9B8AFB', '#FF9AA2', '#5DD9E8', '#FFD93D', '#6BCB77', '#FF6B9D'][$statIdx % 6] }}; min-width: 60px;">
                                                                        {{ $stat['percentage'] }}%
                                                                    </span>
                                                                    {{ $stat['label'] }} ({{ $stat['count'] }} respons)
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                @endif
                                                {{-- GROUP LINEAR SCALE --}}
                                                @if($pertanyaan->jenis === 'group_linear_scale')
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            @if($aggregated && isset($aggregated['vendors']) && isset($aggregated['questions']))
                                                                {{-- Keterangan Kriteria --}}
                                                                <div class="card mb-3" style="background-color: #f8f9fa; border-left: 4px solid #00acc1;">
                                                                    <div class="card-body py-2">
                                                                        <h6 class="mb-2"><strong>Keterangan Kriteria Penilaian:</strong></h6>
                                                                        <div class="row">
                                                                            @foreach($aggregated['questions'] as $idx => $question)
                                                                                <div class="col-md-6 mb-1">
                                                                                    <strong>{{ $idx + 1 }}.</strong> {{ $question->label }}
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                @php
                                                                    $vendorCount = count($aggregated['vendors']);
                                                                    $questionCount = count($aggregated['questions']);
                                                                    $colsPerVendor = $questionCount + 1;
                                                                    $totalDataCols = $vendorCount * $colsPerVendor;
                                                                @endphp

                                                                <div class="table-responsive">
                                                                    <table class="table table-bordered table-group-multi-{{ $index }}-{{ $yearTab }}">
                                                                            <thead style="background-color: #c8f5f7;">
                                                                                @php
                                                                                    $vendorCount = count($aggregated['vendors']);
                                                                                    $questionCount = count($aggregated['questions']);
                                                                                    $colsPerVendor = $questionCount + 1;
                                                                                    $totalDataCols = $vendorCount * $colsPerVendor;
                                                                                    
                                                                                    // Calculate dynamic widths
                                                                                    $noWidth = 3;
                                                                                    $namaWidth = 12;
                                                                                    $deptWidth = 10;
                                                                                    $remainingWidth = 100 - $noWidth - $namaWidth - $deptWidth;
                                                                                    $questionWidth = round(($remainingWidth * 0.7) / ($questionCount * $vendorCount), 1);
                                                                                    $totalWidth = round(($remainingWidth * 0.3) / $vendorCount, 1);
                                                                                @endphp
                                                                                <tr>
                                                                                    <th rowspan="3" style="width: {{ $noWidth }}%; min-width: 40px; vertical-align: middle; text-align: center;">No</th>
                                                                                    <th rowspan="3" style="width: {{ $namaWidth }}%; min-width: 120px; vertical-align: middle; text-align: center;">Nama</th>
                                                                                    <th rowspan="3" style="width: {{ $deptWidth }}%; min-width: 100px; vertical-align: middle; text-align: center;">Dept</th>
                                                                                    <th colspan="{{ $totalDataCols }}" 
                                                                                        style="text-align: center; vertical-align: middle; min-width: {{ $totalDataCols * 50 }}px;">
                                                                                        Hasil Survei (Rata-rata {{ $yearTab === 'semua' ? 'Keseluruhan' : 'Tahun ' . $yearTab }})
                                                                                    </th>
                                                                                </tr>
                                                                                <tr>
                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                        <th colspan="{{ $colsPerVendor }}" 
                                                                                            style="text-align: center; vertical-align: middle; min-width: {{ $colsPerVendor * 50 }}px;">
                                                                                            {{ $vendor->label }}
                                                                                        </th>
                                                                                    @endforeach
                                                                                </tr>
                                                                                <tr>
                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                        @foreach($aggregated['questions'] as $idx => $question)
                                                                                            <th style="width: {{ $questionWidth }}%; min-width: 50px; text-align: center;">{{ $idx + 1 }}</th>
                                                                                        @endforeach
                                                                                        <th style="width: {{ $totalWidth }}%; min-width: 60px; text-align: center; background-color: #b3e5fc;">Total</th>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </thead>
                                                                        <tbody>
                                                                            @php $no = 1; @endphp
                                                                            @foreach($aggregated['user_responses'] as $userId => $userData)
                                                                                <tr>
                                                                                    <td class="text-center">{{ $no++ }}</td>
                                                                                    <td>{{ $userData['nama'] }}</td>
                                                                                    <td>{{ $userData['nama_departemen'] }}</td>
                                                                    
                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                        @php $vendorAnswers = []; @endphp
                                                                                        
                                                                                        @foreach($aggregated['questions'] as $question)
                                                                                            @php
                                                                                                $answer = $userData['answers'][$vendor->id][$question->id] ?? '-';
                                                                                                if (is_numeric($answer)) {
                                                                                                    $vendorAnswers[] = floatval($answer);
                                                                                                }
                                                                                            @endphp
                                                                                            <td class="text-end">{{ $answer }}</td>
                                                                                        @endforeach
                                                                                        
                                                                                        {{-- Total (Rata-rata) --}}
                                                                                        <td class="text-end" style="background-color: #e1f5fe; font-weight: bold;">
                                                                                            @if(count($vendorAnswers) > 0)
                                                                                                {{ number_format(array_sum($vendorAnswers) / count($vendorAnswers), 1) }}
                                                                                            @else
                                                                                                -
                                                                                            @endif
                                                                                        </td>
                                                                                    @endforeach
                                                                                </tr>
                                                                            @endforeach
                                                                        </tbody>
                                                                            <tr style="background-color: #e0f7fa; border-top: 2px solid #00acc1; border-bottom: 2px solid #00acc1;">
                                                                                <td class="text-center"></td>
                                                                                <td></td>
                                                                                <td class="text-end fw-bold py-2">Rata-rata</td>
                                                                                @foreach($aggregated['vendors'] as $vendor)
                                                                                    @foreach($aggregated['questions'] as $question)
                                                                                        <td class="text-end fw-bold">
                                                                                            {{ $aggregated['averages'][$vendor->id][$question->id] ?? '-' }}
                                                                                        </td>
                                                                                    @endforeach
                                                                                    {{-- Total rata-rata per vendor --}}
                                                                                    <td class="text-end fw-bold" style="background-color: #b3e5fc;">
                                                                                        @php
                                                                                            $vendorAvgs = [];
                                                                                            foreach($aggregated['questions'] as $q) {
                                                                                                $val = $aggregated['averages'][$vendor->id][$q->id] ?? '-';
                                                                                                if(is_numeric($val)) {
                                                                                                    $vendorAvgs[] = floatval($val);
                                                                                                }
                                                                                            }
                                                                                        @endphp
                                                                                        @if(count($vendorAvgs) > 0)
                                                                                            {{ number_format(array_sum($vendorAvgs) / count($vendorAvgs), 1) }}
                                                                                        @else
                                                                                            -
                                                                                        @endif
                                                                                    </td>
                                                                                @endforeach
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                
                                                            @else
                                                                <p class="text-muted mt-2">Tidak ada data untuk pertanyaan ini</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                                    <div class="row mb-4">
                    <div class="col-md-12">
                        <h6 class="mb-2"><strong>Ringkasan Rata-rata Per Kategori</strong></h6>
                        <div class="table-responsive">
                            <table class="table table-bordered table-group-summary-multi-{{ $index }}-{{ $yearTab }}" style="width: 100%;">
                                <thead style="background-color: #c8f5f7;">
                                    <tr>
                                        <th rowspan="2" style="width: 5%; vertical-align: middle; text-align: center;">No</th>
                                        <th rowspan="2" style="width: 30%; vertical-align: middle; text-align: center;">Kategori Penilaian</th>
                                        <th colspan="{{ count($aggregated['vendors']) }}" style="text-align: center; vertical-align: middle;">
                                            Nilai (Rata-rata)
                                        </th>
                                    </tr>
                                    <tr>
                                        @foreach($aggregated['vendors'] as $vendor)
                                            <th style="width: {{ 65 / count($aggregated['vendors']) }}%; text-align: center;">
                                                {{ $vendor->label }}
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($aggregated['questions'] as $qIndex => $question)
                                        <tr>
                                            <td class="text-center">{{ $qIndex + 1 }}</td>
                                            <td>{{ $question->label }}</td>
                                            @foreach($aggregated['vendors'] as $vendor)
                                                <td class="text-center">
                                                    {{ $aggregated['averages'][$vendor->id][$question->id] ?? '-' }}
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot style="background-color: #e0f7fa;">
                                    <tr class="fw-bold">
                                        <td colspan="2" class="text-end">Rata-rata Per Vendor:</td>
                                        @foreach($aggregated['vendors'] as $vendor)
                                            @php
                                                $vendorValues = [];
                                                foreach($aggregated['questions'] as $q) {
                                                    $val = $aggregated['averages'][$vendor->id][$q->id] ?? '-';
                                                    if(is_numeric($val)) {
                                                        $vendorValues[] = floatval($val);
                                                    }
                                                }
                                                $vendorAvg = count($vendorValues) > 0
                                                    ? number_format(array_sum($vendorValues) / count($vendorValues), 1)
                                                    : '-';
                                            @endphp
                                            <td class="text-center">{{ $vendorAvg }}</td>
                                        @endforeach
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                                                    <div class="row mt-4">
                                                        <div class="col-md-12">
                                                            <h6 class="mb-3"><strong>Grafik Perbandingan Per Vendor ({{ $yearTab === 'semua' ? 'Keseluruhan' : 'Tahun ' . $yearTab }})</strong></h6>
                                                                <div style="height: 400px; position: relative;">
                                                                    <canvas id="groupLinearChart{{ $yearTab }}{{ $index }}"></canvas>
                                                            </div>
                                                        </div>
                                                    </div>
    
                                                    {{-- Footer Kesimpulan --}}
                                                    <div class="card-footer bg-light mt-3">
                                                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                        @if($aggregated && is_array($aggregated))
                                                            <p class="mb-2">
                                                                <strong>Total Respons:</strong> {{ $aggregated['total_responden'] ?? count($aggregated['user_responses'] ?? []) }} orang<br>
                                                                <strong>Periode:</strong> {{ $yearTab === 'semua' ? 'Keseluruhan (' . implode(', ', $multi_year_data['years']) . ')' : 'Tahun ' . $yearTab }}
                                                            </p>
                                                            
                                                            @if(isset($aggregated['top_vendor_per_question']) && is_array($aggregated['top_vendor_per_question']) && count($aggregated['top_vendor_per_question']) > 0)
                                                                <hr class="my-3">
                                                                <h6 class="mb-2"><strong>Top Vendor per Pertanyaan:</strong></h6>
                                                                <ol class="mb-0" style="line-height: 1.8;">
                                                                    @foreach($aggregated['top_vendor_per_question'] as $questionId => $topData)
                                                                        @if(isset($topData['highest']) && isset($topData['lowest']))
                                                                            <li class="mb-2">
                                                                                <strong>{{ $topData['question_label'] ?? 'N/A' }}:</strong><br>
                                                                                <span style="padding-left: 20px; display: block;">
                                                                                    - Tertinggi: 
                                                                                    <span style="color: #28a745; font-weight: 600;">
                                                                                        {{ isset($topData['highest']['vendors']) ? implode(', ', $topData['highest']['vendors']) : 'N/A' }}
                                                                                    </span> 
                                                                                    ({{ isset($topData['highest']['value']) ? number_format($topData['highest']['value'], 1) : '-' }})<br>
                                                                                    - Terendah: 
                                                                                    <span style="color: #dc3545; font-weight: 600;">
                                                                                        {{ isset($topData['lowest']['vendors']) ? implode(', ', $topData['lowest']['vendors']) : 'N/A' }}
                                                                                    </span> 
                                                                                    ({{ isset($topData['lowest']['value']) ? number_format($topData['lowest']['value'], 1) : '-' }})
                                                                                </span>
                                                                            </li>
                                                                        @endif
                                                                    @endforeach
                                                                </ol>
                                                            @endif
                                                            
                                                            @if(isset($aggregated['top_vendor']) && is_array($aggregated['top_vendor']) && isset($aggregated['top_vendor']['vendor_name']))
                                                                <hr class="my-3">
                                                                <div class="card" style="background-color: #e8f5e9; border-left: 4px solid #28a745;">
                                                                    <div class="card-body py-3">
                                                                        <h6 class="mb-2">
                                                                            <strong>Top Vendor Rata-Rata: 
                                                                                <span style="color: #28a745;">{{ $aggregated['top_vendor']['vendor_name'] }}</span>
                                                                            </strong>
                                                                            <span class="badge bg-success ms-2">
                                                                                {{ isset($aggregated['top_vendor']['average']) ? number_format($aggregated['top_vendor']['average'], 1) : '-' }}
                                                                            </span>
                                                                        </h6>
                                                                        
                                                                        <div class="row mt-3">
                                                                            @if(isset($aggregated['top_vendor']['best_questions']) && is_array($aggregated['top_vendor']['best_questions']) && count($aggregated['top_vendor']['best_questions']) > 0)
                                                                                <div class="col-md-6">
                                                                                    <p class="mb-1"><strong style="color: #28a745;">Nilai Terbaik:</strong></p>
                                                                                    <ol class="mb-0" style="font-size: 0.9em;">
                                                                                        @foreach($aggregated['top_vendor']['best_questions'] as $q)
                                                                                            <li>{{ $q }}</li>
                                                                                        @endforeach
                                                                                    </ol>
                                                                                </div>
                                                                            @endif
                                                                            
                                                                            @if(isset($aggregated['top_vendor']['need_improvement']) && is_array($aggregated['top_vendor']['need_improvement']) && count($aggregated['top_vendor']['need_improvement']) > 0)
                                                                                <div class="col-md-6">
                                                                                    <p class="mb-1"><strong style="color: #ff9800;">Perlu Ditingkatkan:</strong></p>
                                                                                    <ol class="mb-0" style="font-size: 0.9em;">
                                                                                        @foreach($aggregated['top_vendor']['need_improvement'] as $q)
                                                                                            <li>{{ $q }}</li>
                                                                                        @endforeach
                                                                                    </ol>
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @else
                                                            <p class="mb-0">Tidak ada data</p>
                                                        @endif
                                                    </div>
                                                                    @endif
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <!-- DETAIL YEAR -->
                        
                        @elseif(isset($periode_filter) && $periode_filter === 'year')
                        @if(isset($year_data) && isset($year_data['pertanyaan']) && count($year_data['pertanyaan']) > 0)
                            <div class="row px-4 py-2">
                                <div class="col-md-12 mb-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="mb-0">Detail - Perbandingan Per Survey Tahun {{ $year_data['reference_year'] }}</h4>
                                            <hr class="horizontal dark mt-2 mb-4">
                                            @foreach($year_data['pertanyaan'] as $index => $pertanyaan)
                                                <div class="card mb-4">
                                                    <div class="card-body">
                                                        {{-- Header Pertanyaan dengan Tabs --}}
                                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                                            <div>
                                                                <h5 class="mb-2">
                                                                {{ $index + 1 }}. {{ strip_tags($pertanyaan->soal) }}
                                                                    @if($pertanyaan->required)
                                                                        <span style="color: #dc3545;">*</span>
                                                                    @endif
                                                                </h5>
                                                            </div>

                                                            {{-- Survey Tabs for Each Question --}}
                                                            <div class="btn-group flex-wrap survey-tabs" role="group">
                                                                <button type="button"
                                                                    class="btn btn-primary btn-sm active"
                                                                    onclick="switchQuestionSurvey({{ $index }}, 'semua')">
                                                                    Semua
                                                                </button>

                                                                @foreach($year_data['surveys'] as $survey)
                                                                    <button type="button"
                                                                        class="btn btn-outline-primary btn-sm"
                                                                        onclick="switchQuestionSurvey({{ $index }}, '{{ $survey->idsurvei }}')">
                                                                        {{ $survey->subjudul }}
                                                                    </button>
                                                                @endforeach
                                                            </div>
                                                        </div>

                                                        {{-- Content for each survey per question --}}
                                                        @foreach(['semua', ...$year_data['surveys']->pluck('idsurvei')->toArray()] as $surveyTab)
                                                            <div class="question-survey-content" 
                                                                data-question="{{ $index }}"
                                                                data-survey="{{ $surveyTab }}"
                                                                style="{{ $surveyTab === 'semua' ? '' : 'display: none;' }}">

                                                                @php
                                                                    $questionData = $surveyTab === 'semua'
                                                                        ? $year_data['semua_data'][$index]
                                                                        : $year_data['survey_data'][$surveyTab]['questions'][$index];

                                                                    $hasSurveyData = $surveyTab === 'semua' || isset($year_data['survey_data'][$surveyTab]);
                                                                @endphp

                                                                @if(!$hasSurveyData || !$questionData['aggregated_data'])
                                                                    {{-- Data Tidak Ditemukan --}}
                                                                    <div class="text-center py-5">
                                                                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                                                        <p class="text-muted mb-0">Maaf, tidak ada data untuk survey ini</p>
                                                                    </div>
                                                                @else
                                                                    @php $aggregated = $questionData['aggregated_data']; @endphp

                                                                    {{-- LINEAR SCALE --}}
                                                                    @if($pertanyaan->jenis === 'linear_scale')
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-linear-year-{{ $index }}-{{ $surveyTab }}">
                                                                                        <thead style="background-color: #00b7bd4f;">
                                                                                            <tr>
                                                                                                <th>No</th>
                                                                                                <th>Skala</th>
                                                                                                <th>Label</th>
                                                                                                <th>Jumlah Respons</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            @foreach(['1', '2', '3', '4', '5'] as $scaleIdx => $scale)
                                                                                                <tr>
                                                                                                    <td>{{ $scaleIdx + 1 }}</td>
                                                                                                    <td>
                                                                                                        {{ $scale }}.0
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        @php
                                                                                                            $scaleData = $surveyTab === 'semua' 
                                                                                                                ? $year_data['semua_data'][$index]['scale_data']
                                                                                                                : $year_data['survey_data'][$surveyTab]['questions'][$index]['scale_data'];
                                                                                                        @endphp
                                                                                                        @if($scaleData)
                                                                                                            @if($scale == '1')
                                                                                                                Sangat {{ $scaleData->kata_negatif ?? 'Rendah' }}
                                                                                                            @elseif($scale == '2')
                                                                                                                {{ $scaleData->kata_negatif ?? 'Rendah' }}
                                                                                                            @elseif($scale == '3')
                                                                                                                Sedang
                                                                                                            @elseif($scale == '4')
                                                                                                                {{ $scaleData->kata_positif ?? 'Tinggi' }}
                                                                                                            @elseif($scale == '5')
                                                                                                                Sangat {{ $scaleData->kata_positif ?? 'Tinggi' }}
                                                                                                            @endif
                                                                                                        @endif
                                                                                                    </td>
                                                                                                    <td class="text-end">{{ $aggregated['distribusi'][$scale] }}</td>
                                                                                                </tr>
                                                                                            @endforeach
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div style="height: 300px; position: relative;">
                                                                                    <canvas id="linearChartYear{{ $surveyTab }}{{ $index }}"></canvas>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        <div class="card-footer bg-light mt-3">
                                                                            <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                            <p class="mb-1">
                                                                                <strong>Jumlah Responden:</strong> {{ $aggregated['total_responden'] }} orang
                                                                            </p>
                                                                            <p class="mb-0">
                                                                                <strong>Rata-rata:</strong> 
                                                                                {{ $aggregated['rata_rata'] }}
                                                                                @if(isset($aggregated['rata_rata_label']) && $aggregated['rata_rata_label'] !== '-')
                                                                                    <span class="text-muted">({{ $aggregated['rata_rata_label'] }})</span>
                                                                                @endif
                                                                            </p>
                                                                        </div>
                                                                    @endif

                                                                    {{-- CHECKBOX --}}
                                                                    @if($pertanyaan->jenis === 'checkbox')
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-checkbox-year-{{ $index }}-{{ $surveyTab }}">
                                                                                        <thead style="background-color: #c8f5f7;">
                                                                                            <tr>
                                                                                                <th>No</th>
                                                                                                <th>Pilihan</th>
                                                                                                <th>Jumlah</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                                                <tr>
                                                                                                    <td>{{ $statIdx + 1 }}</td>
                                                                                                    <td>{{ $stat['label'] }}</td>
                                                                                                    <td class="text-end">{{ $stat['count'] }}</td>
                                                                                                </tr>
                                                                                            @endforeach
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div style="height: 300px; position: relative;">
                                                                                    <canvas id="checkboxChartYear{{ $surveyTab }}{{ $index }}"></canvas>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        {{-- Footer Kesimpulan --}}
                                                                        <div class="card-footer bg-light mt-3">
                                                                            <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                            <p class="mb-1"><strong>Top 3 Pilihan Terbanyak:</strong></p>
                                                                            <ol class="mb-0">
                                                                                @foreach($aggregated['top3'] as $top)
                                                                                    <li>{{ $top['label'] }} - <strong>{{ $top['count'] }}</strong> responden</li>
                                                                                @endforeach
                                                                            </ol>
                                                                        </div>
                                                                    @endif

                                                                    {{-- TEXT --}}
                                                                    @if($pertanyaan->jenis === 'text')
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                @if(isset($aggregated['responses']) && count($aggregated['responses']) > 0)
                                                                                    <div class="table-responsive mt-3">
                                                                                        <table class="table table-bordered table-text-year-{{ $index }}-{{ $surveyTab }}">
                                                                                            <thead style="background-color: #c8f5f7;">
                                                                                                <tr>
                                                                                                    <th>No</th>
                                                                                                    <th>Nama</th>
                                                                                                    <th>Dept</th>
                                                                                                    <th>Jawaban</th>
                                                                                                </tr>
                                                                                            </thead>
                                                                                            <tbody>
                                                                                                @foreach($aggregated['responses'] as $respIndex => $response)
                                                                                                    <tr>
                                                                                                        <td>{{ $respIndex + 1 }}</td>
                                                                                                        <td>{{ $response->nama }}</td>
                                                                                                        <td>{{ $response->nama_departemen }}</td>
                                                                                                        <td>{{ $response->jawaban }}</td>
                                                                                                    </tr>
                                                                                                @endforeach
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                @else
                                                                                    <p class="text-muted mt-2">Tidak ada jawaban</p>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        {{-- Footer Kesimpulan --}}
                                                                        <div class="card-footer bg-light mt-3">
                                                                            <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                            <p class="mb-0">
                                                                                <strong>Total Respons yang Menjawab:</strong> {{ $aggregated['total_responden'] }} orang
                                                                            </p>
                                                                        </div>
                                                                    @endif

                                                                    {{-- PILIHAN TEXT --}}
                                                                    @if($pertanyaan->jenis === 'pilihan_text')
                                                                        <div class="row">
                                                                            <div class="col-md-6">
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-pilihan-year-{{ $index }}-{{ $surveyTab }}">
                                                                                        <thead style="background-color: #c8f5f7;">
                                                                                            <tr>
                                                                                                <th>No</th>
                                                                                                <th>Pilihan</th>
                                                                                                <th>Jumlah</th>
                                                                                                <th>Persentase</th>
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                                                <tr>
                                                                                                    <td>{{ $statIdx + 1 }}</td>
                                                                                                    <td>{{ $stat['label'] }}</td>
                                                                                                    <td class="text-end">{{ $stat['count'] }}</td>
                                                                                                    <td class="text-end">{{ $stat['percentage'] }}%</td>
                                                                                                </tr>
                                                                                            @endforeach
                                                                                        </tbody>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-6">
                                                                                <div style="height: 300px; position: relative;">
                                                                                    <canvas id="pilihanChartYear{{ $surveyTab }}{{ $index }}"></canvas>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        
                                                                        {{-- Footer Kesimpulan --}}
                                                                        <div class="card-footer bg-light mt-3">
                                                                            <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                            <p class="mb-2">
                                                                                <strong>Total Respons:</strong> {{ $aggregated['total_responden'] }} orang
                                                                            </p>
                                                                            <p class="mb-1"><strong>Distribusi Jawaban:</strong></p>
                                                                            <ul class="list-unstyled mb-0">
                                                                                @foreach($aggregated['stats'] as $statIdx => $stat)
                                                                                    <li class="mb-1">
                                                                                        <span class="badge" 
                                                                                            style="background-color: {{ ['#9B8AFB', '#FF9AA2', '#5DD9E8', '#FFD93D', '#6BCB77', '#FF6B9D'][$statIdx % 6] }}; min-width: 60px;">
                                                                                            {{ $stat['percentage'] }}%
                                                                                        </span>
                                                                                        {{ $stat['label'] }} ({{ $stat['count'] }} respons)
                                                                                    </li>
                                                                                @endforeach
                                                                            </ul>
                                                                        </div>
                                                                    @endif

                                                                    {{-- GROUP LINEAR SCALE --}}
                                                                    @if($pertanyaan->jenis === 'group_linear_scale')
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                @if($aggregated && isset($aggregated['vendors']) && isset($aggregated['questions']))
                                                                                    {{-- Keterangan Kriteria --}}
                                                                                    <div class="card mb-3" style="background-color: #f8f9fa; border-left: 4px solid #00acc1;">
                                                                                        <div class="card-body py-2">
                                                                                            <h6 class="mb-2"><strong>Keterangan Kriteria Penilaian:</strong></h6>
                                                                                            <div class="row">
                                                                                                @foreach($aggregated['questions'] as $idx => $question)
                                                                                                    <div class="col-md-6 mb-1">
                                                                                                        <strong>{{ $idx + 1 }}.</strong> {{ $question->label }}
                                                                                                    </div>
                                                                                                @endforeach
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>

                                                                                    @php
                                                                                        $vendorCount = count($aggregated['vendors']);
                                                                                        $questionCount = count($aggregated['questions']);
                                                                                        $colsPerVendor = $questionCount + 1;
                                                                                        $totalDataCols = $vendorCount * $colsPerVendor;
                                                                                    @endphp

                                                                                    <div class="table-responsive">
                                                                                        <table class="table table-bordered table-group-year-{{ $index }}-{{ $surveyTab }}">
                                                                                            <thead style="background-color: #c8f5f7;">
                                                                                                @php
                                                                                                    $vendorCount = count($aggregated['vendors']);
                                                                                                    $questionCount = count($aggregated['questions']);
                                                                                                    $colsPerVendor = $questionCount + 1;
                                                                                                    $totalDataCols = $vendorCount * $colsPerVendor;
                                                                                                    
                                                                                                    // Calculate dynamic widths
                                                                                                    $noWidth = 3;
                                                                                                    $namaWidth = 12;
                                                                                                    $deptWidth = 10;
                                                                                                    $remainingWidth = 100 - $noWidth - $namaWidth - $deptWidth;
                                                                                                    $questionWidth = round(($remainingWidth * 0.7) / ($questionCount * $vendorCount), 1);
                                                                                                    $totalWidth = round(($remainingWidth * 0.3) / $vendorCount, 1);
                                                                                                @endphp
                                                                                                <tr>
                                                                                                    <th rowspan="3" style="width: {{ $noWidth }}%; min-width: 40px; vertical-align: middle; text-align: center;">No</th>
                                                                                                    <th rowspan="3" style="width: {{ $namaWidth }}%; min-width: 120px; vertical-align: middle; text-align: center;">Nama</th>
                                                                                                    <th rowspan="3" style="width: {{ $deptWidth }}%; min-width: 100px; vertical-align: middle; text-align: center;">Dept</th>
                                                                                                    <th colspan="{{ $totalDataCols }}" 
                                                                                                        style="text-align: center; vertical-align: middle; min-width: {{ $totalDataCols * 50 }}px;">
                                                                                                        @if($surveyTab === 'semua')
                                                                                                            Hasil Survei (Rata-rata Keseluruhan Survey)
                                                                                                        @else
                                                                                                            @php
                                                                                                                $currentSurvey = $year_data['surveys']->firstWhere('idsurvei', $surveyTab);
                                                                                                            @endphp
                                                                                                            Hasil Survei - {{ $currentSurvey->subjudul ?? 'Survey' }}
                                                                                                        @endif
                                                                                                    </th>
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                                        <th colspan="{{ $colsPerVendor }}" 
                                                                                                            style="text-align: center; vertical-align: middle; min-width: {{ $colsPerVendor * 50 }}px;">
                                                                                                            {{ $vendor->label }}
                                                                                                        </th>
                                                                                                    @endforeach
                                                                                                </tr>
                                                                                                <tr>
                                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                                        @foreach($aggregated['questions'] as $idx => $question)
                                                                                                            <th style="width: {{ $questionWidth }}%; min-width: 50px; text-align: center;">{{ $idx + 1 }}</th>
                                                                                                        @endforeach
                                                                                                        <th style="width: {{ $totalWidth }}%; min-width: 60px; text-align: center; background-color: #b3e5fc;">Total</th>
                                                                                                    @endforeach
                                                                                                </tr>
                                                                                            </thead>
                                                                                            <tbody>
                                                                                                @php $no = 1; @endphp
                                                                                                @foreach($aggregated['user_responses'] as $userId => $userData)
                                                                                                    <tr>
                                                                                                        <td class="text-center">{{ $no++ }}</td>
                                                                                                        <td>{{ $userData['nama'] }}</td>
                                                                                                        <td>{{ $userData['nama_departemen'] }}</td>
                                                                                        
                                                                                                        @foreach($aggregated['vendors'] as $vendor)
                                                                                                            @php $vendorAnswers = []; @endphp
                                                                                                            
                                                                                                            @foreach($aggregated['questions'] as $question)
                                                                                                                @php
                                                                                                                    $answer = $userData['answers'][$vendor->id][$question->id] ?? '-';
                                                                                                                    if (is_numeric($answer)) {
                                                                                                                        $vendorAnswers[] = floatval($answer);
                                                                                                                    }
                                                                                                                @endphp
                                                                                                                <td class="text-end">{{ $answer }}</td>
                                                                                                            @endforeach
                                                                                                            
                                                                                                            {{-- Total (Rata-rata) --}}
                                                                                                            <td class="text-end" style="background-color: #e1f5fe; font-weight: bold;">
                                                                                                                @if(count($vendorAnswers) > 0)
                                                                                                                    {{ number_format(array_sum($vendorAnswers) / count($vendorAnswers), 1) }}
                                                                                                                @else
                                                                                                                    -
                                                                                                                @endif
                                                                                                            </td>
                                                                                                        @endforeach
                                                                                                    </tr>
                                                                                                @endforeach
                                                                                            </tbody>
                                                                                            <tr style="background-color: #e0f7fa; border-top: 2px solid #00acc1; border-bottom: 2px solid #00acc1;">
                                                                                                    <td class="text-center"></td>
                                                                                                    <td></td>
                                                                                                    <td class="text-end fw-bold py-2">Rata-rata</td>
                                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                                        @foreach($aggregated['questions'] as $question)
                                                                                                            <td class="text-end fw-bold">
                                                                                                                {{ $aggregated['averages'][$vendor->id][$question->id] ?? '-' }}
                                                                                                            </td>
                                                                                                        @endforeach
                                                                                                        {{-- Total rata-rata per vendor --}}
                                                                                                        <td class="text-end fw-bold" style="background-color: #b3e5fc;">
                                                                                                            @php
                                                                                                                $vendorAvgs = [];
                                                                                                                foreach($aggregated['questions'] as $q) {
                                                                                                                    $val = $aggregated['averages'][$vendor->id][$q->id] ?? '-';
                                                                                                                    if(is_numeric($val)) {
                                                                                                                        $vendorAvgs[] = floatval($val);
                                                                                                                    }
                                                                                                                }
                                                                                                            @endphp
                                                                                                            @if(count($vendorAvgs) > 0)
                                                                                                                {{ number_format(array_sum($vendorAvgs) / count($vendorAvgs), 1) }}
                                                                                                            @else
                                                                                                                -
                                                                                                            @endif
                                                                                                        </td>
                                                                                                    @endforeach
                                                                                                </tr>
                                                                                            <</body>
                                                                                            <tfoot>
                                                                                                
                                                                                            </tfoot>
                                                                                        </table>
                                                                                    </div>
                                                                                    
                                                                                @else
                                                                                    <p class="text-muted mt-2">Tidak ada data untuk pertanyaan ini</p>
                                                                                @endif
                                                                            </div>
                                                                        </div>

                                                                        <div class="row mb-4">
                                                                            <div class="col-md-12">
                                                                                <h6 class="mb-2"><strong>Ringkasan Rata-rata Per Kategori</strong></h6>
                                                                                <div class="table-responsive">
                                                                                    <table class="table table-bordered table-group-summary-year-{{ $index }}-{{ $surveyTab }}" style="width: 100%;">
                                                                                        <thead style="background-color: #c8f5f7;">
                                                                                            <tr>
                                                                                                <th rowspan="2" style="width: 5%; vertical-align: middle; text-align: center;">No</th>
                                                                                                <th rowspan="2" style="width: 30%; vertical-align: middle; text-align: center;">Kategori Penilaian</th>
                                                                                                <th colspan="{{ count($aggregated['vendors']) }}" style="text-align: center; vertical-align: middle;">
                                                                                                    Nilai (Rata-rata)
                                                                                                </th>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                @foreach($aggregated['vendors'] as $vendor)
                                                                                                    <th style="width: {{ 65 / count($aggregated['vendors']) }}%; text-align: center;">
                                                                                                        {{ $vendor->label }}
                                                                                                    </th>
                                                                                                @endforeach
                                                                                            </tr>
                                                                                        </thead>
                                                                                        <tbody>
                                                                                            @foreach($aggregated['questions'] as $qIndex => $question)
                                                                                                <tr>
                                                                                                    <td class="text-center">{{ $qIndex + 1 }}</td>
                                                                                                    <td>{{ $question->label }}</td>
                                                                                                    @foreach($aggregated['vendors'] as $vendor)
                                                                                                        <td class="text-center">
                                                                                                            {{ $aggregated['averages'][$vendor->id][$question->id] ?? '-' }}
                                                                                                        </td>
                                                                                                    @endforeach
                                                                                                </tr>
                                                                                            @endforeach
                                                                                        </tbody>
                                                                                        <tfoot style="background-color: #e0f7fa;">
                                                                                            <tr class="fw-bold">
                                                                                                <td colspan="2" class="text-end">Rata-rata Per Vendor:</td>
                                                                                                @foreach($aggregated['vendors'] as $vendor)
                                                                                                    @php
                                                                                                        $vendorValues = [];
                                                                                                        foreach($aggregated['questions'] as $q) {
                                                                                                            $val = $aggregated['averages'][$vendor->id][$q->id] ?? '-';
                                                                                                            if(is_numeric($val)) {
                                                                                                                $vendorValues[] = floatval($val);
                                                                                                            }
                                                                                                        }
                                                                                                        $vendorAvg = count($vendorValues) > 0
                                                                                                            ? number_format(array_sum($vendorValues) / count($vendorValues), 1)
                                                                                                            : '-';
                                                                                                    @endphp
                                                                                                    <td class="text-center">{{ $vendorAvg }}</td>
                                                                                                @endforeach
                                                                                            </tr>
                                                                                        </tfoot>
                                                                                    </table>
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                        <div class="row mt-4">
                                                                            <div class="col-md-12">
                                                                                <h6 class="mb-3">
                                                                                    <strong>Grafik Perbandingan Per Vendor 
                                                                                        @if($surveyTab === 'semua')
                                                                                            (Keseluruhan Survey)
                                                                                        @else
                                                                                            @php
                                                                                                $currentSurvey = $year_data['surveys']->firstWhere('idsurvei', $surveyTab);
                                                                                            @endphp
                                                                                            ({{ $currentSurvey->subjudul ?? 'Survey' }})
                                                                                        @endif
                                                                                    </strong>
                                                                                </h6>
                                                                                <div style="height: 400px; position: relative;">
                                                                                    <canvas id="groupLinearChartYear{{ $surveyTab }}{{ $index }}"></canvas>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                        
                                                                        {{-- Footer Kesimpulan --}}
                                                                        <div class="card-footer bg-light mt-3">
                        <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>

                        @if($aggregated && is_array($aggregated))
                            <p class="mb-2">
                                <strong>Total Respons:</strong>
                                {{ $aggregated['total_responden'] ?? count($aggregated['user_responses'] ?? []) }} orang<br>

                                <strong>Periode:</strong>
                                @if($surveyTab === 'semua')
                                    Keseluruhan Survey ({{ $year_data['surveys']->pluck('subjudul')->implode(', ') }})
                                @else
                                    @php
                                        $currentSurvey = $year_data['surveys']->firstWhere('idsurvei', $surveyTab);
                                    @endphp
                                    {{ $currentSurvey->subjudul ?? 'Survey' }}
                                @endif
                            </p>

                            @if(isset($aggregated['top_vendor_per_question'])
                                && is_array($aggregated['top_vendor_per_question'])
                                && count($aggregated['top_vendor_per_question']) > 0)

                                <hr class="my-3">
                                <h6 class="mb-2"><strong>Top Vendor per Pertanyaan:</strong></h6>

                                <ol class="mb-0" style="line-height: 1.8;">
                                    @foreach($aggregated['top_vendor_per_question'] as $questionId => $topData)
                                        @if(isset($topData['highest']) && isset($topData['lowest']))
                                            <li class="mb-2">
                                                <strong>{{ $topData['question_label'] ?? 'N/A' }}:</strong><br>

                                                <span style="padding-left: 20px; display: block;">
                                                    - Tertinggi:
                                                    <span style="color: #28a745; font-weight: 600;">
                                                        {{ isset($topData['highest']['vendors']) ? implode(', ', $topData['highest']['vendors']) : 'N/A' }}
                                                    </span>
                                                    ({{ isset($topData['highest']['value']) ? number_format($topData['highest']['value'], 1) : '-' }})<br>

                                                    - Terendah:
                                                    <span style="color: #dc3545; font-weight: 600;">
                                                        {{ isset($topData['lowest']['vendors']) ? implode(', ', $topData['lowest']['vendors']) : 'N/A' }}
                                                    </span>
                                                    ({{ isset($topData['lowest']['value']) ? number_format($topData['lowest']['value'], 1) : '-' }})
                                                </span>
                                            </li>
                                        @endif
                                    @endforeach
                                </ol>
                            @endif

                            @if(isset($aggregated['top_vendor']) && is_array($aggregated['top_vendor']) && isset($aggregated['top_vendor']['vendor_name']))
                                <hr class="my-3">
                                <div class="card" style="background-color: #e8f5e9; border-left: 4px solid #28a745;">
                                    <div class="card-body py-3">
                                        <h6 class="mb-2">
                                            <strong>Top Vendor Rata-Rata:
                                                <span style="color: #28a745;">{{ $aggregated['top_vendor']['vendor_name'] }}</span>
                                            </strong>
                                            <span class="badge bg-success ms-2">
                                                {{ isset($aggregated['top_vendor']['average']) ? number_format($aggregated['top_vendor']['average'], 1) : '-' }}
                                            </span>
                                        </h6>

                                        <div class="row mt-3">
                                            @if(isset($aggregated['top_vendor']['best_questions'])
                                                && is_array($aggregated['top_vendor']['best_questions'])
                                                && count($aggregated['top_vendor']['best_questions']) > 0)
                                                <div class="col-md-6">
                                                    <p class="mb-1"><strong style="color: #28a745;">Nilai Terbaik:</strong></p>
                                                    <ol class="mb-0" style="font-size: 0.9em;">
                                                        @foreach($aggregated['top_vendor']['best_questions'] as $q)
                                                            <li>{{ $q }}</li>
                                                        @endforeach
                                                    </ol>
                                                </div>
                                            @endif

                                            @if(isset($aggregated['top_vendor']['need_improvement'])
                                                && is_array($aggregated['top_vendor']['need_improvement'])
                                                && count($aggregated['top_vendor']['need_improvement']) > 0)
                                                <div class="col-md-6">
                                                    <p class="mb-1"><strong style="color: #ff9800;">Perlu Ditingkatkan:</strong></p>
                                                    <ol class="mb-0" style="font-size: 0.9em;">
                                                        @foreach($aggregated['top_vendor']['need_improvement'] as $q)
                                                            <li>{{ $q }}</li>
                                                        @endforeach
                                                    </ol>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @else
                            <p class="mb-0">Tidak ada data</p>
                        @endif
                    </div>

                                                                @endif
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                        <!-- DETAIL SINGLE -->
                        @else
                            <div class="row px-4 py-2">
                                <div class="col-md-12 mb-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4 class="mb-0">Detail</h4>
                                            <hr class="horizontal dark mt-2 mb-4">

                                            @foreach($pertanyaan_list as $index => $pertanyaan)
                                                @if($pertanyaan['jenis'] === 'linear_scale')
                                                    {{-- Linear Scale Question --}}
                                                    <div class="card mb-4">
                                                        <div class="card-body">
                                                            <h5 class="mb-1">
                                                                {{ $index + 1 }}. {!! strip_tags($pertanyaan['soal']) !!}
                                                                @if($pertanyaan['required'])
                                                                    <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                                                                @endif
                                                            </h5>

                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="table-responsive">
                                                                        <table
                                                                            class="table table-bordered table-linear-scale-{{ $index }}">
                                                                            <thead style="background-color: #c8f5f7;">
                                                                                <tr>
                                                                                    <th>No</th>
                                                                                    <th>Nama</th>
                                                                                    <th>Dept</th>
                                                                                    <th style="width: 8%; text-align: center;">Skala</th>
                                                                                    <th>Label</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach($pertanyaan['responses'] as $respIndex => $response)
                                                                                    <tr>
                                                                                        <td>{{ $respIndex + 1 }}</td>
                                                                                        <td>{{ $response->nama }}</td>
                                                                                        <td>{{ $response->nama_departemen }}</td>
                                                                                        <td class="text-center">{{ $response->jawaban }}</td>
                                                                                        <td>{{ $response->jawaban_label }}</td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div style="height: 300px; position: relative;">
                                                                        <canvas id="linearScaleChart{{ $index }}"></canvas>
                                                                    </div>
                                                                </div>   
                                                            </div>
                                                            <hr>
                                                            <div class="card-footer bg-light">
                                                                <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                <p class="mb-1">
                                                                    <strong>Jumlah Respons:</strong> {{ $pertanyaan['stats']['total_responden'] }} orang
                                                                </p>
                                                                <p class="mb-0">
                                                                    <strong>Rata-rata:</strong> 
                                                                    {{ $pertanyaan['stats']['rata_rata'] }}
                                                                    @if(isset($pertanyaan['stats']['rata_rata_label']) && $pertanyaan['stats']['rata_rata_label'] !== '-')
                                                                        <span class="text-muted">({{ $pertanyaan['stats']['rata_rata_label'] }})</span>
                                                                    @endif
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                @elseif($pertanyaan['jenis'] === 'checkbox')
                                                    {{-- Checkbox Question --}}
                                                    <div class="card mb-4">
                                                        <div class="card-body">
                                                            <h5 class="mb-1">
                                                                {{ $index + 1 }}. {!! strip_tags($pertanyaan['soal']) !!}
                                                                @if($pertanyaan['required'])
                                                                    <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                                                                @endif
                                                            </h5>

                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered table-checkbox-{{ $index }}">
                                                                            <thead
                                                                                style="background-color: #c8f5f7;">
                                                                                <tr>
                                                                                    <th>No</th>
                                                                                    <th>Nama</th>
                                                                                    <th>Dept</th>
                                                                                    <th>Jawaban</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach($pertanyaan['grouped_responses'] as $respIndex => $response)
                                                                                    <tr>
                                                                                        <td>{{ $respIndex + 1 }}</td>
                                                                                        <td>{{ $response['nama'] }}</td>
                                                                                        <td>{{ $response['nama_departemen'] }}</td>
                                                                                        <td>{!! $response['jawaban'] !!}</td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div style="height: 300px; position: relative;">
                                                                        <canvas id="checkboxChart{{ $index }}"></canvas>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                            {{-- Footer Kesimpulan --}}
                                                            <div class="card-footer bg-light">
                                                                <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                <p class="mb-1"><strong>Top 3 Pilihan Terbanyak:</strong></p>
                                                                <ol class="mb-0">
                                                                    @foreach($pertanyaan['top3'] as $top)
                                                                        <li>{{ $top['label'] }} - <strong>{{ $top['count'] }}</strong> respons</li>
                                                                    @endforeach
                                                                </ol>
                                                            </div>
                                                        </div>
                                                    </div>

                                                @elseif($pertanyaan['jenis'] === 'text')
                                                    {{-- Text Question --}}
                                                    <div class="card mb-4">
                                                        <div class="card-body">
                                                            <h5 class="mb-1">
                                                                {{ $index + 1 }}. {!! strip_tags($pertanyaan['soal']) !!}
                                                                @if($pertanyaan['required'])
                                                                    <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                                                                @endif
                                                            </h5>

                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered table-text-{{ $index }}">
                                                                            <thead
                                                                                style="background-color: #c8f5f7;">
                                                                                <tr>
                                                                                    <th>No</th>
                                                                                    <th>Nama</th>
                                                                                    <th>Dept</th>
                                                                                    <th>Jawaban</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach($pertanyaan['responses'] as $respIndex => $response)
                                                                                    <tr>
                                                                                        <td>{{ $respIndex + 1 }}</td>
                                                                                        <td>{{ $response->nama }}</td>
                                                                                        <td>{{ $response->nama_departemen }}</td>
                                                                                        <td>{{ $response->jawaban }}</td>
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                            {{-- Footer Kesimpulan --}}
                                                            <div class="card-footer bg-light">
                                                                <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                                                                <p class="mb-0">
                                                                    <strong>Total Respons:</strong> {{ $pertanyaan['total_responden'] }} orang
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                @elseif($pertanyaan['jenis'] === 'pilihan_text')
    {{-- Pilihan + Text Question --}}
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="mb-1">
                {{ $index + 1 }}. {!! strip_tags($pertanyaan['soal']) !!}
                @if($pertanyaan['required'])
                    <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                @endif
            </h5>

            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive">
                        <table class="table table-bordered table-pilihan-{{ $index }}">
                            <thead style="background-color: #c8f5f7;">
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Dept</th>
                                    <th>Pilihan</th>
                                    <th>Penjelasan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pertanyaan['responses'] as $respIndex => $response)
                                    <tr>
                                        <td>{{ $respIndex + 1 }}</td>
                                        <td>{{ $response->nama }}</td>
                                        <td>{{ $response->nama_departemen }}</td>
                                        <td>{{ $response->kalimat_pilihan }}</td>
                                        <td>{{ $response->alasan ?? '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-6">
                    <div style="height: 300px; position: relative;">
                        <canvas id="pilihanChart{{ $index }}"></canvas>
                    </div>
                    <div class="mt-3">
                        <h6 class="mb-2"><strong>Keterangan:</strong></h6>
                        <ul class="list-unstyled mb-0">
                            @foreach($pertanyaan['stats'] as $statIdx => $stat)
                                <li class="mb-2">
                                    <span class="badge d-inline-block" 
                                        style="background-color: {{ ['#9B8AFB', '#FF9AA2', '#5DD9E8', '#FFD93D', '#6BCB77', '#FF6B9D'][$statIdx % 6] }}; 
                                            width: 20px; height: 20px; vertical-align: middle;">
                                    </span>
                                    <strong>{{ $stat['label'] }}</strong> - {{ $stat['percentage'] }}%
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <hr>
            {{-- Footer Kesimpulan --}}
            <div class="card-footer bg-light">
                <h6 class="mb-2"><strong>Kesimpulan:</strong></h6>
                <p class="mb-2">
                    <strong>Total Respons:</strong> {{ $pertanyaan['total_responden'] }} orang
                </p>
                <p class="mb-1"><strong>Distribusi Jawaban:</strong></p>
                <ul class="list-unstyled mb-0">
                    @foreach($pertanyaan['stats'] as $stat)
                        <li class="mb-1">
                            <span class="badge"
                                style="background-color: {{ ['#9B8AFB', '#FF9AA2', '#5DD9E8', '#FFD93D', '#6BCB77', '#FF6B9D'][$loop->index % 6] }}; min-width: 60px;">
                                {{ $stat['percentage'] }}%
                            </span>
                            {{ $stat['label'] }} ({{ $stat['count'] }} respons)
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
                                                @elseif($pertanyaan['jenis'] === 'group_linear_scale')
                                                    {{-- Group Linear Scale Question --}}
                                                    <div class="card mb-4">
                                                        <div class="card-body">
                                                            <h5 class="mb-3">
                                                                {{ $index + 1 }}. {!! strip_tags($pertanyaan['soal']) !!}
                                                                @if($pertanyaan['required'])
                                                                    <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                                                                @endif
                                                            </h5>

                                                            @if(isset($pertanyaan['questions']) && count($pertanyaan['questions']) > 0)
                                                                <div class="card mb-3" style="background-color: #f8f9fa; border-left: 4px solid #00acc1;">
                                                                    <div class="card-body py-2">
                                                                        <h6 class="mb-2"><strong>Keterangan Kriteria Penilaian:</strong></h6>
                                                                        <div class="row">
                                                                            @foreach($pertanyaan['questions'] as $idx => $question)
                                                                                <div class="col-md-6 mb-1">
                                                                                    <strong>{{ $idx + 1 }}.</strong> {{ $question->label }}
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            {{-- ===== TABEL DETAIL PER RESPONDEN ===== --}}
                                                            <div class="row mb-4">
                                                                <div class="col-md-12">
                                                                    <h6 class="mb-2"><strong>Detail Jawaban Per Responden</strong></h6>
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered table-group-linear-{{ $index }}" style="width: 100%;">
                                                                            <thead style="background-color: #c8f5f7;">
                                                                                <tr>
                                                                                    <th rowspan="3" style="width: 3%; vertical-align: middle; text-align: center;">No</th>
                                                                                    <th rowspan="3" style="width: 12%; vertical-align: middle; text-align: center;">Nama</th>
                                                                                    <th rowspan="3" style="width: 10%; vertical-align: middle; text-align: center;">Dept</th>
                                                                                    <th colspan="{{ (count($pertanyaan['questions']) + 1) * count($pertanyaan['vendors']) }}" 
                                                                                        style="text-align: center; vertical-align: middle;">
                                                                                        Hasil Survei
                                                                                    </th>
                                                                                </tr>
                                                                                <tr>
                                                                                    @foreach($pertanyaan['vendors'] as $vendor)
                                                                                        <th colspan="{{ count($pertanyaan['questions']) + 1 }}" 
                                                                                            style="text-align: center; vertical-align: middle;">
                                                                                            {{ $vendor->label }}
                                                                                        </th>
                                                                                    @endforeach
                                                                                </tr>
                                                                                <tr>
                                                                                    @foreach($pertanyaan['vendors'] as $vendor)
                                                                                        @foreach($pertanyaan['questions'] as $idx => $question)
                                                                                            <th style="width: 3%; text-align: center;">{{ $idx + 1 }}</th>
                                                                                        @endforeach
                                                                                        <th style="width: 4%; text-align: center; background-color: #b3e5fc;">Total</th>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @php $no = 1; @endphp
                                                                                @foreach($pertanyaan['user_responses'] as $userId => $userData)
                                                                                    <tr>
                                                                                        <td class="text-center">{{ $no++ }}</td>
                                                                                        <td>{{ $userData['nama'] }}</td>
                                                                                        <td>{{ $userData['nama_departemen'] }}</td>
                                                                    
                                                                                        @foreach($pertanyaan['vendors'] as $vendor)
                                                                                            @php $vendorAnswers = []; @endphp
                                                                                            
                                                                                            @foreach($pertanyaan['questions'] as $question)
                                                                                                @php
                                                                                                    $answer = $userData['answers'][$vendor->id][$question->id] ?? '-';
                                                                                                    if (is_numeric($answer)) {
                                                                                                        $vendorAnswers[] = floatval($answer);
                                                                                                    }
                                                                                                @endphp
                                                                                                <td class="text-center">{{ $answer }}</td>
                                                                                            @endforeach
                                                                                            
                                                                                            {{-- Total (Rata-rata) --}}
                                                                                            <td class="text-center" style="background-color: #e1f5fe; font-weight: bold;">
                                                                                                @if(count($vendorAnswers) > 0)
                                                                                                    {{ number_format(array_sum($vendorAnswers) / count($vendorAnswers), 1) }}
                                                                                                @else
                                                                                                    -
                                                                                                @endif
                                                                                            </td>
                                                                                        @endforeach
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {{-- ===== TABEL RINGKASAN RATA-RATA ===== --}}
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <h6 class="mb-2"><strong>Ringkasan Rata-rata Per Kategori</strong></h6>
                                                                    <div class="table-responsive">
                                                                        <table class="table table-bordered table-group-summary-{{ $index }}" style="width: 100%;">
                                                                            <thead style="background-color: #c8f5f7;">
                                                                                <tr>
                                                                                    <th rowspan="2" style="width: 5%; vertical-align: middle; text-align: center;">No</th>
                                                                                    <th rowspan="2" style="width: 30%; vertical-align: middle; text-align: center;">Kategori Penilaian</th>
                                                                                    <th colspan="{{ count($pertanyaan['vendors']) }}" style="text-align: center; vertical-align: middle;">
                                                                                        Nilai (Rata-rata)
                                                                                    </th>
                                                                                </tr>
                                                                                <tr>
                                                                                    @foreach($pertanyaan['vendors'] as $vendor)
                                                                                        <th style="width: {{ 65 / count($pertanyaan['vendors']) }}%; text-align: center;">
                                                                                            {{ $vendor->label }}
                                                                                        </th>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach($pertanyaan['questions'] as $qIndex => $question)
                                                                                    <tr>
                                                                                        <td class="text-center">{{ $qIndex + 1 }}</td>
                                                                                        <td>{{ $question->label }}</td>
                                                                                        @foreach($pertanyaan['vendors'] as $vendor)
                                                                                            <td class="text-center">
                                                                                                {{ $pertanyaan['averages'][$vendor->id][$question->id] ?? '-' }}
                                                                                            </td>
                                                                                        @endforeach
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                            <tfoot style="background-color: #e0f7fa;">
                                                                                <tr class="fw-bold">
                                                                                    <td colspan="2" class="text-end">Rata-rata Per Vendor:</td>
                                                                                    @foreach($pertanyaan['vendors'] as $vendor)
                                                                                        @php
                                                                                            $vendorValues = [];
                                                                                            foreach($pertanyaan['questions'] as $q) {
                                                                                                $val = $pertanyaan['averages'][$vendor->id][$q->id] ?? '-';
                                                                                                if(is_numeric($val)) {
                                                                                                    $vendorValues[] = floatval($val);
                                                                                                }
                                                                                            }
                                                                                            $vendorAvg = count($vendorValues) > 0
                                                                                                ? number_format(array_sum($vendorValues) / count($vendorValues), 1)
                                                                                                : '-';
                                                                                        @endphp
                                                                                        <td class="text-center">{{ $vendorAvg }}</td>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </tfoot>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="row mt-4">
                                                                <div class="col-md-12">
                                                                    <h6 class="mb-3"><strong>Grafik Perbandingan Per Vendor</strong></h6>
                                                                    <div style="height: 400px; position: relative;">
                                                                        <canvas id="groupLinearChart{{ $index }}"></canvas>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <hr>
                                                            {{-- Footer Kesimpulan --}}
                                                            <div class="card-footer bg-light">
                                                                <h6 class="mb-3"><strong>Kesimpulan:</strong></h6>
                                                                <p class="mb-2">
                                                                    <strong>Total Responden:</strong> {{ count($pertanyaan['user_responses']) }} orang<br>
                                                                </p>
                                                                
                                                                @if(isset($pertanyaan['top_vendor_per_question']) && count($pertanyaan['top_vendor_per_question']) > 0)
                                                                    <hr class="my-3">
                                                                    <h6 class="mb-2"><strong>Top Vendor per Pertanyaan:</strong></h6>
                                                                    <ol class="mb-0" style="line-height: 1.8;">
                                                                        @foreach($pertanyaan['top_vendor_per_question'] as $questionId => $topData)
                                                                            <li class="mb-2">
                                                                                <strong>{{ $topData['question_label'] }}:</strong><br>
                                                                                <span style="padding-left: 20px; display: block;">
                                                                                    - Tertinggi: 
                                                                                    <span style="color: #28a745; font-weight: 600;">
                                                                                        {{ implode(', ', $topData['highest']['vendors']) }}
                                                                                    </span> 
                                                                                    ({{ number_format($topData['highest']['value'], 1) }})<br>
                                                                                    - Terendah: 
                                                                                    <span style="color: #dc3545; font-weight: 600;">
                                                                                        {{ implode(', ', $topData['lowest']['vendors']) }}
                                                                                    </span> 
                                                                                    ({{ number_format($topData['lowest']['value'], 1) }})
                                                                                </span>
                                                                            </li>
                                                                        @endforeach
                                                                    </ol>
                                                                @endif
                                                                
                                                                @if(isset($pertanyaan['top_vendor']))
                                                                    <hr class="my-3">
                                                                    <div class="card" style="background-color: #e8f5e9; border-left: 4px solid #28a745;">
                                                                        <div class="card-body py-3">
                                                                            <h6 class="mb-2">
                                                                                <strong>Top Vendor Rata-Rata: 
                                                                                    <span style="color: #28a745;">{{ $pertanyaan['top_vendor']['vendor_name'] }}</span>
                                                                                </strong>
                                                                                <span class="badge bg-success ms-2">{{ number_format($pertanyaan['top_vendor']['average'], 1) }}</span>
                                                                            </h6>
                                                                            
                                                                            <div class="row mt-3">
                                                                                @if(count($pertanyaan['top_vendor']['best_questions']) > 0)
                                                                                    <div class="col-md-6">
                                                                                        <p class="mb-1"><strong style="color: #28a745;">Nilai Terbaik:</strong></p>
                                                                                        <ol class="mb-0" style="font-size: 0.9em;">
                                                                                            @foreach($pertanyaan['top_vendor']['best_questions'] as $q)
                                                                                                <li>{{ $q }}</li>
                                                                                            @endforeach
                                                                                        </ol>
                                                                                    </div>
                                                                                @endif
                                                                                
                                                                                @if(count($pertanyaan['top_vendor']['need_improvement']) > 0)
                                                                                    <div class="col-md-6">
                                                                                        <p class="mb-1"><strong style="color: #ff9800;">Perlu Ditingkatkan:</strong></p>
                                                                                        <ol class="mb-0" style="font-size: 0.9em;">
                                                                                            @foreach($pertanyaan['top_vendor']['need_improvement'] as $q)
                                                                                                <li>{{ $q }}</li>
                                                                                            @endforeach
                                                                                        </ol>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<style>
    .table tbody tr:last-child td {
        border-left-width: 1px !important;
        border-right-width: 1px !important;
        border-top-width: 0;
        border-bottom-width: 0;
    }

</style>

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function switchQuestionSurvey(questionIndex, surveyId) {
            console.log('Switching question', questionIndex, 'to survey', surveyId);

            const allButtons = document.querySelectorAll(`button[onclick*="switchQuestionSurvey(${questionIndex}"]`);
            allButtons.forEach(btn => {
                btn.classList.remove('active', 'btn-primary');
                btn.classList.add('btn-outline-primary');
            });

            event.target.classList.remove('btn-outline-primary');
            event.target.classList.add('active', 'btn-primary');

            const allContents = document.querySelectorAll(`.question-survey-content[data-question="${questionIndex}"]`);
            allContents.forEach(content => {
                content.style.display = 'none';
            });

            const targetContent = document.querySelector(
                `.question-survey-content[data-question="${questionIndex}"][data-survey="${surveyId}"]`
            );
            
            if (targetContent) {
                targetContent.style.display = 'block';

                setTimeout(() => {
                    $(targetContent).find('table').each(function() {
                        const tableId = $(this).attr('class');
                        if (tableId && window.yearTables) {
                            Object.keys(window.yearTables).forEach(key => {
                                if (tableId.includes(key.replace('.', ''))) {
                                    try {
                                        window.yearTables[key].columns.adjust().draw(false);
                                    } catch (e) {
                                        console.log('Table adjustment skipped:', key);
                                    }
                                }
                            });
                        }
                    });
                }, 50);
            }
        }
        function generateColors(count) {
            const predefinedColors = [
                '#9B8AFB', '#FF9AA2', '#5DD9E8', '#FFD93D', '#6BCB77', '#FF6B9D',
                '#C7CEEA', '#FFDAC1', '#B5EAD7', '#E2F0CB', '#FF9CEE', '#A8E6CF',
                '#FFB7B2', '#FFDFD3', '#C1E1C1', '#BEDADC', '#C4FAF8', '#F7D794',
                '#778BEB', '#F8A5C2', '#63CDDA', '#CF6A87', '#E77F67', '#786FA6'
            ];
            
            if (count <= predefinedColors.length) {
                return predefinedColors.slice(0, count);
            }

            const colors = [...predefinedColors];
            for (let i = predefinedColors.length; i < count; i++) {
                const hue = (i * 137.508) % 360;
                colors.push(`hsl(${hue}, 70%, 65%)`);
            }
            return colors;
        }

        function switchQuestionYear(questionIndex, year) {
            console.log('Switching question', questionIndex, 'to year', year);

            const allButtons = document.querySelectorAll(`button[onclick*="switchQuestionYear(${questionIndex}"]`);
            allButtons.forEach(btn => {
                btn.classList.remove('active', 'btn-primary');
                btn.classList.add('btn-outline-primary');
            });

            event.target.classList.remove('btn-outline-primary');
            event.target.classList.add('active', 'btn-primary');

            const allContents = document.querySelectorAll(`.question-year-content[data-question="${questionIndex}"]`);
            allContents.forEach(content => {
                content.style.display = 'none';
            });

            const targetContent = document.querySelector(
                `.question-year-content[data-question="${questionIndex}"][data-year="${year}"]`
            );
            
            if (targetContent) {
                targetContent.style.display = 'block';

                setTimeout(() => {
                    $(targetContent).find('table').each(function() {
                        const tableId = $(this).attr('class');
                        if (tableId && window.multiYearTables) {
                            Object.keys(window.multiYearTables).forEach(key => {
                                if (tableId.includes(key.replace('.', ''))) {
                                    try {
                                        window.multiYearTables[key].columns.adjust().draw(false);
                                    } catch (e) {
                                        console.log('Table adjustment skipped:', key);
                                    }
                                }
                            });
                        }
                    });
                }, 50);
            }
        }
        
        $(document).ready(function() {
            const exportBtn = $('#btnExportExcel');
            console.log('Button found:', exportBtn.length > 0);
            
            if (exportBtn.length === 0) {
                console.error('Button #btnExportExcel NOT FOUND!');
                return;
            }

            exportBtn.off('click');

            exportBtn.on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                const surveyId = '{{ $survey->idsurvei ?? "" }}';
                let formId = '{{ $survey->form_id ?? "" }}';
                const periodeFilter = '{{ $periode_filter ?? "current" }}';
                const referenceYear = '{{ request()->input("reference_year", date("Y")) }}';
                
                @if(isset($periode_filter) && $periode_filter === 'year')
                    formId = '{{ $form_id_year ?? "" }}'; 
                @endif
                console.log('Survey ID:', surveyId);
                console.log('Form ID:', formId);
                console.log('Periode:', periodeFilter);
                console.log('Year:', referenceYear);

                if (!surveyId && !formId) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Survey ID tidak ditemukan',
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true
                    });
                    return;
                }

                Swal.fire({
                    title: 'Memproses...',
                    text: 'Sedang membuat file Excel',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                let exportData = {
                    periode_filter: periodeFilter,
                    reference_year: referenceYear
                };

                let exportId = (periodeFilter === '3years' || periodeFilter === 'year') ? formId : surveyId;

                $.ajax({
                    url: "{{ URL::to('/') }}/rpsurvey/export/" + exportId,
                    type: 'GET',
                    data: exportData,
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(blob, status, xhr) {
                        let filename = 'Survey_Export.xlsx';
                        const disposition = xhr.getResponseHeader('Content-Disposition');
                        if (disposition && disposition.indexOf('filename=') !== -1) {
                            const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            const matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) { 
                                filename = matches[1].replace(/['"]/g, '');
                            }
                        }

                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = url;
                        a.download = filename;
                        document.body.appendChild(a);
                        a.click();

                        window.URL.revokeObjectURL(url);
                        document.body.removeChild(a);

                        Swal.close();

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'File Excel berhasil diunduh',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Export error:', error);
                        console.error('Response:', xhr.responseText);
                        
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Gagal mengunduh file Excel: ' + error,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 5000,
                            timerProgressBar: true
                        });
                    }
                });
            });

            sessionStorage.removeItem('isLoadingResult');
            if (typeof Swal !== 'undefined' && Swal.isVisible()) {
                Swal.close();
            }

            console.log('Chart.js loaded:', typeof Chart !== 'undefined');
            console.log('Periode filter:', '{{ $periode_filter ?? "current" }}');
            console.log('jQuery version:', $.fn.jquery);
        });
    </script>
    
    <script>
        $(document).ready(function () {
            $.fn.dataTable.ext.errMode = 'console';
            @if(isset($periode_filter) && $periode_filter === '3years')
                console.log('Multi-year mode detected, initializing charts...');

                window.multiYearCharts = {};
                
                @foreach($multi_year_data['pertanyaan'] as $index => $pertanyaan)
                    console.log('--- Processing Question #{{ $index }}: {{ addslashes(strip_tags($pertanyaan->soal)) }} ---');
                    
                    @foreach(['semua', ...$multi_year_data['years']] as $yearTab)
                        @php
                            $questionData = $yearTab === 'semua'
                                ? $multi_year_data['semua_data'][$index]
                                : $multi_year_data['yearly_data'][$yearTab]['questions'][$index];
                            
                            $aggregated = $questionData['aggregated_data'] ?? null;
                            $hasSurveys = $yearTab === 'semua'
                                || $multi_year_data['yearly_data'][$yearTab]['surveys']->count() > 0;
                        @endphp
                        
                        @if($hasSurveys && $aggregated)
                            {{-- LINEAR SCALE CHART --}}
                            @if($pertanyaan->jenis === 'linear_scale')
                                @php
                                    $scaleData = $yearTab === 'semua' 
                                        ? $multi_year_data['semua_data'][$index]['scale_data']
                                        : $multi_year_data['yearly_data'][$yearTab]['questions'][$index]['scale_data'];
                                @endphp
                                
                                (function() {
                                    const canvasId = 'linearChart{{ $yearTab }}{{ $index }}';
                                    console.log('Creating linear chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const chartInstance = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels: [
                                                    '1 (Sangat {{ $scaleData->kata_negatif ?? "Rendah" }})',
                                                    '2 ({{ $scaleData->kata_negatif ?? "Rendah" }})',
                                                    '3 (Sedang)',
                                                    '4 ({{ $scaleData->kata_positif ?? "Tinggi" }})',
                                                    '5 (Sangat {{ $scaleData->kata_positif ?? "Tinggi" }})'
                                                ],
                                                datasets: [{
                                                    label: 'Jumlah Responden',
                                                    data: [
                                                        {{ $aggregated['distribusi']['1'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['2'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['3'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['4'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['5'] ?? 0 }}
                                                    ],
                                                    backgroundColor: [
                                                        '#FF6B9D',
                                                        '#FFA447',
                                                        '#FFC837',
                                                        '#C1FF72',
                                                        '#7AE582'
                                                    ],
                                                    borderWidth: 0
                                                }]
                                            },
                                            options: {
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                scales: {
                                                    y: {
                                                        beginAtZero: true,
                                                        ticks: {
                                                            stepSize: 1
                                                        }
                                                    }
                                                },
                                                plugins: {
                                                    legend: {
                                                        display: false
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                return context.parsed.y + ' responden';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.multiYearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                            
                            {{-- CHECKBOX CHART --}}
                            @if($pertanyaan->jenis === 'checkbox')
                                (function() {
                                    const canvasId = 'checkboxChart{{ $yearTab }}{{ $index }}';
                                    console.log('Creating checkbox chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const chartInstance = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels: [
                                                    @foreach($aggregated['stats'] as $stat)
                                                        {!! json_encode($stat['label']) !!},
                                                    @endforeach
                                                ],
                                                datasets: [{
                                                    label: 'Jumlah Responden',
                                                    data: [
                                                        @foreach($aggregated['stats'] as $stat)
                                                            {{ $stat['count'] }},
                                                        @endforeach
                                                    ],
                                                    backgroundColor: generateColors({{ count($aggregated['stats']) }}),
                                                    borderWidth: 0
                                                }]
                                            },
                                            options: {
                                                indexAxis: 'y',
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                scales: {
                                                    x: {
                                                        beginAtZero: true,
                                                        ticks: {
                                                            stepSize: 1
                                                        }
                                                    }
                                                },
                                                plugins: {
                                                    legend: {
                                                        display: false
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                return context.parsed.x + ' responden';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.multiYearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                            
                            {{-- PILIHAN TEXT CHART --}}
                            @if($pertanyaan->jenis === 'pilihan_text')
                                (function() {
                                    const canvasId = 'pilihanChart{{ $yearTab }}{{ $index }}';
                                    console.log('Creating pilihan text chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const statsCount = {{ count($aggregated['stats']) }};
                                        const chartInstance = new Chart(ctx, {
                                            type: 'doughnut',
                                            data: {
                                                labels: [
                                                    @foreach($aggregated['stats'] as $stat)
                                                        {!! json_encode($stat['label']) !!},
                                                    @endforeach
                                                ],
                                                datasets: [{
                                                    data: [
                                                        @foreach($aggregated['stats'] as $stat)
                                                            {{ $stat['count'] }},
                                                        @endforeach
                                                    ],
                                                    backgroundColor: generateColors(statsCount),
                                                    borderWidth: 2,
                                                    borderColor: '#fff'
                                                }]
                                            },
                                            options: {
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                plugins: {
                                                    legend: {
                                                        position: 'bottom',
                                                        labels: {
                                                            boxWidth: 12,
                                                            font: {
                                                                size: 16
                                                            },
                                                            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 total = data.datasets[0].data.reduce((a, b) => a + b, 0);
                                                                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                                                        return {
                                                                            text: `${label} (${percentage}%)`,
                                                                            fillStyle: data.datasets[0].backgroundColor[i],
                                                                            hidden: false,
                                                                            index: i
                                                                        };
                                                                    });
                                                                }
                                                                return [];
                                                            }
                                                        }
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                let label = context.label || '';
                                                                let value = context.parsed;
                                                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                                                let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                                                return label + ': ' + value + ' (' + percentage + '%)';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.multiYearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                        @endif
                    @endforeach
                @endforeach
                
                console.log('Total charts created:', Object.keys(window.multiYearCharts).length);
                console.log('=== CHART INITIALIZATION COMPLETE ===');
                console.log('=== INITIALIZING MULTI-YEAR DATATABLES ===');
                
                // Store DataTable instances
                window.multiYearTables = {};
                
                @foreach($multi_year_data['pertanyaan'] as $index => $pertanyaan)
                    @foreach(['semua', ...$multi_year_data['years']] as $yearTab)
                        @php
                            $questionData = $yearTab === 'semua'
                                ? $multi_year_data['semua_data'][$index]
                                : $multi_year_data['yearly_data'][$yearTab]['questions'][$index];
                            
                            $aggregated = $questionData['aggregated_data'] ?? null;
                            $hasSurveys = $yearTab === 'semua'
                                || $multi_year_data['yearly_data'][$yearTab]['surveys']->count() > 0;
                        @endphp
                        
                        @if($hasSurveys && $aggregated)
                            {{-- LINEAR SCALE TABLE --}}
                            @if($pertanyaan->jenis === 'linear_scale')
                                (function() {
                                    const tableClass = '.table-linear-multi-{{ $index }}-{{ $yearTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.multiYearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                            {{-- GROUP LINEAR MULTI YEAR --}}
                            @if($pertanyaan->jenis === 'group_linear_scale')
                            (function() {
                                const tableClass = '.table-group-summary-multi-{{ $index }}-{{ $yearTab }}';
                                console.log('Initializing DataTable:', tableClass);
                                
                                try {
                                    const tableInstance = $(tableClass).DataTable({
                                        "language": {
                                            "search": "Cari :",
                                            "lengthMenu": "Tampilkan _MENU_ baris",
                                            "zeroRecords": "Maaf - Data tidak ada",
                                            "info": "Halaman _PAGE_ dari _PAGES_",
                                            "infoEmpty": "Tidak ada data",
                                            "infoFiltered": "(pencarian dari _MAX_ data)",
                                            "paginate": {
                                                "first": "Pertama",
                                                "last": "Terakhir",
                                                "next": "Selanjutnya",
                                                "previous": "Sebelumnya"
                                            }
                                        },
                                        "ordering": true,
                                        "searching": true,
                                        "paging": true,
                                        "info": false,
                                        "scrollX": true,
                                        "autoWidth": false,
                                        "columnDefs": [
                                            { "width": "5%", "targets": 0 },
                                            { "width": "30%", "targets": 1 }
                                        ]
                                    });
                                    
                                    window.multiYearTables[tableClass] = tableInstance;
                                    console.log('DataTable initialized:', tableClass);
                                } catch (error) {
                                    console.error('Error initializing DataTable:', tableClass, error);
                                }
                            })();    
                            
                            (function() {
                                    const tableClass = '.table-group-multi-{{ $index }}-{{ $yearTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "pageLength": 10,
                                            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                                            "scrollX": true,
                                            "autoWidth": true,  // UBAH dari false ke true
                                            "columnDefs": [
                                                { "width": "3%", "targets": 0 },
                                                { "width": "12%", "targets": 1 },
                                                { "width": "10%", "targets": 2 }
                                            ]
                                        });
                                        
                                        window.multiYearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();

                                (function() {
                                    const canvasId = 'groupLinearChart{{ $yearTab }}{{ $index }}';
                                    console.log('Creating multi-year group chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    @if($aggregated && isset($aggregated['vendors']) && isset($aggregated['questions']))
                                        const vendors = {!! json_encode($aggregated['vendors']->pluck('label')->toArray()) !!};
                                        const questions = {!! json_encode($aggregated['questions']->pluck('label')->toArray()) !!};
                                        const averages = {!! json_encode($aggregated['averages']) !!};
                                        
                                        // Generate colors
                                        const colors = generateColors(vendors.length);
                                        
                                        // Prepare datasets
                                        const datasets = vendors.map((vendor, vIdx) => {
                                            const vendorId = {!! json_encode($aggregated['vendors']->pluck('id')->toArray()) !!}[vIdx];
                                            const data = questions.map((q, qIdx) => {
                                                const questionId = {!! json_encode($aggregated['questions']->pluck('id')->toArray()) !!}[qIdx];
                                                const value = averages[vendorId] ? averages[vendorId][questionId] : '-';
                                                return value !== '-' ? parseFloat(value) : null;
                                            });
                                            
                                            return {
                                                label: vendor,
                                                data: data,
                                                backgroundColor: colors[vIdx],
                                                borderColor: colors[vIdx],
                                                borderWidth: 2
                                            };
                                        });
                                        
                                        try {
                                            const chartInstance = new Chart(ctx, {
                                                type: 'bar',
                                                data: {
                                                    labels: questions,
                                                    datasets: datasets
                                                },
                                                options: {
                                                    responsive: true,
                                                    maintainAspectRatio: false,
                                                    scales: {
                                                        y: {
                                                            beginAtZero: true,
                                                            max: 5,
                                                            ticks: {
                                                                stepSize: 1
                                                            },
                                                            title: {
                                                                display: true,
                                                                text: 'Skor'
                                                            }
                                                        },
                                                        x: {
                                                            title: {
                                                                display: true,
                                                                text: 'Kategori Penilaian'
                                                            }
                                                        }
                                                    },
                                                    plugins: {
                                                        legend: {
                                                            display: true,
                                                            position: 'top',
                                                            labels: {
                                                                boxWidth: 15,
                                                                padding: 15
                                                            }
                                                        },
                                                        tooltip: {
                                                            callbacks: {
                                                                label: function(context) {
                                                                    return context.dataset.label + ': ' + 
                                                                        (context.parsed.y !== null ? context.parsed.y.toFixed(1) : '-');
                                                                }
                                                            }
                                                        },
                                                        title: {
                                                            display: true,
                                                            text: 'Periode: {{ $yearTab === "semua" ? "Keseluruhan" : "Tahun " . $yearTab }}'
                                                        }
                                                    }
                                                }
                                            });
                                            
                                            window.multiYearCharts[canvasId] = chartInstance;
                                            console.log('Chart created:', canvasId);
                                        } catch (error) {
                                            console.error('Chart error:', canvasId, error);
                                        }
                                    @endif
                                })();
                            @endif
                            {{-- CHECKBOX TABLE --}}
                            @if($pertanyaan->jenis === 'checkbox')
                                (function() {
                                    const tableClass = '.table-checkbox-multi-{{ $index }}-{{ $yearTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.multiYearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                            
                            {{-- TEXT TABLE --}}
                            @if($pertanyaan->jenis === 'text')
                                @if(isset($aggregated['responses']) && count($aggregated['responses']) > 0)
                                    (function() {
                                        const tableClass = '.table-text-multi-{{ $index }}-{{ $yearTab }}';
                                        console.log('Initializing DataTable:', tableClass);
                                        
                                        try {
                                            const tableInstance = $(tableClass).DataTable({
                                                "language": {
                                                    "search": "Cari :",
                                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                                    "zeroRecords": "Maaf - Data tidak ada",
                                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                                    "infoEmpty": "Tidak ada data",
                                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                                    "paginate": {
                                                        "first": "Pertama",
                                                        "last": "Terakhir",
                                                        "next": "Selanjutnya",
                                                        "previous": "Sebelumnya"
                                                    }
                                                },
                                                "ordering": true,
                                                "searching": true,
                                                "paging": true,
                                                "pageLength": 5,
                                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                                                "autoWidth": false
                                            });
                                            
                                            window.multiYearTables[tableClass] = tableInstance;
                                            console.log('DataTable initialized:', tableClass);
                                        } catch (error) {
                                            console.error('Error initializing DataTable:', tableClass, error);
                                        }
                                    })();
                                @endif
                            @endif
                            
                            {{-- PILIHAN TEXT TABLE --}}
                            @if($pertanyaan->jenis === 'pilihan_text')
                                (function() {
                                    const tableClass = '.table-pilihan-multi-{{ $index }}-{{ $yearTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.multiYearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                        @endif
                    @endforeach
                @endforeach
                console.log('Total DataTables initialized:', Object.keys(window.multiYearTables).length);
            @endif
            // DataTable untuk Analisis
            try {
                $('#analisis-table').DataTable({
                    "language": {
                        "search": "Cari :",
                        "lengthMenu": "Tampilkan _MENU_ baris",
                        "zeroRecords": "Maaf - Data tidak ada",
                        "info": "Halaman _PAGE_ dari _PAGES_",
                        "infoEmpty": "Tidak ada data",
                        "infoFiltered": "(pencarian dari _MAX_ data)",
                        "paginate": {
                            "first": "Pertama",
                            "last": "Terakhir",
                            "next": "Selanjutnya",
                            "previous": "Sebelumnya"
                        }
                    },
                    "ordering": true,
                    "searching": true,
                    "paging": true,
                    "pageLength": 10,
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                });
                console.log('DataTable analisis berhasil diinisialisasi');
            } catch (error) {
                console.error('Error DataTable analisis:', error);
            }

            // SINGLE SURVEY
            @if(!isset($periode_filter) || $periode_filter !== '3years')
                console.log('=== SINGLE SURVEY MODE ===');
                console.log('Total pertanyaan:', {{ count($pertanyaan_list) }});
                
                @foreach($pertanyaan_list as $index => $pertanyaan)
                    console.log('--- Pertanyaan #{{ $index }} ---');
                    console.log('Jenis:', '{{ $pertanyaan["jenis"] }}');
                    
                    @if($pertanyaan['jenis'] === 'linear_scale')
                        try {
                            // DataTable linear scale
                            $('.table-linear-scale-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "pageLength": 5,
                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                            });
                            console.log('DataTable linear-scale-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable linear-scale-{{ $index }} error:', error);
                        }

                        // Chart linear scale
                        try {
                            const canvasId = 'linearScaleChart{{ $index }}';
                            console.log('Looking for canvas:', canvasId);
                            
                            const canvas = document.getElementById(canvasId);
                            console.log('Canvas found:', canvas !== null);
                            
                            if (!canvas) {
                                console.error('Canvas not found:', canvasId);
                            } else {
                                const ctx = canvas.getContext('2d');
                                console.log('Context 2d:', ctx !== null);
                                
                                const chartData = {
                                    labels: [
                                        '1 (Sangat {{ $pertanyaan["scale_data"]->kata_negatif ?? "Rendah" }})', 
                                        '2 ({{ $pertanyaan["scale_data"]->kata_negatif ?? "Rendah" }})', 
                                        '3 (Sedang)', 
                                        '4 ({{ $pertanyaan["scale_data"]->kata_positif ?? "Tinggi" }})', 
                                        '5 (Sangat {{ $pertanyaan["scale_data"]->kata_positif ?? "Tinggi" }})'
                                    ],
                                    datasets: [{
                                        label: 'Responden',
                                        data: [
                                            {{ $pertanyaan['stats']['distribusi']['1'] ?? 0 }},
                                            {{ $pertanyaan['stats']['distribusi']['2'] ?? 0 }},
                                            {{ $pertanyaan['stats']['distribusi']['3'] ?? 0 }},
                                            {{ $pertanyaan['stats']['distribusi']['4'] ?? 0 }},
                                            {{ $pertanyaan['stats']['distribusi']['5'] ?? 0 }}
                                        ],
                                        backgroundColor: generateColors({!! count($pertanyaan['stats']) !!}),
                                        borderWidth: 0
                                    }]
                                };
                                
                                console.log('Chart data:', chartData);
                                
                                new Chart(ctx, {
                                    type: 'bar',
                                    data: chartData,
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        scales: {
                                            y: {
                                                beginAtZero: true,
                                                ticks: {
                                                    stepSize: 1
                                                }
                                            }
                                        },
                                        plugins: {
                                            legend: {
                                                display: false
                                            }
                                        }
                                    }
                                });
                                
                                console.log('Chart linear-scale-{{ $index }} created successfully');
                            }
                        } catch (error) {
                            console.error('Chart linear-scale-{{ $index }} error:', error);
                            console.error('Error stack:', error.stack);
                        }
                        
                    @elseif($pertanyaan['jenis'] === 'checkbox')
                        try {
                            // DataTable checkbox
                            $('.table-checkbox-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "pageLength": 5,
                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                            });
                            console.log('DataTable checkbox-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable checkbox-{{ $index }} error:', error);
                        }

                        // Chart checkbox
                        try {
                            const canvasId = 'checkboxChart{{ $index }}';
                            console.log('Looking for canvas:', canvasId);
                            
                            const canvas = document.getElementById(canvasId);
                            console.log('Canvas found:', canvas !== null);
                            
                            if (!canvas) {
                                console.error('Canvas not found:', canvasId);
                            } else {
                                const ctx = canvas.getContext('2d');
                                
                                const chartData = {
                                    labels: [
                                        @foreach($pertanyaan['stats'] as $stat)
                                            {!! json_encode($stat['label']) !!},
                                        @endforeach
                                    ],
                                    datasets: [{
                                        label: 'Responden',
                                        data: [
                                            @foreach($pertanyaan['stats'] as $stat)
                                                {{ $stat['count'] }},
                                            @endforeach
                                        ],

                                        backgroundColor: generateColors({{ count($pertanyaan['stats']) }}),
                                        borderWidth: 0
                                    }]
                                };
                                
                                console.log('Chart data:', chartData);
                                
                                new Chart(ctx, {
                                    type: 'bar',
                                    data: chartData,
                                    options: {
                                        indexAxis: 'y',
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        scales: {
                                            x: {
                                                beginAtZero: true,
                                                ticks: {
                                                    stepSize: 1
                                                },
                                                title: {
                                                    display: true,
                                                    text: 'Jumlah Responden',
                                                    font: {
                                                        size: 16
                                                    }
                                                }
                                            }
                                        },
                                        plugins: {
                                            legend: {
                                                display: false
                                            }
                                        }
                                    }
                                });
                                
                                console.log('Chart checkbox-{{ $index }} created successfully');
                            }
                        } catch (error) {
                            console.error('Chart checkbox-{{ $index }} error:', error);
                            console.error('Error stack:', error.stack);
                        }
                        
                    @elseif($pertanyaan['jenis'] === 'text')
                        try {
                            $('.table-text-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "pageLength": 5,
                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                            });
                            console.log('DataTable text-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable text-{{ $index }} error:', error);
                        }
                        
                    @elseif($pertanyaan['jenis'] === 'pilihan_text')
                        try {
                            // DataTable
                            $('.table-pilihan-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "pageLength": 5,
                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
                            });
                            console.log('DataTable pilihan-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable pilihan-{{ $index }} error:', error);
                        }

                        // Chart
                        try {
                            const canvasId = 'pilihanChart{{ $index }}';
                            console.log('Looking for canvas:', canvasId);
                            
                            const canvas = document.getElementById(canvasId);
                            console.log('Canvas found:', canvas !== null);
                            
                            if (!canvas) {
                                console.error('Canvas not found:', canvasId);
                            } else {
                                const ctx = canvas.getContext('2d');
                                
                                const statsCount = {{ count($pertanyaan['stats']) }};
                                const chartData = {
                                    labels: [
                                        @foreach($pertanyaan['stats'] as $stat)
                                            {!! json_encode($stat['label']) !!},
                                        @endforeach
                                    ],
                                    datasets: [{
                                        data: [
                                            @foreach($pertanyaan['stats'] as $stat)
                                                {{ $stat['count'] }},
                                            @endforeach
                                        ],

                                        backgroundColor: generateColors(statsCount),
                                        borderWidth: 0
                                    }]
                                };
                                
                                console.log('Chart data:', chartData);
                                
                                new Chart(ctx, {
                                    type: 'doughnut',
                                    data: chartData,
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        plugins: {
                                            legend: {
                                                position: 'bottom',
                                                labels: {
                                                    boxWidth: 12,
                                                    font: {
                                                        size: 16
                                                    }
                                                }
                                            },
                                            tooltip: {
                                                callbacks: {
                                                    label: function (context) {
                                                        let label = context.label || '';
                                                        let value = context.parsed;
                                                        let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                                        let percentage = total > 0 ? ((value / total) * 100).toFixed(2) : 0;
                                                        return label + ': ' + value + ' (' + percentage + '%)';
                                                    }
                                                }
                                            }
                                        }
                                    }
                                });
                                
                                console.log('Chart pilihan-{{ $index }} created successfully');
                            }
                        } catch (error) {
                            console.error('Chart pilihan-{{ $index }} error:', error);
                            console.error('Error stack:', error.stack);
                        }
                        
                    @elseif($pertanyaan['jenis'] === 'group_linear_scale')
                        // ===== TABEL BARU - RINGKASAN =====
                        try {
                            $('.table-group-summary-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "info": false,
                                "scrollX": true,
                                "autoWidth": false,
                                "columnDefs": [
                                    { "width": "5%", "targets": 0 },
                                    { "width": "30%", "targets": 1 }
                                ]
                            });
                            console.log('DataTable group-summary-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable group-summary-{{ $index }} error:', error);
                        }

                        // ===== TABEL DETAIL PER RESPONDEN =====
                        try {
                            $('.table-group-linear-{{ $index }}').DataTable({
                                "language": {
                                    "search": "Cari :",
                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                    "zeroRecords": "Maaf - Data tidak ada",
                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                    "infoEmpty": "Tidak ada data",
                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                    "paginate": {
                                        "first": "Pertama",
                                        "last": "Terakhir",
                                        "next": "Selanjutnya",
                                        "previous": "Sebelumnya"
                                    }
                                },
                                "ordering": true,
                                "searching": true,
                                "paging": true,
                                "pageLength": 10,
                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                                "scrollX": true,
                                "autoWidth": false,
                                "columnDefs": [
                                    { "width": "3%", "targets": 0 },
                                    { "width": "12%", "targets": 1 },
                                    { "width": "10%", "targets": 2 }
                                ]
                            });
                            console.log('DataTable group-linear-{{ $index }} OK');
                        } catch (error) {
                            console.error('DataTable group-linear-{{ $index }} error:', error);
                        }

                        try {
                            const canvasId = 'groupLinearChart{{ $index }}';
                            console.log('Creating group linear chart:', canvasId);
                            
                            const canvas = document.getElementById(canvasId);
                            if (!canvas) {
                                console.error('Canvas not found:', canvasId);
                            } else {
                                const ctx = canvas.getContext('2d');
                                
                                // Prepare data
                                const vendors = {!! json_encode($pertanyaan['vendors']->pluck('label')->toArray()) !!};
                                const questions = {!! json_encode($pertanyaan['questions']->pluck('label')->toArray()) !!};
                                const averages = {!! json_encode($pertanyaan['averages']) !!};
                                
                                // Generate colors for vendors
                                const colors = generateColors(vendors.length);
                                
                                // Prepare datasets
                                const datasets = vendors.map((vendor, vIdx) => {
                                    const vendorId = {!! json_encode(array_keys($pertanyaan['averages'])) !!}[vIdx];
                                    const data = questions.map((q, qIdx) => {
                                        const questionId = {!! json_encode($pertanyaan['questions']->pluck('id')->toArray()) !!}[qIdx];
                                        const value = averages[vendorId][questionId];
                                        return value !== '-' ? parseFloat(value) : null;
                                    });
                                    
                                    return {
                                        label: vendor,
                                        data: data,
                                        backgroundColor: colors[vIdx],
                                        borderColor: colors[vIdx],
                                        borderWidth: 2
                                    };
                                });
                                
                                new Chart(ctx, {
                                    type: 'bar',
                                    data: {
                                        labels: questions,
                                        datasets: datasets
                                    },
                                    options: {
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        scales: {
                                            y: {
                                                beginAtZero: true,
                                                max: 5,
                                                ticks: {
                                                    stepSize: 1
                                                },
                                                title: {
                                                    display: true,
                                                    text: 'Skor',
                                                    font: {
                                                        size: 16
                                                    }
                                                }
                                            },
                                            x: {
                                                title: {
                                                    display: true,
                                                    text: 'Kategori Penilaian',
                                                    font: {
                                                        size: 16
                                                    }
                                                }
                                            }
                                        },
                                        plugins: {
                                            legend: {
                                                display: true,
                                                position: 'top',
                                                labels: {
                                                    boxWidth: 15,
                                                    font: {
                                                        size: 16
                                                    },
                                                    padding: 15
                                                }
                                            },
                                            tooltip: {
                                                callbacks: {
                                                    label: function(context) {
                                                        return context.dataset.label + ': ' + 
                                                            (context.parsed.y !== null ? context.parsed.y.toFixed(1) : '-');
                                                    }
                                                }
                                            }
                                        }
                                    }
                                });
                                
                                console.log('Chart group-linear-{{ $index }} created successfully');
                            }
                        } catch (error) {
                            console.error('Chart group-linear-{{ $index }} error:', error);
                        }
                    @endif
                @endforeach
            @else
                console.log('=== Skipping single survey charts ===');
            @endif
            @if(isset($periode_filter) && $periode_filter === 'year')
                console.log('Year mode detected, initializing charts...');

                window.yearCharts = {};
                
                @foreach($year_data['pertanyaan'] as $index => $pertanyaan)
                    console.log('--- Processing Question #{{ $index }}: {{ addslashes(strip_tags($pertanyaan->soal)) }} ---');
                    
                    @foreach(['semua', ...$year_data['surveys']->pluck('idsurvei')->toArray()] as $surveyTab)
                        @php
                            $questionData = $surveyTab === 'semua'
                                ? $year_data['semua_data'][$index]
                                : $year_data['survey_data'][$surveyTab]['questions'][$index];
                            
                            $aggregated = $questionData['aggregated_data'] ?? null;
                            $hasSurveyData = $surveyTab === 'semua' || isset($year_data['survey_data'][$surveyTab]);
                        @endphp
                        
                        @if($hasSurveyData && $aggregated)
                            {{-- LINEAR SCALE CHART --}}
                            @if($pertanyaan->jenis === 'linear_scale')
                                @php
                                    $scaleData = $surveyTab === 'semua' 
                                        ? $year_data['semua_data'][$index]['scale_data']
                                        : $year_data['survey_data'][$surveyTab]['questions'][$index]['scale_data'];
                                @endphp
                                
                                (function() {
                                    const canvasId = 'linearChartYear{{ $surveyTab }}{{ $index }}';
                                    console.log('Creating linear chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const chartInstance = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels: [
                                                    '1 (Sangat {{ $scaleData->kata_negatif ?? "Rendah" }})',
                                                    '2 ({{ $scaleData->kata_negatif ?? "Rendah" }})',
                                                    '3 (Sedang)',
                                                    '4 ({{ $scaleData->kata_positif ?? "Tinggi" }})',
                                                    '5 (Sangat {{ $scaleData->kata_positif ?? "Tinggi" }})'
                                                ],
                                                datasets: [{
                                                    label: 'Jumlah Responden',
                                                    data: [
                                                        {{ $aggregated['distribusi']['1'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['2'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['3'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['4'] ?? 0 }},
                                                        {{ $aggregated['distribusi']['5'] ?? 0 }}
                                                    ],
                                                    backgroundColor: [
                                                        '#FF6B9D',
                                                        '#FFA447',
                                                        '#FFC837',
                                                        '#C1FF72',
                                                        '#7AE582'
                                                    ],
                                                    borderWidth: 0
                                                }]
                                            },
                                            options: {
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                scales: {
                                                    y: {
                                                        beginAtZero: true,
                                                        ticks: {
                                                            stepSize: 1
                                                        }
                                                    }
                                                },
                                                plugins: {
                                                    legend: {
                                                        display: false
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                return context.parsed.y + ' responden';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.yearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                            
                            {{-- CHECKBOX CHART --}}
                            @if($pertanyaan->jenis === 'checkbox')
                                (function() {
                                    const canvasId = 'checkboxChartYear{{ $surveyTab }}{{ $index }}';
                                    console.log('Creating checkbox chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const chartInstance = new Chart(ctx, {
                                            type: 'bar',
                                            data: {
                                                labels: [
                                                    @foreach($aggregated['stats'] as $stat)
                                                        {!! json_encode($stat['label']) !!},
                                                    @endforeach
                                                ],
                                                datasets: [{
                                                    label: 'Jumlah Responden',
                                                    data: [
                                                        @foreach($aggregated['stats'] as $stat)
                                                            {{ $stat['count'] }},
                                                        @endforeach
                                                    ],
                                                    backgroundColor: generateColors({{ count($aggregated['stats']) }}),
                                                    borderWidth: 0
                                                }]
                                            },
                                            options: {
                                                indexAxis: 'y',
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                scales: {
                                                    x: {
                                                        beginAtZero: true,
                                                        ticks: {
                                                            stepSize: 1
                                                        }
                                                    }
                                                },
                                                plugins: {
                                                    legend: {
                                                        display: false
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                return context.parsed.x + ' responden';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.yearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                            
                            {{-- PILIHAN TEXT CHART --}}
                            @if($pertanyaan->jenis === 'pilihan_text')
                                (function() {
                                    const canvasId = 'pilihanChartYear{{ $surveyTab }}{{ $index }}';
                                    console.log('Creating pilihan text chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    try {
                                        const statsCount = {{ count($aggregated['stats']) }};
                                        const chartInstance = new Chart(ctx, {
                                            type: 'doughnut',
                                            data: {
                                                labels: [
                                                    @foreach($aggregated['stats'] as $stat)
                                                        {!! json_encode($stat['label']) !!},
                                                    @endforeach
                                                ],
                                                datasets: [{
                                                    data: [
                                                        @foreach($aggregated['stats'] as $stat)
                                                            {{ $stat['count'] }},
                                                        @endforeach
                                                    ],
                                                    backgroundColor: generateColors(statsCount),
                                                    borderWidth: 2,
                                                    borderColor: '#fff'
                                                }]
                                            },
                                            options: {
                                                responsive: true,
                                                maintainAspectRatio: false,
                                                plugins: {
                                                    legend: {
                                                        position: 'bottom',
                                                        labels: {
                                                            boxWidth: 12,
                                                            font: {
                                                                size: 16
                                                            },
                                                            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 total = data.datasets[0].data.reduce((a, b) => a + b, 0);
                                                                        const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                                                        return {
                                                                            text: `${label} (${percentage}%)`,
                                                                            fillStyle: data.datasets[0].backgroundColor[i],
                                                                            hidden: false,
                                                                            index: i
                                                                        };
                                                                    });
                                                                }
                                                                return [];
                                                            }
                                                        }
                                                    },
                                                    tooltip: {
                                                        callbacks: {
                                                            label: function(context) {
                                                                let label = context.label || '';
                                                                let value = context.parsed;
                                                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                                                let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                                                return label + ': ' + value + ' (' + percentage + '%)';
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        });
                                        
                                        window.yearCharts[canvasId] = chartInstance;
                                        console.log('Chart created successfully:', canvasId);
                                    } catch (error) {
                                        console.error('Error creating chart:', canvasId, error);
                                    }
                                })();
                            @endif
                        @endif
                    @endforeach
                @endforeach
                
                console.log('Total charts created:', Object.keys(window.yearCharts).length);
                console.log('=== CHART INITIALIZATION COMPLETE ===');
                console.log('=== INITIALIZING YEAR DATATABLES ===');
                
                // Store DataTable instances
                window.yearTables = {};
                
                @foreach($year_data['pertanyaan'] as $index => $pertanyaan)
                    @foreach(['semua', ...$year_data['surveys']->pluck('idsurvei')->toArray()] as $surveyTab)
                        @php
                            $questionData = $surveyTab === 'semua'
                                ? $year_data['semua_data'][$index]
                                : $year_data['survey_data'][$surveyTab]['questions'][$index];
                            
                            $aggregated = $questionData['aggregated_data'] ?? null;
                            $hasSurveyData = $surveyTab === 'semua' || isset($year_data['survey_data'][$surveyTab]);
                        @endphp
                        
                        @if($hasSurveyData && $aggregated)
                            {{-- LINEAR SCALE TABLE --}}
                            @if($pertanyaan->jenis === 'linear_scale')
                                (function() {
                                    const tableClass = '.table-linear-year-{{ $index }}-{{ $surveyTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.yearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                            
                            {{-- GROUP LINEAR YEAR --}}
                            @if($pertanyaan->jenis === 'group_linear_scale')
                                (function() {
                                    const tableClass = '.table-group-summary-year-{{ $index }}-{{ $surveyTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "scrollX": true,
                                            "autoWidth": false,
                                            "columnDefs": [
                                                { "width": "5%", "targets": 0 },
                                                { "width": "30%", "targets": 1 }
                                            ]
                                        });
                                        
                                        window.yearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();    
                                
                                (function() {
                                    const tableClass = '.table-group-year-{{ $index }}-{{ $surveyTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "pageLength": 10,
                                            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                                            "scrollX": true,
                                            "autoWidth": true,
                                            "columnDefs": [
                                                { "width": "3%", "targets": 0 },
                                                { "width": "12%", "targets": 1 },
                                                { "width": "10%", "targets": 2 }
                                            ]
                                        });
                                        
                                        window.yearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();

                                (function() {
                                    const canvasId = 'groupLinearChartYear{{ $surveyTab }}{{ $index }}';
                                    console.log('Creating year group chart:', canvasId);
                                    
                                    const canvas = document.getElementById(canvasId);
                                    if (!canvas) {
                                        console.error('Canvas not found:', canvasId);
                                        return;
                                    }
                                    
                                    const ctx = canvas.getContext('2d');
                                    
                                    @if($aggregated && isset($aggregated['vendors']) && isset($aggregated['questions']))
                                        const vendors = {!! json_encode($aggregated['vendors']->pluck('label')->toArray()) !!};
                                        const questions = {!! json_encode($aggregated['questions']->pluck('label')->toArray()) !!};
                                        const averages = {!! json_encode($aggregated['averages']) !!};
                                        
                                        // Generate colors
                                        const colors = generateColors(vendors.length);
                                        
                                        // Prepare datasets
                                        const datasets = vendors.map((vendor, vIdx) => {
                                            const vendorId = {!! json_encode($aggregated['vendors']->pluck('id')->toArray()) !!}[vIdx];
                                            const data = questions.map((q, qIdx) => {
                                                const questionId = {!! json_encode($aggregated['questions']->pluck('id')->toArray()) !!}[qIdx];
                                                const value = averages[vendorId] ? averages[vendorId][questionId] : '-';
                                                return value !== '-' ? parseFloat(value) : null;
                                            });
                                            
                                            return {
                                                label: vendor,
                                                data: data,
                                                backgroundColor: colors[vIdx],
                                                borderColor: colors[vIdx],
                                                borderWidth: 2
                                            };
                                        });
                                        
                                        try {
                                            const chartInstance = new Chart(ctx, {
                                                type: 'bar',
                                                data: {
                                                    labels: questions,
                                                    datasets: datasets
                                                },
                                                options: {
                                                    responsive: true,
                                                    maintainAspectRatio: false,
                                                    scales: {
                                                        y: {
                                                            beginAtZero: true,
                                                            max: 5,
                                                            ticks: {
                                                                stepSize: 1
                                                            },
                                                            title: {
                                                                display: true,
                                                                text: 'Skor'
                                                            }
                                                        },
                                                        x: {
                                                            title: {
                                                                display: true,
                                                                text: 'Kategori Penilaian'
                                                            }
                                                        }
                                                    },
                                                    plugins: {
                                                        legend: {
                                                            display: true,
                                                            position: 'top',
                                                            labels: {
                                                                boxWidth: 15,
                                                                padding: 15
                                                            }
                                                        },
                                                        tooltip: {
                                                            callbacks: {
                                                                label: function(context) {
                                                                    return context.dataset.label + ': ' + 
                                                                        (context.parsed.y !== null ? context.parsed.y.toFixed(1) : '-');
                                                                }
                                                            }
                                                        },
                                                        title: {
                                                            display: true,
                                                            text: 'Periode: {{ $surveyTab === "semua" ? "Keseluruhan Survey" : ($year_data["surveys"]->firstWhere("idsurvei", $surveyTab)->subjudul ?? "Survey") }}'
                                                        }
                                                    }
                                                }
                                            });
                                            
                                            window.yearCharts[canvasId] = chartInstance;
                                            console.log('Chart created:', canvasId);
                                        } catch (error) {
                                            console.error('Chart error:', canvasId, error);
                                        }
                                    @endif
                                })();
                            @endif
                            
                            {{-- CHECKBOX TABLE --}}
                            @if($pertanyaan->jenis === 'checkbox')
                                (function() {
                                    const tableClass = '.table-checkbox-year-{{ $index }}-{{ $surveyTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.yearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                            
                            {{-- TEXT TABLE --}}
                            @if($pertanyaan->jenis === 'text')
                                @if(isset($aggregated['responses']) && count($aggregated['responses']) > 0)
                                    (function() {
                                        const tableClass = '.table-text-year-{{ $index }}-{{ $surveyTab }}';
                                        console.log('Initializing DataTable:', tableClass);
                                        
                                        try {
                                            const tableInstance = $(tableClass).DataTable({
                                                "language": {
                                                    "search": "Cari :",
                                                    "lengthMenu": "Tampilkan _MENU_ baris",
                                                    "zeroRecords": "Maaf - Data tidak ada",
                                                    "info": "Halaman _PAGE_ dari _PAGES_",
                                                    "infoEmpty": "Tidak ada data",
                                                    "infoFiltered": "(pencarian dari _MAX_ data)",
                                                    "paginate": {
                                                        "first": "Pertama",
                                                        "last": "Terakhir",
                                                        "next": "Selanjutnya",
                                                        "previous": "Sebelumnya"
                                                    }
                                                },
                                                "ordering": true,
                                                "searching": true,
                                                "paging": true,
                                                "pageLength": 5,
                                                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                                                "autoWidth": false
                                            });
                                            
                                            window.yearTables[tableClass] = tableInstance;
                                            console.log('DataTable initialized:', tableClass);
                                        } catch (error) {
                                            console.error('Error initializing DataTable:', tableClass, error);
                                        }
                                    })();
                                @endif
                            @endif
                            
                            {{-- PILIHAN TEXT TABLE --}}
                            @if($pertanyaan->jenis === 'pilihan_text')
                                (function() {
                                    const tableClass = '.table-pilihan-year-{{ $index }}-{{ $surveyTab }}';
                                    console.log('Initializing DataTable:', tableClass);
                                    
                                    try {
                                        const tableInstance = $(tableClass).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Halaman _PAGE_ dari _PAGES_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)",
                                                "paginate": {
                                                    "first": "Pertama",
                                                    "last": "Terakhir",
                                                    "next": "Selanjutnya",
                                                    "previous": "Sebelumnya"
                                                }
                                            },
                                            "ordering": true,
                                            "searching": true,
                                            "paging": true,
                                            "info": false,
                                            "autoWidth": false
                                        });
                                        
                                        window.yearTables[tableClass] = tableInstance;
                                        console.log('DataTable initialized:', tableClass);
                                    } catch (error) {
                                        console.error('Error initializing DataTable:', tableClass, error);
                                    }
                                })();
                            @endif
                        @endif
                    @endforeach
                @endforeach
                console.log('Total DataTables initialized:', Object.keys(window.yearTables).length);
            @endif
        });
    </script>
@endpush