@extends('layouts.app', ['title' => 'Infografis Angket'])

@section('content')
    <div class="infographic-hero">
        <div>
            <div class="premium-eyebrow">Questionnaire Data Story</div>
            <h2>Infografis Hasil Pengisian Angket</h2>
            <p>{{ $questionnaire->title }}</p>
            <small>{{ $questionnaire->description ?: 'Visualisasi grafik, diagram, dan kesimpulan hasil pengisian instrumen angket.' }}</small>
        </div>
        <div class="hero-actions">
            <a class="btn secondary" href="{{ route('admin.questionnaires.show', $questionnaire) }}">Lihat Tabel Hasil</a>
            <a class="btn" href="{{ route('admin.questionnaires.infographic-pdf', $questionnaire) }}">Export PDF Infografis</a>
            <form method="POST" action="{{ url('/admin/questionnaires/'.$questionnaire->id.'/reset-responses') }}" onsubmit="return confirm('Reset seluruh hasil pengisian angket ini? Grafik, diagram, dan kesimpulan akan kosong sampai ada respons baru. Instrumen dan butir pertanyaan tetap aman.')">
                @csrf
                @method('DELETE')
                <button class="btn reset-btn" type="submit" {{ $responseCount < 1 ? 'disabled' : '' }}>Reset Hasil</button>
            </form>
        </div>
    </div>

    <div class="infographic-grid metrics-grid">
        <div class="metric-card">
            <span>Jumlah Responden</span>
            <strong>{{ $responseCount }}</strong>
            <small>Responden unik: {{ $respondentCount }}</small>
        </div>
        <div class="metric-card">
            <span>Jumlah Butir</span>
            <strong>{{ $questions->count() }}</strong>
            <small>Total instrumen yang dianalisis.</small>
        </div>
        <div class="metric-card">
            <span>Jawaban Terekam</span>
            <strong>{{ $answerCount }}</strong>
            <small>Total jawaban seluruh responden.</small>
        </div>
        <div class="metric-card">
            <span>Rata-rata Skor</span>
            <strong>{{ $overallAverage !== null ? number_format($overallAverage, 2, ',', '.') : '-' }}</strong>
            <small>{{ $scoreLevel }}</small>
        </div>
    </div>

    <div class="infographic-grid two-col">
        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Diagram Komposisi Jenis Pertanyaan</h3>
                    <p>Menunjukkan proporsi tipe butir yang digunakan dalam instrumen.</p>
                </div>
            </div>

            @if ($typeDiagram->isNotEmpty())
                <div class="donut-layout">
                    @php
                        $dashParts = [];
                        $offset = 0;
                    @endphp
                    <svg viewBox="0 0 42 42" class="donut-chart" role="img" aria-label="Diagram komposisi jenis pertanyaan">
                        <circle class="donut-bg" cx="21" cy="21" r="15.915"></circle>
                        @foreach ($typeDiagram as $index => $row)
                            <circle class="donut-segment segment-{{ ($index % 6) + 1 }}" cx="21" cy="21" r="15.915"
                                stroke-dasharray="{{ $row['percent'] }} {{ 100 - $row['percent'] }}"
                                stroke-dashoffset="{{ -$offset }}"></circle>
                            @php($offset += $row['percent'])
                        @endforeach
                        <text x="21" y="20" text-anchor="middle" class="donut-number">{{ $questions->count() }}</text>
                        <text x="21" y="25" text-anchor="middle" class="donut-label">Butir</text>
                    </svg>
                    <div class="legend-list">
                        @foreach ($typeDiagram as $index => $row)
                            <div class="legend-item">
                                <i class="legend-dot segment-bg-{{ ($index % 6) + 1 }}"></i>
                                <span>{{ $row['label'] }}</span>
                                <strong>{{ $row['count'] }} ({{ number_format($row['percent'], 1, ',', '.') }}%)</strong>
                            </div>
                        @endforeach
                    </div>
                </div>
            @else
                <p class="empty-state">Belum ada pertanyaan yang dapat divisualisasikan.</p>
            @endif
        </div>

        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Grafik Tren Respons</h3>
                    <p>Perkembangan jumlah respons berdasarkan tanggal pengisian.</p>
                </div>
            </div>

            @if ($responseTrend->isNotEmpty())
                @php
                    $width = 620;
                    $height = 230;
                    $left = 46;
                    $right = 24;
                    $top = 28;
                    $bottom = 38;
                    $plotWidth = $width - $left - $right;
                    $plotHeight = $height - $top - $bottom;
                    $maxY = max(1, (int) $responseTrend->max('count'));
                    $countTrend = max(1, $responseTrend->count() - 1);
                    $points = $responseTrend->values()->map(function ($row, $i) use ($left, $top, $plotWidth, $plotHeight, $maxY, $countTrend) {
                        $x = $left + (($plotWidth / $countTrend) * $i);
                        $y = $top + ($plotHeight - (($row['count'] / $maxY) * $plotHeight));
                        return ['x' => round($x, 2), 'y' => round($y, 2), 'label' => $row['date'], 'count' => $row['count']];
                    });
                    $polyline = $points->map(fn ($p) => $p['x'].','.$p['y'])->implode(' ');
                    $area = $left.','.($top+$plotHeight).' '.$polyline.' '.($left+$plotWidth).','.($top+$plotHeight);
                @endphp
                <div class="svg-wrap">
                    <svg viewBox="0 0 {{ $width }} {{ $height }}" class="line-chart" role="img" aria-label="Grafik tren respons">
                        <line x1="{{ $left }}" y1="{{ $top + $plotHeight }}" x2="{{ $left + $plotWidth }}" y2="{{ $top + $plotHeight }}" class="axis"></line>
                        <line x1="{{ $left }}" y1="{{ $top }}" x2="{{ $left }}" y2="{{ $top + $plotHeight }}" class="axis"></line>
                        @for ($i = 0; $i <= 4; $i++)
                            @php($gridY = $top + (($plotHeight / 4) * $i))
                            <line x1="{{ $left }}" y1="{{ $gridY }}" x2="{{ $left + $plotWidth }}" y2="{{ $gridY }}" class="grid-line"></line>
                        @endfor
                        <polygon points="{{ $area }}" class="area-fill"></polygon>
                        <polyline points="{{ $polyline }}" class="trend-line" fill="none"></polyline>
                        @foreach ($points as $p)
                            <circle cx="{{ $p['x'] }}" cy="{{ $p['y'] }}" r="5" class="trend-point"></circle>
                            <text x="{{ $p['x'] }}" y="{{ $p['y'] - 10 }}" text-anchor="middle" class="point-label">{{ $p['count'] }}</text>
                        @endforeach
                        @foreach ($points->take(6) as $p)
                            <text x="{{ $p['x'] }}" y="{{ $height - 12 }}" text-anchor="middle" class="axis-label">{{ $p['label'] }}</text>
                        @endforeach
                    </svg>
                </div>
            @else
                <p class="empty-state">Belum ada respons untuk ditampilkan sebagai grafik tren.</p>
            @endif
        </div>
    </div>

    <div class="infographic-grid two-col">
        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Diagram Skor per Bagian</h3>
                    <p>Rata-rata skor dikelompokkan berdasarkan bagian/section instrumen.</p>
                </div>
            </div>
            @forelse ($sectionSummaries as $row)
                <div class="bar-row diagram-row">
                    <div class="bar-label">
                        <span>{{ $row['section'] }}</span>
                        <strong>{{ number_format($row['average'], 2, ',', '.') }}</strong>
                    </div>
                    <div class="bar-track tall"><div class="bar-fill" style="width: {{ $row['percent'] }}%;"></div></div>
                    <small>{{ $row['count'] }} jawaban berskor</small>
                </div>
            @empty
                <p class="empty-state">Belum ada data skor per bagian.</p>
            @endforelse
        </div>

        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Analisis Kesimpulan Otomatis</h3>
                    <p>Ringkasan interpretasi awal berdasarkan data kuantitatif dan kualitatif.</p>
                </div>
            </div>
            <div class="conclusion-box">
                <div class="conclusion-level">{{ $scoreLevel }}</div>
                <p>{{ $scoreInterpretation }}</p>
                <ol>
                    @foreach ($conclusionPoints as $point)
                        <li>{{ $point }}</li>
                    @endforeach
                </ol>
            </div>
        </div>
    </div>

    <div class="panel chart-card">
        <div class="chart-title">
            <div>
                <h3>Grafik Batang Rekap Skor Butir</h3>
                <p>Semakin panjang batang, semakin tinggi rata-rata skor pada butir tersebut.</p>
            </div>
        </div>

        @forelse ($rankedScoreSummaries as $row)
            <div class="score-item">
                <div class="score-head">
                    <div>
                        <strong>{{ $row['label'] }}. {{ $row['question']->question_text }}</strong>
                        <div class="muted">{{ $row['count'] }} jawaban berskor · minimum {{ $row['min'] }} · maksimum {{ $row['max'] }}</div>
                    </div>
                    <span class="score-badge">Rata-rata {{ number_format($row['average'], 2, ',', '.') }}</span>
                </div>
                <div class="bar-track"><div class="bar-fill" style="width: {{ $row['percent'] }}%;"></div></div>
            </div>
        @empty
            <p class="empty-state">Belum ada jawaban berskor. Gunakan tipe Likert/pilihan dengan skor untuk menampilkan grafik skor.</p>
        @endforelse
    </div>

    @if ($choiceSummaries->isNotEmpty())
        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Diagram Distribusi Jawaban Pilihan dan Likert</h3>
                    <p>Setiap butir ditampilkan sebagai diagram distribusi agar pola pilihan responden mudah dibaca.</p>
                </div>
            </div>

            <div class="choice-grid">
                @foreach ($choiceSummaries as $summary)
                    <div class="choice-card">
                        <div class="choice-question">
                            <strong>{{ $summary['question']->order_no }}. {{ $summary['question']->question_text }}</strong>
                            <span>{{ $summary['total'] }} responden menjawab</span>
                        </div>

                        @foreach ($summary['options'] as $option)
                            <div class="bar-row">
                                <div class="bar-label">
                                    <span>{{ $option['label'] }}</span>
                                    <strong>{{ $option['count'] }} ({{ number_format($option['percent'], 1, ',', '.') }}%)</strong>
                                </div>
                                <div class="bar-track"><div class="bar-fill soft" style="width: {{ $option['percent'] }}%;"></div></div>
                            </div>
                        @endforeach

                        @if (! empty($summary['dominant']) && ($summary['dominant']['count'] ?? 0) > 0)
                            <div class="dominant-note">Dominan: <strong>{{ $summary['dominant']['label'] }}</strong> ({{ number_format($summary['dominant']['percent'], 1, ',', '.') }}%)</div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    @if ($textSummaries->isNotEmpty())
        <div class="panel chart-card">
            <div class="chart-title">
                <div>
                    <h3>Analisis Kualitatif Jawaban Teks</h3>
                    <p>Cuplikan masukan responden untuk memperkuat interpretasi grafik.</p>
                </div>
            </div>
            <div class="quote-grid">
                @foreach ($textSummaries as $summary)
                    <div class="quote-card">
                        <strong>{{ $summary['question']->order_no }}. {{ $summary['question']->question_text }}</strong>
                        <span>{{ $summary['total'] }} jawaban teks</span>
                        <ul>
                            @foreach ($summary['answers'] as $answer)
                                <li>{{ $answer }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <style>
        .infographic-hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 18px;
            padding: 26px;
            border-radius: 28px;
            background: radial-gradient(circle at top right, rgba(70, 156, 255, .30), transparent 36%), linear-gradient(135deg, #08295f, #0f52ba 54%, #1b76ff);
            color: #fff;
            box-shadow: 0 24px 48px rgba(8, 41, 95, .22);
        }
        .infographic-hero h2 { margin: 6px 0; font-size: 2rem; }
        .infographic-hero p { margin: 0; font-size: 1.08rem; font-weight: 800; }
        .infographic-hero small { display: block; margin-top: 7px; opacity: .86; max-width: 820px; }
        .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
        .hero-actions form { margin: 0; }
        .reset-btn { background: #fff7e6 !important; color: #9a5b00 !important; border: 1px solid rgba(245,158,11,.45) !important; box-shadow: none !important; }
        .reset-btn:hover { background: #ffefc2 !important; }
        .reset-btn:disabled { opacity: .45; cursor: not-allowed; }
        .infographic-grid { display: grid; gap: 16px; margin-top: 16px; }
        .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .metric-card {
            border: 1px solid rgba(15,82,186,.14);
            border-radius: 22px;
            padding: 20px;
            background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.92));
            box-shadow: 0 16px 32px rgba(8,37,79,.08);
        }
        .metric-card span { display: block; color: #52657e; font-weight: 800; font-size: .86rem; }
        .metric-card strong { display: block; font-size: 2.15rem; color: #0f3f86; margin: 6px 0; }
        .metric-card small, .muted { color: #6c7d93; }
        .chart-card { border: 1px solid rgba(15,82,186,.12); box-shadow: 0 14px 28px rgba(8,37,79,.06); }
        .chart-title { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
        .chart-title h3 { margin: 0; color: var(--primary-dark); font-size: 1.22rem; }
        .chart-title p { margin: 4px 0 0; color: #60738d; }
        .donut-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; }
        .donut-chart { width: 220px; height: 220px; transform: rotate(-90deg); }
        .donut-bg { fill: none; stroke: #e4edf8; stroke-width: 6; }
        .donut-segment { fill: none; stroke-width: 6; stroke-linecap: round; }
        .donut-number, .donut-label { transform: rotate(90deg); transform-origin: center; fill: #0f3f86; font-weight: 900; }
        .donut-number { font-size: 7px; }
        .donut-label { font-size: 3px; fill: #60738d; }
        .segment-1 { stroke: #0f52ba; } .segment-2 { stroke: #39a0ff; } .segment-3 { stroke: #17a673; } .segment-4 { stroke: #f0a22e; } .segment-5 { stroke: #9b5de5; } .segment-6 { stroke: #ef476f; }
        .segment-bg-1 { background: #0f52ba; } .segment-bg-2 { background: #39a0ff; } .segment-bg-3 { background: #17a673; } .segment-bg-4 { background: #f0a22e; } .segment-bg-5 { background: #9b5de5; } .segment-bg-6 { background: #ef476f; }
        .legend-list { display: grid; gap: 10px; }
        .legend-item { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed #dce8f8; padding-bottom: 9px; }
        .legend-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
        .legend-item span { flex: 1; color: #425873; }
        .legend-item strong { color: #0f3f86; white-space: nowrap; }
        .svg-wrap { overflow-x: auto; }
        .line-chart { width: 100%; min-width: 520px; height: auto; }
        .axis { stroke: #9ab3d3; stroke-width: 2; }
        .grid-line { stroke: #e4edf8; stroke-width: 1; }
        .area-fill { fill: rgba(57,160,255,.13); }
        .trend-line { stroke: #0f52ba; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
        .trend-point { fill: #fff; stroke: #0f52ba; stroke-width: 3; }
        .point-label { fill: #0f3f86; font-size: 12px; font-weight: 900; }
        .axis-label { fill: #60738d; font-size: 10px; }
        .bar-row { margin: 12px 0; }
        .bar-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: .92rem; }
        .bar-label span { color: #60738d; }
        .bar-label strong { color: #0f3f86; }
        .bar-track { width: 100%; height: 12px; background: #e6eef9; border-radius: 999px; overflow: hidden; }
        .bar-track.tall { height: 16px; }
        .bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f52ba, #39a0ff); }
        .bar-fill.soft { background: linear-gradient(90deg, #17a673, #39d98a); }
        .diagram-row small { display: block; margin-top: 5px; color: #6c7d93; }
        .score-item { padding: 14px 0; border-bottom: 1px solid rgba(15,82,186,.1); }
        .score-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
        .score-badge { white-space: nowrap; align-self: flex-start; background: #eef6ff; border: 1px solid #cfe3fb; color: #0f52ba; font-weight: 800; padding: 7px 11px; border-radius: 999px; }
        .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .choice-card { border: 1px solid #dbeafa; border-radius: 20px; padding: 16px; background: #f8fbff; }
        .choice-question { display: grid; gap: 4px; margin-bottom: 10px; }
        .choice-question span, .quote-card span { color: #6c7d93; font-size: .88rem; }
        .dominant-note { margin-top: 12px; padding: 9px 12px; border-radius: 14px; background: #eef9f4; color: #075435; border: 1px solid #c8eadb; }
        .conclusion-box { border-radius: 20px; padding: 18px; background: linear-gradient(180deg, #f5f9ff, #fff); border: 1px solid #d8e7fb; }
        .conclusion-level { display: inline-flex; padding: 8px 13px; border-radius: 999px; background: #e8f2ff; color: #0f52ba; font-weight: 900; margin-bottom: 10px; }
        .conclusion-box p { color: #425873; margin: 0 0 10px; }
        .conclusion-box ol { margin: 0; padding-left: 20px; color: #334963; }
        .conclusion-box li { margin-bottom: 8px; }
        .quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
        .quote-card { background: #f7fbff; border: 1px solid #dbeafa; border-radius: 18px; padding: 14px; }
        .quote-card ul { margin: 10px 0 0; padding-left: 18px; color: #41546d; }
        .empty-state { color: #6c7d93; background: #f7fbff; border: 1px dashed #cfe0f7; padding: 14px; border-radius: 16px; }
        @media (max-width: 980px) {
            .infographic-hero { flex-direction: column; align-items: flex-start; }
            .metrics-grid, .two-col, .choice-grid, .quote-grid, .donut-layout { grid-template-columns: 1fr; }
        }
    </style>
@endsection